/* =============================================================================
   UPBI Hub Tracker — standalone shell styles

   Only the design tokens the Hub actually uses were carried over from the
   internal dashboard; the rest is written for this app. hub-operations.css owns
   every .hub-* component and is loaded alongside this file unchanged.

   The tokens below are the SAME custom properties hub-operations.css already
   consumes (--line, --text2, --navy), so that file needed no edits.
   ============================================================================= */

:root{
  --navy:#0f172a;
  --text:#0f172a;
  --text2:#64748b;
  --line:#e2e8f0;
  --bg:#f8fafc;
  --card:#ffffff;
  --accent:#0ea5e9;
  --danger:#b42318;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
/* Nothing paints until app.js decides which surface to show, so a signed-out
   user never sees a flash of the authenticated shell. */
body.ht-booting > *{ visibility:hidden; }

[hidden]{ display:none !important; }

.ht-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---- buttons --------------------------------------------------------------- */
.ht-btn{
  font:inherit; font-size:13px; font-weight:600; padding:.45rem .75rem;
  min-height:38px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--navy);
}
.ht-btn:hover{ border-color:#cbd5e1; }
.ht-btn-primary{ background:var(--navy); border-color:var(--navy); color:#fff; }
.ht-btn-primary:hover{ background:#1e293b; }
.ht-btn-primary:disabled{ opacity:.6; cursor:default; }
.ht-btn-block{ width:100%; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ---- fields ---------------------------------------------------------------- */
.ht-field{ margin-bottom:.9rem; }
.ht-field label{
  display:block; font-size:12.5px; font-weight:700; color:#334155; margin-bottom:.32rem;
}
.ht-input{
  width:100%; font:inherit; font-size:13px; padding:.5rem .6rem; min-height:38px;
  border-radius:10px; border:1px solid #cbd5e1; background:#fff; color:var(--text);
}
.ht-input[aria-invalid="true"]{ border-color:var(--danger); }

/* ---- branding -------------------------------------------------------------- */
.ht-brand{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.ht-brand-mark{
  flex:0 0 auto; width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; font-size:12px; font-weight:800; letter-spacing:.02em;
}
.ht-brand-text{ font-size:14px; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ht-brand-text strong{ font-weight:800; }
.ht-brand-lg .ht-brand-mark{ width:40px; height:40px; border-radius:10px; font-size:15px; }

/* ---- login ----------------------------------------------------------------- */
.ht-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.ht-login-card{
  width:100%; max-width:400px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:2rem 1.75rem;
}
.ht-login-card h1{ font-size:22px; letter-spacing:-.02em; margin:1.1rem 0 .3rem; }
.ht-login-lead{ font-size:13px; color:var(--text2); margin:0 0 1.4rem; line-height:1.55; }
.ht-login-error{
  font-size:12.5px; line-height:1.5; margin-bottom:.8rem; padding:.55rem .7rem;
  border-radius:8px; background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d;
}
.ht-login-foot{ font-size:12px; color:var(--text2); margin:1.2rem 0 0; line-height:1.5; }

/* ---- app frame ------------------------------------------------------------- */
.ht-app{ min-height:100vh; display:flex; flex-direction:column; }
.ht-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1.1rem; background:#fff; border-bottom:1px solid var(--line);
}
.ht-user{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.ht-user-email{ font-size:12.5px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34vw; }
.ht-user-role{
  font-size:11px; font-weight:700; color:#334155; background:#f1f5f9;
  border:1px solid var(--line); border-radius:999px; padding:.15rem .5rem; white-space:nowrap;
}
.ht-user-role:empty{ display:none; }

.ht-body{ flex:1; display:flex; align-items:flex-start; }
.ht-nav{
  flex:0 0 210px; padding:1rem .7rem; display:flex; flex-direction:column; gap:.2rem;
  border-right:1px solid var(--line); background:#fff; min-height:calc(100vh - 52px);
}
.ht-nav-item{
  font:inherit; font-size:13px; font-weight:600; text-align:left; cursor:pointer;
  padding:.5rem .6rem; min-height:38px; border-radius:8px;
  border:1px solid transparent; background:none; color:#334155;
}
.ht-nav-item:hover{ background:#f1f5f9; }
/* current page: weight + a marker bar, never colour alone */
.ht-nav-item.is-active{
  background:#f1f5f9; color:var(--navy); font-weight:800;
  border-left:3px solid var(--navy); border-radius:0 8px 8px 0;
}
.ht-main{ flex:1; min-width:0; padding:1.2rem; }
.ht-main .content{ max-width:1100px; }
.ht-main .page{ display:none; }
.ht-main .page.active{ display:block; }

.ht-state{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }

/* ---- responsive ------------------------------------------------------------ */
@media(max-width:820px){
  .ht-body{ flex-direction:column; }
  .ht-nav{
    flex:1 1 auto; width:100%; min-height:0; flex-direction:row; flex-wrap:wrap;
    border-right:0; border-bottom:1px solid var(--line); padding:.6rem;
  }
  .ht-nav-item{ flex:1 1 auto; text-align:center; }
  .ht-nav-item.is-active{ border-left:0; border-bottom:3px solid var(--navy); border-radius:8px 8px 0 0; }
  .ht-main{ padding:.9rem; }
  .ht-user-email{ max-width:40vw; }
}
@media(max-width:520px){
  .ht-header{ flex-wrap:wrap; gap:.5rem; }
  .ht-user{ width:100%; justify-content:space-between; }
  .ht-user-email{ max-width:none; flex:1; }
}
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}