:root{
  --navy:#0D2A4D; --navy-deep:#0A1F38; --ochre:#8C1D21; --ochre-light:#A6373B;
  --good:#1E5631; --warn:#9C7A2E; --danger:#8C1D21; --gold:#9C7A2E;
  --bone:#F0F2F4; --paper:#FFFFFF; --line:#C9CFD6;
  --font-display:'Georgia','Times New Roman',serif;
  --font-body:'Arial','Helvetica Neue',Helvetica,sans-serif;
  --font-mono:'Courier New',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bone);font-family:var(--font-body);color:#1B2733;font-size:14px;max-width:100%;overflow-x:hidden;}

.shell{display:flex;min-height:100vh;}
.rail{width:240px;flex:0 0 240px;background:var(--navy-deep);color:#D7DEE6;display:flex;flex-direction:column;padding:0;border-right:4px solid var(--gold);}
.brand{padding:22px 18px 16px;border-bottom:1px solid #1C3B5E;margin-bottom:6px;}
.brand h1{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.3px;margin:0;color:#fff;line-height:1.25;}
.brand p{margin:6px 0 0;font-size:10px;color:#8FA3BD;letter-spacing:.1em;text-transform:uppercase;border-top:1px solid #1C3B5E;padding-top:6px;}
.nav-group{margin-top:10px;}
.nav-group .label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#5F7596;padding:0 18px;margin-bottom:4px;font-weight:700;}
.nav-link{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:#C6D3E5;padding:9px 18px;font-size:13px;cursor:pointer;border-left:3px solid transparent;text-decoration:none;}
.nav-link:hover{background:rgba(255,255,255,.04);color:#fff;}
.nav-link.active{background:rgba(156,122,46,.18);border-left-color:var(--gold);color:#fff;font-weight:700;}
.rail-foot{margin-top:auto;padding:14px 18px;font-size:10px;color:#5F7596;border-top:1px solid #1C3B5E;line-height:1.5;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.gov-strip{height:6px;background:linear-gradient(90deg,var(--navy) 0 50%,var(--ochre) 50% 100%);}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 30px;border-bottom:2px solid var(--navy);background:var(--paper);}
.topbar h2{margin:0;font-size:20px;font-family:var(--font-display);font-weight:700;color:var(--navy-deep);}
.topbar .sub{font-size:12px;color:#5B6675;margin-top:3px;}
.who{display:flex;align-items:center;gap:10px;font-size:12px;border:1px solid var(--line);padding:6px 12px;border-radius:2px;background:#F7F8F9;}
.who .av{width:28px;height:28px;border-radius:2px;background:var(--navy-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;}
.view{padding:28px 30px;flex:1;}

.grid{display:grid;gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:1.3fr 1fr;}
@media(max-width:1000px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-2{grid-template-columns:1fr;}}

.card{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:18px 20px;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.stat{border-top:3px solid var(--navy);}
.stat .label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#5B6675;margin-bottom:6px;font-weight:700;}
.stat .num{font-family:var(--font-display);font-size:26px;color:var(--navy-deep);font-weight:700;}
.stat .delta{font-size:11px;margin-top:4px;}
.delta.up{color:var(--good);}.delta.down{color:var(--danger);}

h3.card-title{margin:0 0 14px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--navy-deep);font-weight:700;border-bottom:2px solid var(--gold);padding-bottom:8px;}

table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#fff;padding:9px 10px;background:var(--navy-deep);}
td{padding:9px 10px;border-bottom:1px solid #E6E9EC;}
tr:nth-child(even) td{background:#F7F8F9;}

.pill{display:inline-block;padding:3px 10px;border-radius:2px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border:1px solid transparent;}
.pill.paid{background:#E5EEE7;color:var(--good);border-color:var(--good);}
.pill.unpaid{background:#F3E7E8;color:var(--ochre);border-color:var(--ochre);}
.pill.blacklist{background:#F3DEDA;color:var(--danger);border-color:var(--danger);}
.pill.active{background:#E2EAF2;color:var(--navy);border-color:var(--navy);}

.btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:2px;padding:10px 18px;font-size:12.5px;font-weight:700;cursor:pointer;letter-spacing:.02em;text-transform:uppercase;}
.btn-primary{background:var(--navy-deep);color:#fff;}
.btn-ochre{background:var(--ochre);color:#fff;}
.btn-outline{background:transparent;border:1px solid var(--navy-deep);color:var(--navy-deep);}
.btn-sm{padding:6px 12px;font-size:11px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}

label.f{display:block;font-size:11.5px;font-weight:700;color:#3B4654;margin:0 0 5px;text-transform:uppercase;letter-spacing:.03em;}
input,select{width:100%;padding:9px 11px;border:1px solid #AEB7C0;border-radius:2px;font-size:13px;background:#fff;}
input:focus,select:focus{outline:2px solid var(--gold);outline-offset:1px;}
.field{margin-bottom:13px;}
.field-row{display:flex;gap:8px;}
.field-row input{flex:0 0 70px;}
.field-row select{flex:1;}

.alert{padding:10px 14px;border-radius:2px;font-size:13px;margin-bottom:16px;border:1px solid;}
.alert-error{background:#F3E7E8;color:var(--danger);border-color:var(--danger);}
.alert-success{background:#E5EEE7;color:var(--good);border-color:var(--good);}

.stripe{height:6px;background:linear-gradient(90deg,var(--navy) 0 50%,var(--ochre) 50% 100%);}
.empty{text-align:center;padding:40px 20px;color:#5B6675;font-size:13px;}
.empty b{display:block;color:var(--navy-deep);font-size:14px;margin-bottom:4px;}
.note{font-size:11px;color:#5B6675;margin-top:10px;}

.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--navy-deep);}
.login-card{background:#fff;border-radius:2px;padding:34px;width:360px;border-top:6px solid var(--gold);}
.login-card h1{font-family:var(--font-display);font-size:19px;margin:0 0 4px;color:var(--navy-deep);}
.login-card p{font-size:12px;color:#5B6675;margin:0 0 20px;}

/* ===== Mobile nav toggle (hamburger) ===== */
.nav-toggle{
  display:none;background:none;border:1px solid #1C3B5E;border-radius:2px;color:#D7DEE6;
  padding:8px 10px;font-size:0;cursor:pointer;
}
.nav-toggle .material-symbols-outlined{margin:0;font-size:22px;}

@media (max-width: 860px) {
  .shell{flex-direction:column;}

  .rail{
    width:100%;flex:0 0 auto;border-right:none;border-bottom:4px solid var(--gold);
    padding:0;position:relative;
  }
  .brand{
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:none;margin-bottom:0;padding:14px 16px;
  }
  .brand h1{font-size:14px;}
  .brand p{display:none;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}

  /* Nav groups are hidden by default — only shown when .rail.open */
  .nav-group{display:none;margin-top:0;}
  .rail.open .nav-group{display:block;}
  .rail.open{padding-bottom:10px;}
  .nav-group .label{padding:10px 16px 4px;}
  .nav-link{padding:11px 16px;font-size:14px;}

  .rail-foot{display:none;}
  .rail.open .rail-foot{display:block;}

  .topbar{padding:14px 16px;flex-wrap:wrap;gap:10px;}
  .topbar h2{font-size:17px;}
  .who{display:none;}
  .view{padding:16px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  table{font-size:11.5px;}
  th,td{padding:7px 6px;}
  .field-row input{flex:0 0 56px;}
  .login-card{width:90%;padding:24px;}
}

@media (max-width: 480px) {
  .grid-4{grid-template-columns:1fr 1fr;}
  .topbar h2{font-size:15px;}
}

/* Responsive tables: below 700px, each row becomes a stacked card
   with the column name as a label, instead of scrolling sideways. */
@media (max-width: 700px) {
  table, thead, tbody, tr, th, td{display:block;}
  table{width:100%;border:none;max-width:100%;}
  thead{display:none;}
  tr{
    border:1px solid var(--line);border-radius:4px;margin-bottom:10px;
    background:#fff;padding:4px 0;max-width:100%;overflow:hidden;
  }
  tr:nth-child(even) td{background:transparent;}
  td{
    display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;
    padding:8px 12px;border-bottom:1px solid #F0F2F4;font-size:12.5px;text-align:right;
    max-width:100%;word-break:break-word;overflow-wrap:anywhere;
  }
  td:last-child{border-bottom:none;}
  td::before{
    content:attr(data-label);font-weight:700;color:#5B6675;text-transform:uppercase;
    font-size:10px;letter-spacing:.04em;text-align:left;flex:0 0 auto;
  }
  td > *{max-width:100%;}
  td .btn, td a.btn{margin:2px 0;}
  td[data-label="Actions"]{flex-direction:column;align-items:flex-start;gap:6px;}
  td[data-label="Actions"]::before{margin-bottom:2px;}
  td[data-label="Actions"] .btn{width:100%;justify-content:center;}
}