/* =========================================================
   THEME-MODERN.CSS
   Modern na itsura ng buong system: header/menu, login, forms,
   tables, modals, dashboard.
   Presentation lang, walang halong logic.

   Palette: ang mga halaga sa :root sa ibaba ay default lang (5 blue ng user); ang aktwal na
   palette ay galing sa global/include/school_theme.php at nananaig dahil nasa huli.
   Success / warning / danger / info: base sa MDB (Material Design for Bootstrap).
   Isang theme (light) para sa lahat ng school.

   PAANO GUMAGANA
   - Lahat ng kulay ay TOKEN (--sm-*), gawa ng global/include/school_theme.php mula sa palette.
   - Ang mga component rule ay gumagamit lang ng token; palitan ang palette, hindi ang CSS.
   - Load order: dapat NAKA-LOAD PAGKATAPOS ng mdb.min.css at util.css (see ScreenTemplate::linkExternal).
   - Ang colors.css at layout.css (dashboard) ay alias lang ng mga token dito.
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS

   DEFAULT NA PALETTE (fallback lang): #1B304A  #1A3B64  #154889  #295C9D  #4275B6
   SEMANTIC (success/warning/danger/info): base sa MDB (Material Design for Bootstrap)
     success #00C851 / #007E33   warning #FFBB33 / #FF8800
     danger  #FF3547 / #CC0000   info    #33B5E5 / #0099CC
   Ang hue ay MDB; ang shade at kulay ng text ay pinili para pasado sa 4.5:1 (WCAG AA).
   Ang mga halaga ng semantic sa ibaba ay fallback lang: ang aktwal ay kinakalkula ng
   st_semantic() sa school_theme.php (MDB + 8% na lapit sa primary ng palette) at nananaig.
   --------------------------------------------------------- */
:root{
   color-scheme:light;

   /* Palette ng user */
   --sm-p1:#1B304A;
   --sm-p2:#1A3B64;
   --sm-p3:#154889;
   --sm-p4:#295C9D;
   --sm-p5:#4275B6;

   --sm-brand:var(--sm-p1);          /* header, headings */
   --sm-brand-dark:#14243A;
   --sm-brand-soft:#E6EDF6;          /* hover/tint */
   --sm-accent:var(--sm-p5);         /* accent line, focus */
   --sm-action:var(--sm-p3);         /* buttons, active */
   --sm-action-rgb:21,72,137;

   /* Surfaces */
   --sm-canvas:#F0F4F9;              /* background ng page */
   --sm-card:#FFFFFF;                /* cards, modals, dropdowns, tables */
   --sm-surface:#FFFFFF;             /* login form panel */
   --sm-field-bg:#FFFFFF;            /* background ng input */
   --sm-header-bg:var(--sm-p1);
   --sm-hero-bg:var(--sm-p2);        /* login hero */
   --sm-bar:var(--sm-p1);            /* .bg-bar-blue at iba pang bars (--main-color) */

   /* Text / lines */
   --sm-ink:#1B304A;
   --sm-ink-soft:#44576F;
   --sm-muted:#5F7189;
   --sm-line:#DCE3EC;
   --sm-input-border:#7A8CA3;        /* >= 3:1 sa card at sa canvas (WCAG non-text contrast) */
   --sm-link:var(--sm-p3);
   --sm-hover:rgba(27,48,74,.06);    /* row/item hover */
   --sm-stripe:rgba(27,48,74,.035);  /* table-striped */
   --sm-accent-soft:#DCE8F6;         /* tint sa likod ng icons */
   --sm-badge:#5F7189;

   /* Semantic: background tint + kulay ng text + kulay ng icon (MDB hue) */
   --sm-success-bg:#D9F7E6;  --sm-success-fg:#006B2B;  --sm-success-icon:#007E33;
   --sm-warn-bg:#FFF1D6;     --sm-warn-fg:#7A4A00;     --sm-warn-icon:#B45F00;   --sm-warn-border:#FFD98A;
   --sm-danger-bg:#FFE3E6;   --sm-danger-fg:#B30000;   --sm-danger-icon:#CC0000;
   --sm-info-bg:#DDF3FB;     --sm-info-fg:#05607F;   
   --sm-idle-bg:#E1E8F1;     --sm-idle-fg:#2D4360;
   --sm-success-tint:var(--sm-success-bg);
   --sm-warn-tint:var(--sm-warn-bg);
   --sm-danger-tint:var(--sm-danger-bg);
   --sm-info-tint:var(--sm-info-bg);

   /* Kulay ng buttons (MDB) at ng text sa ibabaw nila (pasado sa 4.5:1) */
   --sm-success:#007E33;             /* puting text */
   --sm-danger:#CC0000;              /* puting text */
   --sm-warning:#FFBB33;             /* madilim na text */
   --sm-info:#33B5E5;                /* madilim na text */
   --sm-on-warning:#1B304A;
   --sm-on-info:#1B304A;

   --sm-radius:12px;
   --sm-radius-sm:10px;
   --sm-shadow-menu:0 8px 24px -8px rgba(27,48,74,.28);
   --sm-font:'Inter','Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

   /* DataTables 2 (rgb triplet para sa rgba(var(--dt-...), .x)) */
   --dt-row-hover:27,48,74;
   --dt-row-stripe:27,48,74;
   --dt-column-ordering:27,48,74;
   --dt-html-background:var(--sm-card);   /* DataTables 2: puti bilang default; sumusunod na sa card color */

   /* Mga variable ng util.css: may !important din doon, kaya dapat !important din dito (mas huli ang load) */
   --main-color:var(--sm-bar) !important;
   --sub-color:var(--sm-brand-dark);
   --accent-color:var(--sm-accent);
   --bg-body:var(--sm-canvas);
   /* Lumang palette ng util.css (.title-bar, .title, .bg-bar, .btnTrans): light blue #cce6ff at #1f3057 */
   --navy-blue-90:var(--sm-brand-soft);
   --oxford-blue:var(--sm-ink);
}

/* ---------------------------------------------------------
   3. BASE
   --------------------------------------------------------- */
html{ background-color:var(--sm-canvas); }
body{
   background-color:var(--sm-canvas) !important;   /* util.css: body{background:var(--bg-body) !important} */
   color:var(--sm-ink) !important;                 /* util.css: body{color:var(--main-color) !important} */
}
hr{ border-top-color:var(--sm-line); }
.title-bar,
.title{ border-color:var(--sm-line); }
/* Links: palette ng user (MDB default ay #4285f4). Element selector lang, kaya nananaig pa rin ang mga link na may sariling class (.btn, .nav-link, .text-white, atbp.) */
a{ color:var(--sm-link); }
a:hover{ color:var(--sm-link); }
a:focus-visible{ outline:2px solid rgba(var(--sm-action-rgb),.6); outline-offset:2px; }
select option,
select optgroup{ background-color:var(--sm-card); color:var(--sm-ink); }

/* =========================================================
   4. HEADER / NAV  (doPageHeader -> nav#mainNav.bg-nav)
   May inline <style> ang ScreenTemplate::External() na nag-o-override sa .nav-link at .dropdown-menu a,
   kaya may !important at mas mataas na specificity ang mga rule dito.
   ========================================================= */
#mainNav.bg-nav{
   background:var(--sm-header-bg) !important;
   box-shadow:inset 0 -2px 0 var(--sm-accent);   /* manipis na accent line = branding */
   padding:.4rem 1rem;
   font-family:var(--sm-font);
}

/* School logo + pangalan */
/* Walang display dito: nakatago ito sa mobile (.collapse) at ang Bootstrap ang nagpapakita sa desktop */
#mainNav #navbarSchoolName{ align-items:center; }
#mainNav #navbarSchoolName img,
#mainNav #navbarLogo{
   height:44px; width:auto;
   background:#fff;
   border-radius:var(--sm-radius-sm);
   padding:3px;
}
#mainNav #SchoolName{
   font-family:var(--sm-font) !important;   /* may inline style kaya !important */
   font-size:1.05rem !important;
   font-weight:600;
   letter-spacing:-.005em;
   margin-left:.75rem !important;
}

/* Menu links */
#mainNav .nav-link,
#mainNav .nav-link.text-white{
   color:#fff !important;
   font-size:.875rem;
   font-weight:500;
   border-radius:var(--sm-radius-sm);
   padding:.5rem .8rem !important;
   transition:background-color .15s ease;
}
/* ScreenTemplate: .nav-link:hover{color:#000 !important; background:#fefefe !important} (puti sa puti kung hindi ito na-override) */
#mainNav .nav-link:hover,
#mainNav .nav-item.show > .nav-link{
   background-color:rgba(255,255,255,.14) !important;
   color:#fff !important;
}
#mainNav .nav-link:focus-visible,
#mainNav .navbar-toggler:focus-visible{
   outline:2px solid #fff;
   outline-offset:2px;
}

/* Logout icon (top-right) */
#mainNav a.nav-link[href$="lgn/logout"]{
   margin:.35rem .6rem !important;          /* ScreenTemplate: .nav-link{margin:2px !important} */
   width:40px; height:40px;                 /* sapat na touch target */
   padding:0 !important;
   display:flex; align-items:center; justify-content:center;
}
#mainNav a.nav-link[href$="lgn/logout"] i{ margin:0 !important; }

/* Dropdowns */
#mainNav .dropdown-menu{
   background-color:var(--sm-card);
   border:1px solid var(--sm-line);
   border-radius:var(--sm-radius);
   box-shadow:var(--sm-shadow-menu);
   padding:.4rem;
   margin-top:.5rem;
   font-family:var(--sm-font);
}
#mainNav .dropdown-item,
#mainNav a.dropdown-item,
#mainNav .dropdown-menu a.dropdown-item{
   color:var(--sm-ink) !important;
   border-radius:var(--sm-radius-sm);
   padding:.4rem .75rem !important;    /* dati 1px 5px !important (inline style ng ScreenTemplate) */
   font-size:.875rem !important;
   font-weight:500;
}
#mainNav .dropdown-item:hover,
#mainNav a.dropdown-item:hover,
#mainNav .dropdown-item:focus{
   background:var(--sm-brand-soft) !important;
   color:var(--sm-link) !important;
}
/* Pantay na hanay ng label: ang .fas ay 5px ang margin (!important sa ScreenTemplate) pero ang .fa-solid ay 10px */
#mainNav .dropdown-item > i{
   display:inline-block;
   width:1.25em;
   text-align:center;
   margin-right:.6rem !important;
}
#mainNav .dropdown-menu hr{
   margin:.4rem .5rem;
   border:0; border-top:1px solid var(--sm-line);
}

/* Mobile (collapsed menu) */
@media (max-width:991.98px){
   #mainNav .navbar-nav{ padding:.5rem 0 .75rem; }
   #mainNav .dropdown-menu{ box-shadow:none; margin:.25rem 0 .5rem; }
   /* Ang logout ay absolute sa kanang itaas; ilipat sa kaliwa ng hamburger para hindi magsapawan */
   #mainNav a.nav-link[href$="lgn/logout"]{ margin:.55rem 4.5rem 0 0 !important; }
}

/* =========================================================
   5. FORMS & CONTROLS  (global: lahat ng module)
   ========================================================= */
label{ color:var(--sm-ink); }
label:not(.form-check-label):not(.custom-control-label){ font-weight:600; }

.form-control,
.custom-select{
   color:var(--sm-ink) !important;                /* util.css: .form-control{color:#000 !important} */
   background-color:var(--sm-field-bg);
   border:1px solid var(--sm-input-border);
   border-radius:var(--sm-radius-sm);
   box-shadow:none;
   transition:border-color .15s ease,box-shadow .15s ease;
}
.form-control::placeholder{ color:var(--sm-muted); opacity:1; }
.form-control:hover:not(:disabled):not([readonly]),
.custom-select:hover:not(:disabled){
   border-color:var(--sm-muted);
}
.form-control:focus,
.custom-select:focus{
   color:var(--sm-ink);
   background-color:var(--sm-field-bg);
   border-color:var(--sm-action);
   box-shadow:0 0 0 3px rgba(var(--sm-action-rgb),.25);
   outline:0;
}
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled{
   color:var(--sm-muted);
   background-color:var(--sm-idle-bg);   /* halatang hindi editable */
   cursor:not-allowed;
}
small.form-text,
.form-text{ color:var(--sm-muted); }

.input-group-text{
   color:var(--sm-ink-soft);
   background-color:var(--sm-brand-soft);
   border:1px solid var(--sm-input-border);
   border-radius:var(--sm-radius-sm);
}
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child){ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child){ border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group-prepend .input-group-text{ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group-append .input-group-text{ border-top-left-radius:0; border-bottom-left-radius:0; }
/* Buttons sa loob ng input-group: dikit sa input (walang margin ng MDB), pantay ang taas */
.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn{ margin:0; }
.input-group > .input-group-append > .btn{ border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group > .input-group-prepend > .btn{ border-top-right-radius:0; border-bottom-right-radius:0; }

/* Checkbox / radio (Bootstrap custom controls) */
.custom-control-input:checked ~ .custom-control-label::before{
   border-color:var(--sm-action);
   background-color:var(--sm-action);
}
.custom-control-input:focus ~ .custom-control-label::before{
   box-shadow:0 0 0 3px rgba(var(--sm-action-rgb),.25);
}
.custom-control-label::before{
   background-color:var(--sm-field-bg);
   border-color:var(--sm-input-border);
}

/* =========================================================
   6. BUTTONS
   Isang itsura lang bawat variant; ang .btn-indigo ay pareho ng .btn-primary
   (MDB .btn-* ay may !important sa background kaya kailangan din dito)
   ========================================================= */
.btn{
   font-family:var(--sm-font);
   font-weight:600;
   letter-spacing:0;
   text-transform:none;
   border-radius:var(--sm-radius-sm);
   box-shadow:none !important;
   transition:filter .15s ease,background-color .15s ease;
}
.btn:hover:not(:disabled):not(.disabled){ filter:brightness(.92); }
.btn:active:not(:disabled):not(.disabled){ filter:brightness(.86); }
.btn:focus-visible{
   outline:3px solid rgba(var(--sm-action-rgb),.4);
   outline-offset:2px;
}
.btn:disabled,
.btn.disabled{ opacity:.55; cursor:not-allowed; }

.btn-primary,
.btn-indigo{ color:#fff !important; background-color:var(--sm-action) !important; border-color:var(--sm-action) !important; }
.btn-success{ color:#fff !important; background-color:var(--sm-success) !important; border-color:var(--sm-success) !important; }
.btn-danger{ color:#fff !important; background-color:var(--sm-danger) !important; border-color:var(--sm-danger) !important; }
/* MDB hue; madilim na text sa maliwanag na warning/info para pasado sa 4.5:1 (puti ay kulang) */
.btn-info{ color:var(--sm-on-info) !important; background-color:var(--sm-info) !important; border-color:var(--sm-info) !important; }
.btn-warning{ color:var(--sm-on-warning) !important; background-color:var(--sm-warning) !important; border-color:var(--sm-warning) !important; }
.btn-secondary,
.btn-default,
.btn-light{ color:var(--sm-idle-fg) !important; background-color:var(--sm-idle-bg) !important; border-color:var(--sm-idle-bg) !important; }

/* =========================================================
   7. ALERTS  (semantic colors ng qr-scanner)
   ========================================================= */
.alert{ border:0; border-radius:var(--sm-radius-sm); font-size:.9375rem; }
/* Malabong tint (hindi solidong saturated na bloke) para bumagay sa slate + blue na theme */
.alert-success{ color:var(--sm-success-fg); background-color:var(--sm-success-tint); }
.alert-warning{ color:var(--sm-warn-fg); background-color:var(--sm-warn-tint); }
.alert-danger{ color:var(--sm-danger-fg); background-color:var(--sm-danger-tint); }
.alert-info{ color:var(--sm-info-fg); background-color:var(--sm-info-tint); }
.alert-primary{ color:var(--sm-link); background-color:var(--sm-accent-soft); }
.alert-secondary{ color:var(--sm-idle-fg); background-color:var(--sm-idle-bg); }

/* =========================================================
   8. BOOTSTRAP / MDB COMPONENTS
   Ang mga ito ay hindi nagbabago ang itsura sa light maliban sa bagong palette.
   ========================================================= */
/* Cards (Bootstrap): ang kulay ng .card ay nasa colors.css */
.card-header{
   color:var(--sm-ink);
   background-color:var(--sm-brand-soft);
   border-color:var(--sm-line);
}
.card-body{ color:var(--sm-ink); }

/* Tables
   util.css: .table{background-color:#fff} -> ginawang token para sumunod sa card color */
/* Ang table ay may sariling (puting) card na background, kaya ang text ay hindi dapat minamana sa paligid nito:
   ang mga table sa welcome (row text-white / bg-danger text-white) ay lumalabas na puti-sa-puti. Ang .text-white sa mismong table ay nananaig pa rin. */
.table{ color:var(--sm-ink); background-color:var(--sm-card) !important; }   /* util.css: .table{background:#fff !important} */
.table th,
.table td,
.table thead th,
.table-bordered,
.table-bordered th,
.table-bordered td{ border-color:var(--sm-line); }
.table-striped > tbody > tr:nth-of-type(odd){ background-color:var(--sm-stripe); }
.table-hover > tbody > tr:hover{ background-color:var(--sm-hover); color:inherit; }

/* Links at icon sa loob ng table (Action icons). MDB: table.table a{color:#212529} */
table.table a{ color:var(--sm-ink); }
table.table a:hover{ color:var(--sm-link); }

/* Contextual na table classes (Bootstrap: .table-primary = #b8daff na light blue, hindi bagay sa palette).
   Ginagamit ito ng mga <thead class='table-primary'> / <tr class='table-primary'> sa student list at iba pa.
   Sa mismong element (thead/tr/td) ilalapat, HINDI sa th/td ng row: malabo ang tint kaya kapag pinatong sa parehong row at cell, dalawang beses ang kulay. */
.table-primary,
.table-hover .table-primary:hover{ background-color:var(--sm-accent-soft) !important; color:var(--sm-ink); }
.table-success,
.table-hover .table-success:hover{ background-color:var(--sm-success-tint) !important; color:var(--sm-ink); }
.table-danger,
.table-hover .table-danger:hover{ background-color:var(--sm-danger-tint) !important; color:var(--sm-ink); }
.table-warning,
.table-hover .table-warning:hover{ background-color:var(--sm-warn-tint) !important; color:var(--sm-ink); }
.table-info,
.table-hover .table-info:hover{ background-color:var(--sm-info-tint) !important; color:var(--sm-ink); }
.table-secondary{ background-color:var(--sm-idle-bg) !important; color:var(--sm-ink); }
.table-dark{ background-color:var(--sm-bar) !important; color:#fff; }
/* Pinipinturahan ng Bootstrap ang td/th ng row na may .table-* ng opaque na light na kulay (natatakpan ang tint ng row).
   Gawing transparent para ang tint ng row lang ang makikita (isang layer). */
.table-primary > th, .table-primary > td,
.table-success > th, .table-success > td,
.table-danger > th, .table-danger > td,
.table-warning > th, .table-warning > td,
.table-info > th, .table-info > td,
.table-secondary > th, .table-secondary > td,
.table-dark > th, .table-dark > td,
.table-hover .table-primary:hover > th, .table-hover .table-primary:hover > td,
.table-hover .table-success:hover > th, .table-hover .table-success:hover > td,
.table-hover .table-danger:hover > th, .table-hover .table-danger:hover > td,
.table-hover .table-warning:hover > th, .table-hover .table-warning:hover > td,
.table-hover .table-info:hover > th, .table-hover .table-info:hover > td{ background-color:transparent !important; }

/* Dropdown (labas ng header), list, popover */
.dropdown-menu{
   color:var(--sm-ink);
   background-color:var(--sm-card);
   border-color:var(--sm-line);
}
.dropdown-item{ color:var(--sm-ink); }
.dropdown-item:hover,
.dropdown-item:focus{ color:var(--sm-link); background-color:var(--sm-brand-soft); }
.dropdown-divider{ border-top-color:var(--sm-line); }
.list-group-item{ color:var(--sm-ink); background-color:var(--sm-card); border-color:var(--sm-line); }
.popover{ background-color:var(--sm-card); border-color:var(--sm-line); }
.popover-header{ color:var(--sm-ink); background-color:var(--sm-brand-soft); border-bottom-color:var(--sm-line); }
.popover-body{ color:var(--sm-ink); }

/* Pagination, tabs, progress */
.page-link{ color:var(--sm-link); background-color:var(--sm-card); border-color:var(--sm-line); }
.page-link:hover{ color:var(--sm-link); background-color:var(--sm-brand-soft); border-color:var(--sm-line); }
.page-item.active .page-link{ color:#fff; background-color:var(--sm-action); border-color:var(--sm-action); }
.page-item.disabled .page-link{ color:var(--sm-muted); background-color:var(--sm-card); border-color:var(--sm-line); }
.nav-tabs{ border-bottom-color:var(--sm-line); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link{ color:var(--sm-ink); background-color:var(--sm-card); border-color:var(--sm-line) var(--sm-line) var(--sm-card); }
.progress{ background-color:var(--sm-idle-bg); }

/* Utility classes ng Bootstrap/util.css na may hard-coded na kulay */
.text-black{ color:var(--sm-ink) !important; }   /* util.css: #000 !important */
.bg-white{ background-color:var(--sm-card) !important; }
.bg-light{ background-color:var(--sm-brand-soft) !important; }
.text-dark{ color:var(--sm-ink) !important; }
.text-muted{ color:var(--sm-muted) !important; }
.text-primary{ color:var(--sm-link) !important; }
.bg-primary{ color:#fff; background-color:var(--sm-action) !important; }   /* MDB: #4285f4 -> palette ng user */
.border,
.border-top,
.border-bottom,
.border-left,
.border-right{ border-color:var(--sm-line) !important; }

/* =========================================================
   9. jQuery UI (datepicker, dialog, autocomplete) at DATATABLES
   ========================================================= */
.ui-widget,
.ui-widget-content{
   color:var(--sm-ink);
   background:var(--sm-card);
   border-color:var(--sm-line);
}
.ui-widget-header{
   color:var(--sm-ink);
   background:var(--sm-brand-soft);
   border-color:var(--sm-line);
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default{
   color:var(--sm-ink);
   background:var(--sm-card);
   border-color:var(--sm-line);
}
.ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-content .ui-state-focus{
   color:var(--sm-ink);
   background:var(--sm-brand-soft);
   border-color:var(--sm-line);
}
.ui-state-active,
.ui-state-highlight,
.ui-widget-content .ui-state-active{
   color:#fff;
   background:var(--sm-action);
   border-color:var(--sm-action);
}
.ui-menu-item .ui-menu-item-wrapper{ color:var(--sm-ink); }
.ui-datepicker{ background:var(--sm-card); border-color:var(--sm-line); box-shadow:var(--sm-shadow-menu); }

/* DataTables 2 */
.dt-container .dt-search input,
.dt-container .dt-length select{
   color:var(--sm-ink) !important;                  /* may sariling styles ang MDB/DataTables sa input[type=search] */
   background-color:var(--sm-field-bg) !important;
   border:1px solid var(--sm-input-border) !important;
   border-radius:var(--sm-radius-sm);
   padding:.35rem .6rem;
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus{
   border-color:var(--sm-action);
   box-shadow:0 0 0 3px rgba(var(--sm-action-rgb),.25);
   outline:0;
}
table.dataTable thead > tr > th,
table.dataTable thead > tr > td,
table.dataTable tfoot > tr > th,
table.dataTable tfoot > tr > td{ border-color:var(--sm-line) !important; }
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th{ border-color:var(--sm-line); }
table.dataTable > tbody > tr{ background-color:transparent; }
.dt-container .dt-paging .dt-paging-button{ color:var(--sm-ink) !important; }
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled){
   color:var(--sm-ink) !important;
   background:var(--sm-brand-soft) !important;
   border-color:var(--sm-line) !important;
}
.dt-container .dt-paging .dt-paging-button.disabled{ color:var(--sm-muted) !important; }
.dt-container .dt-info{ color:var(--sm-muted); }

/* Mga listahan ng welcome (do_* na fragment sa #Info_Holder, sa pop window at sa dashboard):
   ang solidong saturated na bloke (row bg-danger / bg-success / bg-info / bg-primary + text-white) ay ginawang
   malabong tint na may makapal na guhit sa kaliwa, na may madilim na text (pasado sa contrast). */
#Info_Holder .bg-danger,
#Info_Holder .bg-success,
#Info_Holder .bg-info,
#Info_Holder .bg-primary{
   border-left:4px solid;
   border-radius:var(--sm-radius-sm);
}
#Info_Holder .bg-danger{ background-color:var(--sm-danger-bg) !important; color:var(--sm-danger-fg) !important; border-left-color:var(--sm-danger); }
#Info_Holder .bg-success{ background-color:var(--sm-success-bg) !important; color:var(--sm-success-fg) !important; border-left-color:var(--sm-success); }
#Info_Holder .bg-info{ background-color:var(--sm-info-bg) !important; color:var(--sm-info-fg) !important; border-left-color:var(--sm-info); }
#Info_Holder .bg-primary{ background-color:var(--sm-brand-soft) !important; color:var(--sm-ink) !important; border-left-color:var(--sm-action); }
#Info_Holder .bg-danger .text-white,
#Info_Holder .bg-success .text-white,
#Info_Holder .bg-info .text-white,
#Info_Holder .bg-primary .text-white{ color:inherit !important; }
/* Ang mga listahang table (TableData--): buong lapad at transparent na background (kita ang tint ng kahon sa likod) */
/* Karaniwang itsura ng listahang DataTable sa mga module page (Subject ang una): puting card na may manipis na border,
   at ang table sa loob ay buong lapad at transparent. Gamitin: <div class="sm-table-card"><table class="dataTable ..."></table></div>.
   Ang mga listahan ng welcome (#Info_Holder) ay pareho ng table rule sa ibaba. */
.sm-table-card{
   background-color:var(--sm-card);
   border:1px solid var(--sm-line);
   border-radius:var(--sm-radius);
   padding:12px 14px;
   margin-top:12px;
}
.sm-table-card table.table{
   width:100% !important;
   background-color:transparent !important;
   margin-bottom:0;
}
/* Iisang kulay ng header ng lahat ng listahan: ang <thead class='table-danger|table-success|...'> ng mga fragment
   ay kapareho ng table-primary ng Subject (hindi pink/berde/atbp.). Mga header lang; ang mga row na may kulay ay hindi ginagalaw. */
.sm-table-card thead .table-primary,
.sm-table-card thead .table-danger,
.sm-table-card thead .table-success,
.sm-table-card thead .table-warning,
.sm-table-card thead .table-info,
.sm-table-card thead .table-secondary,
.sm-table-card thead.table-primary,
.sm-table-card thead.table-danger,
.sm-table-card thead.table-success,
.sm-table-card thead.table-warning,
.sm-table-card thead.table-info,
.sm-table-card thead.table-secondary{ background-color:var(--sm-accent-soft) !important; color:var(--sm-ink); }

/* Listahang DataTable sa pop window ng welcome: ang kulay na kahon (row bg-danger / bg-success / border na pula) ay payak na heading lang;
   ang listahan mismo ay nasa .sm-table-card (parehong itsura ng Subject module). Ang pop_end() ng modules/welcome/popCommon.php ang naglalagay ng .sm-flat. */
#Info_Holder .row.sm-flat{
   background-color:transparent !important;
   color:var(--sm-ink) !important;
   border:0 !important;
   border-radius:0;
   padding:0 !important;
   margin-left:0;
   margin-right:0;
}
#Info_Holder .row.sm-flat .text-white{ color:var(--sm-ink) !important; }
#Info_Holder .row.sm-flat .text-danger{ color:var(--sm-danger-fg) !important; }
#Info_Holder .row.sm-flat > [class*="col-"]{ font-weight:600; padding-left:0; }
#Info_Holder .row.sm-flat .dt-info{ color:var(--sm-muted); }

/* === LAHAT NG MODULE: awtomatikong pamantayan (walang kailangang baguhin sa markup ng module) ===
   (a) Ang bawat DataTable (.dt-container) ay nasa card kahit walang .sm-table-card na wrapper; ang table sa loob ay buong lapad at transparent.
       Kapag may .sm-table-card na, hindi dinodoble ang card. */
.dt-container{
   background-color:var(--sm-card);
   border:1px solid var(--sm-line);
   border-radius:var(--sm-radius);
   padding:12px 14px;
   margin-top:12px;
}
.sm-table-card .dt-container{
   background-color:transparent;
   border:0;
   border-radius:0;
   padding:0;
   margin-top:0;
}
.dt-container table.dataTable{
   width:100% !important;
   background-color:transparent !important;
}
.dt-container .dt-layout-table > .dt-layout-cell{ overflow-x:auto; }      /* malapad na table (maraming column): mag-scroll sa loob ng card, hindi lalampas */
/* (b) Iisang kulay ng header ng lahat ng table: ang <thead class="bg-bar-blue"> (solidong navy) ay kapareho ng table-primary */
table > thead.bg-bar-blue,
table > thead.bg-bar-blue > tr,
table > thead.bg-bar-blue th,
table > thead.bg-bar-blue td{
   background-color:var(--sm-accent-soft) !important;
   color:var(--sm-ink) !important;
}
/* (c) Mga table na may lumang border="1": iisang kulay ng guhit (galing sa theme) */
table[border="1"],
table[border="1"] th,
table[border="1"] td{
   border-style:solid;
   border-color:var(--sm-line);
}

/* Filter bar, hint, bilang, at scan card ng mga listahang module (Students ang una): mga card na kasunod ng .sm-table-card */
.sm-filter-row{ margin-left:0 !important; margin-right:0 !important; padding:0 !important; }
.sm-filter-row > .col-sm-12{ padding-left:0; padding-right:0; }
.sm-filter-bar{
   flex-wrap:wrap;
   align-items:center;
   gap:8px;
   background-color:var(--sm-card);
   border:1px solid var(--sm-line);
   border-radius:var(--sm-radius);
   padding:10px 12px;
}
.sm-filter-bar > div{ margin:0 !important; }
.sm-filter-bar .form-control{ width:auto; min-width:150px; }
.sm-filter-bar > input.form-control{ flex:1 1 280px; }      /* search box na direktang nasa filter bar */
.sm-filter-bar > div[style*="width:200px"]{ flex:1 1 220px; width:auto !important; }
.sm-filter-bar > div[style*="width:200px"] .form-control{ width:100%; }
.sm-filter-bar .btn{ margin:0 !important; }
.sm-filter-bar > div[style*="width:1px"]{ position:absolute; visibility:hidden; }      /* hindi inaalis (pinipigilan ang Enter submit) pero hindi nakikita */
.sm-hint{ color:var(--sm-muted); font-size:.8125rem; margin-bottom:8px; }
.sm-list-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.sm-chip{ background-color:var(--sm-brand-soft); color:var(--sm-ink); border-radius:999px; padding:3px 12px; font-size:.8125rem; }
.sm-scan-card{
   background-color:var(--sm-card);
   border:1px solid var(--sm-line);
   border-radius:var(--sm-radius);
   padding:12px 14px;
   max-width:420px;
   margin-bottom:12px;
}
.sm-scan-card h5{ font-size:.9375rem; font-weight:700; margin-bottom:8px; }

#Info_Holder .TableDataHolder{ flex:0 0 100%; width:100%; max-width:100%; }      /* nasa loob ng .row (flex): dapat kasinlapad ng kahon */
#Info_Holder table.TableData--{
   width:100% !important;
   background-color:transparent !important;
}
#Info_Holder .bg-danger .dt-info,
#Info_Holder .bg-success .dt-info,
#Info_Holder .bg-info .dt-info,
#Info_Holder .bg-primary .dt-info{ color:inherit; }

/* DataTables Buttons: Copy, CSV, Excel, PDF, Print (global/js/dt-export.js) */
.dt-container .dt-layout-start{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.dt-container .dt-buttons{ display:flex; flex-wrap:wrap; gap:6px; }
.dt-container .dt-buttons .dt-button{
   margin:0;
   padding:.35rem .8rem;
   min-height:34px;
   font-family:var(--sm-font);
   font-size:.8125rem;
   font-weight:600;
   line-height:1.2;
   color:var(--sm-link) !important;
   background:var(--sm-card) !important;
   border:1px solid var(--sm-input-border) !important;
   border-radius:var(--sm-radius-sm);
   box-shadow:none;
   cursor:pointer;
   transition:background-color .12s ease, border-color .12s ease;
}
.dt-container .dt-buttons .dt-button:hover:not(.disabled){
   color:var(--sm-link) !important;
   background:var(--sm-brand-soft) !important;
   border-color:var(--sm-link) !important;
}
.dt-container .dt-buttons .dt-button:focus-visible{
   outline:0;
   box-shadow:0 0 0 3px rgba(var(--sm-action-rgb),.25);
}
.dt-container .dt-buttons .dt-button:active:not(.disabled){ background:var(--sm-brand-soft) !important; }
.dt-container .dt-buttons .dt-button.disabled{ color:var(--sm-muted) !important; cursor:not-allowed; }
.dt-container .dt-buttons .dt-button .fas{ margin-right:4px !important; }

/* =========================================================
   10. INLINE NA KULAY (mga natagpuan sa code: mga ilang file lang)
   Token-based din kaya hindi nagbabago sa light. Hindi kasama ang img/canvas/video.
   ========================================================= */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:white"],
[style*="background-color: white"],
[style*="background:#fefefe"],
[style*="background-color:#fefefe"],
[style*="background:#fafafa"]{
   background-color:var(--sm-card) !important;
}
[style*="background:#e9e9e9"],
[style*="background-color:#e9e9e9"],
[style*="background:#eaeaea"],
[style*="background:#dedede"],
[style*="background:#ecf2f9"],
[style*="background-color:#e6f2ff"],
[style*="background:#ccdcec"],
[style*="background-color:#ccc"]{
   background-color:var(--sm-brand-soft) !important;
}
[style*="background:#ffe6e6"]{
   background-color:var(--sm-danger-tint) !important;
   color:var(--sm-danger-fg);
}
[style*="color:#000"],
[style*="color: #000"],
[style*="color:black"]{ color:var(--sm-ink) !important; }
[style*="color:#555"],
[style*="color:gray"]{ color:var(--sm-muted) !important; }
img[style*="background"],
canvas[style*="background"],
video[style*="background"]{ background-color:transparent !important; }

/* =========================================================
   11. MODALS  (dito madalas nakalagay ang mga form)
   ========================================================= */
.modal-content{
   color:var(--sm-ink);
   background-color:var(--sm-card);
   border:0;
   border-radius:var(--sm-radius);
   overflow:hidden;
}
.modal-header,
.modal-footer{ border-color:var(--sm-line); }
.close{ color:inherit; text-shadow:none; }
/* Mas mataas ang specificity ng MDB (.modal-dialog.modal-notify.modal-info ...), kaya dapat pareho + !important */
.modal-dialog.modal-notify .modal-header{ border:0; color:#fff; }
.modal-dialog.modal-notify.modal-info .modal-header,
.modal-dialog.modal-notify.modal-primary .modal-header{ background-color:var(--sm-action) !important; }
.modal-dialog.modal-notify.modal-danger .modal-header{ background-color:var(--sm-danger) !important; }
.modal-notify .modal-header .heading,
.modal-notify .modal-header .close{ color:inherit; }

/* =========================================================
   12. LOGIN PAGE  (body.auth-page)
   Layout: hero (brand panel) + form panel
   User goal: mag-login. Primary action: Log In button.
   ========================================================= */
body.auth-page{
   margin:0;
   padding:0 !important;             /* ang JS ay nagse-set ng padding-top base sa #mainNav */
   min-height:100vh;
   background-color:var(--sm-surface) !important;
   color:var(--sm-ink) !important;
   font-family:var(--sm-font);
}
/* Walang laman ang nav bago mag-login, kaya itago */
.auth-page #mainNav{ display:none; }

/* Alisin ang container/bg ng lumang layout (may lms.png watermark at height:85vh) */
.auth-page form[name="login"] > .container-fluid,
.auth-page form[name="login"] .container.bg{
   max-width:none;
   width:100%;
   padding:0;
   margin:0;
   height:auto;
   background:none !important;
}

.auth-shell{
   display:grid;
   grid-template-columns:minmax(0,1fr) minmax(0,1fr);
   min-height:100vh;
}

/* ---------- Hero ---------- */
.auth-hero{
   display:flex; flex-direction:column; justify-content:space-between;
   padding:48px clamp(28px,5vw,72px);
   background:var(--sm-hero-bg);
   color:#fff;
}
.auth-logo{
   display:inline-grid; place-items:center;
   width:72px; height:72px;
   padding:8px;
   border-radius:var(--sm-radius);
   background:#fff;
   color:var(--sm-brand);
   font-size:2rem;
}
.auth-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.auth-hero a{ text-decoration:none; }

.auth-hero__body{ max-width:480px; margin:40px 0; }
.auth-hero__body::before{                 /* accent bar */
   content:"";
   display:block;
   width:44px; height:4px;
   margin-bottom:20px;
   border-radius:2px;
   background:var(--sm-accent);
}
.auth-eyebrow{
   display:inline-block;
   margin:0 0 12px;
   padding:4px 10px;
   font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
   color:#fff;
   background:rgba(255,255,255,.12);
   border-radius:var(--sm-radius-sm);
}
.auth-hero h1{
   margin:0 0 12px;
   font-family:var(--sm-font);
   font-size:clamp(1.75rem,3vw,2.25rem);
   font-weight:700;
   line-height:1.2;
   letter-spacing:-.02em;
   color:#fff;
}
.auth-hero__sub{
   margin:0;
   font-size:1.2rem; font-weight:600;
   color:#fff;
}
.auth-hero__foot{ font-size:.875rem; color:#fff; opacity:.85; }

/* ---------- Form panel ---------- */
.auth-panel{
   display:flex; align-items:center; justify-content:center;
   padding:32px 20px;
   background:var(--sm-surface);
}
.auth-panel > #holder_LoginCard{ width:100%; max-width:400px; }

/* position:static: ang lumang JS ay nagse-set ng "left" sa #logincard, dapat walang epekto */
.auth-page #logincard.auth-card{
   position:static;
   width:100%;
   min-width:0;
   max-width:400px;
   margin:0;
   background:transparent;
   border:0;
}

.auth-card__head{ margin-bottom:28px; }
.auth-card__head h2{
   margin:0 0 6px;
   font-family:var(--sm-font);
   font-size:1.5rem; font-weight:700; letter-spacing:-.01em;
   color:var(--sm-ink);
}
.auth-card__head p{ margin:0; font-size:1rem; color:var(--sm-ink-soft); }

.auth-page .auth-field{ margin-bottom:20px; }
.auth-page .auth-card label{
   display:block;
   margin:0 0 6px;
   font-size:.875rem; font-weight:600;
   color:var(--sm-ink);
}
.auth-page .auth-card .form-control{
   height:48px;
   padding:0 14px;
   font-family:var(--sm-font);
   font-size:1rem;                         /* 16px: hindi nagza-zoom ang iOS */
   text-align:left;
}
/* kulay ng autofill ng browser: gawing kapareho ng field */
.auth-page .auth-card .form-control:-webkit-autofill{
   -webkit-text-fill-color:var(--sm-ink);
   box-shadow:0 0 0 1000px var(--sm-field-bg) inset;
}

/* Password + show/hide */
.auth-pw{ position:relative; }
.auth-page .auth-card .auth-pw .form-control{ padding-right:52px; }
.auth-pw__toggle{
   position:absolute; top:4px; right:4px;
   width:40px; height:40px;
   display:flex; align-items:center; justify-content:center;
   padding:0;
   color:var(--sm-ink-soft);
   background:transparent;
   border:0;
   border-radius:var(--sm-radius-sm);
   cursor:pointer;
}
.auth-pw__toggle:hover{ color:var(--sm-ink); background:var(--sm-brand-soft); }
.auth-pw__toggle i{ margin:0 !important; }

/* Primary action */
.auth-page .auth-card .btn-primary{
   width:100%;
   margin:8px 0 0;
   padding:0 1rem;
   height:48px;
   font-size:1rem;
}
.auth-page .auth-card .btn-primary:disabled,
.auth-page .auth-card .btn-primary.is-loading{
   filter:none;
   opacity:.75;
   cursor:progress;
}
.auth-page .auth-card .btn-primary.is-loading::before{      /* loading state */
   content:"";
   display:inline-block;
   width:1em; height:1em;
   margin-right:.6rem;
   vertical-align:-.15em;
   border:2px solid rgba(255,255,255,.4);
   border-top-color:#fff;
   border-radius:50%;
   animation:smSpin .7s linear infinite;
}
@keyframes smSpin{ to{ transform:rotate(360deg); } }

/* Focus indicators (keyboard) */
.auth-page .auth-card a:focus-visible,
.auth-pw__toggle:focus-visible{
   outline:3px solid rgba(var(--sm-action-rgb),.4);
   outline-offset:2px;
}

/* Forgot password / Enrollment links */
.auth-page .auth-card .row{ margin:0 0 16px; align-items:center; }
.auth-page .auth-card .row > [class*="col-"]{ padding:0; }
.auth-page .auth-card .row > .col-sm-6:last-child{ text-align:right; }
.auth-page .auth-card small a{
   display:inline-block;
   padding:8px 0;                          /* mas malaking click area */
   font-size:.875rem; font-weight:600;
   color:var(--sm-link);
   text-decoration:none;
}
.auth-page .auth-card small a:hover{ text-decoration:underline; }
.auth-page #div_forgotpw{ cursor:pointer; }

/* OTP */
.auth-page #otp_area small{ display:block; margin-top:6px; color:var(--sm-muted); }

/* Alerts (session expired, atbp.) */
.auth-page .auth-card .alert{
   margin:20px 0 0;
   padding:.75rem 1rem;
   font-size:.875rem;
}

/* ---------- Mobile / tablet: i-reorganize, hindi lang paliitin ---------- */
@media (max-width:860px){
   .auth-shell{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
   .auth-hero{
      flex-direction:row; align-items:center; justify-content:flex-start;
      gap:14px;
      padding:20px 20px 36px;
   }
   .auth-logo{ width:52px; height:52px; padding:6px; font-size:1.4rem; flex:0 0 auto; }
   .auth-hero__body{ margin:0; max-width:none; }
   .auth-hero__body::before,
   .auth-eyebrow,
   .auth-hero__sub,
   .auth-hero__foot{ display:none; }
   .auth-hero h1{ margin:0; font-size:1.15rem; }
   .auth-panel{
      align-items:flex-start;
      margin-top:-16px;
      padding:28px 20px 40px;
      border-radius:var(--sm-radius) var(--sm-radius) 0 0;
      background:var(--sm-surface);
   }
}