/* ==========================================================
   Institute of Science of Mind - College Management System
   ========================================================== */
:root{
  /* Brand palette. Every value below is overridden at run time by
     brand_head() from the "brand_color" setting, so the whole system
     can be recoloured from Admin > Settings > Brand colour.        */
  --ism-primary:#b4f72d;        /* the brand colour itself          */
  --ism-on-primary:#101a04;     /* text drawn on top of it          */
  --ism-primary-dark:#93ca25;   /* hover / pressed                  */
  --ism-primary-text:#537215;   /* the brand colour, readable on white */
  --ism-deep:#253309;           /* dark surfaces: nav strip, hero   */
  --ism-deeper:#152003;         /* darkest surface: footer          */
  --ism-soft:#f3fde2;           /* tinted panel background          */

  /* legacy aliases so older rules keep working */
  --ism-maroon:var(--ism-primary-text);
  --ism-maroon-dark:var(--ism-deep);
  --ism-gold:var(--ism-primary);
  --ism-ink:#1f2430;
  --ism-muted:#6b7280;
  --ism-bg:#f5f6f8;
  --ism-line:#e6e8ec;
}
body{font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;color:var(--ism-ink)}
a{text-decoration:none}
.text-maroon,.text-primary-brand{color:var(--ism-primary-text)!important}
.bg-maroon{background:var(--ism-primary)!important;color:var(--ism-on-primary)!important}
.bg-gold{background:var(--ism-primary)!important;color:var(--ism-on-primary)!important}
.bg-deep{background:var(--ism-deep)!important;color:#fff!important}
.btn-maroon{background:var(--ism-primary);border-color:var(--ism-primary);color:var(--ism-on-primary);font-weight:600}
.btn-maroon:hover,.btn-maroon:focus{background:var(--ism-primary-dark);border-color:var(--ism-primary-dark);color:var(--ism-on-primary)}
.btn-maroon:focus-visible{outline:3px solid var(--ism-primary-text);outline-offset:2px}
.btn-outline-maroon{border-color:var(--ism-primary-text);color:var(--ism-primary-text)}
.btn-outline-maroon:hover{background:var(--ism-primary);border-color:var(--ism-primary);color:var(--ism-on-primary)}

/* ---------------- PUBLIC SITE ---------------- */
.topbar-info{background:var(--ism-deeper);color:#e8eedd;font-size:.82rem;padding:.4rem 0}
.topbar-info a{color:#e8eedd}.topbar-info a:hover{color:var(--ism-primary)}
.site-nav{background:#fff;border-bottom:3px solid var(--ism-primary)}
.site-nav .navbar-brand{font-weight:700;color:var(--ism-primary-text)}
.site-nav .nav-link{font-weight:600;color:#333;padding:.85rem .8rem!important;font-size:.9rem;letter-spacing:.2px}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--ism-primary-text)}
.site-nav .nav-link.active{box-shadow:inset 0 -3px 0 var(--ism-primary)}
/* 8.59: the menu on one line - smaller type, no wrapping (ADMISSION POLICY, CONTACT US) */
.site-nav .nav-link{white-space:nowrap}
@media (min-width:992px){
  .site-nav .nav-link{font-size:.78rem;padding:.85rem .55rem!important;letter-spacing:.1px}
  .site-nav .navbar-nav{flex-wrap:nowrap}
}
@media (min-width:992px) and (max-width:1199.98px){
  .site-nav .nav-link{font-size:.72rem;padding:.85rem .4rem!important}
  .site-nav .navbar-brand small{display:none!important}
  .site-nav .navbar-brand .fw-bold{font-size:.9rem}
  .site-nav .navbar-brand img,.site-nav .navbar-brand .logo-badge{height:40px!important;width:auto!important}
  .site-nav .container{max-width:100%}
}
.logo-badge{width:46px;height:46px;border-radius:50%;background:var(--ism-primary);color:var(--ism-on-primary);display:flex;
  align-items:center;justify-content:center;font-weight:700;letter-spacing:.5px;border:2px solid var(--ism-deep)}
.hero-slider .carousel-item{height:480px;background-size:cover;background-position:center;position:relative}
.hero-slider .carousel-item::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,16,4,.80),rgba(10,16,4,.28))}
.hero-slider .carousel-caption{z-index:2;left:8%;right:8%;bottom:26%;text-align:left}
.hero-slider .carousel-caption h2{font-size:2.6rem;font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-slider .carousel-caption p{font-size:1.08rem;max-width:640px}
@media(max-width:768px){.hero-slider .carousel-item{height:320px}.hero-slider .carousel-caption h2{font-size:1.5rem}}
.quick-strip{margin-top:-46px;position:relative;z-index:3}
.quick-card{background:#fff;border-radius:10px;padding:1.15rem;box-shadow:0 8px 26px rgba(20,20,40,.10);height:100%;
  border-bottom:3px solid transparent;transition:.2s}
.quick-card:hover{transform:translateY(-4px);border-bottom-color:var(--ism-primary)}
.quick-card i{font-size:1.7rem;color:var(--ism-primary-text)}
.section-title{position:relative;font-weight:700;margin-bottom:1.6rem}
.section-title:after{content:"";display:block;width:56px;height:4px;background:var(--ism-primary);margin-top:.55rem;border-radius:2px}
.post-card{border:1px solid var(--ism-line);border-radius:10px;overflow:hidden;background:#fff;height:100%;transition:.2s}
.post-card:hover{box-shadow:0 10px 26px rgba(20,20,40,.09);transform:translateY(-3px)}
.post-card img{height:190px;object-fit:cover;width:100%}
.stat-band{background:var(--ism-deep);color:#fff;padding:2.6rem 0}
.stat-band .h2{color:var(--ism-primary);font-weight:700}
.site-footer{background:var(--ism-deeper);color:#c8d2ba;padding:3rem 0 1rem}
.site-footer h6{color:#fff;letter-spacing:.4px}
.site-footer a{color:#c8d2ba}.site-footer a:hover{color:var(--ism-primary)}
.page-head{background:linear-gradient(120deg,var(--ism-deep),var(--ism-deeper));color:#fff;padding:2.4rem 0;border-bottom:4px solid var(--ism-primary)}

/* ---------------- PANEL ---------------- */
.panel-body{background:var(--ism-bg)}
.topbar{background:#fff;height:58px;position:sticky;top:0;z-index:1030}
.brand-mark{width:34px;height:34px;border-radius:8px;background:var(--ism-primary);color:var(--ism-on-primary);display:inline-flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.82rem}
.brand-text{font-size:.95rem;font-weight:600;color:var(--ism-ink)}
.avatar-sm{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--ism-line)}
.panel-wrap{display:flex;min-height:calc(100vh - 58px)}
.sidebar{width:250px;background:#fff;border-right:1px solid var(--ism-line);flex-shrink:0;overflow-y:auto;
  height:calc(100vh - 58px);position:sticky;top:58px}
.side-section{font-size:.68rem;text-transform:uppercase;letter-spacing:.9px;color:#9aa0ab;padding:.9rem 1.1rem .3rem;font-weight:700}
.side-list{list-style:none;margin:0;padding:0}
.side-list a{display:flex;align-items:center;gap:.65rem;padding:.5rem 1.1rem;color:#414753;font-size:.88rem;border-left:3px solid transparent}
.side-list a:hover{background:var(--ism-soft);color:var(--ism-primary-text)}
.side-list a.active{background:var(--ism-soft);color:var(--ism-primary-text);border-left-color:var(--ism-primary);font-weight:600}
.side-list i{font-size:1rem;width:18px;text-align:center}
.content{flex:1;padding:1.4rem;min-width:0}
@media(max-width:991.98px){
  .sidebar{position:fixed;left:-260px;transition:.25s;z-index:1040;box-shadow:0 0 30px rgba(0,0,0,.2)}
  .sidebar.show{left:0}
}
.card{border:1px solid var(--ism-line);border-radius:10px}
.card-header{background:#fff;border-bottom:1px solid var(--ism-line);font-weight:600}
.stat-tile{border-radius:10px;padding:1rem 1.1rem;background:#fff;border:1px solid var(--ism-line);height:100%}
.stat-tile .ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.stat-tile .val{font-size:1.6rem;font-weight:700;line-height:1.1}
.stat-tile .lbl{font-size:.78rem;color:var(--ism-muted);text-transform:uppercase;letter-spacing:.4px}
.table>:not(caption)>*>*{padding:.55rem .6rem}
.table thead th{font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;color:#6b7280;background:#fafbfc;white-space:nowrap}
.table-sm td,.table-sm th{font-size:.86rem}
.form-label{font-size:.82rem;font-weight:600;color:#414753;margin-bottom:.25rem}
.required:after{content:" *";color:#c0392b}
.att-btn input{display:none}
.att-btn span{display:inline-block;min-width:34px;text-align:center;padding:.25rem .1rem;border:1px solid var(--ism-line);
  border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:600}
.att-btn input:checked + span.p{background:#198754;color:#fff;border-color:#198754}
.att-btn input:checked + span.a{background:#dc3545;color:#fff;border-color:#dc3545}
.att-btn input:checked + span.l{background:#fd7e14;color:#fff;border-color:#fd7e14}
.att-btn input:checked + span.e{background:#0d6efd;color:#fff;border-color:#0d6efd}
.progress{height:8px}
.nav-tabs .nav-link{font-size:.88rem;font-weight:600}

/* ---------------- PRINT DOCUMENTS ---------------- */
.doc{background:#fff;max-width:900px;margin:1.2rem auto;padding:44px 52px;box-shadow:0 0 18px rgba(0,0,0,.08);position:relative}
.doc-head{text-align:center;border-bottom:3px solid var(--ism-primary);padding-bottom:14px;margin-bottom:22px}
.doc-head h2{color:var(--ism-primary-text);font-weight:700;margin:0;letter-spacing:.5px}
.doc-head .sub{color:#555;font-size:.9rem}
.doc-title{text-align:center;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:18px 0;font-size:1.12rem}
.doc table{width:100%;border-collapse:collapse;font-size:.87rem}
.doc table th,.doc table td{border:1px solid #b9bcc3;padding:6px 8px}
.doc table th{background:#f2f2f4}
.sign-row{display:flex;justify-content:space-between;margin-top:64px;font-size:.86rem}
.sign-row div{text-align:center;min-width:190px;border-top:1px solid #444;padding-top:5px}
.watermark{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-28deg);font-size:5.4rem;
  color:var(--ism-soft);opacity:.75;font-weight:800;letter-spacing:8px;pointer-events:none}
@media print{
  body{background:#fff}
  .no-print,.topbar,.sidebar{display:none!important}
  .doc{box-shadow:none;margin:0;max-width:100%;padding:16px 20px}
  .panel-wrap{display:block}.content{padding:0}
  a[href]:after{content:""}
}

/* ---------------- brand accents ---------------- */
.progress-bar.bg-maroon{background:var(--ism-primary)!important}
.form-control:focus,.form-select:focus{border-color:var(--ism-primary);box-shadow:0 0 0 .2rem rgba(0,0,0,.06)}
.nav-tabs .nav-link.active{color:var(--ism-primary-text);border-bottom-color:#fff;box-shadow:inset 0 -3px 0 var(--ism-primary)}
.list-group-item.active{background:var(--ism-primary);border-color:var(--ism-primary);color:var(--ism-on-primary)}
.list-group-item.active small,.list-group-item.active .text-white-50{color:var(--ism-on-primary)!important;opacity:.75}
a{color:var(--ism-primary-text)}
a:hover{color:var(--ism-deep)}
.card-header{color:var(--ism-ink)}
::selection{background:var(--ism-primary);color:var(--ism-on-primary)}
.doc-section{color:var(--ism-primary-text);font-weight:700}
.notice-body p:last-child{margin-bottom:0}
.notice-body ul,.notice-body ol{padding-left:1.2rem;margin-bottom:.5rem}
.post-body img,.page-content img,.notice-body img{max-width:100%;height:auto;border-radius:6px}
.post-body h2,.post-body h3,.post-body h4,.page-content h2,.page-content h3,.page-content h4{color:var(--ism-primary-text);margin-top:1.4rem}
.post-body blockquote,.page-content blockquote{border-left:4px solid var(--ism-primary);padding-left:1rem;color:#555;margin:1rem 0}
.ql-align-center{text-align:center}.ql-align-right{text-align:right}.ql-align-justify{text-align:justify}
.ql-indent-1{padding-left:2rem}.ql-indent-2{padding-left:4rem}.ql-indent-3{padding-left:6rem}

/* ---------------- logos ---------------- */
.logo-img{display:inline-block;border-radius:6px;background:transparent;vertical-align:middle}
.logo-badge-dark{background:var(--ism-deep);color:#fff;border-color:var(--ism-primary)}
.logo-pair{display:inline-flex;align-items:center;gap:.6rem}
.logo-pair img{height:38px;width:auto;object-fit:contain}
/* On a dark panel the emblems are line art in dark ink, so they sit on a
   light disc rather than disappearing into the background. */
.logo-pair.on-dark img{background:#fff;border-radius:50%;padding:5px;
  box-shadow:0 1px 4px rgba(0,0,0,.28)}
.site-footer .logo-pair img{height:34px;background:#fff;border-radius:50%;padding:4px}
/* the printed letterhead - see includes/branding.php for the sizing rules */
.doc-head{text-align:center;margin-bottom:14px}
.doc-head h2{color:var(--ism-primary-text);font-weight:700;margin:0;letter-spacing:.5px}

/* ============================================================
   v8 additions
   ============================================================ */

/* ---------- preloader: styled inside views/partials/preloader.php itself, so it
   paints with the very first frame of the page ---------- */

/* content fades in once the page is ready */
.ism-fade{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
body.ism-ready .ism-fade{opacity:1;transform:none}

/* ---------- message modal ---------- */
.ism-msg-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.9rem;margin:0 auto .9rem}
.ism-msg-success{background:#e7f7e3;color:#2a7d2e}
.ism-msg-danger{background:#fbe9e9;color:#b02a2a}
.ism-msg-warning{background:#fdf3e0;color:#946a10}
.ism-msg-info{background:#e8f1fb;color:#1c5fa8}

/* ---------- attendance grid ---------- */
.att-grid{font-size:.8rem}
.att-grid th,.att-grid td{padding:.25rem .3rem!important;text-align:center;vertical-align:middle}
.att-grid td.name-cell,.att-grid th.name-cell{text-align:left;white-space:nowrap;position:sticky;left:0;
  background:#fff;z-index:2;box-shadow:1px 0 0 var(--ism-line)}
.att-grid thead th{position:sticky;top:0;background:#f4f6f0;z-index:3}
.att-grid thead th.name-cell{z-index:4}
.att-cell{width:30px}
.att-pick{width:34px;height:30px;border:1px solid var(--ism-line);border-radius:5px;
  text-align:center;font-weight:600;padding:0;background:#fff;font-size:.8rem}
.att-pick[data-m="P"]{background:#e7f7e3;border-color:#a9dca2;color:#22661f}
.att-pick[data-m="A"]{background:#fbe9e9;border-color:#e8b4b4;color:#8f2020}
.att-pick[data-m="L"]{background:#fdf3e0;border-color:#eed6a4;color:#7a5709}
.att-pick[data-m="E"]{background:#e8f1fb;border-color:#b5cfe9;color:#174e88}
.att-legend span{display:inline-flex;align-items:center;gap:.3rem;margin-right:.9rem;font-size:.8rem}
.att-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* ---------- small polish ---------- */
.table-sticky thead th{position:sticky;top:0;background:#f4f6f0;z-index:2}
.stat-tile{border:1px solid var(--ism-line);border-radius:12px;padding:1rem 1.1rem;background:#fff;height:100%}
.stat-tile .v{font-size:1.6rem;font-weight:700;line-height:1.1;color:var(--ism-ink)}
.stat-tile .l{font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:#7b8172}
.stat-tile .ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:1.05rem;background:var(--ism-soft);color:var(--ism-primary-text)}
.empty-state{text-align:center;padding:2.6rem 1rem;color:#8a9080}
.empty-state i{font-size:2.4rem;opacity:.5;display:block;margin-bottom:.6rem}
.req:after{content:" *";color:#c0392b}
.table td .btn-sm{--bs-btn-padding-y:.15rem;--bs-btn-padding-x:.4rem}

/* ---------- daily attendance register ---------- */
/* Clicking a student's name highlights the whole row, so the eye does not
   lose its place part way across a long list. */
.att-name{cursor:pointer;user-select:none}
tr.att-row.on > *{background-color:var(--ism-primary)!important;color:var(--ism-on-primary)!important}
tr.att-row.on .text-muted{color:var(--ism-on-primary)!important;opacity:.8}
tr.att-row.on .form-control{border-color:var(--ism-primary-dark)}
tr.att-row:hover > *{background-color:var(--ism-soft)}
tr.att-row.on:hover > *{background-color:var(--ism-primary)!important}
.att-status .btn{min-width:38px;font-weight:600}

/* The Settings page keeps its first three tabs inside one <form>, so the
   form sits between .tab-content and the panes and Bootstrap's own rule
   cannot reach them. Without this every one of those tabs showed at once. */
.tab-content > form > .tab-pane { display: none; }
.tab-content > form > .tab-pane.active { display: block; }

/* ---------- CA gradebook ---------- */
/* One row per student, one column per graded activity, grouped under its category.
   The list scrolls inside its own box, so both header rows stay pinned to the top of
   it, and the number and name stay put while the activities scroll sideways.
   Each category has its own colour (gb-c0 .. gb-c7, set by GradebookModel::paletteCss()):
   --gbc for its heading and total column, --gbc-soft for its activities, --gbc-tint for
   the totals down the list. */
.gb-wrap{max-height:calc(100vh - 200px);min-height:280px;overflow:auto}
.gb-grid{font-size:.82rem;border-collapse:separate;border-spacing:0}
.gb-grid th,.gb-grid td{vertical-align:middle;white-space:nowrap;border-right:1px solid #e6e9df;border-bottom:1px solid #e6e9df}
.gb-grid thead th{position:sticky;top:0;z-index:3;background:#f4f6f0;text-align:center;border-bottom:1px solid #cfd5c3}
.gb-grid thead tr:nth-child(2) th{top:var(--gb-h1,40px)}
.gb-grid .c1,.gb-grid .c2{position:sticky;background:#fff;z-index:1}
.gb-grid thead .c1,.gb-grid thead .c2{background:#f4f6f0;z-index:5;text-align:left}
.gb-grid .c1{left:0;min-width:120px;max-width:120px}
.gb-grid .c2{left:120px;min-width:210px;white-space:normal;box-shadow:1px 0 0 var(--ism-line)}
.gb-grid.gb-no-sno .c2{left:0}
.gb-grid thead th.gb-cat-head{background:var(--gbc,#f4f6f0);border-left:2px solid #fff;font-weight:700}
.gb-grid thead th.gb-item-head{background:var(--gbc-soft,#f4f6f0);min-width:78px;font-weight:600}
.gb-grid thead th.gb-item-head small{font-weight:400;color:var(--ism-muted)}
.gb-grid thead th.gb-cat-total-head{background:var(--gbc,#f4f6f0);font-weight:700}
.gb-grid td.gb-cat-total{background:var(--gbc-tint,#f4f6f0);font-weight:600}
.gb-grid td.gb-total,.gb-grid thead th.gb-total-head{background:#eef1e8}
.gb-grid td.gb-remark,.gb-grid thead th.gb-remark-head{background:#eef1e8}
.gb-grid .gb-hide{display:none!important}
.gb-in{width:68px;text-align:center;padding:.2rem .3rem}
.gb-in.gb-dirty{background:#fffbe6;border-color:#e6c84f}
.gb-in.is-invalid{background:#fbe9e9;border-color:#d66;background-image:none}

/* the Columns menu - each category's boxes carry its own colour */
.gb-colmenu{min-width:260px;max-height:62vh;overflow:auto;font-weight:400;font-size:.85rem}
.gb-colopt{display:flex;align-items:center;gap:.5rem;margin:0;padding:.18rem .5rem;cursor:pointer;border-radius:4px}
.gb-colopt:hover{background:#f3f5ee}
.gb-colopt .form-check-input{float:none;margin:0}
.gb-colgroup{margin:.35rem 0;border-left:5px solid var(--gbc,#ccc);background:var(--gbc-tint,#fafafa);border-radius:4px}
.gb-colhead{font-weight:600;background:var(--gbc,#eee)}
.gb-colsub{padding-left:1.4rem}

/* ============================================================
   Dark theme (8.14) - Administrator and lecturer panels only.
   <html data-bs-theme="dark"> switches Bootstrap 5.3 to its dark
   palette; the rules below bring the system's own surfaces along.
   Printed documents (.doc) stay black on white.
   ============================================================ */
[data-bs-theme=dark]{
  --ism-ink:#e3e6ea;
  --ism-muted:#9aa3ad;
  --ism-bg:#14171b;
  --ism-line:#2d3238;
  --ism-surface:#1b1f24;
  --ism-surface-2:#22272d;
  --bs-body-bg:#14171b;
  --bs-body-color:#dfe3e7;
  --bs-secondary-bg:#22272d;
  --bs-tertiary-bg:#1f2429;
  --bs-border-color:#2d3238;
  color-scheme:dark;
}
[data-bs-theme=dark] body{color:var(--ism-ink)}
[data-bs-theme=dark] .panel-body{background:var(--ism-bg)}
[data-bs-theme=dark] .topbar{background:var(--ism-surface);border-bottom:1px solid var(--ism-line)}
[data-bs-theme=dark] .sidebar{background:var(--ism-surface);border-right-color:var(--ism-line)}
[data-bs-theme=dark] .side-section{color:#7d8791}
[data-bs-theme=dark] .side-list a{color:#c3c9d0}
[data-bs-theme=dark] .side-list a:hover,[data-bs-theme=dark] .side-list a.active{background:var(--ism-soft);color:var(--ism-primary-text)}
[data-bs-theme=dark] .brand-text{color:var(--ism-ink)}
[data-bs-theme=dark] .card,[data-bs-theme=dark] .stat-tile,[data-bs-theme=dark] .quick-card,[data-bs-theme=dark] .post-card{background:var(--ism-surface);border-color:var(--ism-line)}
[data-bs-theme=dark] .card-header,[data-bs-theme=dark] .card-footer{background:var(--ism-surface-2);border-color:var(--ism-line);color:var(--ism-ink)}
[data-bs-theme=dark] .stat-tile .v,[data-bs-theme=dark] .stat-tile .val{color:var(--ism-ink)}
[data-bs-theme=dark] .stat-tile .l,[data-bs-theme=dark] .stat-tile .lbl{color:var(--ism-muted)}
[data-bs-theme=dark] .form-label{color:#c3c9d0}
[data-bs-theme=dark] a{color:var(--ism-primary-text)}
[data-bs-theme=dark] a:hover{color:#fff}
[data-bs-theme=dark] .btn-maroon:hover{color:var(--ism-on-primary)}
[data-bs-theme=dark] .nav-tabs .nav-link.active{color:var(--ism-primary-text);background:var(--ism-surface);border-color:var(--ism-line) var(--ism-line) var(--ism-surface)}
[data-bs-theme=dark] .empty-state{color:var(--ism-muted)}
/* tables: Bootstrap's table-light and the pinned header colours are fixed light greys */
[data-bs-theme=dark] .table{--bs-table-bg:transparent;--bs-table-color:var(--ism-ink);--bs-table-border-color:var(--ism-line);
  --bs-table-striped-bg:rgba(255,255,255,.03);--bs-table-hover-bg:rgba(255,255,255,.05);--bs-table-hover-color:var(--ism-ink)}
[data-bs-theme=dark] .table thead th,[data-bs-theme=dark] .table-light,[data-bs-theme=dark] .table-light>*>*,
[data-bs-theme=dark] thead.table-light th{--bs-table-bg:var(--ism-surface-2);--bs-table-color:#aeb6bf;background-color:var(--ism-surface-2)!important;color:#aeb6bf;border-color:var(--ism-line)}
[data-bs-theme=dark] .table-sticky thead th{background:var(--ism-surface-2)}
[data-bs-theme=dark] .table-danger{--bs-table-bg:#3a1f22;--bs-table-color:#f1d4d6;--bs-table-border-color:#4d2a2e}
[data-bs-theme=dark] .table-success{--bs-table-bg:#1d3324;--bs-table-color:#cfe9d6;--bs-table-border-color:#284632}
[data-bs-theme=dark] .table-warning{--bs-table-bg:#3a3219;--bs-table-color:#f1e5c2;--bs-table-border-color:#4d4222}
[data-bs-theme=dark] .table-info{--bs-table-bg:#18313a;--bs-table-color:#cde8f1;--bs-table-border-color:#22434f}
[data-bs-theme=dark] .table-secondary{--bs-table-bg:#262b31;--bs-table-color:#d6dbe0;--bs-table-border-color:#343a41}
/* utility colours that Bootstrap keeps light in dark mode */
[data-bs-theme=dark] .bg-white{background-color:var(--ism-surface)!important}
[data-bs-theme=dark] .bg-light{background-color:var(--ism-surface-2)!important;color:var(--ism-ink)}
[data-bs-theme=dark] .text-bg-light{background-color:var(--ism-surface-2)!important;color:var(--ism-ink)!important}
[data-bs-theme=dark] .text-dark{color:var(--ism-ink)!important}
[data-bs-theme=dark] .btn-light{--bs-btn-bg:var(--ism-surface-2);--bs-btn-border-color:var(--ism-line);--bs-btn-color:var(--ism-ink);
  --bs-btn-hover-bg:#2c3238;--bs-btn-hover-border-color:#3a4047;--bs-btn-hover-color:#fff}
[data-bs-theme=dark] .alert-light{--bs-alert-bg:var(--ism-surface-2);--bs-alert-color:var(--ism-ink);--bs-alert-border-color:var(--ism-line)}
[data-bs-theme=dark] .list-group-item{background:var(--ism-surface);border-color:var(--ism-line);color:var(--ism-ink)}
[data-bs-theme=dark] .modal-content,[data-bs-theme=dark] .dropdown-menu{background:var(--ism-surface);border-color:var(--ism-line)}
[data-bs-theme=dark] .form-control,[data-bs-theme=dark] .form-select{background-color:#15181c;border-color:#343a41;color:var(--ism-ink)}
[data-bs-theme=dark] .form-control:disabled,[data-bs-theme=dark] .form-control[readonly],[data-bs-theme=dark] .form-select:disabled{background-color:#1f2328}
[data-bs-theme=dark] .form-control::placeholder{color:#6d7680}
[data-bs-theme=dark] .input-group-text{background:var(--ism-surface-2);border-color:#343a41;color:var(--ism-muted)}
[data-bs-theme=dark] .avatar-sm{border-color:var(--ism-line)}
/* inline sticky cells written with white / light-grey backgrounds */
[data-bs-theme=dark] [style*="background:#fff"],[data-bs-theme=dark] [style*="background: #fff"],
[data-bs-theme=dark] [style*="background:#f8f9fa"],[data-bs-theme=dark] [style*="background:#eef1f4"],
[data-bs-theme=dark] [style*="background:#eceff3"]{background:var(--ism-surface)!important}
/* attendance registers and the CA gradebook */
[data-bs-theme=dark] .att-grid td.name-cell,[data-bs-theme=dark] .att-grid th.name-cell{background:var(--ism-surface)}
[data-bs-theme=dark] .att-grid thead th{background:var(--ism-surface-2)}
[data-bs-theme=dark] .att-pick{background:#15181c;color:var(--ism-ink)}
[data-bs-theme=dark] .att-pick[data-m="P"]{background:#1d3a22;border-color:#2e6b37;color:#bfe8c4}
[data-bs-theme=dark] .att-pick[data-m="A"]{background:#43201f;border-color:#7a3534;color:#f3c3c2}
[data-bs-theme=dark] .att-pick[data-m="L"]{background:#40331a;border-color:#7a5f25;color:#f1dcaa}
[data-bs-theme=dark] .att-pick[data-m="E"]{background:#1a2f45;border-color:#2f5a86;color:#c3dcf5}
[data-bs-theme=dark] .att-btn span{border-color:#3a4047}
[data-bs-theme=dark] tr.att-row:hover > *{background-color:var(--ism-soft)}
[data-bs-theme=dark] .gb-grid th,[data-bs-theme=dark] .gb-grid td{border-color:#2d3238}
[data-bs-theme=dark] .gb-grid thead th{background:var(--ism-surface-2);color:var(--ism-ink);border-bottom-color:#3a4047}
[data-bs-theme=dark] .gb-grid .c1,[data-bs-theme=dark] .gb-grid .c2{background:var(--ism-surface)}
[data-bs-theme=dark] .gb-grid thead .c1,[data-bs-theme=dark] .gb-grid thead .c2{background:var(--ism-surface-2)}
[data-bs-theme=dark] .gb-grid thead th.gb-cat-head,[data-bs-theme=dark] .gb-grid thead th.gb-item-head,
[data-bs-theme=dark] .gb-grid thead th.gb-cat-total-head,[data-bs-theme=dark] .gb-grid td.gb-cat-total{color:#15181c}
[data-bs-theme=dark] .gb-grid td.gb-total,[data-bs-theme=dark] .gb-grid thead th.gb-total-head,
[data-bs-theme=dark] .gb-grid td.gb-remark,[data-bs-theme=dark] .gb-grid thead th.gb-remark-head{background:var(--ism-surface-2)}
[data-bs-theme=dark] .gb-in.gb-dirty{background:#3a3219;border-color:#8a7430}
[data-bs-theme=dark] .gb-colopt:hover{background:var(--ism-surface-2)}
/* message icons, preloader */
[data-bs-theme=dark] .ism-msg-success{background:#1d3a22;color:#9fdfaa}
[data-bs-theme=dark] .ism-msg-danger{background:#43201f;color:#f2a7a5}
[data-bs-theme=dark] .ism-msg-warning{background:#40331a;color:#f0cf85}
[data-bs-theme=dark] .ism-msg-info{background:#1a2f45;color:#9cc6f0}
/* documents shown inside the panel keep their paper look */
[data-bs-theme=dark] .doc{background:#fff;color:#212529;color-scheme:light}
[data-bs-theme=dark] .doc a{color:#1f4f99}
[data-bs-theme=dark] .doc .text-muted{color:#6c757d!important}
/* the built-in SVG charts (app/helpers/charts.php) */
[data-bs-theme=dark] svg [stroke="#e1e0d9"]{stroke:#2d3238}
[data-bs-theme=dark] svg [stroke="#c3c2b7"]{stroke:#4a5058}
[data-bs-theme=dark] svg [fill="#0b0b0b"]{fill:#e3e6ea}
[data-bs-theme=dark] svg [fill="#52514e"]{fill:#b8bfc6}
[data-bs-theme=dark] svg [fill="#898781"]{fill:#9aa3ad}
/* buttons written as links keep their button colours (the dark link colour must not leak into them) */
[data-bs-theme=dark] a.btn{color:var(--bs-btn-color)}
[data-bs-theme=dark] a.btn:hover,[data-bs-theme=dark] a.btn:focus-visible{color:var(--bs-btn-hover-color)}
[data-bs-theme=dark] a.btn.active{color:var(--bs-btn-active-color)}
[data-bs-theme=dark] .btn-maroon,[data-bs-theme=dark] a.btn-maroon,[data-bs-theme=dark] a.btn-maroon:hover{color:var(--ism-on-primary)}
[data-bs-theme=dark] a.btn-outline-maroon{color:var(--ism-primary-text)}
[data-bs-theme=dark] a.btn-outline-maroon:hover{color:var(--ism-on-primary)}
[data-bs-theme=dark] .btn-outline-secondary{--bs-btn-color:#b8bfc6;--bs-btn-border-color:#4a5058;--bs-btn-hover-bg:#2c3238;--bs-btn-hover-border-color:#5a616a;--bs-btn-hover-color:#fff;--bs-btn-active-bg:#343a41;--bs-btn-active-color:#fff}
[data-bs-theme=dark] .nav-link{--bs-nav-link-color:#c3c9d0;--bs-nav-link-hover-color:var(--ism-primary-text)}
/* gradebook category headings keep their own colours (dark text on the category tint) */
[data-bs-theme=dark] .gb-grid thead th.gb-cat-head,[data-bs-theme=dark] .gb-grid thead th.gb-cat-total-head{background-color:var(--gbc,#3a4047)!important;color:#15181c!important}
[data-bs-theme=dark] .gb-grid thead th.gb-item-head{background-color:var(--gbc-soft,#2c3238)!important;color:#15181c!important}
[data-bs-theme=dark] .gb-grid thead th.gb-total-head,[data-bs-theme=dark] .gb-grid thead th.gb-remark-head{color:var(--ism-ink)!important}
[data-bs-theme=dark] .gb-grid thead th.gb-item-head small{color:#3d4750}

/* ============================================================
 *  Fixed (sticky) table headers - every table in the system.
 *  A wide table scrolls inside its own box (.table-responsive), so the
 *  box is capped at the screen height and the header row(s) stay pinned
 *  at its top while the rows scroll underneath. Tables that are not in
 *  such a box pin under the top bar instead. app.js sets --th-top for
 *  each header row (two-row headers, the top bar's height).
 * ============================================================ */
.content .table-responsive{max-height:calc(100vh - 140px);overflow:auto}
.table>thead>tr>th{position:sticky;top:var(--th-top,0px);z-index:3}
@media print{
  .content .table-responsive{max-height:none!important;overflow:visible!important}
  .table>thead>tr>th{position:static}
}

/* ---------- a header row marked table-dark keeps its dark band (8.19) ----------
   The general ".table thead th" rule above (light grey) was painting over it, so the
   SEE resultsheet's dark header came out pale. The band uses the brand's deep colour. */
.table thead tr.table-dark > th,
[data-bs-theme=dark] .table thead tr.table-dark > th{background-color:var(--ism-deep)!important;color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;--bs-table-bg:var(--ism-deep);--bs-table-color:#fff}
.table thead tr.table-dark > th .text-muted,
.table thead tr.table-dark > th .small{color:rgba(255,255,255,.78)!important}
.table thead tr.table-dark > th .badge.text-bg-light{background:rgba(255,255,255,.14)!important;color:#fff!important;border-color:rgba(255,255,255,.35)!important}
@media print{.table thead tr.table-dark > th{-webkit-print-color-adjust:exact;print-color-adjust:exact}}


/* ---------- the side menu folds to its icons (8.21) ----------
   On a computer the menu button folds the menu to a narrow strip of icons (the
   name shows on hover) and opens it again; on a phone it slides in as before. */
@media(min-width:992px){
  .sidebar{transition:width .2s ease}
  body.side-collapsed .sidebar{width:64px;overflow-x:hidden}
  body.side-collapsed .side-section{font-size:0;padding:.35rem 0;margin:0 14px;border-top:1px solid var(--ism-line)}
  body.side-collapsed .side-section:first-child{border-top:0}
  body.side-collapsed .side-list a{justify-content:center;padding:.6rem 0;gap:0}
  body.side-collapsed .side-list a span{display:none}
  body.side-collapsed .side-list i{font-size:1.15rem;width:auto}
  body.side-collapsed .side-foot{display:none}
}

/* ---------- the top utility bar (address, contact, language, social) ---------- */
.topline{background:var(--ism-soft);border-bottom:1px solid rgba(0,0,0,.06);color:var(--ism-primary-text)}
.topline-inner{display:flex;align-items:center;justify-content:space-between;gap:.35rem 1.25rem;flex-wrap:wrap}
.topline-info{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem 1.1rem;min-width:0}
.topline-info .tl-item{display:inline-flex;align-items:center;gap:.4rem;color:inherit;text-decoration:none;max-width:100%}
.topline-info .tl-item i{opacity:.8;flex:none}
.topline-info a.tl-item:hover{text-decoration:underline}
.topline-info .tl-item>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topline-actions{display:flex;align-items:center;gap:.9rem}
.tl-social{display:inline-flex;align-items:center;gap:.6rem;font-size:1rem}
.tl-social a{color:inherit;opacity:.8}
.tl-social a:hover{opacity:1}

/* phones and tablets (small & medium): hide the address, phone and e-mail to
   keep the bar clean - only the language switch (and social links) remain,
   centred. The contacts are still in the footer for anyone who needs them. */
@media (max-width:991.98px){
  .topline{text-align:center}
  .topline-inner{justify-content:center}
  .topline-info{display:none}
  .topline-actions{justify-content:center;width:100%;gap:1rem}
}

/* ---------- notifications: the bell dropdown and the full list ---------- */
.flex-none{flex:none}
.min-w-0{min-width:0}
.notif-menu{width:320px;max-width:92vw}
.notif-list{max-height:360px;overflow-y:auto}
.notif-row{color:inherit}
.notif-row:hover,.notif-row.is-new{background:var(--ism-soft)}
.text-truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-ic{width:40px;height:40px;border-radius:50%;background:var(--ism-soft);color:var(--ism-primary-text);font-size:1.1rem}
.list-group-item.notif-unread{background:var(--ism-soft)}

/* ---------- the English / Dzongkha switch on the website (8.22) ---------- */
.lang-switch{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:999px;overflow:hidden;
  font-size:.72rem;font-weight:700;letter-spacing:.4px;line-height:1}
.lang-switch a{padding:4px 10px;text-decoration:none;color:inherit;opacity:.75}
.lang-switch a.ism-dz{font-size:.9rem;padding:2px 10px;letter-spacing:0}
.lang-switch a:hover{opacity:1}
.lang-switch a.on{background:var(--ism-primary);color:var(--ism-on-primary,#101a04);opacity:1}
body.lang-dz .site-nav .nav-link{letter-spacing:0;text-transform:none!important;font-size:.98rem}
body.lang-dz .page-content,body.lang-dz .post-body{line-height:1.9}

/* ---------- the slider caption (8.23) ----------
   The slides are written with .hero-caption / h1, but only .carousel-caption / h2
   had a style, so the caption sat in dark text at the very top of the picture,
   half under the menu bar, and Dzongkha was clipped. It now sits low on the
   picture in white, over the dark band, in either language. */
.hero-slider .carousel-item .hero-caption{position:absolute;left:0;right:0;bottom:22%;z-index:2;color:#fff;text-align:left}
.hero-slider .hero-caption h1{font-size:2.6rem;font-weight:700;color:#fff;line-height:1.3;text-shadow:0 2px 14px rgba(0,0,0,.55);margin-bottom:.4rem}
.hero-slider .hero-caption .lead{color:rgba(255,255,255,.92);max-width:640px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-slider > .hero-caption,.hero-slider.d-flex .hero-caption h1{color:#fff}
body.lang-dz .hero-slider .hero-caption h1{font-size:2.9rem;line-height:1.55}
@media(max-width:768px){.hero-slider .hero-caption h1{font-size:1.5rem}body.lang-dz .hero-slider .hero-caption h1{font-size:1.8rem}}
body.lang-dz .site-nav .navbar-brand small{font-size:.86rem!important}
body.lang-dz .quick-card .small,body.lang-dz .stat-tile .l,body.lang-dz .site-footer .small{font-size:.92rem}

/* 8.54: the person search box */
.user-pick-list{position:absolute;left:0;right:0;top:100%;z-index:1060;max-height:320px;overflow:auto}
.user-pick-list .list-group-item code{color:inherit}

/* 8.56: the library's Dewey Decimal browse and call numbers */
.ddc-chips{display:flex;flex-wrap:wrap;gap:6px}
.ddc-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ism-line,#dee2e6);border-radius:999px;padding:3px 10px 3px 4px;
  font-size:.82rem;color:inherit;text-decoration:none;background:var(--ism-surface,#fff);max-width:100%}
.ddc-chip:hover{border-color:var(--ism-primary);color:inherit}
.ddc-chip.active{background:var(--ism-primary);border-color:var(--ism-primary);color:var(--ism-on-primary,#fff)}
.ddc-chip.empty{opacity:.55}
.ddc-chip .ddc-no{font-family:var(--bs-font-monospace);font-weight:700;background:var(--ism-soft,#f1f3f5);border-radius:999px;padding:1px 7px;color:var(--ism-primary-text,inherit)}
.ddc-chip.active .ddc-no{background:rgba(255,255,255,.25);color:inherit}
.ddc-chip .ddc-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.ddc-chip .ddc-ct{font-size:.72rem;opacity:.75}
.ddc-sub .ddc-chip{font-size:.78rem}
.call-no{font-family:var(--bs-font-monospace);font-weight:700;letter-spacing:.02em}
.ddc-box{background:var(--ism-soft,#f6f7f9);border:1px dashed var(--ism-line,#dee2e6)}
.ebook-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.ebook-page{position:relative;border:1px solid var(--ism-line,#dee2e6);border-radius:8px;background:var(--ism-surface,#fff);padding:6px;text-align:center}
.ebook-page canvas{max-width:100%;height:118px;object-fit:contain;display:block;margin:0 auto;background:#fff}
.ebook-page .pg-no{position:absolute;top:4px;left:6px;font-size:.7rem;font-weight:700;background:var(--ism-primary);color:var(--ism-on-primary,#fff);border-radius:999px;padding:0 7px}
.ebook-page .pg-tools{display:flex;justify-content:center;gap:2px;margin-top:4px}
.ebook-page .pg-tools button{padding:0 6px;font-size:.8rem}
.ebook-reader{width:100%;height:calc(100vh - 210px);min-height:480px;border:1px solid var(--ism-line,#dee2e6);border-radius:8px;background:#525659}
/* 8.57: the Library portal */
.lib-banner-stats strong{font-size:1.15rem}
@media (min-width:992px){ .lib-signin{position:sticky;top:90px} }
.tl-library{display:inline-flex;align-items:center;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;color:inherit;border:1px solid currentColor;border-radius:999px;padding:2px 10px;margin-right:8px;opacity:.9}
.tl-library:hover,.tl-library.on{opacity:1;background:var(--ism-primary);border-color:var(--ism-primary);color:var(--ism-on-primary,#fff)}
/* 8.69: the click-sound speaker button on the public top line */
.tl-sound{color:inherit!important;opacity:.8;font-size:1rem;line-height:1;text-decoration:none;border:0}
.tl-sound:hover,.tl-sound:focus-visible{opacity:1}
/* 8.70: Google AdSense units and the cookie notice on the public website */
.ism-ad{margin:1.75rem 0;padding:.5rem 0;text-align:center;min-height:120px;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.ism-ad-label{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a;margin-bottom:.35rem}
.ism-ad ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.ism-cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:1080;max-width:720px;margin:0 auto;display:flex;gap:.75rem;align-items:center;justify-content:space-between;
  padding:.65rem .9rem;border-radius:.6rem;background:#2b2b2b;color:#f2f2f2;font-size:.85rem;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.ism-cookie[hidden]{display:none}
.ism-cookie a{color:#fff;text-decoration:underline}
.footer-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}