@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --blue: #1352d3;
  --blue-dark: #0a3d9c;
  --blue-mid: #1a65f0;
  --blue-light: #eaf1fd;
  --ink: #111827;
  --muted: #6b7280;
  --subtle: #8a9bb5;
  --border: #e7eaf1;
  --bg: #f3f5fa;
  --card: #ffffff;
  --green: #067647;
  --green-bg: #ecfdf3;
  --red: #b42318;
  --red-bg: #fef3f2;
  --amber: #9a6200;
  --amber-bg: #fff3d6;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --shadow-md: 0 6px 16px rgba(16,24,40,.07), 0 2px 4px rgba(16,24,40,.04);
  --shadow-lg: 0 16px 32px rgba(16,24,40,.10);
  --t: .18s;
  --ease: cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; transition: color var(--t) var(--ease); }
a:hover { text-decoration: underline; }
.icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Two-tier header: a blue gradient "masthead" row (brand + signed-in user)
   on top, and a plain white sub-nav row underneath for the module links.
   Splitting them like this gives the nav row its own full-width lane to
   grow into as more modules get added, instead of competing for space
   with the brand/user area in a single row. */
.topbar-wrap { position: sticky; top: 0; z-index: 50; }

.topbar-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(120deg, #1a63dd 0%, #0c3f95 100%);
  padding: 11px 28px;
  box-shadow: 0 2px 10px rgba(9, 30, 74, .18);
}

.topbar-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topbar-brand-mark {
  width: 42px; height: 42px; flex-shrink: 0;
  object-fit: contain; background: transparent;
  filter: drop-shadow(0 3px 5px rgba(6,20,52,.5));
}
.topbar-brand-text { line-height: 1.2; }
.topbar-brand-name { font-weight: 800; color: #fff; font-size: 17px; letter-spacing: -.01em; line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.12); cursor: default; }
.topbar-brand-sub { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 2px; }
.topbar-brand-tagline { font-size: 10px; font-weight: 600; font-style: italic; letter-spacing: .01em; color: rgba(255,255,255,.5); margin-top: 1px; }

.topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.topbar-notification-trigger {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.topbar-notification-trigger:hover { text-decoration: none; }
.topbar-notification-trigger:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.38); transform: translateY(-1px); }
.topbar-notification-trigger .icon { width: 18px; height: 18px; }
.topbar-notification-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: #f04438; color: #fff; border: 2px solid #1455c7; font-size: 9.5px; font-weight: 900;
}
.topbar-user { display: flex; align-items: center; gap: 10px; }
.topbar-user-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18);
  color: #fff; font-weight: 800; font-size: 11.5px; letter-spacing: -.02em;
}
.topbar-user-info { line-height: 1.3; min-width: 0; }
.topbar-user-name { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.topbar-user-role { font-size: 11px; color: rgba(255,255,255,.68); font-weight: 600; }
.topbar-right .btn.light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.topbar-right .btn.light:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); box-shadow: none; transform: none; }
.topbar-right .btn.light .icon { width: 15px; height: 15px; }

/* Clicking the signed-in user's name/avatar opens a small dropdown
   (Admin View / User View + Log out) instead of separate buttons -- see
   layout_start()'s comment for why. Plain <details>/<summary>, same
   pattern the old bjmp_mis_system used -- no JS needed. */
.topbar-user-menu { position: relative; }
.topbar-user-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: var(--r-md); transition: background var(--t) var(--ease); }
.topbar-user-menu summary::-webkit-details-marker { display: none; }
.topbar-user-menu summary:hover { background: rgba(255,255,255,.1); }
.topbar-user-menu summary .icon { width: 15px; height: 15px; color: rgba(255,255,255,.75); transition: transform var(--t) var(--ease); flex-shrink: 0; }
.topbar-user-menu[open] summary .icon { transform: rotate(180deg); }
.topbar-user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 190px; padding: 6px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
}
.topbar-user-dropdown a { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-weight: 700; font-size: 13.5px; }
.topbar-user-dropdown a:hover { background: var(--bg); text-decoration: none; }
.topbar-user-dropdown a .icon { width: 16px; height: 16px; color: var(--muted); }
.topbar-user-dropdown a.danger { color: var(--red); }
.topbar-user-dropdown a.danger .icon { color: var(--red); }

.topbar-subnav {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  background: var(--card); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 0 28px;
}
.topbar-subnav a {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 14px; margin: 0 2px;
  color: var(--muted); font-weight: 600; font-size: 13.5px;
  border-bottom: 2px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.topbar-subnav a .icon { width: 16px; height: 16px; }
.topbar-subnav a:hover { color: var(--ink); text-decoration: none; }
.topbar-subnav a.active { color: var(--blue-dark); border-bottom-color: var(--blue); }

@media (max-width: 880px) {
  .topbar-primary { padding: 9px 16px; }
  .topbar-subnav { justify-content: flex-start; padding: 0 10px; overflow-x: auto; }
  .topbar-brand-sub { display: none; }
  .topbar-brand-tagline { display: none; }
  .topbar-user-info { display: none; }
  .topbar-right .btn.light span { display: none; }
}

.page { max-width: 1280px; margin: 0 auto; padding: 32px 24px 60px; }
/* Opt-out for pages with a genuinely wide table (e.g. the Leave Credits
   ledger) -- matches the old bjmp_mis_system's leave_credits_detail.php,
   which never capped its width either. See layout_start()'s $wide param. */
.page.page-wide { max-width: none; }
.page h1 { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.page p.subtitle { margin: 0 0 26px; color: var(--muted); font-size: 14px; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 20px;
}

/* Page-level actions as their own small tiles — each one a distinct
   card with a colour-coded icon, instead of bare buttons floating on the
   page background. The whole tile is clickable; the border/shadow lifts
   and turns blue on hover so it's obvious it's interactive. */
.tile-group { display: flex; gap: 14px; flex-wrap: wrap; }

/* Page title + its action tiles, sharing one row when there's room. The
   title gets a guaranteed comfortable minimum before anything shrinks, so
   the subtitle never gets squeezed into cramped, choppy line-wraps — past
   that point the whole row stacks instead of fighting for space. */
.page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.page-header-title { flex: 1 1 340px; min-width: 260px; }
.page-header-row .tile-group { flex: 0 0 auto; }
@media (max-width: 900px) {
  .page-header-row { flex-direction: column; align-items: stretch; }
  .page-header-row .tile-group { width: 100%; }
  .page-header-row .tile-action { max-width: none; }
}

/* Toolbar row inside the roster card: filter fields on the left, the
   Download Masterlist tile pinned to the right. Wraps to its own line
   under the filters on narrow screens. */
.toolbar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar-row .toolbar { margin-bottom: 0; flex: 1 1 420px; }
.tile-action.toolbar-row-tile { flex: 0 0 auto; align-self: center; min-width: 0; max-width: none; }
.tile-action.no-caption { align-items: center; padding: 12px 18px; }
.tile-action.no-caption h4 { margin: 0; }
.tile-action {
  display: flex; align-items: flex-start; gap: 12px;
  flex: 1 1 230px; min-width: 220px; max-width: 300px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 15px 17px; box-shadow: var(--shadow-sm); color: inherit;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.tile-action:hover { background: var(--blue-light); border-color: var(--blue); box-shadow: 0 6px 16px rgba(19,82,211,.14); transform: translateY(-2px); text-decoration: none; }
.tile-action-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-md); }
.tile-action-icon .icon { width: 19px; height: 19px; }
.tile-action-icon.accent-blue { background: var(--blue-light); color: var(--blue-dark); }
.tile-action-icon.accent-green { background: var(--green-bg); color: var(--green); }
.tile-action h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.tile-action h4.accent-blue-text { color: var(--blue-dark); }
.tile-action h4.accent-green-text { color: var(--green); }
.tile-action p { margin: 0; font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.5; }
.roster-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 14px;
  margin: 22px 0 20px;
}
.roster-action-grid .tile-action {
  max-width: none;
  min-width: 0;
  min-height: 86px;
}
.request-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.request-hub-card {
  max-width: none;
  min-width: 0;
  min-height: 124px;
  align-items: flex-start;
}
.request-empty-state {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px dashed #cbd6e8;
  border-radius: var(--r-lg);
  background: #fafcff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* Redesigned per Carl, 2026-08-20 ("gandahan nating lahat po ng mga success
   indicator... dapat nasa gitna") -- app-wide (his call, asked via
   AskUserQuestion since this shared class touches ~18 pages): centered
   content with a type icon, softer shadow, a touch more padding, instead of
   the old plain left-aligned text box. Icons are inline SVG data-URIs (not
   layout_icon(), since that needs a PHP call per page -- this stays a pure
   CSS change, no markup edits needed across every page that already prints
   a bare `<div class="alert ...">$message</div>`).
   Scoped to `div.alert` (not the bare `.alert`) so personnel_roster.php's
   one `<a class="alert alert-warning">` pending-requests link -- which
   already defines its own flex/space-between "text ... Review ->" layout
   via inline style -- keeps its own layout instead of getting a stray
   centered icon shoved into it. */
.alert { padding: 14px 18px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 16px; font-weight: 600; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.alert-error { background: var(--red-bg); color: var(--red); border: 1px solid #fecdca; }
.alert-success { background: var(--green-bg); color: var(--green); border: 1px solid #abefc6; }
.alert-warning { background: var(--amber-bg); color: var(--amber); border: 1px solid #f1dca3; }
div.alert { display: flex; align-items: center; justify-content: center; gap: 9px; text-align: center; }
div.alert::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; }
div.alert-success::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067647' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='M22 4 12 14.01l-3-3'/%3E%3C/svg%3E"); }
div.alert-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); }
div.alert-warning::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a6200' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, #1a63dd 0%, #0e4bc0 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(19,82,211,.2);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.btn .icon { width: 15px; height: 15px; }
.btn:hover { background: linear-gradient(135deg, #1a5bc9 0%, #0a3d9c 100%); text-decoration: none; box-shadow: 0 6px 14px rgba(19,82,211,.28); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.light { background: #fff; color: var(--ink); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn.light:hover { background: #f7f9fc; border-color: #c9d5e8; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn.light:active { transform: translateY(0); }
.btn.light .icon { color: var(--blue-dark); }

.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(19,82,211,.1); }
.input:disabled { background: #f7f8fa; color: var(--muted); }
label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; letter-spacing: .01em; }
.field { margin-bottom: 15px; }
.field small.hint { display: block; margin-top: 5px; color: var(--muted); font-size: 11.5px; font-weight: 500; line-height: 1.5; }

.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 20px; align-items: start; }
.form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* Each logical group of fields (Account, Personal Information, ...) gets its
   own subtly-shaded panel so a long form reads as clearly separated
   sections at a glance, instead of one continuous scroll of fields. */
.form-section { background: #fafbfd; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px 18px; margin-bottom: 14px; }
.form-section:last-of-type { margin-bottom: 22px; }
.form-section-title { margin: 0 0 14px; font-size: 11px; font-weight: 800; color: var(--blue-dark); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 7px; }
.form-section-title::before { content: ''; width: 4px; height: 12px; border-radius: 2px; background: var(--blue); display: inline-block; flex-shrink: 0; }

.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.table th { text-align: left; color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 11px 12px; border-bottom: 2px solid var(--border); background: #fafbfd; }
table.table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.table tr:last-child td { border-bottom: none; }
table.table tr:hover td { background: #f8fafd; }
table.table th:has(input[type="checkbox"]),
table.table td:has(input[type="checkbox"]) { text-align: center; vertical-align: middle; }
table.table input[type="checkbox"],
.mrq-row-check,
.mrq-select-all,
.lra-row-check,
.lra-select-all,
.lca-check,
.ccr-row-check,
.ccr-select-all,
.rrq-row-check,
.rrq-select-all,
.srip-row-check,
.srip-select-all,
.srmq-row-check,
.srmq-select-all,
.srmh-row-check,
.srmh-select-all,
.srmr-history-check,
.srmr-person-check,
.srbm-person-check,
.nt-check,
.nt-select-all input,
input[data-promotion-check],
input[data-select-all-promotions],
input[data-movement-check],
input[data-select-all-movements] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1.5px solid #b7c6dc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
table.table input[type="checkbox"]::after,
.mrq-row-check::after,
.mrq-select-all::after,
.lra-row-check::after,
.lra-select-all::after,
.lca-check::after,
.ccr-row-check::after,
.ccr-select-all::after,
.rrq-row-check::after,
.rrq-select-all::after,
.srip-row-check::after,
.srip-select-all::after,
.srmq-row-check::after,
.srmq-select-all::after,
.srmh-row-check::after,
.srmh-select-all::after,
.srmr-history-check::after,
.srmr-person-check::after,
.srbm-person-check::after,
.nt-check::after,
.nt-select-all input::after,
input[data-promotion-check]::after,
input[data-select-all-promotions]::after,
input[data-movement-check]::after,
input[data-select-all-movements]::after {
    content: "";
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform var(--t) var(--ease);
}
table.table input[type="checkbox"]:checked,
.mrq-row-check:checked,
.mrq-select-all:checked,
.lra-row-check:checked,
.lra-select-all:checked,
.lca-check:checked,
.ccr-row-check:checked,
.ccr-select-all:checked,
.rrq-row-check:checked,
.rrq-select-all:checked,
.srip-row-check:checked,
.srip-select-all:checked,
.srmq-row-check:checked,
.srmq-select-all:checked,
.srmh-row-check:checked,
.srmh-select-all:checked,
.srmr-history-check:checked,
.srmr-person-check:checked,
.srbm-person-check:checked,
.nt-check:checked,
.nt-select-all input:checked,
input[data-promotion-check]:checked,
input[data-select-all-promotions]:checked,
input[data-movement-check]:checked,
input[data-select-all-movements]:checked {
    background: var(--blue);
    border-color: var(--blue);
}
table.table input[type="checkbox"]:checked::after,
.mrq-row-check:checked::after,
.mrq-select-all:checked::after,
.lra-row-check:checked::after,
.lra-select-all:checked::after,
.lca-check:checked::after,
.ccr-row-check:checked::after,
.ccr-select-all:checked::after,
.rrq-row-check:checked::after,
.rrq-select-all:checked::after,
.srip-row-check:checked::after,
.srip-select-all:checked::after,
.srmq-row-check:checked::after,
.srmq-select-all:checked::after,
.srmh-row-check:checked::after,
.srmh-select-all:checked::after,
.srmr-history-check:checked::after,
.srmr-person-check:checked::after,
.srbm-person-check:checked::after,
.nt-check:checked::after,
.nt-select-all input:checked::after,
input[data-promotion-check]:checked::after,
input[data-select-all-promotions]:checked::after,
input[data-movement-check]:checked::after,
input[data-select-all-movements]:checked::after { transform: rotate(45deg) scale(1); }
table.table input[type="checkbox"]:focus-visible,
.mrq-row-check:focus-visible,
.mrq-select-all:focus-visible,
.lra-row-check:focus-visible,
.lra-select-all:focus-visible,
.lca-check:focus-visible,
.ccr-row-check:focus-visible,
.ccr-select-all:focus-visible,
.rrq-row-check:focus-visible,
.rrq-select-all:focus-visible,
.srip-row-check:focus-visible,
.srip-select-all:focus-visible,
.srmq-row-check:focus-visible,
.srmq-select-all:focus-visible,
.srmh-row-check:focus-visible,
.srmh-select-all:focus-visible,
.srmr-history-check:focus-visible,
.srmr-person-check:focus-visible,
.srbm-person-check:focus-visible,
.nt-check:focus-visible,
.nt-select-all input:focus-visible,
input[data-promotion-check]:focus-visible,
input[data-select-all-promotions]:focus-visible,
input[data-movement-check]:focus-visible,
input[data-select-all-movements]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(19, 82, 211, .18);
}

/* Dark-header variant -- ledger-style tables (e.g. Leave Credits) where a
   solid navy header bar with white text reads as a formal transaction
   record, matching the old bjmp_mis_system's Leave ledger. Opt in with
   <table class="table table-dark-head">; the plain .table stays the
   default everywhere else. */
table.table.table-dark-head th { color: #fff; background: var(--blue-dark); border-bottom: none; }
table.table.table-dark-head tr:nth-child(even) td { background: #fafbfd; }
table.table.table-dark-head tr:hover td { background: var(--blue-light); }

.roster-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-light); color: var(--blue-dark); font-weight: 800; font-size: 12px; flex-shrink: 0; letter-spacing: -.02em; overflow: hidden; }
.roster-avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roster-name-row { display: flex; align-items: center; gap: 10px; }

/* Click-to-upload profile photo -- per Carl, 2026-08-20 ("gawan nating
   mag upload sila ng photo .. same sa BJMp_MIS po"), modeled after
   bjmp_mis_system/personal_information.php's photo circle: a hidden file
   input wrapped in a <label>, with a hover overlay (camera icon + "Change
   Photo") over the avatar. Reuses .roster-avatar's own sizing/circle/
   overflow -- this just adds the hover trigger chrome on top. */
.pn-photo-trigger { position: relative; display: block; cursor: pointer; border: 0; padding: 0; background: none; border-radius: 50%; }
.pn-photo-trigger input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pn-photo-trigger .roster-avatar { transition: filter .16s ease; }
.pn-photo-overlay {
  position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; background: rgba(12,38,90,.62); color: #fff;
  opacity: 0; transition: opacity .16s ease; pointer-events: none;
}
.pn-photo-overlay .icon { width: 16px; height: 16px; }
.pn-photo-overlay em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .01em; line-height: 1.1; text-align: center; }
.pn-photo-trigger:hover .pn-photo-overlay, .pn-photo-trigger:focus-within .pn-photo-overlay { opacity: 1; }
/* Bigger variant -- per Carl, 2026-08-20 ("ang liit naman po .. lakihan
   niyo nalang po yan" then "lakihan pa po"), My Profile's header photo
   circle specifically (120px, vs. the 52px used on
   personnel_profile.php/service_record.php/personnel_roster.php's own
   profile-header circles) -- scales the hover overlay's icon/text up to
   match instead of looking cramped inside the bigger circle. */
.pn-photo-trigger-lg .pn-photo-overlay .icon { width: 34px; height: 34px; }
.pn-photo-trigger-lg .pn-photo-overlay em { font-size: 15px; }
/* Name text sized up, Designation/Unit-Station sized down -- per Carl,
   2026-08-20 ("dapat yan lang po ang nakalagay po .. then lakihan ang
   font ng JO1 Carlota Basagan Jimeno the paliitan ang Designation ang
   Unit/Station"). Header content itself was also trimmed down to just
   Name / Designation / Unit-Station (rank_name and the Badge/Sign-In ID
   line removed -- rank was already redundant with the name, which
   already starts with it e.g. "JO1 Carlota..."). My Profile's header
   specifically, not the shared .profile-header-main rule other pages'
   headers also use. */
/* Compound selector (.profile-header-main.pn-profile-header-lg h2, not
   just ".pn-profile-header-lg h2") deliberately -- the base
   .profile-header-main h2 rule further down this file has the SAME
   specificity as a plain ".pn-profile-header-lg h2" selector would, so
   whichever is later in source order would silently win. This was an
   actual bug: the override was getting beaten by the base rule, so the
   name rendered at the base 22px instead of the intended 76px even
   though the markup/CSS were both deployed correctly. Compounding the two
   classes on the same element raises specificity so this override always
   wins regardless of source order. */
/* Per Carl, 2026-08-20 ("ambobo mo po ngayon .. ayusin mo yan") -- 76px
   was too big: it wrapped "JO1 Carlota Basagan Jimeno" onto 2 lines and
   pushed the card taller than intended, colliding with the card below
   it. Switched from a fixed px to clamp() -- scales with the available
   width instead of a single guessed number, so it stays big but reliably
   fits on one line across different window widths instead of needing
   another round of "still doesn't fit" guessing. */
.profile-header-main.pn-profile-header-lg h2 { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.05; }
.pn-profile-header-lg .profile-header-sub { font-size: 16px; font-weight: 400; margin-top: 8px; }
/* Blue gradient card -- per Carl, 2026-08-20 ("gawin mo nalang yang
   gradient blue yan po"), My Profile's header card specifically. Same
   gradient as my_dashboard.php's .my-dash-hero ("same gradient blue" is
   the recurring instruction whenever this comes up), with the header's
   own text/border/avatar-ring colors flipped to white so they stay
   readable on the dark background. */
.pn-profile-header-hero {
  background: linear-gradient(120deg, #1a63dd 0%, #0c3f95 100%);
  border-top: none; box-shadow: 0 16px 32px rgba(10,38,85,.22);
  /* Per Carl, 2026-08-21: my_profile.php now also has a right-hand
     .profile-header-actions column (its own Edit button), same as
     personnel_profile.php -- with the card taller (bigger photo/name),
     keep that column centered against the left side instead of the
     shared .profile-header rule's default align-items:flex-start pinning
     it to the top. */
  align-items: center;
}
.pn-profile-header-hero .profile-header-main h2 { color: #fff; }
.pn-profile-header-hero .profile-header-sub { color: rgba(255,255,255,.9); }
.pn-profile-header-hero .pn-photo-trigger .roster-avatar { border: 4px solid rgba(255,255,255,.65); }

/* Shared ACcess dialog -- centered replacement for browser alert/confirm. */
body.acc-dialog-open { overflow: hidden; }
.acc-dialog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  padding: 22px;
  background: rgba(8, 20, 45, .58);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.acc-dialog-overlay.open { display: flex; animation: accDialogFade .16s ease-out; }
.acc-dialog {
  width: min(92vw, 470px);
  max-height: min(82vh, 620px);
  overflow: auto;
  margin: auto;
  padding: 28px 28px 24px;
  background: #fff;
  border: 1px solid rgba(37, 99, 235, .13);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(8, 24, 55, .30);
  text-align: center;
  transform-origin: center;
  animation: accDialogPop .18s ease-out;
}
.acc-dialog-icon-wrap {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #eaf2ff;
  color: var(--blue-dark);
}
.acc-dialog-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}
.acc-dialog.is-danger .acc-dialog-icon-wrap { background: #fff0f0; color: #c62828; }
.acc-dialog.is-warning .acc-dialog-icon-wrap { background: #fff7e6; color: #b86b00; }
.acc-dialog.is-success .acc-dialog-icon-wrap { background: #eaf9f1; color: #14804a; }
.acc-dialog-title {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -.01em;
}
.acc-dialog-message {
  margin: 9px auto 0;
  max-width: 390px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}
.acc-dialog-input-wrap {
  display: none;
  margin-top: 18px;
  text-align: left;
}
.acc-dialog-input-label {
  display: block;
  margin-bottom: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
}
.acc-dialog-input {
  display: block;
  width: 100%;
  min-height: 96px;
  margin: 0;
  border: 1px solid #cfdced;
  border-radius: 12px;
  padding: 11px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  line-height: 1.45;
  text-align: left;
  resize: vertical;
}
.acc-dialog-input:focus { outline: 3px solid rgba(37, 99, 235, .13); border-color: var(--blue); }
.acc-dialog-input-error {
  display: none;
  margin-top: 7px;
  color: #b42318;
  font-size: 12px;
  font-weight: 800;
}
.acc-dialog-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.acc-dialog-actions .btn { min-width: 112px; min-height: 42px; justify-content: center; }
.acc-dialog-actions .btn.danger { background: #c62828; border-color: #c62828; color: #fff; }
.acc-dialog-actions .btn.danger:hover { background: #a91f1f; border-color: #a91f1f; }
@keyframes accDialogFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes accDialogPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 520px) {
  .acc-dialog-overlay { padding: 14px; }
  .acc-dialog { padding: 24px 18px 20px; border-radius: 17px; }
  .acc-dialog-actions { flex-direction: column-reverse; }
  .acc-dialog-actions .btn { width: 100%; }
}

.badge-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-pill.active { background: var(--green-bg); color: var(--green); }
.badge-pill.inactive { background: var(--red-bg); color: var(--red); }
.badge-pill.info { background: var(--blue-light); color: var(--blue-dark); }
.badge-pill.neutral { background: #eef0f4; color: var(--muted); }
.badge-pill.amber { background: var(--amber-bg); color: var(--amber); }

/* Personnel Roster edit view: editing a record replaces the list with a
   full-width form (see personnel_roster.php) so a 25+ field form across
   five sections has room to breathe instead of being squeezed into a
   narrow side panel. */
.text-link { font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; color: var(--blue); }
.text-link .icon { width: 15px; height: 15px; }
.text-link:hover { text-decoration: underline; }

.toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .field { margin-bottom: 0; min-width: 200px; }
.order-search-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(170px, .8fr) minmax(120px, .7fr) minmax(130px, .8fr) auto auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 0;
  width: 100%;
}
.order-search-toolbar .field { min-width: 0; }
.order-search-toolbar .btn { width: auto; min-width: 98px; min-height: 40px; padding-left: 18px; padding-right: 18px; }
@media (max-width: 980px) {
  .order-search-toolbar { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 560px) {
  .order-search-toolbar { grid-template-columns: 1fr; }
  .order-search-toolbar .btn { width: 100%; }
}

.roster-name-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.roster-name-link:hover { color: var(--blue); text-decoration: underline; }

.profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-top: 3px solid var(--blue); box-shadow: var(--shadow-md); }
.profile-header-main h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.profile-header-sub { margin: 5px 0 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.profile-header-meta { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.profile-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.profile-section-title { margin: 0 0 16px; font-size: 12.5px; font-weight: 800; color: var(--blue-dark); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 8px; }
.profile-section-title::before { content: ''; width: 4px; height: 14px; border-radius: 2px; background: var(--blue); display: inline-block; }

.profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px 22px; }
.profile-field label { margin-bottom: 4px; }
.profile-field span { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .profile-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-header { flex-direction: column; }
}

/* Service Record — a vertical timeline of every add/edit on file for one
   person, newest first. Each entry is its own card; the dot + connecting
   line down the left just gives it a chronological read at a glance. */
.sr-timeline { position: relative; padding-left: 2px; }
.sr-entry { display: flex; gap: 16px; position: relative; padding-bottom: 22px; }
.sr-entry::before {
  content: ''; position: absolute; left: 5px; top: 22px; bottom: 0; width: 2px;
  background: var(--border);
}
.sr-entry:last-child::before { display: none; }
.sr-entry-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
  background: var(--blue); box-shadow: 0 0 0 3px var(--blue-light);
}
.sr-entry-dot.create { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.sr-entry-body {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.sr-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sr-entry-title { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.sr-entry-date { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.sr-entry-actor { margin: 3px 0 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.sr-entry-nochange { margin: 0; font-size: 12.5px; color: var(--subtle); font-style: italic; }
.sr-changes { display: flex; flex-direction: column; gap: 6px; }
.sr-change-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; padding: 7px 10px; background: #fafbfd; border-radius: var(--r-sm);
}
.sr-change-field { font-weight: 700; color: var(--ink); min-width: 150px; flex-shrink: 0; }
.sr-change-value { color: var(--muted); word-break: break-word; }
.sr-change-value.sr-old { text-decoration: line-through; color: var(--subtle); }
.sr-change-value.sr-new { color: var(--blue-dark); font-weight: 700; }
.sr-change-arrow .icon { width: 13px; height: 13px; color: var(--subtle); flex-shrink: 0; }

.split-login-shell { display: grid; grid-template-columns: 58% 42%; min-height: 100vh; font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; }

.split-login-left { position: relative; overflow: hidden; background: linear-gradient(145deg, #175cc7 0%, #0e3b82 100%); color: #fff; padding: 26px 36px 34px; display: flex; flex-direction: column; justify-content: space-between; }
.split-login-left h1 { font-size: clamp(48px, 4.4vw, 72px); line-height: .99; font-weight: 900; letter-spacing: -.02em; margin: 0 0 28px; color: #fff; }

.split-login-right { background: #f4f7fa; display: flex; align-items: center; justify-content: center; padding: 36px 28px; }
.split-form-card { width: 100%; max-width: 530px; background: var(--card); border-radius: 30px; padding: 46px 40px 34px; box-shadow: 0 16px 40px rgba(10,22,40,.11); }
.split-form-card .brand { font-size: 15px; font-weight: 800; color: var(--blue); margin-bottom: 18px; }
.split-form-card h2 { margin: 0 0 8px; font-size: 40px; font-weight: 900; color: var(--ink); line-height: 1.1; letter-spacing: -.01em; }
.split-form-card p.subtitle { color: var(--muted); margin: 0 0 30px; font-size: 15px; line-height: 1.6; font-weight: 500; }

/* Header logo row + supporting brand copy on the login screen's left panel */
.split-brand-logos { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.split-brand-logos img { height: 58px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.split-left-content { position: relative; z-index: 2; max-width: 650px; margin: auto 0; padding: 24px 0; }
.split-left-kicker { font-size: 15px; font-weight: 800; letter-spacing: .16em; color: #fff; text-transform: uppercase; margin-bottom: 25px; }
.split-left-text { max-width: 610px; font-size: 18px; line-height: 1.85; color: rgba(255,255,255,.92); margin-top: 18px; font-weight: 500; }
.split-left-badges { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; }
.split-badge { padding: 7px 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.9); letter-spacing: .02em; backdrop-filter: blur(4px); }

/* Decorative circles behind the left panel content */
.split-left-decoration { position: absolute; border-radius: 50%; z-index: 1; }
.deco-circle-1 { width: 350px; height: 350px; background: rgba(255,255,255,.07); top: -110px; right: -70px; }
.deco-circle-2 { width: 160px; height: 160px; background: rgba(42,112,222,.28); bottom: 90px; left: -30px; }
.deco-circle-3 { width: 135px; height: 135px; background: rgba(255,255,255,.16); bottom: -10px; right: 90px; }

/* Form fields + button, scoped to the login/first-login screens only so the
   rest of the app (personnel forms, etc.) keeps its existing compact look. */
.split-login-shell .field { margin-bottom: 20px; }
.split-login-shell .field label { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; letter-spacing: .01em; }
.split-login-shell .input { min-height: 58px; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 18px; font-size: 15px; font-family: inherit; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.split-login-shell .input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(19,82,211,.12); }
.split-login-shell .btn { min-height: 52px; border-radius: var(--r-pill); font-size: 16px; font-weight: 800; box-shadow: 0 4px 14px rgba(19,82,211,.28); transition: all var(--t) var(--ease); }
.split-login-shell .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(19,82,211,.34); }

.password-field-wrap { position: relative; }
.split-login-shell .password-input { padding-right: 58px; }
.password-toggle {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #718096;
  padding: 0; border-radius: 50%; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.password-toggle:hover { background: #eef4ff; color: var(--blue-dark); }
.password-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(19,82,211,.14); }
.password-toggle-eye { display: inline-flex; align-items: center; justify-content: center; }
.password-toggle-eye svg { width: 19px; height: 19px; }
.password-eye-hide { display: none; }
.password-toggle[aria-pressed="true"] .password-eye-show { display: none; }
.password-toggle[aria-pressed="true"] .password-eye-hide { display: inline-flex; }

.login-signin-card { max-width: 500px; padding: 34px 38px 26px; }
.login-signin-card .brand { margin-bottom: 10px; }
.login-signin-card h2 { font-size: 37px; margin-bottom: 5px; }
.login-signin-card p.subtitle { margin-bottom: 20px; line-height: 1.45; }
.login-signin-card .field { margin-bottom: 15px; }
.login-signin-card .input { min-height: 54px; }
.login-signin-card .btn { min-height: 50px; margin-top: 2px; }

.login-field-label-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px;
}
.login-signin-card .login-field-label-row label { margin-bottom: 0; }
.login-forgot-inline { font-size: 11.5px; font-weight: 600; white-space: nowrap; }

.login-register-line {
  margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap;
  font-size: 13px; line-height: 1.45; color: var(--muted); font-weight: 600; text-align: center;
}
.login-register-line .text-link { font-weight: 800; }
.login-signin-card .split-form-footer { margin-top: 18px; }

.split-forgot-link { display: inline-block; margin: 16px 0 25px; font-size: 15px; font-weight: 700; }
.split-form-footer { margin-top: 28px; text-align: center; font-size: 12px; color: var(--subtle); font-weight: 500; }

@media (max-width: 860px) {
  .split-login-shell { grid-template-columns: 1fr; }
  .split-login-left { min-height: 45vh; padding: 28px 28px 36px; }
  .split-login-left h1 { font-size: 36px; }
  .split-login-right { padding: 28px 20px 36px; align-items: flex-start; }
}
@media (max-width: 600px) {
  .split-login-left { min-height: 40vh; padding: 22px 22px 28px; }
  .split-login-left h1 { font-size: 30px; }
  .split-left-text { font-size: 14px; }
  .split-form-card { padding: 26px 20px 22px; border-radius: 22px; }
  .login-signin-card { padding-top: 28px; padding-bottom: 22px; }
  .login-help-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .login-help-forgot { margin-left: 0; }
}

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.pager-controls { display: flex; align-items: center; gap: 8px; }
.pager-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.pager-btn .icon { width: 13px; height: 13px; }
.pager-btn:hover { background: var(--blue-light); border-color: #c3d7f8; color: var(--blue-dark); text-decoration: none; }
.pager-btn.disabled { color: var(--subtle); background: #fafbfd; cursor: not-allowed; opacity: .6; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stat-card {
  position: relative;
  padding: 22px 24px;
  border: 1px solid #cfe0fb;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #f8fbff 0%, #edf5ff 100%);
  box-shadow: 0 12px 28px rgba(13,71,161,.08);
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #1d6df2, #0b46a3);
}
.stat-card label { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #355d9c; margin-bottom: 10px; }
.stat-card .stat-value { font-size: 34px; font-weight: 900; color: var(--blue-dark); line-height: 1; }
.stat-card .stat-icon {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: rgba(19,82,211,.12);
  color: var(--blue-dark);
}
.stat-card .stat-icon .icon { width: 19px; height: 19px; }
.stat-card .stat-sub { margin: 7px 0 0; font-size: 11.5px; color: #526789; font-weight: 700; }
.stat-card.accent-blue { background: linear-gradient(135deg, #f8fbff 0%, #eaf2ff 100%); }
.stat-card.accent-blue-mid { background: linear-gradient(135deg, #f4f9ff 0%, #dcecff 100%); border-color: #bfd6fa; }
.stat-card.accent-blue-mid::before { background: linear-gradient(180deg, #2781ff, #1352d3); }
.stat-card.accent-blue-mid .stat-icon { background: rgba(26,101,240,.14); color: #1352d3; }
.stat-card.accent-blue-deep { background: linear-gradient(135deg, #eef6ff 0%, #d6e8ff 100%); border-color: #accbfd; }
.stat-card.accent-blue-deep::before { background: linear-gradient(180deg, #0f58d6, #072f80); }
.stat-card.accent-blue-deep .stat-icon { background: rgba(10,61,156,.14); color: #0a3d9c; }

.dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.dash-header h1 { margin: 0 0 4px; }
.dash-date { font-size: 12.5px; color: var(--subtle); font-weight: 600; margin-top: 6px; }

.admin-dash { max-width: 1180px; margin: 0 auto; }
.admin-hero {
  display: block;
  margin-bottom: 24px;
  padding: 34px;
  border: 1px solid rgba(147,197,253,.35);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 8%, rgba(125, 179, 255, .34), transparent 32%),
    linear-gradient(135deg, #1f67e8 0%, #1352c5 48%, #073b91 100%);
  box-shadow: 0 22px 46px rgba(10,61,156,.18);
  color: #fff;
}
.admin-hero-copy { display: flex; flex-direction: column; justify-content: center; min-height: 170px; }
.admin-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding-bottom: 7px;
  border-bottom: 3px solid #ffd21e;
  color: #ffd21e;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.admin-hero h1 {
  margin: 0 0 10px;
  max-width: 620px;
  color: #fff;
  font-size: 36px;
  line-height: 1.06;
  font-weight: 900;
}
.admin-hero p {
  margin: 0;
  max-width: 680px;
  color: rgba(255,255,255,.9);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 650;
}
.admin-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 18px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 800;
}
.admin-hero-meta .icon { width: 15px; height: 15px; }
.admin-overview-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.admin-stat-panel {
  display: none;
}
.admin-dash .admin-stat-card {
  position: relative;
  min-height: 112px;
  padding: 20px 64px 18px 20px;
  border: 1px solid #bad5ff;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #edf6ff 100%);
  box-shadow: 0 12px 24px rgba(10,61,156,.07);
  overflow: hidden;
}
.admin-dash .admin-stat-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #1d6df2, #0b46a3);
}
.admin-dash .admin-stat-card label {
  display: block;
  color: #355d9c;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.admin-dash .admin-stat-card .stat-value {
  margin-top: 7px;
  color: #07429f;
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}
.admin-dash .admin-stat-card .stat-sub {
  margin: 8px 0 0;
  color: #526789;
  font-size: 12px;
  font-weight: 700;
}
.admin-dash .admin-stat-card .stat-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #dbeafe;
  color: #0b46a3;
}
.admin-dash .admin-stat-card .stat-icon .icon { width: 18px; height: 18px; }

.admin-workspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.admin-panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-color: #cfe0fb;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f6faff 100%);
  box-shadow: 0 12px 28px rgba(10,61,156,.07);
}
.admin-panel::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #1d6df2, #0b46a3);
}
.admin-panel-head {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.admin-assignment-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 22px;
  align-items: center;
}
.admin-panel .section-label {
  margin: 0 0 7px;
  color: #0b46a3;
}
.admin-panel h2 {
  margin: 0;
  color: #001b45;
  font-size: 20px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: 0;
}
.admin-panel p {
  margin: 7px 0 0;
  color: #516886;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 650;
}
.admin-module-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
}
.admin-module-pills strong {
  grid-column: 1 / -1;
  color: #355d9c;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.admin-module-pills em {
  grid-column: 1 / -1;
  padding: 11px 12px;
  border: 1px dashed #bdd6ff;
  border-radius: 8px;
  background: #f8fbff;
  color: #526789;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 750;
}
.admin-module-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #d4e4fb;
  border-radius: 8px;
  background: #f8fbff;
  color: #173d73;
  font-size: 12.5px;
  font-weight: 850;
}
.admin-review-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.admin-review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d8e6fb;
  border-radius: 10px;
  background: #f8fbff;
  color: #173d73;
  font-size: 13px;
  font-weight: 800;
}
.admin-review-row strong {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: #0b46a3;
  font-size: 15px;
  font-weight: 900;
}
.admin-reminders {
  padding: 20px 22px;
}
.admin-reminder-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 16px;
}
.admin-reminder-list div {
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid #d8e6fb;
  border-radius: 10px;
  background: #f8fbff;
}
.admin-reminder-list strong {
  display: block;
  margin-bottom: 7px;
  color: #003f9f;
  font-size: 13px;
  font-weight: 900;
}
.admin-reminder-list span {
  display: block;
  color: #526789;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 650;
}

.section-label { font-size: 11.5px; font-weight: 900; color: var(--blue-dark); text-transform: uppercase; letter-spacing: .06em; margin: 30px 0 12px; }
.section-label:first-child { margin-top: 0; }

.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.admin-dash .action-grid { grid-template-columns: repeat(auto-fit, minmax(315px, 1fr)); }
.action-card { display: flex; gap: 16px; padding: 22px 24px; align-items: flex-start; border-color:#dbe7fb; transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.action-card, .action-card:hover { text-decoration: none; }
.action-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: #c9d9f7; }
.admin-dash .action-card {
  position: relative;
  min-height: 118px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 28px rgba(15, 59, 133, .07);
}
.admin-dash .action-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #1d6df2, #0b46a3);
}
.admin-dash .action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(10,61,156,.14);
  border-color: #9ec5fe;
}
.action-card:hover .text-link { text-decoration: underline; }
.action-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eaf2ff, #dbeafe); color: var(--blue-dark);
  box-shadow: inset 0 0 0 1px rgba(19,82,211,.08);
}
.action-icon .icon { width: 21px; height: 21px; }
.action-card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.action-card p { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.55; }
.action-card .text-link { font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.action-card .text-link .icon { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.action-card:hover .text-link .icon { transform: translateX(2px); }
@media (max-width: 980px) {
  .admin-hero { padding: 24px; }
  .admin-hero-copy { min-height: 0; }
  .admin-overview-strip { grid-template-columns: 1fr; }
  .admin-workspace-grid { grid-template-columns: 1fr; }
  .admin-assignment-panel { grid-template-columns: 1fr; }
  .admin-module-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-reminder-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .admin-hero { padding: 20px; border-radius: 14px; }
  .admin-hero h1 { font-size: 28px; }
  .admin-dash .action-grid { grid-template-columns: 1fr; }
}

/* Circular gradient icon badges -- scoped to my_dashboard.php's service
   cards only (per Carl, 2026-08-19: "gandahan lang mga icon", referencing
   bjmp_mis_system's user-side dashboard cards). Deliberately a separate
   class from .action-icon above so dashboard.php/leave_dashboard.php/
   personnel_masterlist.php/personnel_roster.php/leave_credits.php/
   requests.php -- which also use .action-icon -- are untouched. */
.dash-icon-badge {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 18px -8px rgba(10,38,85,.35);
}
.dash-icon-badge .icon { width: 24px; height: 24px; color: #fff; }
.dash-icon-badge.badge-blue { background: linear-gradient(135deg, #0c6bf0, #0442a9); }
.dash-icon-badge.badge-green { background: linear-gradient(135deg, #25c895, #008c5c); }
.dash-icon-badge.badge-orange { background: linear-gradient(135deg, #ffad27, #f07800); }
.dash-icon-badge.badge-purple { background: linear-gradient(135deg, #9b71ef, #6638c4); }
.dash-icon-badge.small { width: 38px; height: 38px; }
.dash-icon-badge.small .icon { width: 18px; height: 18px; }

/* ============================================================
   my_dashboard.php full hero + service-card redesign, mirroring
   bjmp_mis_system's user-side dashboard layout per Carl, 2026-08-19
   ("yung ganito ooh" + reference screenshots). Every class below is
   prefixed .my-dash- and used ONLY on my_dashboard.php -- none of
   these override .dash-header/.card/.action-card/.action-grid/
   .section-label, which dashboard.php and the other module pages
   still use unchanged.
   ============================================================ */
/* Hero values below (gradient stops, sizes, colors, the translucent-glass
   profile card) are lifted directly from bjmp_mis_system/dashboard.css's
   computed styles per Carl, 2026-08-19 ("tignan niyo po sa BJMP_MIS ..
   ganun talaga gusto ko po") -- not an approximation. */
.my-dash-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: center; gap: 40px;
  /* Per Carl, 2026-08-20: "yung kulay po na blue is e same niyo ang kulay
     sa header po yung gradient blue niya" -- matches .topbar-primary's
     exact gradient (same two stops/angle) instead of the old darker,
     3-stop navy gradient this hero used before. */
  background: linear-gradient(120deg, #1a63dd 0%, #0c3f95 100%);
  position: relative; overflow: hidden; border-radius: 18px; padding: 36px 40px; margin-bottom: 28px;
  box-shadow: 0 16px 32px rgba(10,38,85,.22);
}
.my-dash-hero::after { content: none; }
.my-dash-hero-copy, .my-dash-hero-overview { position: relative; z-index: 1; }
.my-dash-hero-eyebrow {
  display: inline-block; color: #f8bd17; font-size: 13px; font-weight: 900;
  letter-spacing: 0; margin-bottom: 12px; position: relative; padding-bottom: 8px;
}
.my-dash-hero-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; border-radius: 2px; background: #f8bd17; }
.my-dash-hero-copy { min-width: 0; max-width: 760px; }
/* text-wrap: balance -- per Carl, 2026-08-20 ("pwede ba yung basagan sa
   baba"), after seeing a long full name leave a lone short word (e.g.
   just "JIMENO!") stranded alone on its own line. Balancing spreads the
   heading's line breaks evenly instead of greedily filling line 1, so a
   long middle/last name like "Basagan" wraps down with the rest of the
   name instead of leaving an orphan word behind -- works for any name
   length, not just this one. Modern Chrome/Edge/Firefox/Safari support
   it; unsupported browsers just keep the previous (still correct)
   greedy wrap. */
.my-dash-hero-copy h1 { margin: 0 0 18px; color: #fff; font-size: clamp(34px, 3.5vw, 52px); font-weight: 900; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; }
.my-dash-hero-copy p { margin: 0; color: rgba(255,255,255,.94); font-size: 17px; max-width: 600px; line-height: 1.65; }
/* Replaced the old plain avatar/badge/"View" .my-dash-hero-profile card
   with a richer "Personnel Information Overview" panel, per Carl,
   2026-08-20 (reference mockup) -- explicitly keeping the hero's own
   background gradient unchanged ("yung kulay ganun pa din po"). */
.my-dash-hero-overview {
  width: 100%; max-width: 360px; justify-self: end;
  border: 1px solid rgba(255,255,255,.22); border-radius: 10px; padding: 14px 15px;
  box-shadow: 0 18px 34px rgba(0,26,78,.22); color: #fff;
}
.my-dash-hero-overview-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 9px; }
.my-dash-hero-overview-head strong { display: block; color: #f8bd17; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.my-dash-hero-overview-head span { display: block; color: rgba(255,255,255,.85); font-size: 11px; margin-top: 2px; line-height: 1.35; }
.my-dash-hero-overview-box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 9px; padding: 0 10px; margin-bottom: 9px; }
.my-dash-hero-overview-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.my-dash-hero-overview-row:last-child { border-bottom: none; }
.my-dash-hero-overview-row-icon {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.12); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.my-dash-hero-overview-row-icon .icon { width: 11px; height: 11px; color: #fff; }
/* Reverted per Carl, 2026-08-20 ("pangit po, ok na yung bababa ang
   services") -- the forced one-line label (nowrap + widened panel) tried
   right after this looked bad with real data ("September 14, 2026" /
   ADMIN-0001), so back to: label allowed to wrap to a 2nd line
   (min-width:0, no nowrap) when it needs to, panel back to 292px. Only
   the VALUE stays nowrap so the actual data (date/status/badge) never
   breaks mid-word -- that constraint was never in question, only the
   label-forced-one-line experiment was undone. */
.my-dash-hero-overview-row-label { flex: 1; min-width: 0; font-size: 11px; color: rgba(255,255,255,.9); }
.my-dash-hero-overview-row-value { flex-shrink: 0; white-space: nowrap; font-weight: 800; font-size: 11.5px; color: #fff; text-align: right; }
.my-dash-hero-overview-note { display: flex; align-items: center; gap: 6px; font-size: 10px; color: rgba(255,255,255,.75); margin-bottom: 9px; }
.my-dash-hero-overview-note .icon { width: 11px; height: 11px; flex-shrink: 0; }
.my-dash-hero-overview-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 33px;
  background: #fff; color: #075bd3; font-weight: 900; font-size: 12px; border-radius: 7px;
  transition: background var(--t) var(--ease);
}
.my-dash-hero-overview-btn:hover { background: #eaf1fd; text-decoration: none; }
.my-dash-hero-overview-btn .icon { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .my-dash-hero-copy h1 { font-size: 30px; }
  .my-dash-hero-copy p { font-size: 15px; }
}

.my-dash-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.my-dash-section-eyebrow { color: var(--blue-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; margin-bottom: 4px; }
.my-dash-section-head h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.my-dash-section-note { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.my-dash-section-note .icon { width: 15px; height: 15px; color: var(--subtle); }
.my-dash-card-block { margin-bottom: 26px; }

.my-dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.my-dash-service-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 244px; background: #fff; border: 1px solid var(--border);
  border-top: 3px solid var(--blue); border-radius: 10px; padding: 24px 20px 20px; box-shadow: var(--shadow-sm);
  color: inherit; transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.my-dash-service-card:hover { box-shadow: 0 12px 24px rgba(12,63,149,.18); transform: translateY(-2px); border-color: #8bb8ff; background: #f4f8ff; text-decoration: none; }
.my-dash-service-card:hover .dash-icon-badge { background: #fff; box-shadow: 0 8px 18px rgba(12,63,149,.16); }
.my-dash-service-card:hover .dash-icon-badge .icon { color: var(--blue); }
.my-dash-service-card:hover .dash-icon-badge { transform: translateY(-2px) scale(1.04); }
.my-dash-service-card .dash-icon-badge { transition: transform var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.my-dash-service-card.is-disabled { opacity: .6; cursor: default; }
.my-dash-service-card.is-disabled:hover { box-shadow: var(--shadow-sm); transform: none; }
.my-dash-service-card.is-disabled:hover .dash-icon-badge { transform: none; }
.my-dash-service-card h3 { margin: 2px 0 0; font-size: 15px; font-weight: 800; letter-spacing: 0; text-align: center; }
.my-dash-service-card p { margin: 0; max-width: 220px; font-size: 12.5px; color: var(--muted); line-height: 1.55; flex: 1; text-align: center; }
.my-dash-open { display: flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 5px; font-weight: 800; font-size: 12.5px; margin-top: 2px; color: var(--blue); }
.my-dash-open .icon { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.my-dash-service-card:hover .my-dash-open .icon { transform: translateX(2px); }
.my-dash-service-card.accent-blue { border-top-color: #0c6bf0; }
.my-dash-service-card.accent-blue .my-dash-open { color: #0c6bf0; }

.my-dash-wide-card {
  display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 18px 22px; box-shadow: var(--shadow-sm); flex-wrap: wrap;
  color: inherit; transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.my-dash-wide-card .dash-icon-badge.badge-purple { background: var(--blue); }
.my-dash-wide-card:hover { border-color: #8bb8ff; background: #f4f8ff; }
a.my-dash-wide-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.my-dash-wide-card:hover .dash-icon-badge { transform: rotate(-4deg) scale(1.05); }
a.my-dash-wide-card .my-dash-open { color: var(--blue); margin-left: auto; }
.my-dash-wide-card.is-disabled { opacity: .6; }
.my-dash-wide-card-body { flex: 1 1 260px; min-width: 200px; }
.my-dash-wide-card h3 { margin: 0 0 2px; font-size: 15px; font-weight: 800; }
.my-dash-wide-card p { margin: 0; font-size: 12.5px; color: var(--muted); }

/* Blue "featured" variant of .my-dash-wide-card -- per Carl, 2026-08-20
   ("gawing blue nalang yan po yung gradient na color po para makita
   agad .. then yung icon e match po gawing puti"), for the "Track your
   Certified Copy requests" link-out card on my_service_record.php
   specifically (added there when the old inline table was removed).
   Scoped to .is-featured only -- the plain white .my-dash-wide-card
   used elsewhere (e.g. my_dashboard.php's My Requests tile, which Carl
   already saw/approved as-is) is untouched. Icon badge goes white-on-
   blue-icon (inverted) so it still pops against the new blue fill,
   regardless of which .badge-* color class the span also carries. */
.my-dash-wide-card.is-featured { background: linear-gradient(120deg, #1a63dd 0%, #0c3f95 100%); border-color: transparent; color: #fff; }
.my-dash-wide-card.is-featured h3 { color: #fff; }
.my-dash-wide-card.is-featured p { color: rgba(255,255,255,.85); }
.my-dash-wide-card.is-featured .dash-icon-badge { background: #fff; }
.my-dash-wide-card.is-featured .dash-icon-badge .icon { color: #0c3f95; }
a.my-dash-wide-card.is-featured .my-dash-open { color: #fff; font-weight: 800; }

.my-dash-bottom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 26px; }
.my-dash-summary-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.my-dash-summary-head h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.my-dash-summary-card { border-left: 3px solid var(--blue); }
.my-dash-privacy-card { border-left: 3px solid var(--blue); }
.my-dash-summary-card dl { margin: 0; }
.my-dash-summary-card dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.my-dash-summary-card dl > div:last-child { border-bottom: none; padding-bottom: 0; }
.my-dash-summary-card dt { color: var(--muted); font-weight: 600; }
.my-dash-summary-card dd { margin: 0; font-weight: 800; color: var(--ink); text-align: right; }
.my-dash-privacy-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.65; }
.my-dash-about { margin-top: 26px; padding: 20px; border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); }
.my-dash-about-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.my-dash-about-head h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.my-dash-reminders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.my-dash-reminder { display: flex; align-items: flex-start; gap: 11px; min-height: 76px; padding: 13px; border: 1px solid #d9e5f5; border-radius: 8px; background: #f8fbff; }
.my-dash-reminder strong { display: block; margin: 2px 0 4px; color: var(--ink); font-size: 13px; }
.my-dash-reminder p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.my-dash-reminder .dash-icon-badge { width: 34px; height: 34px; box-shadow: none; }
.my-dash-reminder .dash-icon-badge .icon { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .my-dash-hero { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
  .my-dash-hero-overview { width: 100%; }
  .my-dash-hero-overview { max-width: none; justify-self: stretch; }
}
@media (max-width: 980px) {
  .my-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .my-dash-grid { grid-template-columns: 1fr; }
  .my-dash-service-card { min-height: 210px; }
  .my-dash-reminders { grid-template-columns: 1fr; }
}

/* Refined dashboard support panels: calm, balanced, and easier to scan. */
.my-dash-bottom-grid { align-items: stretch; }
.my-dash-summary-card,
.my-dash-privacy-card { min-height: 172px; padding: 20px; border-top: 3px solid var(--blue); border-left: 1px solid var(--border); }
.my-dash-summary-head { margin-bottom: 16px; }
.my-dash-summary-head h2 { font-size: 16px; }
.my-dash-summary-card dl > div { padding: 11px 0; }
.my-dash-summary-card dd { color: #0b3f96; }
.my-dash-privacy-card { background: linear-gradient(135deg, #ffffff 0%, #f6faff 100%); }
.my-dash-privacy-card p { max-width: 680px; line-height: 1.6; }
.my-dash-privacy-points { display: grid; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #dbe7f5; }
.my-dash-privacy-points span { display: flex; align-items: center; gap: 7px; color: #526789; font-size: 12px; font-weight: 750; }
.my-dash-privacy-points .icon { width: 14px; height: 14px; color: #0b57d0; flex-shrink: 0; }
.my-dash-about { padding: 22px; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.my-dash-about-head { padding-bottom: 15px; border-bottom: 1px solid #dbe7f5; }
.my-dash-about-head h2 { font-size: 21px; }
.my-dash-reminder { min-height: 82px; align-items: center; padding: 14px 15px; background: #fff; box-shadow: 0 4px 12px rgba(16, 61, 125, .06); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.my-dash-reminder:hover { border-color: #8fb8f3; box-shadow: 0 8px 18px rgba(16, 61, 125, .11); transform: translateY(-2px); }
.my-dash-reminder strong { font-size: 14px; }
.my-dash-reminder p { font-size: 12px; }

/* User dashboard workspace: practical reminders and live request status. */
.my-dash-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr);
  gap: 16px;
  margin-top: 26px;
}
.my-dash-workspace-main {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.my-dash-workspace-main h2 { margin: 0 0 5px; font-size: 21px; letter-spacing: 0; }
.my-dash-workspace-lead { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.my-dash-action-list { display: grid; gap: 9px; margin-top: 18px; }
.my-dash-action-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid #d9e5f5;
  border-radius: 8px;
  background: #f8fbff;
}
.my-dash-action-row strong { display: block; color: var(--ink); font-size: 13px; }
.my-dash-action-row p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.my-dash-action-row .dash-icon-badge { width: 34px; height: 34px; flex: 0 0 34px; box-shadow: none; }
.my-dash-action-row .dash-icon-badge .icon { width: 16px; height: 16px; }
.my-dash-workspace-side { display: grid; gap: 16px; min-width: 0; }
.my-dash-side-card {
  min-height: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.my-dash-side-card.is-blue {
  border-color: transparent;
  background: linear-gradient(135deg, #176de8 0%, #0b3f96 100%);
  color: #fff;
}
.my-dash-side-card > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eaf2ff;
  color: var(--blue);
}
.my-dash-side-card.is-blue > span { background: rgba(255,255,255,.16); color: #fff; }
.my-dash-side-card > span .icon { width: 17px; height: 17px; }
.my-dash-side-card strong { display: block; margin-top: 12px; color: var(--ink); font-size: 28px; line-height: 1; }
.my-dash-side-card.is-blue strong { color: #fff; }
.my-dash-side-card.is-privacy strong { font-size: 17px; line-height: 1.2; }
.my-dash-side-card p { margin: 5px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.my-dash-side-card.is-blue p { color: rgba(255,255,255,.86); }
.my-dash-side-card a { display: inline-flex; align-items: center; gap: 5px; color: var(--blue); font-size: 12px; font-weight: 800; }
.my-dash-side-card.is-blue a { color: #fff; }
.my-dash-side-card a .icon { width: 14px; height: 14px; }
.my-dash-guidance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.my-dash-guidance-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.my-dash-guidance-card:hover { border-color: #8fb8f3; box-shadow: 0 8px 18px rgba(16,61,125,.11); transform: translateY(-2px); }
.my-dash-guidance-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; background: #eaf2ff; color: var(--blue); }
.my-dash-guidance-icon .icon { width: 17px; height: 17px; }
.my-dash-guidance-card h3 { margin: 1px 0 4px; font-size: 13px; }
.my-dash-guidance-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 900px) { .my-dash-workspace { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .my-dash-guidance { grid-template-columns: 1fr; } }

.preview-stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; margin: 16px 0; }
.preview-stat { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.preview-stat span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.preview-stat strong { display: block; margin-top: 4px; font-size: 22px; }
.preview-stat.warn { border-color: #f1cf83; background: #fff9eb; }
.preview-stat.danger { border-color: #fecdca; background: var(--red-bg); }
@media (max-width: 800px) { .preview-stats { grid-template-columns: repeat(2, 1fr); } }

.preview-status { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.preview-status.update { background: #fff3d6; color: #9a6200; }
.preview-status.create { background: var(--green-bg); color: var(--green); }
.preview-status.unchanged { background: #eef2f9; color: var(--muted); }
.preview-status.possible_duplicate, .preview-status.badge_conflict { background: var(--red-bg); color: var(--red); }
.preview-status.matched { background: var(--green-bg); color: var(--green); }
.preview-status.manual_review { background: #fff3d6; color: #9a6200; }
.preview-status.unmatched { background: var(--red-bg); color: var(--red); }

.change-list { display: grid; gap: 6px; margin: 8px 0 0; }
.change-item { display: grid; grid-template-columns: 160px minmax(0,1fr) 20px minmax(0,1fr); gap: 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12px; }
.change-item span { color: var(--muted); }
.change-arrow { text-align: center; color: var(--blue); font-weight: 900; }
@media (max-width: 800px) { .change-item { grid-template-columns: 1fr; } }

/* manage_admins.php -- role description text + Module/Task grant checkboxes. */
.aa-role-desc { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; background: var(--blue-light); border-radius: var(--r-md); padding: 12px 14px; }
.aa-module-block { padding: 16px 0; border-top: 1px solid var(--border); }
.aa-module-block:first-of-type { border-top: none; padding-top: 4px; }
.aa-module-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; margin-bottom: 10px; }
.aa-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.aa-task-check { display: flex; align-items: center; gap: 8px; min-height: 42px; font-size: 13px; color: var(--ink); cursor: pointer; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.aa-task-check:hover { background: var(--bg); border-color: #cbd5e1; }
.aa-task-check input { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--blue); }
.aa-task-check .badge-pill { margin-left: auto; white-space: nowrap; }
.aa-hint-alert.alert {
  justify-content: flex-start;
  text-align: left;
  line-height: 1.45;
  gap: 12px;
}
.aa-hint-alert-text {
  display: block;
  min-width: 0;
}
.aa-task-check-overall { background: var(--blue-light); border-color: #c7dcff; font-weight: 800; }
.aa-task-check-overall:hover { background: var(--blue-light); }

.preview-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* body.msr-body -- soft page-background gradient for My Service Record +
   its Recent Service History page, lifted directly from bjmp_mis_system/
   dashboard.css's own body.dash-body background. Per Carl, 2026-08-20:
   "gandahan mo color combination please, may mailalagay ka ba na
   background?" -- scoped to these two pages only, see lib/layout.php's
   comment on the <body class="msr-body"> line for why. */
body.msr-body { background: linear-gradient(180deg, #eef5fd 0%, #f7fbff 45%, #eef5fb 100%); }

/* my_service_record.php -- Request Certified Copy hero + How to Request +
   Service Record Overview. Redesigned round 3 per Carl, 2026-08-20:
   "tignan mo yung visual ng BJMP_MIS koyahin mo" -- these values are
   lifted directly from bjmp_mis_system/dashboard.css's computed styles
   (its .dash-hero/.hero-copy gold-eyebrow hero, and its .service-icon
   circular gradient-ring-glow badge), same "lift the recipe, not the
   markup" approach my_dashboard.php's own .my-dash- block above already
   used for this exact reason. Prefixed .msr- and used ONLY on this page and
   service_record_history.php (see below). my_service_record.php itself
   renders at the normal 1280px page cap (layout_start's default, no `wide`
   flag) -- per Carl, 2026-08-20, stretching the hero/how-to/overview edge-
   to-edge on a wide/zoomed-out window made them look thin and empty
   ("sisira"). The Recent Service History table (12 columns, genuinely
   needs full width) was split out to its own page-wide page instead of
   forcing this whole page wide just for its sake -- see
   service_record_history.php, opened in its own tab from a button here. */
/* Per Carl, 2026-08-20: "dapat mas maliit ang width ng box ng blue kaysa sa
   how to request" -- flipped from 1.15fr/1fr (hero wider) to 0.85fr/1.15fr
   (hero narrower than How to Request). */
.msr-top-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 20px; margin-bottom: 24px; align-items: stretch; }
@media (max-width: 900px) { .msr-top-grid { grid-template-columns: 1fr; } }

/* Round 5, per Carl's boss, 2026-08-20: "sabayan niyo na lang yung kulay ng
   logo namin" -- #1659c9 (blue) and #dbba3d (gold) below are sampled
   directly off the actual BJMPRO-IX seal Carl sent (dominant-color read of
   the seal artwork), replacing the slightly-off blue/gold this page had
   been using since round 3 (which was eyeballed off bjmp_mis_system's CSS,
   not the seal itself). Same two-color, gradient-forward approach as
   round 4 -- just recalibrated to the real logo hex values. */
/* Per Carl, 2026-08-20: "e-same mo na ang kulay ng blue gradient sa header
   na kulay blue" -- matches .topbar-primary's exact gradient (same two
   colors, same 120deg angle) instead of the seal-derived navy-to-blue used
   before, so the hero and the masthead read as the same blue. */
.msr-hero {
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  background: linear-gradient(120deg, #1a63dd 0%, #0c3f95 100%);
  border-radius: 16px; padding: 30px; box-shadow: 0 16px 32px rgba(10,38,85,.22);
}
.msr-hero-eyebrow {
  display: inline-block; color: #dbba3d; font-size: 13px; font-weight: 900;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 12px; position: relative; padding-bottom: 9px;
}
.msr-hero-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; border-radius: 2px; background: #dbba3d; }
.msr-hero h2 { margin: 0 0 8px; color: #fff; font-size: 26px; font-weight: 900; line-height: 1.12; letter-spacing: -.01em; }
.msr-hero p { margin: 0; color: rgba(255,255,255,.96); font-size: 14.5px; line-height: 1.55; max-width: 94%; }
.msr-hero-actions { display: flex; flex-direction: column; gap: 10px; }
.msr-hero-actions .btn { justify-content: center; width: 100%; min-height: 44px; border-radius: 8px; font-size: 14px; font-weight: 900; }
.msr-hero-actions .btn.primary { background: #fff; color: #1659c9; box-shadow: none; }
.msr-hero-actions .btn.primary:hover { background: #eaf1fd; transform: translateY(-1px); }
.msr-hero-actions .btn.ghost {
  background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.34); box-shadow: none;
}
.msr-hero-actions .btn.ghost:hover { background: rgba(255,255,255,.19); border-color: rgba(255,255,255,.58); transform: none; }
.msr-hero-actions .btn.is-disabled { opacity: .55; cursor: not-allowed; }
.msr-hero-actions .btn.is-disabled:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); transform: none; }

.msr-howto { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px; box-shadow: 0 14px 34px rgba(17,46,92,.11); display: flex; flex-direction: column; }
.msr-howto h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; letter-spacing: -.01em; }
.msr-howto h3 .icon { width: 17px; height: 17px; color: #1659c9; }
.msr-howto > p { margin: 0 0 22px; font-size: 12.5px; color: var(--muted); }
/* Redesign per Carl's 2026-08-20 spec: squircle icon box, number badge
   overlapping bottom-center, dotted ARROW connectors (with arrowhead)
   centered on the icon boxes. Follow-up, same day: "alisin mo yung text sa
   taas ng icon then yung sa baba na text" -- dropped the title-above-box
   line from that first pass; label now lives ONLY below the box again
   (single two-line label, like the pre-title version), so the arrow's
   vertical offset is now keyed to .msr-step's own top padding + half the
   icon box instead of a title's height. Connectors are real grid columns
   (not one long pseudo-element line) so each arrowhead lands exactly
   between its two boxes regardless of column width. */
.msr-steps { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; align-items: start; }
.msr-step { text-align: center; padding: 16px 6px 4px; }
.msr-step-icon-wrap { position: relative; z-index: 1; width: 52px; margin: 0 auto 10px; display: flex; flex-direction: column; align-items: center; }
.msr-step-icon {
  position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%); border: 1px solid #e4ecf8;
  box-shadow: 0 8px 18px rgba(22,89,201,.12);
}
.msr-step-icon::before {
  content: ''; position: absolute; inset: 7px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22,89,201,.12), rgba(22,89,201,0) 75%);
}
.msr-step-icon .icon { position: relative; z-index: 1; width: 23px; height: 23px; color: #1659c9; }
.msr-step-num {
  position: relative; z-index: 1; width: 22px; height: 22px; margin: -11px auto 0; border-radius: 50%;
  background: #1659c9; color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(22,89,201,.32);
}
.msr-step-desc { font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.35; padding: 0 2px; }
/* 42px = .msr-step's top padding (16) + half the icon box (26) -- the icon
   row's vertical center from the top of the grid row. 7px (half the 14px
   -tall arrow svg) centers the arrow on that same line. */
.msr-step-arrow { display: flex; justify-content: center; align-self: start; margin-top: 35px; }
.msr-step-arrow svg { display: block; }
@media (max-width: 700px) {
  .msr-steps { grid-template-columns: 1fr; row-gap: 4px; }
  .msr-step { padding: 10px 6px; }
  .msr-step-arrow { margin-top: 0; padding: 4px 0; transform: rotate(90deg); }
}
.msr-howto-note {
  margin-top: 22px; padding: 11px 13px; border-radius: 10px; background: var(--blue-light);
  font-size: 11.5px; font-weight: 700; color: #1659c9; display: flex; align-items: center; gap: 7px;
}
.msr-howto-note .icon { width: 14px; height: 14px; flex-shrink: 0; }

/* Service Record Overview -- each tile borrows BJMP_MIS's .service-icon
   signature exactly: a circular gradient badge in a pale ring, with a
   colored glow shadow (not a flat tint chip) -- scaled down to fit six
   compact tiles instead of four large cards. Fixed accent order (never
   reassigned by value), same blue/green/orange/purple family BJMP_MIS
   itself uses, plus its gold and a slate for the two extra tiles this
   page needs. */
/* Fixed 3-column grid (not auto-fit) so all 6 Overview tiles land as two
   even rows of 3 -- per Carl, 2026-08-20: auto-fit was sizing columns off
   the container width, and at this page's width that meant 5-per-row,
   stranding the 6th tile (Service Status) alone on its own short row
   ("hindi organized"). A fixed column count keeps both rows balanced at
   any width instead of depending on how many columns happen to fit. */
.msr-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .msr-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .msr-stat-grid { grid-template-columns: 1fr; } }
.msr-stat {
  position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 13px; padding: 17px 17px 17px 20px;
  background: #fff; border: 1px solid #dbe6f3; border-radius: 12px; box-shadow: 0 10px 20px rgba(10,38,85,.06);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.msr-stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--msr-c2); }
.msr-stat:hover { box-shadow: 0 16px 30px rgba(10,38,85,.13); transform: translateY(-2px); border-color: #b9cbea; }
.msr-stat-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--msr-c1); color: #fff; border: 5px solid var(--msr-ring); box-shadow: 0 8px 16px var(--msr-glow);
}
.msr-stat-icon .icon { width: 17px; height: 17px; }
.msr-stat-body { min-width: 0; }
.msr-stat-body label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 5px; }
.msr-stat-value { font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.3; letter-spacing: -.005em; overflow-wrap: anywhere; }
.msr-stat-value .badge-pill { font-size: 12px; }
/* Per Carl, 2026-08-20 ("green din yAN?") -- .badge-pill.active is the
   shared green status pill used app-wide (Personnel Roster account status,
   etc.); Carl chose to keep that shared component as-is everywhere else and
   only override it here, scoped to this page's Service Status tile, so it
   matches the same blue-dominant scheme instead of reintroducing green.
   .badge-pill.inactive (Separated) is intentionally left alone -- it's
   already the same red as .msr-stat.critical, so it's consistent as-is. */
.msr-stat-value .badge-pill.active { background: #d9e9ff; color: #1659c9; }
/* c1-c5: per Carl's boss, 2026-08-20 ("ayaw sobrang dami ng kulay, gradient
   gusto niya") -- the round-4 5-hue categorical set was replaced with ONE
   gradient family for every data tile (these are decorative accents on a
   single record, not distinct categories that need telling apart by hue,
   so one consistent color reads calmer/more official). Round 5 recalibrated
   that accent to the seal's exact blue (#1659c9). Round 5b tried swapping
   the tiles to gold instead ("blue-hero + gold-tiles" two-tone), but Carl
   corrected that right back: "blue is the dominant" -- on the actual seal,
   blue is the whole background and gold is only the thin ribbon band, not
   an even split. Round 5c (final) restores tiles to the seal blue, matching
   the seal's real proportions: blue dominant throughout, gold reserved for
   small accents only (the hero eyebrow label/underline). Kept as 5 separate
   classes (not merged into one rule) so a future tile can still get its own
   accent without touching this whole block again -- for now they're
   identical on purpose. Service Status below is the one tile that keeps a
   real semantic
   color (green/red = good/critical), since that one actually needs to be
   told apart at a glance. */
.msr-stat.c1 { --msr-c1: linear-gradient(135deg, #3d7ce8, #0d3a8f); --msr-c2: #1659c9; --msr-ring: #d9e9ff; --msr-glow: rgba(22,89,201,.28); }
.msr-stat.c2 { --msr-c1: linear-gradient(135deg, #3d7ce8, #0d3a8f); --msr-c2: #1659c9; --msr-ring: #d9e9ff; --msr-glow: rgba(22,89,201,.28); }
.msr-stat.c3 { --msr-c1: linear-gradient(135deg, #3d7ce8, #0d3a8f); --msr-c2: #1659c9; --msr-ring: #d9e9ff; --msr-glow: rgba(22,89,201,.28); }
.msr-stat.c4 { --msr-c1: linear-gradient(135deg, #3d7ce8, #0d3a8f); --msr-c2: #1659c9; --msr-ring: #d9e9ff; --msr-glow: rgba(22,89,201,.28); }
.msr-stat.c5 { --msr-c1: linear-gradient(135deg, #3d7ce8, #0d3a8f); --msr-c2: #1659c9; --msr-ring: #d9e9ff; --msr-glow: rgba(22,89,201,.28); }
/* Per Carl, 2026-08-20 ("kailangan talaga green ito? :D") -- the big green
   icon circle wasn't earning its keep: the small badge-pill text right next
   to it ("Active / Present", a shared .badge-pill.active/.inactive
   component used the same way everywhere else in the app) already carries
   that same status, just more subtly. So .good now matches the same blue
   as every other tile -- keeping blue dominant throughout, per Carl's
   earlier "blue is the dominant" -- and only .critical (Separated) still
   breaks from blue, since THAT one genuinely needs to grab the eye. */
.msr-stat.good { --msr-c1: linear-gradient(135deg, #3d7ce8, #0d3a8f); --msr-c2: #1659c9; --msr-ring: #d9e9ff; --msr-glow: rgba(22,89,201,.28); }
.msr-stat.critical { --msr-c1: linear-gradient(135deg, #f87171, #dc2626); --msr-c2: #dc2626; --msr-ring: #fde0e0; --msr-glow: rgba(220,38,38,.28); }

.msr-search-row { position: relative; display: flex; gap: 8px; flex-wrap: wrap; }
.msr-search-row .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.msr-search-row .input { flex: 1 1 260px; padding-left: 36px; border-radius: 999px; }
.msr-history-note { display: flex; align-items: center; gap: 10px; margin: 12px 0 14px; padding: 11px 14px; border: 1px solid #cfe0fb; border-radius: 12px; background: #f7fbff; color: #23415f; font-size: 13px; font-weight: 750; line-height: 1.45; }
.msr-history-note .icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--blue); }
.msr-history-table tbody tr:nth-child(even) { background: #fafbfd; }
.msr-history-table tbody tr:hover { background: var(--blue-light); }

/* Reminders card -- per Carl, 2026-08-20 ("sobrang dull .. lagay ka
   reminders sa baba"), added with content picked to match rules the page
   already enforces (own-record ownership gate, admin approval, one-
   pending-request-per-purpose in cc_submit_request()) rather than generic
   filler. Icon badges reuse the same small circular blue-gradient treatment
   as .msr-stat-icon/.msr-step-icon for visual consistency, just smaller --
   no new color, no background box behind each row (per Carl's earlier
   "madumi tignan" on the How to Request cards -- text sits directly on the
   card's own white background instead). */
.msr-reminder-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
@media (max-width: 700px) { .msr-reminder-list { grid-template-columns: 1fr; } }
.msr-reminder-item { display: flex; gap: 12px; align-items: flex-start; }
.msr-reminder-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #3d7ce8, #0d3a8f); color: #fff;
  border: 4px solid #d9e9ff; box-shadow: 0 6px 12px rgba(22,89,201,.24);
}
.msr-reminder-icon .icon { width: 14px; height: 14px; }
.msr-reminder-item strong { display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.msr-reminder-item p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Closing copyright footer -- per Carl, 2026-08-20 ("lagyan mo ng ganyan
   mga container .. e-match mo lang kulay sa container"), the exact recipe
   is bjmp_mis_system/dashboard.css's own .dash-footer (plain white pill,
   border + shadow, centered "|"-separated copyright line) -- same "lift
   the recipe" precedent this page has followed all session -- with a
   colored top edge added (fading from the page's own blue, matching the
   reference bar Carl sent) since access_v2's .dash-footer equivalent here
   didn't have one. Text updated to this app's actual name (BJMP_MIS's said
   "ACCe-SS"; ours is "ACCess" -- see the topbar brand mark). */
/* .msr-accent-top -- the same colored top edge as .msr-footer, pulled out
   as its own modifier per Carl, 2026-08-20 ("lagyan din ang service record
   overview at yung reminders") so any .card on this page can pick it up
   without repeating the gradient rule. Needs position:relative + overflow
   hidden on the card itself for the ::before bar to clip to the card's own
   rounded corners -- .card already provides border-radius, so just add
   those two here. */
.msr-accent-top { position: relative; overflow: hidden; }
.msr-accent-top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #1659c9 0%, #1659c9 14%, rgba(22,89,201,.18) 55%, transparent 88%);
}
.msr-footer {
  display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 22px; padding: 13px 24px; color: var(--ink);
  border: 1px solid var(--border); border-radius: 16px; background: #fff;
  box-shadow: var(--shadow-sm); text-align: center; font-size: 13px;
}
.msr-footer em { color: var(--subtle); font-style: normal; }

.msr-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.msr-modal-overlay.open { display: flex; }
.msr-modal-box { background: #fff; border-radius: 16px; padding: 28px; max-width: 460px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.msr-modal-box h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.msr-modal-box p.msr-modal-sub { margin: 0 0 20px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.msr-modal-field { margin-bottom: 15px; }
.msr-modal-field label { display: block; font-size: 12px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.msr-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ACcess V4 admin dashboard refresh */
.admin-dash-v2{max-width:1280px}.admin-hero-v2{padding:30px 34px;margin-bottom:18px}.admin-hero-v2 .admin-hero-copy{min-height:145px}.admin-hero-v2 h1{font-size:34px}.admin-hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-top:20px}.admin-hero-bottom .admin-hero-meta{margin-top:0}.admin-quote{font-size:13px;font-weight:750;font-style:italic;color:rgba(255,255,255,.78)}
.admin-summary-row{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(180px,.65fr));gap:14px;margin-bottom:24px}.admin-scope-card,.admin-mini-stat{min-height:94px;border:1px solid #cfe0fb;border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(10,61,156,.06)}.admin-scope-card{display:flex;align-items:center;gap:14px;padding:18px}.admin-scope-card small,.admin-mini-stat small{display:block;color:#41628f;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.admin-scope-card strong{display:block;margin-top:3px;color:#001b45;font-size:18px}.admin-scope-card span:not(.action-icon){display:block;margin-top:3px;color:#5c6f8c;font-size:12px;font-weight:700}.admin-mini-stat{padding:17px 19px}.admin-mini-stat strong{display:block;margin:5px 0 2px;color:#0b46a3;font-size:29px;line-height:1}.admin-mini-stat span{color:#64748b;font-size:11.5px;font-weight:700}
.section-title-row{display:flex;justify-content:space-between;align-items:end;margin:0 0 11px}.section-title-row span{color:#0b46a3;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.section-title-row h2{margin:3px 0 0;color:#001b45;font-size:19px}.admin-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.admin-quick-card{position:relative;display:flex;align-items:center;gap:12px;min-height:96px;padding:15px 34px 15px 15px;border:1px solid #cfe0fb;border-radius:14px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 8px 22px rgba(10,61,156,.055);transition:.18s ease}.admin-quick-card:hover{transform:translateY(-2px);border-color:#8db8fb;box-shadow:0 13px 28px rgba(10,61,156,.11);text-decoration:none}.admin-quick-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#e8f2ff,#d7e9ff);color:#0b55cf}.admin-quick-icon .icon{width:22px;height:22px}.admin-quick-card h3{margin:0 0 4px;color:#062c69;font-size:14px}.admin-quick-card p{margin:0;color:#64748b;font-size:11.5px;line-height:1.35;font-weight:650}.admin-card-arrow{position:absolute;right:13px;color:#2870d9;font-size:18px;font-weight:900}
.admin-main-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.75fr);gap:18px;margin-bottom:18px}.admin-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.admin-queue-panel,.admin-today-panel{min-height:300px}.queue-total{display:inline-grid;place-items:center;min-width:25px;height:25px;padding:0 7px;margin-left:5px;border-radius:999px;background:#0f61e8;color:#fff;font-size:12px;vertical-align:2px}.admin-review-row{color:inherit;text-decoration:none;transition:.15s ease}.admin-review-row:hover{border-color:#9ec5fe;background:#f0f6ff;text-decoration:none}.review-name{display:flex;align-items:center;gap:10px}.review-name i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#e8f2ff;color:#0b55cf;font-style:normal}.review-name .icon{width:16px;height:16px}.review-right{display:flex;align-items:center;gap:11px}.review-right b{color:#0b55cf;font-size:11px}.admin-today-panel{position:relative}.today-number{position:absolute;right:22px;top:20px;color:#e7f0ff;font-size:82px;line-height:1;font-weight:950;pointer-events:none}.today-note{position:absolute;left:22px;right:22px;bottom:22px;padding:15px;border:1px solid #d7e7ff;border-radius:11px;background:#f6faff}.today-note strong,.today-note span{display:block}.today-note strong{color:#073b91;font-size:13px}.today-note span{margin-top:5px;color:#64748b;font-size:11.5px;line-height:1.4}.admin-responsibility .admin-module-pills{margin-top:18px;grid-template-columns:repeat(2,minmax(0,1fr))}.admin-reminder-list.compact{gap:8px}.admin-reminder-list.compact div{padding:10px 12px}.admin-reminder-list.compact strong{margin-bottom:3px}
@media(max-width:1050px){.admin-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-summary-row{grid-template-columns:1fr 1fr}.admin-scope-card{grid-column:1/-1}.admin-main-grid,.admin-bottom-grid{grid-template-columns:1fr}}
@media(max-width:620px){.admin-hero-bottom{align-items:flex-start;flex-direction:column}.admin-summary-row,.admin-quick-grid{grid-template-columns:1fr}.admin-scope-card{grid-column:auto}.review-right b{display:none}}

/* ACcess V4 admin dashboard v3 — balanced blue-only workspace */
.admin-dash-v3{max-width:1320px;margin:0 auto;padding-bottom:28px}.admin-hero-v3{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,.75fr);gap:0;padding:0;overflow:hidden;border-radius:18px;background:linear-gradient(120deg,#2568df 0%,#0b4fbd 45%,#063b91 100%);box-shadow:0 16px 34px rgba(6,59,145,.18);margin-bottom:18px}.admin-hero-v3 .admin-hero-copy{padding:34px 38px;min-height:190px;display:flex;flex-direction:column;justify-content:center}.admin-hero-v3 h1{margin:6px 0 8px;font-size:36px;line-height:1.05;letter-spacing:-.03em}.admin-hero-v3 p{max-width:740px;font-size:14px;line-height:1.55}.admin-hero-v3 .admin-hero-bottom{margin-top:22px}.admin-hero-side{padding:28px 26px;background:rgba(4,42,111,.28);border-left:1px solid rgba(255,255,255,.16);color:#fff;display:flex;flex-direction:column;justify-content:center}.hero-scope-label{text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:900;color:rgba(255,255,255,.7)}.hero-scope-name{font-size:21px;line-height:1.25;font-weight:900;margin-top:6px}.hero-scope-type{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;font-weight:750;color:rgba(255,255,255,.78)}.hero-scope-type .icon{width:16px;height:16px}.hero-scope-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.hero-scope-stats div{padding:12px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.08)}.hero-scope-stats strong,.hero-scope-stats span{display:block}.hero-scope-stats strong{font-size:23px;line-height:1}.hero-scope-stats span{margin-top:5px;font-size:10px;font-weight:800;color:rgba(255,255,255,.72)}
.admin-kpi-grid{display:grid;grid-template-columns:2fr .72fr .72fr;gap:14px;margin:0 0 26px}.admin-kpi-card{min-height:104px;display:flex;align-items:center;gap:14px;padding:18px 20px;border:1px solid #d4e2f8;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(15,55,110,.06)}.admin-kpi-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:#eaf3ff;color:#0c59cc}.admin-kpi-icon .icon{width:22px;height:22px}.admin-kpi-card small,.admin-kpi-card strong,.admin-kpi-card span{display:block}.admin-kpi-card small{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#52709a}.admin-kpi-card strong{margin-top:4px;color:#062d69;font-size:17px;line-height:1.2}.admin-kpi-card strong.admin-kpi-number{font-size:30px;line-height:1;color:#0b57c8}.admin-kpi-card span{margin-top:4px;color:#6a7890;font-size:11.5px;font-weight:650}.admin-kpi-card.has-pending{border-color:#a9c9fb;background:linear-gradient(180deg,#fff,#f8fbff)}
.admin-section-heading{display:flex;align-items:end;justify-content:space-between;margin:0 0 12px}.admin-section-heading span{display:block;color:#0b57c8;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.admin-section-heading h2{margin:4px 0 3px;font-size:21px;color:#031f4b}.admin-section-heading p{margin:0;color:#748198;font-size:12px}.admin-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:20px}.admin-module-card{position:relative;min-height:122px;display:flex;align-items:flex-start;gap:13px;padding:18px 42px 18px 18px;color:inherit;text-decoration:none;background:#fff;border:1px solid #d4e2f8;border-radius:15px;box-shadow:0 8px 24px rgba(15,55,110,.055);transition:.18s ease}.admin-module-card:hover{transform:translateY(-2px);border-color:#8db8fb;box-shadow:0 14px 30px rgba(15,74,168,.12);text-decoration:none}.admin-module-icon{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,#eaf3ff,#dcecff);color:#0b5bd4}.admin-module-icon .icon{width:23px;height:23px}.admin-module-copy h3{margin:2px 0 5px;color:#073473;font-size:15px}.admin-module-copy p{margin:0;color:#66758d;font-size:11.5px;line-height:1.45;font-weight:650}.admin-module-arrow{position:absolute;right:16px;bottom:18px;color:#1764cf;font-size:20px;font-weight:900}.admin-module-count{position:absolute;right:13px;top:13px;min-width:24px;height:24px;padding:0 7px;display:grid;place-items:center;border-radius:999px;background:#0f61e8;color:#fff;font-size:11px;font-weight:900}
.admin-content-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr);gap:18px;margin-bottom:18px}.admin-panel-head.v3{position:relative;display:flex;align-items:flex-start;gap:12px;padding-bottom:17px;margin-bottom:4px;border-bottom:1px solid #e4ecf8}.admin-panel-head.v3 h2{font-size:20px;margin:1px 0 4px;color:#031f4b}.admin-panel-head.v3 p{margin:0;color:#748198;font-size:11.5px}.queue-total.v3{margin-left:auto;align-self:center;min-width:36px;height:36px;font-size:14px}.admin-queue-v3,.admin-overview-card{padding:20px;min-height:334px}.admin-review-list.v3{display:grid;gap:9px;margin-top:14px}.admin-review-row.v3{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 13px;border:1px solid #dce8f8;border-radius:12px;background:#fbfdff;color:inherit;text-decoration:none}.admin-review-row.v3:hover{background:#f1f7ff;border-color:#9ec5fe;text-decoration:none}.admin-review-row.v3 .review-name span{display:flex;flex-direction:column}.admin-review-row.v3 .review-name strong{font-size:12.5px;color:#12345f}.admin-review-row.v3 .review-name small{margin-top:2px;font-size:10.5px;color:#7b899c}.admin-review-row.v3 .review-right strong{display:grid;place-items:center;min-width:30px;height:30px;border-radius:999px;background:#e7f1ff;color:#0754c5;font-size:12px}.admin-review-row.v3 .review-right b{font-size:11px;color:#0d59c9}.admin-overview-status{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:center;padding:18px 0}.overview-ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;align-content:center;background:#edf5ff;border:8px solid #cfe3ff;color:#0a55c6}.overview-ring strong,.overview-ring small{display:block;text-align:center}.overview-ring strong{font-size:24px;line-height:1}.overview-ring small{margin-top:3px;font-size:9px;font-weight:900;text-transform:uppercase}.admin-overview-status>div>strong{display:block;color:#12345f;font-size:13px}.admin-overview-status p{margin:5px 0 0;color:#718097;font-size:11px;line-height:1.45}.admin-overview-lines{display:grid;gap:8px}.admin-overview-lines div{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border:1px solid #e0eaf8;border-radius:10px;background:#fbfdff}.admin-overview-lines span{color:#52677f;font-size:11px;font-weight:750}.admin-overview-lines b{color:#0754c5;font-size:13px}
.admin-bottom-grid-v3{display:grid;grid-template-columns:1fr 1fr;gap:18px}.admin-responsibility-v3,.admin-process-card{padding:20px;min-height:250px}.admin-responsibility-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}.admin-responsibility-list span{display:flex;align-items:center;gap:8px;padding:10px 11px;border:1px solid #dce8f8;border-radius:10px;background:#fbfdff;color:#184173;font-size:11px}.admin-responsibility-list .icon{width:14px;height:14px;color:#0b5bd4}.admin-process-steps{display:grid;gap:10px;margin-top:14px}.admin-process-steps>div{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:10px 11px;border:1px solid #dce8f8;border-radius:10px;background:#fbfdff}.admin-process-steps i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#e8f2ff;color:#0b57c8;font-size:11px;font-style:normal;font-weight:900}.admin-process-steps span{display:flex;flex-direction:column}.admin-process-steps strong{color:#163b69;font-size:11.5px}.admin-process-steps small{margin-top:2px;color:#738098;font-size:10.5px;line-height:1.4}
@media(max-width:1080px){.admin-hero-v3{grid-template-columns:1fr}.admin-hero-side{border-left:0;border-top:1px solid rgba(255,255,255,.14)}.admin-kpi-grid{grid-template-columns:1fr 1fr}.admin-kpi-card:first-child{grid-column:1/-1}.admin-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-content-grid,.admin-bottom-grid-v3{grid-template-columns:1fr}}
@media(max-width:650px){.admin-hero-v3 .admin-hero-copy{padding:26px 22px;min-height:auto}.admin-hero-v3 h1{font-size:29px}.admin-hero-side{padding:22px}.admin-kpi-grid,.admin-module-grid,.admin-bottom-grid-v3{grid-template-columns:1fr}.admin-kpi-card:first-child{grid-column:auto}.admin-module-card{min-height:100px}.admin-review-row.v3 .review-right b{display:none}.admin-responsibility-list{grid-template-columns:1fr}}


/* ACcess V4 dashboard polish: centered Quick Access cards */
.admin-kpi-card-noicon{
  padding-left:20px;
}
.admin-kpi-card-noicon > div{
  width:100%;
}
.admin-module-grid{
  align-items:stretch;
}
.admin-module-card{
  min-height:150px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:20px 22px;
  text-align:center;
}
.admin-module-icon{
  flex:0 0 54px;
  width:54px;
  height:54px;
  margin:0 auto;
  border-radius:15px;
}
.admin-module-icon .icon{
  width:26px;
  height:26px;
}
.admin-module-copy{
  width:100%;
}
.admin-module-copy h3{
  margin:0 0 5px;
  font-size:15px;
}
.admin-module-copy p{
  max-width:220px;
  margin:0 auto;
  line-height:1.45;
}
.admin-module-count{
  right:14px;
  top:14px;
}
.admin-module-arrow{
  display:none !important;
}
@media(max-width:650px){
  .admin-module-card{
    min-height:132px;
    padding:18px;
  }
}

/* ===== ACcess Admin Dashboard V4 - clean organized redesign ===== */
.admin-dash-v4{max-width:1240px;margin:0 auto;padding:26px 18px 42px;color:#0d2145}.admin-dash-v4 *{box-sizing:border-box}.adv4-hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.65fr);gap:16px;margin-bottom:26px}.adv4-hero-main{min-height:205px;border-radius:20px;padding:30px 34px;background:linear-gradient(135deg,#1762d6 0%,#0b3f99 100%);color:#fff;box-shadow:0 16px 34px rgba(24,75,160,.16);display:flex;flex-direction:column;justify-content:center}.adv4-kicker,.adv4-mini-label,.adv4-section-head>div>span,.adv4-scope-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.adv4-kicker{color:#cfe1ff;margin-bottom:9px}.adv4-hero-main h1{margin:0;font-size:34px;line-height:1.12;letter-spacing:-.02em;color:#fff}.adv4-hero-main>p{margin:10px 0 0;max-width:760px;font-size:15px;line-height:1.6;color:#eaf2ff}.adv4-hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.adv4-hero-meta span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:700}.adv4-hero-meta svg{width:15px;height:15px}.adv4-scope-card{border:1px solid #d9e5f5;background:#fff;border-radius:20px;padding:24px;box-shadow:0 10px 28px rgba(27,63,119,.08);display:flex;flex-direction:column;justify-content:center}.adv4-scope-label{color:#5f7698}.adv4-scope-card>strong{font-size:21px;line-height:1.3;margin:8px 0 20px;color:#0d2145}.adv4-scope-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e5edf7;padding-top:18px}.adv4-scope-stats>div{display:flex;flex-direction:column;gap:3px}.adv4-scope-stats>div+div{border-left:1px solid #e5edf7;padding-left:18px}.adv4-scope-stats b{font-size:25px;color:#0f5bd7}.adv4-scope-stats span{font-size:11px;color:#71829b;font-weight:700}.adv4-section{margin-bottom:24px}.adv4-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:13px}.adv4-section-head>div>span,.adv4-mini-label{color:#1664dc}.adv4-section-head h2,.adv4-panel h2{margin:3px 0 0;font-size:21px;line-height:1.25;color:#0d2145}.adv4-section-head>p{margin:0;max-width:500px;text-align:right;font-size:12px;line-height:1.5;color:#74859f}.adv4-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.adv4-module-card{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:106px;padding:16px 17px;background:#fff;border:1px solid #d9e5f5;border-radius:16px;text-decoration:none;color:inherit;box-shadow:0 7px 20px rgba(27,63,119,.05);transition:.18s ease}.adv4-module-card:hover{transform:translateY(-2px);border-color:#aac9f6;box-shadow:0 12px 26px rgba(27,63,119,.1)}.adv4-module-icon{width:52px;height:52px;border-radius:14px;background:#edf5ff;display:flex;align-items:center;justify-content:center;color:#0f64dd}.adv4-module-icon svg{width:25px;height:25px}.adv4-module-text h3{margin:0 0 5px;font-size:15px;color:#0d2145}.adv4-module-text p{margin:0;font-size:11.5px;line-height:1.45;color:#6c7e98}.adv4-module-side{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.adv4-count{min-width:25px;height:25px;padding:0 7px;border-radius:999px;background:#0f64dd;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}.adv4-arrow{font-size:18px;color:#0f64dd;font-weight:700}.adv4-main-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.65fr);gap:14px;margin-bottom:14px}.adv4-panel{background:#fff;border:1px solid #d9e5f5;border-radius:17px;box-shadow:0 7px 22px rgba(27,63,119,.05);padding:20px}.adv4-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid #e5edf7}.adv4-panel-head.compact{padding-bottom:12px}.adv4-panel-head p{margin:5px 0 0;color:#74859f;font-size:12px}.adv4-total{font-size:11px;font-weight:800;color:#0f64dd;background:#edf5ff;border-radius:999px;padding:7px 10px;white-space:nowrap}.adv4-queue-list{display:flex;flex-direction:column}.adv4-queue-row{display:grid;grid-template-columns:40px minmax(0,1fr) 38px 72px;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid #edf2f8;text-decoration:none;color:inherit}.adv4-queue-row:last-child{border-bottom:0}.adv4-queue-row:hover{background:#f8fbff}.adv4-queue-icon{width:36px;height:36px;border-radius:10px;background:#eef5ff;display:flex;align-items:center;justify-content:center;color:#0f64dd}.adv4-queue-icon svg{width:18px;height:18px}.adv4-queue-name{display:flex;flex-direction:column;gap:3px}.adv4-queue-name strong{font-size:13px}.adv4-queue-name small{font-size:11px;color:#7a8ca4}.adv4-queue-count{width:30px;height:30px;border-radius:9px;background:#eef2f7;color:#7a8ca4;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}.adv4-queue-count.active{background:#e7f0ff;color:#0f64dd}.adv4-review-link{font-size:11px;font-weight:800;color:#0f64dd;text-align:right}.adv4-side-stack{display:flex;flex-direction:column}.adv4-summary{height:100%}.adv4-summary>h2{font-size:22px;margin-top:5px}.adv4-summary>p{margin:2px 0 14px;color:#788aa4;font-size:12px}.adv4-summary-box{display:flex;align-items:center;gap:12px;padding:14px;border-radius:13px;background:#f4f8fe;border:1px solid #e2ebf8}.adv4-summary-box b{font-size:31px;line-height:1;color:#0f64dd}.adv4-summary-box span{font-size:12px;line-height:1.4;color:#536984;font-weight:700}.adv4-summary-lines{margin-top:12px}.adv4-summary-lines div{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid #edf2f8;font-size:12px}.adv4-summary-lines div:last-child{border-bottom:0}.adv4-summary-lines span{color:#61748f}.adv4-summary-lines b{color:#0d2145}.adv4-bottom-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px}.adv4-responsibilities{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}.adv4-responsibilities span{padding:8px 11px;border-radius:9px;background:#f3f7fc;border:1px solid #e2eaf5;font-size:11px;font-weight:750;color:#25456f}.adv4-checklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:14px}.adv4-checklist>div{display:flex;gap:10px;padding:12px;border-radius:12px;background:#f8fbff;border:1px solid #e4edf8}.adv4-checklist>div>b{font-size:11px;color:#0f64dd}.adv4-checklist span{display:flex;flex-direction:column;gap:3px}.adv4-checklist strong{font-size:11px}.adv4-checklist small{font-size:10px;line-height:1.4;color:#71829b}@media(max-width:980px){.adv4-hero,.adv4-main-grid{grid-template-columns:1fr}.adv4-module-grid{grid-template-columns:1fr 1fr}.adv4-bottom-grid{grid-template-columns:1fr}.adv4-section-head{align-items:flex-start;flex-direction:column;gap:5px}.adv4-section-head>p{text-align:left}.adv4-checklist{grid-template-columns:1fr}}@media(max-width:650px){.admin-dash-v4{padding:16px 10px 32px}.adv4-hero-main{padding:24px;min-height:180px}.adv4-hero-main h1{font-size:27px}.adv4-module-grid{grid-template-columns:1fr}.adv4-module-card{grid-template-columns:46px minmax(0,1fr) auto}.adv4-module-icon{width:46px;height:46px}.adv4-queue-row{grid-template-columns:36px minmax(0,1fr) 32px}.adv4-review-link{display:none}.adv4-scope-stats{gap:10px}}

/* --------------------------------------------------------------------------
   App-wide searchable dropdowns
   --------------------------------------------------------------------------
   The native <select> stays in the form as the submitted value/source of
   truth; searchable-select.js supplies the visible type-to-search interface.
*/
.acc-search-select {
    position: relative;
    width: 100%;
    min-width: 0;
}
.acc-search-select-native {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
}
.acc-search-select-input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 9px 38px 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    line-height: 1.3;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.acc-search-select-input.input {
    padding-right: 38px;
}
.acc-search-select-input:focus,
.acc-search-select.open .acc-search-select-input {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(19,82,211,.10);
}
.acc-search-select-input.acc-search-select-invalid {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(220,38,38,.10);
}
.acc-search-select.is-disabled .acc-search-select-input {
    background: #f7f8fa;
    color: var(--muted);
    cursor: not-allowed;
}
.acc-search-select-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #667085;
    cursor: pointer;
}
.acc-search-select-toggle span {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease;
}
.acc-search-select.open .acc-search-select-toggle span {
    transform: rotate(225deg) translate(-1px,-1px);
}
.acc-search-select-toggle:disabled { cursor: not-allowed; opacity: .55; }
.acc-search-select-menu {
    display: none;
    position: fixed;
    z-index: 2147483000;
    top: 0;
    left: 0;
    right: auto;
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5px;
    border: 1px solid #d6deea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15,23,42,.16);
}
.acc-search-select-menu.is-open { display: block; }
.acc-search-select-option {
    width: 100%;
    display: block;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}
.acc-search-select-option:hover,
.acc-search-select-option.active { background: var(--blue-light); color: var(--blue-dark); }
.acc-search-select-option.selected { font-weight: 800; }
.acc-search-select-option:disabled { color: var(--muted); cursor: not-allowed; opacity: .65; }
.acc-search-select-group {
    padding: 8px 9px 4px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.acc-search-select-empty {
    padding: 12px 10px;
    color: var(--muted);
    font-size: 12.5px;
    text-align: center;
}
@media (max-width: 640px) {
    .acc-search-select-menu { max-height: 240px; }
}


/* Shared search toolbar for every long/paginated list. */
.list-search-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}.list-search-input{position:relative;flex:1 1 320px;max-width:620px}.list-search-input .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:#64748b;pointer-events:none}.list-search-input input{width:100%;min-height:42px;padding:9px 12px 9px 39px;border:1px solid #d6deeb;border-radius:10px;background:#fff;color:var(--ink);font:inherit;outline:none;box-shadow:0 1px 2px rgba(15,23,42,.03)}.list-search-input input:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.10)}.list-search-bar>.btn{min-height:42px}.list-search-summary{margin:-5px 0 12px;color:var(--muted);font-size:12px;font-weight:750}@media(max-width:640px){.list-search-bar{align-items:stretch}.list-search-input{flex-basis:100%;max-width:none}.list-search-bar>.btn{flex:1}}

/* ================================================================
   ACcess UI consistency pass — 2026-09-19
   Keep action controls aligned and predictable throughout modules.
   ================================================================ */
:root { --acc-control-h: 42px; --acc-action-min: 108px; }

/* Text action buttons share one visual footprint. Purpose-built icon-only
   controls keep their compact square size through the exceptions below. */
.btn {
  min-height: var(--acc-control-h);
  min-width: var(--acc-action-min);
  box-sizing: border-box;
  padding: 0 16px;
  line-height: 1.2;
  text-align: center;
}
.btn .icon { flex: 0 0 auto; }
.topbar .btn,
.topbar-right .btn,
.ccs-icon-btn.btn,
.btn.ccs-icon-btn { min-width: 0; }
.ccs-icon-btn.btn,
.btn.ccs-icon-btn { width: 36px; min-height: 36px; height: 36px; padding: 0 !important; }
.split-login-shell .btn,
.login-signin-card .btn { width: 100%; }

/* Common action groups: same spacing, alignment and wrapping behavior. */
.toolbar,
.nt-toolbar,
.profile-header-actions,
.preview-actions,
.acc-dialog-actions,
.ccs-actions,
.ccs-head-actions {
  gap: 10px;
}
.toolbar > .btn,
.nt-toolbar > .btn,
.profile-header-actions > .btn,
.preview-actions > .btn,
.acc-dialog-actions > .btn {
  min-height: var(--acc-control-h);
}

/* Search bars are intentionally not forms. This prevents invalid nested forms
   on pages where Search sits inside a POST/bulk-action card. */
.list-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 16px;
}
.list-search-input {
  position: relative;
  flex: 1 1 360px;
  max-width: 680px;
  min-width: 220px;
}
.list-search-input .icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: #64748b;
  pointer-events: none;
}
.list-search-input input {
  width: 100%;
  height: var(--acc-control-h);
  min-height: var(--acc-control-h);
  box-sizing: border-box;
  padding: 0 13px 0 40px;
  border: 1px solid #d6deeb;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  outline: none;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.list-search-input input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}
.list-search-bar > .btn {
  width: var(--acc-action-min);
  min-width: var(--acc-action-min);
  height: var(--acc-control-h);
  min-height: var(--acc-control-h);
}

/* Filter bars use the same control height as search/action buttons. */
.toolbar .input,
.toolbar select,
.order-search-toolbar .input,
.order-search-toolbar select,
.order-search-toolbar .btn {
  min-height: var(--acc-control-h);
}
.order-search-toolbar .btn { min-width: var(--acc-action-min); }

/* Table text actions stay easy to scan and do not jump between row heights. */
table.table a.btn:not(.ccs-icon-btn),
table.table button.btn:not(.ccs-icon-btn) {
  min-height: 38px;
  min-width: 96px;
  padding-left: 14px;
  padding-right: 14px;
}

@media (max-width: 720px) {
  .list-search-bar { align-items: stretch; }
  .list-search-input { flex-basis: 100%; max-width: none; min-width: 0; }
  .list-search-bar > .btn { flex: 1 1 120px; width: auto; }
  .toolbar > .btn,
  .profile-header-actions > .btn,
  .preview-actions > .btn { flex: 1 1 140px; }
}

/* Secondary/custom action controls use the same control rhythm. Icon-only
   actions remain square by design, but their square size is standardized. */
.ccr-toolbar-btn,
.mrq-toolbar-btn,
.access-terms-btn,
.tiny-btn {
  min-height: var(--acc-control-h);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ccr-icon-btn,
.srip-icon-btn,
.ccs-icon-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  box-sizing: border-box;
}
.pager-btn {
  min-height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Destructive secondary actions are visually consistent across modules. */
.btn.danger-soft {
  background: #fff;
  color: #b42318;
  border: 1px solid #fecaca;
  box-shadow: var(--shadow-sm);
}
.btn.danger-soft:hover {
  background: #fff7f7;
  color: #912018;
  border-color: #fda29b;
}

/* Internal page text buttons use the same padding even where an older page
   carried a smaller inline padding. Login/topbar controls are outside .page. */
.page .btn:not(.ccs-icon-btn) {
  min-height: var(--acc-control-h);
  min-width: var(--acc-action-min);
  padding: 0 16px !important;
}
.page .ccr-icon-btn,
.page .srip-icon-btn,
.page .ccs-icon-btn {
  padding: 0 !important;
}

@media (max-width: 1180px) {
  .order-search-toolbar { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .order-search-toolbar .btn { width: 100%; }
}


/* ================================================================
   Service Record Desk header / personnel summary
   Keeps the admin Service Record page consistent with the rest of ACcess.
   ================================================================ */
.sr-page-shell {
  display: grid;
  gap: 16px;
}

.sr-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}

.sr-hero > div:first-child {
  min-width: 0;
  flex: 1 1 620px;
}

.sr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .035em;
}

.sr-eyebrow .icon {
  width: 16px;
  height: 16px;
}

.sr-hero h1 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.sr-hero p {
  margin: 8px 0 0;
  max-width: 820px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.sr-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.sr-person-card {
  padding: 16px 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.sr-person-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.sr-person-card .profile-header-main {
  min-width: 0;
}

.sr-person-card .profile-header-main h2 {
  margin: 0 !important;
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sr-person-card .profile-header-meta {
  margin-top: 5px;
}

@media (max-width: 760px) {
  .sr-hero {
    padding: 18px;
  }

  .sr-hero-actions {
    width: 100%;
    justify-content: stretch;
  }

  .sr-hero-actions .btn {
    flex: 1 1 160px;
  }

  .sr-person-card {
    padding: 14px 16px;
  }
}

/* Button-like navigation: shared across admin and personnel portals. */
a:is(.btn,.tile-action,.action-card,.am-link,.cert-card,.leave-action-card,.admin-module-card,.admin-quick-card,.admin-review-row,.adv4-module-card,.adv4-queue-row,.srd-review-link,.srd-salary-link,.my-dash-service-card,.my-dash-wide-card,.my-dash-guidance-card,.my-dash-reminder,.msr-stat),
a:is(.btn,.tile-action,.action-card,.am-link,.cert-card,.leave-action-card,.admin-module-card,.admin-quick-card,.admin-review-row,.adv4-module-card,.adv4-queue-row,.srd-review-link,.srd-salary-link,.my-dash-service-card,.my-dash-wide-card,.my-dash-guidance-card,.my-dash-reminder,.msr-stat) * {
  text-decoration: none !important;
}
:is(a.tile-action,a.action-card,a.am-link,a.cert-card,a.leave-action-card,a.admin-module-card,a.admin-quick-card,a.admin-review-row,a.adv4-module-card,a.adv4-queue-row,a.srd-review-link,a.srd-salary-link,a.my-dash-service-card,a.my-dash-wide-card,a.my-dash-guidance-card,a.my-dash-reminder,a.msr-stat):not(.is-disabled):not([aria-disabled="true"]):is(:hover,:focus-visible) {
  background: linear-gradient(115deg,#1649aa,#2879e8) !important;
  border-color: #246bdb !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(22,73,170,.18);
  cursor: pointer;
}
:is(a.tile-action,a.action-card,a.am-link,a.cert-card,a.leave-action-card,a.admin-module-card,a.admin-quick-card,a.admin-review-row,a.adv4-module-card,a.adv4-queue-row,a.srd-review-link,a.srd-salary-link,a.my-dash-service-card,a.my-dash-wide-card,a.my-dash-guidance-card,a.my-dash-reminder,a.msr-stat):not(.is-disabled):not([aria-disabled="true"]):is(:hover,:focus-visible) * {
  color: #fff !important;
  background-color: transparent !important;
  background-image: none !important;
}
.btn:not(:disabled):not(.disabled):not(.is-disabled):not(.danger):not(.danger-soft):not([aria-disabled="true"]):is(:hover,:focus-visible) {
  background: linear-gradient(115deg,#1649aa,#2879e8) !important;
  border-color: #246bdb !important;
  color: #fff !important;
  text-decoration: none !important;
}
a:is(.tile-action,.action-card,.am-link,.cert-card,.leave-action-card,.adv4-module-card,.srd-review-link):focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

.console-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;margin:24px 0 0;padding:16px 2px 8px;border-top:1px solid #dce4ef;color:#64748b}
.console-footer-brand,.console-footer-context{display:flex;flex-direction:column;gap:4px}
.console-footer-brand strong{font-size:13px;line-height:1.4;letter-spacing:.12em;color:#24466f;font-weight:800}
.console-footer-brand span,.console-footer-context span{font-size:11px;line-height:1.5}
.console-footer-brand,.console-footer-context{align-items:center;text-align:center}
@media(max-width:640px){.console-footer{padding-left:14px;padding-right:14px}}

.console-footer{max-width:1180px;margin:24px auto 0}@media print{.console-footer{display:none}}

/* Keep the notification setup notice aligned with dashboard cards. */
.admin-dash-v4 .adv4-email-setup{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-width:0;padding:18px 20px;margin-bottom:20px;background:#f0f6ff;border:1px solid #cddff8;border-radius:16px;color:#244877;text-align:left}
.adv4-email-setup>div{min-width:0;overflow-wrap:anywhere}
.adv4-email-setup strong{display:block;font-size:15px;font-weight:600;line-height:1.4}
.adv4-email-setup small{display:block;margin-top:4px;font-size:13px;font-weight:400;line-height:1.5}
.adv4-email-setup>.btn{flex-shrink:0;white-space:nowrap}
@media(max-width:650px){.admin-dash-v4 .adv4-email-setup{align-items:flex-start;flex-direction:column;padding:16px;gap:12px}.adv4-email-setup>.btn{align-self:flex-start}}