/**
 * IELTS Pro LMS — Design System Tokens
 * File: assets/css/ielts-lms-tokens.css
 *
 * PURPOSE: Single source of truth for all design values.
 *   Every other CSS file in this plugin MUST consume these
 *   variables instead of hard-coding hex values or sizes.
 *
 * HOW TO USE:
 *   color: var(--ielts-lms-text-primary);
 *   border-radius: var(--ielts-lms-radius-md);
 *   box-shadow: var(--ielts-lms-shadow-card);
 *
 * LOAD ORDER: This file must be enqueued BEFORE all other
 *   ielts-pro-lms stylesheets.
 */

/* =====================================================
   SECTION 1 — ROOT TOKENS (applied globally in plugin scope)
   ===================================================== */
:root {

    /* --- COLOR PALETTE --- */

    /* Primary brand — Blue */
    --ielts-lms-primary:           #2563eb;
    --ielts-lms-primary-rgb:       37, 99, 235;       /* for rgba() usage */
    --ielts-lms-primary-dark:      #1d4ed8;
    --ielts-lms-primary-light:     #dbeafe;
    --ielts-lms-primary-surface:   #eff6ff;

    /* Secondary — Slate */
    --ielts-lms-secondary:         #64748b;
    --ielts-lms-secondary-dark:    #475569;
    --ielts-lms-secondary-light:   #f1f5f9;

    /* Module accent colours */
    --ielts-lms-listening:         #0284c7;   /* sky-600 */
    --ielts-lms-reading:           #2563eb;   /* blue-600 */
    --ielts-lms-writing:           #7c3aed;   /* violet-600 */
    --ielts-lms-speaking:          #db2777;   /* pink-600 */
    --ielts-lms-mock:              #059669;   /* emerald-600 */

    /* Semantic states */
    --ielts-lms-success:           #16a34a;
    --ielts-lms-success-surface:   #dcfce7;
    --ielts-lms-warning:           #d97706;
    --ielts-lms-warning-surface:   #fef3c7;
    --ielts-lms-danger:            #dc2626;
    --ielts-lms-danger-surface:    #fee2e2;
    --ielts-lms-info:              #0891b2;
    --ielts-lms-info-surface:      #cffafe;

    /* Neutral greys */
    --ielts-lms-text-primary:      #0f172a;   /* slate-950 */
    --ielts-lms-text-body:         #1e293b;   /* slate-800 */
    --ielts-lms-text-secondary:    #475569;   /* slate-600 */
    --ielts-lms-text-muted:        #64748b;   /* slate-500 */
    --ielts-lms-text-placeholder:  #94a3b8;   /* slate-400 */
    --ielts-lms-text-disabled:     #cbd5e1;   /* slate-300 */
    --ielts-lms-text-inverse:      #ffffff;

    /* Surface / background */
    --ielts-lms-bg-page:           #f8fafc;   /* site canvas */
    --ielts-lms-bg-canvas:         #ffffff;
    --ielts-lms-bg-subtle:         #f1f5f9;
    --ielts-lms-bg-muted:          #e2e8f0;

    /* Borders */
    --ielts-lms-border:            #e2e8f0;
    --ielts-lms-border-strong:     #cbd5e1;
    --ielts-lms-border-focus:      var(--ielts-lms-primary);

    /* --- TYPOGRAPHY --- */

    /* Font stack — system first, no Google Fonts CDN dependency in production */
    --ielts-lms-font-bangla:       "Tiro Bangla", "Noto Serif Bengali", serif;
    --ielts-lms-font-sans:         "Inter", -apple-system, BlinkMacSystemFont,
                                   "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ielts-lms-font-mono:         "Consolas", "Monaco", "Courier New", monospace;

    /* Fluid scale (mobile → desktop) — use clamp() on headings */
    --ielts-lms-text-xs:           0.75rem;    /* 12px */
    --ielts-lms-text-sm:           0.8125rem;  /* 13px */
    --ielts-lms-text-base:         0.875rem;   /* 14px — base WP admin size */
    --ielts-lms-text-md:           1rem;       /* 16px */
    --ielts-lms-text-lg:           1.125rem;   /* 18px */
    --ielts-lms-text-xl:           1.25rem;    /* 20px */
    --ielts-lms-text-2xl:          clamp(1.25rem, 2vw, 1.5rem);   /* 20–24px */
    --ielts-lms-text-3xl:          clamp(1.375rem, 2.5vw, 1.875rem); /* 22–30px */
    --ielts-lms-text-display:      clamp(1.5rem, 3vw, 2.25rem);   /* 24–36px */

    --ielts-lms-font-normal:       400;
    --ielts-lms-font-medium:       500;
    --ielts-lms-font-semibold:     600;
    --ielts-lms-font-bold:         700;
    --ielts-lms-font-extrabold:    800;

    --ielts-lms-leading-tight:     1.25;
    --ielts-lms-leading-snug:      1.375;
    --ielts-lms-leading-normal:    1.5;
    --ielts-lms-leading-relaxed:   1.625;
    --ielts-lms-leading-loose:     1.75;

    /* --- SPACING SCALE --- */
    --ielts-lms-space-1:    4px;
    --ielts-lms-space-2:    8px;
    --ielts-lms-space-3:    12px;
    --ielts-lms-space-4:    16px;
    --ielts-lms-space-5:    20px;
    --ielts-lms-space-6:    24px;
    --ielts-lms-space-7:    28px;
    --ielts-lms-space-8:    32px;
    --ielts-lms-space-10:   40px;
    --ielts-lms-space-12:   48px;
    --ielts-lms-space-16:   64px;

    /* --- BORDER RADIUS --- */
    --ielts-lms-radius-sm:   6px;    /* tags, badges */
    --ielts-lms-radius-md:   8px;    /* inputs, small buttons */
    --ielts-lms-radius-lg:   12px;   /* cards (standard) */
    --ielts-lms-radius-xl:   16px;   /* cards (large / hero) */
    --ielts-lms-radius-2xl:  20px;   /* modal overlays */
    --ielts-lms-radius-full: 9999px; /* pills, circular badges */

    /* --- SHADOW SYSTEM --- */
    /* Follows the "app-like softness" principle: no hard, dark shadows */
    --ielts-lms-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
    --ielts-lms-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.04),
                              0 1px 6px rgba(0, 0, 0, 0.03);
    --ielts-lms-shadow-card:  0 4px 20px rgba(0, 0, 0, 0.08);  /* standard card */
    --ielts-lms-shadow-md:    0 4px 6px  rgba(0, 0, 0, 0.05),
                              0 10px 15px rgba(0, 0, 0, 0.04);
    --ielts-lms-shadow-lg:    0 10px 25px rgba(0, 0, 0, 0.10);
    --ielts-lms-shadow-focus: 0 0 0 3px rgba(var(--ielts-lms-primary-rgb), 0.30);

    /* --- TRANSITION --- */
    /* IMPORTANT: Scope transitions to specific properties (not "all")
       for GPU-compositable animations on mobile. */
    --ielts-lms-ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --ielts-lms-ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ielts-lms-ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ielts-lms-duration-fast:   120ms;
    --ielts-lms-duration-base:   180ms;
    --ielts-lms-duration-slow:   300ms;

    /* Compositable transition shorthand values */
    --ielts-lms-transition-colors:    color var(--ielts-lms-duration-fast) var(--ielts-lms-ease),
                                      background-color var(--ielts-lms-duration-fast) var(--ielts-lms-ease),
                                      border-color var(--ielts-lms-duration-fast) var(--ielts-lms-ease);
    --ielts-lms-transition-shadow:    box-shadow var(--ielts-lms-duration-base) var(--ielts-lms-ease);
    --ielts-lms-transition-transform: transform var(--ielts-lms-duration-base) var(--ielts-lms-ease);
    --ielts-lms-transition-opacity:   opacity var(--ielts-lms-duration-base) var(--ielts-lms-ease);

    /* --- LAYOUT BREAKPOINTS (reference values — use @media, not var()) --- */
    /* mobile:   < 480px                                                    */
    /* phablet:  >= 480px                                                   */
    /* tablet:   >= 768px                                                   */
    /* desktop:  >= 1024px                                                  */
    /* 14-inch:  >= 1366px  (PRIMARY TARGET per spec)                       */
    /* wide:     >= 1440px                                                  */
    /* xl:       >= 1600px                                                  */

    /* --- Z-INDEX SCALE --- */
    --ielts-lms-z-base:       1;
    --ielts-lms-z-raised:     10;
    --ielts-lms-z-sticky:     50;         /* top-bar, headers */
    --ielts-lms-z-dropdown:   100;        /* font popup, volume popup */
    --ielts-lms-z-sidebar:    900;        /* notes sidebar */
    --ielts-lms-z-footer:     1000;       /* pagination footer, select dropdowns */
    --ielts-lms-z-nav:        1001;       /* nav-controls (above footer) */
    --ielts-lms-z-focus:      9999;       /* focus-mode (all modules) */
    --ielts-lms-z-modal:      10000;      /* modals, overlays */
    --ielts-lms-z-popup:      10001;      /* text-action popups, tooltips over modals */
    --ielts-lms-z-vocab:      10002;      /* vocab modal (above popups) */
    --ielts-lms-z-mask:       99999;      /* opaque/speaking overlay masks */
    --ielts-lms-z-fullscreen: 2147482000; /* fullscreen shell (mock/tutor) */
    --ielts-lms-z-top:        2147483000; /* mock fullscreen shell */
    --ielts-lms-z-guard:      2147483646; /* mock transition guard */

    /* --- TOUCH TARGET MINIMUM SIZE --- */
    /* All interactive elements MUST meet this on mobile */
    --ielts-lms-touch-target: 44px;

    /* --- CONTENT WIDTHS --- */
    --ielts-lms-max-admin:   1300px;   /* admin page max-width */
    --ielts-lms-max-content: 980px;    /* content area prose width */
    --ielts-lms-max-narrow:  640px;    /* forms, narrow dialogs */
}


/* =====================================================
   SECTION 2 — UTILITY CLASSES
   Lightweight composition helpers — use in PHP/HTML templates
   to avoid writing one-off inline styles.
   All prefixed with .ielts-lms- to avoid conflicts.
   ===================================================== */

/* --- DISPLAY --- */
.ielts-lms-flex              { display: flex; }
.ielts-lms-inline-flex       { display: inline-flex; }
.ielts-lms-grid              { display: grid; }
.ielts-lms-hidden            { display: none; }
.ielts-lms-sr-only           { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* --- FLEX HELPERS --- */
.ielts-lms-items-center      { align-items: center; }
.ielts-lms-items-start       { align-items: flex-start; }
.ielts-lms-justify-between   { justify-content: space-between; }
.ielts-lms-justify-center    { justify-content: center; }
.ielts-lms-gap-2             { gap: var(--ielts-lms-space-2); }
.ielts-lms-gap-3             { gap: var(--ielts-lms-space-3); }
.ielts-lms-gap-4             { gap: var(--ielts-lms-space-4); }
.ielts-lms-gap-6             { gap: var(--ielts-lms-space-6); }
.ielts-lms-flex-wrap         { flex-wrap: wrap; }
.ielts-lms-flex-col          { flex-direction: column; }
.ielts-lms-flex-1            { flex: 1; }

/* --- SPACING --- */
.ielts-lms-p-4     { padding: var(--ielts-lms-space-4); }
.ielts-lms-p-5     { padding: var(--ielts-lms-space-5); }
.ielts-lms-p-6     { padding: var(--ielts-lms-space-6); }
.ielts-lms-p-8     { padding: var(--ielts-lms-space-8); }
.ielts-lms-mt-4    { margin-top: var(--ielts-lms-space-4); }
.ielts-lms-mt-6    { margin-top: var(--ielts-lms-space-6); }
.ielts-lms-mb-4    { margin-bottom: var(--ielts-lms-space-4); }
.ielts-lms-mb-6    { margin-bottom: var(--ielts-lms-space-6); }

/* --- TYPOGRAPHY --- */
.ielts-lms-text-xs      { font-size: var(--ielts-lms-text-xs); }
.ielts-lms-text-sm      { font-size: var(--ielts-lms-text-sm); }
.ielts-lms-text-base    { font-size: var(--ielts-lms-text-base); }
.ielts-lms-text-md      { font-size: var(--ielts-lms-text-md); }
.ielts-lms-text-lg      { font-size: var(--ielts-lms-text-lg); }
.ielts-lms-font-medium  { font-weight: var(--ielts-lms-font-medium); }
.ielts-lms-font-semibold { font-weight: var(--ielts-lms-font-semibold); }
.ielts-lms-font-bold    { font-weight: var(--ielts-lms-font-bold); }
.ielts-lms-text-muted   { color: var(--ielts-lms-text-muted); }
.ielts-lms-text-primary { color: var(--ielts-lms-primary); }
.ielts-lms-uppercase    { text-transform: uppercase; letter-spacing: 0.08em; }
.ielts-lms-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- CARD BASE --- */
.ielts-lms-card {
    background: var(--ielts-lms-bg-canvas);
    border: 1px solid var(--ielts-lms-border);
    border-radius: var(--ielts-lms-radius-xl);
    box-shadow: var(--ielts-lms-shadow-card);
    padding: var(--ielts-lms-space-6);
}

.ielts-lms-card--sm {
    padding: var(--ielts-lms-space-4);
    border-radius: var(--ielts-lms-radius-lg);
}

/* --- BUTTON BASE — all buttons build on this --- */
.ielts-lms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ielts-lms-space-2);
    min-height: var(--ielts-lms-touch-target);        /* ≥ 44px — mobile touch target */
    padding: 0 var(--ielts-lms-space-5);
    font-family: var(--ielts-lms-font-sans);
    font-size: var(--ielts-lms-text-base);
    font-weight: var(--ielts-lms-font-semibold);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--ielts-lms-radius-md);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ielts-lms-transition-colors),
                var(--ielts-lms-transition-shadow),
                var(--ielts-lms-transition-transform);
    -webkit-font-smoothing: antialiased;
}

.ielts-lms-btn:focus-visible {
    outline: none;
    box-shadow: var(--ielts-lms-shadow-focus);
}

/* Primary button */
.ielts-lms-btn-primary {
    background: var(--ielts-lms-primary);
    color: var(--ielts-lms-text-inverse);
    border-color: var(--ielts-lms-primary);
}
.ielts-lms-btn-primary:hover {
    background: var(--ielts-lms-primary-dark);
    border-color: var(--ielts-lms-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--ielts-lms-shadow-md);
}
.ielts-lms-btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--ielts-lms-shadow-xs);
}

/* Secondary / Ghost button */
.ielts-lms-btn-secondary {
    background: var(--ielts-lms-bg-canvas);
    color: var(--ielts-lms-text-body);
    border-color: var(--ielts-lms-border-strong);
}
.ielts-lms-btn-secondary:hover {
    background: var(--ielts-lms-bg-subtle);
    border-color: var(--ielts-lms-secondary);
}
.ielts-lms-btn-secondary:active {
    background: var(--ielts-lms-bg-muted);
}

/* Danger button */
.ielts-lms-btn-danger {
    background: var(--ielts-lms-danger);
    color: var(--ielts-lms-text-inverse);
    border-color: var(--ielts-lms-danger);
}
.ielts-lms-btn-danger:hover {
    filter: brightness(0.9);
    transform: translateY(-1px);
}

/* Disabled state (all variants) */
.ielts-lms-btn:disabled,
.ielts-lms-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* --- INPUT BASE --- */
.ielts-lms-input,
.ielts-lms-select,
.ielts-lms-textarea {
    display: block;
    width: 100%;
    min-height: var(--ielts-lms-touch-target);
    padding: 0 var(--ielts-lms-space-4);
    font-family: var(--ielts-lms-font-sans);
    font-size: var(--ielts-lms-text-base);
    color: var(--ielts-lms-text-body);
    background: var(--ielts-lms-bg-subtle);
    border: 1px solid var(--ielts-lms-border);
    border-radius: var(--ielts-lms-radius-md);
    transition: var(--ielts-lms-transition-colors), var(--ielts-lms-transition-shadow);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.ielts-lms-input:hover,
.ielts-lms-select:hover,
.ielts-lms-textarea:hover {
    border-color: var(--ielts-lms-border-strong);
}
.ielts-lms-input:focus,
.ielts-lms-select:focus,
.ielts-lms-textarea:focus {
    outline: none;
    border-color: var(--ielts-lms-border-focus);
    background: var(--ielts-lms-bg-canvas);
    box-shadow: var(--ielts-lms-shadow-focus);
}
.ielts-lms-textarea {
    min-height: 120px;
    padding: var(--ielts-lms-space-3) var(--ielts-lms-space-4);
    line-height: var(--ielts-lms-leading-relaxed);
    resize: vertical;
}

/* --- BADGE / TAG --- */
.ielts-lms-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ielts-lms-space-1);
    padding: 3px var(--ielts-lms-space-2);
    font-size: var(--ielts-lms-text-xs);
    font-weight: var(--ielts-lms-font-semibold);
    border-radius: var(--ielts-lms-radius-full);
    line-height: 1;
    white-space: nowrap;
}
.ielts-lms-badge-primary   { background: var(--ielts-lms-primary-light);   color: var(--ielts-lms-primary-dark); }
.ielts-lms-badge-success   { background: var(--ielts-lms-success-surface); color: var(--ielts-lms-success); }
.ielts-lms-badge-warning   { background: var(--ielts-lms-warning-surface); color: var(--ielts-lms-warning); }
.ielts-lms-badge-danger    { background: var(--ielts-lms-danger-surface);  color: var(--ielts-lms-danger); }
.ielts-lms-badge-muted     { background: var(--ielts-lms-bg-subtle);       color: var(--ielts-lms-text-muted); }

/* --- MODULE ACCENT BADGES --- */
.ielts-lms-badge-listening { background: #e0f2fe; color: var(--ielts-lms-listening); }
.ielts-lms-badge-reading   { background: var(--ielts-lms-primary-light);   color: var(--ielts-lms-reading); }
.ielts-lms-badge-writing   { background: #ede9fe; color: var(--ielts-lms-writing); }
.ielts-lms-badge-speaking  { background: #fce7f3; color: var(--ielts-lms-speaking); }

/* --- DIVIDER --- */
.ielts-lms-divider {
    border: none;
    border-top: 1px solid var(--ielts-lms-border);
    margin: var(--ielts-lms-space-6) 0;
}

/* --- PAGE SHELL — used by every admin page / frontend template
   Breaks visually out of the WP "wrap" chrome layer. --- */
.ielts-lms-page-shell {
    font-family: var(--ielts-lms-font-sans);
    color: var(--ielts-lms-text-body);
    background: var(--ielts-lms-bg-page);
    /* Pull outside WP's default 20px right padding */
    margin: 0 -20px;
    padding: var(--ielts-lms-space-8) var(--ielts-lms-space-8) var(--ielts-lms-space-16);
    max-width: 100%;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

/* --- APP ROOT CONTAINER (React mount points) --- */
.ielts-lms-app-root {
    font-family: var(--ielts-lms-font-sans);
    color: var(--ielts-lms-text-body);
    -webkit-font-smoothing: antialiased;
    max-width: 100%;
    box-sizing: border-box;
}

/* =====================================================
   SECTION 3 — CARD-TABLE PATTERN
   On ≥ 768px: standard table layout.
   On < 768px: each row becomes a standalone card.

   Usage in PHP:
     <table class="ielts-lms-card-table">
       <thead>…</thead>
       <tbody>
         <tr>
           <td data-label="Student">…</td>
           <td data-label="Score">…</td>
         </tr>
       </tbody>
     </table>
   ===================================================== */

/* Mobile-first: card mode by default */
.ielts-lms-card-table {
    width: 100%;
    border-collapse: collapse;
}

/* Hide table headers on mobile */
.ielts-lms-card-table thead {
    display: none;
}

/* Each row = a card on mobile */
.ielts-lms-card-table tbody tr {
    display: block;
    background: var(--ielts-lms-bg-canvas);
    border: 1px solid var(--ielts-lms-border);
    border-radius: var(--ielts-lms-radius-lg);
    box-shadow: var(--ielts-lms-shadow-sm);
    padding: var(--ielts-lms-space-4);
    margin-bottom: var(--ielts-lms-space-4);
}
.ielts-lms-card-table tbody tr:hover {
    border-color: var(--ielts-lms-border-strong);
    box-shadow: var(--ielts-lms-shadow-md);
}

/* Each cell: label above value */
.ielts-lms-card-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ielts-lms-space-3);
    padding: var(--ielts-lms-space-2) 0;
    border: none;
    border-bottom: 1px solid var(--ielts-lms-bg-subtle);
    font-size: var(--ielts-lms-text-base);
    color: var(--ielts-lms-text-body);
}
.ielts-lms-card-table tbody td:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Inject column label as pseudo-element via data-label attribute */
.ielts-lms-card-table tbody td::before {
    content: attr(data-label);
    font-size: var(--ielts-lms-text-xs);
    font-weight: var(--ielts-lms-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ielts-lms-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Tablet (≥ 768px): revert to normal table layout ------ */
@media (min-width: 768px) {
    .ielts-lms-card-table thead {
        display: table-header-group;
    }
    .ielts-lms-card-table thead th {
        padding: var(--ielts-lms-space-3) var(--ielts-lms-space-4);
        font-size: var(--ielts-lms-text-xs);
        font-weight: var(--ielts-lms-font-semibold);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ielts-lms-text-muted);
        background: var(--ielts-lms-bg-subtle);
        border-bottom: 1px solid var(--ielts-lms-border);
        text-align: left;
        white-space: nowrap;
    }
    .ielts-lms-card-table thead th:first-child { border-radius: var(--ielts-lms-radius-lg) 0 0 0; }
    .ielts-lms-card-table thead th:last-child  { border-radius: 0 var(--ielts-lms-radius-lg) 0 0; }

    .ielts-lms-card-table tbody tr {
        display: table-row;
        background: var(--ielts-lms-bg-canvas);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid var(--ielts-lms-border);
        transition: background-color var(--ielts-lms-duration-fast) var(--ielts-lms-ease);
    }
    .ielts-lms-card-table tbody tr:hover {
        background: var(--ielts-lms-primary-surface);
        border-color: var(--ielts-lms-border);
        box-shadow: none;
    }

    .ielts-lms-card-table tbody td {
        display: table-cell;
        padding: var(--ielts-lms-space-4);
        border: none;
        border-bottom: 1px solid var(--ielts-lms-border);
        vertical-align: middle;
    }
    .ielts-lms-card-table tbody td::before {
        display: none;
    }
}

/* --- Desktop (≥ 1024px): tighter row density -------------- */
@media (min-width: 1024px) {
    .ielts-lms-card-table thead th,
    .ielts-lms-card-table tbody td {
        padding: var(--ielts-lms-space-3) var(--ielts-lms-space-5);
    }
}

/* --- 14-inch target (≥ 1366px): comfortable reading density */
@media (min-width: 1366px) {
    .ielts-lms-card-table thead th,
    .ielts-lms-card-table tbody td {
        padding: var(--ielts-lms-space-4) var(--ielts-lms-space-6);
        font-size: var(--ielts-lms-text-base);
    }
}


/* =====================================================
   SECTION 4 — ADMIN PAGE SHELL & NAV TABS
   ===================================================== */

/* Full-bleed admin page header */
.ielts-lms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ielts-lms-space-4);
    margin-bottom: var(--ielts-lms-space-6);
    padding-bottom: var(--ielts-lms-space-5);
    border-bottom: 1px solid var(--ielts-lms-border);
}

.ielts-lms-page-title {
    font-size: var(--ielts-lms-text-2xl);
    font-weight: var(--ielts-lms-font-bold);
    color: var(--ielts-lms-text-primary);
    margin: 0;
    line-height: var(--ielts-lms-leading-tight);
}

.ielts-lms-page-subtitle {
    margin: var(--ielts-lms-space-1) 0 0;
    font-size: var(--ielts-lms-text-sm);
    color: var(--ielts-lms-text-muted);
}

/* In-page tab strip (renders inside .ielts-lms-page-shell) */
.ielts-lms-tabs {
    display: inline-flex;
    align-items: center;
    gap: var(--ielts-lms-space-1);
    padding: 5px;
    background: var(--ielts-lms-bg-subtle);
    border: 1px solid var(--ielts-lms-border);
    border-radius: var(--ielts-lms-radius-lg);
    margin-bottom: var(--ielts-lms-space-6);
    flex-wrap: wrap;
}

.ielts-lms-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ielts-lms-space-2);
    padding: 7px var(--ielts-lms-space-4);
    font-size: var(--ielts-lms-text-sm);
    font-weight: var(--ielts-lms-font-semibold);
    color: var(--ielts-lms-text-secondary);
    border: none;
    background: transparent;
    border-radius: var(--ielts-lms-radius-md);
    cursor: pointer;
    transition: var(--ielts-lms-transition-colors), var(--ielts-lms-transition-shadow);
    text-decoration: none;
    min-height: 36px;
    white-space: nowrap;
}
.ielts-lms-tab:hover {
    color: var(--ielts-lms-text-body);
    background: var(--ielts-lms-bg-canvas);
}
.ielts-lms-tab.is-active,
.ielts-lms-tab[aria-selected="true"] {
    background: var(--ielts-lms-bg-canvas);
    color: var(--ielts-lms-text-primary);
    box-shadow: var(--ielts-lms-shadow-sm);
}
.ielts-lms-tab:focus-visible {
    outline: none;
    box-shadow: var(--ielts-lms-shadow-focus);
}


/* =====================================================
   SECTION 5 — STAT / METRIC CARDS
   Used on the admin dashboard Master Control Hub
   ===================================================== */

.ielts-lms-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* mobile: 2 columns */
    gap: var(--ielts-lms-space-4);
    margin-bottom: var(--ielts-lms-space-6);
}

/* Tablet (≥ 768px): 2 → 3 columns */
@media (min-width: 768px) {
    .ielts-lms-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 14-inch target (≥ 1366px): 3 → 4 columns */
@media (min-width: 1366px) {
    .ielts-lms-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ielts-lms-stat-card {
    background: var(--ielts-lms-bg-canvas);
    border: 1px solid var(--ielts-lms-border);
    border-radius: var(--ielts-lms-radius-lg);
    padding: var(--ielts-lms-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ielts-lms-space-2);
    box-shadow: var(--ielts-lms-shadow-xs);
    transition: var(--ielts-lms-transition-shadow), var(--ielts-lms-transition-transform);
}
.ielts-lms-stat-card:hover {
    box-shadow: var(--ielts-lms-shadow-card);
    transform: translateY(-2px);
}

.ielts-lms-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ielts-lms-radius-md);
    background: var(--ielts-lms-primary-surface);
    color: var(--ielts-lms-primary);
    flex-shrink: 0;
}

.ielts-lms-stat-value {
    font-size: var(--ielts-lms-text-2xl);
    font-weight: var(--ielts-lms-font-extrabold);
    color: var(--ielts-lms-text-primary);
    line-height: 1;
    margin: 0;
}

.ielts-lms-stat-label {
    font-size: var(--ielts-lms-text-xs);
    font-weight: var(--ielts-lms-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ielts-lms-text-muted);
    margin: 0;
}


/* =====================================================
   SECTION 6 — LOADING / SKELETON STATE
   ===================================================== */

/* Spinner override for React mount points */
.ielts-lms-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ielts-lms-space-4);
    padding: var(--ielts-lms-space-16) var(--ielts-lms-space-6);
    color: var(--ielts-lms-text-muted);
    font-size: var(--ielts-lms-text-sm);
}

.ielts-lms-skeleton {
    background: linear-gradient(
        90deg,
        var(--ielts-lms-bg-subtle)  0%,
        var(--ielts-lms-bg-muted)   50%,
        var(--ielts-lms-bg-subtle)  100%
    );
    background-size: 200% 100%;
    animation: ielts-lms-shimmer 1.5s infinite;
    border-radius: var(--ielts-lms-radius-sm);
}

@keyframes ielts-lms-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =====================================================
   SECTION 7 — EMPTY STATE
   ===================================================== */

.ielts-lms-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ielts-lms-space-4);
    padding: var(--ielts-lms-space-16) var(--ielts-lms-space-6);
    text-align: center;
    color: var(--ielts-lms-text-muted);
}

.ielts-lms-empty-state__icon {
    width: 56px;
    height: 56px;
    opacity: 0.4;
}

.ielts-lms-empty-state__title {
    font-size: var(--ielts-lms-text-lg);
    font-weight: var(--ielts-lms-font-semibold);
    color: var(--ielts-lms-text-secondary);
    margin: 0;
}

.ielts-lms-empty-state__body {
    font-size: var(--ielts-lms-text-sm);
    color: var(--ielts-lms-text-muted);
    max-width: 400px;
    line-height: var(--ielts-lms-leading-relaxed);
    margin: 0;
}