/* ==========================================================================
   Alchatek Mailer Portal — Styles
   Built on the Alchatek Design System (Visual Style Guide v1)
   Corporate palette: Black #101921 + Red #DA291C + off-white #F4F5F0
   Type: Barlow Condensed (display) + Barlow (UI) — substitutes for Univers
   Square system: radius 0 (max 2px). Flat fills. Minimal shadows. No emoji.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap');

:root {
  /* Brand */
  --alk-black:           #101921;
  --alk-red:             #DA291C;
  --alk-red-dark:        #B31E14;
  --alk-red-darker:      #8E1811;
  --alk-gray:            #757982;
  --alk-gray-light:      #B2B4BE;
  --alk-gray-ultralight: #E8E9EC;
  --alk-white:           #F4F5F0;
  --alk-pure-white:      #FFFFFF;
  --alk-black-90:        #272E35;
  --alk-black-80:        #3E444A;
  --alk-gray-70:         #4A4D54;

  /* Division accents (used only as small tags) */
  --alk-leakseal:        #DA291C;
  --alk-geotech:         #603D20;
  --alk-seawall:         #0047BB;

  /* Semantic */
  --fg-1:   var(--alk-black);
  --fg-2:   var(--alk-gray-70);
  --fg-3:   var(--alk-gray);
  --fg-4:   var(--alk-gray-light);
  --bg-1:   var(--alk-pure-white);
  --bg-2:   var(--alk-white);
  --bg-3:   var(--alk-gray-ultralight);
  --border-1: #D7D9DE;
  --border-2: var(--alk-gray-light);

  /* Status colors — kept muted + flat to fit the industrial system */
  --status-green:    #1F7A4D;
  --status-green-bg: #E3F0E9;
  --status-amber:    #9A6213;
  --status-amber-bg: #F6EBD6;
  --status-blue:     #1D4E89;
  --status-blue-bg:  #E0E8F1;

  /* Type */
  --font-display: 'Barlow Condensed', 'Helvetica Neue', 'Arial Narrow', sans-serif;
  --font-ui:      'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  /* Spacing — 8px modular grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Square system */
  --radius: 2px;
  --hairline: 1px solid var(--border-1);

  /* Minimal shadows */
  --shadow-1: 0 1px 2px rgba(16, 25, 33, 0.08);
  --shadow-2: 0 2px 8px rgba(16, 25, 33, 0.10);

  /* Motion — restrained */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 160ms;

  /* Legacy aliases — map the old generic var names used in inline HTML styles
     onto the Alchatek tokens so existing markup picks up the new system. */
  --black: var(--alk-black);
  --red: var(--alk-red);
  --red-hover: var(--alk-red-dark);
  --gray-50: var(--bg-2);
  --gray-100: var(--bg-3);
  --gray-200: var(--border-1);
  --gray-300: var(--border-2);
  --gray-400: var(--alk-gray-light);
  --gray-500: var(--fg-3);
  --gray-600: var(--fg-3);
  --gray-700: var(--fg-2);
  --gray-800: var(--alk-black-80);
  --gray-900: var(--fg-1);
  --green: var(--status-green);
  --green-light: var(--status-green-bg);
  --blue: var(--status-blue);
  --blue-light: var(--status-blue-bg);
  --amber: var(--status-amber);
  --amber-light: var(--status-amber-bg);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--font-ui);
  font-weight: var(--fw-reg);
  font-size: 15px;
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: -0.005em; margin: 0; }
a { color: var(--alk-red); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--alk-red-dark); text-decoration: underline; }
code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.85em; }

/* ── Topbar ── */
.topbar {
  background: var(--alk-black);
  color: var(--alk-white);
  padding: 0 var(--sp-6);
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 4px solid var(--alk-red);
  position: sticky; top: 0; z-index: 100;
}
.topbar .brand {
  font-family: var(--font-display);
  font-size: 19px; font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  display: flex; align-items: center; gap: var(--sp-3);
}
.topbar .brand .logo-img {
  height: 24px; width: auto; display: block;
}
.topbar .brand .sub {
  font-family: var(--font-ui);
  font-size: 10px; font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: 0.12em;
  opacity: 0.6; display: block; margin-top: 1px;
}
.topbar nav { display: flex; gap: var(--sp-1); }
.topbar nav a {
  color: rgba(244,245,240,0.7);
  padding: 7px var(--sp-3);
  font-size: 12px; font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 2px solid transparent;
  transition: all var(--dur) var(--ease);
}
.topbar nav a:hover { color: var(--alk-white); text-decoration: none; }
.topbar nav a.active { color: var(--alk-white); border-bottom-color: var(--alk-red); }
.topbar .user { font-size: 13px; opacity: 0.85; }
.topbar .user a { color: rgba(244,245,240,0.55); margin-left: var(--sp-3); font-size: 12px; }
.topbar .user a:hover { color: var(--alk-white); text-decoration: none; }

/* ── Layout ── */
.app { padding: var(--sp-6); max-width: 1280px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-6); }
.page-head h1 {
  font-size: 34px; line-height: 1.05; color: var(--fg-1);
}
.page-head .sub {
  font-family: var(--font-ui);
  color: var(--fg-2); font-size: 13px; margin-top: var(--sp-2);
}

/* Eyebrow / overline — Alchatek ALL-CAPS label */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--alk-red);
}

/* ── Cards ── */
.card {
  background: var(--bg-1);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.card h2, .card h3 { margin-top: 0; }
.card .card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: var(--hairline);
}
.card .card-head h3 {
  font-size: 16px; margin: 0;
  text-transform: uppercase; letter-spacing: 0.04em;
}

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ── Stat blocks ── */
.stat {
  background: var(--bg-1);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}
.stat .label {
  font-size: 11px; font-weight: var(--fw-bold);
  color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.1em;
}
.stat .value {
  font-family: var(--font-display);
  font-size: 36px; font-weight: var(--fw-bold);
  line-height: 1; margin-top: var(--sp-2); color: var(--alk-black);
}
.stat .trend { font-size: 12px; color: var(--fg-3); margin-top: var(--sp-1); }

/* ── Buttons — square, flat, no bounce ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px var(--sp-4);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 12px; font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--border-2); background: var(--bg-1); color: var(--fg-1);
  cursor: pointer; line-height: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { background: var(--bg-3); border-color: var(--alk-gray); text-decoration: none; }
.btn:active { background: var(--alk-gray-ultralight); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--alk-red); color: #fff; border-color: var(--alk-red); }
.btn.primary:hover { background: var(--alk-red-dark); border-color: var(--alk-red-dark); }
.btn.primary:active { background: var(--alk-red-darker); border-color: var(--alk-red-darker); }
.btn.dark { background: var(--alk-black); color: #fff; border-color: var(--alk-black); }
.btn.dark:hover { background: var(--alk-black-80); border-color: var(--alk-black-80); }
.btn.danger { background: var(--bg-1); color: var(--alk-red); border-color: var(--alk-red); }
.btn.danger:hover { background: var(--alk-red); color: #fff; }
.btn.sm { padding: 5px 10px; font-size: 11px; }
.btn.lg { padding: 12px 22px; font-size: 13px; }
.btn .ico { width: 15px; height: 15px; }

/* ── Forms ── */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  font-size: 11px; font-weight: var(--fw-bold);
  color: var(--fg-2); margin-bottom: var(--sp-2);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 9px var(--sp-3);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  font-size: 14px; font-family: var(--font-ui);
  background: var(--bg-1); color: var(--fg-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--alk-red);
  box-shadow: 0 0 0 3px rgba(218,41,28,0.15);
}

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
table thead { background: var(--bg-2); }
table th, table td { text-align: left; padding: 10px var(--sp-3); border-bottom: var(--hairline); }
table th {
  font-weight: var(--fw-bold); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3);
}
table tr:hover td { background: var(--bg-2); }
table a { font-weight: var(--fw-semi); }

/* ── Badges — square, flat (no pills, the brand is square) ── */
.badge {
  display: inline-block; padding: 3px 8px;
  border-radius: var(--radius);
  font-size: 10px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.07em;
  border: 1px solid transparent;
}
.badge.new         { background: var(--status-blue-bg);  color: var(--status-blue); }
.badge.contacted   { background: var(--status-amber-bg); color: var(--status-amber); }
.badge.quoted      { background: var(--status-amber-bg); color: var(--status-amber); }
.badge.scheduled   { background: var(--status-blue-bg);  color: var(--status-blue); }
.badge.sold        { background: var(--status-green-bg); color: var(--status-green); }
.badge.lost,
.badge.disqualified{ background: var(--bg-3);            color: var(--fg-2); }
.badge.pilot       { background: var(--status-amber-bg); color: var(--status-amber); }
.badge.active      { background: var(--status-green-bg); color: var(--status-green); }
.badge.paused      { background: var(--bg-3);            color: var(--fg-2); }
.badge.draft       { background: var(--bg-3);            color: var(--fg-2); }
.badge.territory_pending, .badge.postcard_pending { background: var(--status-amber-bg); color: var(--status-amber); }
.badge.approved_list, .badge.approved_design, .badge.mailing { background: var(--status-blue-bg); color: var(--status-blue); }
.badge.complete    { background: var(--status-green-bg); color: var(--status-green); }
.badge.sent, .badge.viewed { background: var(--status-amber-bg); color: var(--status-amber); }
.badge.signed      { background: var(--status-green-bg); color: var(--status-green); }

/* ── Kanban ── */
.kanban { display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-2); }
.kanban .col {
  flex: 0 0 280px; background: var(--bg-2);
  border: var(--hairline); border-radius: var(--radius);
  padding: var(--sp-3); min-height: 420px;
}
.kanban .col-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: var(--hairline);
}
.kanban .col-head .name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold); font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-1);
}
.kanban .col-head .count {
  font-size: 11px; font-weight: var(--fw-bold); color: var(--fg-3);
  background: var(--bg-1); padding: 2px 8px; border: var(--hairline);
}
.kanban .lead-card {
  background: var(--bg-1); border: var(--hairline); border-radius: var(--radius);
  padding: var(--sp-3); margin-bottom: var(--sp-2);
  cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kanban .lead-card:hover { border-color: var(--alk-gray); box-shadow: var(--shadow-1); }
.kanban .lead-card .name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 15px; }
.kanban .lead-card .phone { font-size: 12px; color: var(--fg-2); }
.kanban .lead-card .meta { font-size: 11px; color: var(--fg-3); margin-top: var(--sp-1); }

/* ── Map ── */
.map-container { height: 520px; border: var(--hairline); border-radius: var(--radius); overflow: hidden; }
#map { height: 100%; width: 100%; }

/* ── States ── */
.loading, .empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--fg-3); font-size: 14px; }
.loading::after { content: "..."; animation: dots 1.4s steps(3, end) infinite; }
@keyframes dots { 0% { content: "."; } 33% { content: ".."; } 66%, 100% { content: "..."; } }

/* ── Lucide icon defaults ── */
[data-lucide], .lucide { width: 16px; height: 16px; stroke-width: 2; vertical-align: -2px; }

/* ── Sign-in page ── */
.signin-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--alk-black); padding: var(--sp-5);
}
.signin-box {
  background: var(--bg-1);
  border-radius: var(--radius);
  border-top: 4px solid var(--alk-red);
  padding: var(--sp-7) var(--sp-6);
  width: 100%; max-width: 400px; box-shadow: var(--shadow-2);
}
.signin-box .brand-large-logo {
  display: block; height: 32px; width: auto;
  margin: 0 auto var(--sp-5);
}
.signin-box h1 { font-size: 22px; margin-bottom: var(--sp-2); }
.signin-box p { font-size: 13px; color: var(--fg-2); margin: 0 0 var(--sp-5); line-height: 1.5; }

/* ── Tabs ── */
.tabs { display: flex; gap: 0; margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border-1); }
.tabs button {
  background: none; border: none; padding: 11px var(--sp-4); cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: var(--fw-semi); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tabs button:hover { color: var(--fg-1); }
.tabs button.active { color: var(--alk-red); border-bottom-color: var(--alk-red); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Misc utility ── */
.muted { color: var(--fg-3); }
hr { border: none; border-top: var(--hairline); margin: var(--sp-5) 0; }

/* ══════════════════════════════════════════════════════════════
   Journey — stage-ownership component
   Color = whose court the ball is in:
   red Alchatek · amber contractor · blue ready-to-confirm · green done · grey not-started
   ══════════════════════════════════════════════════════════════ */
:root {
  --j-red:   var(--alk-red);
  --j-amber: var(--status-amber);
  --j-blue:  var(--status-blue);
  --j-green: var(--status-green);
  --j-grey:  var(--alk-gray-light);
}

/* status pill */
.jstatus {
  display: inline-block; font-family: var(--font-ui);
  font-size: 10px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: var(--radius); white-space: nowrap;
}
.jstatus-red   { background: #FBE3E1; color: var(--alk-red-darker); }
.jstatus-amber { background: var(--status-amber-bg); color: var(--status-amber); }
.jstatus-blue  { background: var(--status-blue-bg);  color: var(--status-blue); }
.jstatus-green { background: var(--status-green-bg); color: var(--status-green); }
.jstatus-grey  { background: var(--bg-3); color: var(--fg-3); }

/* group (onboarding / one campaign) */
.jgroup { margin-bottom: var(--sp-5); }
.jgroup-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.jgroup-head h3 {
  font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em;
}
.jgroup-sub {
  font-family: var(--font-ui); font-size: 10px; font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-4);
}
.jgroup-steps {
  border: var(--hairline); border-radius: var(--radius); background: var(--bg-1);
}

/* a single step row */
.jstep, .jqueue-item {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: var(--hairline);
  position: relative;
}
.jstep:last-child { border-bottom: none; }
.jstep-dot {
  flex: 0 0 auto; width: 12px; height: 12px; margin-top: 3px;
  border-radius: 50%; background: var(--j-grey);
  box-shadow: 0 0 0 3px var(--bg-3);
}
.jstep-red   .jstep-dot { background: var(--j-red);   box-shadow: 0 0 0 3px #FBE3E1; }
.jstep-amber .jstep-dot { background: var(--j-amber); box-shadow: 0 0 0 3px var(--status-amber-bg); }
.jstep-blue  .jstep-dot { background: var(--j-blue);  box-shadow: 0 0 0 3px var(--status-blue-bg); }
.jstep-green .jstep-dot { background: var(--j-green); box-shadow: 0 0 0 3px var(--status-green-bg); }
/* left accent stripe for the active-attention rows */
.jstep-red, .jstep-blue { background: linear-gradient(90deg, rgba(218,41,28,0.04), transparent 40%); }
.jqueue-item.jstep-red, .jqueue-item.jstep-blue { background: var(--bg-1); }
.jqueue-item { border: var(--hairline); border-radius: var(--radius); margin-bottom: var(--sp-2); }
.jqueue-item.jstep-red   { border-left: 3px solid var(--j-red); }
.jqueue-item.jstep-blue  { border-left: 3px solid var(--j-blue); }
.jqueue-item.jstep-amber { border-left: 3px solid var(--j-amber); }

.jstep-body { flex: 1; min-width: 0; }
.jstep-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.jstep-label {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 15px; color: var(--fg-1);
}
.jstep-hint { font-size: 12px; color: var(--fg-3); margin-top: 2px; line-height: 1.45; }
.jstep-meta { font-size: 11px; color: var(--fg-3); margin-top: var(--sp-2); }
.jstep-note { color: var(--status-amber); }
.jstep-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

.jqueue-clear, .empty {
  padding: var(--sp-5); text-align: center; color: var(--fg-3);
  font-size: 13px; border: var(--hairline); border-radius: var(--radius);
  background: var(--bg-1);
}

/* legend */
.jlegend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.jlegend span { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-2); }
.jlegend i {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}