/* =====================================================================
   FreeEduZone Design System
   ---------------------------------------------------------------------
   Shared by the public site and the admin panel. Load it BEFORE the
   page stylesheet (style.css or admin.css).

   1. Tokens       colours, type, spacing, radius, shadow, motion
   2. Base         reset, typography, focus, selection
   3. Components   buttons, form controls, search bar, cards, badges,
                   alerts, tables, pagination, modal

   Components use their own class names (.btn, .form-control, .card ...)
   and also list the older class names used by existing pages, so every
   page picks up the same look without changing its markup.
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ===================================================================== */

:root {

    /* ---- Brand blue ---- */
    --blue-50:#eff6ff;
    --blue-100:#dbeafe;
    --blue-200:#bfdbfe;
    --blue-300:#93c5fd;
    --blue-400:#60a5fa;
    --blue-500:#3b82f6;
    --blue-600:#2563eb;
    --blue-700:#1d4ed8;
    --blue-800:#1e40af;
    --blue-900:#1e3a8a;

    /* ---- Neutrals (slate) ---- */
    --slate-50:#f8fafc;
    --slate-100:#f1f5f9;
    --slate-200:#e2e8f0;
    --slate-300:#cbd5e1;
    --slate-400:#94a3b8;
    --slate-500:#64748b;
    --slate-600:#475569;
    --slate-700:#334155;
    --slate-800:#1e293b;
    --slate-900:#0f172a;
    --slate-950:#0b1220;

    /* ---- Semantic colours ---- */
    --color-primary:var(--blue-600);
    --color-primary-hover:var(--blue-700);
    --color-primary-soft:var(--blue-50);
    --color-primary-soft-hover:var(--blue-100);
    --color-on-primary:#ffffff;
    /* Filled areas (buttons, bars) with white text: stay dark blue in dark mode */
    --color-primary-fill:var(--blue-600);
    --color-primary-fill-hover:var(--blue-700);
    --color-primary-border:var(--blue-200);
    /* Blue text on soft blue backgrounds */
    --color-primary-text:var(--blue-700);

    --color-bg:var(--slate-50);
    --color-surface:#ffffff;
    --color-surface-muted:var(--slate-100);
    --color-surface-subtle:var(--slate-50);
    /* See-through panels: the frosted header, empty states, hero tags */
    --color-surface-glass:rgba(255,255,255,.88);
    --color-surface-translucent:rgba(255,255,255,.6);
    --color-border:var(--slate-200);
    --color-border-strong:var(--slate-300);

    --color-heading:var(--slate-900);
    --color-text:var(--slate-800);
    --color-text-soft:var(--slate-600);
    --color-muted:var(--slate-500);
    --color-placeholder:var(--slate-400);

    --color-success:#16a34a;
    --color-success-soft:#dcfce7;
    --color-success-text:#15803d;
    --color-success-border:#bbf7d0;

    --color-warning:#d97706;
    --color-warning-soft:#fef3c7;
    --color-warning-text:#92400e;
    --color-warning-border:#fde68a;

    --color-danger:#dc2626;
    --color-danger-hover:#b91c1c;
    /* Filled red areas (delete buttons, badges) with white text */
    --color-danger-fill:#dc2626;
    --color-danger-fill-hover:#b91c1c;
    --color-danger-soft:#fee2e2;
    --color-danger-text:#b91c1c;
    --color-danger-border:#fecaca;

    --color-info-soft:var(--blue-50);
    --color-info-text:var(--blue-700);
    --color-info-border:var(--blue-200);

    --color-overlay:rgba(15,23,42,.55);

    --color-violet-soft:#ede9fe;
    --color-violet-text:#7c3aed;

    /* Soft glows behind the hero sections */
    --glow-blue:rgba(191,219,254,.55);
    --glow-sky:rgba(224,242,254,.7);

    /* ---- Typography ---- */
    --font-sans:'Inter',Arial,Helvetica,sans-serif;

    --text-xs:12px;
    --text-sm:14px;
    --text-base:16px;
    --text-lg:18px;
    --text-xl:20px;
    --text-2xl:24px;
    --text-3xl:30px;
    --text-4xl:36px;
    --text-5xl:48px;
    --text-display:clamp(38px,5vw,60px);
    --text-title:clamp(30px,4vw,44px);

    --weight-regular:400;
    --weight-medium:500;
    --weight-semibold:600;
    --weight-bold:700;
    --weight-extrabold:800;

    --leading-tight:1.2;
    --leading-snug:1.4;
    --leading-normal:1.6;
    --leading-relaxed:1.75;

    --tracking-wide:.08em;

    /* ---- Spacing (4px scale) ---- */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-8:32px;
    --space-10:40px;
    --space-12:48px;
    --space-16:64px;
    --space-20:80px;

    /* ---- Layout ---- */
    --container:1200px;
    --container-narrow:760px;
    --gutter:var(--space-6);

    /* ---- Radius ---- */
    --radius-sm:8px;        /* inputs, buttons, small items   */
    --radius-md:12px;       /* list items, dropdowns          */
    --radius-lg:16px;       /* cards, tables, panels          */
    --radius-xl:24px;       /* hero blocks, banners, modals   */
    --radius-pill:999px;    /* badges, chips, search bars     */

    /* ---- Shadows ---- */
    --shadow-xs:0 1px 2px rgba(15,23,42,.05);
    --shadow-sm:0 2px 8px rgba(15,23,42,.06);
    --shadow-md:0 8px 24px rgba(15,23,42,.08);
    --shadow-lg:0 20px 48px rgba(15,23,42,.14);
    --shadow-primary:0 8px 20px rgba(37,99,235,.25);

    --ring:0 0 0 3px rgba(37,99,235,.25);
    --ring-danger:0 0 0 3px rgba(220,38,38,.2);

    /* ---- Motion ---- */
    --ease:cubic-bezier(.4,0,.2,1);
    --duration:.2s;
    --transition:var(--duration) var(--ease);

    /* ---- Control sizes ---- */
    --control-height:44px;
    --control-height-sm:36px;
    --control-height-lg:52px;

    /* ---- Layers ---- */
    --z-sticky:100;
    --z-drawer:999;
    --z-modal:1000;

    /* ---- Older names kept so existing rules keep working ---- */
    --primary:var(--color-primary);
    --primary-dark:var(--color-primary-hover);
    --white:var(--color-surface);
    --heading:var(--color-heading);
    --text:var(--color-text);
    --muted:var(--color-muted);
    --border:var(--color-border-strong);
    --radius-control:var(--radius-sm);
    --radius-card:var(--radius-lg);
    --shadow-card:var(--shadow-sm);
    --font-body:var(--font-sans);

}


/* ---------------------------------------------------------------------
   Dark mode: follows the device setting. Only the tokens change; every
   component uses them. Text colours keep at least 4.5:1 contrast.
   --------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

    :root {
        color-scheme:dark;

        --color-primary:var(--blue-400);
        --color-primary-hover:var(--blue-300);
        --color-primary-soft:rgba(96,165,250,.14);
        --color-primary-soft-hover:rgba(96,165,250,.22);
        --color-primary-border:rgba(96,165,250,.35);
        --color-primary-text:var(--blue-300);
        --color-primary-fill:var(--blue-600);
        --color-primary-fill-hover:var(--blue-700);

        --color-bg:#0b1220;
        --color-surface:#111a2e;
        --color-surface-muted:#1a2540;
        --color-surface-subtle:#0e1729;
        --color-surface-glass:rgba(11,18,32,.86);
        --color-surface-translucent:rgba(17,26,46,.6);
        --color-border:#233047;
        --color-border-strong:#334155;

        --color-heading:#f1f5f9;
        --color-text:#e2e8f0;
        --color-text-soft:#cbd5e1;
        --color-muted:#94a3b8;
        --color-placeholder:#64748b;

        --color-success:#22c55e;
        --color-success-soft:rgba(34,197,94,.14);
        --color-success-text:#4ade80;
        --color-success-border:rgba(34,197,94,.35);

        --color-warning:#f59e0b;
        --color-warning-soft:rgba(245,158,11,.14);
        --color-warning-text:#fbbf24;
        --color-warning-border:rgba(245,158,11,.35);

        --color-danger:#f87171;
        --color-danger-hover:#fca5a5;
        --color-danger-soft:rgba(239,68,68,.14);
        --color-danger-text:#f87171;
        --color-danger-border:rgba(239,68,68,.35);

        --color-info-soft:rgba(96,165,250,.14);
        --color-info-text:var(--blue-300);
        --color-info-border:rgba(96,165,250,.35);

        --color-overlay:rgba(2,6,23,.72);

        --color-violet-soft:rgba(139,92,246,.16);
        --color-violet-text:#a78bfa;

        --glow-blue:rgba(37,99,235,.18);
        --glow-sky:rgba(14,165,233,.1);

        --shadow-xs:0 1px 2px rgba(0,0,0,.3);
        --shadow-sm:0 2px 8px rgba(0,0,0,.3);
        --shadow-md:0 8px 24px rgba(0,0,0,.35);
        --shadow-lg:0 20px 48px rgba(0,0,0,.45);
        --shadow-primary:0 8px 20px rgba(37,99,235,.35);

        --ring:0 0 0 3px rgba(96,165,250,.35);
        --ring-danger:0 0 0 3px rgba(248,113,113,.3);
    }

}


/* =====================================================================
   2. BASE
   ===================================================================== */

*,
*::before,
*::after {
    box-sizing:border-box;
}

html {
    -webkit-text-size-adjust:100%;
}

body {
    margin:0;
    font-family:var(--font-sans);
    font-size:var(--text-base);
    line-height:var(--leading-normal);
    background:var(--color-bg);
    color:var(--color-text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* No colour here: headings on dark panels (CTA, footer, sidebar) inherit white */
h1,
h2,
h3,
h4 {
    line-height:var(--leading-tight);
    letter-spacing:-.01em;
}

img {
    max-width:100%;
}

/* Form controls don't inherit the page font by default */
button,
input,
select,
textarea {
    font:inherit;
}

a {
    color:var(--color-primary);
}

:focus-visible {
    outline:none;
    box-shadow:var(--ring);
}

::selection {
    background:var(--color-primary-soft-hover);
    color:var(--blue-900);
}

[hidden] {
    display:none !important;
}

@media (prefers-reduced-motion:reduce) {
    *,
    *::before,
    *::after {
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
    }
}


/* =====================================================================
   3. COMPONENTS
   ===================================================================== */


/* ---------------- Buttons ----------------
   .btn                     base (primary look by default)
   .btn-primary .btn-secondary .btn-outline .btn-ghost .btn-danger
   .btn-sm .btn-lg .btn-block .btn-icon
   ---------------------------------------- */

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-danger,
.btn-edit,
.btn-delete,
.course-btn,
.course-details-btn,
.cta-btn,
.save-course-btn,
.courses-page .btn-learning,
.profile-form button,
.modal-box form > button,
.hero-search button,
.courses-page .search-box button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    min-height:var(--control-height);
    padding:0 var(--space-5);
    border:1px solid transparent;
    border-radius:var(--radius-sm);
    background:var(--color-primary-fill);
    color:var(--color-on-primary);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:background-color var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition),transform var(--transition);
}

.btn:hover,
.btn-primary:hover,
.course-btn:hover,
.course-details-btn:hover,
.cta-btn:hover,
.courses-page .btn-learning:hover,
.profile-form button:hover,
.modal-box form > button:hover,
.hero-search button:hover,
.courses-page .search-box button:hover {
    background:var(--color-primary-fill-hover);
    color:var(--color-on-primary);
    box-shadow:var(--shadow-primary);
    transform:translateY(-1px);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn-danger:active,
.course-btn:active,
.course-details-btn:active,
.cta-btn:active,
.save-course-btn:active,
.hero-search button:active,
.courses-page .search-box button:active {
    box-shadow:none;
    transform:translateY(0);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible,
.btn-edit:focus-visible,
.btn-delete:focus-visible,
.course-btn:focus-visible,
.course-details-btn:focus-visible,
.cta-btn:focus-visible,
.save-course-btn:focus-visible,
.courses-page .btn-learning:focus-visible,
.profile-form button:focus-visible,
.modal-box form > button:focus-visible,
.hero-search button:focus-visible,
.courses-page .search-box button:focus-visible {
    outline:none;
    box-shadow:var(--ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity:.55;
    pointer-events:none;
}

/* Secondary: quiet grey */
.btn-secondary {
    background:var(--color-surface-muted);
    border-color:var(--color-border);
    color:var(--color-text);
}

.btn-secondary:hover {
    background:var(--slate-200);
    border-color:var(--color-border-strong);
    color:var(--color-heading);
    box-shadow:none;
    transform:none;
}

/* Outline: white with a blue edge */
.btn-outline,
.btn-edit,
.save-course-btn {
    background:var(--color-surface);
    border-color:var(--color-primary-border);
    color:var(--color-primary-hover);
}

.btn-outline:hover,
.btn-edit:hover,
.save-course-btn:hover {
    background:var(--color-primary-soft);
    border-color:var(--color-primary);
    color:var(--color-primary-hover);
    box-shadow:none;
    transform:none;
}

.save-course-btn.is-saved {
    background:var(--color-primary-soft);
    border-color:var(--color-primary);
}

.save-course-btn.is-saved:hover {
    background:var(--color-primary-soft-hover);
}

/* Ghost: text only */
.btn-ghost {
    background:transparent;
    color:var(--color-text-soft);
}

.btn-ghost:hover {
    background:var(--color-surface-muted);
    color:var(--color-heading);
}

/* Danger */
.btn-danger {
    background:var(--color-danger-fill);
    color:#ffffff;
}

.btn-danger:hover {
    background:var(--color-danger-fill-hover);
    color:#ffffff;
    box-shadow:none;
    transform:none;
}

.btn-delete {
    background:var(--color-surface);
    border-color:var(--color-danger-border);
    color:var(--color-danger-text);
}

.btn-delete:hover {
    background:var(--color-danger-soft);
    border-color:var(--color-danger);
    color:var(--color-danger-hover);
}

.btn-danger:focus-visible,
.btn-delete:focus-visible {
    box-shadow:var(--ring-danger);
}

/* Sizes */
.btn-sm,
.btn-edit,
.btn-delete {
    min-height:var(--control-height-sm);
    padding:0 var(--space-3);
    font-size:var(--text-sm);
}

.btn-lg,
.cta-btn,
.course-details-btn {
    min-height:var(--control-height-lg);
    padding:0 var(--space-6);
    font-size:var(--text-base);
}

.btn-block,
.course-btn,
.courses-page .btn-learning,
.modal-box form > button {
    width:100%;
}

.btn-icon {
    width:var(--control-height);
    padding:0;
}


/* ---------------- Form controls ----------------
   .form-label  .form-control  .form-hint
   ---------------------------------------------- */

.form-label,
.form-container label,
.profile-form label,
.filter-group label,
.category-tools label {
    display:block;
    margin-bottom:var(--space-2);
    color:var(--color-heading);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
}

.form-control,
.form-container input,
.form-container textarea,
.form-container select,
.profile-form input,
.modal-box input,
.filter-group select {
    display:block;
    width:100%;
    min-height:var(--control-height);
    padding:10px var(--space-4);
    border:1px solid var(--color-border-strong);
    border-radius:var(--radius-sm);
    background:var(--color-surface);
    color:var(--color-text);
    font-size:var(--text-sm);
    line-height:1.5;
    box-shadow:var(--shadow-xs);
    transition:border-color var(--transition),box-shadow var(--transition);
}

.form-control::placeholder,
.form-container input::placeholder,
.form-container textarea::placeholder,
.profile-form input::placeholder,
.modal-box input::placeholder {
    color:var(--color-placeholder);
}

.form-control:hover,
.form-container input:hover,
.form-container textarea:hover,
.form-container select:hover,
.profile-form input:hover,
.modal-box input:hover,
.filter-group select:hover {
    border-color:var(--slate-400);
}

.form-control:focus,
.form-container input:focus,
.form-container textarea:focus,
.form-container select:focus,
.profile-form input:focus,
.modal-box input:focus,
.filter-group select:focus {
    outline:none;
    border-color:var(--color-primary);
    box-shadow:var(--ring);
}

textarea.form-control,
.form-container textarea {
    min-height:130px;
    resize:vertical;
}

select.form-control,
.form-container select,
.filter-group select {
    padding-right:var(--space-10);
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right var(--space-4) center;
    cursor:pointer;
}

/* File inputs look like a dashed drop area */
.form-control[type="file"],
.profile-form input[type="file"] {
    padding:var(--space-2);
    border-style:dashed;
    background:var(--color-surface-subtle);
    color:var(--color-muted);
    cursor:pointer;
}

.form-control[type="file"]::file-selector-button,
.profile-form input[type="file"]::file-selector-button {
    margin-right:var(--space-3);
    padding:var(--space-2) var(--space-4);
    border:1px solid var(--color-border-strong);
    border-radius:var(--radius-sm);
    background:var(--color-surface);
    color:var(--color-text);
    font:inherit;
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
    cursor:pointer;
    transition:background-color var(--transition),border-color var(--transition);
}

.form-control[type="file"]:hover::file-selector-button,
.profile-form input[type="file"]:hover::file-selector-button {
    border-color:var(--color-primary);
    background:var(--color-primary-soft);
    color:var(--color-primary-hover);
}

/* Checkboxes and radios are inputs too, but must not look like text fields */
.form-container input[type="checkbox"],
.form-container input[type="radio"],
.profile-form input[type="checkbox"],
.profile-form input[type="radio"],
.modal-box input[type="checkbox"],
.modal-box input[type="radio"],
.form-control[type="checkbox"],
.form-control[type="radio"] {
    display:inline-block;
    flex-shrink:0;
    width:16px;
    height:16px;
    min-height:0;
    margin:0;
    padding:0;
    box-shadow:none;
    accent-color:var(--color-primary);
    cursor:pointer;
}

.form-hint {
    margin-top:var(--space-1);
    color:var(--color-muted);
    font-size:var(--text-xs);
}


/* ---------------- Search bar ----------------
   A white box (radius-md) holding a borderless input and a button.
   Buttons and fields everywhere use radius-sm; only labels such as
   badges are fully rounded (radius-pill).
   ------------------------------------------- */

.search-bar,
.hero-search,
.courses-page .search-box,
.category-tools .category-search {
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface);
    box-shadow:var(--shadow-md);
    transition:border-color var(--transition),box-shadow var(--transition);
}

.search-bar:focus-within,
.hero-search:focus-within,
.courses-page .search-box:focus-within,
.category-tools .category-search:focus-within {
    border-color:var(--blue-300);
    box-shadow:var(--shadow-md),var(--ring);
}

.search-bar input,
.hero-search input,
.courses-page .search-box input,
.category-search input {
    border:0;
    border-radius:var(--radius-sm);
    background:transparent;
    color:var(--color-text);
    font-size:var(--text-base);
    outline:none;
    box-shadow:none;
}

.search-bar input::placeholder,
.hero-search input::placeholder,
.courses-page .search-box input::placeholder,
.category-search input::placeholder {
    color:var(--color-placeholder);
}

.hero-search button,
.courses-page .search-box button {
    border-radius:var(--radius-sm);
}


/* ---------------- Cards ---------------- */

.card,
.course-card,
.courses-page .course-card,
.category-card,
.platform-card,
.stats div,
.stat-card,
.filters,
.courses-page .filters,
.profile-form,
.user-sidebar,
.saved-course-item,
.welcome-box,
.form-container,
.table-container {
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.saved-course-item {
    border-radius:var(--radius-md);
    box-shadow:none;
}

/* Cards that are links lift slightly on hover */
.card-link,
.course-card,
.category-card,
.platform-card,
.stats div {
    transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.card-link:hover,
.course-card:hover,
.courses-page .course-card:hover,
.category-card:hover,
.platform-card:hover,
.stats div:hover {
    border-color:var(--color-primary-border);
    box-shadow:var(--shadow-md);
    transform:translateY(-3px);
}


/* ---------------- Badges ----------------
   .badge + .badge-primary .badge-neutral .badge-success
             .badge-warning .badge-danger
   --------------------------------------- */

.badge,
.platform-badge,
.course-tags span,
.category-card .category-count,
.status-active,
.status-inactive {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border:1px solid transparent;
    border-radius:var(--radius-pill);
    font-size:var(--text-xs);
    font-weight:var(--weight-semibold);
    line-height:1.5;
    white-space:nowrap;
}

.badge-primary,
.platform-badge,
.category-card .category-count {
    background:var(--color-primary-soft);
    border-color:var(--color-primary-border);
    color:var(--color-primary-hover);
}

.badge-neutral,
.course-tags span {
    background:var(--color-surface-muted);
    border-color:var(--color-border);
    color:var(--color-text-soft);
}

.badge-success,
.status-active {
    background:var(--color-success-soft);
    border-color:var(--color-success-border);
    color:var(--color-success-text);
}

.badge-warning {
    background:var(--color-warning-soft);
    border-color:var(--color-warning-border);
    color:var(--color-warning-text);
}

.badge-danger,
.status-inactive {
    background:var(--color-danger-soft);
    border-color:var(--color-danger-border);
    color:var(--color-danger-text);
}


/* ---------------- Alerts ---------------- */

.alert,
.profile-message,
.error-message {
    padding:var(--space-3) var(--space-4);
    border:1px solid transparent;
    border-radius:var(--radius-sm);
    font-size:var(--text-sm);
    font-weight:var(--weight-medium);
    line-height:var(--leading-snug);
}

.alert {
    margin-bottom:var(--space-5);
}

.alert-success,
.profile-message.success {
    background:var(--color-success-soft);
    border-color:var(--color-success-border);
    color:var(--color-success-text);
}

.alert-error,
.profile-message.error,
.error-message {
    background:var(--color-danger-soft);
    border-color:var(--color-danger-border);
    color:var(--color-danger-text);
}

/* The login message box turns green for "Account created" (script.js) */
.error-message.is-success {
    background:var(--color-success-soft);
    border-color:var(--color-success-border);
    color:var(--color-success-text);
}

.alert-warning {
    background:var(--color-warning-soft);
    border-color:var(--color-warning-border);
    color:var(--color-warning-text);
}

.alert-info {
    background:var(--color-info-soft);
    border-color:var(--color-info-border);
    color:var(--color-info-text);
}

/* A next-step link inside an alert, e.g. "Open existing course" */
.alert-link {
    color:inherit;
    font-weight:var(--weight-semibold);
    text-decoration:underline;
}


/* ---------------- Tables ---------------- */

.table-container {
    overflow-x:auto;
}

.table,
.admin-table {
    width:100%;
    border-collapse:collapse;
    font-size:var(--text-sm);
}

.table th,
.admin-table th {
    padding:var(--space-3) var(--space-4);
    background:var(--color-surface-subtle);
    border-bottom:1px solid var(--color-border);
    color:var(--color-muted);
    font-size:var(--text-xs);
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-wide);
    text-align:left;
    text-transform:uppercase;
    white-space:nowrap;
}

.table td,
.admin-table td {
    padding:var(--space-4);
    border-bottom:1px solid var(--color-border);
    color:var(--color-text);
    vertical-align:middle;
}

.table tbody tr,
.admin-table tbody tr {
    transition:background-color var(--transition);
}

.table tbody tr:hover,
.admin-table tbody tr:hover {
    background:var(--color-surface-subtle);
}

.table tr:last-child td,
.admin-table tr:last-child td {
    border-bottom:0;
}


/* ---------------- Pagination ---------------- */

.pagination {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--space-2);
}

.pagination a {
    display:inline-grid;
    place-items:center;
    min-width:40px;
    height:40px;
    padding:0 var(--space-3);
    border:1px solid var(--color-border);
    border-radius:var(--radius-sm);
    background:var(--color-surface);
    color:var(--color-text);
    font-size:var(--text-sm);
    font-weight:var(--weight-semibold);
    text-decoration:none;
    box-shadow:var(--shadow-xs);
    transition:background-color var(--transition),border-color var(--transition),color var(--transition);
}

.pagination a:hover {
    border-color:var(--color-primary-border);
    background:var(--color-primary-soft);
    color:var(--color-primary-hover);
}

.pagination a[aria-current="page"] {
    border-color:var(--color-primary);
    background:var(--color-primary-fill);
    color:var(--color-on-primary);
}

.pagination-gap {
    display:inline-grid;
    place-items:center;
    min-width:24px;
    height:40px;
    color:var(--color-text-soft);
}


/* ---------------- Modal ---------------- */

.modal {
    background:var(--color-overlay);
    backdrop-filter:blur(2px);
    z-index:var(--z-modal);
}

.modal-box {
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
}

.modal-box h2 {
    font-size:var(--text-2xl);
}

.modal-box .close {
    border-radius:var(--radius-sm);
    color:var(--color-muted);
    transition:background-color var(--transition),color var(--transition);
}

.modal-box .close:hover {
    background:var(--color-surface-muted);
    color:var(--color-heading);
}


/* ---------------- Utilities ---------------- */

.text-muted {
    color:var(--color-muted);
}

.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}


/* Standalone "Something went wrong" page (includes/errors.php) */
.server-error-page {
    display:grid;
    min-height:100vh;
    place-items:center;
    padding:var(--space-6);
    text-align:center;
}

.server-error-page main {
    max-width:440px;
}

.server-error-page p {
    margin:var(--space-3) 0 var(--space-6);
    color:var(--color-muted);
}