/* Lexverse portal: shared shell and components.
   Linked after each page's own <style>, so these rules restyle the shared
   building blocks (buttons, tables, toolbars, modals, tabs, KPI cards) with
   one look. Page-specific layouts stay in each page. Palette is the brand's:
   ink sidebar, gold accent, cream ground. */

:root{
  --navy:#151717; --gold:#A57B36; --bg:#FDF8F2; --card:#FFFFFF;
  --text:#151717; --muted:#665A50; --border:#E8DCCB;
  --parchment:#EDD9C4; --surface:#F5E7D6; --gold-lt:#C9A362;
  --danger:#b3392f; --danger-bg:#fdecea; --warn:#8a5a00; --warn-bg:#fff4dc;
  --ok:#1f7a4d; --ok-bg:#e8f5ee; --info:#25507f; --info-bg:#e8effd;
  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --side-text:#D9CBB8; --side-muted:#8A7F72; --side-hover:rgba(237,217,196,.07);
  --line:#F1E8DC; --hover:#FBF6EF;
  --topbar-h:58px; --sidebar-w:236px;
  --radius:12px;
  --shadow:0 1px 2px rgba(21,23,23,.04), 0 6px 18px -14px rgba(21,23,23,.22);
}

body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
.num,.lx-num{font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ---------------------------------------------------------------- frame */
.lx-app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:var(--topbar-h) auto;min-height:100vh;}
.lx-app > .lx-topbar{grid-column:1 / -1;grid-row:1;}
.lx-app > .lx-side{grid-column:1;grid-row:2;}
.lx-app > main{grid-column:2;grid-row:2;min-width:0;width:100%;max-width:1480px;margin:0;padding:26px 32px 64px;}

/* ---------------------------------------------------------------- top bar */
.lx-topbar{position:sticky;top:0;z-index:45;display:flex;align-items:center;gap:10px;
  padding:0 18px 0 12px;background:var(--navy);color:var(--parchment);
  border-bottom:1px solid rgba(201,163,98,.32);box-shadow:none;flex-wrap:nowrap;}
.lx-topbar .header-spacer{flex:1;}
.lx-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:0 6px;min-width:0;}
.lx-mono{font-family:var(--display);font-size:31px;font-weight:600;line-height:1;color:var(--parchment);letter-spacing:-.02em;}
.lx-mono i{font-style:normal;color:var(--gold-lt);margin-left:-.12em;}
.lx-word{display:flex;flex-direction:column;border-left:1px solid rgba(201,163,98,.55);padding-left:12px;
  font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.34em;line-height:1.05;color:var(--parchment);white-space:nowrap;}
.lx-word small{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.46em;color:var(--gold-lt);margin-top:4px;}
.lx-iconbtn,.lx-topbar .hamburger-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;min-width:36px;padding:0 10px;
  border-radius:8px;border:1px solid transparent;background:transparent;color:var(--side-text);font-size:13px;font-weight:500;cursor:pointer;}
.lx-iconbtn:hover,.lx-topbar .hamburger-btn:hover{background:rgba(237,217,196,.09);color:#fff;}
.lx-topbar .status-pill{display:flex;align-items:center;gap:7px;font-size:12px;padding:6px 12px;border-radius:999px;
  background:rgba(237,217,196,.07);border:1px solid rgba(237,217,196,.16);color:var(--side-text);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis;}
.status-dot{width:8px;height:8px;border-radius:50%;background:#e0a53d;flex:none;}
.status-pill.connected .status-dot{background:#4caf7d;box-shadow:0 0 0 3px rgba(76,175,125,.18);}
.lx-topbar .btn-ghost{display:inline-flex;align-items:center;gap:7px;color:var(--side-text);background:transparent;border-color:transparent;}
.lx-topbar .btn-ghost:hover{background:rgba(237,217,196,.09);color:#fff;}
#lxNavToggle{display:none;}

/* ---------------------------------------------------------------- sidebar */
.lx-side{position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;z-index:40;
  background:var(--navy);color:var(--side-text);padding:10px 12px 18px;display:flex;flex-direction:column;gap:2px;}
.lx-nav-group{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--side-muted);padding:18px 12px 6px;}
.lx-nav-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--side-text);
  text-decoration:none;font-size:13.5px;font-weight:500;line-height:1.2;transition:background .15s,color .15s;background:none;border:0;width:100%;text-align:left;cursor:pointer;font-family:inherit;}
.lx-nav-link:hover{background:var(--side-hover);color:#fff;}
.lx-nav-link.active{background:var(--gold);color:var(--navy);font-weight:600;}
.lx-nav-link .lx-ic{width:18px;height:18px;flex:none;}
.lx-nav-link small{display:block;font-size:11px;font-weight:400;color:var(--side-muted);margin-top:2px;}
.lx-nav-link.active small{color:rgba(21,23,23,.7);}
.lx-side-foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(237,217,196,.1);display:flex;flex-direction:column;gap:2px;}
.lx-side-backdrop{display:none;}
.lx-nav-link > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* quick links: a collapsible group inside the sidebar */
.lx-ql{margin-top:6px;}
.lx-ql > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;border-radius:8px;}
.lx-ql > summary::-webkit-details-marker{display:none;}
.lx-ql > summary:hover{color:var(--side-text);}
.lx-ql-ic{width:14px;height:14px;display:none;}
.lx-ql-chev{width:14px;height:14px;margin-left:auto;transition:transform .15s;}
.lx-ql:not([open]) .lx-ql-chev{transform:rotate(-90deg);}
.lx-ql-link{padding:7px 12px;font-size:12.5px;color:#BFB1A0;}
.lx-ql-link .lx-ic{width:16px;height:16px;opacity:.85;}

/* unpinned: a slim icon rail that opens over the page on hover or keyboard focus */
@media (min-width:961px){
  .lx-app.side-unpinned{grid-template-columns:68px minmax(0,1fr);}
  .lx-app.side-unpinned .lx-side{width:68px;overflow-x:hidden;transition:width .18s ease, box-shadow .18s ease;}
  .lx-app.side-unpinned .lx-side:hover,
  .lx-app.side-unpinned .lx-side:focus-within{width:var(--sidebar-w);box-shadow:16px 0 40px -18px rgba(0,0,0,.55);}
  .lx-app.side-unpinned .lx-side:not(:hover):not(:focus-within) .lx-nav-link > span,
  .lx-app.side-unpinned .lx-side:not(:hover):not(:focus-within) .lx-nav-group > span,
  .lx-app.side-unpinned .lx-side:not(:hover):not(:focus-within) .lx-ql-chev{display:none;}
  .lx-app.side-unpinned .lx-side:not(:hover):not(:focus-within) .lx-nav-group{height:1px;padding:0;margin:14px 10px;background:rgba(237,217,196,.12);}
  .lx-app.side-unpinned .lx-side:not(:hover):not(:focus-within) .lx-ql > summary{height:auto;margin:14px 0 4px;padding:8px 13px;background:none;justify-content:center;}
  .lx-app.side-unpinned .lx-side:not(:hover):not(:focus-within) .lx-ql-ic{display:block;}
  .lx-app.side-unpinned .lx-side:not(:hover):not(:focus-within) .lx-nav-link{justify-content:center;padding-left:0;padding-right:0;}
}
@media (prefers-reduced-motion:reduce){ .lx-app.side-unpinned .lx-side{transition:none;} }

/* ---------------------------------------------------------------- icons */
.lx-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px;}
.btn .lx-ic{width:15px;height:15px;margin-right:2px;}

/* ---------------------------------------------------------------- page head */
.lx-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px;}
.lx-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.lx-title{font-family:var(--display);font-size:32px;font-weight:600;line-height:1.05;margin:0;letter-spacing:.005em;color:var(--text);}
.lx-lede{font-size:13.5px;color:var(--muted);margin:6px 0 0;max-width:70ch;}
.lx-section-title{font-family:var(--display);font-size:22px;font-weight:600;margin:28px 0 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.lx-section-title small{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--muted);}

/* ---------------------------------------------------------------- buttons */
button{font:inherit;cursor:pointer;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--sans);border:1px solid var(--border);background:#fff;color:var(--text);
  padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;line-height:1.2;transition:background .15s,border-color .15s,box-shadow .15s;box-shadow:none;}
.btn:hover{background:var(--hover);border-color:#DCCBB3;}
.btn:disabled{opacity:.55;cursor:default;}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-primary:hover{background:#2A2C2C;border-color:#2A2C2C;}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:600;box-shadow:0 4px 12px -6px rgba(165,123,54,.7);}
.btn-gold:hover{background:#946D2E;border-color:#946D2E;filter:none;}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:7px;}
.btn-danger{color:var(--danger);}
.btn-link{background:none;border:none;color:var(--muted);text-decoration:underline;padding:0;font-size:12.5px;}

/* ---------------------------------------------------------------- surfaces */
.toolbar{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);}
.toolbar select,.toolbar input[type=text],.toolbar input[type=date],.toolbar input:not([type]){
  background:#fff;color:var(--text);padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;}
.toolbar select:focus,.toolbar input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(165,123,54,.15);}
section.block{border-radius:var(--radius);box-shadow:var(--shadow);}
section.block h2{font-family:var(--display);font-size:20px;}

table{border-color:var(--border);border-radius:var(--radius);font-variant-numeric:tabular-nums;}
thead th{background:var(--hover);color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border);}
tbody tr:hover{background:#FDFAF5;}

.modal{border:1px solid var(--border);border-radius:16px;box-shadow:0 40px 90px -30px rgba(21,23,23,.45);}
.modal h2{font-family:var(--display);font-size:24px;font-weight:600;}
.modal h3{font-family:var(--display);}
.field label{color:var(--muted);}
.field input,.field select,.field textarea{border-radius:8px;}

/* tabs: Master Sheet (.tab-btn) and Books (.tabs button) */
.tabs{gap:6px;border-bottom:1px solid var(--border);margin-bottom:20px;}
.tabs .tab-btn,.tabs button{background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 14px 11px;
  font-size:13.5px;font-weight:500;color:var(--muted);white-space:nowrap;border-radius:0;}
.tabs .tab-btn:hover,.tabs button:hover{color:var(--text);}
.tabs .tab-btn.active,.tabs button.active{color:var(--text);font-weight:600;border-bottom-color:var(--gold);}

/* sub-navigation between Finance and Books */
.subnav{display:flex;gap:6px;flex-wrap:wrap;padding:0;margin:0 0 18px;max-width:none;}
.subnav a{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;padding:7px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);}
.subnav a:hover{color:var(--text);border-color:#DCCBB3;}
.subnav a.active{background:var(--navy);color:var(--parchment);border-color:var(--navy);}

/* existing KPI cards (Master, Finance, Books) */
.kpi-card,.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);}
.kpi-card .label,.kpi .label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.kpi-card .value,.kpi .value{font-size:24px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:6px;}

footer{color:var(--muted);}

/* ---------------------------------------------------------------- dashboards */
.lx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:16px;}
.lx-kpi{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);min-width:0;text-decoration:none;color:inherit;}
a.lx-kpi:hover{border-color:#DCCBB3;}
.lx-kpi-body{min-width:0;}
/* a row of exactly five tiles (Overview): 5 → 3+2 → 2 columns, never a lone orphan on wide screens */
.lx-kpis.five{grid-template-columns:repeat(5,minmax(0,1fr));}
.lx-kpis.five .lx-kpi-icon{width:40px;height:40px;}
@media (max-width:1320px){ .lx-kpis.five{grid-template-columns:repeat(6,minmax(0,1fr));} .lx-kpis.five > *{grid-column:span 2;} .lx-kpis.five > :nth-child(n+4){grid-column:span 3;} }
.lx-kpi-value{font-size:25px;font-weight:600;letter-spacing:-.015em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lx-kpi-value small{font-size:13px;font-weight:500;color:var(--muted);margin-left:2px;}
.lx-kpi-label{font-size:12.5px;color:var(--muted);margin-top:5px;}
.lx-kpi-sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.lx-delta{font-weight:600;margin-left:4px;white-space:nowrap;}
.lx-delta.good{color:var(--ok);} .lx-delta.bad{color:var(--danger);} .lx-delta.neutral{color:var(--muted);}
.lx-kpi-icon{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--surface);color:var(--gold);}
.lx-kpi-icon .lx-ic{width:22px;height:22px;stroke-width:1.9;}
.lx-kpi-icon.good{background:var(--ok-bg);color:var(--ok);}
.lx-kpi-icon.bad{background:var(--danger-bg);color:var(--danger);}
.lx-kpi-icon.neutral{background:#F3EEE7;color:#8A7F72;}

.lx-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-bottom:16px;}
.lx-span-4{grid-column:span 4;} .lx-span-5{grid-column:span 5;} .lx-span-6{grid-column:span 6;}
.lx-span-7{grid-column:span 7;} .lx-span-8{grid-column:span 8;} .lx-span-12{grid-column:span 12;}
.lx-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px 14px;display:flex;flex-direction:column;gap:12px;min-width:0;}
.lx-card-head{display:flex;align-items:flex-start;gap:10px;}
.lx-card-titles{flex:1;min-width:0;}
.lx-card-title{font-size:14px;font-weight:600;margin:0;color:var(--text);font-family:var(--sans);}
.lx-card-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.lx-card-link{font-size:12px;font-weight:600;color:var(--gold);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
.lx-card-link:hover{text-decoration:underline;}
.lx-chart{position:relative;height:260px;min-width:0;}
.lx-chart.sm{height:210px;} .lx-chart.lg{height:320px;}
.lx-chart.is-empty canvas{visibility:hidden;}
.lx-chart.is-empty::after{content:attr(data-empty);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;
  color:var(--muted);font-size:13px;background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(232,220,203,.25) 10px 11px);border-radius:8px;}
.lx-note{font-size:11.5px;color:var(--muted);margin:0;}

/* compact lists inside cards */
.lx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.lx-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13px;min-width:0;}
.lx-list li:first-child{border-top:0;}
.lx-list .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lx-list .meta{color:var(--muted);font-size:12px;white-space:nowrap;}
.lx-list .empty{color:var(--muted);justify-content:center;padding:18px 0;}
.lx-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;background:var(--surface);color:#6b4c14;}
.lx-pill.bad{background:var(--danger-bg);color:var(--danger);} .lx-pill.warn{background:var(--warn-bg);color:var(--warn);}
.lx-pill.good{background:var(--ok-bg);color:var(--ok);} .lx-pill.info{background:var(--info-bg);color:var(--info);}
.lx-dot{width:9px;height:9px;border-radius:50%;flex:none;}

/* collapsible insight panels */
details.lx-insights{margin-bottom:18px;}
details.lx-insights > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:21px;font-weight:600;margin:4px 0 12px;}
details.lx-insights > summary::-webkit-details-marker{display:none;}
details.lx-insights > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:4px;transition:transform .15s;}
details.lx-insights:not([open]) > summary::after{transform:rotate(-45deg);}
details.lx-insights > summary small{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--muted);}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .lx-span-4,.lx-span-5,.lx-span-7,.lx-span-8{grid-column:span 6;}
}
@media (max-width:960px){
  .lx-app{grid-template-columns:minmax(0,1fr);}
  .lx-app > main{grid-column:1;padding:20px 16px 56px;}
  #lxNavToggle{display:inline-flex;}
  .lx-side{position:fixed;left:0;top:var(--topbar-h);bottom:0;height:auto;width:min(280px,86vw);transform:translateX(-102%);
    transition:transform .22s ease;box-shadow:12px 0 40px -20px rgba(0,0,0,.6);}
  .lx-app.nav-open .lx-side{transform:none;}
  .lx-side-backdrop{position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(15,15,15,.45);z-index:39;}
  .lx-app.nav-open .lx-side-backdrop{display:block;}
  .lx-span-4,.lx-span-5,.lx-span-6,.lx-span-7,.lx-span-8{grid-column:span 12;}
  .lx-word{display:none;}
  .lx-topbar .status-pill{max-width:150px;}
}
@media (max-width:560px){
  .lx-topbar{gap:4px;padding:0 8px;}
  .lx-topbar .status-pill{display:none;}
  .lx-title{font-size:27px;}
  .lx-kpis,.lx-kpis.five{grid-template-columns:1fr 1fr;gap:10px;}
  .lx-kpis.five > :nth-child(n){grid-column:auto;} .lx-kpis.five > :last-child{grid-column:1 / -1;}
  .lx-kpi{padding:12px;}
  .lx-kpi-icon{display:none;}
  .lx-kpi-value{font-size:20px;}
  .lx-hide-sm{display:none !important;}
}
@media (prefers-reduced-motion:reduce){ .lx-side{transition:none;} }