/* Shared tokens for all 3 Sales mocks — dark Bloomberg/Linear aesthetic */
:root {
  --bg:#0A0A0B;
  --surface:#161618;
  --surface-2:#1F1F22;
  --surface-3:#27272B;
  --ink:#FAFAFA;
  --ink-2:#D4D4D8;
  --ink-3:#A1A1AA;
  --ink-4:#71717A;
  --ink-5:#52525B;
  --line:#2D2D31;
  --line-2:#242427;
  --accent:#10B494;
  --accent-ink:#34D0B0;
  --accent-tint:#0F2E28;
  --green:#22C55E;
  --green-tint:#0F2A1A;
  --amber:#F59E0B;
  --amber-tint:#2A1F0A;
  --red:#EF4444;
  --red-tint:#2A1212;
  --blue:#60A5FA;
  --blue-tint:#0F1E33;
  --purple:#A78BFA;
  --card-shadow:0 1px 2px rgba(0,0,0,.4);
  --statusbar-bg:#050506;
  --statusbar-ink:#A1A1AA;
}
:root[data-theme="light"] {
  --bg:#FAFAF9;
  --surface:#FFFFFF;
  --surface-2:#F4F4F2;
  --surface-3:#ECECEA;
  --ink:#18181B;
  --ink-2:#3F3F46;
  --ink-3:#71717A;
  --ink-4:#A1A1AA;
  --ink-5:#B8B8BF;
  --line:#D4D4D8;
  --line-2:#E4E4E7;
  --accent:#0B6F5C;
  --accent-ink:#064A3E;
  --accent-tint:#E6F2EF;
  --green:#15803D;
  --green-tint:#DCFCE7;
  --amber:#B45309;
  --amber-tint:#FEF3C7;
  --red:#B91C1C;
  --red-tint:#FEE2E2;
  --blue:#1D4ED8;
  --blue-tint:#DBEAFE;
  --purple:#7C3AED;
  --card-shadow:0 1px 2px rgba(24,24,27,.04);
  --statusbar-bg:#18181B;
  --statusbar-ink:#D4D4D8;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:14px; line-height:1.45; font-feature-settings:"cv11","ss01","tnum";
  -webkit-font-smoothing:antialiased;}
.mono{font-family:"JetBrains Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums;}

/* ==== Rail ==== */
.app{display:grid; grid-template-columns:56px 1fr; height:800px; transition:grid-template-columns .18s ease;}
.app.tablet-shell{grid-template-rows:1fr 26px;}
.app.tablet-shell > main{grid-column:2; grid-row:1; min-height:0; overflow:hidden;}
.app.tablet-shell > .rail{grid-column:1; grid-row:1;}
.app.desktop{grid-template-columns:220px 1fr; grid-template-rows:1fr 26px;}
.app.desktop.rail-collapsed{grid-template-columns:56px 1fr;}
.app.desktop > main{grid-column:2; grid-row:1; min-height:0; overflow:hidden;}
.app.desktop > .rail{grid-column:1; grid-row:1;}
.rail{background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden;}
.rail .brand{height:56px; display:flex; align-items:center; justify-content:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--line); flex-shrink:0;}
.app.desktop:not(.rail-collapsed) .rail .brand{justify-content:flex-start;}
.rail .brand .sq{width:28px;height:28px;border-radius:5px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:800;font-size:10.5px;letter-spacing:-.04em; flex-shrink:0;}
.rail .brand .axis-logo{font-family:"Inter Tight", ui-sans-serif, system-ui, sans-serif;}
.rail .brand .name{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; opacity:0; width:0; overflow:hidden; transition:opacity .15s;}
.app.desktop:not(.rail-collapsed) .rail .brand .name{opacity:1; width:auto;}
.rail .group{padding:6px 8px; border-bottom:1px solid var(--line);}
.rail button.nav{all:unset; height:40px; width:100%; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--ink-3); cursor:pointer; border-radius:5px; position:relative; padding:0 12px; box-sizing:border-box; white-space:nowrap;}
.app.desktop:not(.rail-collapsed) .rail button.nav{justify-content:flex-start;}
.rail button.nav .label{font-size:13.5px; font-weight:500; opacity:0; width:0; overflow:hidden; white-space:nowrap; transition:opacity .15s;}
.app.desktop:not(.rail-collapsed) .rail button.nav .label{opacity:1; width:auto;}
.rail button.nav svg{flex-shrink:0;}
.rail button.nav:hover{color:var(--ink); background:var(--surface-2);}
.rail button.nav.active{color:var(--ink); background:var(--accent-tint);}
.rail button.nav.active svg{color:var(--accent-ink);}
.rail .spacer{flex:1}
.rail .collapse{all:unset; display:none; height:40px; margin:6px 8px; padding:0 12px; align-items:center; justify-content:center; gap:12px; color:var(--ink-3); cursor:pointer; border-radius:5px; border-top:1px solid var(--line); white-space:nowrap;}
.app.desktop .rail .collapse{display:flex;}
.app.desktop:not(.rail-collapsed) .rail .collapse{justify-content:flex-start;}
.rail .collapse:hover{color:var(--ink); background:var(--surface-2);}
.rail .collapse svg{flex-shrink:0;}
.rail .collapse .label{font-size:12.5px; opacity:0; width:0; overflow:hidden; white-space:nowrap; transition:opacity .15s;}
.app.desktop:not(.rail-collapsed) .rail .collapse .label{opacity:1; width:auto;}
.rail .theme-toggle{border-top:1px solid var(--line);}
.rail .theme-toggle + .collapse{border-top:none;}
.rail .footer{padding:12px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:10px;}
.app.desktop:not(.rail-collapsed) .rail .footer{justify-content:flex-start; padding:12px 14px;}
.rail .avatar{width:30px; height:30px; border-radius:5px; background:var(--ink); color:var(--bg); display:grid; place-items:center; font-weight:600; font-size:12px; flex-shrink:0;}
.rail .user-info{min-width:0; opacity:0; width:0; overflow:hidden; transition:opacity .15s;}
.app.desktop:not(.rail-collapsed) .rail .user-info{opacity:1; width:auto;}
.rail .user-info .nm{font-size:13px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.rail .user-info .st{font-size:11px; color:var(--ink-3); white-space:nowrap;}
.rail .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:5px;}

.app-statusbar{grid-column:1 / -1; grid-row:2; height:26px; background:var(--statusbar-bg); color:var(--statusbar-ink); display:flex; align-items:center; padding:0 16px; gap:14px; font-family:"JetBrains Mono", ui-monospace, monospace; font-size:11px; z-index:20; border-top:1px solid var(--line-2);}
.app-statusbar .s{display:inline-flex; gap:6px; align-items:center; white-space:nowrap;}
.app-statusbar .s .d{width:6px; height:6px; border-radius:50%;}
.app-statusbar .ok{background:var(--green);}
.app-statusbar .sep{color:color-mix(in srgb, var(--statusbar-ink) 40%, transparent);}
.app-statusbar .right{margin-left:auto; display:flex; gap:14px; align-items:center; white-space:nowrap;}
.app-statusbar.compact{height:30px; font-size:10px; padding:0 10px; gap:8px;}
.app-statusbar.compact .right{gap:8px;}
.mobile-root.has-app-status{padding-bottom:30px; position:relative;}
.mobile-root.has-app-status .m-tabbar{bottom:30px;}
.mobile-root .app-statusbar.compact{position:absolute; left:0; right:0; bottom:0;}

/* Crumbs */
.crumbs{height:40px; display:flex; align-items:center; gap:10px; padding:0 20px; border-bottom:1px solid var(--line); font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden;}
.crumbs > *{flex-shrink:0;}
.crumbs .sep{color:var(--ink-4)}
.crumbs .here{color:var(--ink); font-weight:500;}
.crumbs .right{margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0;}
.store-picker{display:inline-flex; align-items:center; gap:8px; height:26px; padding:0 10px; border:1px solid var(--line); border-radius:4px; background:var(--surface); font-size:12px; color:var(--ink-2); cursor:pointer; white-space:nowrap;}
.crumbs .badge{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:3px; background:var(--green-tint); color:var(--green); font-size:11.5px; font-weight:500; white-space:nowrap;}
.crumbs .badge .d{width:6px;height:6px;border-radius:50%; background:currentColor;}

/* Status pills */
.pill{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:3px; font-size:11.5px; font-weight:500; white-space:nowrap;}
.pill.green{background:var(--green-tint); color:var(--green);}
.pill.red{background:var(--red-tint); color:var(--red);}
.pill.amber{background:var(--amber-tint); color:var(--amber);}
.pill.ink{background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line);}
.pill .d{width:5px; height:5px; border-radius:50%; background:currentColor;}

/* Buttons */
.btn{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:4px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:500; white-space:nowrap;}
.btn:hover{border-color:var(--ink-4); color:var(--ink);}
.btn.primary{background:var(--accent); color:#000; border-color:var(--accent); font-weight:600;}
.btn.primary:hover{background:var(--accent-ink);}
.btn.success{background:var(--green-tint); color:var(--green); border-color:var(--green); font-weight:600;}
.btn.success:hover{background:var(--green); color:#000; border-color:var(--green);}
.btn.refund{background:var(--amber-tint); color:var(--amber); border-color:var(--amber); font-weight:600;}
.btn.refund:hover{background:var(--amber); color:#000; border-color:var(--amber);}
.btn.ghost{background:transparent; border-color:transparent;}
.btn.ghost:hover{background:var(--surface-2);}
.btn.danger{background:var(--red-tint); color:var(--red); border-color:var(--red); font-weight:600;}
.btn.danger:hover{background:var(--red); color:#fff; border-color:var(--red);}
.btn svg{flex-shrink:0;}

/* Inputs */
.input{display:flex; align-items:center; gap:8px; height:30px; padding:0 10px; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink-2); font-size:12.5px;}
.input input{all:unset; flex:1; color:var(--ink); min-width:0;}
.input input::placeholder{color:var(--ink-5);}
.input svg{color:var(--ink-4); flex-shrink:0;}

/* Shared table styles */
table.tx{width:100%; border-collapse:collapse; font-size:13px;}
table.tx thead th{position:sticky; top:0; background:var(--surface); text-align:center; font-weight:500; color:var(--ink-4); font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;}
table.tx thead th.num{text-align:center;}
table.tx tbody td{padding:12px; border-bottom:1px solid var(--line-2); color:var(--ink-2); vertical-align:middle; white-space:nowrap;}
table.tx tbody td.num{text-align:right; font-family:"JetBrains Mono", ui-monospace, monospace;}
table.tx tbody tr{cursor:pointer;}
table.tx tbody tr:hover td{background:var(--surface-2);}
table.tx tbody tr.selected td{background:var(--accent-tint);}
table.tx tbody tr.selected td:first-child{box-shadow:inset 3px 0 0 var(--accent);}
.tx .rcpt{font-family:"JetBrains Mono", ui-monospace, monospace; font-weight:500; color:var(--ink); font-size:12.5px; white-space:nowrap;}
.tx .dt{color:var(--ink-3); font-size:12.5px; white-space:nowrap;}
.tx .total{color:var(--ink); font-weight:600; white-space:nowrap;}
.tx .pay{display:inline-flex; align-items:center; gap:6px; color:var(--ink-3); font-size:12.5px; white-space:nowrap;}

/* Page head */
.pghead{padding:14px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; background:var(--surface); white-space:nowrap; overflow:hidden;}
.pghead h1{margin:0; font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.01em; white-space:nowrap;}
.pghead .sub{color:var(--ink-3); font-size:12.5px; white-space:nowrap;}
.pghead .spacer{flex:1; min-width:0}

/* Tabs */
.tabs{display:flex; gap:2px; padding:0 20px; border-bottom:1px solid var(--line); background:var(--surface); overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs button{all:unset; cursor:pointer; height:42px; padding:0 14px; font-size:13px; color:var(--ink-3); font-weight:500; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;}
.tabs button.on{color:var(--accent-ink); border-bottom-color:var(--accent);}
.tabs button:hover:not(.on){color:var(--ink);}

/* Scrollbar (subtle) */
*::-webkit-scrollbar{width:10px; height:10px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--line); border-radius:5px; border:2px solid var(--bg);}
*::-webkit-scrollbar-thumb:hover{background:var(--line);}