:root{
  --navy:#263A5A; --aqua:#00A4CF; --light:#C6EDFE; --callout:#EAF7FD;
  --grey:#777777; --border:#C9CED6; --ink:#0B0B0B; --ink2:#52514E;
  --good:#0CA30C; --warning:#FAB219; --serious:#EC835A; --critical:#D03B3B;
  --bg:#F4F6F8;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}

.top{display:flex;justify-content:space-between;align-items:center;
     background:var(--navy);color:#fff;padding:12px 20px}
.brand{display:flex;align-items:center;gap:14px}
img.mark{height:36px;width:auto;display:block;object-fit:contain}
.ttl{font-size:14px;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.wh{font-size:11px;opacity:.75;text-align:right}

/* --- top toolbar: period + the two actions ---------------------------- */
.toolbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;
         background:#fff;border-bottom:1px solid var(--border);padding:11px 18px;
         flex-wrap:wrap}
.tb-group{display:flex;align-items:center;gap:10px}
.tb-lab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
        color:var(--grey);font-weight:700}
.toolbar .seg{width:180px;flex:0 0 auto}
.toolbar #month{width:200px}
.tb-sel{flex:1;min-width:0;font-size:12px;color:var(--grey);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-sel b{color:var(--navy)}
.tb-actions{display:flex;gap:8px;margin-left:auto}
@media(max-width:820px){
  .toolbar{gap:10px}
  .tb-sel{flex-basis:100%;order:3}
  .tb-actions{margin-left:0}
}

.shell{display:flex;align-items:flex-start;gap:18px;padding:18px;max-width:1500px;margin:0 auto}
.side{width:262px;flex:0 0 262px;background:#fff;border:1px solid var(--border);
      border-radius:8px;padding:14px;position:sticky;top:76px;
      max-height:calc(100vh - 94px);display:flex;flex-direction:column}
/* the site list gets its own scrollbar so the period controls and the two
   buttons stay put no matter how many sites are registered */
/* the sidebar is now sites only, so the list gets the full column height */
.sitescroll{overflow-y:auto;flex:1 1 auto;min-height:140px;
            padding-right:4px;margin-right:-4px}
.sitescroll::-webkit-scrollbar{width:9px}
.sitescroll::-webkit-scrollbar-thumb{background:#C9CED6;border-radius:5px}
.sitescroll::-webkit-scrollbar-thumb:hover{background:#9aa4b2}
.grp{margin-bottom:4px}
.grp-h{display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 4px;
       border-radius:6px;user-select:none}
.grp-h:hover{background:#F1F5F9}
.grp-h .caret{font-size:10px;color:var(--grey);width:10px;transition:transform .12s}
.grp.closed .caret{transform:rotate(-90deg)}
.grp.closed .grp-body{display:none}
.grp-h .nm{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
           color:var(--grey);font-weight:700;flex:1}
.grp-h .ct{font-size:10px;color:var(--grey);background:#EEF3F8;border-radius:9px;
           padding:1px 7px;font-weight:700}
.seg{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.segbtn{flex:1;padding:7px 0;border:0;background:#fff;cursor:pointer;
        font-weight:700;font-size:12px;color:var(--ink2)}
.segbtn.on{background:var(--navy);color:#fff}
.batchlog{font-size:12px;max-height:210px;overflow-y:auto;background:#fff;
          border-bottom:1px solid var(--border);padding:0 18px}
.batchlog:empty{display:none}
.batchlog div{padding:5px 0;border-bottom:1px solid #EEF1F4}
.batchlog div:last-child{border-bottom:0}
.batchlog .f{color:var(--critical)}
.side-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
        color:var(--grey);font-weight:700;margin-bottom:8px;
        display:flex;align-items:center;justify-content:space-between}
.site{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-radius:6px;
      cursor:pointer;border:1px solid transparent;margin-bottom:2px}
.site .tick{margin-top:2px;width:auto;flex:0 0 auto;cursor:pointer}
.site .txt{flex:1;min-width:0}
.site:hover{background:var(--callout)}
.site.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.site .n{font-weight:700;font-size:13px}
.site .c{font-size:11px;opacity:.75}
.site .dot{font-size:10px;flex:0 0 auto;margin-top:2px}
select,input,textarea{width:100%;padding:8px 10px;border:1px solid var(--border);
       border-radius:6px;background:#fff}
textarea{resize:vertical;line-height:1.5}
.sidenote{font-size:11px;color:var(--grey);margin-top:12px;line-height:1.45}

.btn{padding:9px 16px;border:1px solid var(--border);background:#fff;border-radius:6px;
     cursor:pointer;font-weight:700;font-size:13px}
.btn:hover{border-color:var(--navy)}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.primary:hover{background:#1E2E48}
.btn[disabled]{opacity:.5;cursor:progress}
.mini{font-size:11px;padding:3px 9px;border:1px solid var(--border);
      background:#fff;border-radius:5px;cursor:pointer;font-weight:700}

.main{flex:1;min-width:0}
.empty{background:#fff;border:1px solid var(--border);border-radius:8px;padding:40px;
       text-align:center;color:var(--grey)}
.empty h2{color:var(--navy);margin:0 0 8px}
.empty p{max-width:520px;margin:0 auto}

.tabs{display:flex;gap:6px;margin-bottom:14px}
.tab{padding:9px 18px;border:1px solid var(--border);background:#fff;border-radius:6px;
     cursor:pointer;font-weight:700;font-size:13px}
.tab.on{background:var(--navy);color:#fff;border-color:var(--navy)}

.card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:16px;
      margin-bottom:14px;overflow:hidden}
.card h3{margin:0 0 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
         color:var(--navy);border-bottom:2px solid var(--aqua);padding-bottom:7px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:1050px){.grid2{grid-template-columns:1fr}}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
       margin-bottom:14px}
.tile{background:#fff;border:1px solid var(--border);border-radius:8px;padding:13px 15px}
.tile.navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.tile.aqua{background:var(--aqua);color:#fff;border-color:var(--aqua)}
.tile .l{font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;opacity:.85}
.tile .v{font-size:23px;font-weight:700;margin:4px 0 3px;letter-spacing:-.02em;white-space:nowrap}
.tile .s{font-size:11px;opacity:.88;line-height:1.35}

table{width:100%;border-collapse:collapse;font-size:12px}
th{background:var(--navy);color:#fff;text-align:left;padding:6px 9px;font-size:10px;
   letter-spacing:.05em;text-transform:uppercase}
td{border:1px solid var(--border);padding:6px 9px;vertical-align:top}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;border-radius:9px;padding:1px 8px;font-size:10px;font-weight:800}
.pill.good{background:#DBEEE2;color:#1F6B41}
.pill.warning{background:#F6E4C4;color:#8A5A12}
.pill.serious{background:#FAE0DC;color:#A8452B}
.pill.critical{background:#F7D6D2;color:#800707}

.hint{font-size:12px;color:var(--grey);margin:0 0 12px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.row label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
           color:var(--grey);font-weight:700}
.row label input{margin-top:4px}
.item{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
.item textarea{flex:1}
.del{border:1px solid var(--border);background:#fff;border-radius:5px;cursor:pointer;
     padding:6px 10px;color:var(--critical);font-weight:700}
.condrow{margin-bottom:10px}
.condrow .k{font-size:11px;font-weight:700;color:var(--navy);text-transform:uppercase;
            letter-spacing:.06em;margin-bottom:3px}
.actions{display:flex;gap:10px;align-items:center;margin:6px 0 0}
.chk{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
     color:var(--navy);margin-right:auto}
.chk input{width:auto}
.genout{margin-top:12px;font-size:13px}
.ok{background:#DBEEE2;color:#1F6B41;padding:10px 14px;border-radius:6px}
.bad{background:#F7D6D2;color:#800707;padding:10px 14px;border-radius:6px;
     white-space:pre-wrap;font-size:12px}
.warnbar{background:#FDF3E2;border:1px solid #E7C98F;color:#7A5512;padding:10px 14px;
         border-radius:6px;font-size:12px;margin-bottom:14px}
.rolerow{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:center;
         margin-bottom:7px}
.rolerow .rl{font-size:11px;font-weight:700;color:var(--navy);text-transform:uppercase;
             letter-spacing:.05em}
/* --- clickable instrument rows + drill-down panel --------------------- */
tr.irow{cursor:pointer}
tr.irow:hover td{background:var(--callout)}
.ilink{color:var(--navy);font-weight:700;border-bottom:1px dotted var(--aqua)}
tr.irow:hover .ilink{border-bottom-style:solid}
#inst-card h3{display:flex;align-items:center;justify-content:space-between;gap:10px}
h4.isub{margin:16px 0 8px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
        color:var(--navy);font-weight:700;border-bottom:1px solid var(--border);
        padding-bottom:5px}
#inst-body .tiles{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#inst-body .tile .v{font-size:18px}
.chartbox{border:1px solid var(--border);border-radius:8px;padding:8px;margin-top:4px}

/* --- save-as dialog ---------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(11,11,11,.42);
       display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:10px;padding:22px 24px;width:640px;
           max-width:100%;box-shadow:0 18px 48px rgba(11,11,11,.28)}
.modal-box h3{margin:0 0 8px;font-size:13px;letter-spacing:.1em;
              text-transform:uppercase;color:var(--navy);
              border-bottom:2px solid var(--aqua);padding-bottom:8px}
.sa-lab{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
        color:var(--grey);font-weight:700;margin:14px 0 5px}
.sa-row{display:flex;gap:8px}
.sa-row input{flex:1;font-family:Consolas,Menlo,monospace;font-size:12px}
.sa-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
#sa-msg:empty{display:none}
#sa-msg.err{color:var(--critical);font-weight:700}

/* --- sign-in gate ------------------------------------------------------ */
.gate{position:fixed;inset:0;z-index:80;background:var(--navy);
      display:flex;align-items:center;justify-content:center;padding:20px}
.gate[hidden]{display:none}
.gate-box{background:#fff;border-radius:12px;padding:30px 32px;width:400px;max-width:100%;
          box-shadow:0 20px 60px rgba(0,0,0,.35)}
.gate-box img{height:52px;display:block;margin-bottom:14px}
.gate-box h1{margin:0 0 4px;font-size:16px;color:var(--navy);letter-spacing:.02em}
.gate-box .btn{width:100%;margin-top:16px;padding:11px}
.gate-box input{margin-bottom:4px}
#li-msg.err{color:var(--critical);font-weight:700;margin-top:8px}
.who{display:flex;align-items:center;gap:10px;font-size:11px;opacity:.85}
.who .mini{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.who .mini:hover{border-color:#fff}

svg{max-width:100%}