/* Tekoa Trading portal — one page, three shells: sign-in, the buyer portal (top bar) and the staff
   console (sidebar). Tokens only. */

/* sign-in */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:var(--df-space-8) var(--df-gutter-mobile);background-image:var(--tk-glow)}
.auth-box{width:100%;max-width:460px}
.auth-box .brand{justify-content:center;margin-bottom:var(--df-space-6)}
.auth-box h1{font-size:clamp(1.8rem,4vw,2.4rem);text-align:center;margin-bottom:var(--df-space-2)}
.auth-box .sub{text-align:center;color:var(--df-text-muted);margin-bottom:var(--df-space-6)}
.auth-box .card{padding:var(--df-space-8) var(--df-space-6)}
.auth-box .foot{display:flex;justify-content:space-between;gap:var(--df-space-3);margin-top:var(--df-space-5);font:var(--df-type-label);flex-wrap:wrap}
.auth-box .foot a{color:var(--df-text-muted)}

/* buyer portal */
.bp-top{position:sticky;top:0;z-index:40;background:var(--df-bg-header);backdrop-filter:var(--df-blur-sheet);-webkit-backdrop-filter:var(--df-blur-sheet);border-bottom:1px solid var(--df-border-subtle)}
.bp-top .wrap{display:flex;align-items:center;gap:var(--df-space-3);min-height:64px}
.bp-top .who{margin-left:auto;font:var(--df-type-label);color:var(--df-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28ch}
.bp-tabs{border-bottom:1px solid var(--df-border-subtle)}
.bp-tabs .tabs{border-bottom:0;margin-bottom:0}
.bp-main{padding:var(--df-space-10) 0 var(--df-space-16)}
@media (max-width:640px){.bp-top .who{display:none}}

/* staff console */
.console{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
.side{background:var(--df-surface-sunken);color:var(--df-text-body);padding:var(--df-space-5) var(--df-space-3);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:var(--df-space-1);border-right:1px solid var(--df-border-subtle)}
.side .brand{padding:0 var(--df-space-2) var(--df-space-2)}
.side .tag{font:var(--df-type-label);color:var(--tk-accent-text);padding:0 var(--df-space-2) var(--df-space-4)}
.side a,.side button.navlink{display:flex;align-items:center;gap:var(--df-space-3);color:var(--df-text-muted);text-decoration:none;padding:var(--df-space-3);border-radius:var(--df-radius-md);min-height:var(--df-hit-min);font:var(--df-type-label);font-size:var(--df-size-body);background:none;border:0;cursor:pointer;text-align:left;width:100%}
.side a:hover,.side button.navlink:hover{background:var(--df-action-ghost-hover);color:var(--df-text-heading)}
.side a[aria-current="page"]{background:var(--tk-badge-live-bg);color:var(--df-text-heading)}
.side .spacer{flex:1}
.side .who{font:var(--df-type-caption);color:var(--df-text-muted);padding:var(--df-space-2);word-break:break-all}
.ctop{display:flex;align-items:center;gap:var(--df-space-3);padding:var(--df-space-3) var(--df-space-6);border-bottom:1px solid var(--df-border-subtle);background:var(--df-bg-header);backdrop-filter:var(--df-blur-sheet);-webkit-backdrop-filter:var(--df-blur-sheet);position:sticky;top:0;z-index:20;min-height:64px}
.ctop h1{font-size:var(--df-size-headline);margin-right:auto}
.cmain{padding:var(--df-space-8) var(--df-space-6);min-width:0}
.kpis{display:grid;gap:var(--df-space-4);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:var(--df-space-6)}
.kpi{padding:var(--df-space-5)}
.kpi .k{font:var(--df-type-label);color:var(--df-text-muted)}
.kpi .v{font-size:var(--df-size-title-2);font-weight:var(--df-weight-extrabold);color:var(--df-text-heading);margin-top:var(--df-space-1);white-space:nowrap;font-variant-numeric:tabular-nums}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--df-text-muted);font:var(--df-type-caption)}
.chart .bar{fill:var(--tk-chart-bar)}
.chart .axis{stroke:var(--df-border-strong)}
.mods{display:grid;gap:var(--df-space-2);padding:0;margin:0}
.mods li{display:flex;justify-content:space-between;gap:var(--df-space-3);list-style:none;padding:var(--df-space-2) 0;border-bottom:1px solid var(--df-border-subtle)}
.panel-grid{display:grid;gap:var(--df-space-5);grid-template-columns:1fr}
@media (min-width:1100px){.panel-grid{grid-template-columns:2fr 1fr}}
.drawer-grid{display:grid;gap:var(--df-space-5);grid-template-columns:1fr}
@media (min-width:1000px){.drawer-grid{grid-template-columns:1fr 1fr}}
.side-toggle{display:none}
@media (max-width:900px){
  .console{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:272px;z-index:60;transform:translateX(-100%);transition:transform var(--df-duration-base) var(--df-ease-standard);background:var(--df-bg-page)}
  .side.open{transform:none}
  .side-toggle{display:inline-flex}
  .cmain{padding:var(--df-space-5) var(--df-space-4)}
  .ctop{padding:var(--df-space-3) var(--df-space-4)}
}