/* Trinity Staff Portal — self-contained styles (no dependency on the marketing
 * site's css/). Left rail + content, dense, dashboard-first.
 *
 * Theming: dark is the default on bare :root. Light re-declares ONLY the tokens
 * under :root[data-theme="light"]. Every component below paints with var()s, so
 * neither theme needs component-level overrides — except the two gradients at
 * the foot of this file, which cannot be expressed as a single token. */
:root{
  --bg:#0e1116; --panel:#171c24; --panel2:#1e2530; --line:#2a323f;
  --ink:#e8edf4; --mut:#95a1b3; --brand:#c8a24a; --brand2:#e0be6b;
  --ok:#3fb27f; --warn:#e0a83c; --bad:#e06060; --blue:#5a9bd8;
  --radius:12px; --shadow:0 6px 24px rgba(0,0,0,.35);
  --hero1:#241d0e; --hero2:#171c24; --heroline:#4a3c18;
  --herowarn1:#2a1414; --herowarn2:#171c24; --herowarnline:#5a2020;
  --loginbg1:#1b2330; --loginbg2:#0e1116;
  --sidew:224px; --sidew-min:64px;
}
:root[data-theme="light"]{
  --bg:#f4f6f9; --panel:#ffffff; --panel2:#eef1f6; --line:#dde3ec;
  --ink:#1b2430; --mut:#66748a; --brand:#a8842f; --brand2:#8c6d22;
  --ok:#1f8f5f; --warn:#a97112; --bad:#c23b3b; --blue:#2f6fae;
  --shadow:0 6px 20px rgba(19,28,44,.10);
  --hero1:#fdf6e4; --hero2:#ffffff; --heroline:#e5d4a4;
  --herowarn1:#fdeaea; --herowarn2:#ffffff; --herowarnline:#f0c2c2;
  --loginbg1:#e8edf5; --loginbg2:#f4f6f9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button{font:inherit;cursor:pointer}
a{color:var(--brand2)}

/* Login */
.login{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,var(--loginbg1),var(--loginbg2))}
.login__card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:32px;width:340px;max-width:92vw;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.login__logo{height:40px;object-fit:contain;margin:0 auto 4px}
:root[data-theme="light"] .login__logo,:root[data-theme="light"] .side__logo{filter:invert(1) brightness(.35)}
.login__title{margin:0;text-align:center;font-size:22px}
.login__hint{margin:0 0 6px;text-align:center;color:var(--mut)}
.login__input{padding:11px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
.login__btn{padding:11px;border:0;border-radius:8px;background:var(--brand);color:#fff;font-weight:700}
.login__btn:hover{background:var(--brand2)}
.login__error{margin:0;color:var(--bad);text-align:center;font-size:13px}

/* Shell: sticky left rail + scrolling content */
.shell{min-height:100vh;display:flex}
.side{width:var(--sidew);flex:0 0 var(--sidew);background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;transition:width .16s ease,flex-basis .16s ease}
.side__brand{display:flex;align-items:center;gap:10px;padding:16px 14px;border-bottom:1px solid var(--line);min-height:57px}
.side__logo{height:24px;flex:0 0 auto}
.side__brandtext{font-weight:700;letter-spacing:.3px;white-space:nowrap;overflow:hidden}
.side__nav{display:flex;flex-direction:column;gap:2px;padding:12px 8px;flex:1}
.navbtn{display:flex;align-items:center;gap:11px;background:transparent;border:1px solid transparent;color:var(--mut);padding:9px 11px;border-radius:9px;text-align:left;width:100%}
.navbtn svg{width:18px;height:18px;flex:0 0 18px;fill:currentColor}
.navbtn__label{white-space:nowrap;overflow:hidden}
.navbtn:hover{color:var(--ink);background:var(--panel2)}
.navbtn.active{background:var(--panel2);color:var(--ink);border-color:var(--line)}
.navbtn.active svg{color:var(--brand)}
.side__foot{padding:8px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.side__who{color:var(--mut);font-size:12px;padding:6px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side__btn{display:flex;align-items:center;gap:11px;background:transparent;border:1px solid transparent;color:var(--mut);padding:9px 11px;border-radius:9px;width:100%;text-align:left}
.side__btn svg{width:18px;height:18px;flex:0 0 18px;fill:currentColor}
.side__btn:hover{color:var(--ink);background:var(--panel2)}
.ico-sun{display:none}
:root[data-theme="light"] .ico-sun{display:block}
:root[data-theme="light"] .ico-moon{display:none}
.side__collapse svg{transition:transform .16s ease}

/* Collapsed rail: icons only. Labels collapse with width:0 + visibility rather
   than display:none so the flex row does not jump mid-transition. */
.shell.collapsed .side{width:var(--sidew-min);flex-basis:var(--sidew-min)}
.shell.collapsed .navbtn__label,.shell.collapsed .side__brandtext,.shell.collapsed .side__who{width:0;visibility:hidden}
.shell.collapsed .navbtn,.shell.collapsed .side__btn{justify-content:center;padding-left:0;padding-right:0}
.shell.collapsed .side__brand{justify-content:center;padding-left:0;padding-right:0}
.shell.collapsed .side__collapse svg{transform:rotate(180deg)}
@media(max-width:720px){
  .side{width:var(--sidew-min);flex-basis:var(--sidew-min)}
  .side .navbtn__label,.side .side__brandtext,.side .side__who{width:0;visibility:hidden}
  .side .navbtn,.side .side__btn,.side__brand{justify-content:center;padding-left:0;padding-right:0}
}
.app{padding:18px 22px;flex:1;min-width:0;max-width:1400px}

/* Generic */
.muted{color:var(--mut)}
.row-title{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--mut)}
.row-title::after{content:"";flex:1;height:1px;background:var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:840px){.grid3{grid-template-columns:1fr}}

/* Tiles */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:left;color:var(--ink);width:100%;transition:transform .06s,border-color .15s}
.tile:hover{border-color:var(--brand);transform:translateY(-1px)}
.tile__label{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.8px}
.tile__big{font-size:26px;font-weight:800;margin:6px 0 2px}
.tile__sub{color:var(--mut);font-size:13px}
.tile--hero{background:linear-gradient(135deg,#241d0e,#171c24);border-color:#4a3c18;padding:22px}
.tile--hero .tile__big{font-size:34px;color:var(--brand2)}
.tile--hero.warn{border-color:#5a2020;background:linear-gradient(135deg,#2a1414,#171c24)}
.chip{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;border:1px solid var(--line);color:var(--mut)}
.bar{display:flex;gap:2px;margin-top:10px;height:8px;border-radius:6px;overflow:hidden;background:var(--panel2)}
.bar span{display:block}
.blist{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.blist li{display:flex;justify-content:space-between;gap:10px}
.pill{font-size:11px;padding:1px 7px;border-radius:20px;background:var(--panel2);border:1px solid var(--line)}

/* Tables */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 12px}
.toolbar input,.toolbar select{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
.toolbar .grow{flex:1;min-width:160px}
.btn{padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
.btn--primary{background:var(--brand);color:#1a1400;border-color:var(--brand);font-weight:700}
.btn--primary:hover{background:var(--brand2)}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--panel2);color:var(--mut);position:sticky;top:0;cursor:pointer;user-select:none}
th.sorted::after{content:" ▾";color:var(--brand)}
th.asc.sorted::after{content:" ▴"}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--panel2)}
.tag{font-size:11px;padding:1px 8px;border-radius:20px;border:1px solid var(--line)}
.tag--avail{color:var(--ok);border-color:#245}
.tag--sold{color:var(--mut)}
.aged{color:var(--warn);font-weight:700}
.aged--bad{color:var(--bad)}

/* Board */
.board{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:10px;overflow-x:auto}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px;min-height:120px}
.col.drop{border-color:var(--brand);background:var(--panel2)}
.col__head{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;padding:4px 4px 8px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px;margin-bottom:8px;cursor:grab}
.card:hover{border-color:var(--brand)}
.card__name{font-weight:700}
.card__meta{color:var(--mut);font-size:12px;margin-top:3px}

/* Panel / modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:40;padding:20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);width:min(640px,96vw);max-height:90vh;overflow:auto}
.panel__head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.panel__head h3{margin:0}
.panel__body{padding:16px 18px}
.panel__x{background:transparent;border:0;color:var(--mut);font-size:20px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-size:12px;color:var(--mut)}
.field input,.field select,.field textarea{padding:9px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;margin:0 0 14px}
.kv dt{color:var(--mut)}
.kv dd{margin:0}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.log li{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px}
.log__meta{color:var(--mut);font-size:12px;margin-bottom:3px;display:flex;gap:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chart{width:100%;height:120px;background:var(--panel2);border:1px solid var(--line);border-radius:9px}
.empty{padding:40px;text-align:center;color:var(--mut)}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);padding:10px 16px;border-radius:10px;z-index:60;box-shadow:var(--shadow)}
.toast.bad{border-color:#5a2020;color:var(--bad)}

/* [hidden] must beat the explicit display on .login/.shell — without this the
   login overlay stays pinned over the app after a successful sign-in. */
[hidden]{display:none!important}

/* Theme-dependent gradients — the only rules that cannot reduce to one token. */
.tile--hero{background:linear-gradient(135deg,var(--hero1),var(--hero2));border-color:var(--heroline)}
.tile--hero.warn{background:linear-gradient(135deg,var(--herowarn1),var(--herowarn2));border-color:var(--herowarnline)}
.btn--primary{color:#fff}
.tag--avail{border-color:currentColor}

/* Only headers that opt into sorting get the affordance — a pointer cursor on a
   dead header is a lie. */
th{cursor:default}
th[data-k]{cursor:pointer;user-select:none}
th[data-k]:hover{color:var(--ink)}

/* Delete affordances */
.btn--danger{border-color:var(--bad);color:var(--bad);background:transparent}
.btn--danger:hover{background:var(--bad);color:#fff}
.rowdel{background:transparent;border:0;color:var(--mut);padding:2px 7px;border-radius:6px;line-height:1;font-size:15px}
.rowdel:hover{color:var(--bad);background:var(--panel2)}
td.actions,th.actions{width:1%;white-space:nowrap;text-align:right}
.confirm{color:var(--mut);font-size:13px;margin:0 0 14px}
.confirm b{color:var(--ink)}