/* App shell: one left rail for every role, collapsible from inside the rail.
   There is deliberately NO floating hamburger button — the work order bans it. */

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:radial-gradient(circle at 86% 0,rgba(185,120,0,.14),transparent 28rem),var(--ffz-bg);
  color:var(--ffz-text);
  font-family:var(--ffz-font);
  font-size:14px;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ffz-gold-light);outline-offset:3px}
img{max-width:100%}
h1,h2,h3{margin:0;font-weight:600}
del{color:var(--ffz-muted)}

.app{display:grid;grid-template-columns:var(--ffz-rail) minmax(0,1fr);min-height:100vh}
/* .app sets its own display, so the hidden attribute needs an explicit win —
   without this the whole app stays laid out and tabbable behind the login. */
.app[hidden]{display:none}
.app.is-collapsed{grid-template-columns:var(--ffz-rail-collapsed) minmax(0,1fr)}

/* ---- left rail ---------------------------------------------------- */
.rail{
  position:sticky;top:0;height:100vh;overflow:auto;z-index:5;
  display:flex;flex-direction:column;gap:var(--ffz-gap);
  padding:20px 16px;
  border-right:1px solid rgba(255,189,22,.22);
  background:linear-gradient(180deg,#0c0b08 0,#050505 55%,#090704 100%);
}
.rail-brand{display:flex;align-items:center;gap:11px;min-height:56px;padding:0 4px}
.rail-brand img{width:48px;height:48px;object-fit:contain}
.rail-brand strong{display:block;font-size:15px;letter-spacing:.03em}
.rail-brand small{display:block;color:var(--ffz-gold);font-size:9px;letter-spacing:.16em;text-transform:uppercase}

/* the collapse control lives INSIDE the rail, per the work order */
.rail-toggle{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;
  width:100%;min-height:52px;padding:6px 11px;
  border:1px solid #343434;border-radius:13px;
  background:#080808;color:var(--ffz-muted);
  font-weight:600;font-size:13px;text-align:left;
}
.rail-toggle i{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid #5f4710;border-radius:11px;
  color:var(--ffz-gold-light);font-style:normal;line-height:0;
}
/* The chevrons point the way the rail is about to move: ‹ while open (it will
   shrink left), › once collapsed. An emoji arrow could not carry that state. */
.rail-toggle svg{transition:transform .16s}
.app.is-collapsed .rail-toggle svg{transform:rotate(180deg)}
.rail-label{margin:2px 8px 0;color:#736d63;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}

/* Sized up on the owner's note (14 Aug): the labels and icons read small.
   Rows are 56px with 16px text and a 38px icon tile. */
.nav{display:grid;gap:6px}
.nav button{
  position:relative;
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;
  width:100%;min-height:56px;padding:9px 11px;
  border:1px solid transparent;border-radius:var(--ffz-radius-control);
  background:transparent;color:#d6d2c9;
  font-weight:600;font-size:16px;text-align:left;
}
.nav button i{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid #383838;border-radius:11px;
  color:#bbb;font-style:normal;font-size:19px;line-height:1;
}
.nav button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav button.is-active{
  border-color:#a97608;background:var(--ffz-surface-gold);color:var(--ffz-gold-light);
  box-shadow:inset 4px 0 var(--ffz-gold);   /* gold active bar on the left */
}
.nav button.is-active i{border-color:#76550d;color:var(--ffz-gold-light)}

/* collapsed rail keeps every destination reachable — icons only, no hamburger */
.app.is-collapsed .rail{padding-inline:10px}
.app.is-collapsed .rail-brand strong,
.app.is-collapsed .rail-brand small,
.app.is-collapsed .rail-toggle span,
.app.is-collapsed .rail-label,
.app.is-collapsed .nav button span{display:none}
.app.is-collapsed .rail-brand{justify-content:center}
.app.is-collapsed .rail-toggle,
.app.is-collapsed .nav button{grid-template-columns:1fr;justify-items:center}

/* ---- main column --------------------------------------------------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:4;
  display:flex;align-items:center;gap:var(--ffz-gap-sm);
  padding:12px 18px;
  border-bottom:1px solid var(--ffz-line);
  background:rgba(2,2,2,.92);
}
.topbar-title{min-width:0}
.topbar-title b{display:block;font-size:15px}
.topbar-title small{display:block;color:var(--ffz-muted);font-size:11px}
.topbar-spacer{flex:1}

.screen{flex:1;min-width:0;padding:18px;padding-bottom:104px}
.stack{display:grid;gap:12px}
/* Grid items default to min-width:auto, so a nowrap strip inside a card makes
   the CARD wider than the column instead of scrolling inside it. Without this
   the booking screen stretches the whole viewport on a phone. */
.stack>*,.grid-2>*{min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

/* ---- mobile: rail becomes a bottom bar, never a floating hamburger --- */
@media (max-width:680px){
  .app,.app.is-collapsed{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    height:auto;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
    border-right:0;border-top:1px solid rgba(255,189,22,.22);
    z-index:30;
  }
  .rail-brand,.rail-toggle,.rail-label{display:none}
  .nav{grid-template-columns:repeat(4,1fr);gap:4px}
  .nav button{grid-template-columns:1fr;justify-items:center;gap:3px;min-height:60px;padding:7px 2px}
  .nav button.is-active{box-shadow:inset 0 3px var(--ffz-gold)}
  .nav button span{display:block;font-size:11px}
  .nav button i{width:32px;height:32px;border-radius:9px}
  .screen{padding:14px 14px 150px}
  .grid-2{grid-template-columns:minmax(0,1fr)}
}