/* ================== TORA FLASHCARD LEARNING MODES - v4 (Đồng bộ hoàn toàn, Light/Dark mode, áp dụng bảng màu Quiz/Tora) ================== */
/* Namespace: .tora-flashcard-plugin */

/* ======= BẢNG MÀU TORA ĐỒNG BỘ (theo guideline Quiz chuẩn hóa) ======= */

/* Light mode */
.tora-flashcard-plugin.tora-light-mode {
    /* Primary Brand Colors */
    --tora-primary: #FF6B00;
    --tora-primary-hover: #e65f00;
    --tora-secondary: #00B389;

    /* Accent Colors */
    --tora-accent: #1976D2;
    --tora-accent-hover: #145ea8;

    /* Info/Status Colors */
    --tora-info: #0097A7;
    --tora-info-bg: #E0F7FA;
    --tora-success: #2E7D32;
    --tora-success-bg: #E6FCF4;
    --tora-error: #E53935;
    --tora-error-bg: #FFECEC;
    --tora-warning: #FDC800;
    --tora-warning-bg: #FEF6E0;

    /* Neutral/Surface Colors */
    --tora-bg-light: #FFFFFF;
    --tora-bg-dark: #0F172A;
    --tora-surface: #F8F9FB;
    --tora-surface-dark: #1e293b;
    --tora-card-bg: #F8F9FB;
    --tora-card-bg-dark: #162032;
    --tora-border: #E0E0E0;
    --tora-divider: #D9D9D9;
    --tora-hover: #FFF5EC;
    --tora-quiz-hover: #FFEEE0;

    /* Special backgrounds */
    --tora-blue-bg: #C7F1FF;

    /* Text */
    --tora-text-main: #222B45;
    --tora-text-sub: #666666;
    --tora-text-light: #FFFFFF;
    --tora-text-dark: #1A1A1A;
    --tora-text-disabled: #B0B4BA;
}

/* Dark mode */
.tora-flashcard-plugin.tora-dark-mode {
    /* Primary Brand Colors */
    --tora-primary: #FF6B00;
    --tora-primary-hover: #e65f00;
    --tora-secondary: #00B389;

    /* Accent Colors */
    --tora-accent: #1976D2;
    --tora-accent-hover: #145ea8;

    /* Info/Status Colors */
    --tora-info: #0097A7;
    --tora-info-bg: #1A2A3A;
    --tora-success: #2E7D32;
    --tora-success-bg: #1e2f26;
    --tora-error: #E53935;
    --tora-error-bg: #331a1a;
    --tora-warning: #FDC800;
    --tora-warning-bg: #2d2917;

    /* Neutral/Surface Colors */
    --tora-bg-light: #FFFFFF;
    --tora-bg-dark: #0F172A;
    --tora-surface: #1e293b;
    --tora-surface-dark: #1e293b;
    --tora-card-bg: #162032;
    --tora-card-bg-dark: #162032;
    --tora-border: #222e3c;
    --tora-divider: #283046;
    --tora-hover: #2B2320;
    --tora-quiz-hover: #2B2320;

    /* Special backgrounds */
    --tora-blue-bg: #15243B;

    /* Text */
    --tora-text-main: #F1F5F9;
    --tora-text-sub: #A3AED6;
    --tora-text-light: #FFFFFF;
    --tora-text-dark: #F1F5F9;
    --tora-text-disabled: #5A5A72;
}

/* ================== LEARNING MODES LAYOUT ================== */

.tora-flashcard-plugin .learning-modes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    padding: 0;
    margin: 20px 0;
/*    background: var(--tora-blue-bg);*/
    box-sizing: border-box;
}

/* Mode Item */
.tora-flashcard-plugin .mode-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--tora-card-bg);
    border-radius: 10px;
    border: 2px solid var(--tora-info);
    box-shadow: 0 6px 12px var(--tora-border);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    text-align: center;
    color: var(--tora-text-main);
    box-sizing: border-box;
}
.tora-flashcard-plugin .mode-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 24px var(--tora-accent);
}

/* Mode Icon */
.tora-flashcard-plugin .mode-icon {
    font-size: 36px;
    color: var(--tora-info);
    margin-bottom: 0.67rem;
    font-family: "Font Awesome 6 Free", Arial, sans-serif !important;
    font-weight: 900 !important;
    display: inline-block;
    line-height: 1;
    width: auto;
    height: auto;
}

/* Mode Text */
.tora-flashcard-plugin .mode-item span {
    font-size: 20px;
    font-weight: 500;
    color: var(--tora-text-main);
    font-family: "Be VNPro", Arial, sans-serif;
}

/* =================== Responsive =================== */
@media (max-width: 768px) {
    .tora-flashcard-plugin .learning-modes {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .tora-flashcard-plugin .mode-item {
        padding: 0.67rem;
    }
    .tora-flashcard-plugin .mode-icon {
        font-size: 20px;
    }
    .tora-flashcard-plugin .mode-item span {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .tora-flashcard-plugin .learning-modes {
        gap: 1rem;
    }
    .tora-flashcard-plugin .mode-item {
        padding: 0.44rem;
    }
    .tora-flashcard-plugin .mode-icon {
        font-size: 16px;
    }
    .tora-flashcard-plugin .mode-item span {
        font-size: 13px;
    }
}

.tora-flashcard-plugin .learn-actions-top {
    display: flex;
    align-items: center;
    justify-content: space-between; /* tách đều 2 bên */
    margin-bottom: 20px;
}

/* Căn trái */
.tora-flashcard-plugin .learn-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--tora-text-main);
}

/* Light/Dark hỗ trợ nếu cần */
.tora-flashcard-plugin.tora-light-mode .learn-title {
    color: var(--tora-text-dark);
}
.tora-flashcard-plugin.tora-dark-mode .learn-title {
    color: var(--tora-text-light);
}