/* ===========================================================================
   iStudent — design system layer
   ---------------------------------------------------------------------------
   Loaded AFTER style.css and rtl.css, so it wins on equal specificity by
   source order. Nothing here edits the 355 KB vendor theme; deleting the one
   <link> in header_script.blade.php reverts the entire redesign.

   What this replaces: a 2018 Bootstrap admin template whose sidebar is a
   bright #04a9f5 with a JPEG texture over it, whose header is the same
   saturated blue, and which carries 179 linear-gradient declarations. The
   direction here is flat and information-first — quiet chrome, hairline
   borders, and the data set in tabular numerals.

   Section index
     01  Tokens
     02  De-decoration (gradients, textures, glows, sluggish transitions)
     03  Sidebar
     04  Header
     05  Page canvas
     06  Cards
     07  Buttons
     08  Forms
     09  Tables + DataTables
     10  Badges, pills, alerts
     11  Pagination, modals, tabs, plugins
     12  Language dropdown contrast fix
     13  RTL corrections
   =========================================================================== */


/* ── 01  Tokens ─────────────────────────────────────────────────────────── */
:root {
  --is-ground:      #F3F5F8;
  --is-surface:     #FFFFFF;
  --is-surface-2:   #FAFBFC;

  --is-ink:         #111B2E;
  --is-ink-2:       #3D4B63;
  --is-muted:       #626C85;

  --is-line:        #DFE4EC;
  --is-line-strong: #C6CEDB;

  --is-accent:      #2A4D8F;
  --is-accent-hi:   #23417A;   /* hover/pressed */
  --is-accent-wash: #EAEFF8;

  /* Status is a separate family from the accent: a red must always mean a
     problem, never a brand flourish. */
  --is-pos:         #1F7A4D;  --is-pos-wash:  #E4F2EA;
  --is-warn:        #8F600E;  --is-warn-wash: #FBF1DE;
  --is-crit:        #B23B34;  --is-crit-wash: #FBEAE8;
  --is-info:        #0E6E75;  --is-info-wash: #E2F1F2;

  --is-sidebar:     #141D2E;
  --is-sidebar-ink: #AEBACE;
  --is-sidebar-cap: #5D6C88;
  --is-sidebar-line:#26324A;
  --is-sidebar-hover:#1B2538;
  --is-sidebar-on:  #1E2A40;

  --is-r-card: 6px;
  --is-r-ctl:  4px;

  --is-font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}


/* ── 02  De-decoration ──────────────────────────────────────────────────── */
/* The template ships a photographic texture on the sidebar and a coloured
   glow around it. Both are the loudest thing on screen and neither encodes
   information. */
.pcoded-navbar[class*="navbar-image"],
.pcoded-navbar.navbar-image-1, .pcoded-navbar.navbar-image-2,
.pcoded-navbar.navbar-image-3, .pcoded-navbar.navbar-image-4,
.pcoded-navbar.navbar-image-5 {
  background-image: none !important;
}

/* ── Dashboard stat tiles ───────────────────────────────────────────────
   Markup is `.card.bg-c-blue|.theme-bg|.theme-bg2` with `.text-white`
   children. Section 06 gives every .card the surface colour and outranks
   .bg-c-blue (equal specificity, later source) — which left the dashboard
   figures as white text on a white card.

   Restoring the flat colour block would just reinstate the look we are
   replacing, so these adopt the KPI treatment instead: quiet surface, muted
   micro-label, large tabular figure, and the 70px decorative glyph demoted to
   a watermark. No blade edits required — .text-white is re-inked in place.
   theme-bg / theme-bg2 appear on nothing but these tiles, so scoping to
   .card is safe. */
.card.bg-c-blue,
.card.theme-bg,
.card.theme-bg2,
.card[class*="bg-c-"] {
  background: var(--is-surface) !important;
  border: 1px solid var(--is-line);
}

.card.bg-c-blue h5.text-white,
.card.theme-bg h5.text-white,
.card.theme-bg2 h5.text-white,
.card[class*="bg-c-"] h5.text-white {
  color: var(--is-muted) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.card.bg-c-blue h2.text-white,
.card.theme-bg h2.text-white,
.card.theme-bg2 h2.text-white,
.card[class*="bg-c-"] h2.text-white {
  color: var(--is-ink) !important;
  font-family: var(--is-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 600 !important;   /* beats .f-w-300 */
  letter-spacing: -.03em;
}

.card.bg-c-blue i.text-white,
.card.theme-bg i.text-white,
.card.theme-bg2 i.text-white,
.card[class*="bg-c-"] i.text-white {
  color: var(--is-accent) !important;
  opacity: .10;
}

/* `transition: all .5s` on every card makes the whole UI feel laggy. */
.card { transition: box-shadow .15s ease, border-color .15s ease !important; }


/* ── 03  Sidebar ────────────────────────────────────────────────────────── */
.pcoded-navbar,
.pcoded-navbar.navbar-blue,
.pcoded-navbar[class*="navbar-"].navbar-blue {
  background: var(--is-sidebar);
  box-shadow: none;
  border-inline-end: 1px solid #0B111C;
}

/* The brand block keeps its own #04a9f5 via a two-class selector
   (.pcoded-navbar[class*="navbar-"].brand-blue .header-logo), so matching that
   specificity is required — a plain .pcoded-navbar .header-logo loses and the
   corner stays cyan. */
.pcoded-navbar .navbar-brand,
.pcoded-navbar .header-logo,
.pcoded-navbar.brand-blue .header-logo,
.pcoded-navbar[class*="navbar-"].brand-blue .header-logo,
.pcoded-navbar[class*="brand-"] .header-logo {
  background: transparent;
  border-bottom: 1px solid var(--is-sidebar-line);
}

/* Menu section captions ("Overview", "Operations", …) */
.pcoded-navbar .pcoded-inner-navbar > li.nav-item.pcoded-menu-caption,
.pcoded-navbar .pcoded-menu-caption {
  color: var(--is-sidebar-cap);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 18px 18px 7px;
}

.pcoded-navbar .pcoded-inner-navbar > li > a,
.pcoded-navbar .pcoded-inner-navbar li a {
  color: var(--is-sidebar-ink);
  font-size: 13px;
  font-weight: 500;
}

.pcoded-navbar .pcoded-inner-navbar > li > a:hover,
.pcoded-navbar .pcoded-inner-navbar li:hover > a {
  color: #FFFFFF;
  background: var(--is-sidebar-hover);
}

/* Active item: solid ground + an accent rail on the leading edge. The rail is
   inline-start so it follows the reading direction in Arabic automatically. */
.pcoded-navbar.active-blue .pcoded-inner-navbar > li.active > a,
.pcoded-navbar.active-blue .pcoded-inner-navbar > li.pcoded-trigger > a,
.pcoded-navbar .pcoded-inner-navbar > li.active > a,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a {
  background: var(--is-sidebar-on);
  color: #FFFFFF;
  font-weight: 600;
  position: relative;
}
.pcoded-navbar .pcoded-inner-navbar > li.active > a::after,
.pcoded-navbar .pcoded-inner-navbar > li.pcoded-trigger > a::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: #7CA0E0;
}

/* The template draws a dotted connector tree in submenus. */
.pcoded-navbar .pcoded-inner-navbar li .pcoded-submenu {
  background: #0F1725;
}
/* Vendor targets submenu links through li.pcoded-hasmenu, so the shorter
   selector loses and the items render too dim to read. */
.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li > a,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a {
  font-size: 12.5px;
  color: #A6B3C9;
}
.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li.active > a,
.pcoded-navbar .pcoded-inner-navbar .pcoded-submenu > li > a:hover,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li.active > a,
.pcoded-navbar .pcoded-inner-navbar li.pcoded-hasmenu .pcoded-submenu li > a:hover {
  color: #FFFFFF;
  background: transparent;
}

.pcoded-navbar .pcoded-inner-navbar li a .pcoded-micon { opacity: .8; }


/* ── 04  Header ─────────────────────────────────────────────────────────── */
/* Inverting the topbar from saturated blue to a light surface means every
   child that assumed white-on-blue has to be re-inked. */
.pcoded-header,
.pcoded-header.header-blue,
.pcoded-header[class*="header-"] {
  background: var(--is-surface);
  color: var(--is-ink-2);
  border-bottom: 1px solid var(--is-line);
  box-shadow: none;
}

.pcoded-header a,
.pcoded-header .dropdown-toggle,
.pcoded-header .dropdown .dropdown-toggle,
.pcoded-header a.full-screen,
.pcoded-header .top-icon a,
.pcoded-header .navbar-nav > li > a,
.pcoded-header .mobile-menu span {
  color: var(--is-ink-2);
}

.pcoded-header a:hover,
.pcoded-header .dropdown .dropdown-toggle:hover,
.pcoded-header .navbar-nav > li > a:hover {
  color: var(--is-accent);
}

.pcoded-header .topbar-title {
  color: var(--is-ink);
  font-size: 15px;
  font-weight: 640;
  letter-spacing: -.015em;
  margin: 0;
}

/* The hamburger is drawn with a span plus ::before/::after bars. */
.pcoded-header .mobile-menu span,
.pcoded-header .mobile-menu span:after,
.pcoded-header .mobile-menu span:before {
  background: var(--is-ink-2);
}

.pcoded-header .dropdown-menu {
  border: 1px solid var(--is-line);
  border-radius: var(--is-r-card);
  box-shadow: 0 12px 28px rgba(17, 27, 46, .10);
}
.pcoded-header .dropdown .notification .noti-head,
.pcoded-header .dropdown .profile-notification .pro-head {
  background: var(--is-surface-2);
  color: var(--is-ink);
  border-bottom: 1px solid var(--is-line);
}
.pcoded-header .dropdown .profile-notification .pro-head,
.pcoded-header .dropdown .profile-notification .pro-head .dud-logout {
  color: var(--is-ink);
}


/* ── 05  Page canvas ────────────────────────────────────────────────────── */
body { background: var(--is-ground); color: var(--is-ink-2); }
.pcoded-main-container, .pcoded-content { background: var(--is-ground); }

.page-header { background: transparent; box-shadow: none; }
.page-header h5, .page-header h4 {
  color: var(--is-ink);
  font-weight: 650;
  letter-spacing: -.015em;
}
.breadcrumb { background: transparent; padding-inline-start: 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--is-muted); font-size: 12.5px; }
.breadcrumb-item.active { color: var(--is-ink-2); }

h1,h2,h3,h4,h5,h6 { color: var(--is-ink); }
a { color: var(--is-accent); }
.text-primary { color: var(--is-accent) !important; }
.text-muted { color: var(--is-muted) !important; }


/* ── 06  Cards ──────────────────────────────────────────────────────────── */
.card {
  background: var(--is-surface);
  border: 1px solid var(--is-line);
  border-radius: var(--is-r-card);
  box-shadow: none;
  margin-bottom: 20px;
}
.card:hover { box-shadow: 0 2px 10px rgba(17, 27, 46, .05); }

.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--is-line);
  padding: 14px 18px;
}
.card .card-header h5,
.card .card-header h4 {
  font-size: 14px;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--is-ink);
  margin: 0;
}
.card .card-header .card-header-right { top: 10px; }
.card .card-block, .card .card-body { padding: 18px; }
.card .card-footer {
  background: var(--is-surface-2);
  border-top: 1px solid var(--is-line);
}

/* Figures inside cards read as data, not prose. */
.card h2, .card h3, .card .f-w-700 {
  font-variant-numeric: tabular-nums;
}


/* ── 07  Buttons ────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--is-r-ctl);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 15px;
  box-shadow: none !important;
  transition: background-color .13s ease, border-color .13s ease, color .13s ease;
}
.btn-sm { font-size: 12px; padding: 5px 11px; }

.btn-primary, .btn-primary:focus {
  background-color: var(--is-accent); border-color: var(--is-accent); color: #fff;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--is-accent-hi) !important; border-color: var(--is-accent-hi) !important;
}

.btn-success, .btn-success:focus {
  background-color: var(--is-pos); border-color: var(--is-pos); color: #fff;
}
.btn-success:hover, .btn-success:not(:disabled):not(.disabled):active {
  background-color: #19653F !important; border-color: #19653F !important;
}

.btn-info, .btn-info:focus {
  background-color: var(--is-info); border-color: var(--is-info); color: #fff;
}
.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active {
  background-color: #0B5A60 !important; border-color: #0B5A60 !important;
}

.btn-danger, .btn-danger:focus {
  background-color: var(--is-crit); border-color: var(--is-crit); color: #fff;
}
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active {
  background-color: #97302A !important; border-color: #97302A !important;
}

.btn-warning, .btn-warning:focus {
  background-color: var(--is-warn); border-color: var(--is-warn); color: #fff;
}
.btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active {
  background-color: #7D540C !important; border-color: #7D540C !important;
}

.btn-secondary, .btn-light, .btn-default {
  background-color: var(--is-surface);
  border-color: var(--is-line-strong);
  color: var(--is-ink-2);
}
.btn-secondary:hover, .btn-light:hover, .btn-default:hover {
  background-color: var(--is-surface-2) !important;
  border-color: var(--is-line-strong) !important;
  color: var(--is-ink) !important;
}

.btn-outline-primary { color: var(--is-accent); border-color: var(--is-accent); }
.btn-outline-primary:hover { background: var(--is-accent); border-color: var(--is-accent); color:#fff; }

/* Icon-only action buttons in table rows. */
.btn.btn-icon { width: 30px; height: 30px; padding: 0; line-height: 30px; }

.btn:focus-visible, .form-control:focus-visible, a:focus-visible {
  outline: 2px solid var(--is-accent);
  outline-offset: 2px;
}


/* ── 08  Forms ──────────────────────────────────────────────────────────── */
/* The template uses a filled grey box with only a bottom border — a dated
   "material" treatment that reads as disabled. Replaced with a bordered
   field on the surface colour. */
.form-control, .custom-select, .select2-container--default .select2-selection--single {
  background: var(--is-surface);
  border: 1px solid var(--is-line-strong);
  border-radius: var(--is-r-ctl);
  color: var(--is-ink);
  font-size: 13.5px;
  padding: 8px 11px;
  height: auto;
  box-shadow: none;
  transition: border-color .13s ease, box-shadow .13s ease;
}
.form-control:focus, .select2-container--default.select2-container--focus .select2-selection--single {
  background: var(--is-surface);
  border-color: var(--is-accent);
  box-shadow: 0 0 0 3px var(--is-accent-wash);
  color: var(--is-ink);
}
.form-control::placeholder { color: var(--is-muted); }
.form-control:disabled, .form-control[readonly] {
  background: var(--is-surface-2);
  color: var(--is-muted);
}

.form-label, .col-form-label, label {
  color: var(--is-ink-2);
  font-size: 12.5px;
  font-weight: 600;
}
/* Required-field asterisk. Vendor sets it to #3ea1e4 via `.form-group label
   span`, which reads as a link and only clears 2.83:1 on white — matching that
   specificity makes it a proper required-marker red. */
.form-label span, label span,
.form-group label span,
.form-group .form-label span { color: var(--is-crit); }
.form-group { margin-bottom: 16px; }

.invalid-feedback { color: var(--is-crit); font-size: 11.5px; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--is-crit); }
.was-validated .form-control:valid,   .form-control.is-valid   { border-color: var(--is-pos); }


/* ── 09  Tables + DataTables ────────────────────────────────────────────── */
.table { color: var(--is-ink-2); font-size: 13px; margin-bottom: 0; }
/* Vendor ships `.table thead th { background:#3ea1e4; color:#fff !important }`.
   Overriding only the background leaves white labels on a light header — i.e.
   an invisible header row. The colour needs !important to answer theirs. */
.table thead th {
  background: var(--is-surface-2);
  color: var(--is-muted) !important;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-top: 0;
  border-bottom: 1px solid var(--is-line);
  padding: 11px 14px;
  white-space: nowrap;
}
.table tbody td {
  border-top: 0;
  border-bottom: 1px solid var(--is-line);
  padding: 11px 14px;
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-hover tbody tr:hover,
.table tbody tr:hover { background: var(--is-accent-wash); }

/* Numerals line up in columns. */
.table td.text-end, .table td.text-right, .table th.text-end, .table th.text-right {
  font-variant-numeric: tabular-nums;
  font-family: var(--is-font-num);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--is-line-strong);
  border-radius: var(--is-r-ctl);
  padding: 6px 10px;
  background: var(--is-surface);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--is-muted); font-size: 12.5px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--is-accent) !important;
  border-color: var(--is-accent) !important;
  color: #fff !important;
}


/* ── 10  Badges, pills, alerts ──────────────────────────────────────────── */
.badge {
  font-weight: 650;
  font-size: 10.5px;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: 100px;
}
.badge-primary, .bg-primary { background-color: var(--is-accent) !important; color:#fff; }
.badge-success, .bg-success { background-color: var(--is-pos)  !important; color:#fff; }
.badge-danger,  .bg-danger  { background-color: var(--is-crit) !important; color:#fff; }
.badge-warning, .bg-warning { background-color: var(--is-warn) !important; color:#fff; }
.badge-info,    .bg-info    { background-color: var(--is-info) !important; color:#fff; }
.badge-light-primary { background: var(--is-accent-wash); color: var(--is-accent); }
.badge-light-success { background: var(--is-pos-wash);    color: var(--is-pos); }
.badge-light-danger  { background: var(--is-crit-wash);   color: var(--is-crit); }
.badge-light-warning { background: var(--is-warn-wash);   color: var(--is-warn); }

.alert {
  border: 1px solid var(--is-line);
  border-inline-start-width: 3px;
  border-radius: var(--is-r-ctl);
  font-size: 13.5px;
}
.alert-success { background: var(--is-pos-wash);  border-inline-start-color: var(--is-pos);  color:#14562F; }
.alert-danger  { background: var(--is-crit-wash); border-inline-start-color: var(--is-crit); color:#8A2C26; }
.alert-warning { background: var(--is-warn-wash); border-inline-start-color: var(--is-warn); color:#6E4B0B; }
.alert-info    { background: var(--is-info-wash); border-inline-start-color: var(--is-info); color:#0A4F55; }


/* ── 11  Pagination, modals, tabs, plugins ──────────────────────────────── */
.pagination .page-link {
  color: var(--is-ink-2);
  border-color: var(--is-line);
  font-size: 13px;
}
.pagination .page-item.active .page-link {
  background: var(--is-accent);
  border-color: var(--is-accent);
  color: #fff;
}

.modal-content { border: 0; border-radius: var(--is-r-card); }
.modal-header {
  background: var(--is-surface-2);
  border-bottom: 1px solid var(--is-line);
  padding: 15px 20px;
}
.modal-header .modal-title { font-size: 15px; font-weight: 640; color: var(--is-ink); }
.modal-footer { border-top: 1px solid var(--is-line); }

.nav-tabs { border-bottom: 1px solid var(--is-line); }
.nav-tabs .nav-link { color: var(--is-muted); font-size: 13.5px; font-weight: 600; border: 0; }
.nav-tabs .nav-link.active {
  color: var(--is-accent);
  background: transparent;
  border-bottom: 2px solid var(--is-accent);
}

/* Pill tabs (student / staff detail pages) keep Bootstrap's default #3ea1e4
   fill, which carries white text at only 2.83:1. */
.nav-pills .nav-link { color: var(--is-ink-2); font-size: 13px; font-weight: 600; border-radius: var(--is-r-ctl); }
.nav-pills .nav-link:hover { background: var(--is-accent-wash); color: var(--is-accent); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--is-accent) !important;
  color: #FFFFFF !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--is-accent);
}
.toast-success { background-color: var(--is-pos); }
.toast-error   { background-color: var(--is-crit); }
.toast-warning { background-color: var(--is-warn); }
.toast-info    { background-color: var(--is-info); }


/* ── 12  Language dropdown contrast fix ─────────────────────────────────── */
/* The vendor theme colours the active row's link white:
       .pcoded-header .dropdown .dropdown-menu li.active a { color:#fff }
   but the rule giving that row its background is
       .dropdown-menu > li.active { background: rgba(4,169,245,.1) }
   — a DIRECT-child selector. The language items are not direct children of
   .dropdown-menu; they sit inside ul.noti-body, so the background never
   applied while the white text did: 1.00:1, white on white.

   #2A4D8F carries white text at 8.1:1. */
.pcoded-header .dropdown .notification .noti-body li.notification.active {
  background: var(--is-accent);
}
.pcoded-header .dropdown .notification .noti-body li.notification.active > a.language {
  color: #fff !important;
  font-weight: 600;
}
.pcoded-header .dropdown .notification .noti-body li.notification:hover {
  background: var(--is-accent-wash);
}
.pcoded-header .dropdown .notification .noti-body li.notification:not(.active):hover > a.language {
  color: var(--is-ink) !important;
}
.pcoded-header .dropdown .notification .noti-body li.notification.active:hover {
  background: var(--is-accent-hi);
}


/* ── 13  Sidebar brand mark ─────────────────────────────────────────────── */
/* The uploaded logo is a PNG with a solid white background, which read as a
   stray white rectangle floating on the dark sidebar. Rather than require a
   re-cut asset, give it a deliberate rounded chip so the white is read as the
   mark's own plate. */
.pcoded-navbar .header-logo .b-brand img,
.pcoded-navbar .navbar-brand .b-brand img,
.pcoded-navbar .header-logo img {
  background: #FFFFFF;
  border-radius: 5px;
  padding: 4px 7px;
  max-height: 36px;
  width: auto;
}

/* ── 14  Auth screens (login, register, password reset) ─────────────────── */
/* The template centred a small card on an empty page and decorated it with
   two large teal/purple gradient circles — the single most dated thing in the
   product. Replaced with a split screen: identity on one side, the form on the
   other, nothing floating. */
.auth-wrapper .auth-bg { display: none !important; }

.auth-wrapper {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  background: var(--is-ground);
  align-items: stretch;
}

.is-auth-brand {
  background: var(--is-sidebar);
  color: #FFFFFF;
  padding: 56px 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
/* One quiet geometric wash instead of two loud blobs. */
.is-auth-brand::after {
  content: "";
  position: absolute;
  inset-inline-end: -140px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(124, 160, 224, .07);
}
.is-auth-brand > * { position: relative; z-index: 1; }

.is-auth-brand .is-auth-mark { display: flex; align-items: center; gap: 12px; }
.is-auth-brand .is-auth-mark img {
  background: #FFFFFF; border-radius: 6px; padding: 5px 9px; max-height: 44px; width: auto;
}
.is-auth-brand .is-auth-name { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }

/* The colour is load-bearing: section 05 sets h1-h6 to --is-ink for the app
   canvas, and without an explicit override here that dark ink lands on the
   dark brand panel at 1.06:1 — invisible. */
.is-auth-brand h1 {
  color: #FFFFFF;
  font-size: 34px;
  line-height: 1.24;
  font-weight: 640;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  max-width: 15ch;
  text-wrap: balance;
}
.is-auth-brand p {
  font-size: 15px;
  line-height: 1.65;
  color: #AEBACE;
  max-width: 44ch;
  margin: 0;
}
.is-auth-brand .is-auth-foot { font-size: 12.5px; color: #7E8CA6; }

/* Form side */
.auth-wrapper .auth-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  max-width: none;
  width: 100%;
}
.auth-wrapper .card {
  width: 100%;
  max-width: 400px;
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
}
.auth-wrapper .card .card-body { padding: 0; text-align: start !important; }
.auth-wrapper .card .card-body > .mb-4:first-child { display: none; }  /* stock lock glyph */
.auth-wrapper .card h3 {
  font-size: 24px !important;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--is-ink);
  margin-bottom: 6px;
}
.auth-wrapper .card h3 + * { margin-top: 0; }
.auth-wrapper .input-group { display: block; margin-bottom: 14px; }
.auth-wrapper .form-control { width: 100%; padding: 11px 13px; font-size: 14px; }
.auth-wrapper input[type="submit"].btn,
.auth-wrapper .btn-primary {
  width: 100%;
  padding: 11px 16px;
  font-size: 14px;
  margin-top: 4px;
}
.auth-wrapper .form-group.text-left { text-align: start !important; margin-bottom: 6px; }
.auth-wrapper p { font-size: 13.5px; }
.auth-wrapper a { font-weight: 600; }

@media (max-width: 900px) {
  .auth-wrapper { grid-template-columns: 1fr; }
  .is-auth-brand { padding: 32px 24px; gap: 20px; }
  .is-auth-brand h1 { font-size: 24px; max-width: none; }
  .is-auth-brand .is-auth-foot { display: none; }
}

/* ── 15  Record detail pages ────────────────────────────────────────────── */
/* Replaces the template's `<p><mark>Label:</mark> value</p><hr>` inside
   <fieldset class="scheduler-border"> — which produced a stack of ruled lines
   and a bare "Label:" wherever a value was blank. */
.is-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px 26px;
  margin: 0;
}
.is-dl.is-dl-1 { grid-template-columns: 1fr; }
.is-dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--is-line);
  min-width: 0;
}
.is-dl dt {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--is-muted);
  margin: 0;
  white-space: nowrap;
}
.is-dl dd {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--is-ink);
  margin: 0;
  text-align: end;
  min-width: 0;
  overflow-wrap: anywhere;
}

.is-dl-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--is-muted);
  margin-bottom: 8px;
}

/* Applicant summary */
.is-applicant-head { padding-bottom: 18px !important; }
.is-applicant-photo {
  width: 86px; height: 86px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--is-surface);
  box-shadow: 0 0 0 1px var(--is-line);
  margin-bottom: 12px;
}
.is-applicant-name { font-size: 16px; font-weight: 650; margin: 0 0 2px; }
.is-applicant-id {
  font-family: var(--is-font-num); font-size: 12px; color: var(--is-muted); margin: 0 0 10px;
}
.is-applicant-facts .list-group-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px; border-color: var(--is-line); font-size: 12.5px;
}
.is-applicant-facts .list-group-item span { color: var(--is-muted); white-space: nowrap; }
.is-applicant-facts .list-group-item span i { width: 15px; margin-inline-end: 8px; opacity: .75; }
.is-applicant-facts .list-group-item b {
  font-weight: 600; color: var(--is-ink); text-align: end; overflow-wrap: anywhere;
}
.is-signature img { max-height: 70px; }

/* Document tiles */
.is-docs .is-doc {
  border: 1px solid var(--is-line);
  border-radius: var(--is-r-ctl);
  padding: 14px;
  height: 100%;
  background: var(--is-surface-2);
}
.is-doc-empty { font-size: 12.5px; color: var(--is-muted); }
.is-doc-thumb img { border-radius: 3px; border: 1px solid var(--is-line); }

/* ── 16  Legacy detail markup ───────────────────────────────────────────── */
/* 225 of the 412 admin blades render record details as
     <fieldset class="row gx-2 scheduler-border">
       <legend>Section</legend>
       <p><mark class="text-primary">Label:</mark> value</p><hr/>
   — 489 <mark> labels and 452 <p>/<hr> pairs in total. Rewriting each page to
   the .is-dl markup is the right end state, but that is ~40 files; this makes
   every one of them legible today with no blade edits and no risk, and stays
   harmless on any page that is later converted. */
fieldset.scheduler-border {
  border: 1px solid var(--is-line);
  border-radius: var(--is-r-card);
  padding: 4px 16px 8px;
  margin: 0 0 16px;
  min-width: 0;
}
fieldset.scheduler-border > legend {
  float: none;
  width: auto;
  max-width: 100%;
  padding: 0;
  margin: 10px 0 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--is-muted);
  border: 0;
}
/* Each label/value pair becomes one aligned row rather than a paragraph. */
fieldset.scheduler-border > p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 9px 0;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--is-ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
fieldset.scheduler-border > p > mark,
fieldset.scheduler-border > p > mark.text-primary {
  color: var(--is-muted) !important;
  background: transparent !important;
  font-size: 12.5px;
  font-weight: 500;
  padding: 0;
  white-space: nowrap;
  flex: none;
}
fieldset.scheduler-border > hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--is-line);
  opacity: 1;
}
/* The construct always ends on a rule, which drew a line against the border. */
fieldset.scheduler-border > hr:last-child { display: none; }

/* Same treatment where the pattern appears outside a fieldset. */
.card-block > p > mark.text-primary,
.card-body > p > mark.text-primary {
  color: var(--is-muted) !important;
  background: transparent !important;
  font-weight: 500;
}

/* ── 17  Plugin widgets still on the old blue ───────────────────────────── */
/* A crawl of all 169 reachable admin pages found only three screens still
   below AA, all of them plugin chrome painted #3ea1e4 (white text = 2.83:1)
   from the plugin's own stylesheet rather than style.css. */

/* jQuery Steps — the student admission wizard. */
.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active,
.wizard > .steps a.current,
.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
  background: var(--is-accent) !important;
  color: #FFFFFF !important;
  border-radius: var(--is-r-ctl);
}
.wizard > .steps .done a,
.wizard > .steps .done a:hover {
  background: var(--is-accent-wash) !important;
  color: var(--is-accent) !important;
}
.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover {
  background: var(--is-surface-2) !important;
  color: var(--is-muted) !important;
}
/* The rule above forces white on every .actions link; a disabled step would
   inherit that onto a pale fill (1.58:1), so it needs its own pairing. */
.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
  background: var(--is-surface-2) !important;
  color: var(--is-muted) !important;
  border: 1px solid var(--is-line);
}

/* FullCalendar — the "today" button on the events calendar. */
.fc .fc-button-primary,
.fc-button.fc-state-default,
.fc-today-button {
  background: var(--is-accent) !important;
  border-color: var(--is-accent) !important;
  color: #FFFFFF !important;
}
.fc .fc-button-primary:disabled { opacity: .55; }

/* ── 18  Sidebar collapse ───────────────────────────────────────────────── */
/* The rail expands back to 240px on :hover by design
   (.pcoded-navbar.navbar-collapsed:hover{width:240px!important}). Because the
   toggle button sits inside the rail, clicking it leaves the pointer on the
   sidebar and it re-expands instantly — the toggle reads as broken. While the
   lock class is present (added on toggle, removed when the pointer leaves) the
   hover expansion is suppressed, so one click visibly collapses it. */
/* The template hides the toggle itself while collapsed (opacity:0 plus a
   rotateY that zeroes its box) and only reveals it on hover. Combined with the
   lock that would strand a user in the collapsed rail with nothing to click,
   so the toggle stays visible whenever the sidebar is collapsed. */
.pcoded-navbar.navbar-collapsed .mobile-menu,
.pcoded-navbar.navbar-collapsed.is-hover-locked:hover .mobile-menu {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
}

.pcoded-navbar.navbar-collapsed.is-hover-locked:hover { width: 80px !important; }
.pcoded-navbar.navbar-collapsed.is-hover-locked:hover .header-logo { width: 80px; }
.pcoded-navbar.navbar-collapsed.is-hover-locked:hover .pcoded-mtext,
.pcoded-navbar.navbar-collapsed.is-hover-locked:hover .pcoded-badge,
.pcoded-navbar.navbar-collapsed.is-hover-locked:hover .b-title { opacity: 0; visibility: hidden; }

/* ── 19  RTL corrections ────────────────────────────────────────────────── */
/* Most of this file uses logical properties (inset-inline-start,
   border-inline-start, padding-inline-*) so it mirrors without extra rules.
   These are the cases rtl.css or the vendor theme gets wrong. */
[dir="rtl"] .table thead th,
[dir="rtl"] .table tbody td { text-align: right; }

[dir="rtl"] .table td.text-end,
[dir="rtl"] .table td.text-right { text-align: left; }

/* Figures stay LTR even inside RTL text so 2,472,000 never reorders. */
[dir="rtl"] .table td.text-end,
[dir="rtl"] .table td.text-right,
[dir="rtl"] .card h2,
[dir="rtl"] .card h3 { direction: ltr; unicode-bidi: embed; }

[dir="rtl"] .breadcrumb { padding-inline-start: 0; }

/* The stat-tile watermark glyph is pinned with a physical `right: 20px`, so it
   lands on the wrong side once the layout mirrors. */
[dir="rtl"] .bitcoin-wallet i { right: auto; left: 20px; }

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .form-control { transition: none !important; }
}