:root{
  --blue:#1e5aa8; --blue-dark:#14406e; --green:#7ac143; --green-dark:#5a9e2a;
  --bg:#f4f6f9; --card:#ffffff; --ink:#1c2430; --muted:#68737f; --line:#e3e8ee;
  --red:#d64545; --amber:#e8a13c; --teal:#2a9d8f;
  --radius:10px; --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);display:flex;min-height:100vh}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}

#sidebar{width:220px;background:var(--blue-dark);color:#cfe0f5;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
#sidebar .brand{padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
#sidebar .brand b{color:#fff;font-size:16px;letter-spacing:.4px;display:block}
#sidebar .brand span{font-size:11px;color:var(--green);letter-spacing:2px;text-transform:uppercase}
#sidebar nav{flex:1;padding:10px 0;overflow:auto}
#sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 18px;color:#cfe0f5;font-weight:500;border-left:3px solid transparent}
#sidebar nav a:hover{background:rgba(255,255,255,.07);text-decoration:none}
#sidebar nav a.active{background:rgba(255,255,255,.1);border-left-color:var(--green);color:#fff}
#sidebar nav a .ico{width:18px;text-align:center;opacity:.9}
#sidebar nav .navsec{padding:14px 18px 4px;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#7f9ec4;opacity:.75}
#sidebar nav .navgrp{border-top:1px solid rgba(255,255,255,.06)}
#sidebar nav .navgrp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:11px 18px;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#7f9ec4;user-select:none}
#sidebar nav .navgrp>summary::-webkit-details-marker{display:none}
#sidebar nav .navgrp>summary:hover{color:#cfe0f5}
#sidebar nav .navgrp>summary .chev{font-size:15px;transition:transform .15s ease;opacity:.7}
#sidebar nav .navgrp[open]>summary .chev{transform:rotate(90deg)}
#sidebar nav .navgrp[open]>summary{color:#cfe0f5}
#sidebar .foot{padding:12px 18px;font-size:11px;color:#7f9ec4;border-top:1px solid rgba(255,255,255,.12)}

#main{flex:1;display:flex;flex-direction:column;min-width:0}
#topbar{background:var(--card);border-bottom:1px solid var(--line);padding:10px 24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:5}
#topbar h1{font-size:17px;font-weight:600;flex-shrink:0}
#topbar input{padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font:inherit;width:100%}
#topbar input:focus{outline:2px solid var(--blue);background:#fff}
#topbar .date{margin-left:auto;color:var(--muted);font-size:13px;flex-shrink:0}
#content{padding:24px;max-width:1300px;width:100%}

.flash{padding:11px 16px;border-radius:8px;margin-bottom:16px;font-weight:500}
.flash.ok{background:#e2f0d9;color:var(--green-dark);border:1px solid #c4e0ae}
.flash.err{background:#fbe3e3;color:var(--red);border:1px solid #f3c6c6}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;border-top:3px solid var(--blue)}
.kpi.green{border-top-color:var(--green)} .kpi.amber{border-top-color:var(--amber)} .kpi.red{border-top-color:var(--red)} .kpi.teal{border-top-color:var(--teal)}
.kpi .num{font-size:28px;font-weight:700;line-height:1.1}
.kpi .lbl{color:var(--muted);font-size:12.5px;margin-top:2px}
a.kpi{display:block;color:inherit;text-decoration:none;transition:box-shadow .12s,transform .12s}
a.kpi:hover{box-shadow:0 4px 12px rgba(16,24,40,.13);transform:translateY(-2px);text-decoration:none}
a.kpi .lbl::after{content:" ›";color:var(--muted)}
.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:22px;overflow:hidden}
.panel>.hd{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.panel>.hd h2{font-size:15px;font-weight:600;margin-right:auto}
.panel>.bd{padding:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

table.list{width:100%;border-collapse:collapse}
table.list th{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.list td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.list tbody tr[onclick]{cursor:pointer}
table.list tbody tr[onclick]:hover{background:#f0f5fb}
table.list tbody tr:last-child td{border-bottom:none}
table.sortable thead th{cursor:pointer;user-select:none}
table.sortable thead th:hover{color:var(--blue)}
table.sortable thead th.s-a::after{content:" ▲";font-size:9px}
table.sortable thead th.s-d::after{content:" ▼";font-size:9px}
.empty{padding:34px;text-align:center;color:var(--muted)}
/* Directory rows: scannable summary that expands to edit (native <details>) */
details.morenotes>summary{cursor:pointer;list-style:none;user-select:none;font-size:12.5px;font-weight:600;color:var(--blue);padding:7px 0}
details.morenotes>summary::-webkit-details-marker{display:none}
details.morenotes>summary::before{content:"▸ ";font-size:10px}
details.morenotes[open]>summary::before{content:"▾ "}
.grouphdr{margin:18px 0 8px;font-weight:700;font-size:14px;color:var(--blue-dark);border-bottom:2px solid var(--line);padding-bottom:5px}
.grouphdr:first-child{margin-top:2px}
details.rowcard{border:1px solid var(--line);border-radius:8px;margin-bottom:6px;background:var(--card)}
details.rowcard>summary{cursor:pointer;list-style:none;padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;user-select:none}
details.rowcard>summary::-webkit-details-marker{display:none}
details.rowcard>summary::before{content:"▸";color:var(--muted);font-size:11px;flex-shrink:0}
details.rowcard[open]>summary::before{content:"▾"}
details.rowcard[open]>summary{border-bottom:1px solid var(--line)}
details.rowcard>summary:hover{background:var(--bg)}
details.rowcard>summary .nm{font-weight:650}
details.rowcard>summary .meta{color:var(--muted);font-size:13px}
details.rowcard>summary .tag{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
details.rowcard>summary.warn{background:#fdf0dc}
.editbody{padding:14px}
.editbody .rates{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.editbody .rates input{width:82px;padding:4px 8px}

.pill{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill.open{background:#e2f0d9;color:var(--green-dark)}
.pill.needs{background:#fdf0dc;color:#a86a10}
.pill.closed{background:#e6e9ed;color:#5a6472}
.pill.cancelled{background:#fbe3e3;color:var(--red)}
.pill.archived{background:#dfe3f0;color:#3d4a6b}
.folder-tabs{display:flex;gap:6px;flex-wrap:wrap}
.folder-tabs a{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13px;color:var(--ink)}
.folder-tabs a:hover{background:var(--bg);text-decoration:none}
.folder-tabs a.active{background:var(--blue);border-color:var(--blue);color:#fff}
.folder-tabs a .n{background:rgba(0,0,0,.08);border-radius:10px;padding:0 7px;font-size:11.5px}
.folder-tabs a.active .n{background:rgba(255,255,255,.25)}
.pill.draft{background:#e6e9ed;color:#5a6472}
.pill.sent{background:#ddeafc;color:var(--blue)}
.pill.paid{background:#e2f0d9;color:var(--green-dark)}

.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--bg);text-decoration:none}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-dark)}
.btn.green{background:var(--green);border-color:var(--green);color:#fff}
.btn.green:hover{background:var(--green-dark)}
.btn.danger{color:var(--red);border-color:#f3c6c6}
.btn.danger:hover{background:#fbe3e3}
.btn.sm{padding:5px 10px;font-size:12.5px}

select,input,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%}
select:focus,input:focus,textarea:focus{outline:2px solid var(--blue)}
input:disabled{background:var(--bg);color:var(--muted)}
textarea{resize:vertical;min-height:70px}
.inline{width:auto}
label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:.4px}
.fgrid{display:grid;gap:14px}
.fgrid.c2{grid-template-columns:1fr 1fr} .fgrid.c3{grid-template-columns:1fr 1fr 1fr} .fgrid.c4{grid-template-columns:1fr 1fr 1fr 1fr}
@media(max-width:900px){.fgrid.c3,.fgrid.c4{grid-template-columns:1fr 1fr}}
.fsec{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;background:var(--card)}
.fsec>.t{padding:10px 16px;background:#f8fafc;border-bottom:1px solid var(--line);font-weight:600;font-size:13.5px;color:var(--blue-dark);border-radius:var(--radius) var(--radius) 0 0}
.fsec>.c{padding:16px}
/* Collapsible form sections (native <details>) */
details.fsec>summary.t{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
details.fsec>summary.t::-webkit-details-marker{display:none}
details.fsec>summary.t::before{content:"▸";font-size:11px;color:var(--muted)}
details.fsec[open]>summary.t::before{content:"▾"}
details.fsec:not([open])>summary.t{border-bottom:none;border-radius:var(--radius)}
details.fsec>summary.t::after{content:"optional — tap to expand";margin-left:auto;font-size:11px;font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
details.fsec[open]>summary.t::after{content:""}

.bar{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px}
.bar .t{width:170px;color:var(--muted);text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{flex:1;background:var(--bg);border-radius:6px;height:20px;overflow:hidden}
.bar .fill{height:100%;background:var(--blue);border-radius:6px;min-width:2px}
.bar.g .fill{background:var(--green)}
.bar .n{width:34px;font-weight:600}

.note{border-left:3px solid var(--green);background:#f6faf2;padding:10px 14px;border-radius:0 8px 8px 0;margin-bottom:10px}
.note .meta{font-size:11.5px;color:var(--muted);margin-top:4px}
.att{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;flex-wrap:wrap}
.att .nm{font-weight:600} .att .sz{color:var(--muted);font-size:12px}
.att .rm{margin-left:auto}
.thumbs{display:flex;flex-wrap:wrap;gap:10px}
.thumb{position:relative;width:112px}
.thumb img{width:112px;height:112px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block;background:var(--bg)}
.thumb .rm{position:absolute;top:4px;right:4px}
.thumb .rm .btn{padding:2px 7px;background:rgba(255,255,255,.9)}
.thumb .cap{font-size:10.5px;color:var(--muted);margin-top:3px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.dl{display:grid;grid-template-columns:150px 1fr;gap:5px 14px;font-size:13.5px}
.dl dt{color:var(--muted)} .dl dd{font-weight:500;word-break:break-word}

/* Claim-detail tabs (pure CSS, radio-driven) */
.ctabs>input.ctab{position:absolute;opacity:0;pointer-events:none}
.ctabbar{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:20px;flex-wrap:wrap;overflow-x:auto}
.ctabbar label{padding:10px 16px;cursor:pointer;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.ctabbar label:hover{color:var(--blue)}
.ctabpane{display:none}
#ct-ov:checked~.ctabbar label[for=ct-ov],#ct-fm:checked~.ctabbar label[for=ct-fm],#ct-hi:checked~.ctabbar label[for=ct-hi]{color:var(--blue-dark);border-bottom-color:var(--blue)}
#ct-ov:checked~#pane-ov,#ct-fm:checked~#pane-fm,#ct-hi:checked~#pane-hi{display:block}
@media print{.ctabpane{display:block!important}.ctabbar{display:none}}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted)} .right{text-align:right} .nowrap{white-space:nowrap}
.backlink{font-size:13px;display:inline-block;margin-bottom:14px}
h2.pgtitle{font-size:19px;margin-bottom:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.login-body{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--blue-dark),var(--blue))}
.login-box{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:34px;width:360px}
.login-brand{text-align:center;margin-bottom:22px}
.login-brand b{display:block;font-size:20px;color:var(--blue-dark);letter-spacing:.5px}
.login-brand span{font-size:11px;color:var(--green-dark);letter-spacing:3px}

/* Mobile-nav controls are hidden on desktop; the media query below reveals them. */
.nav-cb,.hamburger,.nav-overlay{display:none}

@media(max-width:760px){
  /* Sidebar becomes a slide-in drawer toggled by the ☰ button (pure CSS checkbox). */
  #sidebar{position:fixed;top:0;left:0;height:100vh;width:250px;z-index:40;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:2px 0 14px rgba(0,0,0,.25)}
  .nav-cb:checked ~ #sidebar{transform:translateX(0)}
  .nav-cb:checked ~ .nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
    cursor:pointer;color:var(--blue-dark);padding:2px 6px;margin-right:2px;flex-shrink:0}
  #main{width:100%;min-width:0}
  #topbar{padding:10px 14px;gap:10px}
  #topbar h1{font-size:16px}
  #topbar .date{display:none}
  #content{padding:14px}

  /* Everything reflows to a single column on a phone. */
  .grid2{grid-template-columns:1fr}
  .fgrid.c2,.fgrid.c3,.fgrid.c4{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr;gap:2px 0}
  .dl dt{margin-top:8px}
  .cards{grid-template-columns:1fr 1fr}
  .kpi .num{font-size:22px}

  /* Wide tables scroll sideways inside their panel instead of stretching the page. */
  .panel>.bd,.panel{overflow-x:auto}
  table.list th,table.list td{padding:8px 10px}
  .bar .t{width:110px}
}

@media(max-width:420px){
  .cards{grid-template-columns:1fr}
}

/* Login and other logged-out pages fit small screens. */
.login-box{max-width:calc(100vw - 24px)}

@media print{
  #sidebar,#topbar,.btn,.noprint,form,.hamburger,.nav-overlay{display:none!important}
  body{background:#fff} #content{padding:0;max-width:none} .panel{box-shadow:none;border:1px solid #ccc}
}