/* Inter is loaded via a non-blocking <link rel="stylesheet"> in partials/head.php
   (a render-blocking @import here caused an icon-font FOUT on cold page loads). */

/* ============================================================================
   Mahir EMS — modern admin theme layer
   Loaded LAST, admin/staff pages only (see partials/head.php). Two parts:
     (1) TOP MENU   — a global restyle of the two Limitless navbars
                      (main_navbar.php + secondary_navbar_main.php).
     (2) .ems-ui    — modern components (cards / tables / forms / buttons /
                      DataTables). Applied APP-WIDE: the admin content wrapper
                      (<div class="content ems-ui"> in template/header.php)
                      carries the class, so every admin page is themed. Colour
                      overrides are guarded with :not([class*="bg-"]) so coloured
                      Limitless tiles/headers keep their look. The CEO dashboard
                      keeps its own .ems-bi / .ems-dash layers; no collision
                      (it uses .bi-card, not a bare .card).
   Presentation only — relies solely on Limitless class names already in the
   markup; no JS hooks, data-* attributes or mobile toggles are changed.
   ============================================================================ */
:root {
    --ems-ink:#0f172a; --ems-muted:#475569; --ems-soft:#64748b;
    --ems-line:#e8edf3; --ems-line2:#eef2f7; --ems-bg:#f5f7fb;
    /* primary accent is BLUE everywhere now (was indigo #4f46e5 — user wants NO purple) */
    --ems-indigo:#2563eb; --ems-indigo-d:#1d4ed8; --ems-accent:#4f79c7;
    --ems-tint:rgba(37,99,235,.08);
    /* top-menu accent = blue (NO purple in the navbar) */
    --ems-nav:#2563eb; --ems-nav-d:#1d4ed8; --ems-nav-tint:rgba(37,99,235,.10);

    /* ---- unified semantic palette (Enterprise UI standardization, 2026-07) --------
       Canonical --ems-* names. Values are kept IDENTICAL to the portal theme
       (backend/dist/css/parent-theme.css) so admin + portal read as ONE system:
         --ems-primary == portal --primary   --ems-success == portal --ok
         --ems-warning == portal --warn       --ems-danger  == portal --danger
       These live at :root (global) so college scoped-token screens can consume
       them too. Still BLUE-primary / NO purple. */
    --ems-primary:#2563eb; --ems-primary-d:#1d4ed8; --ems-primary-tint:rgba(37,99,235,.08);
    --ems-secondary:#475569; --ems-secondary-tint:#f1f5f9;
    --ems-success:#16a34a; --ems-success-tint:#e9f8ef;
    --ems-warning:#b45309; --ems-warning-tint:#fff7ed;
    --ems-danger:#dc2626;  --ems-danger-tint:#fef2f2;
    --ems-info:#0891b2;    --ems-info-tint:#ecfeff;

    /* radius + elevation scale (single source for cards / buttons / inputs / modals)
       Retuned 2026-07 for a denser, quieter surface. 16px reads bubbly at the sizes
       these cards actually run at; the elevation was two stacked shadows, which on a
       page of eight cards adds up to visible grey. One hairline border plus one soft
       shadow is what the college G1 screens use, and they are the reference. */
    --ems-radius:14px; --ems-radius-md:11px; --ems-radius-sm:8px; --ems-radius-xs:6px;
    --ems-shadow-sm:0 1px 2px rgba(16,24,40,.03);
    --ems-shadow:0 1px 2px rgba(16,24,40,.03);
    --ems-shadow-hover:0 4px 14px rgba(16,24,40,.06);
    --ems-shadow-lg:0 20px 50px rgba(16,24,40,.18);
    --ems-font:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}

/* ============================ (1) TOP MENU ============================ */
/* Both navbars carry .navbar-light .navbar-sm; the top bar adds .navbar-static,
   the module bar is .navbar-expand (+ .main-header when it's sticky). */
.navbar-light { font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif; }
.navbar.navbar-static { background:#fff; border-bottom:1px solid var(--ems-line); box-shadow:0 1px 2px rgba(16,24,40,.03); }
.navbar.navbar-expand.navbar-light { background:#fff; border-bottom:1px solid var(--ems-line); }
.navbar.navbar-expand.navbar-light.main-header { box-shadow:0 2px 10px rgba(16,24,40,.05); }

/* nav links: quieter default, BLUE on hover/active, pill hover */
.navbar-light .navbar-nav-link { color:#475569; font-weight:600; font-size:13px; border-radius:9px;
    padding-top:.5rem; padding-bottom:.5rem; transition:background .15s ease, color .15s ease; }
.navbar-light .navbar-nav-link:hover,
.navbar-light .navbar-nav-link:focus { color:var(--ems-nav); background:var(--ems-nav-tint); }
.navbar-light .navbar-nav-link.active,
.navbar-light .navbar-nav-link.active:hover,
.navbar-light .navbar-nav-link.active:focus,
.navbar-light .nav-item.active > .navbar-nav-link,
.navbar-light .nav-item.show > .navbar-nav-link { color:var(--ems-nav); background:transparent; }
.navbar-light .navbar-nav-link i { color:inherit; }

/* dropdowns + mega-menus: rounded, soft-shadowed, BLUE hover items */
.navbar .dropdown-menu { border:1px solid var(--ems-line); border-radius:12px;
    box-shadow:0 14px 34px rgba(16,24,40,.13); padding:6px; margin-top:6px; }
.navbar .dropdown-menu .dropdown-item { border-radius:8px; font-size:13px; color:#475569; padding:.5rem .75rem; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus { background:var(--ems-nav-tint); color:var(--ems-nav); }
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active { background:var(--ems-nav); color:#fff; }
.navbar .dropdown-divider { border-color:var(--ems-line2); }
.navbar .dropdown-content, .navbar .mega-menu-full .dropdown-menu { border-radius:12px; }
.navbar .dropdown-content-body { padding:6px; }

/* mobile toggler stays crisp */
.navbar-toggler { color:var(--ems-ink); border-radius:9px; }

/* ============================ (2) .ems-ui components ============================ */
/* Body typeface: Inter, matching the navbar (font is already loaded via a non-blocking
   <link> in partials/head.php — see note at top; icon fonts declare their own family so
   glyphs are unaffected). Enabled 2026-07 so admin body no longer falls back to Roboto. */
.ems-ui { font-family:var(--ems-font); color:var(--ems-ink); }

/* cards — rounding for ALL; the white / border / shadow / transparent-header
   treatment is applied ONLY to non-coloured cards & headers, so Limitless stat
   tiles (.card.bg-primary etc.) and coloured headers (.card-header.bg-*) keep
   their intended colour when the theme is applied app-wide. */
.ems-ui .card { border-radius:var(--ems-radius); margin-bottom:14px; }
.ems-ui .card:not([class*="bg-"]) { background:#fff; border:1px solid var(--ems-line);
    box-shadow:var(--ems-shadow); }
.ems-ui .card.card-primary { border-top-color:var(--ems-line); }
.ems-ui .card-header { padding:13px 16px; }
.ems-ui .card-header:not([class*="bg-"]) { background:transparent; border-bottom:1px solid var(--ems-line2); }
.ems-ui .card-title,
.ems-ui .card-title.titlefix { font-size:13.5px; font-weight:800; letter-spacing:0; text-transform:none; margin:0; }
.ems-ui .card-header:not([class*="bg-"]) .card-title { color:var(--ems-ink); }
.ems-ui .card-title > i, .ems-ui .card-title > .la, .ems-ui .card-title > [class^="icon-"] { color:var(--ems-accent); }
.ems-ui .card-body { padding:14px 16px; }
.ems-ui .card-footer { background:transparent; border-top:1px solid var(--ems-line2); padding:11px 16px; }

/* tables — themed app-wide (enabled 2026-07). Guarded so coloured/dark tables and
   coloured status cells keep their intended look:
     - skip .table-dark and .table.bg-* entirely
     - skip cells that carry a bg- or text- utility (coloured badges, coloured totals) */
/* Base colour is the same ink as the tbody rule below, NOT --ems-muted. The tbody
   rule excludes cells carrying a text-* utility, which is nearly every FIGURE in the
   app (.text-right / .text-center) — so numbers inherited the lighter muted grey while
   the words beside them were darker. A column of money reading lighter than its own
   row label is backwards; both are data. */
.ems-ui .table { color:#334155; font-size:12.5px; margin-bottom:0; }
/* Header is a rule, not a filled band. A grey band behind every column header is
   the heaviest element on a report screen and competes with the data; a 2px baseline
   under small uppercase labels separates just as clearly and reads quieter. Same
   treatment as the college G1 tables. */
.ems-ui .table:not(.table-dark):not([class*="bg-"]) thead th { background:transparent; border-top:0;
    border-bottom:2px solid var(--ems-line); color:#334155; font-weight:700; font-size:10.5px;
    letter-spacing:.04em; text-transform:uppercase; padding:8px 11px; white-space:nowrap; vertical-align:middle; }
.ems-ui .table:not(.table-dark) td { padding:8px 11px; border-top:1px solid var(--ems-line2); vertical-align:middle; }
.ems-ui .table:not(.table-dark) tbody td:not([class*="bg-"]):not([class*="text-"]) { color:#334155; }
/* Money and counts sit in the right/centre-aligned columns almost everywhere in this
   app; lining figures make a column of them scan as a column instead of ragged text. */
.ems-ui .table td.text-right, .ems-ui .table th.text-right,
.ems-ui .table td.text-center, .ems-ui .table th.text-center { font-variant-numeric:tabular-nums; }
.ems-ui .table.table-hover:not(.table-dark) tbody tr:hover td:not([class*="bg-"]) { background:#f8fafc; }
.ems-ui .table.table-bordered,
.ems-ui .table.table-bordered td,
.ems-ui .table.table-bordered th { border-color:var(--ems-line2); }
.ems-ui .table.table-striped:not(.table-dark) tbody tr:nth-of-type(odd) td:not([class*="bg-"]) { background:#fcfdfe; }
.ems-ui .table td .btn { margin:1px; }

/* buttons */
.ems-ui .btn { border-radius:var(--ems-radius-sm); font-weight:600; font-size:12.5px; padding:.42rem .85rem; }
.ems-ui .btn-sm { font-size:11.5px; padding:.3rem .65rem; }
.ems-ui .btn-primary, .ems-ui .btn-info { background:var(--ems-indigo); border-color:var(--ems-indigo);
    box-shadow:0 2px 6px rgba(37,99,235,.22); }
.ems-ui .btn-primary:hover, .ems-ui .btn-info:hover,
.ems-ui .btn-primary:focus, .ems-ui .btn-info:focus { background:var(--ems-indigo-d); border-color:var(--ems-indigo-d); }
.ems-ui .btn-xs { border-radius:7px; }
/* cohesion: give the other semantic solids the same soft-shadow language */
.ems-ui .btn-success { box-shadow:0 2px 6px rgba(22,163,74,.20); }
.ems-ui .btn-danger  { box-shadow:0 2px 6px rgba(220,38,38,.18); }
.ems-ui .btn-warning { box-shadow:0 2px 6px rgba(180,83,9,.16); }
/* neutral buttons — note .btn-default is a Bootstrap-3 class with NO styling under the
   Bootstrap-4 modern stack, so these rows/toolbars rendered as bare browser buttons on
   .ems-ui pages until now; give it (and btn-light/btn-secondary) a proper soft look. */
.ems-ui .btn-default, .ems-ui .btn-secondary, .ems-ui .btn-light {
    background:#fff; border:1px solid var(--ems-line); color:#475569; box-shadow:var(--ems-shadow-sm); }
.ems-ui .btn-default:hover, .ems-ui .btn-secondary:hover, .ems-ui .btn-light:hover,
.ems-ui .btn-default:focus, .ems-ui .btn-secondary:focus, .ems-ui .btn-light:focus {
    background:#f8fafc; border-color:#cbd5e1; color:var(--ems-ink); }
.ems-ui .btn-outline-secondary { border-color:#cbd5e1; color:#475569; }
.ems-ui .btn-outline-secondary:hover { background:#f8fafc; border-color:#64748b; color:var(--ems-ink); }
/* icon normalization — the app mixes Line Awesome / FontAwesome 4-6 / mdi / icomoon;
   keep glyphs consistently sized inside buttons regardless of which set a view used
   (conservative: size + line-height only, so per-font baselines are left intact). */
.ems-ui .btn > i, .ems-ui .btn > .la, .ems-ui .btn > .las, .ems-ui .btn > .mdi,
.ems-ui .btn > [class^="icon-"], .ems-ui .btn > [class*=" fa-"] { font-size:1em; line-height:1; }

/* form controls */
.ems-ui .form-control,
.ems-ui select.form-control { height:34px; padding:0 10px; border:1px solid #e2e8f0;
    border-radius:var(--ems-radius-sm); color:#475569; font-size:12.5px; }
/* A fixed height is right for single-line controls and wrong for everything else:
   a multi-select would collapse to one row and a file input would clip its button. */
.ems-ui textarea.form-control,
.ems-ui select.form-control[multiple],
.ems-ui select.form-control[size],
.ems-ui input[type="file"].form-control,
.ems-ui .form-control.form-control-lg { height:auto; padding:8px 10px; }
.ems-ui .form-control:focus { border-color:var(--ems-accent); box-shadow:0 0 0 3px rgba(79,121,199,.12); }
.ems-ui label, .ems-ui .col-form-label { color:#475569; font-weight:600; font-size:12px; margin-bottom:.3rem; }
.ems-ui .form-group { margin-bottom:.9rem; }

/* DataTables chrome (search / length / pagination) */
.ems-ui .dataTables_wrapper .dataTables_filter input,
.ems-ui .dataTables_wrapper .dataTables_length select { border:1px solid #e2e8f0; border-radius:8px; }
.ems-ui .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius:7px; }
.ems-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.ems-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background:var(--ems-indigo) !important;
    border-color:var(--ems-indigo) !important; color:#fff !important; }

/* modals (Front Office detail / edit popups render their content under .ems-ui) */
.ems-ui .modal-content { border:0; border-radius:var(--ems-radius); box-shadow:var(--ems-shadow-lg); overflow:hidden; }
.ems-ui .modal-header { background:transparent; border-bottom:1px solid var(--ems-line2); padding:14px 18px; }
.ems-ui .modal-title { font-weight:800; color:var(--ems-ink); font-size:14.5px; }
.ems-ui .modal-body { padding:16px 18px; }
.ems-ui .modal-footer { background:transparent; border-top:1px solid var(--ems-line2); padding:11px 18px; }

/* alerts a touch softer */
.ems-ui .alert { border:0; border-radius:10px; font-size:13.5px; }
.ems-ui .alert-success { background:var(--ems-success-tint); color:#0f5132; }
.ems-ui .alert-danger  { background:var(--ems-danger-tint);  color:#842029; }
.ems-ui .alert-warning { background:var(--ems-warning-tint); color:#664d03; }
.ems-ui .alert-info    { background:var(--ems-info-tint);    color:#055160; }

/* ============================ (3) form-field + table polish (Phase 2) ============================ */
/* required-field markers — views mix <span>*</span> / .text-danger / .required after a label.
   The .req helper + label.required give a single, consistent asterisk going forward. */
.ems-ui label .text-danger, .ems-ui label .required { font-weight:700; }
.ems-ui .req:after, .ems-ui label.required:after { content:" *"; color:var(--ems-danger); font-weight:700; }
/* validation states (BS4 needs-validation client + legacy server is-invalid / help-block) */
.ems-ui .form-control.is-invalid { border-color:var(--ems-danger); }
.ems-ui .form-control.is-valid   { border-color:var(--ems-success); }
.ems-ui .invalid-feedback, .ems-ui .help-block.text-danger, .ems-ui .form-text.text-danger { font-size:12px; }
.ems-ui textarea.form-control { min-height:2.5rem; }
.ems-ui .form-control-sm { border-radius:8px; }
.ems-ui .input-group-text { border-radius:var(--ems-radius-sm); border-color:#e2e8f0; background:#f8fafc; color:var(--ems-muted); }
/* Select2 single-select: match .form-control height/border so filter rows don't misalign.
   Tracks the 34px control height above — these two must move together or every filter
   row in the app ends up with a Select2 standing 4px taller than the input beside it. */
.ems-ui .select2-container--default .select2-selection--single { height:34px; border-color:#e2e8f0; border-radius:var(--ems-radius-sm); }
.ems-ui .select2-container--default .select2-selection--single .select2-selection__rendered { line-height:32px; font-size:12.5px; color:#475569; }
.ems-ui .select2-container--default .select2-selection--single .select2-selection__arrow { height:32px; }

/* financial totals / summary rows — one consistent highlight (views hand-style these today).
   Add class .total-row or .ems-total to a <tr>, or use <tfoot>. */
.ems-ui .table tr.total-row td, .ems-ui .table tr.ems-total td, .ems-ui .table tfoot td {
    background:#f8fafc; font-weight:700; color:var(--ems-ink); border-top:2px solid var(--ems-line); }
/* line up money columns: add .amount / .ems-num to the cell */
.ems-ui .table td.amount, .ems-ui .table th.amount, .ems-ui .ems-num { font-variant-numeric:tabular-nums; }
/* status badges — one badge language (also normalizes Bootstrap/Limitless badge-*) */
.ems-ui .badge { font-weight:600; border-radius:6px; padding:.34em .6em; font-size:11px; letter-spacing:.01em; }

/* ============================ (4) printed report header (Phase 2) ============================ */
/* The shared print header (layout/admin_print_template.php) is .print-only, so these rules
   only manifest on the printed sheet — they tame the browser-default huge h2..h6 tags into a
   clean, professional letterhead. Not scoped to .ems-ui so they work on any admin print. */
.ems-print-head { border-bottom:2px solid #0f172a; padding-bottom:8px; margin-bottom:12px; }
.ems-print-head h2 { font-size:18px; font-weight:700; color:#0f172a; margin:0; }
.ems-print-head h3 { font-size:15px; font-weight:700; color:#0f172a; margin:0; }
.ems-print-head h4 { font-size:11px; font-weight:400; color:#475569; margin:1px 0; }
.ems-print-head h5 { font-size:11px; font-weight:400; color:#475569; margin:1px 0; }
.ems-print-head h6 { font-size:10px; font-weight:400; color:#475569; margin:2px 0; }
.ems-print-head img { width:64px !important; height:64px !important; }

/* ============================ (5) legacy .panel → card (Phase 3) ============================ */
/* Bootstrap-3 .panel is unstyled under the BS4/Limitless stack, so the ~50 accounting report
   screens (cash_book, bank_book, trial_balance, general_ledger, and the other report views) and
   any other .panel render as flat boxes. Theme them to match .card so they modernize app-wide
   with no view edits. Guarded (:not([class*="bg-"])) so coloured panel variants keep their look. */
.ems-ui .panel { border-radius:var(--ems-radius); margin-bottom:14px; }
.ems-ui .panel:not([class*="bg-"]) { background:#fff; border:1px solid var(--ems-line); box-shadow:var(--ems-shadow); }
.ems-ui .panel-heading { padding:13px 16px; }
.ems-ui .panel-heading:not([class*="bg-"]) { background:transparent; border-bottom:1px solid var(--ems-line2); }
.ems-ui .panel-title { font-size:13.5px; font-weight:800; color:var(--ems-ink); margin:0; letter-spacing:0; }
.ems-ui .panel-title > i, .ems-ui .panel-title > .la, .ems-ui .panel-title > [class^="icon-"] { color:var(--ems-accent); }
.ems-ui .panel-body { padding:14px 16px; }
.ems-ui .panel-footer { padding:11px 16px; background:transparent; border-top:1px solid var(--ems-line2); }

/* ============================ (6) legacy AdminLTE .box → card (Phase 5) ============================ */
/* AdminLTE .box markup (school Timetable/Library/Hostel/Transport + assorted legacy screens that
   render on template/header) is unstyled under the BS4/Limitless stack; theme it to match .card
   so those screens modernize with no view edits. Coloured .box variants keep a top accent. The
   coloured stat tiles .small-box / .info-box are NOT .box, so they keep their colour. */
.ems-ui .box { background:#fff; border:1px solid var(--ems-line); border-top:2px solid var(--ems-line);
    border-radius:var(--ems-radius); box-shadow:var(--ems-shadow); margin-bottom:14px; }
.ems-ui .box.box-primary { border-top-color:var(--ems-primary); }
.ems-ui .box.box-info    { border-top-color:var(--ems-info); }
.ems-ui .box.box-success { border-top-color:var(--ems-success); }
.ems-ui .box.box-warning { border-top-color:var(--ems-warning); }
.ems-ui .box.box-danger  { border-top-color:var(--ems-danger); }
.ems-ui .box-header { padding:13px 16px; border-bottom:1px solid var(--ems-line2); }
.ems-ui .box-header .box-title { font-size:13.5px; font-weight:800; color:var(--ems-ink); margin:0; }
.ems-ui .box-body { padding:14px 16px; }
.ems-ui .box-footer { background:transparent; border-top:1px solid var(--ems-line2); padding:11px 16px; }
.ems-ui .content-header { padding:0 0 9px; }
.ems-ui .content-header > h1 { font-size:18px; font-weight:800; letter-spacing:-.015em; color:var(--ems-ink); margin:0; }
.ems-ui .content-header > h1 > small { color:var(--ems-muted); font-size:12.5px; font-weight:500; }
.ems-ui .nav-tabs-custom { border:1px solid var(--ems-line); border-radius:var(--ems-radius); box-shadow:var(--ems-shadow); overflow:hidden; }
.ems-ui .nav-tabs-custom > .nav-tabs > li.active { border-top-color:var(--ems-primary); }