/* ===== Theme ===== */
:root{
  --bg:#0c1219; --panel:#0f1620; --surface:#111b27; --text:#e6edf5; --muted:#9db0c5;
  --btn:#2f6bff; --btn-hover:#295bdd; --ok:#0faa70; --warn:#c0a75a; --danger:#d24b4b; --info:#4a8ad6;
  --chip:#142033; --chip-border:#21324a; --input-bg:#101a26; --input-bd:#22344b; --input-halo:#3b74c6;
  --line:#162233; --shadow:0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial}
.test-banner{position:fixed;top:0;left:0;right:0;z-index:10050;display:none;align-items:center;justify-content:center;gap:14px;background:#8a1f2d;color:#fff;text-align:center;font:800 13px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.12em;padding:12px 16px;box-shadow:0 10px 24px #0004}
body.test-banner-active{padding-top:48px}
body.test-banner-active .test-banner{display:flex}
.read-only-banner{position:fixed;top:0;left:0;right:0;z-index:10040;background:#a84431;color:#fff;text-align:center;font:800 13px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.12em;padding:12px 16px;box-shadow:0 10px 24px #0004}
body.read-only-banner-active{padding-top:48px}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  width:100%;
  background:linear-gradient(#0f1620,#0c1219);
  border-bottom:1px solid var(--line);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.site-header h1{margin:0;text-align:left;font-size:20px;font-weight:700;color:#d9e9ff}
.header-top{display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.site-header h1{margin:0 auto}
.app-title-inline{display:inline-flex;align-items:center;justify-content:center;gap:12px}
.app-title-icon{display:block;width:auto;height:1.25em;object-fit:contain;border-radius:8px;flex:0 0 auto}
.header-actions{display:flex;align-items:center;gap:10px}
.header-actions{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.header-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.hb-left{display:flex;gap:8px;align-items:center;justify-content:flex-start}
.hb-center{display:flex;justify-content:center}
.hb-right{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.user-badge{display:flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid #1f2c3e;border-radius:999px;background:rgba(15,23,34,.96);box-shadow:var(--shadow);cursor:pointer}
.user-avatar{width:36px;height:36px;border-radius:50%;border:1px solid #1f2c3e;background:linear-gradient(135deg,#1a2635,#0e1622);background-size:cover;background-position:center;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.user-avatar.avatar-initial{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--text);background:#1b2433}
.user-name{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;font-size:14px;color:#d9e9ff}
.user-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-role-chip{display:inline-flex;align-items:center;justify-content:center;min-height:20px;padding:2px 8px;border-radius:999px;background:#16304d;color:#8ec3ff;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;flex:0 0 auto}
.user-menu{position:fixed;left:16px;top:92px;z-index:1001;min-width:180px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px}
body.read-only-banner-active .user-menu{top:140px}
.user-menu button{width:100%;text-align:left;background:transparent;border:0;color:var(--text);padding:10px 12px;border-radius:8px;font:inherit;cursor:pointer}
.user-menu button:hover{background:#182232}
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tab{padding:6px 10px;border-radius:12px;background:var(--surface);border:1px solid #1e2a3b;color:#d0d9e3;cursor:pointer}
.tab.active{background:#183252;color:#e7f2ff;border-color:#22456e}
.search{flex:0 1 360px;min-width:240px;max-width:360px;padding:8px 10px;border-radius:10px;background:var(--input-bg);color:var(--text);border:1px solid var(--input-bd);outline:none}
.search:focus{border-color:var(--input-halo);box-shadow:0 0 0 3px rgba(59,116,198,.25)}
.pill{padding:8px 10px;border-radius:10px;background:var(--input-bg);color:var(--text);border:1px solid var(--input-bd)}
.pill.hidden{display:none}
.btn{background:#1e2b3e;color:var(--text);border:1px solid #2a3c57;border-radius:10px;padding:8px 12px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent}
.btn-primary{background:var(--btn);border-color:transparent}
.btn-primary:hover{background:var(--btn-hover)}
.btn-success{background:var(--ok);border-color:transparent}
.btn-warn{background:#b7822a;border-color:transparent}
.btn-danger{background:var(--danger);border-color:transparent}
.btn-xs{padding:4px 8px;font-size:12px;border-radius:8px}

/* ===== Top-level content & scroll host ===== */
.app-shell{
  width:100%;
  max-width:100%;
}
.page{
  padding:10px 12px;
  width:100%;
  max-width:100%;
}
.grid-host{height:calc(100vh - 120px); overflow:auto; border-radius:12px}

/* ===== Table ===== */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  table-layout:fixed
}
thead th{background:#0e1722;color:#c9d8ea;padding:10px;border-bottom:1px solid var(--line);font-weight:600;position:relative}
thead th,
tbody td{overflow-wrap:anywhere;word-break:break-word}
tbody td{padding:9px 10px;border-bottom:1px solid #132033;white-space:normal}
tbody tr:hover{background:#0f1824}
.hidden{display:none !important}

/* ===== Device columns: choose + resize (TTS #1725) ===== */
/* Action column hosts the Edit button (or bulk-select checkbox); it is not part of
   the resizable set, so pin a min-width that always fits the button rather than let
   the fixed table layout squeeze it once custom-field columns are added. */
thead th.col-action{width:80px;min-width:80px}
tbody td button[data-action="edit"]{white-space:nowrap;word-break:normal;overflow-wrap:normal}
thead th .col-label{display:block;pointer-events:none}
.col-resizer{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;user-select:none;touch-action:none;z-index:3}
.col-resizer::after{content:"";position:absolute;top:6px;bottom:6px;right:3px;width:2px;border-radius:2px;background:transparent}
thead th:hover .col-resizer::after{background:#2b4b74}
.col-resizer:hover::after{background:#3f7fd6}
body.col-resizing{cursor:col-resize;user-select:none}
.tab-licenses #btnColumns,
.tab-spend #btnColumns,
.tab-contracts #btnColumns,
.tab-replacements #btnColumns{display:none}
.col-menu{position:fixed;z-index:10090;min-width:200px;max-height:70vh;overflow:auto;background:var(--panel,#0f1722);border:1px solid var(--line,#233246);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:8px;color:#e8eef8}
.col-menu-title{font:700 11px Arial,Helvetica,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#9eb2ca;padding:4px 8px 8px}
.col-menu-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font:500 13px Arial,Helvetica,sans-serif;cursor:pointer}
.col-menu-item:hover{background:#16243a}
.col-menu-item input{width:15px;height:15px;cursor:pointer}
.col-menu-reset{margin:6px 4px 2px;display:block;width:calc(100% - 8px);border:1px solid #30445d;background:#162434;color:#e8eef8;border-radius:8px;padding:7px 10px;font:600 12px Arial,Helvetica,sans-serif;cursor:pointer}
.col-menu-reset:hover{background:#1c3047}

/* ===== Replacement calendar ===== */
.calendar-view{display:none;flex-direction:column;gap:12px;margin-top:12px}
.tab-replacements #grid{display:none}
.tab-replacements #calendarView{display:flex}
.tab-replacements .app-shell,
.tab-replacements .page{
  width:100%;
  max-width:100%;
}
.tab-replacements .page{
  overflow-x:hidden;
}
.cal-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cal-pill{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:var(--shadow)}
.cal-pill.is-clickable{cursor:pointer}
.cal-pill.is-clickable:hover{border-color:#2b4b74}
.cal-pill.muted{opacity:.9}
.cal-pill-label{color:#9db0c5;font-weight:600;font-size:12px;letter-spacing:.02em;text-transform:uppercase}
.cal-pill-value{font-size:22px;font-weight:800;margin-top:2px;color:#e6edf5}
.cal-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.cal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:6px;max-width:100%}
.cal-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-width:0}
.cal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cal-month{font-size:16px;font-weight:800;color:#d9e9ff}
.cal-count{font-weight:700;color:#cfe3ff}
.cal-types{color:#9db0c5;font-size:12px}
.cal-list{display:flex;flex-direction:column;gap:8px}
.cal-row{padding:8px;border:1px solid #1c2939;border-radius:10px;background:#0f1824;display:flex;flex-direction:column;gap:4px}
.cal-row-title{font-weight:700;color:#e6edf5;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-row-meta{color:#9db0c5;font-size:12px;display:flex;flex-wrap:wrap;gap:8px;word-break:break-word}
.cal-row .badge{font-size:11px;padding:2px 7px}
.cal-empty{padding:14px;border:1px dashed #223143;border-radius:12px;text-align:center;color:#9db0c5;margin-top:6px}

/* Badges & chips */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid #29425f;background:#15263a;color:#cfe3ff;font-weight:600;font-size:12px}
.badge.ok{background:#113322;border-color:#215f44;color:#93f0c2}
.badge.warn{background:#2c250f;border-color:#4a3f1a;color:#ffe182}
.badge.info{background:#142944;border-color:#244b7b;color:#a8d0ff}
.badge.muted{background:#161e28;border-color:#2a3b50;color:#a5b7ca}
.chip{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:12px;background:var(--chip);border:1px solid var(--chip-border);color:#c7d8eb;font-size:12px}
.chip.ok{color:#a7e8c1;border-color:#284236;background:#13241a}
.chip.due{color:#ffe49a;border-color:#3b3218;background:#221a0d}
.chip.bad{color:#ffb8b8;border-color:#5a2a2a;background:#2a1616}

/* ===== Modal (asset edit) ===== */
#modal.hidden{display:none}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:24px;z-index:30}
#modal .card{width:min(1060px,96vw);background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px;max-height:90vh;overflow:auto}

.nice-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:#cfe1f7}
.nice-form input,.nice-form select,.nice-form textarea{
  background:var(--input-bg);color:var(--text);border:1px solid var(--input-bd);border-radius:10px;padding:10px 12px;outline:none;transition:box-shadow .15s,border-color .15s
}
.nice-form input:focus,.nice-form select:focus,.nice-form textarea:focus{border-color:var(--input-halo);box-shadow:0 0 0 3px rgba(59,116,198,.25)}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2 .span2{grid-column:1 / span 2}
.row{display:flex;align-items:center}
.row.gap{gap:10px}
.row.wrap{flex-wrap:wrap}
.row.space{justify-content:space-between}
.mt{margin-top:10px}

/* Toggle switch */
.switch-row{display:flex;align-items:center}
.switch{display:flex;align-items:center;gap:10px}
.switch input{height:0;width:0;visibility:hidden}
.switch label{position:relative;display:inline-block;width:48px;height:28px;background:#172435;border:1px solid #26364b;border-radius:999px;cursor:pointer}
.switch label:after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#cfd7e3;transition:all .18s ease}
.switch input:checked + label{background:#1e3a65;border-color:#2b5aa0}
.switch input:checked + label:after{left:22px;background:#8fc6ff}
.switch span{font-weight:600;color:#cfe1f7}

/* ===== History ===== */
.history{background:#0f1822;border:1px solid #243040;border-radius:12px;padding:6px 10px;margin-top:12px}
.history summary{cursor:pointer;color:#a9c7ff;font-weight:600}
.history[open]{box-shadow:inset 0 0 0 1px #36465f}
.txnrow{display:grid;grid-template-columns:200px 120px 120px 1fr;gap:10px;padding:6px 8px;background:#0e1621;border:1px solid #1a2737;border-radius:8px;margin-bottom:6px}
.tts-row{display:grid;grid-template-columns:90px 1fr 120px 140px;gap:10px;padding:6px 8px;background:#0e1621;border:1px solid #1a2737;border-radius:8px;margin-bottom:6px}
.tts-row .badges{display:flex;gap:6px;flex-wrap:wrap}
.badge.status{background:#1f2a3a;color:#e6edf5;border:1px solid #2a3b50;padding:1px 8px;border-radius:999px;display:inline-flex;align-items:center;line-height:1;height:18px}
.badge.priority{background:#312141;color:#e5d8ff;border:1px solid #493c5d;padding:1px 8px;border-radius:999px;display:inline-flex;align-items:center;line-height:1;height:18px}
.tts-detail{margin-top:8px;padding:10px;border:1px solid #1a2737;border-radius:10px;background:#0e1621;display:none;max-height:320px;overflow:auto}
.tts-detail .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px}
.tts-detail .head .meta{color:#9db0c5;font-size:12px}
.tts-detail .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.tts-detail .comments{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.tts-detail .comment{border:1px solid #1a2737;border-radius:8px;padding:8px;background:#0d1520}
.tts-detail .comment .author{font-weight:700;font-size:13px}
.tts-detail .comment .ts{color:#9db0c5;font-size:12px}

.pill#countLabel{background:#142033;border:1px solid #21324a;color:#cfe3ff}
.history summary.toggler{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;}
.history summary.toggler::before{content:"▸";display:inline-block;color:#a9c7ff;transition:transform .15s ease}
details[open] summary.toggler::before{transform:rotate(90deg)}

/* Per-asset licenses (device edit modal) */
.asset-lic-list{display:flex;flex-direction:column;gap:10px}
.asset-lic-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  padding:10px 12px;
  border:1px solid #2a3c55;
  border-left:4px solid #3a6ea8;
  border-radius:10px;
  background:#0f1a27;
}
.asset-lic-meta{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.asset-lic-actions{display:flex;align-items:flex-start;justify-content:flex-end}

/* ===== Licenses Tab ===== */
.lic-wrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}
.lic-toolbar{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 10px 0;
}
.lic-quick-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  flex:1;
}
.lic-bulk-btn{margin-left:auto;white-space:nowrap}
.lic-quick-link{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #244b7b;
  background:#142944;
  color:#a8d0ff;
  text-decoration:none;
  font-weight:600;
}
.lic-quick-link:hover{
  background:#1a3554;
  border-color:#2d5d96;
}
.lic-group{border:1px solid #223; border-radius:12px; background:#0f181f; margin:12px 0}
.lic-group[open]{box-shadow:inset 0 0 0 1px #1f2c3e}
.lic-group-head{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;cursor:pointer}
.lic-group-badges{display:flex;align-items:center;gap:8px;margin-left:auto}
.lic-group-head::-webkit-details-marker{display:none}
.lic-title{font-weight:700;color:#cfe1f7}
.lic-group-body{display:flex;flex-direction:column;gap:10px;padding:10px}

/* Fix: prevent pills from stretching tall */
.lic-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "meta actions"
    "assigned actions";
  column-gap:10px;
  row-gap:6px;
  padding:10px;
  border:1px solid #213248;
  background:#0f1a27;
  border-radius:10px;
  align-items:flex-start;
}
.lic-meta{
  grid-area:meta;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-start;
  min-width:0;
}
.lic-meta .badge{align-self:flex-start}
.lic-assigned{
  grid-area:assigned;
  opacity:.95;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.lic-assigned-line{padding:2px 0}
.lic-actions{
  grid-area:actions;
  display:flex;
  gap:8px;
  align-items:flex-start;
  justify-content:flex-end;
  white-space:nowrap;
}
.tab-licenses thead,
.tab-people thead,
.tab-spend thead{display:none}

/* ===== People (read-only) ===== */
/* .tab-people thead{display:none} above hides the GRID's header, but it is a
   descendant selector, so it also hid this table's own header nested inside the
   grid cell. Put it back explicitly. */
.tab-people .people-table thead{display:table-header-group}
.people-wrap{padding:4px 2px 14px}
.people-note{margin:0 0 12px;padding:10px 12px;border:1px solid #33455c;border-left:3px solid #6c8fb5;
  border-radius:8px;background:#121c28;color:#a8bad0;font:500 12px/1.5 Arial,Helvetica,sans-serif}
.people-table{width:100%;border-collapse:collapse;font:500 13px Arial,Helvetica,sans-serif}
.people-table th{text-align:left;padding:8px 10px;border-bottom:1px solid #233246;color:#9eb2ca;
  font:700 11px Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.people-table td{padding:9px 10px;border-bottom:1px solid #1b2837;vertical-align:top}
.people-table .num{text-align:right;white-space:nowrap}
.people-row{cursor:pointer}
.people-row:hover{background:#142131}
.people-row.is-unmatched .p-name{color:#ffbf8e}
.p-name{font-weight:700;color:#e8eef8}
.p-sub{font-size:11px}
.people-sep td{padding:14px 10px 6px;color:#9eb2ca;font:700 11px Arial,Helvetica,sans-serif;
  text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #233246}
.people-detail{display:none}
.people-detail.open{display:table-row}
.p-detail{display:flex;gap:28px;flex-wrap:wrap;padding:4px 0 10px}
.p-detail ul{margin:4px 0 0;padding-left:18px}
.p-detail li{margin:2px 0;color:#d8e4f5}
.p-h{color:#9eb2ca;font:700 11px Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.05em}
@media (max-width:760px){ .p-detail{flex-direction:column;gap:10px} }
.people-sep.is-collapsible{cursor:pointer;user-select:none}
.people-sep.is-collapsible:hover td{color:#d8e4f5}
.p-toggle{display:inline-block;width:12px;color:#7f97b3}
.people-row.is-placement .p-name{font-weight:500;color:#a8bad0}
.hidden-row{display:none}
.people-foot{margin-top:12px;padding-top:10px;border-top:1px solid #1b2837;font-size:12px}

/* ===== Allocation ===== */
/* THE reason the sticky header never engaged, across four attempts. The base
   `table` rule carries overflow:hidden (it clips the rounded corners), and this
   matrix lives inside a <td> of #grid -- that outer table. ANY ancestor with
   overflow:hidden between a sticky element and the scrollport becomes its scroll
   context; #grid never scrolls, so the header simply never stuck. Released on this
   tab only, where the grid renders one full-width cell and corner clipping is
   irrelevant. */
.tab-allocation #grid{overflow:visible}
.tab-allocation thead{display:none}
.tab-allocation .people-table thead,
.tab-allocation .alloc-matrix thead{display:table-header-group}
.alloc-wrap{padding:4px 2px 18px}
.alloc-h{color:#9eb2ca;font:700 11px Arial,Helvetica,sans-serif;text-transform:uppercase;
  letter-spacing:.05em;margin:0 0 8px}
.alloc-h .muted{text-transform:none;letter-spacing:0;font-weight:500}

/* Department totals -- full width, with a magnitude bar so the shape reads
   without parsing every number. */
.alloc-totals{margin:22px 0 0}
.alloc-totals table{width:100%}
.alloc-totals tr.is-unattributed td{color:#8fa3ba;font-style:italic}
.alloc-totals .barcol{width:42%;padding-right:2px}
.alloc-totals .bar{display:block;height:9px;border-radius:0 3px 3px 0}

/* The matrix. */
.alloc-matrix-box{margin-top:6px}
/* Scrolls in BOTH directions with a height cap, so the department header can
   freeze to the top of the grid and the licence names to the left. Without the
   cap the page is the scroller and a sticky header just scrolls away with it. */
/* NO scroll container by default. An overflow container scrolls in both axes, so
   the header froze to the container instead of the page -- and the moment the page
   itself scrolled, the whole grid including its frozen header went with it. With
   the grid sized to fit, the page is the only scroller and sticky works against it.
   Narrow screens fall back to horizontal scroll and lose the freeze, which is the
   right trade at that size. */
/* THE container is the scroller, deliberately. Sticky binds to its NEAREST
   scrolling ancestor, so making this box that ancestor makes the frozen header
   independent of everything above it -- #grid's overflow:hidden, .site-header's
   own sticky position, and the page scroll all stop mattering. Offsetting against
   a measured header height was chasing a moving target; this does not move. */
.alloc-scroll{overflow:auto;max-height:calc(100vh - 235px);border:1px solid #223247;
  border-radius:10px;background:#101a26}
@media (max-width:1180px){ .alloc-matrix{width:auto;min-width:1100px} }
/* width:auto matters -- the app's base stylesheet sets table{width:100%}, which
   dumped every spare pixel into the sticky name column and pushed the grid off to
   the right of a huge empty gap. */
/* width:100% + fixed layout: the columns divide whatever width the window gives,
   so the grid fills a wide screen instead of sitting at one baked-in size. */
/* overflow:visible is load-bearing. The base `table` rule sets overflow:hidden to
   clip rounded corners, and it applies to THIS table too -- which is the sticky
   header's own containing block, so the table captured the sticky and, never
   scrolling, pinned it in place. Confirmed in a browser, not guessed: the header
   computed position:sticky/top:0 correctly the whole time while its capturing
   ancestor was this element. */
.alloc-matrix{border-collapse:separate;border-spacing:2px;width:100%;table-layout:fixed;
  overflow:visible;font:500 12px Arial,Helvetica,sans-serif}
/* Freeze panes. Layering matters: the corner has to sit above both the header
   row and the name column, or it is painted over by whichever passes under it. */
.alloc-matrix th.lic{text-align:left;padding:4px 9px;width:212px;
  position:sticky;left:0;background:#101a26;z-index:2}
/* .site-header is ITSELF position:sticky/top:0/z-index:10, so a header pinned at
   top:0 slides under it and is never seen. --alloc-top is measured off the real
   header at render time rather than hardcoded, because its height changes when the
   Test or read-only banner shows. z-index stays under 10 so it passes beneath the
   app header rather than over it. */
.alloc-matrix thead th{position:sticky;top:0;background:#101a26;z-index:3}
.alloc-matrix thead th.lic{left:0;top:0;z-index:4}
/* The header row needs an opaque floor, or cells scrolling under the rotated
   labels show through the gaps between them. */
/* A definite edge, so a row sliding under the frozen header reads as intended
   rather than as a rendering fault. */
.alloc-matrix thead th{box-shadow:0 2px 0 #2b3d55}
.alloc-matrix thead th.rot{background:#101a26}
.alloc-matrix .ln{display:block;color:#e8eef8;font-weight:700;font-size:11.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alloc-matrix .lm{display:block;font-size:11px;white-space:nowrap}
/* Rotated department headers keep the grid narrow enough to scan. */
.alloc-matrix th.rot{height:104px;width:auto;padding:0;vertical-align:bottom}
.alloc-matrix th.rot span{display:block;transform:rotate(180deg);writing-mode:vertical-rl;
  color:#9eb2ca;font:600 11px Arial,Helvetica,sans-serif;white-space:nowrap;padding:0 0 6px 0}
.alloc-matrix td.cell{height:38px;text-align:center;border-radius:3px;
  padding:2px 3px;cursor:help;line-height:1.14}
.alloc-matrix td.cell .cp{display:block;font:700 12px Arial,Helvetica,sans-serif}
.alloc-matrix td.cell .cc{display:block;font:600 9px Arial,Helvetica,sans-serif;opacity:.85;
  white-space:nowrap}
.alloc-matrix td.cell.empty{background:#141f2c}
.alloc-key{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11px}
.alloc-key .k{width:26px;height:10px;border-radius:2px;display:inline-block}

/* ===== License Editor Dialog ===== */
.dialog-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:1000;padding:20px}
.dialog{width:min(1100px,96vw);max-height:90vh;background:#0f1722;border:1px solid #223143;border-radius:12px;padding:0;color:var(--text);display:flex;flex-direction:column}
.dialog .dlg-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px;border-top:1px solid var(--line);background:#0e1621;border-radius:0 0 12px 12px}
.dialog .btn{min-width:72px}

.dialog-lic{width:min(1120px,96vw);max-height:min(88vh,980px);display:flex;flex-direction:column;overflow:hidden}
.dialog-lic .lic-edit{display:grid;grid-template-columns:minmax(340px,380px) minmax(0,1fr);gap:0;min-height:0;overflow:hidden}
.dialog-lic .lic-side{padding:16px;border-right:1px solid var(--line);min-width:0;overflow:auto}
.dialog-lic .lic-main{padding:16px;min-width:0;overflow:auto}
.contract-library-pane{background:#0d1620}
.contract-doc-library{display:flex;flex-direction:column;gap:10px}
.contract-doc-card{display:block;width:100%;text-align:left;padding:12px;border:1px solid #233246;border-radius:12px;background:#111c28;color:#e8eef8;cursor:pointer}
.contract-doc-card:hover{border-color:#31506f;background:#132132}
.contract-doc-card.is-selected{border-color:#5b8ecb;box-shadow:0 0 0 1px rgba(91,142,203,.35) inset;background:#162638}
.contract-doc-content{display:flex;flex-direction:column;gap:3px;min-width:0}
.contract-doc-name{font-weight:700;color:#e8eef8;word-break:break-word}
.contract-doc-kind{font-size:12px;color:#9eb2ca}
.contract-doc-details{display:flex;flex-direction:column;gap:2px;font-size:12px;color:#c9d8ea}
.lic-edit-title{margin:0 0 8px 0;font-size:18px;font-weight:700;color:#cfe1f7}
.dialog-lic .lbl{min-width:0}
.dialog-lic .lbl .row.wrap{align-items:flex-start}
.dialog-lic #licDocsList{max-height:220px;overflow:auto;padding-right:4px}
.dialog-lic #licDocsList .card{width:100%;min-width:0}
.dialog-lic .dlg-actions{flex:0 0 auto;border-top:1px solid var(--line);padding:12px 16px;background:var(--surface);position:sticky;bottom:0}
.lbl{display:flex;flex-direction:column;gap:6px;margin:8px 0;font-weight:600;color:#cfe1f7}
.input{background:var(--input-bg);color:var(--text);border:1px solid var(--input-bd);border-radius:10px;padding:10px 12px;outline:none}
.input:focus{border-color:var(--input-halo);box-shadow:0 0 0 3px rgba(59,116,198,.25)}

.lic-seats-head{font-weight:700;margin-bottom:8px;color:#cfe1f7}
.lic-seats-table{border:1px solid #213248;background:#0f1a27;border-radius:10px;max-height:60vh;overflow:auto}
.lic-seats-empty{padding:14px;color:#94a9c2}
.lic-seat-row{display:grid;grid-template-columns:88px 1fr 220px 1fr 160px;gap:8px;padding:8px 10px;border-bottom:1px solid #1e2a3b}
.lic-seat-head{background:#0e1826;position:sticky;top:0}
.lic-seat-row .c{display:flex;align-items:center}
.lic-seat-row .note .input{width:100%}
.lic-seat-row .act{justify-content:flex-end;gap:6px}
.btn-xs{padding:4px 8px;font-size:12px;border-radius:8px}

/* ===== Dialog (OK/Cancel) used elsewhere ===== */
#dlg{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:1000}
#dlg .dialog{padding:16px}
#dlgTitle{font-size:18px;font-weight:700;margin:0 0 4px 0}
#dlgMsg{opacity:.9}
#dlgInput{width:100%;margin-top:8px;background:var(--input-bg);color:var(--text);border:1px solid var(--input-bd);border-radius:10px;padding:10px 12px;outline:none}
#dlgInput:focus{border-color:var(--input-halo);box-shadow:0 0 0 3px rgba(59,116,198,.25)}
#dlgSlot select.pill{width:100%}

/* Read-only badge + disabled controls */
.read-only-badge{margin-left:10px;font-size:.8rem;padding:2px 12px;border-radius:999px;background:#a84431;color:#fff;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
body.read-only button[disabled],
body.read-only .is-disabled,
body.read-only select[disabled],
body.read-only input[readonly]{cursor:not-allowed!important;opacity:.6}

/* Footer version */

/* Pretty scrollbars */
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:#0d1520;border-radius:10px}
*::-webkit-scrollbar-thumb{background:#1f2b3d;border:1px solid #2a3d55;border-radius:10px}
*::-webkit-scrollbar-thumb:hover{background:#2a3d55}
body.modal-open{overflow:hidden}

/* Responsive */
@media (max-width: 980px){
  html,body{height:auto}
  body{min-height:100vh}
  .site-header{position:static;padding:10px}
  .header-top,
  .header-bar,
  .hb-left,
  .hb-center,
  .hb-right{display:flex;position:static;transform:none;width:100%;justify-content:flex-start;flex-wrap:wrap}
  .header-actions{position:static;transform:none}
  .site-header h1{margin:0;width:100%;text-align:center}
  .search,
  .pill,
  .btn{width:100%;max-width:none}
  .page,
  .app-shell{width:100%;max-width:100%}
  .grid-host{height:auto;max-height:none;overflow:auto}
  table{display:block;overflow-x:auto}
  .txnrow,
  .tts-row,
  .lic-seat-row{grid-template-columns:1fr}
  .lic-toolbar,
  .lic-quick-links{flex-direction:column;align-items:stretch}
  .lic-bulk-btn{margin-left:0;width:100%}
  .dialog-overlay{padding:12px}
  .dialog-lic{width:min(96vw,760px);max-height:92vh}
  .dialog-lic .lic-edit{grid-template-columns:1fr;overflow:auto}
  .dialog-lic .lic-side{border-right:none;border-bottom:1px solid var(--line);overflow:visible}
  .dialog-lic .lic-main{overflow:visible}
  .lic-seat-row{grid-template-columns:72px 1fr 160px 1fr 120px}
  .lic-row{
    grid-template-columns:1fr;
    grid-template-areas:
      "meta"
      "assigned"
      "actions";
  }
  .lic-actions{justify-content:flex-start}
  .dialog{width:100%;max-height:none}
  #modal{align-items:flex-start;padding:14px;overflow:auto}
}

.user-labels{display:flex;flex-direction:column;min-width:0;line-height:1.1}.user-name{font-weight:600;font-size:14px;color:#d9e9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-email{font-size:11px;color:#9eb2ca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Estate signed-in user pill standard */
.user-badge{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(18,27,37,.96);
  box-shadow:0 22px 48px rgba(0,0,0,.35);
  color:var(--text);
}
.user-avatar{border-color:var(--line);box-shadow:none}
.user-avatar.avatar-initial{font-size:12px;font-weight:700;letter-spacing:.04em}
.user-name{font-weight:600;font-size:14px;line-height:1.2;color:var(--text)}
.user-email{margin-top:2px;font-size:12px;color:var(--muted)}
.user-menu{
  position:fixed;
  left:16px;
  top:92px;
  z-index:1001;
  min-width:180px;
  background:rgba(18,27,37,.98);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 22px 48px rgba(0,0,0,.35);
  padding:6px;
}
body.read-only-banner-active .user-menu{top:140px}
.user-menu button:hover{background:rgba(29,110,200,.14)}

/* ---- Type-specific custom fields + device type manager (TTS #1726) ---- */
.custom-fields-section{display:flex;flex-direction:column;gap:10px;margin-top:6px;padding-top:12px;border-top:1px dashed var(--line)}
.custom-fields-title{font-weight:700;color:#cfe1f7}
.custom-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.custom-fields-grid .cf-span2{grid-column:1 / span 2}
.custom-fields-grid label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:#cfe1f7}
.custom-fields-grid input,.custom-fields-grid select,.custom-fields-grid textarea{background:var(--input-bg);color:var(--text);border:1px solid var(--input-bd);border-radius:10px;padding:10px 12px;outline:none}
.custom-fields-grid .cf-check{flex-direction:row;align-items:center;gap:8px}
.custom-fields-grid .cf-check input{width:auto}
.cf-required-star{color:#ff9b9b}
.dt-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:10px}
.dt-card-head{display:flex;align-items:center;gap:8px}
.dt-card-head .input{flex:1}
.dt-section-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dt-builtins{display:flex;flex-wrap:wrap;gap:8px 16px}
.dt-builtins label{display:flex;align-items:center;gap:6px;font-weight:500;color:#cfe1f7;font-size:13px}
.dt-field-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-top:1px solid rgba(255,255,255,.05)}
.dt-field-row .dt-field-label{flex:1;min-width:140px}
.dt-field-row .dt-field-opts{flex:1 1 100%}
.dt-add-field{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-top:4px}
.dt-add-field .input,.dt-add-field select{min-width:120px}
.dt-empty{color:var(--muted);font-size:13px}

/* ===== Spend & Savings Tab ===== */
.spend-wrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:16px}
.spend-coverage-warn{padding:12px 14px;border:1px solid #6d5620;background:#1a1408;border-radius:12px}
.spend-coverage-title{font-weight:700;color:#f4dfae}
.spend-coverage-sub{margin-top:4px;color:#cbb488;font-size:13px;line-height:1.5}
.spend-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.spend-stat{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:14px}
.spend-stat.tone-primary{border-color:#245488;background:rgba(29,110,200,.10)}
.spend-stat.tone-good{border-color:#2c6440;background:rgba(47,125,68,.10)}
.spend-stat.tone-warn{border-color:#6d5620;background:rgba(140,102,26,.10)}
.spend-stat-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.spend-stat-value{margin-top:6px;font-size:26px;font-weight:800;color:#eef4fb;line-height:1.1}
.spend-stat-sub{margin-top:4px;font-size:12px;color:var(--muted)}
.spend-section{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);overflow:hidden}
.spend-section-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 14px;cursor:pointer;list-style:none;user-select:none}
.spend-section-head::-webkit-details-marker{display:none}
.spend-section-head::before{content:'▸';color:var(--muted);font-size:12px}
.spend-section[open] .spend-section-head::before{content:'▾'}
.spend-section-title{font-weight:700;color:#cfe1f7}
.spend-section-sub{color:var(--muted);font-size:12px}
.spend-table-wrap{overflow-x:auto;border-top:1px solid var(--line)}
.spend-table{width:100%;border-collapse:collapse;font-size:13px}
.spend-table th,.spend-table td{padding:9px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.05);white-space:nowrap}
.spend-table th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;background:rgba(255,255,255,.02)}
.spend-table th.num,.spend-table td.num{text-align:right}
.spend-table tbody tr:hover{background:rgba(29,110,200,.07)}
.spend-table td.empty-cell{color:var(--muted);text-align:center;padding:18px;white-space:normal}
.spend-table .delta-up{color:#ff9b9b;font-weight:700}
.spend-table .delta-down{color:#8fd8a6;font-weight:700}
.spend-footer{font-size:12px;padding-top:2px}
@media (max-width:760px){
  .spend-stat-value{font-size:21px}
  .spend-table th,.spend-table td{padding:8px 10px}
}
.spend-coverage-ok{padding:12px 14px;border:1px solid #2c6440;background:rgba(47,125,68,.10);border-radius:12px}
.spend-coverage-ok .spend-coverage-title{color:#8fd8a6}
.spend-coverage-ok .spend-coverage-sub{color:#9dc4ac}
/* clickable spend tiles + drill-down modal */
.spend-stat.is-clickable{cursor:pointer;transition:border-color .12s,transform .12s}
.spend-stat.is-clickable:hover{border-color:var(--accent);transform:translateY(-1px)}
.spend-stat.is-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.spend-stat-more{margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--accent);opacity:0;transition:opacity .12s}
.spend-stat.is-clickable:hover .spend-stat-more,
.spend-stat.is-clickable:focus-visible .spend-stat-more{opacity:1}
.spend-modal{max-height:60vh;overflow:auto;min-width:min(760px,80vw)}
.spend-modal-foot{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.5}