/* OneSol Crew Portal: single-theme dark, brand tokens from the OneSol site.
   Mobile-first: crew flows are phone flows. */

@font-face {
  font-family: "Jost";
  src: url("/static/Jost-VariableWght.woff2") format("woff2-variations"),
       url("/static/Jost-VariableWght.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face { font-family: "Inter"; src: url("/static/Inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/Inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/Inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #050507;
  --surface: #14141A;
  --surface-2: #1C1C24;
  --text: #FFFFFF;
  --muted: #A0A0A8;
  --faint: #8A8A92;
  --border: #2A2A33;
  --accent: #8BD155;
  --accent-ink: #0A1503;
  --signal: #FF3D5A;
  --amber: #E8C15A;
  --font-display: "Futura", "Futura PT", "Jost", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 12px;
  --focus-ring: 0 0 0 3px rgba(139, 209, 85, .35);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font: 15px/1.6 var(--font-body); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; margin: 0 0 .5rem; }
h1 { font-size: 1.7rem; text-transform: uppercase; letter-spacing: .04em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

.eyebrow {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .5rem;
}
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: .85rem; }
.mono { font-family: var(--font-mono); font-size: .85em; }

/* ── Shell ─────────────────────────────────────────────────────────── */
.shell-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 1rem; background: rgba(5, 5, 7, .94);
  padding-top: calc(.55rem + env(safe-area-inset-top));
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
}
.shell-header .logo { flex: none; }
.shell-header .logo img { height: 20px; width: auto; display: block; }
.shell-nav { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.shell-nav a {
  padding: .45rem .7rem; border-radius: 8px; color: var(--muted);
  font-size: .85rem; font-weight: 500; white-space: nowrap;
}
.shell-nav a:hover { color: var(--text); text-decoration: none; background: var(--surface); }
.shell-nav a.active { color: var(--text); background: var(--surface-2); }
.shell-actions { display: flex; align-items: center; gap: .15rem; margin-left: auto; flex: none; }

/* Icon buttons: 44px hit area, per Apple's minimum touch target. */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: none; border: 0;
  border-radius: 10px; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { color: var(--text); background: var(--surface); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .dot {
  position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px;
  background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center; padding: 0 4px;
}

/* Popovers (notification bell, account menu) */
.popover {
  position: fixed; right: .75rem; top: calc(56px + env(safe-area-inset-top));
  width: min(340px, calc(100vw - 1.5rem));
  max-height: 70vh; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); z-index: 60;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.popover .item, .popover > a { display: block; padding: .8rem .9rem; border-bottom: 1px solid var(--border); font-size: .88rem; }
.popover .item:last-child, .popover > a:last-child { border-bottom: 0; }
.popover .item.unread { border-left: 2px solid var(--accent); }
.popover .when { color: var(--faint); font-size: .72rem; }
.popover > a { color: var(--text); }
.popover > a:hover { background: var(--surface-2); text-decoration: none; }
.popover-head { padding: .8rem .9rem; border-bottom: 1px solid var(--border); font-size: .85rem; }

/* Staff drawer (mobile): the staff nav is 11 items and cannot fit a tab bar. */
.drawer-toggle { display: none; }
.drawer-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 70; }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 82vw); z-index: 71;
  background: var(--surface); border-right: 1px solid var(--border);
  overflow-y: auto; padding-top: env(safe-area-inset-top);
}
.drawer a {
  display: block; padding: .85rem 1.1rem; color: var(--muted);
  border-bottom: 1px solid rgba(42, 42, 51, .5); font-size: .92rem;
}
.drawer a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.drawer a.active { color: var(--accent); border-left: 3px solid var(--accent); padding-left: calc(1.1rem - 3px); }

/* Crew bottom tab bar: thumb-reachable, always visible, nothing clipped. */
.tabbar { display: none; }

main.container { max-width: 1060px; margin: 0 auto; padding: 1.4rem 1rem 4rem; }
main.container.narrow { max-width: 640px; }

/* ── Cards / panels ───────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem;
}
.card.tight { padding: .8rem .9rem; }
.card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .85rem .95rem;
}
.stat .n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.stat .l { color: var(--muted); font-size: .76rem; margin-top: .15rem; }
.stat.warn .n { color: var(--amber); }
.stat.bad .n { color: var(--signal); }
.stat.good .n { color: var(--accent); }
.stat a { color: inherit; text-decoration: none; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1.15rem; border-radius: 10px;
  font: 600 .9rem/1 var(--font-body); cursor: pointer; border: 1px solid transparent;
  text-decoration: none !important; transition: filter .12s, background .12s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: transparent; color: var(--signal); border-color: rgba(255, 61, 90, .4); }
.btn-danger:hover { background: rgba(255, 61, 90, .1); }
.btn-sm { min-height: 34px; padding: .3rem .75rem; font-size: .8rem; border-radius: 8px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ── Forms ────────────────────────────────────────────────────────── */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.field .hint { font-size: .74rem; color: var(--faint); margin-top: .3rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="datetime-local"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .8rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font: 400 16px/1.4 var(--font-body); /* 16px stops iOS zoom-on-focus */
}
textarea { min-height: 110px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.check { display: flex; align-items: flex-start; gap: .6rem; margin: .5rem 0; font-size: .9rem; }
.check input { width: 20px; height: 20px; margin-top: .1rem; accent-color: var(--accent); flex: none; }
/* A locked (approved) profile still has to show clearly WHICH option the crew
   member chose. Browsers grey disabled controls out, so lift the checked ones
   back to full contrast and dim only the unchosen options. */
.check input:disabled { opacity: .4; }
.check input:disabled:checked { opacity: 1; }
input:disabled, select:disabled, textarea:disabled { color: var(--text); opacity: 1; -webkit-text-fill-color: var(--text); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .4rem; }
.form-grid { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

.code-input {
  font-family: var(--font-mono); font-size: 1.8rem !important; letter-spacing: .45em;
  text-align: center; text-transform: none;
}

/* ── Status badges ────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  font: 600 .68rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.badge.draft { color: var(--muted); }
.badge.pending_review, .badge.queued, .badge.in_flight, .badge.sent_pack, .badge.prepared { color: var(--amber); border-color: rgba(232, 193, 90, .45); }
.badge.changes_required, .badge.failed, .badge.attention { color: var(--amber); border-color: rgba(232, 193, 90, .45); background: rgba(232, 193, 90, .08); }
.badge.approved, .badge.done, .badge.sent, .badge.signed, .badge.published, .badge.synced, .badge.active, .badge.ok, .badge.clean { color: var(--accent); border-color: rgba(139, 209, 85, .45); }
.badge.rejected, .badge.dead, .badge.declined, .badge.expired, .badge.error, .badge.inactive { color: var(--signal); border-color: rgba(255, 61, 90, .4); }
.badge.superseded, .badge.archived, .badge.viewed, .badge.staged { color: var(--faint); }

/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.data th {
  text-align: left; padding: .6rem .8rem; color: var(--faint);
  font: 500 .68rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: .6rem .8rem; border-bottom: 1px solid rgba(42, 42, 51, .55); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: rgba(28, 28, 36, .5); }

/* ── Alerts / flash ───────────────────────────────────────────────── */
.alert { border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .88rem; border: 1px solid; }
.alert-error { border-color: rgba(255, 61, 90, .45); background: rgba(255, 61, 90, .08); color: #ffb3c0; }
.alert-ok { border-color: rgba(139, 209, 85, .45); background: rgba(139, 209, 85, .08); color: #cdeab2; }
.alert-info { border-color: rgba(232, 193, 90, .4); background: rgba(232, 193, 90, .07); color: #f0dda9; }
.alert ul { margin: .3rem 0 0 1.1rem; padding: 0; }

/* ── Upload tiles ─────────────────────────────────────────────────── */
.upload-row { display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 560px) { .upload-row.two { grid-template-columns: 1fr 1fr; } }
.upload-tile {
  border: 1.5px dashed var(--border); border-radius: var(--radius);
  padding: 1rem; text-align: center; background: var(--surface-2);
}
.upload-tile.done { border-style: solid; border-color: rgba(139, 209, 85, .5); }
.upload-tile img { max-width: 100%; max-height: 190px; border-radius: 8px; display: block; margin: 0 auto .6rem; }
.upload-tile .progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: .6rem; display: none; }
.upload-tile .progress .bar { height: 100%; width: 0%; background: var(--accent); transition: width .15s; }
.upload-tile .err { color: var(--signal); font-size: .8rem; margin-top: .5rem; }

/* ── History timeline ─────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: .5rem 0 .5rem 1.1rem; border-left: 2px solid var(--border); position: relative; font-size: .84rem; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: .95rem; width: 8px; height: 8px;
  border-radius: 50%; background: var(--border);
}
.timeline li.approved::before, .timeline li.signed::before { background: var(--accent); }
.timeline li.changes_required::before, .timeline li.pending_review::before { background: var(--amber); }
.timeline li.rejected::before, .timeline li.expired::before, .timeline li.declined::before { background: var(--signal); }
.timeline .who { color: var(--faint); font-size: .74rem; }

/* ── Signing ──────────────────────────────────────────────────────── */
.doc-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.doc-item:last-child { border-bottom: 0; }

/* ── Login ────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.login-card { width: 100%; max-width: 400px; }
.login-card .logo { display: block; margin: 0 auto 1.6rem; height: 30px; width: auto; }
.login-toggle { text-align: center; margin-top: 1.2rem; font-size: .8rem; color: var(--faint); }

/* ── File inputs ──────────────────────────────────────────────────── */
/* The native control renders as a tiny grey button that reads as broken on a
   dark theme. Style the button half and give it a real touch target. */
input[type="file"] {
  width: 100%; font: 400 .88rem/1.4 var(--font-body); color: var(--muted);
}
input[type="file"]::file-selector-button {
  margin-right: .75rem; min-height: 40px; padding: .45rem 1rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font: 600 .85rem/1 var(--font-body); cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--border); }

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 780px) {
  /* The inline nav is replaced by the tab bar (crew) or drawer (staff), so
     nothing is ever cut off the right edge. */
  .shell-nav { display: none; }
  .drawer-toggle { display: inline-flex; }
  .shell-header { gap: .35rem; }

  main.container { padding: 1rem .8rem 1.6rem; }
  body.has-tabbar main.container {
    /* Clear the fixed tab bar plus the iPhone home indicator. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.02rem; }
  .eyebrow { font-size: .62rem; letter-spacing: .18em; margin-bottom: .3rem; }
  .card { padding: .9rem .95rem; margin-bottom: .8rem; border-radius: 11px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .9rem; }
  .stat { padding: .7rem .8rem; }
  .stat .n { font-size: 1.45rem; }
  .field { margin-bottom: .85rem; }

  /* Buttons go full width and stack, so nothing is a cramped half-target. */
  .btn { width: 100%; }
  .btn-sm, .row .btn-sm { width: auto; }
  .row > form { width: 100%; }
  .row > form > .btn { width: 100%; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(5, 5, 7, .96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .18rem; padding: .5rem .15rem .45rem; min-height: 56px;
    color: var(--faint); font-size: .64rem; font-weight: 600;
    letter-spacing: .02em; text-decoration: none;
  }
  .tabbar a svg { width: 21px; height: 21px; }
  .tabbar a.active { color: var(--accent); }
  .tabbar a:hover { text-decoration: none; }

  /* Tables become label/value stacks: a 6-column grid cannot work at 390px,
     and horizontal scrolling inside a card is easy to miss entirely. */
  table.data.stack, table.data.stack thead, table.data.stack tbody,
  table.data.stack tr, table.data.stack td { display: block; width: 100%; }
  table.data.stack thead { display: none; }
  table.data.stack tr {
    border: 1px solid var(--border); border-radius: 10px;
    padding: .6rem .75rem; margin-bottom: .55rem; background: var(--surface-2);
  }
  table.data.stack tr:hover td { background: none; }
  table.data.stack td {
    border: 0; padding: .22rem 0; display: flex; gap: .75rem;
    align-items: baseline; justify-content: space-between;
  }
  table.data.stack td::before {
    content: attr(data-label); flex: none; color: var(--faint);
    font: 500 .66rem/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  }
  table.data.stack td:empty { display: none; }
  .table-wrap:has(table.stack) { border: 0; background: none; }
}

/* ── Utility ──────────────────────────────────────────────────────── */
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: .6rem; }
.mt { margin-top: 1rem; } .mb0 { margin-bottom: 0; }
.right { text-align: right; }
.hidden { display: none !important; }
.w100 { width: 100%; }
details.reveal { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .9rem; margin-bottom: .6rem; background: var(--surface-2); }
details.reveal summary { cursor: pointer; font-weight: 600; font-size: .88rem; }