/* =========================================================
   frontend/spa.css — FINAL (Mobile Drawer + Compact Shell)
   - Theme intact, only container/layout tuning
   ========================================================= */

/* 0) GLOBAL THEME & VARIABLES */
:root{
  --bg:#0b0f13; --fg:#e6ecf1; --mint:#2bd4a7; --charcoal:#131922; --accent:#ffb020;
  --panel:#0f1620; --panel-border:#1d2733; --text:#e6ecf1;

  /* Shell sizing (keeps leftnav exactly between topbar & bottombar) */
  --shell-topbar-h: var(--tb-h);
  --shell-bottombar-h: 56px;

  /* Leftnav width (keep compact; avoid 15% blank feel on mobile) */
  --lnav-width: 190px;
  --tb-pad-x: clamp(8px, 2vw, 16px);
  --tb-gap:   clamp(6px, 1.2vw, 12px);
  --tb-icon:  clamp(16px, 2.6vw, 22px);
  --tb-h:     clamp(44px, 6.5vw, 56px);
}

*{ box-sizing:border-box }
html,body,#app{ height:100%; margin:0; padding:0; overflow-x:hidden; overflow-y:hidden }
body{ background:var(--bg); color:var(--fg); font:14px/1.4 'Segoe UI', Arial, sans-serif; }

/* Prevent browser default link colors (sometimes appear black/blue on dark themes) */
a, a:visited{ color: var(--text); }
a:hover{ text-decoration: underline; }
body.nav-open{ overflow:hidden }

/* 2) TOP/BOTTOM bars */
#topbar,#bottombar{
  position:fixed; left:0; right:0; padding:8px 12px; background:var(--charcoal);
  display:flex; align-items:center; justify-content:space-between; z-index:1000;
}
#topbar{ top:0; border-radius:16px; gap:var(--tb-gap); padding:8px var(--tb-pad-x); min-height:var(--tb-h); }
#bottombar{ bottom:0 }
#nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:900 }
@media (min-width:769px){ #nav-backdrop{ display:none !important } }

/* 3) LEFTNAV — mobile overlay default hidden; desktop docked */
#leftnav, .lnav{
  position: fixed;
  top: var(--shell-topbar-h,56px);
  bottom: var(--shell-bottombar-h,48px);
  left:0;
  width: var(--lnav-width); max-width: 75vw;
  background: var(--panel); border-right:1px solid var(--panel-border);
  overflow:hidden; z-index: 960;
  will-change: transform; transition: transform .25s ease;
  transform: translateX(-100%);
}
#leftnav.open, .lnav.open,
#leftnav:not(.nav-hidden), .lnav:not(.nav-hidden){ transform: translateX(0); }
@media (min-width: 992px){
  /* Desktop docked: still respect topbar/bottombar so it never slides under them */
  #leftnav, .lnav{
    position: sticky;
    top: var(--shell-topbar-h,56px);
    height: calc(100vh - var(--shell-topbar-h,56px) - var(--shell-bottombar-h,48px));
    transform: translateX(0);
  }
}

/* 4) CONTENT spacing */
#content{
  margin-top: var(--shell-topbar-h,56px);
  margin-bottom: var(--shell-bottombar-h,48px);
  margin-left: calc(var(--lnav-width) + 12px);
  padding: 12px;
  min-height: calc(100vh - var(--shell-topbar-h,56px) - var(--shell-bottombar-h,48px));
}


#content{
  margin-top: var(--shell-topbar-h,56px);
  margin-bottom: var(--shell-bottombar-h,48px);
  margin-left: calc(var(--lnav-width) + 12px);
  padding: 6px 8px 10px;
  min-height: 0;
}

@media (max-width: 900px){ #content{ margin-left: 0; } }

/* 5) COMMON UI */
button{ background:var(--mint); border:none; color:#001; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600 }
.card{ background:#111a22; border:1px solid var(--panel-border); border-radius:14px; padding:12px; margin:10px 0; color:var(--fg) }

/* Inputs should follow theme (avoid default black text / white bg surprises) */
input, textarea, select{
  color: var(--text);
  background: var(--panel);
  border:1px solid var(--panel-border);
  border-radius:10px;
  padding:8px 10px;
  box-sizing:border-box;
}
input::placeholder, textarea::placeholder{ color: rgba(230,236,241,.55); }
input:focus, textarea:focus, select:focus{ outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:1px; }

/* Collapse hides only body areas (not leftnav on desktop) */
body.collapsed #content{ display:none }
body.collapsed #bottombar{ display:none }

/* Ensure overlay drawer works & default hidden */
#leftnav, .lnav{ max-width: 75vw; }

/* minor helpers */
.progress{ position:fixed; top:0; left:0; height:3px; background:var(--mint); width:0%; transition:width .2s ease; z-index:1100; }
.toast{ animation:fadein .3s ease, fadeout .3s ease 2.2s; }
@keyframes fadein{ from{opacity:0} to{opacity:1} }
@keyframes fadeout{ from{opacity:1} to{opacity:0} }
.hidden{ display:none } .center{ display:flex; align-items:center; justify-content:center }

#content{ overflow-y:auto; -webkit-overflow-scrolling: touch; }

#sale-rows{ overflow-y:auto; max-height:calc(100vh - var(--tb-h) - 96px); }

/* grid shell (roman-urdu) */
#shell{display:grid;grid-template-areas:"top top" "left content" "bot bot";grid-template-columns:220px 1fr;grid-template-rows:56px 1fr 56px;height:100vh;}
#topbar{grid-area:top;}#leftnav{grid-area:left;overflow:hidden;}#content{grid-area:content;overflow-y:auto;overflow-x:hidden;}#bottombar{grid-area:bot;}
@media(max-width:900px){
  #shell{grid-template-areas:"top" "content" "bot";grid-template-columns:1fr;grid-template-rows:56px 1fr 56px;}
  #leftnav{position:fixed;top:56px;bottom:56px;left:0;width:min(240px,86vw);background:#0f1620;transform:translateX(-100%);transition:transform .3s ease;z-index:1200;}
  body.nav-open #leftnav{transform:translateX(0);}
}
/* helpers */
.cmp-scroll{overflow:auto;max-height:calc(100vh - 160px);} .drp-scroll{overflow:auto;max-height:calc(100vh - 160px);} 
.cmp-table,.drp-table{width:100%;border-collapse:collapse}
.cmp-table th,.cmp-table td,.drp-table th,.drp-table td{padding:8px 10px;border-bottom:1px solid #223;white-space:nowrap}
.panel-scroll{overflow:auto;max-height:calc(100vh - 160px);}
/* hide bars on login */
body.hide-top #topbar, body.hide-left #leftnav, body.hide-bot #bottombar{display:none!important;}