/* ============================================================================
   ZSMIS portals — refined professional theme overlay.
   Loaded AFTER adminlte.min.css so it elevates the existing AdminLTE layout
   without changing structure. Additive polish only: typography, spacing,
   cards, tables, DataTables controls, forms, buttons, sidebar, modals.
   ============================================================================ */
:root {
  --pro-primary: #1d4ed8;
  --pro-primary-dark: #1e3a8a;
  --pro-ink: #1f2937;
  --pro-muted: #6b7280;
  --pro-line: #e5e7eb;
  --pro-bg: #eef2f7;
  --pro-radius: 2px;
  --pro-shadow: 0 1px 2px rgba(16,24,40,.06), 0 10px 26px rgba(16,24,40,.06);
  --pro-shadow-hover: 0 8px 26px rgba(16,24,40,.14);
}

/* ---- Base ---------------------------------------------------------------- */
body, .wrapper, .content-wrapper {
  background-color: var(--pro-bg) !important;
  font-family: 'Source Sans Pro', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--pro-ink);
}
.content-header h1, .content-header .h1 { font-weight: 700; letter-spacing: -.01em; font-size: 1.6rem; }
a { color: var(--pro-primary); }

/* ---- Cards --------------------------------------------------------------- */
.card {
  border: 0; border-radius: var(--pro-radius); box-shadow: var(--pro-shadow);
  margin-bottom: 1.25rem;
}
.card-header {
  background: transparent; border-bottom: 1px solid var(--pro-line);
  border-top-left-radius: var(--pro-radius); border-top-right-radius: var(--pro-radius);
  padding: .9rem 1.25rem;
}
.card-title { font-weight: 700; letter-spacing: .01em; font-size: 1rem; }
.card.card-primary.card-outline { border-top: 3px solid var(--pro-primary); }

/* Solid coloured card headers (e.g. the Student "About" box) ship as AdminLTE's
   flat #007bff. Re-tone to the refined brand blue so they match the navbar. */
.card-primary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header {
  background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-dark)) !important;
  border-bottom: 0 !important;
}
.card-primary:not(.card-outline) > .card-header,
.card-primary:not(.card-outline) > .card-header .card-title,
.card-info:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header .card-title { color: #fff !important; }

/* ---- Tables -------------------------------------------------------------- */
.table { color: var(--pro-ink); }
.table thead th {
  background: #f8fafc; color: #475467; text-transform: uppercase;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  border-top: 0; border-bottom: 2px solid var(--pro-line);
  padding: 12px; white-space: nowrap; vertical-align: middle;
}
.table td, .table th { padding: 10px 12px; vertical-align: middle; }
.table td { border-top: 1px solid #f1f3f5; }
.table-hover tbody tr:hover { background: #eff6ff; }
.table-striped tbody tr:nth-of-type(odd) { background: #f9fafb; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--pro-line); }
.table-sm td, .table-sm th { padding: 8px 10px; }
/* Wide tables scroll horizontally in their own container instead of overflowing
   the card (nowrap headers can push a many-column table past a narrow card). */
/* Only explicit .table-responsive wrappers get horizontal scroll. Do NOT put
   overflow on .dataTables_wrapper — it forces overflow-y:auto too, which clips
   row action dropdowns (Withdraw/Delete/Transfer) inside DataTables. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bg-info, thead.bg-info th, tr.bg-info th, tr.bg-info td {
  background-color: var(--pro-primary) !important; color: #fff !important; border-color: var(--pro-primary) !important;
}
/* Selected/active table row (Student Module highlights the clicked row with
   bg-info/bg-success): refined soft-blue tint instead of the harsh solid fill.
   More specific than the rule above so it wins for table body rows. */
.table tbody tr.bg-info, .table tbody tr.bg-info > td, .table tbody tr.bg-info > th,
.table tbody tr.bg-success, .table tbody tr.bg-success > td, .table tbody tr.bg-success > th,
.table-hover tbody tr.bg-info:hover, .table-hover tbody tr.bg-info:hover > td,
.table-hover tbody tr.bg-success:hover, .table-hover tbody tr.bg-success:hover > td {
  background-color: #eef4ff !important; color: #1e3a8a !important; border-color: #d3e2fb !important;
}
.table tbody tr.bg-info > td, .table tbody tr.bg-success > td { font-weight: 600; }

/* ---- DataTables controls ------------------------------------------------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--pro-line); border-radius: 2px; padding: 6px 10px; height: auto; outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--pro-primary); box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--pro-muted); font-size: 13px; padding: 6px 0; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 2px !important; margin: 0 2px !important;
  border: 1px solid transparent !important; padding: 5px 11px !important; color: var(--pro-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #eff6ff !important; border-color: var(--pro-line) !important; color: var(--pro-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--pro-primary) !important; border-color: var(--pro-primary) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: #c1c7cf !important; }

/* Bootstrap pagination (non-DataTables) */
.page-item.active .page-link { background-color: var(--pro-primary); border-color: var(--pro-primary); }
.page-link { color: var(--pro-primary); border-radius: 2px; margin: 0 2px; border-color: var(--pro-line); }
.pagination { gap: 2px; }

/* ---- Forms --------------------------------------------------------------- */
.form-control, .custom-select,
.select2-container--default .select2-selection--single,
.select2-container--bootstrap4 .select2-selection {
  border: 1px solid var(--pro-line) !important; border-radius: 2px !important; color: var(--pro-ink);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--pro-primary) !important; box-shadow: 0 0 0 3px rgba(29,78,216,.12) !important;
}
label, .col-form-label { font-weight: 600; color: #374151; }
.input-group-text { border-radius: 2px; border-color: var(--pro-line); background: #f8fafc; }

/* ---- Buttons ------------------------------------------------------------- */
.btn { border-radius: 2px; font-weight: 600; letter-spacing: .01em; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:not(.btn-link):not(.disabled):hover { box-shadow: 0 4px 12px rgba(16,24,40,.14); }
.btn-primary { background: var(--pro-primary); border-color: var(--pro-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--pro-primary-dark); border-color: var(--pro-primary-dark); }
.btn-sm { border-radius: 2px; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.btn-group > .btn:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }

/* ---- Nav pills / tabs ---------------------------------------------------- */
.nav-pills .nav-link { border-radius: 2px; font-weight: 600; }
.nav-pills .nav-link.active { background: var(--pro-primary); }
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--pro-primary); font-weight: 600; }

/* ---- Badges -------------------------------------------------------------- */
.badge { border-radius: 2px; font-weight: 600; padding: 4px 8px; letter-spacing: .02em; }

/* ---- Dashboard navigation cards -----------------------------------------
   These use .small-box.bg-brown, whose colour was left commented-out in the
   template, so they rendered as flat grey. Give them a modern, vibrant look. */
.small-box {
  position: relative; color: #fff; border-radius: 3px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(16,24,40,.14);
  transition: transform .16s ease, box-shadow .16s ease;
}
.small-box:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,24,40,.22); }
.small-box > .inner { padding: 18px 20px; position: relative; z-index: 2; }
.small-box > .inner h3 { color: #fff !important; font-weight: 800; font-size: 1.9rem; letter-spacing: -.01em; margin: 0; }
.small-box > .inner p { color: rgba(255,255,255,.9) !important; }
.small-box .icon { top: 8px; right: 12px; z-index: 1; transition: transform .2s ease; }
.small-box .icon > i { color: rgba(255,255,255,.30); font-size: 80px; }
.small-box:hover .icon > i { color: rgba(255,255,255,.45); transform: scale(1.06); }
.small-box .small-box-footer {
  background: rgba(0,0,0,.14); color: rgba(255,255,255,.92) !important;
  font-weight: 600; padding: 9px; position: relative; z-index: 2; transition: background .16s ease;
}
.small-box:hover .small-box-footer { background: rgba(0,0,0,.24); color: #fff !important; }

/* Base colour + distinct accent per card position (only nav cards use bg-brown). */
.small-box.bg-brown { background: linear-gradient(135deg, #2563eb, #1e3a8a) !important; }
[class*="col-"]:nth-child(1) > .small-box.bg-brown { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; }
[class*="col-"]:nth-child(2) > .small-box.bg-brown { background: linear-gradient(135deg, #0ea5e9, #0369a1) !important; }
[class*="col-"]:nth-child(3) > .small-box.bg-brown { background: linear-gradient(135deg, #14b8a6, #0f766e) !important; }
[class*="col-"]:nth-child(4) > .small-box.bg-brown { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; }

.info-box { border-radius: 3px; box-shadow: var(--pro-shadow); }
.info-box .info-box-icon { border-radius: 3px; }

/* ---- Header / Navbar -----------------------------------------------------
   Stock is a flat bright `navbar-primary` blue. Replace with a refined deep
   gradient + subtle depth, and polish the controls sitting on top of it. */
.main-header.navbar.navbar-primary,
.main-header.navbar {
  background: linear-gradient(90deg, #172a6b 0%, #1d4ed8 55%, #2563eb 100%) !important;
  box-shadow: 0 2px 10px rgba(16,24,40,.16);
  border-bottom: 0;
}
/* top hairline highlight for a crisp edge */
.main-header.navbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255,255,255,.18);
}
.main-header.navbar .nav-link { color: rgba(255,255,255,.9) !important; font-weight: 600; }
.main-header.navbar .nav-link:hover { color: #fff !important; }
.main-header.navbar .navbar-nav .nav-item > .nav-link[data-widget="pushmenu"]:hover,
.main-header.navbar .navbar-nav .nav-item > .nav-link:hover { background: rgba(255,255,255,.10); border-radius: 6px; }

/* AY / Semester selects on the bar — translucent, readable */
.main-header.navbar .form-control,
.main-header.navbar .custom-select,
.main-header.navbar select.form-control {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important; border-radius: 6px !important; font-weight: 600;
}
.main-header.navbar .form-control:focus {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15) !important; color: #fff !important;
}
/* Opened option list must be readable: solid white menu, dark text, a soft
   blue highlight on the selected row (the closed control stays white-on-blue).
   Cover EVERY navbar select — the AY box is .form-control but the Semester box
   is .custom-select, so scoping to .form-control left its menu white-on-white. */
.main-header.navbar select option {
  background: #ffffff !important; color: #1f2937 !important;
}
.main-header.navbar select option:checked,
.main-header.navbar select option:hover {
  background: #eff4ff !important; color: var(--pro-primary) !important; font-weight: 600;
}
.main-header.navbar .navbar-badge { box-shadow: 0 0 0 2px rgba(23,42,107,.6); }

/* ---- Sidebar ------------------------------------------------------------
   The College (and Registrar) sidebar ships as `sidebar-light-secondary
   sidebar-light`, whose stock active state is a muted grey bar. Everything
   below is scoped to that exact variant (with an extra class for specificity)
   so it actually overrides AdminLTE instead of silently losing the cascade. */
.main-sidebar.sidebar-light {
  background: #ffffff !important;
  box-shadow: 1px 0 0 rgba(16,24,40,.06), 4px 0 24px rgba(16,24,40,.04);
}

/* Brand header */
.main-sidebar .brand-link {
  border-bottom: 1px solid var(--pro-line);
  padding: .9rem 1rem; display: flex; align-items: center; gap: .1rem;
}
.main-sidebar .brand-link .brand-image { max-height: 36px; width: auto; margin-right: .5rem; }
.main-sidebar .brand-link .brand-text { font-weight: 700; color: var(--pro-ink); letter-spacing: -.01em; }

/* Top-level items */
.sidebar-light-secondary .nav-sidebar > .nav-item { margin: 1px 8px; }
.sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link {
  border-radius: 6px; color: #334155; font-weight: 400; padding: .58rem .8rem;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link > .nav-icon,
.sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link > i:first-child {
  color: #94a3b8; transition: color .15s ease;
}

/* Hover */
.sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link:hover {
  background: #eff4ff; color: var(--pro-primary);
}
.sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link:hover > i:first-child {
  color: var(--pro-primary);
}

/* Active — solid blue pill, white text/icon (overrides the stock grey) */
.sidebar-light-secondary.sidebar-light .nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-dark)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(29,78,216,.32);
}
.sidebar-light-secondary.sidebar-light .nav-sidebar > .nav-item > .nav-link.active > i:first-child,
.sidebar-light-secondary.sidebar-light .nav-sidebar > .nav-item > .nav-link.active > p > i {
  color: #fff !important;
}

/* Treeview sub-items */
.sidebar-light-secondary .nav-treeview > .nav-item > .nav-link {
  color: #64748b; font-weight: 400; border-radius: 6px; margin: 1px 6px 1px 4px; padding: .45rem .8rem;
}
.sidebar-light-secondary .nav-treeview > .nav-item > .nav-link > i:first-child { color: #cbd5e1; font-size: .8rem; }
.sidebar-light-secondary .nav-treeview > .nav-item > .nav-link:hover {
  background: #f1f5f9; color: var(--pro-primary);
}
.sidebar-light-secondary .nav-treeview > .nav-item > .nav-link.active {
  background: #eff4ff !important; color: var(--pro-primary) !important; font-weight: 400;
}
.sidebar-light-secondary .nav-treeview > .nav-item > .nav-link.active > i:first-child { color: var(--pro-primary) !important; }

/* Open parent of a treeview keeps a subtle tint, not the full grey bar */
.sidebar-light-secondary .nav-item.menu-open > .nav-link:not(.active) {
  background: #f8fafc; color: var(--pro-ink);
}

/* Consistent icon gutter so labels don't crowd the glyphs */
.sidebar-light-secondary .nav-sidebar .nav-link > i:first-child {
  width: 1.4rem; margin-right: .5rem; text-align: center; flex-shrink: 0;
}

/* Notification badges on nav items */
.nav-sidebar .nav-link .badge { border-radius: 10px; }

/* ---- Modals -------------------------------------------------------------- */
.modal-content { border: 0; border-radius: var(--pro-radius); box-shadow: 0 24px 64px rgba(16,24,40,.22); }
.modal-header { border-bottom: 1px solid var(--pro-line); }
.modal-footer { border-top: 1px solid var(--pro-line); }

/* ---- Alerts / SweetAlert ------------------------------------------------- */
.alert { border: 0; border-radius: 2px; box-shadow: var(--pro-shadow); }

/* ---- Scrollbar (webkit) -------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
/* ==========================================================================
   KCC-LOCAL OVERRIDES — appended to pro-theme.css. Not part of the ZSMIS source.
   Purpose: the ZSMIS theme sets .nav-pills/.nav-link at 600 and headings at 700;
   KCC wants regular weight for menus and body chrome.
   RE-SYNC NOTE: if you copy a newer pro-theme.css from ZSMIS, re-append this
   block (kept standalone at live-config/kcc-weight-overrides.css).
   ========================================================================== */
.nav-sidebar .nav-link,
.nav-pills .nav-link            { font-weight: 400 !important; }
.nav-sidebar .nav-link.active   { font-weight: 600 !important; }  /* keep the current page distinct */
.main-header.navbar .nav-link   { font-weight: 400 !important; }
.btn                            { font-weight: 500 !important; }
label, .col-form-label          { font-weight: 500 !important; }
.card-title                     { font-weight: 600 !important; }
.table thead th                 { font-weight: 600 !important; }
.content-header h1,
.content-header .h1             { font-weight: 600 !important; }