:root{--navy:#0B2B50;--blue:#0B79D0;--canvas:#F4F7FB;--card:#fff;--text:#14283d;--muted:#64778b;--border:#D8E1EA;--green:#08A04B;--orange:#F59E0B;--red:#ED1C2E;--purple:#6F42C1;--shadow:0 8px 28px rgba(11,43,80,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--canvas)}body{font-size:14px}.app-shell{display:grid;grid-template-columns:250px minmax(950px,1fr);min-width:1200px;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--navy);color:#fff;padding:22px 16px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:18px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--blue);font-size:22px;font-weight:800}.brand strong{display:block;font-size:18px;letter-spacing:.4px}.brand span{display:block;font-size:10px;opacity:.75;letter-spacing:1.3px;margin-top:2px}nav{display:flex;flex-direction:column;gap:4px;overflow:auto}.nav-link{display:flex;align-items:center;gap:10px;color:#dfeaf5;text-decoration:none;padding:10px 11px;border-radius:8px;font-weight:650}.nav-link:hover{background:rgba(255,255,255,.08);color:#fff}.nav-link.active{background:var(--blue);color:#fff}.nav-icon{width:24px;text-align:center;font-size:16px}.nav-divider{border-top:1px solid rgba(255,255,255,.12);margin:10px 0}.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}.user-chip strong,.user-chip span{display:block}.user-chip span{font-size:11px;opacity:.7;margin-top:3px}.small-link{color:#bcd8ef;font-size:12px;text-decoration:none;display:inline-block;margin:10px 0}.sidebar-logout{width:100%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:7px;padding:8px;cursor:pointer}.main{padding:0 28px 40px;min-width:0}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);margin-bottom:22px}.eyebrow{font-size:10px;font-weight:800;color:var(--blue);letter-spacing:1.3px}.topbar h1{margin:4px 0 0;font-size:26px;color:var(--navy)}.topbar-right{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.secure-dot{width:9px;height:9px;border-radius:50%;background:var(--green)}.flash{padding:12px 14px;border-radius:8px;margin:0 0 18px;border:1px solid}.flash.success{background:#ecfbf3;border-color:#a9e3c4;color:#116638}.flash.error{background:#fff0f0;border-color:#ffc1c1;color:#9b1c1c}.grid{display:grid;gap:16px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:18px}.card.accent{border-top:4px solid var(--blue)}.card.warning{border-top:4px solid var(--orange)}.card.danger{border-top:4px solid var(--red)}.card.success{border-top:4px solid var(--green)}.metric-label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.metric-value{font-size:26px;font-weight:800;color:var(--navy);margin-top:7px}.metric-sub{font-size:12px;color:var(--muted);margin-top:5px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px}.section-head h2{font-size:18px;color:var(--navy);margin:0}.toolbar{display:flex;align-items:center;gap:8px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 13px;border-radius:7px;border:1px solid transparent;font-weight:750;text-decoration:none;cursor:pointer;font-family:inherit}.btn.primary{background:var(--blue);color:#fff}.btn.success{background:var(--green);color:#fff}.btn.warning{background:var(--orange);color:#fff}.btn.danger{background:var(--red);color:#fff}.btn.navy{background:var(--navy);color:#fff}.btn.ghost{background:#fff;border-color:var(--border);color:var(--navy)}.btn:hover{filter:brightness(.96)}.btn.small{min-height:30px;padding:5px 9px;font-size:12px}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:10px;background:#fff}.table{border-collapse:collapse;width:100%;min-width:850px}.table th{position:sticky;top:0;background:#edf3f8;color:var(--navy);font-size:11px;text-transform:uppercase;letter-spacing:.45px;text-align:left;padding:10px;border-bottom:1px solid var(--border)}.table td{padding:10px;border-bottom:1px solid #edf1f5;vertical-align:top}.table tr:hover td{background:#f9fbfd}.num{text-align:right!important;font-variant-numeric:tabular-nums}.badge{display:inline-block;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:800;background:#edf3f8;color:var(--navy)}.badge.green{background:#e8f8ef;color:#08783a}.badge.orange{background:#fff4df;color:#9a5b00}.badge.red{background:#ffe9e9;color:#a91818}.badge.blue{background:#e7f3fc;color:#075e9f}.panel-title{font-size:16px;font-weight:800;color:var(--navy);margin:0 0 14px}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.form-grid.two{grid-template-columns:1fr 1fr}.field{display:flex;flex-direction:column;gap:5px}.field.full{grid-column:1/-1}.field label{font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.4px}.field input,.field select,.field textarea{width:100%;border:1px solid #c9d5df;border-radius:7px;background:#fff;color:#111;font-weight:650;padding:9px 10px;font-family:inherit;min-height:38px}.field textarea{min-height:76px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid rgba(11,121,208,.18);border-color:var(--blue)}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.muted{color:var(--muted)}.right{text-align:right}.attention-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.attention{border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:8px;padding:13px;background:#fff}.attention strong{font-size:22px;color:var(--navy);display:block}.forecast-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.week-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:15px}.week-card.negative{border-top:4px solid var(--red)}.week-card.positive{border-top:4px solid var(--green)}.week-card h3{margin:0;color:var(--navy)}.week-row{display:flex;justify-content:space-between;margin-top:8px;font-size:12px}.week-row.total{font-weight:800;border-top:1px solid var(--border);padding-top:8px}.kpi-strip{display:flex;gap:12px}.kpi-strip>div{flex:1;background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px}.auth-shell{background:linear-gradient(135deg,#081f3b,#0B2B50 55%,#0B79D0);display:grid;place-items:center;min-height:100vh}.auth-main{width:min(460px,92vw)}.auth-card{background:#fff;border-radius:16px;padding:30px;box-shadow:0 25px 70px rgba(0,0,0,.25)}.auth-card h1{color:var(--navy);margin:0 0 5px}.auth-logo{display:flex;align-items:center;gap:11px;margin-bottom:24px}.auth-logo .brand-mark{color:#fff}.auth-card .field{margin-top:12px}.auth-card .btn{width:100%;margin-top:16px}.auth-links{display:flex;justify-content:space-between;margin-top:14px}.auth-links a{font-size:12px;color:var(--blue);text-decoration:none}.note{padding:12px;border-radius:8px;background:#f0f5fa;border:1px solid var(--border);font-size:12px;color:var(--muted)}.danger-zone{border:1px solid #ffc6c6;background:#fff7f7;border-radius:8px;padding:10px}.nowrap{white-space:nowrap}.search-input{max-width:280px}.empty{padding:30px;text-align:center;color:var(--muted)}@media print{.sidebar,.topbar,.toolbar,.no-print,.flash{display:none!important}.app-shell{display:block;min-width:0}.main{padding:0}.card{box-shadow:none}.table th{position:static}}
.inline-form{display:flex;gap:6px;align-items:center}.mini-input{width:90px;border:1px solid var(--border);border-radius:6px;padding:6px 7px}.void-form{display:flex;gap:6px;align-items:center;margin-top:8px;min-width:260px}.void-form input{border:1px solid var(--border);border-radius:6px;padding:7px}.json-box{max-width:420px;max-height:220px;overflow:auto;background:#f6f8fb;border:1px solid var(--border);border-radius:7px;padding:8px;font-size:10px;white-space:pre-wrap}.event-list{margin-top:8px;border-top:1px solid var(--border)}.event-list>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #edf1f5;font-size:11px}.positive-text{color:var(--green)}.negative-text{color:var(--red)}details summary{cursor:pointer}a{color:var(--blue)}
.edit-pop{display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));gap:7px;padding:10px;margin-top:7px;min-width:430px;background:#f8fafc;border:1px solid var(--border);border-radius:8px}.edit-pop input,.edit-pop select{border:1px solid var(--border);border-radius:6px;padding:7px;background:#fff;min-width:0}
.week-card.past-week{border-top:4px solid #9aa9b7;opacity:.72}

.simple-capture{max-width:1180px}.field-help{font-size:10px;color:var(--muted);margin-top:-1px}.password-wrap{position:relative;width:100%}.password-wrap input{padding-right:64px!important}.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--blue);font:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:4px 6px}.password-toggle:hover{text-decoration:underline}
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.deleted-panel{margin-top:16px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px}.deleted-panel>summary{font-weight:800;color:var(--navy);padding:4px 0}.deleted-panel .table-wrap{margin-top:10px}.field input[readonly]{background:#f3f6f9;color:var(--navy)}

/* Payroll integration v1.3 */
.stacked-action{display:grid;gap:6px;min-width:180px}.stacked-action .mini-input{width:100%}.warning-card{border-left:4px solid #f59e0b}.badge.red{background:#fee2e2;color:#991b1b}.tabs-row .btn{text-decoration:none}

/* =========================================================
   v1.5.1 - responsive/no-page-horizontal-scroll hotfix
   ========================================================= */

html,
body {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.app-shell {
  grid-template-columns:250px minmax(0,1fr) !important;
  min-width:0 !important;
  width:100%;
  max-width:100vw;
}

.main {
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
}

.grid.two {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid.three {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.card,
.grid > *,
.section-head {
  min-width:0;
}

.table-wrap {
  width:100%;
  max-width:100%;
  min-width:0;
}

/* Subbies capture area gets full width rather than squeezing
   five fields into half of the available screen. */
.subby-entry-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.subby-entry-grid .card {
  width:100%;
  max-width:100%;
}

.subby-entry-grid .form-grid {
  grid-template-columns:repeat(5,minmax(0,1fr));
}

.subby-entry-grid .card:first-child .form-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:720px;
}

/* Subcontractor tables fit the page rather than forcing a
   horizontal browser scrollbar. */
.subby-table {
  width:100% !important;
  min-width:0 !important;
  table-layout:fixed;
}

.subby-table th,
.subby-table td {
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  padding:8px 6px;
}

#subbyMasterTable th:nth-child(1) { width:22%; }
#subbyMasterTable th:nth-child(2) { width:18%; }
#subbyMasterTable th:nth-child(3) { width:16%; }
#subbyMasterTable th:nth-child(4) { width:16%; }
#subbyMasterTable th:nth-child(5) { width:12%; }
#subbyMasterTable th:nth-child(6) { width:16%; }

#subbyCostTable th:nth-child(1) { width:12%; }
#subbyCostTable th:nth-child(2) { width:10%; }
#subbyCostTable th:nth-child(3) { width:12%; }
#subbyCostTable th:nth-child(4) { width:17%; }
#subbyCostTable th:nth-child(5) { width:9%; }
#subbyCostTable th:nth-child(6) { width:9%; }
#subbyCostTable th:nth-child(7) { width:8%; }
#subbyCostTable th:nth-child(8) { width:10%; }
#subbyCostTable th:nth-child(9) { width:13%; }

.subby-table .row-actions,
.subby-table .inline-form {
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}

.subby-table .mini-input {
  width:100%;
  max-width:130px;
}

.subby-table .edit-pop {
  min-width:0;
  width:100%;
  max-width:100%;
  grid-template-columns:1fr;
}

/* Prevent generic forms from creating page-width overflow. */
.inline-form,
.void-form {
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}

.edit-pop {
  max-width:100%;
}

/* Reduce cleanly on narrower desktop windows. */
@media (max-width:1200px) {
  .subby-entry-grid .form-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grid.cards,
  .forecast-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .attention-list {
    grid-template-columns:1fr;
  }
}

/* =========================================================
   v1.5.2 - permanently fixed left navigation
   ========================================================= */

:root {
  --sidebar-width:250px;
}

.sidebar {
  position:fixed !important;
  left:0;
  top:0;
  bottom:0;
  width:var(--sidebar-width);
  height:100vh;
  z-index:1000;
  overflow:hidden;
}

.sidebar nav {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

.sidebar-footer {
  flex-shrink:0;
}

.app-shell {
  display:block !important;
  width:100%;
  max-width:100%;
  min-width:0 !important;
}

.main {
  margin-left:var(--sidebar-width);
  width:calc(100% - var(--sidebar-width));
  max-width:calc(100% - var(--sidebar-width));
  min-width:0;
  overflow-x:hidden;
  padding-left:28px;
  padding-right:28px;
}

html,
body {
  max-width:100%;
  overflow-x:hidden;
}

@media (max-width:900px) {
  :root {
    --sidebar-width:220px;
  }

  .main {
    padding-left:18px;
    padding-right:18px;
  }
}


/* =========================================================
   v1.5.2 - permanently fixed left navigation
   ========================================================= */

:root {
  --sidebar-width:250px;
}

.sidebar {
  position:fixed !important;
  left:0;
  top:0;
  bottom:0;
  width:var(--sidebar-width);
  height:100vh;
  z-index:1000;
  overflow:hidden;
}

.sidebar nav {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}

.sidebar-footer {
  flex-shrink:0;
}

.app-shell {
  display:block !important;
  width:100%;
  max-width:100%;
  min-width:0 !important;
}

.main {
  margin-left:var(--sidebar-width);
  width:calc(100% - var(--sidebar-width));
  max-width:calc(100% - var(--sidebar-width));
  min-width:0;
  overflow-x:hidden;
  padding-left:28px;
  padding-right:28px;
}

html,
body {
  max-width:100%;
  overflow-x:hidden;
}

@media (max-width:900px) {
  :root {
    --sidebar-width:220px;
  }

  .main {
    padding-left:18px;
    padding-right:18px;
  }
}


/* =========================================================
   FIXED SIDEBAR - NO INTERNAL SCROLLING
   ========================================================= */

.sidebar {
  padding:12px 10px !important;
  overflow:hidden !important;
}

.brand {
  padding:0 8px 12px !important;
  margin-bottom:8px !important;
}

.brand-mark {
  width:36px !important;
  height:36px !important;
}

nav {
  overflow:hidden !important;
  gap:1px !important;
  flex:1 1 auto !important;
  min-height:0 !important;
}

.nav-link {
  padding:7px 9px !important;
  min-height:32px !important;
  font-size:13px !important;
  line-height:1.15 !important;
  gap:8px !important;
}

.nav-icon {
  width:22px !important;
  font-size:14px !important;
}

.nav-divider {
  margin:5px 0 !important;
}

.sidebar-footer {
  margin-top:6px !important;
  padding-top:8px !important;
  flex-shrink:0 !important;
}

.user-chip strong {
  font-size:13px !important;
}

.user-chip span {
  font-size:10px !important;
  margin-top:1px !important;
}

.small-link {
  margin:5px 0 !important;
  font-size:11px !important;
}

.sidebar-logout {
  padding:6px !important;
  font-size:12px !important;
}

/* Extra compacting on screens similar to 768px high laptops */
@media (max-height:850px) {
  .sidebar {
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .brand {
    padding-bottom:8px !important;
    margin-bottom:5px !important;
  }

  .nav-link {
    padding:5px 8px !important;
    min-height:28px !important;
    font-size:12.5px !important;
  }

  .sidebar-footer {
    padding-top:5px !important;
    margin-top:3px !important;
  }

  .small-link {
    margin:3px 0 !important;
  }

  .sidebar-logout {
    padding:5px !important;
  }
}

/* =========================================================
   COMPACT ONE-SCREEN FINANCIAL DASHBOARD
   ========================================================= */

body:has(.attention-list) .topbar {
  height:64px !important;
  margin-bottom:12px !important;
}

body:has(.attention-list) .topbar h1 {
  font-size:22px !important;
}

body:has(.attention-list) .main {
  padding-top:0 !important;
  padding-bottom:12px !important;
}

body:has(.attention-list) .grid.cards {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-bottom:10px !important;
}

body:has(.attention-list) .card {
  padding:11px 13px !important;
  border-radius:9px !important;
}

body:has(.attention-list) .metric-label {
  font-size:10px !important;
}

body:has(.attention-list) .metric-value {
  font-size:21px !important;
  margin-top:3px !important;
}

body:has(.attention-list) .metric-sub {
  font-size:10px !important;
  margin-top:2px !important;
}

body:has(.attention-list) .section-head {
  margin:10px 0 7px !important;
}

body:has(.attention-list) .section-head h2 {
  font-size:16px !important;
}

/* Attention Required - compact single row */
body:has(.attention-list) .attention-list {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
}

body:has(.attention-list) .attention {
  padding:8px 10px !important;
  min-height:58px !important;
}

body:has(.attention-list) .attention strong {
  font-size:18px !important;
}

body:has(.attention-list) .attention div,
body:has(.attention-list) .attention span {
  font-size:10px !important;
}

/* Cash-flow week summary */
body:has(.attention-list) .forecast-grid {
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:7px !important;
}

body:has(.attention-list) .week-card {
  padding:8px 10px !important;
  border-radius:8px !important;
}

body:has(.attention-list) .week-card h3 {
  font-size:12px !important;
}

body:has(.attention-list) .week-row {
  margin-top:3px !important;
  font-size:10px !important;
}

body:has(.attention-list) .week-row.total {
  padding-top:4px !important;
}

/* Smaller dashboard buttons */
body:has(.attention-list) .btn {
  min-height:30px !important;
  padding:5px 10px !important;
  font-size:11px !important;
}

/* Compact dashboard specifically for normal laptop heights */
@media (max-height:950px) {
  body:has(.attention-list) .grid.cards {
    gap:7px !important;
  }

  body:has(.attention-list) .card {
    padding:8px 11px !important;
  }

  body:has(.attention-list) .metric-value {
    font-size:19px !important;
  }

  body:has(.attention-list) .section-head {
    margin:7px 0 5px !important;
  }

  body:has(.attention-list) .attention {
    min-height:50px !important;
    padding:6px 9px !important;
  }

  body:has(.attention-list) .week-card {
    padding:6px 8px !important;
  }
}

/* =========================================================
   SIDEBAR AUTO-FIT - REMOVE LARGE EMPTY GAP
   ========================================================= */

.sidebar {
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
}

.sidebar nav {
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.sidebar-footer {
  margin-top:10px !important;
  padding-top:10px !important;
  flex:0 0 auto !important;
}

/* Keep divider spacing compact */
.sidebar .nav-divider {
  margin:5px 0 !important;
}

/* Let unused blue space remain only below the entire menu/footer,
   not between Users & Security and the user controls. */

/* =========================================================
   DASHBOARD FINAL ONE-SCREEN FIT
   ========================================================= */

body:has(.cashflow-cards) .cashflow-cards {
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-bottom:6px !important;
}

body:has(.cashflow-cards) .topbar {
  height:52px !important;
  margin-bottom:6px !important;
}

body:has(.cashflow-cards) .topbar h1 {
  font-size:21px !important;
}

body:has(.cashflow-cards) .section-head {
  margin:6px 0 4px !important;
}

body:has(.cashflow-cards) .section-head h2 {
  font-size:15px !important;
}

body:has(.cashflow-cards) .grid.cards {
  margin-bottom:6px !important;
}

body:has(.cashflow-cards) .card {
  padding:7px 10px !important;
}

body:has(.cashflow-cards) .metric-value {
  font-size:18px !important;
  margin-top:2px !important;
}

body:has(.cashflow-cards) .metric-label {
  font-size:9px !important;
}

body:has(.cashflow-cards) .metric-sub {
  font-size:9px !important;
  margin-top:1px !important;
  line-height:1.15 !important;
}

body:has(.cashflow-cards) .attention {
  min-height:44px !important;
  padding:5px 8px !important;
}

body:has(.cashflow-cards) .attention strong {
  font-size:16px !important;
}

body:has(.cashflow-cards) .forecast-grid {
  gap:6px !important;
}

body:has(.cashflow-cards) .week-card {
  padding:5px 8px !important;
}

body:has(.cashflow-cards) .week-card h3 {
  font-size:11px !important;
  margin:0 !important;
}

body:has(.cashflow-cards) .week-card > .muted {
  font-size:9px !important;
  line-height:1.1 !important;
}

body:has(.cashflow-cards) .week-row {
  margin-top:2px !important;
  font-size:9px !important;
}

body:has(.cashflow-cards) .week-row.total {
  padding-top:2px !important;
}

body:has(.cashflow-cards) .btn {
  min-height:27px !important;
  padding:4px 9px !important;
  font-size:10px !important;
}

/* =========================================================
   SUPPLIER ACCOUNT BUTTON + DETAIL VIEW
   ========================================================= */

.supplier-button-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:9px;
  margin-bottom:18px;
}

.supplier-account-button {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--navy);
  text-decoration:none;
}

.supplier-account-button:hover {
  border-color:var(--blue);
  background:#f6fbff;
}

.supplier-account-button.active {
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.supplier-account-button strong {
  font-size:13px;
  overflow-wrap:anywhere;
}

.supplier-account-button span {
  font-size:10px;
  opacity:.78;
}

.supplier-button-total {
  font-size:14px !important;
  font-weight:800;
  margin-top:3px;
}

.supplier-selected-card {
  padding:14px 16px !important;
}

.supplier-account-title {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  min-width:0;
}

.supplier-account-title h2 {
  margin:3px 0 4px;
  color:var(--navy);
}

.supplier-account-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(110px,1fr));
  gap:8px;
  flex:1;
  max-width:720px;
}

.supplier-account-summary > div {
  background:#f6f9fc;
  border:1px solid var(--border);
  border-radius:7px;
  padding:7px 9px;
  min-width:0;
}

.supplier-account-summary span,
.supplier-account-summary strong {
  display:block;
}

.supplier-account-summary span {
  font-size:9px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}

.supplier-account-summary strong {
  margin-top:2px;
  font-size:13px;
  color:var(--navy);
}

.supplier-account-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.supplier-invoice-list {
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}

.supplier-invoice-header,
.supplier-invoice-row {
  display:grid;
  grid-template-columns:
    minmax(90px,.8fr)
    minmax(120px,1fr)
    minmax(130px,1fr)
    minmax(200px,2fr)
    minmax(100px,.8fr);
  gap:10px;
  align-items:center;
}

.supplier-invoice-header {
  background:#edf3f8;
  padding:9px 12px;
  color:var(--navy);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}

.supplier-invoice-row {
  padding:9px 12px;
  border-top:1px solid #edf1f5;
  min-width:0;
}

.supplier-invoice-row > div {
  min-width:0;
  overflow-wrap:anywhere;
}

.supplier-invoice-total {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-top:2px solid var(--navy);
  background:#f5f8fb;
  padding:12px 14px;
  color:var(--navy);
}

.supplier-invoice-total > div span {
  display:block;
  margin-top:2px;
  font-size:10px;
  color:var(--muted);
}

.supplier-invoice-total > strong {
  font-size:18px;
}

.supplier-account-note {
  margin-top:14px;
  padding:10px 14px !important;
}

@media(max-width:1100px) {
  .supplier-account-title {
    display:block;
  }

  .supplier-account-summary {
    margin-top:10px;
    max-width:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .supplier-invoice-header,
  .supplier-invoice-row {
    grid-template-columns:
      minmax(80px,.8fr)
      minmax(100px,1fr)
      minmax(110px,1fr)
      minmax(160px,1.5fr)
      minmax(90px,.8fr);
  }
}


/* =========================================================
   SUPPLIER ACCOUNT PDF / PRINT
   ========================================================= */

.supplier-print-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin:10px 0 0;
}

@media print {

  @page {
    size:A4 landscape;
    margin:12mm;
  }

  body {
    background:#fff !important;
  }

  .supplier-selected-card,
  .supplier-invoice-list {
    box-shadow:none !important;
    border:1px solid #cfd8e1 !important;
  }

  .supplier-selected-card {
    margin-top:0 !important;
  }

  .supplier-detail-heading {
    margin-top:12px !important;
  }

  .supplier-invoice-header {
    display:grid !important;
    grid-template-columns:
      80px
      125px
      135px
      minmax(240px,1fr)
      110px !important;
  }

  .supplier-invoice-row {
    display:grid !important;
    grid-template-columns:
      80px
      125px
      135px
      minmax(240px,1fr)
      110px !important;
    break-inside:avoid;
    page-break-inside:avoid;
  }

  .supplier-invoice-total {
    break-inside:avoid;
    page-break-inside:avoid;
  }

  .supplier-account-summary {
    grid-template-columns:repeat(4,1fr) !important;
  }

}

/* =========================================================
   WEEKLY PAYROLL - FRIDAY THROUGH THURSDAY
   ========================================================= */

.payroll-cycle-note {
  background:#eef7ff;
  border:1px solid #bddcf4;
  border-left:4px solid var(--blue);
  border-radius:7px;
  padding:8px 11px;
  margin:0 0 12px;
  color:var(--navy);
  font-size:12px;
}

.payroll-cycle-note strong {
  font-weight:800;
}

/* =========================================================
   AUTOMATED PAYROLL - FRIDAY TO THURSDAY
   ========================================================= */

.payroll-auto-head .section-head {
  gap:20px;
}

.payroll-cycle-note {
  display:inline-block;
  margin:6px 0 6px;
  padding:7px 10px;
  background:#eef7ff;
  border:1px solid #c5def1;
  border-left:4px solid var(--blue);
  border-radius:7px;
  color:var(--navy);
  font-size:12px;
}

.payroll-head-controls {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.payroll-date-jump {
  justify-content:flex-end;
}

.payroll-auto-summary {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 12px;
}

.payroll-auto-summary > div {
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  padding:10px 12px;
}

.payroll-auto-summary span {
  display:block;
  color:var(--muted);
  text-transform:uppercase;
  font-size:9px;
  font-weight:800;
  letter-spacing:.4px;
}

.payroll-auto-summary strong {
  display:block;
  margin-top:2px;
  color:var(--navy);
  font-size:20px;
}

.payroll-auto-summary .ready {
  border-left:4px solid var(--green);
}

.payroll-auto-summary .issue {
  border-left:4px solid var(--red);
  background:#fff7f7;
}

.payroll-timesheet-head {
  gap:20px;
}

.payroll-timesheet-head form {
  flex-shrink:0;
}

.payroll-timesheet-head button[disabled] {
  opacity:.45;
  cursor:not-allowed;
}

@media(max-width:1200px) {

  .payroll-auto-head .section-head {
    display:block;
  }

  .payroll-head-controls {
    align-items:flex-start;
    margin-top:12px;
  }

  .payroll-auto-summary {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

/* =========================================================
   JOB CARD COSTING
   ========================================================= */

.job-card-top {
  margin-top:14px;
}

.job-cost-kpis {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.job-card-maintenance {
  margin-top:14px;
}

.job-labour-warning {
  border-left:4px solid var(--orange);
  margin:12px 0 16px;
}

.job-card-table {
  min-width:1180px;
}

@media(max-width:1200px) {
  .job-cost-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   AUTOMATED JOB PROFITABILITY + LABOUR
   ========================================================= */

.job-auto-info {
  margin-top:12px;
}

.job-auto-ok {
  border-left:4px solid var(--green);
  margin:12px 0;
}

.job-manual-form {
  min-width:360px;
}

.job-cost-kpis {
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.job-card-table {
  min-width:1500px;
}

.job-card-maintenance {
  margin-top:14px;
}

@media(max-width:1350px) {
  .job-cost-kpis {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   GLOBAL DROPDOWN UPPERCASE
   Display only - stored values remain unchanged.
   ========================================================= */

select,
select option,
select optgroup {
  text-transform: uppercase !important;
}


/* =========================================================
   JOB CARD AUTO DETAILS
   ========================================================= */

input[list] {
  text-transform: uppercase;
}

.job-card-auto-details {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  color: var(--navy);
  text-transform: uppercase;
}

.job-card-auto-details.job-card-warning {
  color: #a13d00;
}



/* =========================================================
   JOB CARD VERTICAL REGISTER V1
   Applies only to the Job Card Register.
   No global width changes.
   ========================================================= */

.job-card-vertical-register {
  display: grid;
  gap: 12px;
  width: 100%;
}

.job-card-register-card {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: var(--shadow);
  padding: 15px 16px;
}

.job-card-register-card.clickable {
  cursor: pointer;
}

.job-card-register-card.clickable:hover {
  border-color: var(--blue);
}

.job-card-register-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid #e5edf4;
}

.job-card-register-identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.job-card-register-number {
  color: var(--navy);
  font-size: 17px;
  font-weight: 850;
}

.job-card-register-name {
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
}

.job-card-register-status {
  flex: 0 0 auto;
}

.job-card-register-details {
  display: grid;
  grid-template-columns:
    minmax(0,2fr)
    minmax(160px,1fr);
  gap: 10px 22px;
  margin-top: 11px;
  padding-bottom: 11px;
}

.job-card-register-details > div {
  min-width: 0;
  font-weight: 650;
}

.job-card-register-details span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.job-card-finance-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
  gap: 8px;
}

.job-finance-metric {
  min-width: 0;
  background: #f7fafc;
  border: 1px solid #dce6ee;
  border-radius: 8px;
  padding: 9px 10px;
}

.job-finance-metric.important {
  background: #edf3f8;
}

.job-finance-label {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.job-finance-value {
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (max-width: 1250px) {

  .job-card-finance-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}

@media (max-width: 760px) {

  .job-card-register-head {
    display: block;
  }

  .job-card-register-status {
    margin-top: 8px;
  }

  .job-card-register-details {
    grid-template-columns: 1fr;
  }

  .job-card-finance-grid {
    grid-template-columns: 1fr;
  }

}



/* =========================================================
   JOB CARD FILTER TOOLBAR V1
   Job Cards page only
   ========================================================= */

.job-card-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.job-card-filter-toolbar .search-input {
  width: 310px;
  max-width: 100%;
}

.job-card-status-filter {
  width: 210px;
  min-width: 190px;
  text-transform: uppercase;
  font-weight: 700;
}

.job-card-result-count {
  min-width: 88px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 900px) {

  .job-card-filter-toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .job-card-filter-toolbar .search-input,
  .job-card-status-filter {
    width: 100%;
  }

  .job-card-result-count {
    width: 100%;
    text-align: left;
  }

}



/* =========================================================
   DASHBOARD CURRENT POSITION V1
   Dashboard only.
   Forecast detail remains on /forecast.
   ========================================================= */

.dashboard-current-page {
  width: 100%;
}

.dashboard-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.dashboard-intro h2 {
  margin: 4px 0 6px;
}

.dashboard-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(210px,1fr)
    );
  gap: 12px;
  margin-bottom: 22px;
}

.dashboard-metric {
  min-width: 0;
  padding: 15px 16px;
}

.dashboard-metric-label {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.dashboard-metric-value {
  color: var(--navy);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.15;
}

.dashboard-metric-value.positive {
  color: #078847;
}

.dashboard-metric-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
}

.dashboard-attention-grid {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );
  gap: 12px;
  margin-bottom: 22px;
}

.dashboard-attention-card {
  display: block;
  min-width: 0;
  padding: 14px 16px;
  color: var(--navy);
  text-decoration: none;
}

.dashboard-attention-card:hover {
  border-color: var(--blue);
}

.dashboard-attention-card.danger {
  border-color: #df3b44;
}

.dashboard-attention-number {
  margin-bottom: 3px;
  font-size: 24px;
  font-weight: 900;
}

.dashboard-forward-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.dashboard-forward-metrics {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(150px,1fr)
    );
  gap: 14px;
  flex: 1;
}

.dashboard-forward-metrics > div {
  min-width: 0;
}

.dashboard-forward-metrics span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-forward-metrics strong {
  display: block;
  color: var(--navy);
  font-size: 19px;
}

.dashboard-forward-metrics strong.positive {
  color: #078847;
}

.dashboard-forward-metrics .projected {
  border-left: 3px solid var(--blue);
  padding-left: 14px;
}

@media (max-width: 1100px) {

  .dashboard-attention-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}

@media (max-width: 760px) {

  .dashboard-intro,
  .dashboard-forward-card {
    display: block;
  }

  .dashboard-intro .btn,
  .dashboard-forward-card .btn {
    margin-top: 12px;
  }

  .dashboard-attention-grid,
  .dashboard-forward-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-forward-metrics .projected {
    border-left: 0;
    border-top: 3px solid var(--blue);
    padding-left: 0;
    padding-top: 10px;
  }

}



/* =========================================================
   MONTHLY REAL-TIME FORECAST V1
   Forecast page only.
   No fixed Week 1-5 layout.
   ========================================================= */

.monthly-forecast-header {
  display: grid;
  grid-template-columns:
    minmax(220px,1fr)
    auto
    auto;
  align-items: end;
  gap: 16px;
}

.monthly-forecast-header h2 {
  margin: 4px 0 5px;
  color: var(--navy);
  font-size: 22px;
}

.monthly-forecast-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.monthly-forecast-picker {
  align-items: end;
}

.monthly-mode-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 12px 0 16px;
}

.monthly-forecast-summary {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(185px,1fr)
    );
  gap: 12px;
  margin-top: 14px;
}

.monthly-forecast-rule {
  margin-top: 14px;
}

.monthly-forecast-rule strong {
  display: block;
  margin-bottom: 5px;
  color: var(--navy);
}

.monthly-forecast-table th:nth-child(1) {
  width: 110px;
}

.monthly-forecast-table th:nth-child(2) {
  width: 90px;
}

.monthly-forecast-table th:nth-child(3) {
  width: 90px;
}

.monthly-forecast-table th:nth-child(5),
.monthly-forecast-table th:nth-child(6) {
  width: 145px;
}

@media (max-width: 1200px) {

  .monthly-forecast-header {
    grid-template-columns:
      1fr;
    align-items: start;
  }

}



/* =========================================================
   FINANCE AUTOMATION CENTRE V2.0
   SCOPED ONLY - NO GLOBAL LAYOUT WIDTH CHANGES
   ========================================================= */

.automation-page,
.monthly-forecast-page {
  width:100%;
  min-width:0;
}

.automation-hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.automation-hero h2 {
  margin:4px 0 6px;
  color:var(--navy);
}

.automation-kpi-grid,
.automation-age-grid,
.monthly-forecast-summary {
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(185px,1fr)
    );
  gap:12px;
  margin-top:14px;
}

.automation-section-grid {
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}

.automation-section-grid h3 {
  margin:0 0 10px;
  color:var(--navy);
}

.automation-age-value {
  font-size:22px;
  font-weight:850;
  color:var(--navy);
  margin:7px 0;
}

.automation-exception-grid {
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(230px,1fr)
    );
  gap:10px;
}

.automation-exception {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--navy);
  padding:13px;
}

.automation-exception.high {
  border-left:4px solid var(--red);
}

.automation-exception.medium {
  border-left:4px solid var(--orange);
}

.automation-exception.low {
  border-left:4px solid var(--blue);
}

.automation-exception-count {
  font-size:25px;
  font-weight:900;
  min-width:38px;
}

.automation-list {
  display:grid;
  gap:7px;
}

.automation-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  padding:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  min-width:0;
}

.automation-row > div {
  min-width:0;
}

.automation-row strong {
  overflow-wrap:anywhere;
}

.automation-term-grid {
  display:grid;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px,1fr)
    );
  gap:10px;
}

.automation-term-card {
  display:grid;
  gap:12px;
}

.automation-term-card form {
  display:flex;
  gap:8px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.automation-term-card .field {
  flex:1;
  min-width:160px;
}

.automation-page .section-head {
  margin-top:24px;
}

.monthly-forecast-header {
  display:grid;
  grid-template-columns:
    minmax(220px,1fr)
    auto
    auto;
  align-items:end;
  gap:16px;
}

.monthly-forecast-header h2 {
  margin:4px 0 5px;
  color:var(--navy);
}

.monthly-forecast-nav {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.monthly-mode-strip {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin:12px 0 16px;
}

.monthly-forecast-rule {
  margin-top:14px;
}

.monthly-forecast-rule strong {
  display:block;
  margin-bottom:5px;
}

.monthly-forecast-list {
  display:grid;
  gap:8px;
}

.monthly-forecast-row {
  display:grid;
  grid-template-columns:
    145px
    minmax(0,1fr)
    145px
    155px;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  padding:11px 12px;
  min-width:0;
}

.monthly-forecast-date {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}

.monthly-forecast-desc {
  min-width:0;
  overflow-wrap:anywhere;
}

.monthly-forecast-amount,
.monthly-forecast-running {
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.monthly-forecast-amount {
  font-weight:850;
}

.monthly-forecast-running span {
  display:block;
  font-size:9px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
}

.monthly-forecast-running strong {
  display:block;
  margin-top:3px;
}

@media(max-width:1100px) {

  .automation-section-grid,
  .monthly-forecast-header {
    grid-template-columns:1fr;
  }

  .automation-hero {
    display:block;
  }

  .automation-hero form {
    margin-top:12px;
  }

  .monthly-forecast-row {
    grid-template-columns:
      125px
      minmax(0,1fr)
      135px;
  }

  .monthly-forecast-running {
    grid-column:2/4;
  }
}



/* =========================================================
   NMBM FINANCE PROFESSIONAL VISUAL SYSTEM V2.1
   ---------------------------------------------------------
   VISUAL OVERRIDE ONLY.
   DOES NOT ALTER:
   - .app-shell grid width
   - accounting logic
   - database logic
   - finance calculations
   - global application minimum width
   ========================================================= */


body.nmbm-v21 {

  --v21-navy:#0B2B50;
  --v21-navy-dark:#061A30;
  --v21-navy-mid:#102F50;

  --v21-blue:#0B79D0;
  --v21-blue-hover:#086BB9;
  --v21-blue-soft:#EAF5FD;

  --v21-green:#08A04B;
  --v21-green-soft:#EAF9F0;

  --v21-orange:#F59E0B;
  --v21-orange-soft:#FFF7E6;

  --v21-red:#ED1C2E;
  --v21-red-soft:#FFF0F2;

  --v21-canvas:#F4F7FB;
  --v21-card:#FFFFFF;
  --v21-border:#D8E1EA;
  --v21-border-soft:#E8EEF4;

  --v21-text:#17324D;
  --v21-muted:#667C91;

  --v21-shadow:
    0 2px 5px rgba(11,43,80,.025),
    0 8px 22px rgba(11,43,80,.055);

  --v21-shadow-hover:
    0 5px 12px rgba(11,43,80,.04),
    0 16px 32px rgba(11,43,80,.09);

  --v21-radius:13px;
  --v21-radius-small:8px;

  background:
    radial-gradient(
      circle at 82% 3%,
      rgba(11,121,208,.045),
      transparent 22%
    ),
    var(--v21-canvas);

  color:var(--v21-text);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

body.nmbm-v21 .sidebar {

  background:
    linear-gradient(
      180deg,
      #071C34 0%,
      #0B2B50 56%,
      #081F3A 100%
    );

  border-right:
    1px solid
    rgba(255,255,255,.06);

  box-shadow:
    10px 0 28px
    rgba(4,23,42,.08);
}


body.nmbm-v21 .brand {

  position:relative;

  padding-bottom:18px;

  margin-bottom:13px;

  border-bottom:
    1px solid
    rgba(255,255,255,.11);
}


body.nmbm-v21 .brand-mark {

  width:42px;
  height:42px;

  border-radius:11px;

  background:
    linear-gradient(
      145deg,
      #1595EA,
      #0868B7
    );

  box-shadow:
    0 7px 18px
    rgba(0,95,180,.32);

  font-size:20px;
}


body.nmbm-v21 .brand strong {

  font-size:17px;

  letter-spacing:.35px;
}


body.nmbm-v21 .brand > div > span,
body.nmbm-v21 .brand span:not(.nmbm-version-pill) {

  opacity:.72;
}


body.nmbm-v21 .nmbm-version-pill {

  position:absolute;

  right:0;
  top:1px;

  display:inline-flex;

  align-items:center;

  min-height:20px;

  padding:2px 6px;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:20px;

  background:
    rgba(255,255,255,.075);

  color:#CBE7FB;

  font-size:8px;

  font-weight:850;

  letter-spacing:.8px;
}


body.nmbm-v21 .sidebar nav {

  gap:2px;

  scrollbar-width:none;
}


body.nmbm-v21 .sidebar nav::-webkit-scrollbar {

  display:none;
}


body.nmbm-v21 .nav-link {

  position:relative;

  min-height:40px;

  padding:7px 9px;

  border:
    1px solid
    transparent;

  border-radius:9px;

  color:#CCDCEB;

  font-size:12px;

  font-weight:680;

  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    transform .16s ease;
}


body.nmbm-v21 .nav-link:hover {

  background:
    rgba(255,255,255,.075);

  border-color:
    rgba(255,255,255,.07);

  color:#FFF;

  transform:
    translateX(2px);
}


body.nmbm-v21 .nav-link.active {

  background:
    linear-gradient(
      135deg,
      rgba(15,133,215,.98),
      rgba(9,101,179,.98)
    );

  border-color:
    rgba(255,255,255,.13);

  color:#FFF;

  box-shadow:
    0 7px 18px
    rgba(1,73,132,.26);

  transform:none;
}


body.nmbm-v21 .nav-link.active::after {

  content:"";

  position:absolute;

  right:-1px;
  top:10px;
  bottom:10px;

  width:3px;

  border-radius:
    3px 0 0 3px;

  background:#FFF;
}


body.nmbm-v21 .nav-icon {

  display:grid;

  place-items:center;

  flex:0 0 29px;

  width:29px;
  height:29px;

  border-radius:7px;

  background:
    rgba(255,255,255,.06);

  color:#BFE3FC;

  font-size:0;
}


body.nmbm-v21 .nav-link.active .nav-icon {

  background:
    rgba(255,255,255,.16);

  color:#FFF;
}


body.nmbm-v21 .nav-icon svg {

  display:block;
}


body.nmbm-v21 .nav-divider {

  margin:7px 4px;

  border-top-color:
    rgba(255,255,255,.09);
}


body.nmbm-v21 .sidebar-footer {

  border-top-color:
    rgba(255,255,255,.1);

  padding-top:10px;
}


body.nmbm-v21 .user-chip {

  padding:7px 8px;

  border-radius:8px;

  background:
    rgba(255,255,255,.045);
}


body.nmbm-v21 .sidebar-logout {

  min-height:34px;

  border-color:
    rgba(255,255,255,.17);

  transition:
    background .15s ease,
    border-color .15s ease;
}


body.nmbm-v21 .sidebar-logout:hover {

  background:
    rgba(255,255,255,.08);

  border-color:
    rgba(255,255,255,.28);
}


/* =========================================================
   TOP BAR
   ========================================================= */

body.nmbm-v21 .topbar {

  min-height:92px;

  height:auto;

  padding:18px 0 16px;

  border-bottom:
    1px solid
    var(--v21-border);

  margin-bottom:24px;
}


body.nmbm-v21 .topbar h1 {

  margin:3px 0 0;

  color:var(--v21-navy);

  font-size:27px;

  font-weight:820;

  letter-spacing:-.5px;

  line-height:1.05;
}


body.nmbm-v21 .topbar .eyebrow {

  color:var(--v21-blue);

  font-size:9px;

  letter-spacing:1.55px;
}


body.nmbm-v21 .topbar-professional-subtitle {

  display:flex;

  gap:8px;

  align-items:center;

  margin-top:7px;

  font-size:11px;
}


body.nmbm-v21 .topbar-professional-subtitle strong {

  color:var(--v21-blue);

  font-size:9px;

  letter-spacing:.75px;
}


body.nmbm-v21 .topbar-professional-subtitle span {

  color:var(--v21-muted);
}


body.nmbm-v21 .topbar-right {

  gap:9px;
}


body.nmbm-v21 .nmbm-live-pill {

  display:inline-flex;

  align-items:center;

  gap:5px;

  padding:5px 8px;

  border:
    1px solid
    #CDEBD9;

  border-radius:20px;

  background:#F2FBF5;

  color:#08783A;

  font-size:9px;

  font-weight:850;

  letter-spacing:.55px;
}


body.nmbm-v21 .nmbm-live-pill > span {

  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--v21-green);

  box-shadow:
    0 0 0 3px
    rgba(8,160,75,.12);
}


/* =========================================================
   CARDS
   ========================================================= */

body.nmbm-v21 .card {

  border:
    1px solid
    var(--v21-border);

  border-radius:
    var(--v21-radius);

  background:
    rgba(255,255,255,.97);

  box-shadow:
    var(--v21-shadow);

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}


body.nmbm-v21 .card.accent {

  border-top:
    3px solid
    var(--v21-blue);
}


body.nmbm-v21 .card.success {

  border-top:
    3px solid
    var(--v21-green);
}


body.nmbm-v21 .card.warning {

  border-top:
    3px solid
    var(--v21-orange);
}


body.nmbm-v21 .card.danger {

  border-top:
    3px solid
    var(--v21-red);
}


body.nmbm-v21 a.card:hover,
body.nmbm-v21 .nmbm-clickable:hover,
body.nmbm-v21 .job-card-register-card:hover {

  transform:
    translateY(-2px);

  border-color:#BCD3E5;

  box-shadow:
    var(--v21-shadow-hover);
}


body.nmbm-v21 .nmbm-metric-primary {

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #F5FAFE 100%
    );
}


body.nmbm-v21 .nmbm-metric-positive {

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #F5FCF8 100%
    );
}


body.nmbm-v21 .nmbm-metric-out {

  background:
    linear-gradient(
      145deg,
      #FFFFFF 0%,
      #FFF9F6 100%
    );
}


/* =========================================================
   KPI / METRIC TYPOGRAPHY
   ========================================================= */

body.nmbm-v21 .metric-label {

  color:#6C8092;

  font-size:10px;

  font-weight:820;

  letter-spacing:.72px;
}


body.nmbm-v21 .metric-value {

  margin-top:7px;

  color:var(--v21-navy);

  font-size:28px;

  font-weight:850;

  letter-spacing:-.55px;

  line-height:1.07;

  font-variant-numeric:
    tabular-nums;
}


body.nmbm-v21 .metric-sub {

  margin-top:7px;

  color:var(--v21-muted);

  line-height:1.45;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

body.nmbm-v21 .section-head {

  margin:
    27px 0 11px;

  padding-bottom:7px;

  border-bottom:
    1px solid
    rgba(216,225,234,.72);
}


body.nmbm-v21 .section-head h2 {

  position:relative;

  font-size:17px;

  font-weight:820;

  letter-spacing:-.15px;
}


body.nmbm-v21 .section-head h2::after {

  content:"";

  position:absolute;

  left:0;
  bottom:-9px;

  width:31px;
  height:2px;

  border-radius:2px;

  background:
    var(--v21-blue);
}


/* =========================================================
   BUTTONS
   ========================================================= */

body.nmbm-v21 .btn {

  min-height:36px;

  border-radius:8px;

  padding:8px 13px;

  font-size:12px;

  font-weight:780;

  box-shadow:
    0 1px 2px
    rgba(11,43,80,.04);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    border-color .12s ease;
}


body.nmbm-v21 .btn:hover {

  filter:none;

  transform:
    translateY(-1px);

  box-shadow:
    0 5px 12px
    rgba(11,43,80,.12);
}


body.nmbm-v21 .btn:active {

  transform:
    translateY(0);
}


body.nmbm-v21 .btn.primary {

  background:
    linear-gradient(
      135deg,
      #0D84DD,
      #086BB9
    );

  border-color:#0868B4;
}


body.nmbm-v21 .btn.success {

  background:
    linear-gradient(
      135deg,
      #0BA653,
      #07843F
    );
}


body.nmbm-v21 .btn.warning {

  background:
    linear-gradient(
      135deg,
      #F7A812,
      #DB8500
    );
}


body.nmbm-v21 .btn.danger {

  background:
    linear-gradient(
      135deg,
      #F12D3C,
      #CF1423
    );
}


body.nmbm-v21 .btn.navy {

  background:
    linear-gradient(
      135deg,
      #12365B,
      #081F3B
    );
}


body.nmbm-v21 .btn.ghost {

  background:#FFF;

  border-color:
    var(--v21-border);

  color:
    var(--v21-navy);
}


body.nmbm-v21 .btn.ghost:hover {

  border-color:#AFC8DC;

  background:#F8FBFD;
}


/* =========================================================
   INPUTS / FORMS
   ========================================================= */

body.nmbm-v21 input,
body.nmbm-v21 select,
body.nmbm-v21 textarea {

  border:
    1px solid
    #CBD7E2;

  border-radius:8px;

  background:#FFF;

  color:var(--v21-text);

  transition:
    border-color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}


body.nmbm-v21 input:hover,
body.nmbm-v21 select:hover,
body.nmbm-v21 textarea:hover {

  border-color:#A9C0D4;
}


body.nmbm-v21 input:focus,
body.nmbm-v21 select:focus,
body.nmbm-v21 textarea:focus {

  outline:none;

  border-color:
    var(--v21-blue);

  box-shadow:
    0 0 0 3px
    rgba(11,121,208,.11);
}


body.nmbm-v21 select,
body.nmbm-v21 select option,
body.nmbm-v21 select optgroup,
body.nmbm-v21 input[list] {

  text-transform:uppercase;
}


body.nmbm-v21 .field label {

  display:block;

  margin-bottom:5px;

  color:#49647C;

  font-size:10px;

  font-weight:820;

  letter-spacing:.45px;

  text-transform:uppercase;
}


body.nmbm-v21 .field input[readonly] {

  background:#F4F7FA;

  border-color:#DFE6ED;
}


/* =========================================================
   TABLES
   ========================================================= */

body.nmbm-v21 .table-wrap {

  max-width:100%;

  border:
    1px solid
    var(--v21-border);

  border-radius:12px;

  background:#FFF;

  box-shadow:
    0 3px 12px
    rgba(11,43,80,.035);
}


body.nmbm-v21 .table {

  max-width:100%;

  min-width:0;

  font-size:12px;
}


body.nmbm-v21 .table th {

  padding:11px 10px;

  background:
    linear-gradient(
      180deg,
      #F3F7FA,
      #EDF3F8
    );

  color:#395873;

  border-bottom:
    1px solid
    #D5E0E9;

  font-size:9px;

  font-weight:850;

  letter-spacing:.65px;
}


body.nmbm-v21 .table td {

  padding:10px;

  border-bottom:
    1px solid
    #ECF0F4;

  color:#29435A;

  line-height:1.38;

  overflow-wrap:anywhere;
}


body.nmbm-v21 .table tbody tr:nth-child(even) td {

  background:
    rgba(246,249,252,.58);
}


body.nmbm-v21 .table tr:hover td {

  background:#EFF7FD;
}


body.nmbm-v21 .table tbody tr:last-child td {

  border-bottom:0;
}


body.nmbm-v21 .num {

  font-weight:700;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   STATUS BADGES
   ========================================================= */

body.nmbm-v21 .badge {

  padding:4px 7px;

  border:
    1px solid
    #D9E3EB;

  border-radius:20px;

  background:#F4F7FA;

  color:#566D82;

  font-size:9px;

  font-weight:850;

  letter-spacing:.4px;

  white-space:nowrap;
}


body.nmbm-v21 .badge.green,
body.nmbm-v21 .nmbm-status-good {

  border-color:#BFE6CF;

  background:
    var(--v21-green-soft);

  color:#08743A;
}


body.nmbm-v21 .badge.red,
body.nmbm-v21 .nmbm-status-danger {

  border-color:#F5C3C8;

  background:
    var(--v21-red-soft);

  color:#BD1926;
}


body.nmbm-v21 .badge.orange,
body.nmbm-v21 .badge.amber,
body.nmbm-v21 .nmbm-status-warning {

  border-color:#F1D69A;

  background:
    var(--v21-orange-soft);

  color:#A86700;
}


body.nmbm-v21 .badge.blue,
body.nmbm-v21 .nmbm-status-info {

  border-color:#BBDCF4;

  background:
    var(--v21-blue-soft);

  color:#0767AE;
}


/* =========================================================
   FLASH MESSAGES
   ========================================================= */

body.nmbm-v21 .flash {

  display:flex;

  align-items:center;

  min-height:46px;

  padding:11px 14px;

  border-radius:10px;

  box-shadow:
    0 4px 14px
    rgba(11,43,80,.04);

  font-weight:650;
}


body.nmbm-v21 .flash.success {

  border-color:#BFE7CF;

  background:#EFFBF4;

  color:#096E38;
}


body.nmbm-v21 .flash.error {

  border-color:#F3C1C6;

  background:#FFF2F3;

  color:#A81723;
}


/* =========================================================
   DETAILS / DELETED AREAS
   ========================================================= */

body.nmbm-v21 details {

  border-radius:9px;
}


body.nmbm-v21 details > summary {

  cursor:pointer;

  color:var(--v21-navy);

  font-weight:750;
}


body.nmbm-v21 .deleted-panel {

  border-color:
    var(--v21-border);

  border-radius:11px;

  box-shadow:
    0 2px 8px
    rgba(11,43,80,.025);
}


/* =========================================================
   JOB CARD REGISTER
   ========================================================= */

body.nmbm-v21 .job-card-vertical-register {

  gap:13px;
}


body.nmbm-v21 .job-card-register-card {

  overflow:hidden;

  border:
    1px solid
    var(--v21-border);

  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      #FFF,
      #FBFDFE
    );

  box-shadow:
    var(--v21-shadow);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}


body.nmbm-v21 .job-card-register-card::before {

  content:"";

  display:block;

  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--v21-blue),
      #58B6EF
    );
}


body.nmbm-v21 .job-card-register-card strong {

  color:var(--v21-navy);
}


body.nmbm-v21 .job-card-filter-toolbar {

  padding:7px;

  border:
    1px solid
    var(--v21-border);

  border-radius:10px;

  background:#FFF;

  box-shadow:
    0 3px 12px
    rgba(11,43,80,.035);
}


/* =========================================================
   AUTOMATION CENTRE
   ========================================================= */

body.nmbm-v21 .automation-hero {

  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #F4FAFF 65%,
      #EDF8FF 100%
    );
}


body.nmbm-v21 .automation-hero::after {

  content:"";

  position:absolute;

  width:220px;
  height:220px;

  right:-85px;
  top:-110px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(11,121,208,.1),
      transparent 70%
    );

  pointer-events:none;
}


body.nmbm-v21 .automation-exception {

  background:
    linear-gradient(
      145deg,
      #FFF,
      #FBFCFD
    );
}


body.nmbm-v21 .automation-check {

  background:#FFF;
}


/* =========================================================
   FORECAST CHART
   ========================================================= */

body.nmbm-v21 .forecast-chart-card {

  margin-top:15px;

  padding:18px;

  overflow:hidden;
}


body.nmbm-v21 .forecast-chart-heading {

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:14px;

  margin-bottom:12px;
}


body.nmbm-v21 .forecast-chart-heading h3 {

  margin:3px 0 4px;

  color:var(--v21-navy);

  font-size:16px;

  font-weight:820;
}


body.nmbm-v21 .forecast-chart-live {

  display:inline-flex;

  align-items:center;

  gap:5px;

  padding:5px 8px;

  border:
    1px solid
    #C3E1F5;

  border-radius:20px;

  background:#F0F9FF;

  color:#0768B0;

  font-size:8px;

  font-weight:850;

  letter-spacing:.65px;
}


body.nmbm-v21 .forecast-balance-chart {

  min-height:250px;

  padding:10px 2px 0;
}


body.nmbm-v21 .forecast-chart-meta {

  display:flex;

  justify-content:flex-end;

  gap:24px;

  padding:
    0 8px 4px;
}


body.nmbm-v21 .forecast-chart-meta > div {

  text-align:right;
}


body.nmbm-v21 .forecast-chart-meta span {

  display:block;

  color:var(--v21-muted);

  font-size:8px;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:.45px;
}


body.nmbm-v21 .forecast-chart-meta strong {

  display:block;

  margin-top:2px;

  color:var(--v21-navy);

  font-size:12px;

  font-variant-numeric:
    tabular-nums;
}


body.nmbm-v21 .forecast-svg {

  display:block;

  width:100%;
  height:auto;

  min-height:205px;
}


body.nmbm-v21 .forecast-chart-grid {

  stroke:#E6EDF3;

  stroke-width:1;
}


body.nmbm-v21 .forecast-chart-zero {

  stroke:#E49A9F;

  stroke-width:1;

  stroke-dasharray:5 5;
}


body.nmbm-v21 .forecast-chart-line {

  fill:none;

  stroke:var(--v21-blue);

  stroke-width:3;

  stroke-linecap:round;

  stroke-linejoin:round;

  filter:
    drop-shadow(
      0 3px 3px
      rgba(11,121,208,.13)
    );
}


body.nmbm-v21 .forecast-chart-dot {

  fill:#FFF;

  stroke:var(--v21-blue);

  stroke-width:2.5;
}


body.nmbm-v21 .forecast-chart-label {

  fill:#708397;

  font-size:10px;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;
}


body.nmbm-v21 .forecast-chart-empty {

  display:grid;

  place-items:center;

  min-height:210px;

  color:var(--v21-muted);

  border:
    1px dashed
    #D4DFE8;

  border-radius:10px;

  background:#F9FBFD;
}


body.nmbm-v21 .monthly-forecast-row {

  border-color:
    var(--v21-border);

  box-shadow:
    0 2px 8px
    rgba(11,43,80,.025);

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}


body.nmbm-v21 .monthly-forecast-row:hover {

  border-color:#BCD3E5;

  box-shadow:
    0 7px 18px
    rgba(11,43,80,.065);

  transform:
    translateY(-1px);
}


/* =========================================================
   AUTH / LOGIN
   ========================================================= */

body.nmbm-v21.auth-shell {

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(14,136,219,.35),
      transparent 29%
    ),
    linear-gradient(
      135deg,
      #06182B,
      #0B2B50 58%,
      #095E9F
    );
}


body.nmbm-v21 .auth-card {

  border:
    1px solid
    rgba(255,255,255,.5);

  border-radius:18px;

  box-shadow:
    0 32px 80px
    rgba(0,0,0,.28);
}


/* =========================================================
   PAGE TRANSITION
   ========================================================= */

body.nmbm-v21 .main > * {

  animation:
    nmbmV21Enter
    .22s
    ease-out
    both;
}


@keyframes nmbmV21Enter {

  from {

    opacity:0;

    transform:
      translateY(4px);

  }

  to {

    opacity:1;

    transform:
      translateY(0);

  }

}


body.nmbm-v21 .nmbm-page-progress {

  position:fixed;

  z-index:99999;

  left:0;
  top:0;

  width:0;
  height:3px;

  background:
    linear-gradient(
      90deg,
      #0B79D0,
      #55B9F2
    );

  box-shadow:
    0 0 8px
    rgba(11,121,208,.4);

  pointer-events:none;
}


body.nmbm-v21 .nmbm-page-progress.active {

  width:82%;

  transition:
    width .7s
    cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   SMALL SCREEN SAFETY
   DOES NOT CHANGE CORE APP-SHELL WIDTH
   ========================================================= */

@media(max-width:1200px) {

  body.nmbm-v21 .metric-value {

    font-size:25px;
  }

  body.nmbm-v21 .topbar-professional-subtitle span {

    display:none;
  }

}


@media(prefers-reduced-motion:reduce) {

  body.nmbm-v21 *,
  body.nmbm-v21 *::before,
  body.nmbm-v21 *::after {

    animation-duration:.01ms!important;

    transition-duration:.01ms!important;
  }

}



/* =========================================================
   NMBM FINANCE RED EXECUTIVE THEME V2.1.1
   VISUAL OVERRIDE ONLY
   ========================================================= */

body.nmbm-v21 {

  --brand-red:#C8202D;
  --brand-red-bright:#DF3340;
  --brand-red-dark:#971722;
  --brand-burgundy:#54131A;

  --exec-charcoal:#202A33;
  --exec-charcoal-light:#354451;

  --info-blue:#2879B7;

  --v21-text:#273744;
  --v21-muted:#6B7B88;

  background:
    radial-gradient(
      circle at 88% 4%,
      rgba(200,32,45,.05),
      transparent 25%
    ),
    #F5F7FA;
}


/* =========================================================
   REMOVE THE HORIZONTAL / UNDERLINE EFFECTS
   ========================================================= */

body.nmbm-v21 .section-head {

  border-bottom:0 !important;
  padding-bottom:0 !important;
}


body.nmbm-v21 .section-head h2::before,
body.nmbm-v21 .section-head h2::after,
body.nmbm-v21 .section-head::before,
body.nmbm-v21 .section-head::after {

  display:none !important;
  content:none !important;
}


body.nmbm-v21 h1,
body.nmbm-v21 h2,
body.nmbm-v21 h3,
body.nmbm-v21 h4,
body.nmbm-v21 h5,
body.nmbm-v21 h6 {

  text-decoration:none !important;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

body.nmbm-v21 .sidebar {

  background:
    linear-gradient(
      180deg,
      #321015 0%,
      #55131A 48%,
      #291014 100%
    );

  border-right:
    1px solid
    rgba(255,255,255,.055);

  box-shadow:
    10px 0 30px
    rgba(60,10,15,.13);
}


body.nmbm-v21 .brand-mark {

  background:
    linear-gradient(
      145deg,
      #E53A47,
      #B71825
    );

  box-shadow:
    0 8px 20px
    rgba(174,20,32,.3);
}


body.nmbm-v21 .nmbm-version-pill {

  color:#FFD9DC;

  border-color:
    rgba(255,255,255,.15);
}


body.nmbm-v21 .nav-link {

  color:#E4D6D8;
}


body.nmbm-v21 .nav-icon {

  color:#F2BCC1;

  background:
    rgba(255,255,255,.055);
}


body.nmbm-v21 .nav-link:hover {

  background:
    rgba(255,255,255,.075);

  border-color:
    rgba(255,255,255,.07);

  color:#FFF;
}


body.nmbm-v21 .nav-link.active {

  background:
    linear-gradient(
      135deg,
      #D52A37,
      #AC1723
    );

  border-color:
    rgba(255,255,255,.14);

  box-shadow:
    0 8px 20px
    rgba(103,8,18,.3);

  color:#FFF;
}


body.nmbm-v21 .nav-link.active .nav-icon {

  background:
    rgba(255,255,255,.17);

  color:#FFF;
}


/* =========================================================
   MAIN HEADINGS
   ========================================================= */

body.nmbm-v21 .topbar h1,
body.nmbm-v21 .section-head h2,
body.nmbm-v21 .card h2,
body.nmbm-v21 .card h3 {

  color:
    var(--exec-charcoal);
}


body.nmbm-v21 .eyebrow,
body.nmbm-v21 .topbar .eyebrow,
body.nmbm-v21 .topbar-professional-subtitle strong {

  color:
    var(--brand-red);

  font-weight:900;
}


/* =========================================================
   CARDS
   ========================================================= */

body.nmbm-v21 .card {

  border-color:#D9E0E6;

  box-shadow:
    0 2px 5px rgba(31,41,49,.025),
    0 8px 22px rgba(31,41,49,.055);
}


body.nmbm-v21 .card.accent {

  border-top-color:
    var(--brand-red);
}


body.nmbm-v21 .metric-value {

  color:
    var(--exec-charcoal);
}


body.nmbm-v21 .nmbm-metric-primary {

  background:
    linear-gradient(
      145deg,
      #FFF 0%,
      #FFF5F6 100%
    );
}


body.nmbm-v21 a.card:hover,
body.nmbm-v21 .nmbm-clickable:hover,
body.nmbm-v21 .job-card-register-card:hover {

  border-color:#D8A8AD;

  box-shadow:
    0 6px 14px rgba(60,18,22,.05),
    0 16px 34px rgba(60,18,22,.09);
}


/* =========================================================
   BUTTONS
   ========================================================= */

body.nmbm-v21 .btn.primary {

  background:
    linear-gradient(
      135deg,
      #DA303D,
      #B71926
    );

  border-color:#A91521;

  color:#FFF;

  box-shadow:
    0 4px 11px
    rgba(184,24,37,.17);
}


body.nmbm-v21 .btn.primary:hover {

  background:
    linear-gradient(
      135deg,
      #E43A47,
      #C31D2A
    );
}


body.nmbm-v21 .btn.navy {

  background:
    linear-gradient(
      135deg,
      #394650,
      #202A33
    );

  border-color:#202A33;
}


/* =========================================================
   INPUTS
   ========================================================= */

body.nmbm-v21 input:focus,
body.nmbm-v21 select:focus,
body.nmbm-v21 textarea:focus,
body.nmbm-v21 .search-input:focus,
body.nmbm-v21 .job-card-status-filter:focus {

  border-color:
    var(--brand-red);

  box-shadow:
    0 0 0 3px
    rgba(200,32,45,.10);
}


/* =========================================================
   TABLES
   ========================================================= */

body.nmbm-v21 .table th {

  background:
    linear-gradient(
      180deg,
      #F6F7F8,
      #EDF0F3
    );

  color:#424F5A;
}


body.nmbm-v21 .table tr:hover td {

  background:#FFF5F6;
}


/* =========================================================
   JOB CARDS
   ========================================================= */

body.nmbm-v21 .job-card-register-card::before {

  background:
    linear-gradient(
      90deg,
      #BE1D2A,
      #E25560
    );
}


body.nmbm-v21 .job-card-filter-toolbar {

  border-color:#D9E0E6;

  background:#FFF;
}


/* =========================================================
   AUTOMATION
   ========================================================= */

body.nmbm-v21 .automation-hero {

  background:
    linear-gradient(
      135deg,
      #FFF 0%,
      #FFF8F8 60%,
      #FFF0F2 100%
    );
}


body.nmbm-v21 .automation-hero::after {

  background:
    radial-gradient(
      circle,
      rgba(200,32,45,.10),
      transparent 70%
    );
}


/* =========================================================
   FORECAST
   ========================================================= */

body.nmbm-v21 .forecast-chart-line {

  stroke:
    var(--brand-red);

  filter:
    drop-shadow(
      0 3px 3px
      rgba(200,32,45,.15)
    );
}


body.nmbm-v21 .forecast-chart-dot {

  stroke:
    var(--brand-red);
}


body.nmbm-v21 .forecast-chart-live {

  border-color:#EDC2C6;

  background:#FFF4F5;

  color:#A91622;
}


body.nmbm-v21 .monthly-forecast-row:hover {

  border-color:#D9AFB3;

  box-shadow:
    0 7px 18px
    rgba(82,21,27,.07);
}


/* =========================================================
   LOADING INDICATOR
   ========================================================= */

body.nmbm-v21 .nmbm-page-progress {

  background:
    linear-gradient(
      90deg,
      #B81926,
      #E23B47
    );

  box-shadow:
    0 0 8px
    rgba(200,32,45,.42);
}


/* =========================================================
   BLUE IS INFORMATIONAL ONLY
   ========================================================= */

body.nmbm-v21 .badge.blue,
body.nmbm-v21 .nmbm-status-info {

  border-color:#C5DDEC;

  background:#EDF6FC;

  color:#286B99;
}


/* =========================================================
   SEMANTIC COLOURS REMAIN MEANINGFUL
   ========================================================= */

body.nmbm-v21 .badge.green,
body.nmbm-v21 .nmbm-status-good {

  background:#EAF9F0;
  border-color:#BFE6CF;
  color:#08743A;
}


body.nmbm-v21 .badge.orange,
body.nmbm-v21 .badge.amber,
body.nmbm-v21 .nmbm-status-warning {

  background:#FFF7E6;
  border-color:#F0D69D;
  color:#A86600;
}


body.nmbm-v21 .badge.red,
body.nmbm-v21 .nmbm-status-danger {

  background:#FFECEF;
  border-color:#F0B6BC;
  color:#B01320;
}


/* =========================================================
   LINKS
   ========================================================= */

body.nmbm-v21 .main a:not(.btn):not(.card):not(.nav-link) {

  color:
    var(--brand-red);
}



/* =========================================================
   NMBM SIDEBAR FULL-VIEW FIX
   Entire navigation + footer remains visible.
   No sidebar scrollbar.
   ========================================================= */

body.nmbm-v21 .sidebar {

  overflow:hidden;

  padding:
    15px 12px
    12px;

}


/* BRAND */

body.nmbm-v21 .brand {

  flex:0 0 auto;

  min-height:0;

  padding:
    0 5px
    12px;

  margin-bottom:8px;

}


body.nmbm-v21 .brand-mark {

  width:39px;
  height:39px;

}


body.nmbm-v21 .brand strong {

  font-size:16px;

}


body.nmbm-v21 .brand span:not(.nmbm-version-pill) {

  font-size:9px;

}


/* NAV AREA */

body.nmbm-v21 .sidebar nav {

  flex:
    1 1 auto;

  min-height:0;

  overflow:hidden !important;

  gap:1px;

  display:flex;

  flex-direction:column;

  justify-content:flex-start;

}


/* NAV ITEMS */

body.nmbm-v21 .nav-link {

  flex:0 0 auto;

  min-height:33px;

  padding:
    3px 7px;

  border-radius:8px;

  font-size:11.5px;

  line-height:1.1;

}


body.nmbm-v21 .nav-icon {

  flex:
    0 0 27px;

  width:27px;
  height:27px;

  border-radius:7px;

}


body.nmbm-v21 .nav-icon svg {

  width:16px;
  height:16px;

}


/* DIVIDERS */

body.nmbm-v21 .nav-divider {

  flex:0 0 auto;

  margin:
    3px 3px;

}


/* FOOTER MUST ALWAYS REMAIN VISIBLE */

body.nmbm-v21 .sidebar-footer {

  flex:
    0 0 auto;

  margin-top:7px;

  padding-top:7px;

  background:transparent;

}


body.nmbm-v21 .user-chip {

  padding:
    4px 6px;

  border-radius:7px;

}


body.nmbm-v21 .user-chip strong {

  font-size:11px;

}


body.nmbm-v21 .user-chip span {

  font-size:9px;

  margin-top:1px;

}


body.nmbm-v21 .small-link {

  margin:
    4px 0;

  font-size:10px;

}


body.nmbm-v21 .sidebar-logout {

  min-height:30px;

  padding:
    5px 8px;

  font-size:11px;

}


/* =========================================================
   COMPACT MODE FOR LAPTOP / SHORTER SCREENS
   ========================================================= */

@media (max-height:900px) {

  body.nmbm-v21 .sidebar {

    padding:
      10px 11px
      9px;

  }


  body.nmbm-v21 .brand {

    padding-bottom:8px;

    margin-bottom:5px;

  }


  body.nmbm-v21 .brand-mark {

    width:35px;
    height:35px;

  }


  body.nmbm-v21 .brand strong {

    font-size:15px;

  }


  body.nmbm-v21 .nav-link {

    min-height:29px;

    padding:
      2px 6px;

    font-size:11px;

  }


  body.nmbm-v21 .nav-icon {

    flex-basis:24px;

    width:24px;
    height:24px;

  }


  body.nmbm-v21 .nav-icon svg {

    width:14px;
    height:14px;

  }


  body.nmbm-v21 .nav-divider {

    margin:
      2px 3px;

  }


  body.nmbm-v21 .sidebar-footer {

    margin-top:4px;

    padding-top:5px;

  }


  body.nmbm-v21 .user-chip {

    padding:
      3px 5px;

  }


  body.nmbm-v21 .small-link {

    margin:
      2px 0;

  }


  body.nmbm-v21 .sidebar-logout {

    min-height:27px;

    padding:3px 7px;

  }

}


/* =========================================================
   EXTRA COMPACT MODE
   Still shows every menu item.
   ========================================================= */

@media (max-height:760px) {

  body.nmbm-v21 .brand {

    padding-bottom:5px;

    margin-bottom:3px;

  }


  body.nmbm-v21 .brand-mark {

    width:31px;
    height:31px;

  }


  body.nmbm-v21 .brand strong {

    font-size:14px;

  }


  body.nmbm-v21 .nav-link {

    min-height:26px;

    padding:
      1px 5px;

    font-size:10.5px;

  }


  body.nmbm-v21 .nav-icon {

    flex-basis:22px;

    width:22px;
    height:22px;

  }


  body.nmbm-v21 .nav-icon svg {

    width:13px;
    height:13px;

  }


  body.nmbm-v21 .sidebar-footer {

    margin-top:2px;

    padding-top:3px;

  }

}



/* =========================================================
   SIDEBAR FOOTER / SIGN OUT FIX V2.1.2
   Always keeps account controls visible.
   ========================================================= */

body.nmbm-v21 .sidebar {

  position:sticky;

  height:100vh;

  overflow:hidden;

}


/* Reserve permanent room for the account footer */

body.nmbm-v21 .sidebar nav {

  flex:1 1 auto;

  min-height:0;

  overflow:hidden !important;

  padding-bottom:82px;

}


/* Footer is always visible at bottom */

body.nmbm-v21 .sidebar-footer {

  position:absolute;

  left:12px;
  right:12px;
  bottom:10px;

  margin:0;

  padding-top:7px;

  border-top:
    1px solid
    rgba(255,255,255,.12);

  background:
    linear-gradient(
      180deg,
      rgba(66,12,18,.93),
      rgba(45,10,14,.99)
    );

  z-index:20;

}


/* Compact logged-in user information */

body.nmbm-v21 .sidebar-footer .user-chip {

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:8px;

  padding:4px 5px;

  background:transparent;

}


body.nmbm-v21 .sidebar-footer .user-chip strong {

  font-size:10.5px;

}


body.nmbm-v21 .sidebar-footer .user-chip span {

  font-size:8.5px;

}


/* Change password / account link */

body.nmbm-v21 .sidebar-footer .small-link {

  display:inline-block;

  margin:
    1px 0 5px;

  color:#F1C7CB;

  font-size:9px;

}


/* Sign Out button */

body.nmbm-v21 .sidebar-logout {

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  min-height:31px;

  padding:5px 9px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:8px;

  background:
    rgba(255,255,255,.08);

  color:#FFF;

  font-size:10.5px;

  font-weight:800;

  letter-spacing:.2px;

  cursor:pointer;

}


body.nmbm-v21 .sidebar-logout:hover {

  background:#C8202D;

  border-color:#E24753;

}


/* Slightly tighter menu so all links remain above footer */

body.nmbm-v21 .nav-link {

  min-height:28px;

  padding:
    1px 6px;

}


body.nmbm-v21 .nav-icon {

  flex-basis:23px;

  width:23px;
  height:23px;

}


body.nmbm-v21 .nav-icon svg {

  width:13px;
  height:13px;

}


body.nmbm-v21 .nav-divider {

  margin:
    1px 3px;

}


/* Extra protection on shorter laptop screens */

@media (max-height:850px) {

  body.nmbm-v21 .sidebar nav {

    padding-bottom:70px;

  }


  body.nmbm-v21 .nav-link {

    min-height:25px;

    font-size:10.3px;

  }


  body.nmbm-v21 .nav-icon {

    flex-basis:21px;

    width:21px;
    height:21px;

  }


  body.nmbm-v21 .sidebar-footer .user-chip {

    display:none;

  }


  body.nmbm-v21 .sidebar-footer .small-link {

    margin-bottom:3px;

  }

}



/* =========================================================
   SIDEBAR FINAL SPACING SYSTEM V2.1.2
   Brand -> Navigation -> Account Footer
   No overlap, no sidebar scrollbar.
   ========================================================= */


/* ---------------------------------------------------------
   SIDEBAR STRUCTURE
   --------------------------------------------------------- */

body.nmbm-v21 .sidebar {

  display:grid !important;

  grid-template-rows:
    auto
    minmax(0,1fr)
    auto;

  height:100vh;

  overflow:hidden;

  padding:
    12px 12px
    10px;

}


/* ---------------------------------------------------------
   BRAND
   --------------------------------------------------------- */

body.nmbm-v21 .brand {

  margin:0 0 6px;

  padding:
    0 5px
    9px;

  min-height:0;

}


body.nmbm-v21 .brand-mark {

  width:38px;
  height:38px;

}


body.nmbm-v21 .brand strong {

  font-size:16px;

}


body.nmbm-v21 .brand span:not(.nmbm-version-pill) {

  font-size:9px;

}


/* ---------------------------------------------------------
   NAVIGATION AREA
   Automatically divides the available height between items.
   --------------------------------------------------------- */

body.nmbm-v21 .sidebar nav {

  display:grid !important;

  grid-auto-flow:row;

  grid-auto-rows:
    minmax(27px,1fr);

  align-content:stretch;

  gap:1px !important;

  min-height:0;

  overflow:hidden !important;

  padding:
    2px 0 5px !important;

  margin:0 !important;

}


/* ---------------------------------------------------------
   EVERY MENU BUTTON SAME HEIGHT / SPACING
   --------------------------------------------------------- */

body.nmbm-v21 .nav-link {

  display:flex;

  align-items:center;

  width:100%;

  height:100%;

  min-height:0 !important;

  margin:0 !important;

  padding:
    2px 7px !important;

  border-radius:8px;

  font-size:11.5px;

  line-height:1;

}


/* Icons */

body.nmbm-v21 .nav-icon {

  flex:
    0 0 25px;

  width:25px;
  height:25px;

  margin-right:2px;

  border-radius:7px;

}


body.nmbm-v21 .nav-icon svg {

  width:14px;
  height:14px;

}


/* ---------------------------------------------------------
   DIVIDERS
   Do not consume the height of a full menu button.
   --------------------------------------------------------- */

body.nmbm-v21 .nav-divider {

  min-height:1px !important;

  height:1px !important;

  margin:
    2px 4px !important;

  align-self:center;

}


/* ---------------------------------------------------------
   ACCOUNT / LOGOUT FOOTER
   Back into normal document flow.
   NEVER overlaps menu.
   --------------------------------------------------------- */

body.nmbm-v21 .sidebar-footer {

  position:static !important;

  left:auto !important;
  right:auto !important;
  bottom:auto !important;

  width:100%;

  margin:5px 0 0 !important;

  padding:
    6px 0 0 !important;

  border-top:
    1px solid
    rgba(255,255,255,.12);

  background:transparent !important;

  z-index:auto;

}


/* User details */

body.nmbm-v21 .sidebar-footer .user-chip {

  display:flex !important;

  align-items:center;

  justify-content:space-between;

  padding:
    2px 4px !important;

  margin:0;

  min-height:0;

  background:transparent;

}


body.nmbm-v21 .sidebar-footer .user-chip strong {

  font-size:10px;

  line-height:1.1;

}


body.nmbm-v21 .sidebar-footer .user-chip span {

  margin:0;

  font-size:8px;

  line-height:1.1;

}


/* Change password */

body.nmbm-v21 .sidebar-footer .small-link {

  display:block;

  margin:
    2px 3px
    4px !important;

  padding:0;

  font-size:9px;

  line-height:1.15;

  color:#F3C4C8;

}


/* Sign out */

body.nmbm-v21 .sidebar-logout {

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  height:30px;

  min-height:30px !important;

  margin:0;

  padding:
    4px 8px !important;

  border:
    1px solid
    rgba(255,255,255,.23);

  border-radius:8px;

  background:
    rgba(255,255,255,.07);

  color:#FFF;

  font-size:11px;

  font-weight:850;

}


body.nmbm-v21 .sidebar-logout:hover {

  background:#C8202D;

  border-color:#DD4A55;

}


/* ---------------------------------------------------------
   LAPTOP HEIGHT
   --------------------------------------------------------- */

@media (max-height:900px) {

  body.nmbm-v21 .sidebar {

    padding:
      9px 11px
      8px;

  }


  body.nmbm-v21 .brand {

    margin-bottom:4px;

    padding-bottom:6px;

  }


  body.nmbm-v21 .brand-mark {

    width:34px;
    height:34px;

  }


  body.nmbm-v21 .sidebar nav {

    grid-auto-rows:
      minmax(24px,1fr);

    gap:0 !important;

  }


  body.nmbm-v21 .nav-link {

    padding:
      1px 6px !important;

    font-size:10.8px;

  }


  body.nmbm-v21 .nav-icon {

    flex-basis:22px;

    width:22px;
    height:22px;

  }


  body.nmbm-v21 .nav-icon svg {

    width:13px;
    height:13px;

  }


  body.nmbm-v21 .sidebar-footer {

    margin-top:3px !important;

    padding-top:4px !important;

  }


  body.nmbm-v21 .sidebar-footer .user-chip {

    display:none !important;

  }


  body.nmbm-v21 .sidebar-footer .small-link {

    margin:
      1px 2px
      3px !important;

  }


  body.nmbm-v21 .sidebar-logout {

    height:27px;

    min-height:27px !important;

  }

}


/* ---------------------------------------------------------
   VERY SHORT SCREEN
   --------------------------------------------------------- */

@media (max-height:760px) {

  body.nmbm-v21 .brand span:not(.nmbm-version-pill) {

    display:none;

  }


  body.nmbm-v21 .brand-mark {

    width:30px;
    height:30px;

  }


  body.nmbm-v21 .sidebar nav {

    grid-auto-rows:
      minmax(21px,1fr);

  }


  body.nmbm-v21 .nav-link {

    font-size:10px;

  }


  body.nmbm-v21 .nav-icon {

    flex-basis:20px;

    width:20px;
    height:20px;

  }


  body.nmbm-v21 .nav-icon svg {

    width:12px;
    height:12px;

  }

}



/* =========================================================
   SIDEBAR ACCOUNT ACTIONS POLISH V2.1.2
   ========================================================= */

body.nmbm-v21 .sidebar-footer {

  display:grid;

  gap:7px;

  margin-top:6px !important;

  padding-top:8px !important;

}


/* ---------------------------------------------------------
   CHANGE PASSWORD
   Secondary account action
   --------------------------------------------------------- */

body.nmbm-v21 .sidebar-footer .small-link {

  display:flex !important;

  align-items:center;

  justify-content:center;

  width:100%;

  min-height:29px;

  margin:0 !important;

  padding:5px 8px !important;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:8px;

  background:
    rgba(255,255,255,.045);

  color:#F1D3D6 !important;

  font-size:10px;

  font-weight:720;

  line-height:1;

  text-align:center;

  text-decoration:none !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}


body.nmbm-v21 .sidebar-footer .small-link:hover {

  background:
    rgba(255,255,255,.09);

  border-color:
    rgba(255,255,255,.22);

  color:#FFF !important;

}


/* ---------------------------------------------------------
   SIGN OUT
   Stronger final account action
   --------------------------------------------------------- */

body.nmbm-v21 .sidebar-logout {

  display:flex;

  align-items:center;

  justify-content:center;

  width:100%;

  min-height:31px !important;

  height:31px;

  margin:0 !important;

  padding:5px 8px !important;

  border:
    1px solid
    rgba(255,255,255,.24);

  border-radius:8px;

  background:
    rgba(255,255,255,.075);

  color:#FFF;

  font-size:10.5px;

  font-weight:850;

  letter-spacing:.15px;

}


body.nmbm-v21 .sidebar-logout:hover {

  background:#C8202D;

  border-color:#E2545F;

}


/* ---------------------------------------------------------
   KEEP USER DETAILS SEPARATE FROM ACTION BUTTONS
   --------------------------------------------------------- */

body.nmbm-v21 .sidebar-footer .user-chip {

  margin-bottom:1px;

}


/* Cleaner compact laptop version */

@media (max-height:900px) {

  body.nmbm-v21 .sidebar-footer {

    gap:5px;

    padding-top:6px !important;

  }


  body.nmbm-v21 .sidebar-footer .small-link {

    min-height:27px;

    font-size:9.5px;

  }


  body.nmbm-v21 .sidebar-logout {

    height:29px;

    min-height:29px !important;

    font-size:10px;

  }

}