{{-- Design System tokens. Include AFTER admin.shared.css so it wins specificity. --}}

{{-- Typography: Inter (English UI), Cairo (Arabic UI), Fira Code (mono for OTPs/IDs) --}}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Fira+Code:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
:root {
    /* Brand (derived from the ABA logo) */
    --ds-primary:        #009B4D;          /* ABA Green — primary actions, active nav, admin headers */
    --ds-primary-rgb:    0, 155, 77;
    --ds-primary-hover:  #007A3D;          /* slightly darker green for pressed/active feedback */
    --ds-accent:         #00A99D;          /* ABA Teal — secondary highlights, hover, gradient accents */
    --ds-accent-rgb:     0, 169, 157;
    --ds-bright:         #39B54A;          /* Chart Green — data viz emphasis, sparingly */
    --ds-bright-rgb:     57, 181, 74;

    /* Brand gradient (teal → green) — for card top borders and accent strips */
    --ds-brand-gradient: linear-gradient(90deg, var(--ds-accent) 0%, var(--ds-primary) 100%);

    /* Neutral text */
    --ds-text-dark:      #212529;          /* primary headings ("ABA Assessment") */
    --ds-text-gray:      #6C757D;          /* subtitles and meta ("International Benchmark Test") */
    --ds-secondary:      #E2E8F0;          /* borders, inactive tabs, background offsets */
    --ds-secondary-rgb:  226, 232, 240;

    /* Backgrounds */
    --ds-bg-app:    #F8F9FA;               /* admin/school chrome */
    --ds-bg-canvas: #FFFFFF;               /* student exam canvas */

    /* Semantic (grading & status) */
    --ds-success:      #198754;            /* correct/active — harmonizes with brand green */
    --ds-success-rgb:  25, 135, 84;
    --ds-danger:       #DC3545;            /* wrong/missing — contrast against the green theme */
    --ds-danger-rgb:   220, 53, 69;
    --ds-warning:      #FFC107;            /* draft/pending eval */
    --ds-warning-rgb:  255, 193, 7;
    --ds-info:         var(--ds-accent);   /* selected option — reuses ABA Teal to stay in-brand */
    --ds-info-rgb:     var(--ds-accent-rgb);

    /* Typography */
    --ds-font-sans-latin:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ds-font-sans-arabic: 'Cairo', 'Tajawal', system-ui, sans-serif;
    --ds-font-mono:        'Fira Code', 'Consolas', monospace;

    /* Wire Bootstrap CSS variables to the brand tokens so utilities like
       btn-primary, text-primary, bg-primary, btn-info, text-info pick them up. */
    --bs-primary:          var(--ds-primary);
    --bs-primary-rgb:      var(--ds-primary-rgb);
    --bs-info:             var(--ds-accent);
    --bs-info-rgb:         var(--ds-accent-rgb);
    --bs-link-color:       var(--ds-primary);
    --bs-link-color-rgb:   var(--ds-primary-rgb);
    --bs-link-hover-color: var(--ds-primary-hover);
    --bs-body-bg:          var(--ds-bg-app);
    --bs-body-color:       var(--ds-text-dark);
    --bs-body-font-family: var(--ds-font-sans-latin);
    --bs-heading-color:    var(--ds-text-dark);
}

html[lang^="ar"], [dir="rtl"] {
    --bs-body-font-family: var(--ds-font-sans-arabic);
}

body {
    font-family: var(--bs-body-font-family);
    background-color: var(--ds-bg-app);
}

/* Sticky footer — page content (#main) grows to fill viewport so the footer
   never floats up in the middle of the screen when content is short. */
body:has(#main.main) { min-height: 100vh; display: flex; flex-direction: column; }
body:has(#main.main) #main.main { flex: 1 0 auto; }
body:has(#main.main) .footer { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   Buttons — every Bootstrap variant routed through brand tokens.
   The legacy NiceAdmin style.css overrides .btn-primary with a
   green-gradient + !important, so we match specificity here.
   ───────────────────────────────────────────────────────────── */

/* Base button polish — consistent feel across all variants */
.btn {
    font-weight: 500;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn-sm { border-radius: 0.4rem; }
.btn-lg { border-radius: 0.6rem; font-weight: 600; }

/* PRIMARY — ABA Green; hover → ABA Teal (brand gradient direction); active → darker green */
.btn-primary,
.btn-primary:visited {
    background: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    color: #fff !important;
}
.btn-primary:hover {
    background: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    color: #fff !important;
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background: var(--ds-primary-hover) !important;
    border-color: var(--ds-primary-hover) !important;
    color: #fff !important;
}
.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--ds-primary-rgb), 0.35) !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    opacity: 0.5;
}

/* OUTLINE PRIMARY */
.btn-outline-primary {
    color: var(--ds-primary) !important;
    border-color: var(--ds-primary) !important;
    background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    color: #fff !important;
}
.btn-outline-primary:active {
    background: var(--ds-primary-hover) !important;
    border-color: var(--ds-primary-hover) !important;
    color: #fff !important;
}

/* SECONDARY — neutral gray, on-brand muted text */
.btn-secondary,
.btn-secondary:visited {
    background: var(--ds-secondary) !important;
    border-color: var(--ds-secondary) !important;
    color: var(--ds-text-dark) !important;
}
.btn-secondary:hover {
    background: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
    color: var(--ds-text-dark) !important;
}
.btn-outline-secondary {
    color: var(--ds-text-gray) !important;
    border-color: var(--ds-secondary) !important;
    background: transparent !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background: var(--ds-bg-app) !important;
    border-color: var(--ds-text-gray) !important;
    color: var(--ds-text-dark) !important;
}

/* SUCCESS — same hue family as primary, slightly darker */
.btn-success,
.btn-success:visited {
    background: var(--ds-success) !important;
    border-color: var(--ds-success) !important;
    color: #fff !important;
}
.btn-success:hover {
    background: #146c43 !important;
    border-color: #146c43 !important;
    color: #fff !important;
}
.btn-outline-success {
    color: var(--ds-success) !important;
    border-color: var(--ds-success) !important;
    background: transparent !important;
}
.btn-outline-success:hover,
.btn-outline-success:focus-visible {
    background: var(--ds-success) !important;
    border-color: var(--ds-success) !important;
    color: #fff !important;
}

/* DANGER */
.btn-danger,
.btn-danger:visited {
    background: var(--ds-danger) !important;
    border-color: var(--ds-danger) !important;
    color: #fff !important;
}
.btn-danger:hover {
    background: #b02a37 !important;
    border-color: #b02a37 !important;
    color: #fff !important;
}
.btn-outline-danger {
    color: var(--ds-danger) !important;
    border-color: var(--ds-danger) !important;
    background: transparent !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus-visible {
    background: var(--ds-danger) !important;
    border-color: var(--ds-danger) !important;
    color: #fff !important;
}

/* WARNING */
.btn-warning,
.btn-warning:visited {
    background: var(--ds-warning) !important;
    border-color: var(--ds-warning) !important;
    color: #1f1300 !important;
}
.btn-warning:hover {
    background: #e0a800 !important;
    border-color: #e0a800 !important;
    color: #1f1300 !important;
}
.btn-outline-warning {
    color: #856404 !important;
    border-color: var(--ds-warning) !important;
    background: transparent !important;
}
.btn-outline-warning:hover {
    background: var(--ds-warning) !important;
    border-color: var(--ds-warning) !important;
    color: #1f1300 !important;
}

/* INFO — wired to ABA Teal (replaces Bootstrap blue per spec §3) */
.btn-info,
.btn-info:visited {
    background: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    color: #fff !important;
}
.btn-info:hover {
    background: #008c83 !important;
    border-color: #008c83 !important;
    color: #fff !important;
}
.btn-outline-info {
    color: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    background: transparent !important;
}
.btn-outline-info:hover,
.btn-outline-info:focus-visible {
    background: var(--ds-accent) !important;
    border-color: var(--ds-accent) !important;
    color: #fff !important;
}

/* LIGHT / DARK — keep neutral, on-brand text */
.btn-light,
.btn-light:visited {
    background: var(--ds-bg-app) !important;
    border-color: var(--ds-secondary) !important;
    color: var(--ds-text-dark) !important;
}
.btn-light:hover {
    background: var(--ds-secondary) !important;
    border-color: var(--ds-secondary) !important;
    color: var(--ds-text-dark) !important;
}
.btn-dark,
.btn-dark:visited {
    background: var(--ds-text-dark) !important;
    border-color: var(--ds-text-dark) !important;
    color: #fff !important;
}
.btn-dark:hover {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

/* LINK — text-style button, picks up brand link color */
.btn-link,
.btn-link:visited {
    color: var(--ds-primary) !important;
    text-decoration: none !important;
    border: 0;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
}
.btn-link:hover {
    color: var(--ds-accent) !important;
    background: rgba(var(--ds-primary-rgb), 0.06);
    text-decoration: none !important;
}

/* CLOSE button (modal close) — picks up brand tint */
.btn-close {
    filter: invert(20%) sepia(8%) saturate(100%) hue-rotate(180deg);
    opacity: 0.6;
}
.btn-close:hover { opacity: 1; }

/* Legacy/non-standard sizing class some templates use */
.btn-block { width: 100% !important; display: block; }

/* Focus ring polish — uniform across all variants */
.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(var(--ds-primary-rgb), 0.25) !important;
}

a { color: var(--ds-primary); }
a:hover { color: var(--ds-accent); }

/* Form controls: larger tap targets and clearer focus ring for SEN/accessibility */
.form-control, .form-select {
    padding: .6rem .9rem;
    font-size: 1rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--ds-primary-rgb), 0.18);
}

/* Mono utility for OTPs, school codes, system IDs */
.ds-mono, .font-mono {
    font-family: var(--ds-font-mono);
    letter-spacing: 0.04em;
}

/* ABA brand utility classes — for cases where overriding Bootstrap vars isn't enough
   (e.g. vendor assets that hard-code their own colors). */
.text-aba-primary { color: var(--ds-primary) !important; }
.text-aba-teal    { color: var(--ds-accent)  !important; }
.text-aba-bright  { color: var(--ds-bright)  !important; }
.text-aba-muted   { color: var(--ds-text-gray) !important; }

.bg-aba-primary { background-color: var(--ds-primary) !important; color: #fff !important; }
.bg-aba-teal    { background-color: var(--ds-accent)  !important; color: #fff !important; }
.bg-aba-bright  { background-color: var(--ds-bright)  !important; color: #fff !important; }
.bg-aba-app     { background-color: var(--ds-bg-app)  !important; }
.bg-aba-canvas  { background-color: var(--ds-bg-canvas) !important; }

.border-aba-primary { border-color: var(--ds-primary) !important; }
.border-aba-teal    { border-color: var(--ds-accent)  !important; }

/* Brand gradient accent — for card top borders, dividers, hero strips */
.bg-aba-gradient {
    background: var(--ds-brand-gradient) !important;
    color: #fff !important;
}
.aba-gradient-top {
    border-top: 4px solid transparent;
    border-image: var(--ds-brand-gradient) 1;
}

/* Soft-tinted surfaces (good for alerts, badges, hover backgrounds) */
.bg-aba-primary-soft { background-color: rgba(var(--ds-primary-rgb), 0.08) !important; color: var(--ds-primary) !important; }
.bg-aba-teal-soft    { background-color: rgba(var(--ds-accent-rgb),  0.10) !important; color: var(--ds-accent)  !important; }

/* ─────────────────────────────────────────────────────────────
   NiceAdmin chrome overrides (header + sidebar).
   We keep the original DOM/classes from the NiceAdmin template so
   the existing toggle-sidebar JS still works, but we re-skin to
   the ABA palette here.
   ───────────────────────────────────────────────────────────── */

/* Top header */
.header {
    background: var(--ds-bg-canvas);
    border-bottom: 1px solid var(--ds-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.header .logo {
    border-right: 1px solid var(--ds-secondary);
}
[dir="rtl"] .header .logo {
    border-right: 0;
    border-left: 1px solid var(--ds-secondary);
}
.header .toggle-sidebar-btn {
    color: var(--ds-primary);
    transition: color 0.15s, transform 0.15s;
}
.header .toggle-sidebar-btn:hover {
    color: var(--ds-accent);
}
.header-nav .nav-profile {
    color: var(--ds-text-dark);
}
.header-nav .nav-profile:hover {
    color: var(--ds-primary);
}
.header-nav .nav-profile img {
    max-height: 36px;
    border: 2px solid var(--ds-secondary);
}
.header-nav .dropdown-menu {
    border: 1px solid var(--ds-secondary);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
    border-radius: 0.6rem;
    padding: 0.5rem;
    min-width: 220px;
}
.header-nav .dropdown-header h6 {
    color: var(--ds-text-dark);
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.header-nav .dropdown-header span {
    color: var(--ds-text-gray);
    font-size: 0.85rem;
}
.header-nav .dropdown-item {
    border-radius: 0.4rem;
    padding: 0.55rem 0.75rem;
    color: var(--ds-text-dark);
}
.header-nav .dropdown-item i {
    color: var(--ds-primary);
    margin-inline-end: 0.6rem;
}
.header-nav .dropdown-item:hover,
.header-nav .dropdown-item:focus {
    background: rgba(var(--ds-primary-rgb), 0.06);
    color: var(--ds-primary);
}

/* Left sidebar */
.sidebar {
    background: var(--ds-bg-canvas);
    border-right: 1px solid var(--ds-secondary);
    box-shadow: none;
}
[dir="rtl"] .sidebar {
    border-right: 0;
    border-left: 1px solid var(--ds-secondary);
}

/* Top-level sidebar items */
.sidebar-nav .nav-item {
    margin-bottom: 0.25rem;
}
.sidebar-nav .nav-link {
    color: var(--ds-text-dark);
    background: transparent;
    border-radius: 0.55rem;
    padding: 0.65rem 0.85rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.sidebar-nav .nav-link i {
    color: var(--ds-primary);
    font-size: 1.15rem;
    margin-inline-end: 0.6rem;
}
.sidebar-nav .nav-link:hover {
    background: rgba(var(--ds-primary-rgb), 0.06);
    color: var(--ds-primary);
}
.sidebar-nav .nav-link:hover i {
    color: var(--ds-accent);
}
.sidebar-nav .nav-link.active {
    background: rgba(var(--ds-primary-rgb), 0.10);
    color: var(--ds-primary);
    font-weight: 600;
}
.sidebar-nav .nav-link.active i {
    color: var(--ds-primary);
}
.sidebar-nav .nav-link.collapsed {
    color: var(--ds-text-dark);
    background: transparent;
}
.sidebar-nav .nav-link .bi-chevron-down,
.sidebar-nav .nav-link .bi-chevron-up {
    color: var(--ds-text-gray);
    font-size: 0.85rem;
    transition: transform 0.2s;
}
.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

/* Nested (collapsible) children */
.sidebar-nav .nav-content {
    padding: 0.25rem 0 0.25rem 0.5rem;
    margin-inline-start: 0.5rem;
    border-inline-start: 2px solid var(--ds-secondary);
}
.sidebar-nav .nav-content a {
    color: var(--ds-text-gray);
    border-radius: 0.45rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.95rem;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.sidebar-nav .nav-content a i {
    color: var(--ds-secondary);
    font-size: 0.55rem;
    margin-inline-end: 0.55rem;
}
.sidebar-nav .nav-content a:hover {
    color: var(--ds-primary);
    background: rgba(var(--ds-primary-rgb), 0.05);
}
.sidebar-nav .nav-content a:hover i {
    color: var(--ds-primary);
}
.sidebar-nav .nav-content a.active {
    color: var(--ds-primary);
    background: rgba(var(--ds-primary-rgb), 0.08);
    font-weight: 600;
}
.sidebar-nav .nav-content a.active i {
    color: var(--ds-primary);
}

/* Sidebar group heading separators */
.sidebar-nav .nav-heading {
    color: var(--ds-text-gray);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 1.2rem 0.85rem 0.4rem;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   Reusable page patterns (used across admin/school list, form,
   detail pages). Keep these minimal and Bootstrap-compatible.
   ───────────────────────────────────────────────────────────── */

/* Page title block — replaces NiceAdmin's .pagetitle, on-brand */
.ds-pagetitle {
    margin-bottom: 1.25rem;
}
.ds-pagetitle h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ds-text-dark);
    margin: 0;
}
.ds-pagetitle .breadcrumb {
    margin: 0.25rem 0 0;
    font-size: 0.88rem;
    background: transparent;
    padding: 0;
}
.ds-pagetitle .breadcrumb a {
    color: var(--ds-text-gray);
    text-decoration: none;
}
.ds-pagetitle .breadcrumb a:hover { color: var(--ds-primary); }
.ds-pagetitle .breadcrumb-item.active {
    color: var(--ds-primary);
    font-weight: 500;
}
.ds-pagetitle .breadcrumb-item + .breadcrumb-item::before {
    color: var(--ds-text-gray);
    content: "›";
    padding: 0 0.4rem;
}

/* Card pattern — gradient top, soft shadow, no border */
.ds-card {
    border: 0;
    border-radius: 0.85rem;
    background: var(--ds-bg-canvas);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.04);
    margin-bottom: 1rem;
}
.ds-card-accent::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--ds-brand-gradient);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.ds-card-head {
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--ds-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.ds-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ds-text-dark);
}
.ds-card-subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--ds-text-gray);
}

/* Filter row inside a card — used on list pages */
.ds-filter-card .card-body { padding: 1rem 1.25rem; }
.ds-filter-card .form-label {
    font-size: 0.85rem;
    color: var(--ds-text-gray);
    font-weight: 500;
    margin-bottom: 0.35rem;
}

/* List item cards — used by exams/templates/schools list pages */
.ds-list-card {
    background: var(--ds-bg-canvas);
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--ds-secondary);
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.03);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    margin-bottom: 1rem;
}
.ds-list-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--ds-primary-rgb), 0.30);
    box-shadow: 0 0.5rem 1.25rem rgba(var(--ds-primary-rgb), 0.08);
}
.ds-list-card .ds-list-id {
    font-family: var(--ds-font-mono);
    color: var(--ds-text-gray);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}
.ds-list-card .ds-list-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ds-text-dark);
    margin: 0.15rem 0 0.4rem;
    line-height: 1.3;
}
.ds-list-card .ds-list-meta {
    color: var(--ds-text-gray);
    font-size: 0.92rem;
    margin: 0;
}
.ds-list-card .ds-list-meta + .ds-list-meta { margin-top: 0.15rem; }
.ds-list-card hr {
    border-color: var(--ds-secondary);
    opacity: 1;
    margin: 0.85rem 0;
}

/* Action link — replaces the `btn btn-link` pattern used throughout legacy pages */
.ds-action-link {
    color: var(--ds-primary);
    text-decoration: none;
    font-weight: 500;
    padding: 0.4rem 0.6rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.15s, color 0.15s;
}
.ds-action-link:hover {
    color: var(--ds-accent);
    background: rgba(var(--ds-primary-rgb), 0.06);
}
.ds-action-link.danger { color: var(--ds-danger); }
.ds-action-link.danger:hover {
    color: #fff;
    background: var(--ds-danger);
}

/* Badges */
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
}
.ds-badge.primary { background: rgba(var(--ds-primary-rgb), 0.10); color: var(--ds-primary); }
.ds-badge.teal    { background: rgba(var(--ds-accent-rgb),  0.10); color: var(--ds-accent); }
.ds-badge.gray    { background: var(--ds-secondary);              color: var(--ds-text-gray); }
.ds-badge.warning { background: rgba(var(--ds-warning-rgb), 0.18); color: #856404; }
.ds-badge.danger  { background: rgba(var(--ds-danger-rgb),  0.10); color: var(--ds-danger); }
.ds-badge.success { background: rgba(var(--ds-success-rgb), 0.10); color: var(--ds-success); }

/* DataTables — Bootstrap 5 with brand polish */
table.dataTable,
.table.ds-table {
    --bs-table-bg: var(--ds-bg-canvas);
    --bs-table-border-color: var(--ds-secondary);
    --bs-table-hover-bg: rgba(var(--ds-primary-rgb), 0.04);
    margin-bottom: 0;
}
table.dataTable thead th,
.table.ds-table thead th {
    background: var(--ds-bg-app);
    color: var(--ds-text-dark);
    font-weight: 600;
    font-size: 0.88rem;
    border-bottom: 2px solid var(--ds-secondary);
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { padding: 0.75rem 1rem; }
.dataTables_wrapper .pagination .page-link {
    color: var(--ds-primary);
    border-color: var(--ds-secondary);
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: #fff;
}

/* Bootstrap pagination tweaks (used by paginate() links on list pages) */
.pagination .page-link {
    color: var(--ds-primary);
    border-color: var(--ds-secondary);
}
.pagination .page-item.active .page-link {
    background: var(--ds-primary);
    border-color: var(--ds-primary);
    color: #fff;
}
.pagination .page-link:hover {
    background: rgba(var(--ds-primary-rgb), 0.06);
    color: var(--ds-primary-hover);
}

/* Modal polish — used in universal.blade.php (lookup CRUD modal) */
.modal-content {
    border: 0;
    border-radius: 0.85rem;
    overflow: hidden;
}
.modal-content::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--ds-brand-gradient);
}
.modal-header {
    border-bottom: 1px solid var(--ds-secondary);
    padding: 1rem 1.25rem;
}
.modal-title {
    font-weight: 600;
    color: var(--ds-text-dark);
}
.modal-footer {
    border-top: 1px solid var(--ds-secondary);
    padding: 0.85rem 1.25rem;
}

/* Form labels and helper text */
.form-label {
    font-weight: 500;
    color: var(--ds-text-dark);
    margin-bottom: 0.4rem;
}
.form-text {
    color: var(--ds-text-gray);
}
/* Empty state */
.ds-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--ds-text-gray);
}
.ds-empty i {
    font-size: 2.5rem;
    color: var(--ds-secondary);
    display: block;
    margin-bottom: 0.75rem;
}
</style>