/* =========================================================
   MasterTeacherAi - THEME VISIBILITY FIXES ONLY
   ONLY text / border / background visibility fixes
   NO layout changes
   NO button redesign
   NO structure changes
   Load LAST
   ========================================================= */


/* =========================================================
   1) THEME TOKENS
   ========================================================= */

html.dark {
    --tv-text-main: rgba(255,255,255,.96);
    --tv-text-soft: rgba(255,255,255,.86);
    --tv-text-muted: rgba(255,255,255,.68);
    --tv-text-faint: rgba(255,255,255,.50);
    --tv-card-border: rgba(255,255,255,.12);
    --tv-card-border-strong: rgba(255,255,255,.18);
    --tv-card-bg-soft: rgba(255,255,255,.04);
    --tv-card-bg-soft-2: rgba(255,255,255,.06);
    --tv-input-bg: rgba(255,255,255,.05);
    --tv-input-border: rgba(255,255,255,.13);
    --tv-input-placeholder: rgba(255,255,255,.48);
    --tv-table-head: rgba(255,255,255,.05);
    --tv-chip-bg: rgba(255,255,255,.07);
    --tv-chip-border: rgba(255,255,255,.16);
}

html.light {
    --tv-text-main: #162133;
    --tv-text-soft: #2d394b;
    --tv-text-muted: #677487;
    --tv-text-faint: #8792a3;
    --tv-card-border: rgba(18,28,45,.10);
    --tv-card-border-strong: rgba(18,28,45,.16);
    --tv-card-bg-soft: #ffffff;
    --tv-card-bg-soft-2: #f5f8fc;
    --tv-input-bg: #ffffff;
    --tv-input-border: rgba(18,28,45,.12);
    --tv-input-placeholder: #8b95a4;
    --tv-table-head: #f3f6fb;
    --tv-chip-bg: #f4f7fb;
    --tv-chip-border: rgba(18,28,45,.10);
}


    /* =========================================================
   2) GLOBAL TEXT VISIBILITY
   ========================================================= */

    html.light body,
    html.dark body {
        color: var(--tv-text-main);
    }

    html.light h1,
    html.light h2,
    html.light h3,
    html.light h4,
    html.light h5,
    html.light h6,
    html.dark h1,
    html.dark h2,
    html.dark h3,
    html.dark h4,
    html.dark h5,
    html.dark h6 {
        color: var(--tv-text-main);
    }

    html.light .text-muted,
    html.light .mt-muted,
    html.light .subject-sub,
    html.light .test-pro-sub,
    html.light .test-pro-hint,
    html.light .mt-math-help,
    html.light .mt-score-hint,
    html.light .mt-score-sub,
    html.light .topics-empty,
    html.light .mt-empty-text,
    html.light .mt-page-sub,
    html.light .mt-subject-rating,
    html.light .mt-subject-pct-label,
    html.light .ranges-list span,
    html.light .subject-card-label,
    html.light .plan-card .text-muted,
    html.light .card .text-muted {
        color: var(--tv-text-muted) !important;
    }

html.dark .text-muted,
html.dark .mt-muted,
html.dark .subject-sub,
html.dark .test-pro-sub,
html.dark .test-pro-hint,
html.dark .mt-math-help,
html.dark .mt-score-hint,
html.dark .mt-score-sub,
html.dark .topics-empty,
html.dark .mt-empty-text,
html.dark .mt-page-sub,
html.dark .mt-subject-rating,
html.dark .mt-subject-pct-label,
html.dark .ranges-list span,
html.dark .subject-card-label,
html.dark .plan-card .text-muted,
html.dark .card .text-muted {
    color: var(--tv-text-muted) !important;
}


/* =========================================================
   3) GENERIC BOXES / CARDS / BORDERS VISIBILITY
   only visibility, no layout
   ========================================================= */

html.light .card,
html.light .plan-card,
html.light .subject-head,
html.light .subject-ranges,
html.light .subject-card,
html.light .subject-topics,
html.light .topics-table,
html.light .test-pro-card,
html.light .mt-test-card,
html.light .mt-scorebox,
html.light .mt-q,
html.light .mt-empty,
html.light .subjects-my .mt-subject-card-v2,
html.light .mt-archive-card {
    border-color: var(--tv-card-border) !important;
}

html.dark .card,
html.dark .plan-card,
html.dark .subject-head,
html.dark .subject-ranges,
html.dark .subject-card,
html.dark .subject-topics,
html.dark .topics-table,
html.dark .test-pro-card,
html.dark .mt-test-card,
html.dark .mt-scorebox,
html.dark .mt-q,
html.dark .mt-empty,
html.dark .subjects-my .mt-subject-card-v2,
html.dark .mt-archive-card {
    border-color: var(--tv-card-border) !important;
}


/* =========================================================
   4) HOME / INDEX
   only text visibility fixes
   ========================================================= */

html.light .hero,
html.light .hero * {
    color: inherit;
}

    html.light .hero .heading-xl,
    html.light .hero h1,
    html.light .hero h2,
    html.light .hero h3 {
        color: var(--tv-text-main) !important;
    }

    html.light .hero .text-normal,
    html.light .hero p,
    html.light .hero .text-muted {
        color: var(--tv-text-soft) !important;
    }

html.light .hero-visual {
    border-color: rgba(80,100,140,.18) !important;
}

html.light .card .heading-lg,
html.light .card .heading-md,
html.light .plan-card .heading-md,
html.light .card h2,
html.light .card h3,
html.light .plan-card h3 {
    color: var(--tv-text-main) !important;
}

html.light .plan-features li,
html.light .card-body p,
html.light .card-body span {
    color: var(--tv-text-soft) !important;
}

html.dark .hero .heading-xl,
html.dark .hero h1,
html.dark .hero h2,
html.dark .hero h3,
html.dark .card .heading-lg,
html.dark .card .heading-md,
html.dark .plan-card .heading-md,
html.dark .card h2,
html.dark .card h3,
html.dark .plan-card h3 {
    color: var(--tv-text-main) !important;
}

html.dark .hero .text-normal,
html.dark .hero p,
html.dark .plan-features li,
html.dark .card-body p,
html.dark .card-body span {
    color: var(--tv-text-soft) !important;
}


/* =========================================================
   5) SUBJECTS / MY
   keep look, only improve percentage visibility
   ========================================================= */

.subjects-my .mt-subject-pct {
    text-align: center !important;
}

.subjects-my .mt-subject-pct-num {
    font-size: 20px !important;
    line-height: 1.05 !important;
    display: block !important;
    text-align: center !important;
}

.subjects-my .mt-subject-pct-label {
    display: block !important;
    text-align: center !important;
}

html.light .subjects-my .mt-subject-pct {
    background: #f5f7fb !important;
    border: 1px solid rgba(18,28,45,.10) !important;
}

html.dark .subjects-my .mt-subject-pct {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
}

html.light .subjects-my .mt-subject-title,
html.light .subjects-my .mt-subject-open,
html.light .subjects-my .mt-subject-pct-num {
    color: var(--tv-text-main) !important;
}

html.dark .subjects-my .mt-subject-title,
html.dark .subjects-my .mt-subject-open,
html.dark .subjects-my .mt-subject-pct-num {
    color: var(--tv-text-main) !important;
}


/* =========================================================
   6) SUBJECTS / DETAILS
   only visibility fixes, no layout
   ========================================================= */

html.light .subject-title,
html.light .subject-card-value,
html.light .topics-title,
html.light .topics-topic,
html.light .ranges-title,
html.light .ranges-list b,
html.light .subject-badge,
html.light .subject-score {
    color: var(--tv-text-main) !important;
}

html.dark .subject-title,
html.dark .subject-card-value,
html.dark .topics-title,
html.dark .topics-topic,
html.dark .ranges-title,
html.dark .ranges-list b,
html.dark .subject-badge,
html.dark .subject-score {
    color: var(--tv-text-main) !important;
}

html.light .topics-head {
    background: var(--tv-table-head) !important;
    color: var(--tv-text-main) !important;
}

html.dark .topics-head {
    background: var(--tv-table-head) !important;
    color: var(--tv-text-main) !important;
}

html.light .topics-row {
    color: var(--tv-text-soft) !important;
    border-bottom-color: rgba(18,28,45,.08) !important;
}

html.dark .topics-row {
    color: var(--tv-text-soft) !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
}


/* =========================================================
   7) TEST CREATE
   only labels / text / inputs / subtle cards visibility
   NO button redesign
   NO layout changes
   ========================================================= */

html.light .test-pro-title h1,
html.light .test-pro-label,
html.light .test-pro-switch-title {
    color: var(--tv-text-main) !important;
}

html.dark .test-pro-title h1,
html.dark .test-pro-label,
html.dark .test-pro-switch-title {
    color: var(--tv-text-main) !important;
}

html.light .test-pro-sub,
html.light .test-pro-note,
html.light .test-pro-hint {
    color: var(--tv-text-muted) !important;
}

html.dark .test-pro-sub,
html.dark .test-pro-note,
html.dark .test-pro-hint {
    color: var(--tv-text-muted) !important;
}

html.light .test-pro-input,
html.light input.test-pro-input,
html.light textarea.test-pro-input,
html.light select.test-pro-input {
    background: var(--tv-input-bg) !important;
    color: var(--tv-text-main) !important;
    border: 1px solid var(--tv-input-border) !important;
}

html.dark .test-pro-input,
html.dark input.test-pro-input,
html.dark textarea.test-pro-input,
html.dark select.test-pro-input {
    background: var(--tv-input-bg) !important;
    color: var(--tv-text-main) !important;
    border: 1px solid var(--tv-input-border) !important;
}

html.light .test-pro-input::placeholder,
html.light input.test-pro-input::placeholder,
html.light textarea.test-pro-input::placeholder {
    color: var(--tv-input-placeholder) !important;
    opacity: 1 !important;
}

html.dark .test-pro-input::placeholder,
html.dark input.test-pro-input::placeholder,
html.dark textarea.test-pro-input::placeholder {
    color: var(--tv-input-placeholder) !important;
    opacity: 1 !important;
}

html.light .test-pro-switch-card {
    background: #f7f9fc !important;
    border: 1px solid rgba(18,28,45,.10) !important;
}

html.dark .test-pro-switch-card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
}

/* fix native form controls without redesign */
html.light input,
html.light textarea,
html.light select {
    color: inherit;
}

html.dark input,
html.dark textarea,
html.dark select {
    color: inherit;
}


/* =========================================================
   8) TEST VIEW
   only visibility fixes
   NO structure changes
   ========================================================= */

html.light .mt-test-card h1,
html.light .mt-test-card h2,
html.light .mt-test-card h3,
html.light .mt-test-card h4,
html.light .mt-q-text,
html.light .mt-score-title,
html.light .mt-score-value,
html.light .mt-result-score,
html.light .mt-correct-label,
html.light .mt-feedback-label,
html.light .mt-ans-text,
html.light .mt-badge,
html.light .mt-q-num {
    color: var(--tv-text-main) !important;
}

html.dark .mt-test-card h1,
html.dark .mt-test-card h2,
html.dark .mt-test-card h3,
html.dark .mt-test-card h4,
html.dark .mt-q-text,
html.dark .mt-score-title,
html.dark .mt-score-value,
html.dark .mt-result-score,
html.dark .mt-correct-label,
html.dark .mt-feedback-label,
html.dark .mt-ans-text,
html.dark .mt-badge,
html.dark .mt-q-num {
    color: var(--tv-text-main) !important;
}

/* specific fix: question numbers in dark */
html.dark .mt-q-num,
html.dark .mt-q-head .mt-q-num {
    color: rgba(255,255,255,.96) !important;
}

html.light .mt-score-sub,
html.light .mt-score-hint,
html.light .mt-correct-text,
html.light .mt-feedback-text,
html.light .mt-math-help {
    color: var(--tv-text-muted) !important;
}

html.dark .mt-score-sub,
html.dark .mt-score-hint,
html.dark .mt-correct-text,
html.dark .mt-feedback-text,
html.dark .mt-math-help {
    color: var(--tv-text-muted) !important;
}

html.light .mt-ans {
    background: #f8fafd !important;
    border-color: rgba(18,28,45,.10) !important;
}

html.dark .mt-ans {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.12) !important;
}

html.light .mt-result {
    border-top-color: rgba(18,28,45,.12) !important;
}

html.dark .mt-result {
    border-top-color: rgba(255,255,255,.16) !important;
}

html.light .mt-badge {
    background: var(--tv-chip-bg) !important;
    border: 1px solid var(--tv-chip-border) !important;
}

html.dark .mt-badge {
    background: var(--tv-chip-bg) !important;
    border: 1px solid var(--tv-chip-border) !important;
}

html.light .mt-answer-field {
    background: #ffffff !important;
    color: var(--tv-text-main) !important;
    border: 1px solid rgba(18,28,45,.12) !important;
}

html.dark .mt-answer-field {
    background: rgba(255,255,255,.05) !important;
    color: var(--tv-text-main) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
}

html.light .mt-answer-field::part(content) {
    color: var(--tv-text-main);
}

html.dark .mt-answer-field::part(content) {
    color: var(--tv-text-main);
}

html.light .mt-q-image img {
    border-color: rgba(18,28,45,.10) !important;
}

html.dark .mt-q-image img {
    border-color: rgba(255,255,255,.12) !important;
}


/* =========================================================
   9) MODAL / ALERTS
   visibility only
   ========================================================= */

html.light .mt-archive-card {
    background: #ffffff !important;
    border: 1px solid rgba(18,28,45,.10) !important;
    color: var(--tv-text-main) !important;
}

html.dark .mt-archive-card {
    color: var(--tv-text-main) !important;
}

html.light .mt-archive-title,
html.dark .mt-archive-title {
    color: var(--tv-text-main) !important;
}

html.light .mt-archive-text,
html.dark .mt-archive-text {
    color: var(--tv-text-muted) !important;
}

html.light .alert-warning {
    color: #7a5d00 !important;
}

html.dark .alert-warning {
    color: #ffd978 !important;
}

html.light .alert-danger,
html.light #mtFinishError,
html.light .test-pro-errors {
    color: #b62b36 !important;
}

html.dark .alert-danger,
html.dark #mtFinishError,
html.dark .test-pro-errors {
    color: #ffc1c7 !important;
}


/* =========================================================
   10) SMALL SAFETY FIXES
   ========================================================= */

html.light .subject-badge,
html.light .mt-badge {
    background: #f4f7fb !important;
    border-color: rgba(18,28,45,.10) !important;
}

html.dark .subject-badge,
html.dark .mt-badge {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.16) !important;
}

html.light .subject-score {
    color: #d33a47 !important;
}

html.dark .subject-score {
    color: #ff808b !important;
}

/* do not touch button colors/design */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.test-pro-cta,
.test-pro-upgrade,
.mt-subject-details-btn,
.mt-subject-delete-btn,
.mt-archive-confirm,
.mt-archive-cancel {
    filter: none !important;
}
/* Lesson/Test select fix - dark/light */
html.dark select,
html.dark .form-select,
html.dark option,
body.dark select,
body.dark .form-select,
body.dark option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.16) !important;
}

html.light select,
html.light .form-select,
html.light option,
body.light select,
body.light .form-select,
body.light option {
    background-color: #ffffff !important;
    color: #111827 !important;
}

.mt-settings-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mt-settings-icon-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18.5px; /* אפשר לשחק עם זה */
    line-height: 1;
    transform:translate(0.5px,0.5px);
}
/* =========================================================
   Compact AI quota / rate-limit badge
   Works for Tests + Lessons
   Dark / Light / RTL / LTR
   ========================================================= */

.mt-quota-wrap {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 16px;
}

.mt-quota {
    --mt-quota-bg: rgba(255, 255, 255, 0.72);
    --mt-quota-border: rgba(15, 23, 42, 0.08);
    --mt-quota-text: #0f172a;
    --mt-quota-muted: #64748b;
    --mt-quota-pill-bg: rgba(59, 130, 246, 0.10);
    --mt-quota-pill-text: #1d4ed8;
    --mt-quota-accent: #2563eb;
    --mt-quota-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--mt-quota-border);
    background: var(--mt-quota-bg);
    color: var(--mt-quota-text);
    box-shadow: var(--mt-quota-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 100%;
    flex-wrap: wrap;
}

html.dark .mt-quota {
    --mt-quota-bg: rgba(15, 23, 42, 0.72);
    --mt-quota-border: rgba(255, 255, 255, 0.08);
    --mt-quota-text: #e5eefc;
    --mt-quota-muted: rgba(226, 232, 240, 0.72);
    --mt-quota-pill-bg: rgba(59, 130, 246, 0.16);
    --mt-quota-pill-text: #bfdbfe;
    --mt-quota-accent: #60a5fa;
    --mt-quota-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

.mt-quota--unlimited {
    --mt-quota-pill-bg: rgba(16, 185, 129, 0.14);
    --mt-quota-pill-text: #047857;
    --mt-quota-accent: #10b981;
}

html.dark .mt-quota--unlimited {
    --mt-quota-pill-bg: rgba(16, 185, 129, 0.18);
    --mt-quota-pill-text: #a7f3d0;
    --mt-quota-accent: #34d399;
}

.mt-quota__icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-quota-pill-bg);
    color: var(--mt-quota-pill-text);
    font-size: 0.95rem;
    flex: 0 0 auto;
}

.mt-quota__body {
    display: inline-flex;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.mt-quota__label {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--mt-quota-muted);
    white-space: nowrap;
}

.mt-quota__count {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mt-quota-pill-bg);
    color: var(--mt-quota-pill-text);
    line-height: 1;
    white-space: nowrap;
}

.mt-quota__count-main {
    font-size: 0.96rem;
    font-weight: 800;
}

.mt-quota__count-sub {
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.85;
}

.mt-quota__sep {
    width: 1px;
    height: 18px;
    background: var(--mt-quota-border);
    flex: 0 0 auto;
}

.mt-quota__meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--mt-quota-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

    .mt-quota__meta strong {
        color: var(--mt-quota-text);
        font-weight: 700;
    }

.mt-quota__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--mt-quota-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mt-quota-accent) 14%, transparent);
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .mt-quota-wrap {
        margin-bottom: 14px;
    }

    .mt-quota {
        width: 100%;
        border-radius: 18px;
        padding: 10px 12px;
        gap: 10px;
        align-items: flex-start;
    }

    .mt-quota__body {
        width: 100%;
        align-items: center;
    }

    .mt-quota__sep {
        display: none;
    }

    .mt-quota__meta {
        width: 100%;
        white-space: normal;
        line-height: 1.45;
    }
}