/* DRC Management System - the look of the Excel workbooks: navy title band,
   blue section bars, tiles, zebra tables, coloured status pills. */
:root {
  --navy: #0B1F3A; --blue: #12355B; --teal: #0E8C7E; --coral: #C8453A; --gold: #E8A33D;
  --s50: #F6F8FB; --s100: #EDF1F6; --s200: #D8E0EA; --s400: #94A3B8; --s500: #64748B;
  --ink: #1E293B; --in-fill: #FFFBEB; --in-ink: #1D4ED8;
  --ok-bg: #DCFCE7; --ok: #166534; --warn-bg: #FEF3C7; --warn: #92400E;
  --bad-bg: #FEE2E2; --bad: #991B1B; --pend-bg: #F1F5F9; --pend: #64748B;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Calibri, "Segoe UI", Arial, sans-serif; font-size: 14px;
       color: var(--ink); background: var(--s50); }
a { color: var(--blue); }
header.top { background: var(--navy); color: #fff; display: flex; align-items: center;
             gap: 18px; padding: 0 18px; height: 52px; position: sticky; top: 0; z-index: 5; }
header.top .brand { font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
header.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
header.top nav a { color: #C7D2E0; text-decoration: none; padding: 6px 10px; border-radius: 4px; }
header.top nav a:hover, header.top nav a.on { background: var(--blue); color: #fff; }
header.top .right { margin-left: auto; display: flex; gap: 10px; align-items: center;
                    font-size: 13px; color: #C7D2E0; }
header.top .right a { color: #fff; text-decoration: none; }
.btn.pdf { background: #C8453A; border-color: #C8453A; color: #fff; }
.btn:disabled { opacity: .7; cursor: wait; }
header.top .who { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
header.top .who small { font-size: 10.5px; color: #8FA3BF; text-transform: uppercase; letter-spacing: .3px; }
header.top .lang a { padding: 2px 6px; border: 1px solid #415574; border-radius: 3px; }
header.top .lang a.on { background: #fff; color: var(--navy); }
main { max-width: 1480px; margin: 0 auto; padding: 18px; }
.band { background: var(--navy); color: #fff; padding: 12px 16px; font-size: 18px;
        font-weight: 700; display: flex; justify-content: space-between; align-items: center;
        gap: 12px; flex-wrap: wrap; }
.subband { background: var(--blue); color: #fff; padding: 6px 16px; font-size: 13px;
           display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.subband a { color: #fff; }
.card { background: #fff; border: 1px solid var(--s200); margin-bottom: 16px; }
.section { background: var(--blue); color: #fff; font-weight: 700; padding: 6px 12px;
           font-size: 13px; text-transform: uppercase; letter-spacing: .3px; }
.section.navy { background: var(--navy); }
.section.slate { background: #64748B; }
.pad { padding: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         gap: 10px; padding: 12px; background: #fff; }
.tile { border: 1px solid var(--s200); border-top: 3px solid var(--blue); padding: 8px 12px; }
.tile .k { font-size: 11px; color: var(--s500); font-weight: 700; text-transform: uppercase; }
.tile .v { font-size: 22px; font-weight: 700; color: var(--navy); }
.tile.teal { border-top-color: var(--teal); } .tile.coral { border-top-color: var(--coral); }
.tile.gold { border-top-color: var(--gold); } .tile.grey { border-top-color: var(--s400); }
.tile.navy { border-top-color: var(--navy); }
/* end of month: choose a month in one click, five numbered steps, big buttons */
.btn.big { font-size: 16px; padding: 12px 22px; }
.eom-pick { padding: 16px; }
.eom-help { font-size: 16px; margin: 0 0 14px; color: var(--ink); }
.eom-office select { font-size: 15px; padding: 6px 8px; margin-left: 6px; }
.eom-office { margin-bottom: 12px; }
.eom-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.eom-month { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-decoration: none;
             color: var(--ink); background: #fff; border: 2px solid var(--s200); border-radius: 8px; }
.eom-month:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(11,31,58,.12); }
.eom-month .mname { font-size: 20px; font-weight: 700; color: var(--navy); text-transform: capitalize; }
.eom-month .mdate { font-size: 12px; color: var(--s500); }
.eom-month .mstate { font-size: 12px; font-weight: 700; margin-top: 4px; }
.eom-month.submitted { border-color: #86EFAC; background: var(--ok-bg); } .eom-month.submitted .mstate { color: var(--ok); }
.eom-month.accepted { border-color: var(--ok); background: var(--ok-bg); } .eom-month.accepted .mstate { color: var(--ok); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.eom-control .neg { color: var(--bad); font-size: 16px; }
.eom-month.started { border-color: #FCD34D; background: var(--warn-bg); } .eom-month.started .mstate { color: var(--warn); }
.eom-month.todo { border-color: #FCA5A5; } .eom-month.todo .mstate { color: var(--bad); }
.eom-month.running .mstate { color: var(--blue); }
.eom-month.scanned { border-color: #A7C4E5; background: #F1F6FC; } .eom-month.scanned .mstate { color: var(--blue); }
.todo-tile { text-decoration: none; color: inherit; }
.eom-months.compact { padding: 10px 16px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.eom-months.compact .eom-month { padding: 8px 10px; } .eom-months.compact .mname { font-size: 15px; }
.eom-months.compact .eom-month.on { border-color: var(--blue); background: var(--s100); }
.eom-years { margin-top: 14px; display: flex; gap: 8px; }
.eom-years a { padding: 6px 14px; border: 1px solid var(--s200); border-radius: 4px; text-decoration: none; }
.eom-years a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.eom-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 16px;
           background: var(--s100); border-top: 1px solid var(--s200); }
.eom-ractions { margin-left: auto; }
.eom-monthpick { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.eom-monthpick select { font-size: 15px; font-weight: 700; padding: 6px 10px; text-transform: capitalize; }
.eom-steps { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; }
.eom-steps a { text-decoration: none; padding: 6px 12px; border-radius: 20px; background: var(--s100); color: var(--ink); }
.eom-steps a b, .stepn { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center;
                         border-radius: 50%; background: var(--navy); color: #fff; margin-right: 4px; font-size: 12px; }
.section .stepn { background: #fff; color: var(--blue); }
.eom-questions { display: grid; gap: 0; }
.eom-q { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.8fr); gap: 12px; align-items: center;
         padding: 10px 14px; border-bottom: 1px solid var(--s200); border-left: 4px solid var(--s200); }
.eom-q.ok { border-left-color: var(--ok); } .eom-q.warn { border-left-color: var(--gold); }
.eom-q .qtext { font-size: 14.5px; } .eom-q .qn { color: var(--s500); font-weight: 700; margin-right: 6px; }
.eom-q .qd { width: 100%; padding: 8px; border: 1px solid var(--s200); border-radius: 4px; background: var(--in-fill); }
.yn { display: flex; gap: 6px; }
.yn label { position: relative; }
.yn label input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; top: 0; }
.yn label span { display: inline-block; min-width: 64px; text-align: center; padding: 9px 14px; font-weight: 700;
                 border: 2px solid var(--s200); border-radius: 6px; cursor: pointer; background: #fff; }
.yn label input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.yn label input:focus-visible + span { outline: 2px solid var(--in-ink); }
.eom-actions { position: sticky; bottom: 0; z-index: 4; display: flex; gap: 12px; justify-content: flex-end;
               padding: 12px 16px; background: #fff; border-top: 2px solid var(--s200); box-shadow: 0 -4px 12px rgba(11,31,58,.08); }
@media (max-width: 760px) { .eom-q { grid-template-columns: 1fr; } }
.history .chg { padding: 1px 0; } .history .chg.added b { color: var(--ok); }
.history .chg.removed { color: var(--bad); } .history .chg.changed b, .history .chg.field b { color: var(--in-ink); }
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th { background: var(--s100); color: var(--s500); font-size: 11px; text-transform: uppercase;
                text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--s400);
                white-space: nowrap; }
table.grid td { padding: 5px 8px; border-bottom: 1px solid var(--s200); vertical-align: middle; }
table.grid tr:nth-child(even) td { background: var(--s50); }
table.grid tfoot td { font-weight: 700; border-top: 2px solid var(--navy); background: #fff; }
.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.c { text-align: center !important; }
.muted { color: var(--s500); } .small { font-size: 12px; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px;
        font-weight: 700; white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.pend { background: var(--pend-bg); color: var(--pend); }
.neg { color: var(--bad); font-weight: 700; }
input, select, textarea { font: inherit; color: var(--in-ink); background: var(--in-fill);
        border: 1px solid var(--s200); padding: 5px 7px; border-radius: 3px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid #93C5FD; border-color: #3B82F6; }
input.num { text-align: right; }
input[readonly], select[disabled], textarea[readonly] { background: #fff; color: var(--ink); }
td.in { padding: 2px 4px; }
.btn { display: inline-block; font: inherit; font-weight: 700; padding: 8px 16px; border-radius: 4px;
       border: 1px solid var(--blue); background: #fff; color: var(--blue); cursor: pointer;
       text-decoration: none; width: auto; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:hover { filter: brightness(1.08); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; justify-content: flex-end;
           background: #fff; border-top: 1px solid var(--s200); }
.cols { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 16px; }
#lines { min-width: 960px; }
.cols2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.msgs { list-style: none; padding: 0; margin: 0 0 12px; }
.msgs li { padding: 8px 12px; margin-bottom: 6px; border-left: 4px solid; background: #fff; }
.msgs .success { border-color: var(--ok); } .msgs .error { border-color: var(--bad); color: var(--bad); }
.msgs .warning { border-color: var(--gold); }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 12px; }
.cal a, .cal span { display: block; padding: 6px 4px; text-align: center; border-radius: 4px;
                    text-decoration: none; font-size: 12px; border: 1px solid var(--s200); }
.cal .ok { background: var(--ok-bg); color: var(--ok); } .cal .warn { background: var(--warn-bg); color: var(--warn); }
.cal .bad { background: var(--bad-bg); color: var(--bad); } .cal .pend { background: #fff; color: var(--s500); }
.cal .today { outline: 2px solid var(--navy); }
.cal .hd { border: none; color: var(--s500); font-weight: 700; }
.attach { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.attach a { font-size: 12px; }
.attach form { display: inline; }
.attach input[type=file] { display: none; }
.attach label { cursor: pointer; font-size: 12px; color: var(--blue); border: 1px dashed var(--s400);
                padding: 1px 6px; border-radius: 3px; background: #fff; }
.scroll { overflow-x: auto; }
.login { max-width: 380px; margin: 60px auto; }
.flag { color: var(--bad); font-weight: 700; }
/* ---- two products, two colours: CASH green, TOLL VOUCHERS orange -------- */
:root { --cash: #059669; --cash-dark: #047857; --peage: #EA580C; --peage-dark: #C2410C; }
header.top nav a.prod { font-weight: 800; letter-spacing: .4px; border: 1px solid transparent; }
header.top nav a.prod.cash { color: #6EE7B7; border-color: #047857; }
header.top nav a.prod.peage { color: #FDBA74; border-color: #9A3412; }
header.top nav a.prod.cash:hover, header.top nav a.prod.cash.on { background: var(--cash); color: #fff; }
header.top nav a.prod.peage:hover, header.top nav a.prod.peage.on { background: var(--peage); color: #fff; }
.subnav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 6px 18px;
          position: sticky; top: 52px; z-index: 4; }
.subnav.cash { background: linear-gradient(90deg, var(--cash-dark), var(--cash)); }
.subnav.peage { background: linear-gradient(90deg, var(--peage-dark), var(--peage)); }
.subnav .sn-title { color: #fff; font-weight: 800; margin-right: 10px; letter-spacing: .5px; }
.subnav a { color: #fff; opacity: .9; text-decoration: none; padding: 5px 12px; border-radius: 6px;
            font-size: 13px; font-weight: 600; }
.subnav a:hover { background: rgba(255,255,255,.15); opacity: 1; }
.subnav a.on { background: #fff; opacity: 1; }
.subnav.cash a.on { color: var(--cash-dark); } .subnav.peage a.on { color: var(--peage-dark); }
.dlogo.cash { background: linear-gradient(135deg, #10B981, var(--cash-dark)); }
.dlogo.peage { background: linear-gradient(135deg, #FB923C, var(--peage-dark)); }
main.cash .section { background: var(--cash-dark); }
main.peage .section { background: var(--peage-dark); }

/* ---- reports: filters, coloured cells, print --------------------------- */
.ractions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.wa { background: #25D366; border-color: #1DA851; color: #fff; }
.rfilters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; background: #fff;
            border: 1px solid var(--s200); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.rfilters label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--navy); }
.rfilters select, .rfilters input { min-width: 170px; }
.rbody.withcal { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
.rcard { border-radius: 14px; overflow: hidden; }
.rct { font-weight: 800; color: var(--navy); padding: 10px 14px; font-size: 15px;
       display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 14px; }
.rgrid .rcard { margin-bottom: 0; }
.rgrid table.rt th, .rgrid table.rt td { padding: 4px 6px; }
.rgrid table.rt th, .rgrid table.rt td:first-child { white-space: normal; }
.rgrid table.rt td:first-child { font-size: 12px; }
table.rt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.rt th { background: var(--navy); color: #fff; font-size: 11px; text-transform: uppercase;
              padding: 8px 8px; text-align: right; white-space: nowrap; }
table.rt th:first-child { text-align: left; position: sticky; left: 0; z-index: 1; }
table.rt td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--s200);
              font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rt td:first-child { text-align: left; font-weight: 700; color: var(--navy); background: #F5F8FC;
                          position: sticky; left: 0; }
table.rt tbody tr:hover td { background: #EEF4FF; }
table.rt tfoot td { background: #1F3864; color: #fff; font-weight: 800; padding: 8px; text-align: right; }
table.rt tfoot td:first-child { text-align: left; background: #1F3864; color: #fff; }
td.rc.txt { text-align: left; white-space: normal; min-width: 220px; font-size: 12px; color: var(--s500); }
td.rc.strong span, td.rc.cbal span { font-weight: 800; color: var(--navy); }
td.rc.tot { background: #DCE7F5; font-weight: 800; }
td.rc.hand { background: #FFF1E6; font-weight: 700; }
td.rc.neg span { color: #C00000; font-weight: 700; }
td.rc.cin span { color: #047857; font-weight: 700; }
td.rc.cout span { color: #B42318; }
td.rc.crit span, td.rc.warn span, td.rc.good span, td.rc.pink span, td.rc.transit span,
.rlegend .rc span { display: inline-block; min-width: 52px; text-align: center; padding: 2px 9px;
                    border-radius: 999px; font-weight: 800; }
.rc.crit span { background: #EF4444; color: #fff; }
.rc.warn span { background: #FBBF24; color: #3B2600; }
.rc.good span { background: #BBF7D0; color: #14532D; }
.rc.pink span { background: #FECACA; color: #9C0006; }
.rc.transit span { background: #E5E7EB; color: #4B5563; font-size: 11px; }
/* a wide table laid out like its workbook: an office name over its three columns */
table.rt.wide th, table.rt.wide td { padding: 4px 7px; font-size: 12px; }
table.rt.wide tr.grp th { background: #fff; color: var(--navy); font-size: 13px; font-weight: 800; text-align: center;
                          border-bottom: 2px solid var(--navy); border-left: 2px solid #CBD5E1; }
table.rt.wide tr.grp th:first-child { border-left: 0; }
table.rt.wide thead tr:last-child th:not(:first-child) { white-space: normal; width: 62px; min-width: 62px; text-align: center; line-height: 1.2; }
table.rt.wide thead tr:last-child th:nth-child(3n+1):not(:first-child) { background: #C6E0B4; color: #14532D; }
table.rt.wide th:nth-child(3n+2), table.rt.wide td:nth-child(3n+2) { border-left: 2px solid #CBD5E1; }
table.rt.wide tbody td:nth-last-child(-n+3) { background: #F1F5F9; font-weight: 700; }
.rlegend { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.rnote { font-size: 12px; color: var(--s500); padding: 8px 14px 12px; margin: 0; }
.rwarn { background: #FEF3C7; color: #92400E; border-left: 4px solid #F59E0B; padding: 8px 12px;
         border-radius: 8px; font-weight: 600; }
.rcal table { width: 100%; border-collapse: collapse; text-align: center; font-size: 13px; }
.rcal th { color: var(--s500); font-size: 11px; padding: 4px 0; }
.rcal td { padding: 2px; }
.rcal td a { display: block; padding: 6px 0; border-radius: 6px; text-decoration: none; color: var(--ink); }
.rcal td a:hover { background: var(--s100); }
.rcal td a.we { color: var(--s400); }
.rcal td a.on { background: var(--peage); color: #fff; font-weight: 800; }
.rcal .rct a { text-decoration: none; padding: 0 8px; }
@media (max-width: 1000px) { .rbody.withcal { grid-template-columns: 1fr; } }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .subnav, .rfilters, .ractions { display: none !important; }
  .kpi { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rc span, table.rt th, table.rt tfoot td, .dlogo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rgrid { grid-template-columns: repeat(3, 1fr); }
  table.rt { font-size: 10px; }
}

/* ---- filing cabinet: one folder per month ------------------------------ */
.folders { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; padding: 12px;
           background: #fff; border-bottom: 1px solid var(--s200); }
.folder { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 8px;
          text-decoration: none; color: var(--ink); font-size: 12px; border: 1px solid var(--s200); }
.folder .fi { font-size: 20px; } .folder .fn { font-weight: 700; color: var(--blue); }
.folder.on { background: var(--blue); color: #fff; } .folder.on .fn { color: #fff; }
@media (max-width: 900px) { .folders { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- management dashboards ------------------------------------------- */
.dhead { display: flex; justify-content: space-between; align-items: center; gap: 16px;
         flex-wrap: wrap; margin-bottom: 14px; }
.dtitle { display: flex; align-items: center; gap: 14px; }
.dlogo { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #0E9CB5, #0F5FA8);
         color: #fff; font-weight: 800; font-size: 26px; display: grid; place-items: center; }
.dname { font-size: 26px; font-weight: 800; color: var(--navy); }
.dsub { font-size: 12px; color: #0F5FA8; font-weight: 700; letter-spacing: .4px; }
.dtabs { display: flex; gap: 6px; background: linear-gradient(90deg, #0F3D7A, #12355B); padding: 6px;
         border-radius: 14px; flex-wrap: wrap; }
.dtabs a { color: #DCE7F5; text-decoration: none; padding: 9px 20px; border-radius: 10px; font-weight: 600; }
.dtabs a.on { background: #fff; color: #0F5FA8; }
.dtabs a:hover:not(.on) { background: rgba(255,255,255,.12); }
.dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { border-radius: 16px; padding: 14px 18px; color: #fff; min-height: 112px;
       box-shadow: 0 2px 6px rgba(15, 40, 80, .12); }
.kpi a { color: #fff; text-decoration: none; display: block; }
.kpi .kk { font-size: 14px; opacity: .92; }
.kpi .kv { font-size: 32px; font-weight: 800; line-height: 1.25; margin-top: 4px; white-space: nowrap; }
.kpi .ks { font-size: 11px; opacity: .85; margin-top: 2px; }
.kpi.k1 { background: linear-gradient(135deg, #6A3FC8, #5146D9); }
.kpi.k2 { background: linear-gradient(135deg, #12357A, #0F5FA8); }
.kpi.k3 { background: linear-gradient(135deg, #0B79C2, #12A3D9); }
.kpi.k4 { background: linear-gradient(135deg, #0E9CB5, #21C77A); }
.kpi.k5 { background: linear-gradient(135deg, #C2410C, #F59E0B); }
.kpi.k0 { background: linear-gradient(135deg, #475569, #64748B); }
.kpi.k6 { background: linear-gradient(135deg, #0B1F3A, #1F3864); }
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpis.five .kv { font-size: 28px; }
.kpis.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis.one { grid-template-columns: minmax(0, 1fr); }
.kpis.daykpis { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
.kpis.daykpis .kpi { min-height: 92px; padding: 12px 14px; }
.kpis.daykpis .kv { font-size: 21px; }
#lines tr.ready td { background: #F0FDF4; }
#lines .auto { outline: 2px solid #34D399; transition: outline-color .3s; }
.gap { font-weight: 800; white-space: nowrap; }
.gap .gl { font-size: .72em; text-transform: uppercase; letter-spacing: .4px; margin-right: 4px; }
.gap.short { color: #B91C1C; } .gap.over { color: #15803D; } .gap.even { color: var(--ink); }
.kpi .gap { display: inline-block; padding: 1px 10px; border-radius: 10px; background: #fff; }
.kpi .gap.even { background: transparent; color: #fff; padding: 0; }
.validated { background: #ECFDF5; border-left: 4px solid var(--cash); padding: 10px 14px; border-radius: 8px;
             color: #065F46; }
.validated.admin { background: #FFF7ED; border-left-color: var(--peage); color: #9A3412; }
.cur { font-size: .62em; font-weight: 700; color: var(--s500); letter-spacing: .3px; }
.kpi .cur { color: #fff; opacity: .8; }
input::placeholder { color: #CBD5E1; }
input.hint::placeholder { color: var(--cash); font-weight: 700; }
/* one Amount column: the sign in front says in (+, green) or out (−, red) */
td.amt { white-space: nowrap; }
td.amt input { width: calc(100% - 30px); display: inline-block; }
.dir { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 6px; font-weight: 800; font-size: 15px; background: #F1F5F9; color: #94A3B8; vertical-align: middle; }
.dir.in { background: #DCFCE7; color: #15803D; }
.dir.out { background: #FEE2E2; color: #B91C1C; }
td.amt input.in { color: #15803D; } td.amt input.out { color: #B91C1C; }
input.hint.out::placeholder { color: #B91C1C; }
td.tot2 { line-height: 1.7; } td.tot2 .dir { width: 18px; height: 18px; font-size: 13px; }
body.loading main { opacity: .55; transition: opacity .15s; cursor: progress; }
@media (max-width: 1200px) { .kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dcols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.dcard { border-radius: 14px; padding: 12px 14px; }
.dct { font-weight: 800; font-size: 16px; color: var(--navy); display: flex; justify-content: space-between;
       gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.dct .lg { font-weight: 400; font-size: 12px; color: var(--ink); }
.dct .lg i, .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 8px; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .grid { stroke: #E2E8F0; stroke-dasharray: 3 3; }
svg.chart .grid.base { stroke: #CBD5E1; stroke-dasharray: none; }
svg.chart .ax { font-size: 11px; fill: #64748B; }
.dnut { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dnsvg { width: 190px; flex: 0 0 190px; }
svg.donut { width: 100%; height: auto; display: block; }
svg.donut .dv { font-size: 22px; font-weight: 800; fill: var(--navy); }
.legend { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 150px; font-size: 12px; }
.legend li { display: flex; align-items: center; padding: 2px 0; }
.legend li i { margin-left: 0; flex: 0 0 10px; }
.legend .ll { flex: 1; } .legend .lv { font-weight: 700; color: var(--navy); }
.dside .dpanel { background: #fff; border: 1px solid var(--s200); border-radius: 14px; padding: 14px;
                 margin-bottom: 16px; display: grid; gap: 8px; }
.dlabel { font-weight: 700; color: var(--navy); font-size: 13px; margin-top: 4px; }
.drange { display: grid; gap: 6px; }
.dquick a { font-size: 12px; }
.dlinks { margin: 0; padding-left: 18px; line-height: 1.8; }
@media (max-width: 1200px) {
  .dgrid { grid-template-columns: 1fr; }
  .dside { order: -1; }
  .dside .dpanel:last-child { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dcols { grid-template-columns: 1fr; }
  .kpi .kv { font-size: 26px; }
}
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  header.top { height: auto; flex-wrap: wrap; padding: 8px 12px; }
  main { padding: 10px; }
}
@media print {
  header.top, .actions, .noprint { display: none !important; }
  body { background: #fff; } main { max-width: none; padding: 0; }
}