/* ─────────────────────────────────────────────────────────────────────────
   APA Crew Tool — single-page app shell
   Palette from a-p-a.net: navy #0c1941 · coral #ff5e5e · sky #64d1ff
                            red #d2232a · line #e8e0e0
   Font: Futura PT (APA Typekit) — Jost is the free local substitute.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --navy:#0c1941; --coral:#ff5e5e; --sky:#64d1ff; --red:#d2232a;
  --line:#e8e0e0; --bg:#ffffff; --bg-alt:#f8f6f6; --ink:#0c1941; --muted:#6b7280;
  --font:'futura-pt','Futura PT','Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --side:248px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { font-family:var(--font); color:var(--ink); background:var(--bg-alt);
  font-size:19px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow:hidden; }
a { color:inherit; text-decoration:none; }

/* ── App shell ────────────────────────────────────────────────────────── */
.app { display:flex; height:100vh; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar { width:var(--side); flex-shrink:0; background:var(--navy); color:#fff;
  display:flex; flex-direction:column; padding:0 0 22px; }
.side-brand { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.side-logo { width:68px; height:68px; border-radius:0; display:block; flex-shrink:0; }
.sb-title { font-weight:700; font-size:21px; line-height:1.1; }
.sb-sub { font-size:16px; color:rgba(255,255,255,.55); }

.side-nav { display:flex; flex-direction:column; gap:4px; margin-top:0; padding:0 16px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px;
  color:rgba(255,255,255,.78); font-weight:500; font-size:19px; transition:all .14s; }
.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-item.active { background:rgba(255,94,94,.16); color:#fff; }
.nav-item.active .ni { fill:var(--coral); }
.nav-item .ni { width:19px; height:19px; fill:rgba(255,255,255,.6); flex-shrink:0; }

.side-foot { margin:auto 16px 4px; padding:14px 0 4px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:4px; }
.sf-phone { font-size:22px; font-weight:700; color:#fff; }
.sf-link { font-size:17px; color:var(--coral); font-weight:600; }
.sf-meta { font-size:15px; color:rgba(255,255,255,.4); margin-top:2px; text-transform:capitalize; }
.sf-logout { font-size:15px; color:rgba(255,255,255,.55); margin-top:10px; align-self:flex-start; }
.sf-logout:hover { color:var(--coral); }

/* ── Main / views ─────────────────────────────────────────────────────── */
.main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); border-radius:0; }
.view { display:none; flex:1; min-height:0; flex-direction:column; }
.view.active { display:flex; }
.view-scroll { flex:1; overflow-y:auto; padding:30px 36px 48px; }

.view-topbar { flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px 36px; border-bottom:1px solid var(--line); background:#fff; }
.vt-title { min-width:0; }
.vt-title h1 { font-size:28px; color:var(--navy); letter-spacing:-.3px; }
.vt-meta { font-size:17px; color:var(--muted); }

/* ── Overview ─────────────────────────────────────────────────────────── */
.view-head h1 { font-size:34px; color:var(--navy); letter-spacing:-.4px; }
.view-head p { color:var(--muted); font-size:20px; margin-top:4px; }

.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:26px 0; }
.stat-tile { background:var(--bg-alt); border:1px solid var(--line); border-radius:14px;
  padding:20px; text-align:center; }
.stat-tile .num { font-size:38px; font-weight:700; color:var(--navy); line-height:1; }
.stat-tile .lbl { font-size:17px; color:var(--muted); margin-top:6px; }

.view-head h1 { max-width:880px; line-height:1.12; }
.view-head .eff { color:var(--coral); font-weight:700; font-size:18px; margin-top:8px; }

/* ── Feature cards (the two main CTAs) ───────────────────────────────── */
.feature-row { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:30px 0 8px; }
.feature-tile { display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:30px 30px 26px; font-family:var(--font); transition:all .16s; }
.feature-tile:hover { border-color:var(--coral); transform:translateY(-3px);
  box-shadow:0 16px 38px rgba(12,25,65,.10); }
.ft-ic { width:60px; height:60px; border-radius:15px; background:#eef7ff; display:grid;
  place-items:center; font-size:30px; color:var(--navy); margin-bottom:18px; }
.feature-tile h3 { font-size:21px; color:var(--navy); margin-bottom:8px; line-height:1.2; }
.feature-tile p { font-size:17px; color:var(--muted); line-height:1.5; }
.ft-cta { margin-top:18px; color:var(--coral); font-weight:700; font-size:17px; }
.feature-tile:hover .ft-cta { text-decoration:underline; }

.action-row { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.action-tile { display:flex; align-items:center; gap:16px; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px;
  font-family:var(--font); transition:all .16s; }
.action-tile:hover { border-color:var(--coral); transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(12,25,65,.08); }
.at-ic { width:48px; height:48px; border-radius:12px; background:#eef7ff; display:grid;
  place-items:center; font-size:26px; color:var(--navy); flex-shrink:0; }
.at-body h3 { font-size:22px; color:var(--navy); }
.at-body p { font-size:18px; color:var(--muted); }
.at-arrow { margin-left:auto; color:var(--coral); font-size:26px; font-weight:700; }

.ov-section { margin-top:38px; }
.eyebrow { color:var(--coral); font-weight:700; font-size:16px; letter-spacing:.8px; text-transform:uppercase; }
.ov-head h2 { font-size:28px; color:var(--navy); margin-top:4px; letter-spacing:-.2px; }
.mini-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.ms { display:flex; gap:12px; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; }
.ms-n { width:30px; height:30px; border-radius:50%; background:var(--coral); color:#fff;
  font-weight:700; display:grid; place-items:center; flex-shrink:0; }
.ms b { color:var(--navy); font-size:19px; }
.ms p { font-size:17px; color:var(--muted); margin-top:3px; }

.doc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:18px; }
.doc-tile { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  font-size:18px; font-weight:600; color:var(--navy); }

/* ── Rates sub-tabs ───────────────────────────────────────────────────── */
.subtabs { flex-shrink:0; display:flex; gap:8px; padding:0 36px; background:#fff;
  border-bottom:1px solid var(--line); }
.subtab { font-family:var(--font); font-size:22px; font-weight:600; color:var(--muted);
  background:none; border:none; padding:18px 28px; cursor:pointer; border-bottom:3px solid transparent;
  margin-bottom:-1px; transition:color .14s; }
.subtab:hover { color:var(--navy); }
.subtab.active { color:var(--navy); border-bottom-color:var(--coral); }

.rtab-wrap { flex:1; min-height:0; }
.rtab { display:none; height:100%; overflow-y:auto; padding:16px 36px 44px; }
.rtab.active { display:block; }

/* ── Rates ────────────────────────────────────────────────────────────── */
.search-wrap { position:relative; width:340px; max-width:46vw; }
.search-wrap input { width:100%; padding:11px 40px 11px 15px; border:2px solid var(--line);
  border-radius:10px; font-family:var(--font); font-size:19px; color:var(--ink);
  outline:none; transition:border-color .15s; background:#fff; }
.search-wrap input:focus { border-color:var(--coral); }
.search-wrap input::placeholder { color:#b6bccb; }
.search-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%);
  color:#c2c8d6; font-size:21px; pointer-events:none; }
.result-count { font-size:17px; color:var(--muted); margin-bottom:14px; min-height:16px; }

.rates-card { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.rc-head { padding:20px 22px 14px; }
.rc-title { font-size:23px; color:var(--navy); font-weight:600; }
.rc-sub { font-size:17px; color:var(--muted); margin-top:3px; }
.table-scroll { overflow-x:auto; }
.rates-table { width:100%; border-collapse:collapse; font-size:18px; }
.rates-table thead th { background:var(--navy); color:#fff; padding:11px 12px; text-align:left;
  font-size:15px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap;
  position:sticky; top:0; z-index:2; }
.rates-table .col-role { min-width:180px; }
.rates-table tbody tr { border-bottom:1px solid #f1f0f0; }
.rates-table tbody tr:hover { background:#fbfaff; }
.rates-table tbody tr.hidden { display:none; }
.rates-table td { padding:10px 12px; vertical-align:middle; }
.role-name { font-weight:600; color:var(--navy); }
.rate-min { color:var(--muted); }
.rate-max { color:var(--navy); font-weight:600; }
.dept-header td { background:var(--bg-alt); font-size:15px; font-weight:700; letter-spacing:.7px;
  text-transform:uppercase; color:var(--coral); padding:8px 12px; }
.ot-badge { display:inline-block; padding:2px 9px; border-radius:12px; font-size:15px; font-weight:700; }
.ot-I { background:#e6f6ff; color:#0a6aa1; }
.ot-II { background:#ffeceb; color:#c0392b; }
.ot-III { background:#e9ecf5; color:var(--navy); }
.ot-na { background:#f1f0f0; color:#9aa0ad; }
.tbl-note { font-size:16px; color:var(--muted); padding:12px 22px 18px; }

.grid-title { font-size:24px; color:var(--navy); margin:34px 0 16px; }
.rules-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:16px; }
.rule-card { background:#fff; border:1px solid var(--line); border-radius:14px;
  border-top:4px solid var(--rc,var(--navy)); padding:18px 20px; }
.rule-title { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.5px; }
/* wrap-safe rows: label left, value right; value drops to its own line if it can't fit */
.rule-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:2px 16px; padding:7px 0; border-bottom:1px solid #f4f3f3; font-size:14.5px; }
.rule-row:last-child { border-bottom:none; }
.rule-lbl { color:var(--muted); min-width:0; }
.rule-val { font-weight:600; color:var(--navy); text-align:right; margin-left:auto; }
.rule-note { font-size:13.5px; color:var(--muted); margin-top:10px; line-height:1.45; }
.alert-box { background:#fff7e6; border:1px solid #ffe2a8; border-radius:12px;
  padding:15px 18px; font-size:17px; color:#6b4e00; line-height:1.6; margin-top:24px; }

/* ── Assistant ────────────────────────────────────────────────────────── */
.btn-clear { background:#fff; border:1px solid var(--line); color:var(--navy); font-family:var(--font);
  font-size:17px; font-weight:600; padding:8px 14px; border-radius:20px; cursor:pointer; white-space:nowrap; }
.btn-clear:hover { border-color:var(--coral); color:var(--coral); }
.chat-area { flex:1; min-height:0; display:flex; flex-direction:column; background:var(--bg-alt); }
#chat-msgs { flex:1; overflow-y:auto; padding:26px 36px; display:flex; flex-direction:column;
  gap:14px; max-width:880px; width:100%; margin:0 auto; }
.chat-bubble { padding:12px 16px; border-radius:16px; max-width:80%; line-height:1.55;
  font-size:18.5px; white-space:pre-wrap; }
.chat-bubble.user { background:var(--navy); color:#fff; align-self:flex-end; border-bottom-right-radius:5px; }
.chat-bubble.ai { background:#fff; color:var(--ink); align-self:flex-start; border:1px solid var(--line);
  border-bottom-left-radius:5px; white-space:normal; }
.chat-bubble.typing { color:#aaa; font-style:italic; }
/* markdown inside AI replies */
.chat-bubble.ai p { margin:0 0 9px; }
.chat-bubble.ai p:last-child, .chat-bubble.ai ul:last-child, .chat-bubble.ai ol:last-child { margin-bottom:0; }
.chat-bubble.ai .md-h { font-size:18.5px; font-weight:700; color:var(--navy); margin:12px 0 6px; }
.chat-bubble.ai > .md-h:first-child { margin-top:0; }
.chat-bubble.ai ul, .chat-bubble.ai ol { margin:6px 0 9px; padding-left:20px; }
.chat-bubble.ai li { margin:3px 0; }
.chat-bubble.ai strong { font-weight:700; color:var(--navy); }
.chat-bubble.ai code { background:#f1f0f0; padding:1px 5px; border-radius:5px; font-size:17px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.chat-bubble.ai a { color:var(--coral); text-decoration:underline; }
.chat-foot { flex-shrink:0; border-top:1px solid var(--line); background:#fff; padding:14px 36px 18px; }
.chat-suggest { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; max-width:880px;
  margin-left:auto; margin-right:auto; }
.chat-suggest button { background:var(--bg-alt); border:1px solid var(--line); color:var(--navy);
  font-family:var(--font); font-size:17px; padding:7px 13px; border-radius:20px; cursor:pointer; }
.chat-suggest button:hover { border-color:var(--coral); color:var(--coral); }
#chat-form { display:flex; gap:10px; align-items:flex-end; max-width:880px; margin:0 auto; }
#chat-input { flex:1; border:1px solid var(--line); border-radius:12px; padding:12px 15px;
  font-family:var(--font); font-size:19px; resize:none; outline:none; max-height:110px; line-height:1.45; }
#chat-input:focus { border-color:var(--coral); }
#chat-send { width:46px; height:46px; flex-shrink:0; background:var(--coral); color:#fff; border:none;
  border-radius:12px; cursor:pointer; display:grid; place-items:center; }
#chat-send:hover { background:#ee4d4d; }
#chat-send:disabled { background:#dcdde3; cursor:default; }
#chat-send svg { width:20px; height:20px; fill:#fff; }

/* ── Assistant: two-pane (conversation list + chat) ───────────────────── */
.assist-wrap { flex:1; min-height:0; display:flex; position:relative; }
.conv-list { width:272px; flex-shrink:0; background:var(--bg-alt); border-right:1px solid var(--line);
  display:flex; flex-direction:column; }
.cl-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 16px 14px; }
.cl-title { font-size:13px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.cl-new { background:var(--navy); color:#fff; border:none; border-radius:18px; font-family:var(--font); flex-shrink:0;
  font-size:14px; font-weight:600; padding:7px 15px; cursor:pointer; transition:background .14s; }
.cl-new:hover { background:var(--coral); }
.cl-items { flex:1; overflow-y:auto; padding:4px 10px 10px; display:flex; flex-direction:column; gap:3px; }
.cl-empty { color:var(--muted); font-size:15px; padding:14px 8px; line-height:1.5; }
.conv-item { display:flex; align-items:center; gap:6px; padding:9px 10px; border-radius:10px; cursor:pointer; }
.conv-item:hover { background:#fff; }
.conv-item.active { background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.ci-main { flex:1; min-width:0; }
.ci-title { font-size:17.5px; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-time { font-size:15px; color:var(--muted); margin-top:1px; }
.ci-actions { display:none; gap:1px; flex-shrink:0; }
.conv-item:hover .ci-actions, .conv-item.active .ci-actions { display:flex; }
.ci-btn { background:none; border:none; cursor:pointer; color:var(--muted); font-size:17px;
  width:24px; height:24px; border-radius:6px; line-height:1; }
.ci-btn:hover { background:var(--bg-alt); color:var(--coral); }
.cl-foot { padding:11px 16px; border-top:1px solid var(--line); font-size:15px; color:var(--muted); }
.chat-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.cl-toggle { display:none; background:none; border:none; font-size:24px; color:var(--navy); cursor:pointer; }

/* ── Mobile bottom nav ────────────────────────────────────────────────── */
.bottom-nav { display:none; }

@media (max-width:820px) {
  .app { height:calc(100vh - 58px); }
  .sidebar { display:none; }
  .bottom-nav { display:flex; position:fixed; bottom:0; left:0; right:0; height:58px; z-index:100;
    background:var(--navy); border-top:1px solid rgba(255,255,255,.1); }
  .bn-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; color:rgba(255,255,255,.6); font-size:15px; font-weight:600; }
  .bn-item svg { width:21px; height:21px; fill:rgba(255,255,255,.6); }
  .bn-item.active { color:#fff; }
  .bn-item.active svg { fill:var(--coral); }

  .view-scroll { padding:20px 16px 32px; }
  .subtabs { padding:0 8px; }
  .subtab { font-size:19px; padding:14px 16px; }
  .rtab { padding:18px 16px 32px; }
  .view-topbar { padding:14px 16px; flex-wrap:wrap; gap:12px; }
  .vt-title h1 { font-size:24px; }
  .search-wrap { width:100%; max-width:100%; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .action-row { grid-template-columns:1fr; }
  .feature-row { grid-template-columns:1fr; }
  .view-head h1 { font-size:25px; }
  .mini-steps { grid-template-columns:1fr; }
  #chat-msgs { padding:18px 16px; }
  .chat-foot { padding:12px 16px 16px; }
  .chat-bubble { max-width:90%; }

  /* conversation list becomes a slide-over drawer */
  .conv-list { position:absolute; z-index:30; top:0; bottom:0; left:0; width:82%; max-width:300px;
    transform:translateX(-100%); transition:transform .2s; box-shadow:6px 0 30px rgba(12,25,65,.25); }
  .conv-list.open { transform:translateX(0); }
  .cl-toggle { display:inline-block; }
}