/* ============================================================
   FLEXHAUL CRM — field-services design system
   Built for someone checking a job from a truck cab: high contrast,
   large tap targets, minimal typing, carries the FlexHaul brand
   (same tokens as the public marketing site) into a data-dense tool.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root{
  --asphalt:#15130f; --asphalt-2:#1e1b15; --asphalt-3:#242019;
  --amber:#f5a300; --amber-bright:#ffb81c; --rust:#c9590d;
  --concrete:#ede7d9; --off-white:#f8f5ee; --steel:#6f6a5e; --steel-light:#9a947f;
  --ink:#1c1812; --border:rgba(238,234,223,0.12);
  --good:#4b7d4a; --good-bg:rgba(75,125,74,0.15);
  --warn:#c9590d; --warn-bg:rgba(201,89,13,0.15);
  --info:#3a6ea5; --info-bg:rgba(58,110,165,0.15);
  --font-display:'Rajdhani',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --tap: 48px; /* minimum comfortable tap target */
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--concrete); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:16px; } /* 16px prevents iOS zoom-on-focus */
a{ color:inherit; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.2); border-radius:6px; }

:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

/* ============================= LOGIN ============================= */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(900px 500px at 50% -10%, rgba(245,163,0,0.18), transparent 60%), linear-gradient(180deg, var(--asphalt), #0e0c09);
  padding:24px;
}
.login-card{
  width:100%; max-width:400px; background:var(--off-white); border-radius:14px;
  padding:40px 32px; box-shadow:0 40px 80px -30px rgba(0,0,0,0.6);
}
.login-brand{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:28px; }
.login-brand img{ height:56px; }
.login-brand .word{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; text-align:center; color:var(--ink); }
.login-brand .sub{ font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.16em; color:var(--rust); text-transform:uppercase; }
.login-field{ margin-bottom:18px; }
.login-field label{ display:block; font-family:var(--font-display); font-weight:600; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.04em; color:#4a4536; margin-bottom:7px; }
.login-field input{
  width:100%; padding:14px 16px; border:1.5px solid #d8d0b8; border-radius:8px; background:#fff; color:var(--ink);
  min-height:var(--tap);
}
.login-field input:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 4px rgba(245,163,0,0.18); }
.login-error{ background:var(--warn-bg); color:var(--rust); border:1px solid rgba(201,89,13,0.35); border-radius:8px; padding:12px 14px; font-size:0.9rem; margin-bottom:16px; display:none; }
.login-error.is-visible{ display:block; }
.btn-login{
  width:100%; min-height:var(--tap); border:none; border-radius:8px; cursor:pointer;
  background:linear-gradient(180deg, var(--amber-bright), var(--amber)); color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:0.02em;
}
.btn-login:disabled{ opacity:0.6; cursor:default; }

/* ============================= APP SHELL ============================= */
#app{ display:none; min-height:100vh; flex-direction:column; }
#app.is-active{ display:flex; }

.topbar{
  background:var(--asphalt); color:var(--off-white); display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; height:64px; flex-shrink:0; position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
}
.topbar .brand{ display:flex; align-items:center; gap:10px; }
.topbar .brand img{ height:32px; }
.topbar .brand .word{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.topbar .brand .word span{ display:block; font-size:0.6rem; letter-spacing:0.2em; color:var(--amber); font-weight:600; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.topbar-user{ font-family:var(--font-mono); font-size:0.85rem; color:var(--steel-light); }
.btn-logout{
  background:none; border:1.5px solid var(--border); color:var(--off-white); border-radius:6px;
  padding:8px 14px; font-family:var(--font-display); font-weight:600; font-size:0.8rem; text-transform:uppercase;
  min-height:40px;
}
.btn-logout:hover{ border-color:var(--amber); color:var(--amber); }

.shell{ display:flex; flex:1; min-height:0; }

.nav-rail{
  width:220px; flex-shrink:0; background:var(--asphalt-2); border-right:1px solid var(--border);
  padding:16px 10px; display:flex; flex-direction:column; gap:4px;
}
.nav-item{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:8px; border:none; background:none;
  color:var(--steel-light); font-family:var(--font-display); font-weight:600; font-size:0.95rem; text-transform:uppercase;
  letter-spacing:0.02em; cursor:pointer; text-align:left; min-height:var(--tap);
}
.nav-item:hover{ background:rgba(245,163,0,0.08); color:var(--off-white); }
.nav-item.is-active{ background:rgba(245,163,0,0.14); color:var(--amber-bright); }
.nav-item svg{ width:20px; height:20px; flex-shrink:0; }

.main{ flex:1; min-width:0; overflow-y:auto; padding:28px 32px 80px; }
.main-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:14px; }
.main-header h1{ font-size:1.7rem; }

/* mobile nav (bottom tab bar) */
.mobile-nav{ display:none; }
@media(max-width:860px){
  .nav-rail{ display:none; }
  .mobile-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--asphalt);
    border-top:1px solid var(--border); z-index:50; padding:4px 0;
  }
  .mobile-nav .nav-item{ flex:1; flex-direction:column; gap:4px; font-size:0.68rem; padding:8px 4px; text-align:center; }
  .main{ padding:20px 16px 100px; }
}

/* ============================= CARDS / STATS ============================= */
.grid{ display:grid; gap:16px; }
.stat-grid{ grid-template-columns:repeat(4,1fr); margin-bottom:28px; }
@media(max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
.stat-card{ background:var(--off-white); border:1px solid rgba(28,24,18,0.08); border-radius:12px; padding:20px; }
.stat-card .num{ font-family:var(--font-display); font-size:2.1rem; color:var(--rust); }
.stat-card .lbl{ font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--steel); margin-top:2px; }

.card{ background:var(--off-white); border:1px solid rgba(28,24,18,0.08); border-radius:12px; padding:22px; }
.card + .card{ margin-top:16px; }

/* ============================= BUTTONS ============================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--tap);
  padding:12px 20px; border-radius:8px; border:1.5px solid transparent; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:0.92rem; text-transform:uppercase; letter-spacing:0.02em;
}
.btn-primary{ background:linear-gradient(180deg, var(--amber-bright), var(--amber)); color:var(--ink); }
.btn-ghost{ background:#fff; border-color:#d8d0b8; color:var(--ink); }
.btn-ghost:hover{ border-color:var(--rust); color:var(--rust); }
.btn-danger{ background:#fff; border-color:rgba(201,89,13,0.4); color:var(--rust); }
.btn-sm{ min-height:38px; padding:8px 14px; font-size:0.8rem; }
.btn svg{ width:17px; height:17px; }

/* ============================= FORMS ============================= */
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--font-display); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; color:#4a4536; margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1.5px solid #d8d0b8; border-radius:8px; background:#fff; color:var(--ink);
  min-height:var(--tap);
}
.field textarea{ min-height:90px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 4px rgba(245,163,0,0.18); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:600px){ .form-row{ grid-template-columns:1fr; } }

/* ============================= TABLE ============================= */
.table-wrap{ background:var(--off-white); border:1px solid rgba(28,24,18,0.08); border-radius:12px; overflow:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:0.92rem; min-width:640px; }
table.data th{ text-align:left; padding:13px 16px; background:#e5ded0; font-family:var(--font-display); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.05em; color:#4a4536; white-space:nowrap; }
table.data td{ padding:13px 16px; border-top:1px solid rgba(28,24,18,0.08); vertical-align:top; }
table.data tr{ cursor:pointer; }
table.data tr:hover td{ background:rgba(245,163,0,0.05); }
.small-note{ font-size:0.8rem; color:var(--steel); }

/* ============================= BADGES ============================= */
.badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:0.72rem; font-weight:600; padding:4px 10px; border-radius:999px; text-transform:uppercase; white-space:nowrap; }
.badge-new{ background:rgba(111,106,94,0.14); color:#4a4536; }
.badge-quoted{ background:var(--warn-bg); color:var(--rust); }
.badge-won, .badge-paid, .badge-available{ background:var(--good-bg); color:var(--good); }
.badge-scheduled, .badge-in_use{ background:var(--info-bg); color:var(--info); }
.badge-complete{ background:rgba(75,125,74,0.15); color:var(--good); }
.badge-invoiced{ background:rgba(245,163,0,0.18); color:#8a5c00; }
.badge-lost, .badge-canceled, .badge-overdue{ background:rgba(201,89,13,0.16); color:var(--rust); }
.badge-unpaid{ background:rgba(201,89,13,0.12); color:var(--rust); }
.badge-maintenance{ background:rgba(201,89,13,0.14); color:var(--rust); }

/* ============================= KANBAN ============================= */
.pipeline-board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:12px; }
.pipeline-col{ flex:0 0 270px; background:rgba(28,24,18,0.03); border-radius:12px; padding:12px; }
.pipeline-col-head{ display:flex; align-items:center; justify-content:space-between; padding:6px 6px 12px; }
.pipeline-col-head h3{ font-size:0.85rem; }
.pipeline-col-head .count{ font-family:var(--font-mono); font-size:0.78rem; color:var(--steel); background:rgba(28,24,18,0.06); padding:2px 9px; border-radius:999px; }
.deal-card{ background:#fff; border:1px solid rgba(28,24,18,0.08); border-radius:10px; padding:14px; margin-bottom:10px; cursor:pointer; }
.deal-card:hover{ border-color:rgba(245,163,0,0.4); }
.deal-card .name{ font-weight:700; font-size:0.95rem; }
.deal-card .meta{ font-size:0.8rem; color:var(--steel); margin-top:4px; }
.deal-card .value{ font-family:var(--font-mono); font-weight:700; color:var(--rust); margin-top:8px; font-size:0.9rem; }
.deal-card select{ margin-top:10px; width:100%; font-size:0.78rem; padding:7px 8px; min-height:36px; }

/* ============================= MODAL ============================= */
.modal-overlay{ position:fixed; inset:0; background:rgba(21,19,15,0.7); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay.is-open{ display:flex; }
.modal{ background:var(--off-white); border-radius:14px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; padding:28px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.modal-close{ background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--steel); min-height:40px; min-width:40px; }

/* ============================= LINE ITEMS (estimate builder) ============================= */
.line-items{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.line-item-row{ display:grid; grid-template-columns:1fr 70px 90px 90px 32px; gap:8px; align-items:center; }
@media(max-width:600px){ .line-item-row{ grid-template-columns:1fr 1fr; } }
.line-item-row input, .line-item-row select{ padding:9px 10px; min-height:42px; }
.line-item-remove{ background:none; border:none; color:var(--rust); font-size:1.2rem; cursor:pointer; min-height:36px; }
.estimate-total{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:1.2rem; font-weight:700; padding-top:14px; border-top:2px solid var(--ink); }
.estimate-total .amt{ color:var(--rust); }

/* ============================= CALENDAR ============================= */
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-day-label{ text-align:center; font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; color:var(--steel); padding-bottom:6px; }
.cal-cell{ background:#fff; border:1px solid rgba(28,24,18,0.08); border-radius:8px; min-height:100px; padding:6px; font-size:0.78rem; }
.cal-cell.is-other-month{ opacity:0.4; }
.cal-cell .date-num{ font-family:var(--font-mono); font-weight:700; color:var(--steel); }
.cal-job{ background:rgba(245,163,0,0.14); color:#8a5c00; border-radius:5px; padding:3px 6px; margin-top:4px; font-size:0.7rem; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-route-btn{ display:block; width:100%; margin-top:6px; padding:4px 6px; border-radius:5px; border:1px solid rgba(28,24,18,0.12); background:#fff; color:var(--steel); font-size:0.68rem; cursor:pointer; font-family:var(--font-body); }
.cal-route-btn:hover{ background:var(--concrete); color:var(--ink); }
@media(max-width:760px){ .cal-grid{ grid-template-columns:1fr; } .cal-day-label{ display:none; } .cal-cell{ min-height:auto; } .cal-cell.is-empty{ display:none; } }

/* ============================= MISC ============================= */
.empty-state{ text-align:center; padding:60px 20px; color:var(--steel); }
.empty-state svg{ width:40px; height:40px; margin-bottom:14px; opacity:0.5; }
.loading{ text-align:center; padding:40px; color:var(--steel); font-family:var(--font-mono); font-size:0.85rem; }
.toast{ position:fixed; bottom:24px; right:24px; background:var(--asphalt); color:var(--off-white); padding:14px 20px; border-radius:10px; font-size:0.9rem; z-index:200; box-shadow:0 20px 40px -12px rgba(0,0,0,0.4); display:none; }
.toast.is-visible{ display:block; }
.toast.is-error{ background:var(--rust); }
.text-dim{ color:var(--steel); }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.doc-thumb{ display:flex; align-items:center; gap:10px; padding:10px; background:#fff; border-radius:8px; border:1px solid rgba(28,24,18,0.08); margin-bottom:8px; }
.doc-thumb img{ width:44px; height:44px; object-fit:cover; border-radius:6px; }