/* ===================================================
   NEAM — NH E9-1-1 Address Manager — Bootstrap theme layer
   Loaded AFTER app/static/bootstrap/bootstrap.min.css.
   Provides NEAM brand colors + the small set of custom
   components Bootstrap has no equivalent for (status
   badges, form-tbl detail tables, DataTables navy theme).
   =================================================== */

:root {
  /* NEAM brand palette */
  --brand:        #004080;
  --brand-dark:   #002d5c;
  --brand-mid:    #005ab3;
  --brand-light:  #e6eef8;
  --green:        #1b5e00;
  --green-dark:   #0f3e00;
  --green-light:  #e8f5e0;
  --red:          #7f0000;
  --red-dark:     #570000;
  --grey:         #4a5568;
  --grey-dark:    #2d3748;
  --border:       #cbd5e0;
  --border-light: #e8edf5;
  --bg-page:      #edf1f7;
  --bg-card:      #ffffff;
  --bg-stripe:    #f7faff;
  --bg-hover:     #dbeafe;
  --text:         #1a202c;
  --text-muted:   #5d6b82; /* darkened from #718096 — that was 3.84:1 on --bg-stripe, failing WCAG AA's 4.5:1 for normal text */
  --shadow-sm:    0 1px 3px rgba(0,20,60,.07), 0 1px 2px rgba(0,20,60,.05);
  --shadow:       0 4px 12px rgba(0,20,60,.10);
  --r:            5px;
  --r-lg:         8px;

  /* Map Bootstrap's theme colors onto the NEAM palette so default
     Bootstrap components (.btn-primary, .badge, .navbar, etc.) match
     the legacy look with no per-component overrides needed. */
  --bs-primary:        var(--brand);
  --bs-primary-rgb:    0, 64, 128;
  --bs-success:        #0a7200;
  --bs-success-rgb:    10, 114, 0;
  --bs-danger:         var(--red);
  --bs-danger-rgb:     127, 0, 0;
  --bs-secondary:      var(--grey);
  --bs-secondary-rgb:  74, 85, 104;
  --bs-link-color:           var(--brand);
  --bs-link-color-rgb:       0, 64, 128;
  --bs-link-hover-color:     var(--brand-dark);
  --bs-link-hover-color-rgb: 0, 45, 92;
  --bs-border-radius:    var(--r);
  --bs-border-radius-lg: var(--r-lg);
  --bs-body-bg:   var(--bg-page);
  --bs-body-color: var(--text);
  --bs-body-font-size: 13.5px;
}

/* Bootstrap's own .card rule re-declares --bs-card-bg from --bs-body-bg
   locally (cosmo.css), which shadows any :root-level override. Any plain
   .card without its own background (e.g. town-analytics tables) was
   silently rendering on #edf1f7 (our page tint) instead of white — just
   dark enough to push borderline AA text colors like #dc2626 under 4.5:1.
   Must override on .card itself, after bootstrap.cosmo.min.css, to win. */
.card {
  --bs-card-bg: var(--bg-card);
}

body {
  line-height: 1.55;
}

/* ── Skip-to-content link — hidden until keyboard-focused (WCAG 2.4.1) ── */
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  padding: 8px 16px;
  background: var(--brand-dark);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ── Reduced motion — respect the OS-level preference (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── User chip (avatar + name + icon sign-out) — shared internal + public header ── */
.neam-user-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.neam-user-chip.is-missing {
  color: #fef3c7;
  border-color: rgba(254, 243, 199, .55);
}

.neam-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

.neam-status-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  border: 1.5px solid var(--brand-dark);
}

.neam-user-name {
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.neam-signout-form {
  margin: 0;
  display: flex;
}

.neam-signout-btn {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  border-radius: 999px;
  padding: 4px 7px;
  cursor: pointer;
  transition: background .15s ease;
}

.neam-signout-btn:hover,
.neam-signout-btn:focus {
  background: rgba(255, 255, 255, .25);
}

/* Floating tooltip — never affects layout width, so nothing else shifts */
.neam-signout-label {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--brand-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 20;
}

.neam-signout-btn:hover .neam-signout-label,
.neam-signout-btn:focus .neam-signout-label {
  opacity: 1;
}

@media (max-width: 700px) {
  .neam-user-chip { font-size: 11px; }
  .neam-user-name { max-width: 90px; }
}

/* ── Nav link color accents (used on .nav-link inside the navbar) ── */
.neam-nav-links { box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.navbar-nav .nav-link {
  border-bottom: 3px solid transparent;
  font-weight: 500;
  letter-spacing: .2px;
  transition: border-color .15s ease, background-color .15s ease;
}
/* Current page gets a soft fill on top of its usual underline accent */
.navbar-nav .nav-link.active {
  background: rgba(255, 255, 255, .12);
  border-radius: var(--r) var(--r) 0 0;
}
/* Subtle divider between items so a full row of text doesn't run together */
.navbar-nav .nav-item:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, .18);
}
.navblue:hover, .navblue.active        { border-bottom-color: #5599ff !important; }
.navgreen:hover, .navgreen.active      { border-bottom-color: #55cc33 !important; }
.navblack:hover, .navblack.active      { border-bottom-color: #aaaaaa !important; }
.navgrey:hover, .navgrey.active        { border-bottom-color: #99aacc !important; }

/* ── Card — NEAM brand header + color variants Bootstrap doesn't ship by default ── */
.card-header       { background: var(--brand);      color: #fff; }
.card-header.dark  { background: var(--brand-dark); color: #fff; }
.card-header.green { background: var(--green);      color: #fff; }

/* ── Help page FAQ accordion ── */
.help-accordion .accordion-item   { border-color: var(--border-light); }
.help-accordion .accordion-button {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  gap: 10px;
}
.help-accordion .accordion-button:not(.collapsed) {
  color: var(--brand-dark);
  background: var(--brand-light);
  box-shadow: inset 0 -1px 0 var(--border-light);
}
.help-accordion .accordion-button:focus {
  box-shadow: inset 0 -1px 0 var(--border-light), 0 0 0 2px rgba(0, 64, 128, .15);
}
.help-accordion .accordion-body {
  font-size: 13px;
  line-height: 1.7;
}
.help-icon { font-size: 16px; line-height: 1; }

/* ── Dashboard stat cards (admin home — Needs Attention + module tiles) ──
   White card, colored left accent + label dot. Number stays neutral/dark
   so the accent color and the dot are what signal category, not a wall
   of colored digits. ── */
.stat-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover       { box-shadow: var(--shadow); transform: translateY(-1px); }
.stat-card .card-body  { padding: 16px 18px; }

.stat-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  flex-shrink: 0;
}
.stat-num {
  margin-top: 6px;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: var(--text);
}
.stat-detail {
  margin: 5px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
}
.stat-link {
  display: block;
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 800;
}

.stat-card--warn   { border-top-color: #f59e0b; }
.stat-card--warn   .stat-dot { background: #f59e0b; }
.stat-card--warn   .stat-link { color: #b45309; } /* darkened from #d97706 — 3.19:1 on white, failed WCAG AA's 4.5:1 */

.stat-card--danger { border-top-color: #ef4444; }
.stat-card--danger .stat-dot { background: #ef4444; }
.stat-card--danger .stat-link { color: #dc2626; }

.stat-card--orange { border-top-color: #f97316; }
.stat-card--orange .stat-dot { background: #f97316; }
.stat-card--orange .stat-link { color: #c2410c; } /* darkened from #ea580c — 3.56:1 on white, failed WCAG AA's 4.5:1 */

.stat-card--amber  { border-top-color: #b45309; }
.stat-card--amber  .stat-dot { background: #b45309; }
.stat-card--amber  .stat-link { color: #92400e; }

.stat-card--blue   { border-top-color: #2563eb; }
.stat-card--blue   .stat-dot { background: #2563eb; }
.stat-card--blue   .stat-link { color: #2563eb; }

.stat-card--green  { border-top-color: #16a34a; }
.stat-card--green  .stat-dot { background: #16a34a; }
.stat-card--green  .stat-link { color: #15803d; } /* darkened from #16a34a — 3.3:1 on white, failed WCAG AA's 4.5:1 */

.stat-card--purple { border-top-color: #7c3aed; }
.stat-card--purple .stat-dot { background: #7c3aed; }
.stat-card--purple .stat-link { color: #7c3aed; }

.stat-card.is-muted             { opacity: .55; border-top-color: #e5e7eb; }
.stat-card.is-muted .stat-dot   { background: #e5e7eb; }
.stat-card.is-muted .stat-num   { color: #94a3b8; }
.stat-card.is-muted .stat-link  { color: #94a3b8; }

/* ── KPI ring — CSS-only conic-gradient progress ring, no chart library ── */
.kpi-ring {
  --size: 58px;
  --thickness: 7px;
  --ring-color: var(--brand);
  width: var(--size);
  height: var(--size);
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--border-light) 0);
}
.kpi-ring-inner {
  width: calc(var(--size) - var(--thickness) * 2);
  height: calc(var(--size) - var(--thickness) * 2);
  margin: var(--thickness);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--text);
}
/* ── List-page toolbar / table wrapper — small layout helpers ── */
.tbl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 10px;
}
.tbl-toolbar .count { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.tbl-toolbar .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tbl-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,20,60,.08), 0 4px 14px rgba(0,20,60,.10), 0 0 0 1px var(--border);
  background: #fff;
}
@media (max-width: 600px) {
  .tbl-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ── Detail / form-view table — no Bootstrap equivalent for key/value layout ── */
table.form-tbl {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}
table.form-tbl th {
  background: var(--brand);
  color: #fff;
  padding: 8px 13px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .4px;
  text-align: left;
}
table.form-tbl td {
  padding: 6px 13px;
  border: 1px solid var(--border-light);
  vertical-align: top;
}
table.form-tbl td.lbl {
  background: var(--brand-light);
  font-weight: 600;
  white-space: nowrap;
  width: 155px;
  color: #002d5c;
  font-size: 12px;
}
table.form-tbl tbody tr:hover td     { background: #eff5ff; }
table.form-tbl tbody tr:hover td.lbl { background: #d6e6f8; }

table.form-tbl td input[type=text],
table.form-tbl td input[type=date],
table.form-tbl td input[type=number],
table.form-tbl td select,
table.form-tbl td textarea { max-width: 100%; }

@media (max-width: 768px) {
  table.form-tbl td.lbl { width: 110px; }
}
@media (max-width: 480px) {
  /* Stack form-view tables: each <td> becomes its own row (label above value) */
  table.form-tbl, table.form-tbl tbody,
  table.form-tbl tr, table.form-tbl td {
    display: block;
    width: 100% !important;
  }
  table.form-tbl td.lbl {
    border-bottom: none;
    padding-bottom: 2px;
    white-space: normal;
  }
  table.form-tbl td:not(.lbl) { padding-top: 2px; margin-bottom: 6px; }
}

/* ── Legacy buttons — .btn-sub/.btn-act/etc. are used throughout the
   templates as plain classes (no Bootstrap .btn base class on the
   element). Give them the same box model as Bootstrap buttons plus
   the NEAM color that matches the equivalent .btn-* variant. ── */
.btn-sub, .btn-act, .btn-grn, .btn-red, .btn-grey, .btn-amber {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 15px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: filter .12s;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.4;
  text-decoration: none;
}
.btn-sub:hover, .btn-act:hover, .btn-grn:hover, .btn-red:hover, .btn-grey:hover, .btn-amber:hover {
  filter: brightness(1.1);
  text-decoration: none;
}
.btn-sub:active, .btn-act:active, .btn-grn:active, .btn-red:active, .btn-grey:active, .btn-amber:active {
  filter: brightness(.9);
}
.btn-sub  { background: var(--brand);      color: #fff; border-color: var(--brand-dark); }
.btn-act  { background: #1e6600;           color: #fff; border-color: #134400; }
.btn-grn  { background: #0a7200;           color: #fff; border-color: #074f00; }
.btn-red  { background: var(--red);        color: #fff; border-color: var(--red-dark); }
.btn-grey { background: var(--grey);       color: #fff; border-color: var(--grey-dark); }
.btn-amber { background: #b45309;          color: #fff; border-color: #7c3a06; }

/* ── Status badges — layered on Bootstrap's .badge box model ── */
.st {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .25px;
  white-space: nowrap;
  line-height: 1.5;
}
.st-collect    { background: #fffbeb; color: #78350f; border: 1px solid #fcd34d; }
.st-onhold     { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.st-prioritycollection, .st-prioritycoll, .st-priority { background: #fffbeb; color: #92400e; border: 1px solid #b45309; }
.st-callnhbec  { background: #fff7ed; color: #7c2d12; border: 1px solid #fdba74; }
.st-processing { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
.st-inprocess  { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
.st-inqueue    { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
.st-working    { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
.st-closed     { background: #f0fdf4; color: #14532d; border: 1px solid #86efac; }
.st-final      { background: #f0fdf4; color: #14532d; border: 1px solid #86efac; }
.st-void       { background: #fef2f2; color: #7f1d1d; border: 1px solid #fca5a5; }
.st-frvoid     { background: #fef2f2; color: #7f1d1d; border: 1px solid #fca5a5; }
.st-new        { background: #fffbeb; color: #78350f; border: 1px solid #fcd34d; }
.st-open       { background: #fffbeb; color: #78350f; border: 1px solid #fcd34d; }
.st-townq      { background: #fff7ed; color: #7c2d12; border: 1px solid #fdba74; }
.st-cart       { background: #faf5ff; color: #4c1d95; border: 1px solid #c4b5fd; }
.st-fieldrep   { background: #ecfeff; color: #164e63; border: 1px solid #67e8f9; }
.st-mapreq     { background: #fff7ed; color: #7c2d12; border: 1px solid #fdba74; }
.st-fieldreq   { background: #ecfeff; color: #164e63; border: 1px solid #67e8f9; }
.st-cartdone   { background: #f0fdf4; color: #14532d; border: 1px solid #86efac; }
.st-frhold     { background: #faf5ff; color: #4c1d95; border: 1px solid #c4b5fd; }

/* ── Helpers ── */
.req   { color: #c53030; font-weight: 700; }
.muted { color: var(--text-muted); font-size: 11.5px; }

/* ── Single-view top-bar status cell ── */
.sv-status-closed,
.sv-status-void,
.sv-status-active { background: #eff6ff; color: #1e40af; border: 2px solid #93c5fd; }

/* ── Legacy fixed-width public form tables: shrink to fit narrow viewports ── */
table[width="960"] { width: 100%; max-width: 960px; }
table.normal { border-collapse: collapse; }
table.normal td, table.normal th { font-family: inherit; font-size: 14px; }

/* ── DataTables 2.x — NEAM navy theme ────────────────────────────────────
 * Controls row (length + search) and bottom row (info + pagination)
 * use the same navy as the table header for a single cohesive card.
 * Bootstrap doesn't style DataTables, so this remains fully custom.
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Data table ── */
table.data-tbl {
  border-collapse: collapse;
  font-size: 12.5px;
  width: 100%;
  min-width: 700px;
  border: none;
}
table.data-tbl thead tr {
  border-bottom: 2px solid var(--brand-dark);
}
table.data-tbl thead th {
  background: linear-gradient(180deg, var(--brand-mid) 0%, var(--brand) 100%);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,.18);
}
table.data-tbl thead th:last-child { border-right: none; }
table.data-tbl tbody td {
  padding: 8px 14px;
  border-bottom: 1px solid #dde3ee;
  border-right: 1px solid #eaeff7;
  vertical-align: middle;
  white-space: normal;
  word-break: break-word;
  max-width: 220px;
  color: var(--text);
  line-height: 1.45;
}
table.data-tbl tbody td:last-child             { border-right: none; }
table.data-tbl tbody td.col-id,
table.data-tbl tbody td.col-date,
table.data-tbl tbody td.col-status             { white-space: nowrap; max-width: none; }
table.data-tbl tbody tr:nth-child(even) td     { background: #f5f8fd; }
table.data-tbl tbody tr:hover td               {
  background: #e8f0fe !important;
  box-shadow: inset 3px 0 0 var(--brand-mid);
}
table.data-tbl tbody tr:hover td:not(:first-child) { box-shadow: none; }
table.data-tbl tbody tr:last-child td          { border-bottom: none; }

/* DataTables scrollX body — slim styled scrollbar */
.dt-scroll-body {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.dt-scroll-body::-webkit-scrollbar        { height: 6px; }
.dt-scroll-body::-webkit-scrollbar-track  { background: #f1f5fb; }
.dt-scroll-body::-webkit-scrollbar-thumb  { background: #b0bcd4; border-radius: 3px; }

/* Wrapper reset */
div.dt-container {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
}

/* ── Top controls row: length select + search ── */
div.dt-container .dt-layout-row:first-child {
  background: var(--brand-dark);
  border-radius: 0;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
div.dt-container .dt-layout-row:first-child .dt-length,
div.dt-container .dt-layout-row:first-child .dt-search {
  color: #a8c8f0;
  font-size: 12px;
}
div.dt-container .dt-layout-row:first-child .dt-length select {
  font-family: inherit;
  font-size: 11.5px;
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  margin: 0 4px;
}
div.dt-container .dt-layout-row:first-child .dt-length select option {
  background: #fff;
  color: var(--text);
}
div.dt-container .dt-layout-row:first-child .dt-search input {
  font-family: inherit;
  font-size: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px;
  padding: 3px 10px;
  width: 200px;
  outline: none;
}
div.dt-container .dt-layout-row:first-child .dt-search input::placeholder {
  color: rgba(168,200,240,.6);
}
div.dt-container .dt-layout-row:first-child .dt-search input:focus {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.18);
}

/* Seamless join: remove table top border/radius when it follows the controls bar */
div.dt-container table.dataTable {
  border-top: none !important;
  border-top-left-radius:  0 !important;
  border-top-right-radius: 0 !important;
  margin: 0 !important;
}

/* ── Bottom controls row: info text + pagination ── */
div.dt-container .dt-layout-row:last-child {
  background: var(--brand-dark);
  border-radius: 0;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
}
div.dt-container .dt-layout-row:last-child .dt-info {
  color: #a8c8f0;
  font-size: 12px;
}

/* ── Pagination buttons ── */
div.dt-container .dt-paging {
  display: flex;
  align-items: center;
  gap: 3px;
}
div.dt-container .dt-paging .dt-paging-button {
  font-family: inherit;
  font-size: 12px;
  color: #fff !important;
  /* Solid background, not translucent-over-navy: this control isn't always
     rendered on the dark dt-container bar (e.g. town-analytics tables put it
     on a plain light card), and a transparent fill there crushed contrast
     to ~1.6:1. Opaque background keeps the ratio fixed regardless of what's
     behind it. */
  background: var(--brand-dark) !important;
  border: 1px solid var(--brand-mid) !important;
  border-radius: 3px !important;
  padding: 3px 10px !important;
  cursor: pointer;
  line-height: 1.5;
  transition: background .12s, border-color .12s;
}
div.dt-container .dt-paging .dt-paging-button:hover {
  background: var(--brand-mid) !important;
  color: #fff !important;
  border-color: #fff !important;
}
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
  background: #fff !important;
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
  border-color: #fff !important;
}
/* The "…" gap-filler between non-contiguous page numbers renders as a bare
   <span class="ellipsis">, outside .dt-paging-button entirely, so it never
   picked up the button text color and fell back to whatever ambient text
   color was behind it — dark on the navy bar (1.19:1), or this light blue
   on a plain white card (1.72:1) on tables that aren't on the navy bar.
   Same fix as the paging buttons: an opaque background makes the ratio
   fixed regardless of what's actually behind it. */
div.dt-container .dt-paging .ellipsis {
  color: #a8c8f0 !important;
  background: var(--brand-dark) !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
}
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover {
  opacity: .35 !important;
  cursor: default !important;
}
/* Arrow nav buttons — bright sky blue on a darker solid chip so they stand out */
div.dt-container .dt-paging .dt-paging-button.first,
div.dt-container .dt-paging .dt-paging-button.previous,
div.dt-container .dt-paging .dt-paging-button.next,
div.dt-container .dt-paging .dt-paging-button.last {
  color: #60c3ff !important;
  background: #0a2f52 !important;
  border-color: var(--brand-mid) !important;
  font-weight: 700;
}
div.dt-container .dt-paging .dt-paging-button.first:hover,
div.dt-container .dt-paging .dt-paging-button.previous:hover,
div.dt-container .dt-paging .dt-paging-button.next:hover,
div.dt-container .dt-paging .dt-paging-button.last:hover {
  color: #fff !important;
  background: var(--brand-mid) !important;
  border-color: #fff !important;
}
div.dt-container .dt-paging .dt-paging-button.first.disabled,
div.dt-container .dt-paging .dt-paging-button.previous.disabled,
div.dt-container .dt-paging .dt-paging-button.next.disabled,
div.dt-container .dt-paging .dt-paging-button.last.disabled {
  color: rgba(96,195,255,.5) !important;
}

/* ── Sort arrows on column headers ── */
table.dataTable thead > tr > th.dt-orderable-asc  span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-asc  span.dt-column-order::after,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order::after {
  opacity: .75 !important;
  color: #a8c8f0;
}
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before {
  opacity: 1 !important;
  color: #ffe066;
}
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::after {
  opacity: .4 !important;
  color: #a8c8f0;
}
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after {
  opacity: 1 !important;
  color: #ffe066;
}
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::before {
  opacity: .4 !important;
  color: #a8c8f0;
}

table.dataTable thead th { cursor: pointer; }
table.dataTable thead th:not(.dt-orderable-none) {
  padding-right: 24px !important;
  position: relative;
}

/* ── DataTables Buttons ── */
div.dt-buttons { display: inline-flex; flex-wrap: wrap; gap: 4px; }

button.dt-btn,
div.dt-buttons button.dt-button,
div.dt-buttons a.dt-button {
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.14) !important;
  color: #e8f0ff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 3px !important;
  padding: 3px 10px !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
  transition: background .12s !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
div.dt-buttons button.dt-button:hover,
div.dt-buttons a.dt-button:hover {
  background: rgba(255,255,255,.26) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
}
div.dt-buttons button.dt-button:active {
  background: rgba(255,255,255,.35) !important;
}

/* ColVis dropdown */
div.dt-button-collection {
  background: var(--brand-dark) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: var(--r) !important;
  padding: 4px 0 !important;
  z-index: 9999 !important;
  min-width: 140px !important;
  box-shadow: 0 4px 14px rgba(0,20,60,.35) !important;
}
div.dt-button-collection button.dt-button,
div.dt-button-collection a.dt-button {
  display: block !important; width: 100% !important;
  text-align: left !important;
  padding: 6px 14px !important;
  border: none !important;
  background: transparent !important;
  color: #a8c8f0 !important;
  font-size: 12px !important;
}
div.dt-button-collection button.dt-button:hover,
div.dt-button-collection button.dt-button.dt-button-active {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

/* ── DataTables processing indicator ── */
div.dt-processing {
  background: rgba(0,32,77,.88) !important;
  border: none !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
  color: #a8c8f0 !important;
  font-size: 12px !important;
  padding: 8px 18px !important;
}

/* ── Toast notifications ── */
.neam-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  z-index: 10000;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  max-width: 340px;
  box-shadow: 0 4px 14px rgba(0,30,80,.28);
}
.neam-toast-success { background: #15803d; }
.neam-toast-error   { background: var(--red); }
.neam-toast-info    { background: var(--brand); }
.neam-toast-warn    { background: #b45309; max-width: 480px; }
.neam-toast-show    { opacity: 1; transform: translateY(0); }

/* ── ACR stage timeline ── */
.acr-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.acr-timeline .st { white-space: nowrap; }

/* ── Overdue pulse dot ── */
@keyframes neam-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%       { opacity: .35; transform: scale(.8); }
}
.neam-pulse-dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; flex-shrink: 0;
  animation: neam-pulse 1.4s ease-in-out infinite;
}

/* -- Print: hide chrome, keep only page content, match the on-screen look --
   @page{margin:0} is what suppresses Chrome's own URL/date/page-number
   header-footer (there's no other CSS hook for that); body gets the margin
   back instead so content isn't flush with the paper edge. The color-adjust
   trio forces backgrounds/colors to actually print instead of being
   stripped to save ink, which is why card headers, status badges, and the
   colored record-id/status tiles were printing washed out/borderless. */
.print-only { display: none; }

@media print {
  @page { margin: 0; }
  header, nav, footer, .no-print { display: none !important; }
  body { margin: 0.4in; padding: 0; }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  .print-only {
    display: block !important;
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .3px;
    color: #000 !important;
    margin-bottom: 14px;
  }
}