/* public/css/site.css */

:root{
  --ink:#0f172a;
  --sub:#475569;
  --muted:#e2e8f0;
  --bg:#f8fafc;
  --brand:#2563eb;
  --brand-2:#1d4ed8;
  --ok:#059669;
  --radius:14px;
  --shadow:0 8px 24px rgba(2,6,23,.06);
}

body.dark-mode{
  --ink:#e2e8f0;
  --sub:#94a3b8;
  --muted:#1f2937;
  --bg:#0b1220;
  --brand:#60a5fa;
  --brand-2:#3b82f6;
  --ok:#34d399;
  --shadow:0 12px 30px rgba(0,0,0,.35);
}

/* Global resets */
*{box-sizing:border-box}
html,body{height:100%}
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg),#fff 45%);
  padding-left: 0px;
  padding-right: 0px;
  overflow-y: auto;
  scrollbar-width: none;
}
body.dark-mode{
  background:linear-gradient(180deg,#0b1220,#0f172a 45%);
}
main{flex:1; width:100%;}
body::-webkit-scrollbar{display:none;}

.auth-wrapper {
  max-width: 520px;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

.no-scroll {
  overflow-y: hidden;
}

/* Layout */
.container {
  max-width: 1450px;   /* wider desktop */
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* Map + search */
.map-grid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "map"
    "search";
  gap:16px;
  align-items:stretch;
}
.map-card{grid-area:map;}
.search-card{grid-area:search;}
.map-grid .card{height:100%; display:flex;}
.map-grid .card .body{flex:1;}
.filters{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}
.filters input,
.filters select,
.fancy-select{
  padding:12px 12px;
  border:1px solid #dbeafe;
  background:#f8fbff;
  border-radius:10px;
  font-size:15px;
  width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px rgba(37,99,235,.08);
  color:var(--ink);
}
body.dark-mode .filters input,
body.dark-mode .filters select,
body.dark-mode .fancy-select{
  border:1px solid #1f2937;
  background:#0f172a;
  color:#e2e8f0;
  box-shadow:none;
}
.fancy-select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg fill='none' stroke='%23677' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  cursor:pointer;
}
.no-arrow{
  background-image:none !important;
  background-size:0 !important;
}
.fancy-select:focus{
  outline:2px solid rgba(37,99,235,.4);
  border-color:var(--brand);
  background:#fff;
}
body.dark-mode .fancy-select:focus{
  outline:2px solid rgba(96,165,250,.4);
  border-color:var(--brand);
  background:#0f172a;
}
.results-block{margin-top:18px;}
.results-header{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:10px; gap:10px; flex-wrap:wrap;}
.sort-control{display:flex; align-items:center; gap:8px;}
.sort-control .fancy-select{min-width:150px;}
.result-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;}
.result-card .body{display:flex; flex-direction:column; gap:8px; height:100%;}
.result-card .cta{margin-top:auto;}
.tags{display:flex; gap:8px; flex-wrap:wrap;}
.tag{display:inline-flex; align-items:center; padding:6px 10px; background:#eef2ff; color:#1e293b; border-radius:999px; font-size:12px;}
body.dark-mode .tag{background:#1f2937; color:#e2e8f0;}
.result-meta{display:flex; flex-direction:column; gap:8px;}
.meta-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px;}
.meta-item{padding:10px 12px; border:1px solid var(--muted); border-radius:10px; background:#f8fafc;}
.meta-label{font-size:12px; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.3px;}
.meta-value{font-size:14px; color:var(--ink); margin-top:2px;}
body.dark-mode .meta-item{background:#0f172a; border-color:#1f2937;}
body.dark-mode .meta-label{color:#94a3b8;}
body.dark-mode .meta-value{color:#e2e8f0;}
.print-list{display:flex; flex-direction:column; gap:10px;}
.print-row{padding:14px 16px; border:1px solid var(--muted); border-radius:12px; background:#f8fafc;}
.print-row-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.print-title{font-weight:800; margin:0; font-size:18px; line-height:1.2;}
.print-meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; margin-top:8px;}
.print-chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f1f5f9; color:#0f172a; font-size:12px;}
.print-quote{font-size:13px; color:var(--sub);}
.status-track{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px; margin-top:10px;}
.status-step{position:relative; padding:9px 10px 9px 12px; border:1px solid var(--muted); border-radius:10px; background:#f8fafc; font-size:13px; color:var(--sub); display:flex; align-items:center; gap:8px;}
.status-step .dot{width:10px; height:10px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 2px rgba(148,163,184,.2);}
.status-step.done{background:#ecfdf3; border-color:#bbf7d0; color:#166534;}
.status-step.done .dot{background:#16a34a; box-shadow:0 0 0 2px rgba(22,163,74,.2);}
.status-step.active{background:#e0f2fe; border-color:#bfdbfe; color:#0f172a; font-weight:700;}
.status-step.active .dot{background:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.25);}
body.dark-mode .print-row{border-color:#1f2937; background:#0f172a;}
body.dark-mode .print-chip{background:#1f2937; color:#e2e8f0;}
body.dark-mode .status-step{background:#0f172a; border-color:#1f2937; color:#94a3b8;}
body.dark-mode .status-step .dot{background:#334155; box-shadow:0 0 0 2px rgba(51,65,85,.35);}
body.dark-mode .status-step.done{background:#0f172a; border-color:#1f2937; color:#22c55e;}
body.dark-mode .status-step.done .dot{background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.25);}
body.dark-mode .status-step.active{background:#111827; border-color:#1f2937; color:#e2e8f0;}
body.dark-mode .status-step.active .dot{background:#60a5fa; box-shadow:0 0 0 2px rgba(96,165,250,.25);}
.print-actions{margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.broadcast-pill{display:inline-flex; align-items:center; padding:8px 10px; border-radius:999px; background:transparent; color:#f97316; font-size:14px; font-weight:600;}
body.dark-mode .broadcast-pill{color:#fb923c;}
.queue-row{display:grid; grid-template-columns:1.4fr 1fr; gap:10px; align-items:flex-start; padding:10px 0;}
.queue-meta{min-width:200px;}
.queue-actions{text-align:right; min-width:180px; display:flex; flex-direction:column; gap:6px;}
/* Jobs needing quotes list */
.quote-table{display:flex; flex-direction:column;}
.quote-row{display:grid; grid-template-columns:1.6fr 1fr; gap:12px; padding:12px 0; border-top:1px solid var(--muted); align-items:start;}
.quote-row:first-child{border-top:0;}
.quote-meta{min-width:200px;}
.quote-aside{text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end;}
.quote-aside .status{align-self:flex-end;}
.quote-aside .chip{align-self:flex-end;}
@media(max-width:720px){
  .quote-row{grid-template-columns:1fr; align-items:flex-start;}
  .quote-aside{text-align:left; align-items:flex-start;}
  .quote-aside .status{align-self:flex-start;}
  .quote-aside .chip{align-self:flex-start;}
}
@media(max-width:720px){
  .queue-row{grid-template-columns:1fr; border-top:1px solid var(--muted);}
  .queue-row:first-child{border-top:0;}
  .queue-actions{text-align:left; align-items:flex-start;}
}
.chip.muted{background:#e2e8f0; color:#0f172a;}
.chip.primary{background:#dbeafe; color:#0f172a;}
body.dark-mode .chip.muted{background:#1f2937; color:#e2e8f0;}
body.dark-mode .chip.primary{background:#2563eb; color:#fff;}

/* Hero */
.hero{padding:0px 0 18px;}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "text"
    "how";
  gap:18px;
  align-items:stretch;
}
.hero-card .body{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
}
.hero-card{display:flex; height:100%;}
.hero-text{grid-area:text;}
.hero-how{grid-area:how;}
.hero-actions{margin-top:auto;}
.h1{font-size:clamp(32px, 3vw + 16px, 46px); line-height:1.05; margin:0}
.lead{color:var(--sub); font-size:18px; margin:0}
.chips{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; background:#f1f5f9; color:#0f172a; border-radius:999px; padding:6px 10px; font-size:12px}
body.dark-mode .chip{background:#1f2937; color:#e2e8f0;}
.chip-toggle input{display:none;}
.chip-toggle{cursor:pointer; user-select:none;}
.chip-toggle{border:1px solid transparent;}
.chip-toggle.active{background:var(--brand) !important; color:#fff !important; border-color:var(--brand);}
.chip-toggle:not(.active){border-color:var(--muted);}
body.dark-mode .chip-toggle:not(.active){border-color:#1f2937;}
.eyebrow{color:var(--brand); font-weight:700; font-size:12px; letter-spacing:.4px; text-transform:uppercase}
.cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.printer-chip{text-decoration:none; color:inherit; display:inline-flex; align-items:center;}
.pill-success{background:#ecfdf3; color:#166534; border:1px solid #bbf7d0;}

/* Links + buttons */
a{color:var(--brand); text-decoration:none}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  background:var(--brand);
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  border:0;
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--shadow);
  text-decoration:none;
}

.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--muted);
}

.btn.secondary{
  background:#eef2ff;
  color:#3730a3;
  box-shadow:none;
}
body.dark-mode .btn{box-shadow:none;}

/* Header */
header{
  position:sticky;
  top:0;
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.75);
  border-bottom:1px solid var(--muted);
  z-index:9999;
  padding-left: 6px;
  padding-right: 6px;
}
body.dark-mode header{background:rgba(15,23,42,.85); border-color:#1f2937;}

/* Ensure map layers sit below the header */
.leaflet-container{z-index:0;}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}

.brand-badge{
  font-size:12px;
  padding:2px 8px;
  background:#eef2ff;
  color:#3730a3;
  border-radius:999px;
}

/* Cards */
.card{
  background:#fff;
  border:1px solid var(--muted);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:16px;
}

.card .body{padding:20px}
body.dark-mode .card{background:#0f172a; border-color:#1f2937;}

main.container{padding:40px 0;}

/* Form fields (signin, signup later, dashboards, settings) */
.field{display:flex; flex-direction:column; gap:6px; margin-top:14px}
label{font-weight:600; font-size:14px}
input{
  padding:12px 12px;
  border:1px solid var(--muted);
  border-radius:10px;
  font-size:15px;
  background:#fff;
}
textarea{
  padding:12px 12px;
  border:1px solid var(--muted);
  border-radius:10px;
  font-size:15px;
  background:#fff;
  color:var(--ink);
  width:100%;
}
input.no-spin{
  -moz-appearance:textfield;
}
input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
body.dark-mode input{
  border-color:#1f2937;
  background:#0f172a;
  color:#e2e8f0;
}
body.dark-mode textarea{
  border-color:#1f2937;
  background:#0f172a;
  color:#e2e8f0;
}

.small{color:var(--sub); font-size:14px}
.pill{
  background:#f8fafc;
  border:1px solid var(--muted);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}
body.dark-mode .pill{background:#111827; border-color:#1f2937; color:var(--ink);}
.pill-soft{
  padding:6px 10px;
  font-size:12px;
  border-radius:999px;
  border:1px solid transparent;
}
.pill-soft[data-tone="blue"]{background:#eff6ff; border-color:#dbeafe; color:#0f172a;}
.pill-soft[data-tone="green"]{background:#ecfdf3; border-color:#bbf7d0; color:#14532d;}
.pill-soft[data-tone="muted"]{background:#f8fafc; border-color:#e2e8f0; color:#0f172a;}
body.dark-mode .pill-soft[data-tone="blue"]{background:#1e293b; border-color:#334155; color:#e2e8f0;}
body.dark-mode .pill-soft[data-tone="green"]{background:#1d2a23; border-color:#1f5135; color:#bbf7d0;}
body.dark-mode .pill-soft[data-tone="muted"]{background:#1f2937; border-color:#273449; color:#e2e8f0;}

.split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}

.choice ul{margin:12px 0; padding-left:18px}
.choice li{margin:6px 0}
.choice .btn{width:100%}

.page-pad{
  padding-left:24px;
  padding-right:24px;
}
@media(max-width:960px){
  .page-pad{
    padding-left:16px;
    padding-right:16px;
  }
}

/* Footer */
footer{
  border-top:1px solid var(--muted);
  padding:28px 0;
  color:var(--sub);
}

/* Mobile tweaks */
@media(max-width:960px){
  .container{padding:0 16px}
  .map-grid{grid-template-columns:1fr; gap:12px;}
  .map-grid{grid-template-columns:1fr}
  .result-card .cta{flex-direction:column}
  .result-grid{grid-template-columns:1fr}
}

@media(min-width:960px){
  .hero-grid {
    grid-template-areas:"text how";
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
  }

  .map-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    grid-template-areas: "search map";
  }
  .result-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
}