/* ==========================================================================
   CPMS design system
   --------------------------------------------------------------------------
   Palette and typeface are taken from dhai-r.com.pk: brand green #216145,
   hover #205F44, secondary #11813a, page ground #f0f2f5, Poppins.

   Two principles govern the rest:

   1. Brand green is reserved for CHROME and PRIMARY ACTION only: the masthead,
      primary buttons, active navigation, section rules. It never encodes data.
      If green meant both "DHA" and "low risk", an officer would have to work
      out which one a given green thing meant, every time.

   2. Status colour is a separate, deliberately non-brand traffic-light scale.
      It appears only on badges and data cells, always paired with text, never
      as the sole carrier of meaning (colour-blind safety).

   Density is high on purpose. This is a compliance instrument used at a desk,
   not a marketing page: the scoring tables are meant to read like the paper
   proforma they replace.
   ========================================================================== */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --dha-green:        #216145;
  --dha-green-hover:  #205f44;
  --dha-green-700:    #1b5039;
  --dha-green-800:    #163f2d;
  --dha-green-900:    #102e21;
  --dha-green-600:    #2a7a56;
  --dha-green-500:    #11813a;
  --dha-green-100:    #d9e8e1;
  --dha-green-50:     #f990f6;          /* overridden below; kept for clarity */
  --dha-green-tint:   #f1f6f4;

  /* ---- neutrals (site ground is #f0f2f5) ------------------------------ */
  --ink:              #16211d;
  --ink-soft:         #44514c;
  --ink-muted:        #6b7772;
  --line:             #dfe4e2;
  --line-strong:      #c6cecb;
  --surface:          #ffffff;
  --surface-sunken:   #f0f2f5;
  --surface-raised:   #f8faf9;

  /* ---- status: traffic light, deliberately off-brand ------------------ */
  --ok:               #0f7a4a;
  --ok-bg:            #e6f4ed;
  --ok-line:          #a8d5c0;
  --warn:             #9a6207;
  --warn-bg:          #fdf3e0;
  --warn-line:        #eccb8a;
  --high:             #b4530d;
  --high-bg:          #fdeee1;
  --high-line:        #f0bd90;
  --danger:           #a51f1f;
  --danger-bg:        #fbeaea;
  --danger-line:      #eeb4b4;
  --info:             #2a5670;
  --info-bg:          #e8f0f5;
  --info-line:        #a3cef1;

  /* ---- shape and depth ------------------------------------------------ */
  --radius:           6px;
  --radius-sm:        4px;
  --radius-lg:        10px;
  --shadow-sm:        0 1px 2px rgba(16, 46, 33, .06);
  --shadow:           0 1px 3px rgba(16, 46, 33, .08), 0 1px 2px rgba(16, 46, 33, .04);
  --shadow-md:        0 4px 12px rgba(16, 46, 33, .10);
  --shadow-lg:        0 10px 28px rgba(16, 46, 33, .14);

  --header-h:         56px;
}

:root { --dha-green-50: #f1f6f4; }

/* ==========================================================================
   Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .font-display {
  font-family: "Poppins", "Segoe UI", system-ui, Arial, sans-serif;
  letter-spacing: -0.011em;
}

/* Tabular figures everywhere a number can be compared down a column. */
.num, td.num, th.num, .tabular { font-variant-numeric: tabular-nums; }

/* Visible focus. Non-negotiable: officers keyboard through long score tables. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--dha-green-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--dha-green-100); color: var(--dha-green-900); }

/* ==========================================================================
   Masthead
   ========================================================================== */

.cpms-header {
  background: linear-gradient(180deg, var(--dha-green) 0%, var(--dha-green-700) 100%);
  color: #fff;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 50;
}

.cpms-brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: #fff;
  text-decoration: none;
}

/* The official crest has a dark green outer ring, almost the same green as the
   masthead, so it is set on a white roundel to stay legible. This is the
   conventional treatment for a crest on a coloured bar. */
.cpms-brand__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.cpms-brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Larger lockup for the login panel. */
.cpms-brand__mark--lg { width: 56px; height: 56px; }

.cpms-brand__title { font-weight: 600; font-size: 14px; line-height: 1.1; }
.cpms-brand__sub {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .72);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cpms-nav { display: flex; align-items: center; gap: .125rem; }

.cpms-nav a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background-color .15s, color .15s;
  white-space: nowrap;
}
.cpms-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* The active item is marked by an underline as well as a tint, so the cue
   survives greyscale printing and low-contrast screens. */
.cpms-nav a.is-active {
  background: rgba(0, 0, 0, .22);
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .85);
}

.cpms-userchip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .3rem .25rem .6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .16);
}
.cpms-userchip__role {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .78);
}
.cpms-userchip__avatar {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 10.5px; font-weight: 600;
}

/* ==========================================================================
   Page furniture
   ========================================================================== */

.page-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: .625rem;
  margin-bottom: 1rem;
}
.page-head h1 { font-size: 19px; font-weight: 600; margin: 0; }
.page-head .page-head__sub { font-size: 12px; color: var(--ink-muted); }

.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  font-size: 11.5px; color: var(--ink-muted); margin-bottom: .5rem;
}
.breadcrumbs a { color: var(--ink-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--dha-green); text-decoration: underline; }
.breadcrumbs .sep { opacity: .45; }

/* ---- card ------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .875rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card__title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft); margin: 0;
}
.card__body { padding: .875rem; }

/* A left rule in brand green marks a section without shouting. */
.card--accent { border-left: 3px solid var(--dha-green); }

/* ---- stat tile -------------------------------------------------------- */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem .875rem;
  box-shadow: var(--shadow-sm);
}
.stat__label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted); font-weight: 500;
}
.stat__value {
  font-size: 26px; font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.stat__meta { font-size: 11px; color: var(--ink-muted); margin-top: .125rem; }
.stat--alert { border-color: var(--danger-line); }
.stat--alert .stat__value { color: var(--danger); }
.stat--warn { border-color: var(--warn-line); }
.stat--warn .stat__value { color: var(--warn); }

/* ==========================================================================
   Tables -- the heart of this application
   ========================================================================== */

table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

table.data-table th, table.data-table td {
  border-bottom: 1px solid var(--line);
  padding: .45rem .6rem;
  vertical-align: top;
  text-align: left;
}
table.data-table thead th {
  background: var(--surface-raised);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .045em;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
/* Row hover rather than zebra striping: stripes add permanent visual noise to
   a 40-row scoring table, hover gives the same tracking help only when needed. */
table.data-table tbody tr:hover { background: var(--dha-green-tint); }
table.data-table tbody tr:last-child td { border-bottom: none; }

/* Vertical rules only where a table is genuinely a grid of readings. */
table.data-table.ruled th + th, table.data-table.ruled td + td { border-left: 1px solid var(--line); }

/* `.table-wrap` sets overflow, which makes it the scroll container, so a
   sticky header sticks to the TOP OF THE WRAP, not the viewport. Offsetting by
   the masthead height here pushed the header down over the first row. */
.sticky-head thead th { position: sticky; top: 0; z-index: 10; }

/* Use this only on a table that scrolls with the PAGE and must clear the
   sticky masthead. */
.sticky-head--page thead th { top: var(--header-h); }

.table-wrap { overflow-x: auto; border-radius: var(--radius); }

/* Row-level state, kept subtle so the badge stays the primary signal. */
tr.row-danger  { background: var(--danger-bg) !important; }
tr.row-danger:hover { background: #f7dede !important; }
tr.row-warn    { background: var(--warn-bg) !important; }
/* Unverified imported/self-declared record: a lighter wash than row-danger. */
tr.row-unverified       { background: #fdf4f4 !important; box-shadow: inset 3px 0 0 var(--danger-line); }
tr.row-unverified:hover { background: #fbecec !important; }
tr.row-muted   { background: var(--surface-sunken); color: var(--ink-muted); }

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.badge--ok     { background: var(--ok-bg);     color: var(--ok);     border-color: var(--ok-line); }
.badge--warn   { background: var(--warn-bg);   color: var(--warn);   border-color: var(--warn-line); }
.badge--high   { background: var(--high-bg);   color: var(--high);   border-color: var(--high-line); }
.badge--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.badge--info   { background: var(--info-bg);   color: var(--info);   border-color: var(--info-line); }
.badge--brand  { background: var(--dha-green-tint); color: var(--dha-green-700); border-color: var(--dha-green-100); }
.badge--neutral{ background: var(--surface-sunken); color: var(--ink-soft); border-color: var(--line-strong); }
.badge--solid  { background: var(--ink); color: #fff; border-color: var(--ink); }

/* A disqualified firm must be unmissable, so it gets the one inverted badge. */
.badge--disqualified {
  background: var(--danger); color: #fff; border-color: var(--danger);
  text-transform: uppercase; letter-spacing: .04em;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .4rem .8rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .06s;
}
.btn:active { transform: translateY(.5px); }

.btn--primary {
  background: var(--dha-green); color: #fff; border-color: var(--dha-green);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--dha-green-hover); border-color: var(--dha-green-hover); }

.btn--secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}
.btn--secondary:hover { background: var(--surface-raised); border-color: var(--ink-muted); }

.btn--ghost { background: transparent; color: var(--dha-green); border-color: transparent; }
.btn--ghost:hover { background: var(--dha-green-tint); }

.btn--danger  { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.btn--danger:hover { background: #f7dede; }

.btn--warn    { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.btn--warn:hover { background: #fbe9cc; }

.btn--sm { padding: .25rem .55rem; font-size: 11.5px; }
.btn--lg { padding: .55rem 1.1rem; font-size: 14px; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ==========================================================================
   Forms
   ========================================================================== */

.field-label {
  display: block;
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .25rem;
}
.field-hint { font-size: 11px; color: var(--ink-muted); margin-top: .2rem; }
.field-error { font-size: 11px; color: var(--danger); margin-top: .2rem; font-weight: 500; }
.req { color: var(--danger); }

input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%;
  padding: .4rem .55rem;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--dha-green);
  box-shadow: 0 0 0 3px rgba(33, 97, 69, .12);
  outline: none;
}
input::placeholder, textarea::placeholder { color: #9aa5a1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--dha-green); width: 15px; height: 15px; }

.filterbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .7rem;
  margin-bottom: .875rem;
  box-shadow: var(--shadow-sm);
}
.filterbar input, .filterbar select { width: auto; min-width: 170px; }

/* ==========================================================================
   Banners
   ========================================================================== */

.banner {
  display: flex; gap: .625rem; align-items: flex-start;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: .625rem .8rem;
  font-size: 13px;
  background: var(--surface);
}
.banner__title { font-weight: 600; margin-bottom: .1rem; }
.banner--ok     { border-left-color: var(--ok);     background: var(--ok-bg);     color: #0c5c38; }
.banner--warn   { border-left-color: var(--warn);   background: var(--warn-bg);   color: #7a4e06; }
.banner--danger { border-left-color: var(--danger); background: var(--danger-bg); color: #8b1a1a; }
.banner--info   { border-left-color: var(--info);   background: var(--info-bg);   color: #23485e; }

/* The blacklist banner is the single loudest element in the application. */
.banner--critical {
  background: var(--danger);
  border-color: var(--danger);
  border-left-color: #7d1717;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.banner--critical .banner__title {
  text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px;
}

/* ==========================================================================
   Scoring wizard
   ========================================================================== */

.stepper { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .75rem; }

.stepper a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12px; font-weight: 500; text-decoration: none;
  transition: all .15s;
}
.stepper a:hover { border-color: var(--dha-green); color: var(--dha-green); }
.stepper a.is-current {
  background: var(--dha-green); border-color: var(--dha-green); color: #fff;
  box-shadow: var(--shadow-sm);
}
.stepper__num {
  display: grid; place-items: center;
  width: 17px; height: 17px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--ink-soft);
  font-size: 10px; font-weight: 700;
}
.stepper a.is-current .stepper__num { background: rgba(255, 255, 255, .25); color: #fff; }
.stepper a.is-done .stepper__num { background: var(--ok-bg); color: var(--ok); }

/* ---- band selector ---------------------------------------------------- */
.bands { display: flex; flex-wrap: wrap; gap: .3rem; }

.band {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .13s;
}
.band:hover { border-color: var(--dha-green); color: var(--dha-green); background: var(--dha-green-tint); }
.band__marks {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: .65;
}
.band.is-selected {
  background: var(--dha-green); border-color: var(--dha-green); color: #fff;
  box-shadow: var(--shadow-sm);
}
.band.is-selected .band__marks { opacity: .9; }

/* A penalty band is red whether or not it is chosen, so the officer sees the
   cost before clicking, not after. */
.band--penalty { border-color: var(--danger-line); color: var(--danger); background: var(--danger-bg); }
.band--penalty:hover { border-color: var(--danger); background: #f7dede; color: var(--danger); }
.band--penalty.is-selected { background: var(--danger); border-color: var(--danger); color: #fff; }

/* The second row of the selector: the individual marks inside the chosen
   band. Deliberately smaller and quieter than the band buttons -- the band is
   the judgement, the mark is only where inside it the officer lands. */
.band-scale {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin-top: .4rem; padding-top: .4rem;
  border-top: 1px dashed var(--line);
}
.band-scale__label {
  font-size: 10.5px; color: var(--ink-muted); margin-right: .15rem;
}
.band-scale__mark {
  min-width: 1.6rem;
  padding: .15rem .35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .13s;
}
.band-scale__mark:hover {
  border-color: var(--dha-green); color: var(--dha-green); background: var(--dha-green-tint);
}
.band-scale__mark.is-selected {
  background: var(--dha-green); border-color: var(--dha-green); color: #fff;
}

/* ---- risk indicator checkbox ------------------------------------------ */
.risk-check {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer; user-select: none;
}
.risk-check input[disabled] { cursor: default; }
.risk-check__state {
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-muted);
}
.row-warn .risk-check__state { color: var(--warn); }

/* ---- running totals --------------------------------------------------- */
.score-hero {
  padding: .875rem;
  background: linear-gradient(160deg, var(--dha-green) 0%, var(--dha-green-800) 100%);
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}
.score-hero__label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: rgba(255, 255, 255, .75);
}
.score-hero__value { font-size: 38px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.score-hero__max { font-size: 14px; color: rgba(255, 255, 255, .65); }

.meter { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 999px; background: #fff; transition: width .35s ease; }

.meter--track { background: var(--surface-sunken); }
.meter--track .meter__fill { background: var(--dha-green); }
.meter--exec .meter__fill { background: var(--dha-green-500); }

.kv { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

/* ==========================================================================
   Heatmap
   ========================================================================== */

.heat {
  display: grid; place-items: center;
  min-width: 34px; padding: .2rem .4rem;
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.heat--0 { color: #c3cbc8; }

/* ==========================================================================
   Login
   ========================================================================== */

.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: var(--surface-sunken);
}

.login-aside {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 12% 8%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(155deg, var(--dha-green) 0%, var(--dha-green-800) 60%, var(--dha-green-900) 100%);
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.login-card { width: 100%; max-width: 380px; }

/* The two-column layout comes LAST so it wins the cascade over the
   single-column defaults above. Panels are placed explicitly rather than by
   source order, so a stray node between them cannot claim a cell and push the
   form onto a second row. */
@media (min-width: 900px) {
  .login-shell { grid-template-columns: 1.05fr .95fr; }
  .login-aside { display: flex; grid-column: 1; grid-row: 1; }
  .login-panel { grid-column: 2; grid-row: 1; padding: 2rem; }
}

/* ==========================================================================
   Print -- the proforma must survive being printed and signed
   ========================================================================== */

@media print {
  .cpms-header, .stepper, .btn, .filterbar, .no-print, footer { display: none !important; }
  body { background: #fff; font-size: 10pt; }
  .card { border: 1px solid #000; box-shadow: none; break-inside: avoid; }
  table.data-table th, table.data-table td { border: 1px solid #000; }
  a { text-decoration: none; color: #000; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}