/* =====================================================================
   VM Tech UI 2 (v39): one modern look for the whole portal.
   Loaded LAST on every portal page (staff, super admin, client, sign-in, legal).
   Brand stays wine + gold; surfaces go clean white on soft stone.
   ===================================================================== */
:root{
  --wine:#65152C;--wine-deep:#4A0E20;--wine-soft:#8A2A45;--wine-900:#2A0812;--wine-ink:#3A0C1A;
  --gold:#F4AE18;--gold-soft:#FDF0CF;--gold-deep:#B97F00;
  --bg:#F5F3F0;--surface:#FFFFFF;--surface-2:#FAF8F5;--cream:#FAF8F5;--sand:#F1ECE5;
  --line:#E8E2DA;--line-2:#D9D1C6;
  --ink:#1C1714;--ink-2:#5F5650;--ink-3:#8C8279;
  --ok:#16794A;--warn:#B45309;--bad:#C0281B;
  --radius:14px;--r-sm:10px;
  --ring:0 0 0 3px rgba(101,21,44,.16);
  --sh-1:0 1px 2px rgba(28,23,20,.05);
  --sh-2:0 1px 2px rgba(28,23,20,.04),0 10px 28px -14px rgba(28,23,20,.18);
  --sh-3:0 18px 48px -18px rgba(42,8,18,.35);
  --mainx:clamp(16px,2.4vw,36px);
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-feature-settings:"tnum" 0}
::selection{background:rgba(244,174,24,.35)}
h1,h2,h3{color:var(--wine-ink);letter-spacing:-.015em}
h1{font-weight:900}
a{color:var(--wine);text-decoration:none}
a:hover{color:var(--wine-deep)}
.muted{color:var(--ink-2)}
.num,.stat b,.big-num,td.num{font-variant-numeric:tabular-nums}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-2)}
.card .card{box-shadow:none}
.card>h2:not(:not(input[type=hidden]) ~ *),
.card>.tm-head:not(:not(input[type=hidden]) ~ *),
.card>.rp-card-head:not(:not(input[type=hidden]) ~ *){
  background:linear-gradient(180deg,#FBF7F8 0%,#F7EFF1 100%);
  border-bottom:1.5px solid var(--wine);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  font-size:15.5px;font-weight:800;letter-spacing:-.005em;min-height:50px;
  flex-wrap:nowrap;white-space:nowrap;
}
.card>h2:not(:not(input[type=hidden]) ~ *){overflow:hidden;text-overflow:ellipsis}

/* ---------- buttons ---------- */
.btn{min-height:40px;padding:0 16px;border-radius:var(--r-sm);font:700 14.5px/1 var(--display);letter-spacing:.005em;
  border:1px solid transparent;background:linear-gradient(180deg,#74193A 0%,#5E1329 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(42,8,18,.28);transition:transform .12s ease,box-shadow .15s ease,background .15s ease;white-space:nowrap}
.btn:hover{background:linear-gradient(180deg,#6A1734 0%,#4A0E20 100%);color:#fff;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px -6px rgba(42,8,18,.45)}
.btn:active{transform:none}
.btn.gold{background:linear-gradient(180deg,#F8BC37 0%,#EFA70F 100%);color:var(--wine-900);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px rgba(122,75,0,.3)}
.btn.gold:hover{background:linear-gradient(180deg,#FFC646 0%,#F4AE18 100%);color:var(--wine-900)}
.btn.ghost{background:var(--surface);border:1px solid var(--line-2);color:var(--ink);box-shadow:var(--sh-1)}
.btn.ghost:hover{border-color:var(--wine);color:var(--wine);background:var(--surface)}
.btn.sm{min-height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn.big{min-height:54px;font-size:17px}
.btn:focus-visible,.link-btn:focus-visible,a:focus-visible{outline:none;box-shadow:var(--ring)}
.link-btn{color:var(--wine);font-weight:600}

/* ---------- forms ---------- */
label{font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.01em}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{
  min-height:42px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);
  padding:9px 12px;box-shadow:inset 0 1px 1px rgba(28,23,20,.03);transition:border-color .15s,box-shadow .15s}
textarea{padding-top:10px}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:#C9BFB2}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--wine);box-shadow:var(--ring)}
input[type=checkbox],input[type=radio]{accent-color:var(--wine)}
select{appearance:none;-webkit-appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%235F5650' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px}
::placeholder{color:#A99F95}

/* ---------- tables ---------- */
table{border-collapse:separate;border-spacing:0}
th{background:var(--surface-2);color:var(--ink-3);font:800 11px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;
  padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child{border-top-left-radius:8px}th:last-child{border-top-right-radius:8px}
td{padding:12px;border-bottom:1px solid #EFEAE3}
tbody tr{transition:background .12s}
tbody tr:hover td{background:#FCFAF7}
tr:last-child td{border-bottom:0}
.table-wrap{border-radius:10px}

/* ---------- pills, tabs, alerts ---------- */
.pill{padding:3px 10px;font-size:11.5px;font-weight:800;letter-spacing:.02em;border:1px solid transparent;line-height:1.5}
.s-new{background:var(--wine);color:#fff}
.s-open{background:#EAF3FF;color:#0B4F8A;border-color:#CFE3FA}
.s-waiting{background:#FFF4DC;color:#7A4B00;border-color:#F6E0AE}
.s-done{background:#E9F6EE;color:var(--ok);border-color:#C8E8D4}
.p-urgent{background:#FDECEA;color:var(--bad);border-color:#F7CFCB}
.m-member{background:var(--gold-soft);color:var(--wine-deep);border-color:#F6DE9E}
.m-payg{background:var(--sand);color:var(--ink-2);border-color:var(--line)}
.tabs{gap:6px}
.tabs a{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:7px 13px;font-size:13.5px;color:var(--ink-2);box-shadow:var(--sh-1)}
.tabs a:hover{color:var(--wine);border-color:var(--line-2)}
.tabs a.on{background:var(--wine);border-color:var(--wine);color:#fff}
.flash{background:#EEF8F2;border:1px solid #CBE9D6;border-left:4px solid var(--ok);color:#124A2E;border-radius:var(--r-sm);box-shadow:var(--sh-1)}
.errors{background:#FEF1EF;border:1px solid #F6D1CC;border-left:4px solid var(--bad);color:#7A1A14;border-radius:var(--r-sm);box-shadow:var(--sh-1)}
.note{background:#FFF8E8;border:1px solid #F6E3B4;border-radius:var(--r-sm)}
.empty{color:var(--ink-3)}

/* =====================================================================
   STAFF + SUPER ADMIN
   ===================================================================== */
body.admin{background:var(--bg);font-size:15.5px;grid-template-columns:minmax(0,1fr) 256px}
.sidebar{order:2;border-left:0}
.admin-main{order:1}
body.admin h1{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
body.admin h2{font-size:17px}
body.admin .card{padding:20px}
body.admin .card{--cpt:20px;--cpx:20px}

/* sidebar: deep wine, light text, gold marker */
.sidebar{background:radial-gradient(120% 60% at 0% 0%,#5A1027 0%,rgba(90,16,39,0) 60%),linear-gradient(180deg,#2A0812 0%,#360A17 60%,#3F0C1B 100%);
  border-right:0;padding:20px 12px 18px;color:rgba(255,255,255,.8);gap:2px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;z-index:60}
.side-brand{height:30px;margin:2px 10px 0}
@media (max-width:900px){.side-brand{margin:6px 10px 0 54px;height:26px}.side-brand svg{height:26px}}
.side-brand svg{height:30px}
.side-sub{display:inline-flex;align-self:flex-start;margin:10px 10px 10px;padding:3px 9px;border-radius:999px;font:800 10.5px/1.4 var(--text);letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);background:rgba(244,174,24,.12);border:1px solid rgba(244,174,24,.28)}
.side-label{margin:18px 12px 6px;color:rgba(255,255,255,.4);font:800 10.5px/1 var(--text);letter-spacing:.14em}
.sidebar nav a{position:relative;color:rgba(255,255,255,.8);font-size:14.5px;font-weight:600;padding:9px 12px;border-radius:10px;gap:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s,color .12s}
.sidebar nav a svg{color:rgba(255,255,255,.55);width:18px;height:18px}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar nav a:hover svg{color:#fff}
.sidebar nav a.on{background:linear-gradient(270deg,rgba(244,174,24,.2) 0%,rgba(244,174,24,.05) 100%);color:#fff;box-shadow:inset -3px 0 0 var(--gold)}
.sidebar nav a.on svg{color:var(--gold)}
.side-close{display:none}

/* main + sticky top bar */
.admin-main{padding:0 var(--mainx) 104px!important}
.admin-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 calc(-1 * var(--mainx)) 22px!important;padding:10px var(--mainx);min-height:64px;
  background:rgba(245,243,240,.82);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.admin-top .crumb{font:800 16px/1.2 var(--display);letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-right:auto;order:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-top .crumb::before{width:4px;height:18px;border-radius:3px;background:linear-gradient(180deg,var(--gold),#E08E00)}
.nav-toggle{order:99;display:none;flex:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-1)}
.nav-toggle svg{width:20px;height:20px}
.acct summary{border-radius:12px;border:1px solid var(--line);box-shadow:var(--sh-1);min-height:42px}
.acct-panel{border-radius:14px;border:1px solid var(--line);box-shadow:var(--sh-3)}
.acct-item:hover{background:var(--surface-2)}
.clock-btn{border-radius:999px!important}

/* page headers + KPI tiles */
.page-head{align-items:center;flex-wrap:nowrap;gap:12px 16px}
.page-head h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.page-head>:last-child:not(:first-child){flex:none}
.stat{position:relative;overflow:hidden}
body.admin .grid .card.stat b,.stat b{color:var(--wine-ink);letter-spacing:-.02em}
.stat span{color:var(--ink-3);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--gold),var(--wine))}

/* footer */
.admin-foot{left:var(--mainx)!important;right:var(--mainx)!important;color:var(--ink-3);font-size:13px}
.admin-foot-r a{color:var(--ink-2)}
.admin-foot-r a:hover{color:var(--wine)}

/* chat */
.chat{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--sh-2)}
.chat-log{background:linear-gradient(180deg,#FBFAF8,#F7F4F0)}
.bubble{box-shadow:var(--sh-1)}
.bubble.me{background:linear-gradient(180deg,#71183A,#5E1329)}
.bubble.them{background:#fff;border:1px solid var(--line)}

/* tables: scroll inside the card instead of pushing the page wider */
body.admin .card>table,body.admin .card>.table-wrap{display:block;overflow-x:auto;max-width:100%}
body.admin .card>table>thead,body.admin .card>table>tbody{display:table;width:100%;min-width:560px}
.layout,.grid{min-width:0}
.layout>*,.grid>*{min-width:0}

/* mobile: sidebar becomes a slide-in drawer */
@media (max-width:900px){
  .grid.g4,.grid.g3{grid-template-columns:1fr 1fr}
  .stat b{font-size:26px!important}
  .admin-top .crumb{font-size:15px}
  .admin-top .clock-btn b{display:inline}
  .acct-name{display:none}
  body.admin{display:block}
  .sidebar{position:fixed!important;right:0;left:auto;top:0;bottom:0;height:100vh!important;width:min(300px,84vw);padding:18px 12px!important;
    transform:translateX(102%);transition:transform .22s ease;overflow-y:auto;box-shadow:var(--sh-3);display:flex!important;flex-direction:column!important}
  .sidebar nav{display:block!important}
  .sidebar nav a{display:flex!important}
  .side-label{width:auto}
  body.nav-open .sidebar{transform:none}
  .side-scrim{position:fixed;inset:0;background:rgba(28,23,20,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
  body.nav-open .side-scrim{opacity:1;pointer-events:auto}
  .side-close{display:grid;place-items:center;position:absolute;left:10px;top:14px;width:36px;height:36px;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
  .nav-toggle{display:inline-flex}
  .admin-top{min-height:58px}
  .page-head{flex-wrap:wrap}
}
@media (max-width:480px){.grid.g4,.grid.g3,.grid.g2{grid-template-columns:1fr 1fr}.stat{padding:14px 14px 14px 16px!important}.admin-foot{position:static!important;margin-top:28px}body.admin .admin-main{padding-bottom:20px!important}}
@media (min-width:901px){.side-scrim{display:none}}

/* light logo on the dark sidebar */
.side-brand svg [fill="#65152C"],.side-brand svg g[fill="#65152C"] path:not([fill]){fill:#FBF7EF}

/* =====================================================================
   CLIENT PORTAL, SIGN-IN, LEGAL
   ===================================================================== */
body.client{background:var(--bg)}
body.client .topbar{background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;box-shadow:0 1px 0 rgba(255,255,255,.6)}
body.client .topbar nav{flex:1;justify-content:flex-end}
body.client .topbar nav a{white-space:nowrap}
body.client .card{border-radius:18px}
body.client .btn{min-height:50px;border-radius:12px;font-size:17px;padding:0 22px}
body.client .btn.sm{min-height:38px;font-size:14.5px;padding:0 14px}
body.client input:not([type=checkbox]):not([type=radio]),body.client select,body.client textarea{min-height:52px;font-size:18px;border-radius:12px}
.auth-card{border-radius:20px!important;border:1px solid var(--line)!important;box-shadow:var(--sh-3)!important}
.auth-btn{border-radius:12px!important;background:linear-gradient(180deg,#74193A 0%,#5E1329 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px -8px rgba(42,8,18,.5)!important}
.site-foot{background:var(--surface)!important;border-top:1px solid var(--line)}

/* invoices print clean */
@media print{.admin-top,.sidebar,.admin-foot,.nav-toggle{display:none!important}body{background:#fff}.card{box-shadow:none}}

/* client: priority cards + request list */
.choice label{border:1.5px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--sh-1)}
.choice label:has(input:checked){border-color:var(--wine);background:#FCF6F0;box-shadow:var(--ring)}
.choice.prio span{min-width:0}
.choice.prio small{white-space:normal;font-size:13.5px;line-height:1.3}
body.client .help-list a{border-radius:14px;padding:16px 18px;box-shadow:var(--sh-2);border:1px solid var(--line);align-items:center}
body.client .help-list a>span:last-child{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap}
body.client .help-list a:hover{border-color:var(--wine);transform:translateY(-1px);box-shadow:var(--sh-3)}
.hello-r .next-bk{border-radius:999px}

/* roles (v40) */
.role-areas{margin-top:4px;display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.role-area{align-items:flex-start;white-space:normal!important;font-weight:500}
.role-area input{margin-top:3px}
.role-area b{font-weight:700}

/* launch checklist (v41) */
.launch{margin-bottom:18px}
.launch-bar{height:8px;border-radius:999px;background:var(--sand);overflow:hidden;margin:2px 0 14px}
.launch-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#E08E00);border-radius:999px}
.launch-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 18px}
.launch-list li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.launch-list li.ok{opacity:.75}
.launch-list li b{font-weight:700;display:block}
.launch-list li small{display:block;color:var(--ink-2);margin-top:2px;line-height:1.35}
.launch-dot{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:12px;color:#fff;background:var(--ok);margin-top:2px}
li.todo .launch-dot{background:var(--warn)}

/* outreach (v41) */
a.card.stat{text-decoration:none;color:inherit}
a.card.stat.on{outline:2px solid var(--gold)}
.or-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.or-filter input,.or-filter select{min-height:34px!important;padding:4px 9px!important;font-size:13.5px}
.or-filter input[name=q]{width:200px}
.or-table td{vertical-align:top}
.or-table tr.due td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.or-kind{display:inline-block;margin-right:6px}
.or-acts{white-space:nowrap;display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;max-width:260px}
.or-acts form{margin:0}
.or-log{position:relative}
.or-log summary{list-style:none;display:inline-flex;cursor:pointer}
.or-log summary::-webkit-details-marker{display:none}
.or-log-form{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:360px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-3);padding:12px;display:grid;gap:8px;white-space:normal}
.or-log-form label{font-size:12px}
.or-row{display:flex;gap:6px;flex-wrap:wrap}
.or-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-size:12.5px;cursor:pointer;background:var(--surface-2);white-space:nowrap}
.or-chip:has(input:checked){border-color:var(--wine);background:#FCF6F0;color:var(--wine-ink)}
.or-chip input{width:auto;margin:0}
.or-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.or-row2 label{display:grid;gap:4px}
.or-scripts details{border-top:1px solid var(--line);padding:8px 0}
.or-scripts details:first-of-type{border-top:0}
.or-scripts summary{cursor:pointer;font-weight:700;color:var(--wine-ink)}
.or-scripts p{margin:6px 0 0;color:var(--ink-2);font-size:14px}
@media (max-width:700px){.or-log-form{width:min(360px,88vw);right:auto;left:0}}
/* bots blocked line under the launch checklist */
.launch-bots{margin:14px 0 0;padding:10px 14px;border:1px solid var(--line,#E1DAD1);border-radius:12px;background:var(--surface-2,#F4F0EA);font-size:13.5px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.launch-bots b{font-size:16px;color:var(--wine,#7A2E45)}
.launch-bots small{flex-basis:100%;color:var(--ink-3,#948A81);font-size:12px}