/* ═══════════════════════════════════════════════════════════════════════════
   Teamstay — the shell, and the surface every screen sits on.

   Loaded after components.css: it replaces the old top bar with a sidebar
   and restates the shared pieces (buttons, cards, fields, tables) in the new
   shape, so screens that have not been touched still look like they belong.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.has-side{ padding-left:var(--side-w); }

.side{
  position:fixed; inset:0 auto 0 0; width:var(--side-w); z-index:40;
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s4) var(--s3) var(--s3);
  background:var(--paper);
  border-right:1px solid var(--rule);
}

.side__brand{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s2) var(--s4); color:var(--ink); min-height:56px;
}
.side__brand:hover{ text-decoration:none; }
.side__logo{ max-height:40px; max-width:100%; width:auto; object-fit:contain; }
.side__mark{
  flex:none; width:36px; height:36px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-display); font-weight:750; font-size:18px;
  box-shadow:var(--sheen), 0 6px 16px -6px color-mix(in oklab, var(--accent) 70%, transparent);
}
.side__venue{ min-width:0; line-height:1.2; }
.side__venue strong{ display:block; font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side__venue small{ display:block; color:var(--ink-3); font-size:var(--fs-2xs); }

.side__nav{ display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1 1 auto; margin:0 calc(-1 * var(--s1)); padding:0 var(--s1); }
.side__group{
  margin:var(--s4) var(--s3) var(--s1); color:var(--ink-4);
  font-size:var(--fs-2xs); font-weight:600;
}

.side__link{
  position:relative;
  display:flex; align-items:center; gap:var(--s3);
  min-height:42px; padding:0 var(--s3);
  border-radius:var(--r-ctl);
  color:var(--ink-2); font-weight:550; font-size:var(--fs-sm);
  transition:background var(--t-fast), color var(--t-fast);
}
.side__link .icon{ flex:none; color:var(--ink-3); transition:color var(--t-fast), transform var(--t) var(--ease-spring); }
.side__link:hover{ background:var(--canvas); color:var(--ink); text-decoration:none; }
.side__link:hover .icon{ color:var(--ink); }
.side__link:active .icon{ transform:scale(.9); }
.side__link.is-active{ background:var(--accent-wash); color:var(--accent); font-weight:650; }
.side__link.is-active .icon{ color:var(--accent); }
.side__link.is-active::before{
  content:''; position:absolute; left:-12px; top:10px; bottom:10px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent);
}
.side__label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side__badge{
  flex:none; min-width:22px; height:22px; padding:0 7px; border-radius:var(--r-pill);
  display:inline-grid; place-items:center; font-size:var(--fs-3xs); font-weight:700;
}
.side__badge--accent{ background:var(--accent); color:var(--on-accent); }
.side__badge--warn  { background:var(--warn-wash); color:var(--warn-ink); }
.side__badge--danger{ background:var(--danger); color:#fff; }

.side__foot{ border-top:1px solid var(--rule); padding-top:var(--s2); display:flex; flex-direction:column; gap:2px; }
.side__powered{ font-size:var(--fs-3xs); color:var(--ink-4); padding:var(--s2) var(--s3) 0; letter-spacing:.01em; }

.me{
  display:flex; align-items:center; gap:var(--s3); width:100%;
  padding:var(--s2); border-radius:var(--r-ctl); color:var(--ink-3);
  transition:background var(--t-fast);
}
.me:hover{ background:var(--canvas); }
.me__avatar{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:var(--fs-2xs);
  background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 55%, #12b3a8));
  color:#fff;
}
.me__avatar--sm{ width:30px; height:30px; }
.me__text{ min-width:0; flex:1 1 auto; text-align:left; line-height:1.25; }
.me__text strong{ display:block; color:var(--ink); font-size:var(--fs-xs); font-weight:650; }
.me__text small{ display:block; font-size:var(--fs-3xs); }

/* The account menu opens upwards out of the foot of the sidebar. */
.menu--up .menu__panel{ top:auto; bottom:calc(100% + 8px); left:0; right:auto; width:260px; }
.menu__panel{
  border-radius:var(--r-card) !important; padding:var(--s2) !important;
  box-shadow:var(--shadow-pop) !important; border:1px solid var(--rule) !important;
  background:var(--paper) !important;
  transform-origin:bottom left; animation:pop-in 180ms var(--ease);
}
.menu__item{
  display:flex !important; align-items:center; gap:var(--s3); width:100%;
  border-radius:9px; padding:9px var(--s3) !important; font-size:var(--fs-sm) !important; color:var(--ink-2);
}
.menu__item .icon{ color:var(--ink-3); }
.menu__label{ display:flex; align-items:center; gap:6px; text-transform:none !important; letter-spacing:0 !important;
  font-size:var(--fs-2xs) !important; color:var(--ink-4) !important; padding:var(--s2) var(--s3) var(--s1) !important; }
.menu__langs{ display:flex; flex-wrap:wrap; gap:6px; padding:var(--s1) var(--s3) var(--s2); }

.chip{
  display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 12px;
  border-radius:var(--r-pill); border:1px solid var(--rule-strong); background:var(--paper);
  font-size:var(--fs-2xs); font-weight:600; color:var(--ink-2);
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.chip:hover{ border-color:var(--ink-4); color:var(--ink); }
.chip--on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

@keyframes pop-in{ from{ opacity:0; transform:translateY(6px) scale(.97); } to{ opacity:1; transform:none; } }

/* ── Mobile bar + drawer ─────────────────────────────────────────────────── */

.mobilebar{ display:none; }
.scrim{ display:none; }

/* An iPad: a rail of icons, names on hover. Keeps the board's width. */
@media (max-width: 1180px) and (min-width: 821px){
  :root{ --side-w:76px; }
  .side{ padding-inline:var(--s2); align-items:center; }
  .side__venue, .side__label, .side__group, .side__powered, .me__text, .me > .icon{ display:none; }
  .side__brand{ padding:var(--s1) 0 var(--s3); justify-content:center; }
  .side__logo{ max-height:34px; }
  .side__nav{ align-items:center; }
  .side__link{ width:48px; justify-content:center; padding:0; }
  .side__link.is-active::before{ left:-14px; }
  .side__badge{ position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 5px; }
  .side__link[data-tip]:hover::after{
    content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
    background:var(--ink); color:var(--paper); padding:6px 10px; border-radius:8px; white-space:nowrap;
    font-size:var(--fs-2xs); font-weight:600; box-shadow:var(--shadow-pop); pointer-events:none; z-index:60;
  }
  .me{ justify-content:center; padding:var(--s1); }
}

/* A phone: the sidebar becomes a drawer behind a bar. */
@media (max-width: 820px){
  .has-side{ padding-left:0; padding-top:56px; }
  .mobilebar{
    display:flex; align-items:center; gap:var(--s3);
    position:fixed; inset:0 0 auto 0; height:56px; z-index:35; padding:0 var(--s3);
    background:color-mix(in oklab, var(--paper) 86%, transparent);
    -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
    border-bottom:1px solid var(--rule);
  }
  .mobilebar__burger{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; color:var(--ink); }
  .mobilebar__brand{ flex:1; font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .side{
    width:min(86vw, 320px); transform:translateX(-102%); visibility:hidden;
    transition:transform 320ms var(--ease), visibility 0s linear 320ms; box-shadow:none; border-right:0;
  }
  .side.is-open{ transform:none; visibility:visible; box-shadow:var(--shadow-modal); transition:transform 320ms var(--ease); }
  .scrim{
    display:block; position:fixed; inset:0; z-index:39; background:rgba(8,14,24,.42);
    opacity:0; pointer-events:none; transition:opacity 260ms var(--ease);
  }
  .side.is-open ~ .scrim{ opacity:1; pointer-events:auto; }
}

/* ── The surface ─────────────────────────────────────────────────────────── */

.main{ min-height:100vh; }
.page{ padding:var(--s8) clamp(16px, 3vw, 40px) var(--s12); }
.page__head{ align-items:flex-end; margin-bottom:var(--s6); }
.page__title{ font-family:var(--font-display); font-size:clamp(26px, 2.4vw, 34px); font-weight:750; letter-spacing:-.025em; line-height:1.05; }
.page__sub{ font-size:var(--fs-md); margin-top:6px; }

.card{ border-radius:var(--r-card); border-color:var(--rule); box-shadow:var(--shadow-sm); }
.card__head{ border-bottom-color:var(--rule); padding:var(--s4) var(--s5); }
.card__body{ padding:var(--s5); }
.card__title{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; }

/* Buttons: one height family, a soft press, and the primary carries a little
   light along its top edge so it reads as the thing to press. */
.btn{
  min-height:40px; padding:0 16px; border-radius:var(--r-ctl);
  font-weight:600; font-size:var(--fs-sm); gap:8px;
  border:1px solid var(--rule-strong); background:var(--paper); color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover{ background:var(--paper-2); border-color:var(--ink-4); }
.btn:active{ transform:translateY(1px) scale(.985); box-shadow:none; }
.btn .icon{ flex:none; }
.btn--primary{
  background:var(--accent); border-color:transparent; color:var(--on-accent);
  box-shadow:var(--sheen), 0 1px 2px rgba(15,27,45,.12), 0 8px 18px -10px color-mix(in oklab, var(--accent) 80%, transparent);
}
.btn--primary:hover{ background:var(--accent-hi); border-color:transparent; }
.btn--primary:active{ background:var(--accent-lo); }
.btn--quiet{ box-shadow:none; border-color:transparent; background:transparent; }
.btn--quiet:hover{ background:var(--canvas-2); border-color:transparent; }
.btn--sm{ min-height:32px; padding:0 12px; font-size:var(--fs-xs); border-radius:9px; }
.btn--lg{ min-height:50px; padding:0 22px; font-size:var(--fs-md); border-radius:14px; }
.btn--icon{ width:40px; padding:0; justify-content:center; }

.input,.select,.textarea{
  min-height:44px; border-radius:var(--r-ctl); border:1px solid var(--rule-strong);
  background:var(--paper); padding:10px 14px; font-size:var(--fs-sm);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus,.select:focus,.textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-wash); }
.field__label{ font-size:var(--fs-xs); color:var(--ink-2); margin-bottom:6px; }

.table__scroll{ border-radius:var(--r-card); }
.table th{ text-transform:none !important; letter-spacing:0 !important; font-size:var(--fs-2xs) !important; color:var(--ink-3) !important;
  background:var(--paper-2); }

.badge{ border-radius:var(--r-pill); font-weight:600; }
.stat{ border-radius:var(--r-card); box-shadow:var(--shadow-sm); }
.stat__label{ text-transform:none !important; letter-spacing:0 !important; font-size:var(--fs-xs) !important; }
.stat__value{ font-weight:750; letter-spacing:-.02em; }

.alert{ border-radius:var(--r-ctl); }

dialog.modal, .modal{ border-radius:var(--r-modal); }

/* An empty screen says what to do next, with the one button that does it. */
.empty{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3);
  padding:var(--s12) var(--s6); border:1.5px dashed var(--rule-strong); border-radius:var(--r-card);
  background:var(--paper-2);
}
.empty__icon{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent); }
.empty__title{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:700; }
.empty__text{ color:var(--ink-3); max-width:46ch; }

/* The board's old app-shell rules assumed a top bar of --bar-h; with the bar
   gone, sticky things stick to the top of the window. */
.has-side{ --bar-h:0px; }
@media (max-width: 820px){ .has-side{ --bar-h:56px; } }
.wordmark{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:780; font-size:22px;
  letter-spacing:-.03em; color:var(--ink); }
.wordmark:hover{ text-decoration:none; }
.wordmark__beds{ display:grid; grid-template-columns:repeat(3, 8px); gap:3px; }
.wordmark__beds i{ display:block; width:8px; height:16px; border-radius:3px; background:var(--accent); }
.wordmark__beds i:nth-child(2){ opacity:.55; }
.wordmark__beds i:nth-child(3){ opacity:.25; }