/* ==========================================================================
   SmartSchool-style theme override for eSchool SaaS (Star Admin base)
   Palette: primary green #009444, body text #5C636D, light sidebar.
   Font: Graphik (drop real files in /assets/fonts/graphik) → falls back to Inter.
   This file is loaded LAST in layouts/include.blade.php so it wins the cascade.
   ========================================================================== */

/* ----- Graphik (self-hosted, optional). Drop woff2 files to activate. ------ */
@font-face {
    font-family: 'Graphik';
    src: url('/assets/fonts/graphik/Graphik-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('/assets/fonts/graphik/Graphik-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('/assets/fonts/graphik/Graphik-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('/assets/fonts/graphik/Graphik-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ssc-green:        #009444;
    --ssc-green-dark:   #007a38;
    --ssc-green-600:    #00803b;
    --ssc-green-light:  #e6f4ec;  /* active nav pill / soft tint */
    --ssc-green-hover:  #f1f9f4;  /* nav hover */
    --ssc-tint-green:   #e9f6ef;
    --ssc-tint-blue:    #eaf1fb;
    --ssc-tint-yellow:  #fbf6e6;
    --ssc-tint-pink:    #fdecec;
    --ssc-gold:         #c79a3e;
    --ssc-gold-dark:    #b3872f;
    --text-heading:       #3a4149;  /* darker for heading punch */
    --text-body:          #5c636d;  /* graphik body color (rgb 92,99,109) */
    --text-muted:         #98a1ac;
    --border:             #edeff2;
    --border-soft:        #f1f3f6;
    --bg-page:            #f7f8fa;
    --bg-card:            #ffffff;
    --radius-card:        14px;
    --radius-btn:         8px;
    --radius-input:       8px;
    --radius-pill:        999px;

    /* remap the Star Admin bootstrap css-vars where they are actually used */
    --primary:            #009444;
    --blue:               #009444;
    --theme-color:        #009444;
}

/* ============================ Typography ================================== */
body,
.card, .card-body, .content-wrapper, .navbar, .sidebar,
h1, h2, h3, h4, h5, h6,
p, span, a, small, label, li, td, th, div,
.btn, .nav-link, .menu-title, .page-title,
input, select, textarea, button, .form-control,
.dropdown-item, .badge, .alert {
    font-family: 'Graphik', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* never touch icon fonts */
i, .fa, .mdi, [class^="mdi-"], [class*=" mdi-"], .menu-icon, .menu-arrow {
    font-family: inherit;
}
.fa, .fas, .far, .fab { font-family: 'FontAwesome' !important; }

body {
    color: var(--text-body);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.1px;
    background: var(--bg-page) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.page-title, .card-title, .card-body .card-title {
    color: var(--text-heading) !important;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.35;
    margin-bottom: 0.6rem;
}
.text-muted { color: var(--text-muted) !important; }
a { color: var(--ssc-green); }
a:hover, a:focus { color: var(--ssc-green-dark); }

/* Use graphik body color (#5c636d) for ALL black text — soften pure/near-black.
   Headings & body already resolve to #5c636d via --text-heading / body color;
   here we only override the explicit "dark/black" utility classes + hardcoded blacks. */
.text-dark, .text-body-dark, .text-black, .text-gray-dark, .text-default,
.text-secondary, strong.text-dark,
.navbar .navbar-nav .nav-link, .navbar-menu-wrapper .nav-link {
    color: #5c636d !important;
}
.text-black-50 { color: #98a1ac !important; }
/* re-assert brand/status colors so the rule above never grays them */
a { color: var(--ssc-green) !important; }
a:hover, a:focus { color: var(--ssc-green-dark) !important; }
.text-theme, .text-primary, .text-info, .text-success { color: var(--ssc-green) !important; }

/* ---- Text rhythm: comfortable line-height + spacing (14px / 24px base) ---- */
p, .description, .card-body p, .preview-item-content p, li, dd {
    line-height: 24px;
    margin-bottom: 12px;
}
p:last-child, .description:last-child { margin-bottom: 0; }
.description, .card-description, .text-muted, small, .small {
    line-height: 24px;
}
.card-body { line-height: 24px; }
label, .form-label { line-height: 20px; margin-bottom: 6px; }
.table td, .table th { line-height: 22px; }
.sidebar .nav .nav-item .nav-link { line-height: 20px; }
/* tighten a touch on small screens (mirrors the reference rule) */
@media screen and (max-width: 950px) {
    body { font-size: 14px; line-height: 22px; }
    p, .description, .card-body p, li, dd {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 16px;
    }
}

/* ============================ Layout shell =============================== */
.page-body-wrapper,
.main-panel { background: var(--bg-page) !important; }
.content-wrapper { background: transparent !important; }

/* ============================== Navbar / header ========================== */
.navbar.default-layout-navbar {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}
.navbar .navbar-brand-wrapper {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.navbar .navbar-menu-wrapper { background: var(--bg-card) !important; }
.navbar .navbar-nav .nav-link,
.navbar .navbar-menu-wrapper .navbar-toggler { color: var(--text-body) !important; }
.navbar .count-indicator .fa,
.navbar .count-indicator .mdi { color: var(--text-body); }

/* ============================== Sidebar (light) ========================== */
.sidebar {
    background: var(--bg-card) !important;
    border-right: 1px solid var(--border);
}
.sidebar .nav .nav-item .nav-link {
    color: var(--text-body) !important;
    font-weight: 500;
    border-radius: 10px;
    margin: 2px 12px;
    padding: 11px 14px;
    transition: all .18s ease;
}
.sidebar .nav .nav-item .nav-link .menu-title { color: inherit !important; font-weight: 500; }
.sidebar .nav .nav-item .nav-link .menu-icon { color: var(--text-muted) !important; }
.sidebar .nav .nav-item .nav-link:hover {
    background: var(--ssc-green-hover) !important;
    color: var(--ssc-green) !important;
}
.sidebar .nav .nav-item .nav-link:hover .menu-icon,
.sidebar .nav .nav-item .nav-link:hover .menu-title { color: var(--ssc-green) !important; }

/* active / open item */
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item .nav-link.active,
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] {
    background: var(--ssc-green-light) !important;
    color: var(--ssc-green) !important;
    font-weight: 600;
}
.sidebar .nav .nav-item.active > .nav-link .menu-icon,
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item .nav-link.active .menu-icon,
.sidebar .nav .nav-item .nav-link.active .menu-title,
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] .menu-icon,
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] .menu-title {
    color: var(--ssc-green) !important;
}
/* submenu */
.sidebar .nav.sub-menu { margin: 2px 0 6px; }
.sidebar .nav.sub-menu .nav-item .nav-link {
    color: var(--text-body) !important;
    font-weight: 500;
    margin: 1px 12px 1px 34px;
    padding: 8px 12px;
    font-size: 13px;
}
.sidebar .nav.sub-menu .nav-item .nav-link:hover,
.sidebar .nav.sub-menu .nav-item.active .nav-link,
.sidebar .nav.sub-menu .nav-item .nav-link.active {
    background: var(--ssc-green-light) !important;
    color: var(--ssc-green) !important;
}
.sidebar .menu-arrow { color: var(--text-muted); }
/* sidebar menu search */
.sidebar .menu-search,
.sidebar .form-control { border-radius: 10px; border-color: var(--border); }

/* ============================== Cards ==================================== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}
.card .card-body { padding: 1.5rem; }
.grid-margin { margin-bottom: 1.5rem; }

/* page header title chip */
.page-title-icon,
.page-title .page-title-icon.bg-theme {
    background: var(--ssc-green-light) !important;
    color: var(--ssc-green) !important;
    border-radius: 12px !important;
}
.page-title { font-size: 1.7rem; font-weight: 800; color: #232a31 !important; letter-spacing: -0.6px; }
.page-header { margin-bottom: 1.5rem; }

/* ====================== Brand color remaps (theme utils) ================= */
.bg-theme, .bg-primary { background-color: var(--ssc-green) !important; color: #fff !important; }
.text-theme, .text-primary { color: var(--ssc-green) !important; }
.border-theme { border-color: var(--ssc-green) !important; }
.text-success { color: var(--ssc-green) !important; }
.bg-success { background-color: var(--ssc-green) !important; }

/* ============================== Buttons ================================== */
.btn {
    border-radius: var(--radius-btn);
    font-weight: 500;
    letter-spacing: -0.1px;
    transition: all .18s ease;
}
.btn-theme, .btn-primary, .btn-success,
.btn-inverse-primary:hover, .btn-gradient-primary {
    background: var(--ssc-green) !important;
    border-color: var(--ssc-green) !important;
    color: #fff !important;
}
.btn-theme:hover, .btn-primary:hover, .btn-success:hover,
.btn-gradient-primary:hover {
    background: var(--ssc-green-dark) !important;
    border-color: var(--ssc-green-dark) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 148, 68, 0.28);
    transform: translateY(-1px);
}
.btn-outline-primary, .btn-outline-theme, .btn-outline-success {
    color: var(--ssc-green) !important;
    border-color: var(--ssc-green) !important;
    background: transparent !important;
}
.btn-outline-primary:hover, .btn-outline-theme:hover, .btn-outline-success:hover {
    background: var(--ssc-green) !important;
    color: #fff !important;
}
.btn-inverse-primary, .btn-inverse-success, .btn-inverse-info {
    background: var(--ssc-green-light) !important;
    color: var(--ssc-green) !important;
    border-color: transparent !important;
}
.btn-light, .btn-secondary {
    background: #fff !important;
    border: 1px solid var(--border) !important;
    color: var(--text-body) !important;
}
.btn-light:hover, .btn-secondary:hover { background: var(--bg-page) !important; }

/* golden "upgrade / premium" style */
.btn-warning, .btn-gradient-warning, .btn-upgrade {
    background: linear-gradient(135deg, #d5a94a, var(--ssc-gold-dark)) !important;
    border-color: var(--ssc-gold-dark) !important;
    color: #fff !important;
}

/* ============================== Badges =================================== */
.badge { border-radius: 999px; font-weight: 500; padding: .38em .7em; }
.badge-primary, .badge-theme { background: var(--ssc-green) !important; color: #fff !important; }
.badge-success { background: var(--ssc-green) !important; color: #fff !important; }
.badge-inverse-primary, .badge-outline-primary,
.badge-inverse-success { background: var(--ssc-green-light) !important; color: var(--ssc-green) !important; border-color: transparent !important; }

/* ============================== Forms ==================================== */
.form-control, .custom-select, .select2-container--default .select2-selection--single {
    border-radius: 10px !important;
    border-color: var(--border) !important;
    color: var(--text-heading);
    font-size: 14px;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--ssc-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 148, 68, 0.12) !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    border-color: var(--ssc-green) !important;
    background: var(--ssc-green) !important;
}
.select2-container--default .select2-selection__choice {
    background: var(--ssc-green-light) !important;
    color: var(--ssc-green) !important;
    border-color: transparent !important;
    border-radius: 8px !important;
}
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
    background-color: var(--ssc-green) !important;
    border-color: var(--ssc-green) !important;
}
/* purge purple-era accent from native radios/checkboxes/range/progress */
input[type="checkbox"], input[type="radio"], input[type="range"], progress {
    accent-color: var(--ssc-green);
}
.custom-control-input:checked ~ .custom-control-label::after { color: #fff; }
.form-check input.form-check-input:checked,
.form-radio input:checked { background-color: var(--ssc-green) !important; border-color: var(--ssc-green) !important; }
/* toggle switches */
.form-switch .form-check-input:checked { background-color: var(--ssc-green) !important; border-color: var(--ssc-green) !important; }

/* ============================== Tables (SmartSchool) =========================== */
.table thead th {
    background: #f4f5f7;
    color: #3a4149;
    text-transform: none;          /* SmartSchool uses sentence-case headers */
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.1px;
    border-top: none;
    border-bottom: 1px solid var(--border);
    padding: 15px 16px;
    white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: 12px; }
.table thead th:last-child  { border-top-right-radius: 12px; }
.table td, .table th { border-color: var(--border-soft); vertical-align: middle; }
.table td { padding: 15px 16px; }
.table-hover tbody tr:hover, .table tbody tr:hover { background: #f8fafb; }
.bootstrap-table .fixed-table-container { border-radius: 12px; overflow: hidden; }
.fixed-table-toolbar .search input,
.bootstrap-table .search .form-control { border-radius: var(--radius-pill) !important; }
/* empty state */
.no-records-found td, .fixed-table-body .no-records-found td {
    color: var(--text-heading); font-weight: 700; padding: 42px 16px !important; text-align: center;
}

/* pagination */
.page-item.active .page-link { background: var(--ssc-green) !important; border-color: var(--ssc-green) !important; }
.page-link { color: var(--ssc-green); border-radius: 8px; margin: 0 2px; border-color: var(--border); }

/* ============================== Alerts / misc =========================== */
.alert-success, .alert-fill-success {
    background: var(--ssc-tint-green); border-color: transparent; color: var(--ssc-green-dark);
}
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
    color: var(--ssc-green) !important;
    border-color: var(--ssc-green) transparent;
}
.nav-pills .nav-link.active { background: var(--ssc-green) !important; color: #fff !important; }
.progress-bar { background: var(--ssc-green) !important; }
.text-primary, .text-info { color: var(--ssc-green) !important; }
.swal2-confirm, .swal2-styled.swal2-confirm { background: var(--ssc-green) !important; }

/* scrollbar accent */
::-webkit-scrollbar-thumb { background: #d7dbe0; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #c2c7ce; }

/* ==================== SmartSchool stat cards (rebuilt markup) ================== */
.ssc-stat {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.ssc-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -8px rgba(16, 24, 40, 0.12) !important;
}
.ssc-stat__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 24px;
}
.ssc-stat__value {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #232a31 !important;
    line-height: 1 !important;
    margin: 0 0 8px !important;
    letter-spacing: -1px;
}
.ssc-stat__label {
    font-size: 0.9rem;
    color: #5c636d !important;
    font-weight: 500;
    margin: 0 !important;
    line-height: 1.3;
}
.ssc-stat__icon {
    flex: 0 0 auto;
    width: 54px; height: 54px;
    border-radius: 14px;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 4px 10px -2px rgba(16, 24, 40, 0.08);
}
.ssc-stat--green  { background: #e9f7ef !important; } .ssc-stat--green  .ssc-stat__icon { color: #009444; }
.ssc-stat--blue   { background: #eaf1fb !important; } .ssc-stat--blue   .ssc-stat__icon { color: #3b7ddd; }
.ssc-stat--yellow { background: #fdf6e4 !important; } .ssc-stat--yellow .ssc-stat__icon { color: #e0a100; }
.ssc-stat--pink   { background: #fdecec !important; } .ssc-stat--pink   .ssc-stat__icon { color: #e5484d; }
.ssc-stat--teal   { background: #e6f6f6 !important; } .ssc-stat--teal   .ssc-stat__icon { color: #0d9488; }

/* Legacy pastel stat cards (school-admin .col-md-2-4 layout): white icon squares */
.content-wrapper .row > [class*="col-md-2-4"] .card,
.content-wrapper .row > .stretch-card .card { border-radius: 16px !important; }
.content-wrapper .row:has(.col-md-2-4) > [class*="col-md-2-4"]:nth-child(5n+1) .card { background: var(--ssc-tint-green) !important; border-color: transparent !important; box-shadow:none!important; }
.content-wrapper .row:has(.col-md-2-4) > [class*="col-md-2-4"]:nth-child(5n+2) .card { background: var(--ssc-tint-blue) !important; border-color: transparent !important; box-shadow:none!important; }
.content-wrapper .row:has(.col-md-2-4) > [class*="col-md-2-4"]:nth-child(5n+3) .card { background: var(--ssc-tint-yellow) !important; border-color: transparent !important; box-shadow:none!important; }
.content-wrapper .row:has(.col-md-2-4) > [class*="col-md-2-4"]:nth-child(5n+4) .card { background: var(--ssc-tint-pink) !important; border-color: transparent !important; box-shadow:none!important; }
.content-wrapper .row:has(.col-md-2-4) > [class*="col-md-2-4"]:nth-child(5n+5) .card { background: var(--ssc-green-light) !important; border-color: transparent !important; box-shadow:none!important; }
.content-wrapper [class*="col-md-2-4"] .card .card-body h3 { font-weight: 800; color: #232a31 !important; font-size: 1.75rem; }
.content-wrapper [class*="col-md-2-4"] .card .card-body img,
.content-wrapper .custom-card-body img.ml-auto {
    background: #fff; border-radius: 14px; padding: 9px;
    width: 52px; height: 52px; object-fit: contain;
    box-shadow: 0 4px 10px -2px rgba(16, 24, 40, 0.08);
}

/* ==================== Filter pills / tab toggles (SmartSchool) ================= */
.nav-pills .nav-link, .nav-tabs .nav-link,
.btn-group .btn-outline-secondary, .filter-tabs .btn {
    background: #f2f4f6 !important;
    color: #5c636d !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    font-weight: 500;
    padding: 9px 18px;
    margin-right: 8px;
}
.nav-pills .nav-link:hover, .nav-tabs .nav-link:hover { background: #e9edf1 !important; }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active,
.btn-group .btn-outline-secondary.active, .filter-tabs .btn.active {
    background: var(--ssc-green) !important;
    color: #fff !important;
    border-color: var(--ssc-green) !important;
}

/* ==================== Toolbar buttons (Filter / Delivery / Search) ======= */
.fixed-table-toolbar .btn, .toolbar .btn,
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
    background: #fff !important;
    color: #4a5259 !important;
    border: 1px solid #dfe3e8 !important;
    border-radius: 8px !important;
    font-weight: 500;
}
.fixed-table-toolbar .btn:hover, .btn-outline-secondary:hover { background: #f7f8fa !important; border-color: #cdd3da !important; }

/* ==================== Section labels & dividers ========================== */
.sub-category, .sidebar .sidebar-heading, .nav-category {
    color: #3a4149 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.1px !important;
    border-left: none !important;
    font-size: 12.5px !important;
    padding-left: 22px !important;
}
hr, .divider { border-color: var(--border); opacity: 1; }

/* ==================== Header logo sizing ================================ */
.navbar .navbar-brand.brand-logo { padding: 0; }
.navbar .navbar-brand.brand-logo img,
.navbar .navbar-brand.brand-logo img.custom-default-image {
    height: 46px !important;
    max-height: 46px !important;
    width: auto !important;
    max-width: 210px !important;
    object-fit: contain;
}
.navbar .navbar-brand.brand-logo-mini img { height: 40px !important; width: auto !important; object-fit: contain; }
.navbar .navbar-brand-wrapper { min-width: 210px; }

/* ==================== Sidebar menu-search visibility ==================== */
.sidebar .sidebar-search { padding-top: 8px; padding-bottom: 4px; }
.sidebar .menu-search,
.sidebar #menu-search,
.sidebar #menu-search-mini,
.sidebar input.menu-search.border-theme {
    background: #f4f6f8 !important;
    border: 1px solid #e2e6ea !important;
    border-radius: 10px !important;
    color: #3a4149 !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.sidebar .menu-search:focus, .sidebar #menu-search:focus, .sidebar #menu-search-mini:focus {
    background: #fff !important;
    border-color: var(--ssc-green) !important;
    box-shadow: 0 0 0 3px rgba(0, 148, 68, 0.12) !important;
}
.sidebar .menu-search::placeholder { color: #98a1ac !important; }
/* remove the duplicate mobile-only search box (main one already shows everywhere) */
.sidebar .sidebar-search.mt-2 { display: none !important; }

/* ========================= MOBILE RESPONSIVE ============================ */
@media (max-width: 991.98px) {
    /* Header: single row; hide the nag banner that overlaps the logo */
    .navbar.default-layout-navbar { flex-wrap: nowrap !important; min-height: 62px; }
    .navbar .navbar-menu-wrapper > .mx-auto.order-0 { display: none !important; }
    .navbar .navbar-brand-wrapper { width: auto !important; min-width: 140px; padding: 0 10px; }
    .navbar .navbar-menu-wrapper { width: 100%; padding: 0 8px !important; }
    .navbar .navbar-nav.navbar-nav-right { margin-left: auto; }
    .navbar .cache-clear { display: none !important; }

    /* Offcanvas sidebar: force it to the LEFT (slide in from left), overlay w/ shadow */
    .sidebar.sidebar-offcanvas {
        overflow-y: auto;
        left: 0 !important;
        right: auto !important;
        transform: translateX(-100%) !important;
        transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    }
    .sidebar.sidebar-offcanvas.active {
        transform: translateX(0) !important;
        box-shadow: 0 10px 40px rgba(16, 24, 40, 0.18);
        z-index: 1060;
    }

    /* Content spacing */
    .main-panel .content-wrapper { padding: 16px !important; }
    .card .card-body { padding: 1.15rem !important; }
    .page-header { flex-wrap: wrap; gap: 10px; margin-bottom: 1rem; }
    .page-title { font-size: 1.4rem !important; }

    /* Stat cards: slightly tighter */
    .ssc-stat__body { padding: 18px 18px !important; }
    .ssc-stat__value { font-size: 1.7rem !important; }
    .ssc-stat__icon { width: 48px; height: 48px; font-size: 1.2rem; }

    /* Tables scroll horizontally rather than overflow the card */
    .table-responsive, .fixed-table-container, .fixed-table-body,
    .card .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .table { min-width: 560px; }

    /* Filter pills & toolbar wrap nicely */
    .nav-pills, .nav-tabs, .fixed-table-toolbar { flex-wrap: wrap; gap: 8px; }
    .nav-pills .nav-link, .nav-tabs .nav-link { margin-bottom: 6px; }
    .fixed-table-toolbar .columns, .fixed-table-toolbar .search { float: none !important; width: 100%; margin: 4px 0; }
    .fixed-table-toolbar .search .form-control { width: 100% !important; }
}

@media (max-width: 575.98px) {
    .ssc-stat-row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .page-title { font-size: 1.25rem !important; }
    .main-panel .content-wrapper { padding: 12px !important; }
    .ssc-stat__body { padding: 16px !important; }
    /* stack any page-header action buttons full width */
    .page-header .btn { width: auto; }
    h4.card-title, .card-title { font-size: 1.05rem; }
}

/* login / auth pages */
.auth .btn-primary, .auth-form-light .btn-primary { background: var(--ssc-green) !important; border-color: var(--ssc-green) !important; }
.auth-form-light { border-radius: 16px; }
@media (max-width: 575.98px) {
    .auth .auth-form-light { margin: 12px !important; padding: 1.25rem !important; }
    .auth .rounded-lg.p-5 { padding: 1rem !important; }
}