/* ====================== core.css — SwiftGoo UI (refined & consistent) ======================
   Drop-in safe: keeps .header/.card/.btn/.pill/.status-pill, adds .app shell.
   This version also: pins header content INSIDE the rounded box, scales pills,
   and adds a subtle “aurora” sweep for a premium feel.
   ===================================================================== */

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body,h1,h2,h3,h4,p,ul,ol,figure{margin:0}
img{display:block;max-width:100%}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:2px;border-radius:8px}

/* ====================== Theme tokens ====================== */
:root {
  color-scheme: dark;

  /* Brand accent (keep your green) */
  --accent:   #22c55e;
  --accent-2: #1ea453;
  --accent-3: #2dd4bf;

  /* Text colors — slightly brighter for better readability */
  --fg:       #f3f7fa;
  --muted:    #b8c3cc;

  /* Surfaces — lighten all just a bit */
  --bg:       #121b23;   /* main page background */
  --bg-2:     #0f181f;   /* gradient end */
  --surface:  #16212b;   /* card & panels */
  --surface-2:#1a2631;
  --card:     #1b2833;

  /* Lines — slightly brighter for clearer separation */
  --line:     rgba(255,255,255,.14);
  --line-2:   rgba(255,255,255,.22);

  /* Radii / motion / font */
  --r: 14px;
  --r-lg: 14px;
  --r-xl: 22px;
  --tap: 48px;
  --space: 12px;
  --easing: cubic-bezier(.22,1,.36,1);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;

  /* Status colors (unchanged) */
  --st-open-bg: #132a18;
  --st-open-fg: #7ce3a1;
  --st-open-br: #1e3a22;
  --st-assigned-bg: #15253b;
  --st-assigned-fg: #79b0ff;
  --st-assigned-br: #1f3a6e;
  --st-rfp-bg: #2a2240;
  --st-rfp-fg: #c0a7ff;
  --st-rfp-br: #3a2e64;
  --st-picked-bg: #302035;
  --st-picked-fg: #ff93d3;
  --st-picked-br: #532449;
  --st-delivered-bg: #1f2d2e;
  --st-delivered-fg: #93e5e1;
  --st-delivered-br: #264b4a;
  --st-done-bg: #132a18;
  --st-done-fg: #7ce3a1;
  --st-done-br: #1e3a22;
  --st-cancel-bg: #3a1b1b;
  --st-cancel-fg: #ff8a8a;
  --st-cancel-br: #552323;
}


/* ====================== Base ====================== */
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--fg);
  line-height:1.55; letter-spacing:.2px;
  min-height:100vh; -webkit-tap-highlight-color:transparent; overscroll-behavior:none;
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(34,197,94,.08), transparent 60%),
    radial-gradient(800px 520px at 110% 20%, rgba(34,197,94,.06), transparent 55%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}
@supports(height:100dvh){body{min-height:100dvh}}
.page-has-bg{background:inherit}
.overlay{position:fixed;inset:0;pointer-events:none;background:radial-gradient(600px 420px at -10% 20%,rgba(34,197,94,.05),transparent 60%);z-index:-1}
header,main,footer{position:relative;z-index:1}

/* ====================== App Shell ====================== */
.app{min-height:100vh;display:grid;grid-template-rows:64px 1fr}
.app-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,rgba(18,27,53,.95),rgba(18,27,53,.85));
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:0 18px;
}
/* Bigger brand + logo */
.app-header .brand{display:flex;align-items:center;gap:12px;font-weight:900}
.app-header .brand img{width:40px;height:40px}
.app-header .brand span{
  font-size:1.9rem;letter-spacing:-.02em;
  background:linear-gradient(90deg,#4ee3ff 0%,#33b1ff 50%,#00e0ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.app-header .grow{flex:1}
.app-header .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Chunkier header pills/buttons */
.app-header .pill,.app-header .btn{font-size:1.05rem;padding:10px 18px;border-radius:999px}

.app-main{display:grid;grid-template-columns:260px minmax(0,1fr);gap:18px;padding:18px}
@media (max-width:1024px){.app-main{grid-template-columns:1fr}}

.sidebar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px;position:sticky;top:80px;height:fit-content
}
.sidebar .section{padding:8px}
.nav{display:grid;gap:4px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent}
.nav a:hover{background:#0f1d3b;border-color:var(--line)}
.nav a.active{background:#11224a;border-color:var(--line-2)}

.content{min-width:0}
.section{padding:18px 0 22px;display:grid;gap:16px}

/* ====================== Width/typography helpers ====================== */
.container{width:min(1180px,94vw);margin:0 auto;padding-inline:14px}
@media (min-width:720px){.container{padding-inline:24px}}
.section h1{font-size:clamp(28px,3vw,40px);font-weight:900;letter-spacing:-.02em}
.section .sub,.section .lead{color:var(--muted);margin-top:6px}
.grid{display:grid;gap:12px}.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-2,.g-3{grid-template-columns:1fr}}

/* ====================== Header (compat) ====================== */
.header{
  position:sticky;top:0;z-index:49;
  background:linear-gradient(180deg,rgba(7,14,16,.78),rgba(7,14,16,.50) 60%,transparent);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.02) blur(10px);-webkit-backdrop-filter:saturate(1.02) blur(10px)
}

/* CONTAINED inner header box + “alive” sweep */
.header .container.nav{
  width:min(1280px,94vw);
  margin:0 auto;
  padding:16px 18px;
  gap:16px;

  /* keep everything INSIDE the rounded box */
  min-height:84px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,16,21,.72),rgba(10,16,21,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 36px rgba(0,0,0,.35);

  display:flex; align-items:center; justify-content:space-between;
  position:relative; /* for aurora */
}
.header .container.nav::after{
  content:"";
  position:absolute; inset:-30% -10% auto -10%; height:140%;
  background:
    linear-gradient(120deg,transparent 20%,rgba(48,232,161,.22) 45%,rgba(99,198,255,.22) 55%,transparent 80%);
  filter:blur(28px) saturate(1.1); mix-blend-mode:screen;
  opacity:.32; pointer-events:none;
  animation:headerSweep 9s linear infinite;
}
@keyframes headerSweep{
  0%{transform:translateX(-12%) rotate(2deg)}
  50%{transform:translateX(12%) rotate(-2deg)}
  100%{transform:translateX(-12%) rotate(2deg)}
}

/* brand: bigger & bolder with soft glow that stays clipped */
.logo{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.2px;position:relative;z-index:1}
.logo img{width:44px;height:44px;border-radius:12px}
.logo span{
  font-size:2rem;font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(90deg,#9ae6ff 0%,#63c6ff 50%,#30e8a1 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.logo::after{
  content:""; position:absolute; left:-24px; top:-24px; width:140px; height:140px;
  background:radial-gradient(60px 60px at 36% 44%, rgba(48,232,161,.35), transparent 60%);
  filter:blur(14px); opacity:.8; pointer-events:none;
}

#navAuth{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#navAuth .hello{ font-size:1.06rem; color:var(--fg); opacity:.92; }

/* pill buttons: larger, rounder, nicer hover/focus */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px; padding:0 18px; font-size:1.02rem;
  border-radius:999px; border:1px solid var(--line-2);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  color:var(--fg); font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .08s ease,background .18s var(--easing),border-color .18s var(--easing),box-shadow .18s var(--easing)
}
.pill:hover{
  transform:translateY(-1px);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border-color:color-mix(in srgb, var(--line-2) 80%, transparent);
  box-shadow:0 8px 20px rgba(0,0,0,.25)
}
.pill:active{transform:translateY(0)}
.pill.is-active{
  background:linear-gradient(180deg,#0f223f,#0b1a31);
  border-color:color-mix(in srgb,var(--accent) 30%, var(--line-2))
}

/* role switch group: keep green CTA distinct */
.pill.role{
  background:linear-gradient(180deg,#36d87a,#22c55e);
  color:#072214; border-color:#1ea453; font-weight:900;
}
.pill.role:hover{ background:linear-gradient(180deg,#41e087,#27cf67) }

/* Mobile bottom nav (unchanged) */
.mobile-nav{position:sticky;bottom:0;z-index:40;background:var(--surface-2);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}
.mobile-nav a{display:grid;place-items:center;padding:10px 6px;min-height:50px;font-size:.9rem}

/* ====================== Cards & Panels ====================== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.card.pad{padding:16px}
.card.hoverable{transition:transform .08s ease,box-shadow .08s ease}
.card.hoverable:active{transform:scale(.99)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}

/* ====================== Buttons ====================== */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--accent);color:#06160f;font-weight:700;letter-spacing:.2px;
  border:1px solid color-mix(in srgb,var(--accent) 55%,black);
  border-radius:12px;padding:11px 16px;
  transition:background .15s var(--easing),transform .06s ease,border-color .15s var(--easing)
}
.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.secondary{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.ghost{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.btn.small{padding:8px 12px;border-radius:10px;font-weight:600}
.btn.block{width:100%}
.btn.warn{background:#f59e0b;border-color:#b45309;color:#1a1305}
.btn.danger{background:#ef4444;border-color:#b91c1c;color:#fff}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* ====================== Forms ====================== */
label span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
input,select,textarea{
  width:100%;min-height:44px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:12px;
  transition:border-color .15s var(--easing),background .15s var(--easing),box-shadow .15s var(--easing)
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
input:focus,select:focus,textarea:focus{
  border-color:color-mix(in srgb,var(--accent) 50%,var(--line));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent);
  background:color-mix(in srgb,var(--surface) 98%,transparent)
}
textarea{min-height:110px;resize:vertical}
.form-row{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.form-row{grid-template-columns:1fr}}
.input-inline{display:flex;gap:10px;align-items:center}
.input-inline>*{flex:1}
.input-lg{padding:13px 14px;border-radius:14px;font-size:15px}
.select-lg{padding:12px;border-radius:14px;font-size:15px}

/* Prevent filter inputs from overflowing their tile */
.market-layout .filters-card input,
.market-layout .filters-card select{min-width:0;width:100%;flex:1 1 auto}

/* ====================== Job Card (shared) ====================== */
.job-card{display:grid;grid-template-columns:1fr auto;gap:14px;padding:16px;align-items:center;border-radius:22px}
.job-card .title{font-weight:800;letter-spacing:.2px}
.job-card .muted{color:var(--muted);font-size:14px}
.job-thumb{width:96px;height:70px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.job-head{display:flex;gap:10px;align-items:center;justify-content:space-between}
.job-route{font-weight:700;font-size:16px}
.job-meta{display:flex;gap:10px;flex-wrap:wrap}
.job-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Chips & Badges */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip,.badge{
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)
}

/* Status pills (unified) */
.pill.open{background:var(--st-open-bg);color:var(--st-open-fg);border-color:var(--st-open-br)}
.pill.assigned{background:var(--st-assigned-bg);color:var(--st-assigned-fg);border-color:var(--st-assigned-br)}
.pill.ready_for_pickup{background:var(--st-rfp-bg);color:var(--st-rfp-fg);border-color:var(--st-rfp-br)}
.pill.picked_up{background:var(--st-picked-bg);color:var(--st-picked-fg);border-color:var(--st-picked-br)}
.pill.delivered{background:var(--st-delivered-bg);color:var(--st-delivered-fg);border-color:var(--st-delivered-br)}
.pill.done{background:var(--st-done-bg);color:var(--st-done-fg);border-color:var(--st-done-br)}
.pill.cancelled{background:var(--st-cancel-bg);color:var(--st-cancel-fg);border-color:var(--st-cancel-br)}
/* Back-compat */
.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;text-transform:lowercase;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));color:#86efac;background:rgba(34,197,94,.12)}
.status-pill.is-closed{border-color:rgba(239,68,68,.25);color:#fca5a5;background:rgba(239,68,68,.12)}

/* ====================== Tables ====================== */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--line)}
.table th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.3px}

/* ====================== Modal ====================== */
#modalHost{position:fixed;inset:0;display:none;z-index:60}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,8,20,.55)}
.modal{
  position:relative;z-index:1;width:min(900px,94vw);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  margin:8vh auto;overflow:hidden
}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal .title{font-weight:900;letter-spacing:.2px}

/* Key/Value grid */
.kv{display:grid;gap:10px}
.kv-row{display:grid;grid-template-columns:180px 1fr;gap:10px;align-items:start}
.kv-label{color:var(--muted)} .kv-value{color:var(--fg)}
@media (max-width:640px){.kv-row{grid-template-columns:1fr}}

/* Map & Gallery */
.map-box{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--surface) 92%,transparent)}
.map-box iframe{width:100%;height:360px;display:block}
@media (max-width:640px){.map-box iframe{height:280px}}
.grid-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.photo-clip{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:transparent}
.photo-clip img{width:100%;height:120px;object-fit:cover;display:block}
.image-viewer img{max-width:100%;border-radius:12px}

/* ====================== Utilities & Skeletons ====================== */
.row{display:flex;align-items:center}.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column}
.center{text-align:center}
.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mb-16{margin-bottom:16px}
.muted{color:var(--muted)}
.hide-on-mobile{display:block}@media (max-width:700px){.hide-on-mobile{display:none}}
.show-on-mobile{display:none}@media (max-width:700px){.show-on-mobile{display:block}}

.skel{background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);border-radius:var(--r-lg)}
.skel-line{height:12px;border-radius:8px;background:color-mix(in srgb,var(--line) 22%,transparent)}
.skel-thumb{height:100px;border-radius:12px;background:color-mix(in srgb,var(--line) 22%,transparent)}

.empty{text-align:center;padding:48px 16px;border:1px dashed var(--line);border-radius:var(--r-lg);color:var(--muted)}
.empty .btn{margin-top:10px}

.modal__dialog{width:100%;max-width:720px;margin:0;border-radius:0;height:100dvh}
.modal__content{height:100%;display:flex;flex-direction:column}
.modal__body{overflow:auto;-webkit-overflow-scrolling:touch}
#toastHost{padding-bottom:env(safe-area-inset-bottom,0)}

/* Keep hero visuals behind the sticky header */
.mp-hero { position: relative; z-index: 0; }
.app-header { position: sticky; z-index: 1000; }

/* marketplace-only: neutralize legacy header’s inner box & clipping */
.header .container.nav{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important; /* <- the key to stop clipping */
}
.header .container.nav::after{ content: none !important; }

/* stacking */
.header{ z-index: 1200; }
.mp-hero{ z-index: 0; position: relative; }

/* --- Ensure modals sit above sticky header --- */
.header {
  position: sticky;
  top: 0;
  z-index: 1000; /* base header layer */
}

/* modal host and overlay above header */
#modalHost,
#modalHost .modal,
#modalHost .modal-card,
#modalHost .overlay {
  position: fixed;
  inset: 0;
  z-index: 4000; /* higher than header */
}

/* optional: center modal cleanly */
#modalHost .modal-card {
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}