/* The app shell shared by every page, including the quote editor: design tokens, the navy
   sidebar and the mobile drawer. From the "Workspace" design (docs/design/editor-workspace-README.md). */

:root {
  --navy: #02237b; --navy-tint: #eef0f9;
  --sb-muted: #c3c9e6; --sb-label: #9aa3d1;
  --orange: #fa8537; --orange-text: #e06b1f; --orange-tint: #fff1e8;
  --text: #1a1d29; --text-2: #5b6072; --text-3: #8b8f9e;
  --border: #e3e5ea; --border-strong: #cbced8;
  --surface: #ffffff; --bg: #f6f7f9; --surface-2: #f2f3f6;
  --green: #1f8a4c; --green-bg: #e8f6ec;
  --amber: #a15c00; --amber-bg: #fdf1de;
  --red: #c62828; --red-bg: #fceceb;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sidebar-w: 232px;
}

body.has-shell { margin: 0; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--navy); color: #fff; padding: 20px 14px; display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; font-family: var(--font); z-index: 50;
}
.sb-brand { padding: 0 8px; display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.sb-brand img { height: 30px; width: auto; display: block; }
.sb-title { font-size: 15px; font-weight: 700; line-height: 1.2; }
.sb-sub { font-size: 11px; color: var(--sb-muted); }
.sb-project { background: rgba(255, 255, 255, .08); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.sb-project .sb-sub { font-size: 11px; }
.sb-project-ref { font-size: 13.5px; font-weight: 600; }
.sb-project-cust { font-size: 11.5px; color: var(--sb-muted); }
.sb-group { display: flex; flex-direction: column; gap: 2px; }
.sb-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--sb-label); padding: 0 8px 6px; }
.sb-item {
  font: 13px/1.35 var(--font); padding: 7px 10px; border-radius: 6px; color: #fff; text-decoration: none;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: none; border: none; text-align: left; cursor: pointer; width: 100%;
}
.sb-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-item[aria-current] { background: #fff; color: var(--navy); font-weight: 600; }
.sb-item[aria-current]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none; }
.sb-item:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.sb-item .sb-count { font-size: 11px; background: var(--orange); color: #fff; border-radius: 10px; padding: 0 6px; font-weight: 600; }
.sb-footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 12px; }
.sb-user { padding: 6px 10px 4px; font-size: 12.5px; line-height: 1.35; }
.sb-user small { display: block; color: var(--sb-muted); font-size: 11px; }

/* ---------- Mobile: sidebar becomes a drawer ---------- */
.mobilebar { display: none; }
.sb-scrim { display: none; }
@media (max-width: 800px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .mobilebar {
    display: flex; align-items: center; gap: 10px; background: var(--navy); color: #fff; padding: 10px 14px;
    font: 600 14px var(--font); position: sticky; top: 0; z-index: 40;
  }
  .mobilebar button { background: none; border: 1px solid rgba(255, 255, 255, .35); color: #fff; border-radius: 6px; padding: 4px 10px; font-size: 16px; cursor: pointer; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, .25); }
  .shell.drawer-open .sidebar { transform: none; }
  .shell.drawer-open .sb-scrim { display: block; position: fixed; inset: 0; background: rgba(16, 20, 40, .4); z-index: 45; }
}
@media print {
  .sidebar, .mobilebar, .sb-scrim { display: none !important; }
  .shell { display: block; }
}

/* ---------- Sign-in (also shown over the editor) ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); font: 13.5px/1.5 var(--font); color: var(--text); background: var(--bg); }
.auth-side { background: var(--navy); color: #fff; padding: 44px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.auth-side .sb-brand { padding: 0; }
.auth-side .sb-title { font-size: 18px; }
.auth-side h2 { font-size: 26px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; max-width: 420px; }
.auth-side p { color: var(--sb-muted); max-width: 420px; margin: 0; }
.auth-accent { width: 48px; height: 4px; background: var(--orange); border-radius: 2px; margin-bottom: 18px; }
.auth-foot { font-size: 12px; color: var(--sb-label); }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 32px 20px; }
.auth-logo { width: min(300px, 70vw); height: auto; display: block; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; box-shadow: 0 1px 2px rgba(16, 20, 40, .05); }
.auth-card h1 { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.auth-card p { margin: 0 0 12px; }
.auth-card .stack { display: grid; gap: 12px; }
.auth-card .stack label { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.auth-card input { font: inherit; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px; width: 100%; box-sizing: border-box; background: #fff; color: var(--text); }
.auth-card input:focus, .auth-card button:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.auth-card button { font: 500 14px/1.3 var(--font); padding: 9px 12px; border-radius: 6px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); cursor: pointer; }
.auth-card button.primary { background: var(--orange); border-color: var(--orange); color: #fff; width: 100%; }
.auth-card button.link { border: none; background: none; color: var(--navy); padding: 4px 0; text-decoration: underline; width: auto; }
.auth-card .form-error { color: var(--red); background: var(--red-bg); border-radius: 6px; padding: 8px 10px; margin: 0; font-size: 13px; }
.auth-card .hint { color: var(--text-2); font-size: 12.5px; }
.auth-card .steps { padding-left: 20px; display: grid; gap: 10px; }
.auth-card .qr img { width: 180px; height: 180px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 6px; margin: 10px 0; }
.auth-card .secret { display: block; word-break: break-all; background: var(--surface-2); padding: 8px; border-radius: 6px; font-size: 13px; }
@media (max-width: 900px) {
  .auth-page { grid-template-columns: minmax(0, 1fr); }
  .auth-side { padding: 18px 20px; }
  .auth-side h2, .auth-side p, .auth-side .auth-accent, .auth-foot { display: none; }
}

/* ---------- Brand: Jost (SIL Open Font License), logo and loader ---------- */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jost-latin.woff2") format("woff2"); }
.sb-brand { flex-direction: column; align-items: flex-start; gap: 6px; }
.sb-wordmark { height: 15px; width: auto; display: block; }
.sb-brand .sb-sub { font: 500 10px/1.2 "Jost", var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--sb-muted); }
.auth-side .sb-wordmark { height: 22px; }
.auth-side .sb-brand .sb-sub { font-size: 11.5px; }

.abc-logo { width: 100%; height: auto; display: block; overflow: visible; }
.abc-logo rect, .abc-logo .abc-tile { fill: var(--navy); }
.abc-logo text { fill: var(--navy); font-family: "Jost", sans-serif; font-weight: 500; }
.abc-abc { font-size: 187px; }
.abc-tag { font-size: 48px; }
.abc-rise, .abc-drop, .abc-grow, .abc-slide { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-fill-mode: both; transform-box: fill-box; }
.abc-rise { animation-name: abcRise; }
.abc-drop { animation-name: abcDrop; animation-duration: .55s; }
.abc-grow { animation-name: abcGrow; animation-duration: .45s; transform-origin: center; }
.abc-slide { animation-name: abcSlide; animation-duration: .6s; }
.abc-wave { animation: abcWave 1.8s ease-in-out infinite; }
.abc-wave .abc-tile { animation: abcWaveFill 1.8s ease-in-out infinite; }
@keyframes abcRise { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes abcDrop { from { transform: translateY(-34px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes abcWave { 0%, 45%, 100% { transform: translateY(0); } 20% { transform: translateY(-7px); } }
@keyframes abcWaveFill { 0%, 45%, 100% { fill: #02237b; } 20% { fill: #3d5aa8; } }
@keyframes abcGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes abcSlide { from { transform: translateX(-36px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.abc-welcome { position: fixed; inset: 0; z-index: 2000; background: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; transition: opacity .35s ease; cursor: pointer; }
.abc-welcome.leaving { opacity: 0; pointer-events: none; }
.abc-welcome-logo { width: min(560px, 80vw); }

.abc-spinner { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-2); font: 12.5px var(--font); }
.abc-spinner svg { width: 72px; height: auto; overflow: visible; }
.abc-spinner .abc-tile { fill: var(--navy); }
.loading-block { display: flex; justify-content: center; padding: 15vh 0; }

@media (prefers-reduced-motion: reduce) {
  .abc-rise, .abc-drop, .abc-grow, .abc-slide, .abc-wave, .abc-wave .abc-tile { animation: none !important; }
}

/* ---------- Quote status pills (projects list and editor header) ---------- */
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.warning { background: var(--amber-bg); color: var(--amber); }
.status-pill.orange { background: var(--orange-tint); color: var(--orange-text); }
.status-pill.success { background: var(--green-bg); color: var(--green); }
.status-pill.navy { background: var(--navy-tint); color: var(--navy); }
.status-pill.muted { background: var(--surface-2); color: var(--text-3); }