/* ==========================================================================
   Harris Control -- brand theme (Harris Builders, Winnipeg MB)
   Foundation Black #17181A / Copper Rust #A85A32 / Warm Ivory / Prairie Slate #3A4A52
   Headings: Jost (Century Gothic / Futura substitute)  ·  Body: Helvetica Neue / Arial
   ========================================================================== */

:root{
  --navy:#17181A;         /* Foundation Black -- primary dark */
  --navy-dark:#101112;    /* darker charcoal, hero/auth backgrounds */
  --navy-tint:#3A4A52;    /* Prairie Slate -- hover tint for dark buttons */
  --gold:#A85A32;         /* Copper Rust -- primary accent */
  --gold-light:#C98A5E;   /* lighter copper tint */
  --white:#FFFFFF;
  --slate:#3A4A52;        /* Prairie Slate -- body/heading text */
  --slate-light:#8E8A82;  /* Concrete Grey -- secondary/muted text */
  --bg:#F5F2EC;           /* Warm Ivory -- app background */
  --border:#E4DFD3;       /* Ivory Dim -- borders/dividers */
  --red:#8C3A22;
  --red-bg:#F5E4DF;
  --green:#2E5A3A;
  --green-bg:#E8F0E9;
  --gold-bg:#F5EBD8;

  --font-head:'Jost', 'Century Gothic', 'Segoe UI', sans-serif;
  --font-body:'Helvetica Neue', Arial, 'Segoe UI', sans-serif;
  --font-accent:'Palatino Linotype', Palatino, Georgia, serif;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(27,54,93,.08);
  --shadow-md:0 4px 16px rgba(27,54,93,.10);
  --sidebar-w:248px;
  --topbar-h:64px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate);
  background:var(--bg);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-head); color:var(--navy); margin:0 0 4px; font-weight:700; letter-spacing:.005em; }
p{ margin:0 0 10px; }
a{ color:var(--navy); }
button{ font-family:var(--font-body); cursor:pointer; }
input,select,textarea{ font-family:var(--font-body); }
::selection{ background:var(--gold-light); color:var(--navy-dark); }
.brand-tagline{ font-family:var(--font-accent); font-style:italic; color:var(--slate-light); }

/* ---------------------------------------------------------------- layout */
.app-shell{ display:flex; min-height:100vh; }
.app-main{ flex:1; display:flex; flex-direction:column; margin-left:var(--sidebar-w); min-width:0; }
.app-content{ padding:28px 32px 60px; max-width:1280px; }

/* ---------------------------------------------------------------- sidebar */
.sidebar{
  width:var(--sidebar-w);
  background:var(--navy);
  position:fixed; top:0; left:0; bottom:0;
  display:flex; flex-direction:column;
  z-index:20;
}
.sidebar-logo{
  padding:22px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-logo img{ height:34px; display:block; }
.sidebar-nav{ flex:1; overflow-y:auto; padding:14px 12px; }
.sidebar-section-label{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.4); font-weight:700; margin:16px 12px 6px;
}
.sidebar-link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:2px 0;
  border-radius:var(--radius-sm);
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:13.5px; font-weight:600;
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease;
}
.sidebar-link .ic{ width:18px; height:18px; flex:none; opacity:.85; }
.sidebar-link:hover{ background:rgba(255,255,255,.06); color:var(--white); }
.sidebar-link.active{
  background:rgba(201,162,39,.14);
  color:var(--gold-light);
  border-color:rgba(201,162,39,.35);
}
.sidebar-footer{
  padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,.08);
  font-size:11px; color:rgba(255,255,255,.4);
}

/* ---------------------------------------------------------------- topbar */
.topbar{
  height:var(--topbar-h);
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  position:sticky; top:0; z-index:10;
}
.topbar-title{ font-family:var(--font-head); font-weight:700; color:var(--navy); font-size:17px; }
.topbar-sub{ font-size:11.5px; color:var(--slate-light); margin-top:1px; }
.topbar-right{ display:flex; align-items:center; gap:16px; }
.user-chip{
  display:flex; align-items:center; gap:9px;
  padding:6px 12px 6px 6px; border-radius:999px;
  border:1px solid var(--border); cursor:pointer;
  background:var(--white);
}
.user-avatar{
  width:28px; height:28px; border-radius:50%;
  background:var(--navy); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:12px;
}
.user-chip-name{ font-size:12.5px; font-weight:700; color:var(--navy); }
.user-menu{
  position:absolute; right:28px; top:60px; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); min-width:180px; overflow:hidden; z-index:30;
}
.user-menu a, .user-menu button{
  display:block; width:100%; text-align:left; padding:10px 14px;
  font-size:13px; color:var(--slate); background:none; border:none;
  text-decoration:none; font-weight:600;
}
.user-menu a:hover, .user-menu button:hover{ background:var(--bg); color:var(--navy); }

/* ---------------------------------------------------------------- headings / eyebrow */
.page-eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px;
}
.page-header{ margin-bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-header h1{ font-size:22px; }
.page-header p{ color:var(--slate-light); margin:2px 0 0; font-size:13px; }

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 18px; border-radius:999px; border:1px solid transparent;
  font-weight:700; font-size:13px; font-family:var(--font-body);
  transition:transform .1s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--gold); color:var(--navy-dark); }
.btn-primary:hover{ background:var(--gold-light); }
.btn-navy{ background:var(--navy); color:var(--white); }
.btn-navy:hover{ background:var(--navy-tint); }
.btn-outline{ background:var(--white); color:var(--navy); border-color:var(--border); }
.btn-outline:hover{ border-color:var(--navy); }
.btn-ghost{ background:transparent; color:var(--slate); }
.btn-ghost:hover{ background:var(--bg); }
.btn-danger{ background:var(--red-bg); color:var(--red); }
.btn-danger:hover{ background:#f6d7d3; }
.btn-sm{ padding:6px 13px; font-size:12px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------------------------------------------------------------- cards / stat boxes */
.card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.card-pad{ padding:20px 22px; }
.card-accent{ border-left:3.5px solid var(--gold); }
.card-navy{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.card-navy .stat-label{ color:#C7D2E3; }

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
@media (max-width:1000px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
.stat-box{
  background:var(--white); border:1px solid var(--border); border-left:3.5px solid var(--gold);
  border-radius:var(--radius-md); padding:16px 18px;
}
.stat-value{ font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--navy); line-height:1.1; }
.stat-value.gold{ color:var(--gold); }
.stat-label{ font-size:12px; color:var(--slate-light); margin-top:4px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- badges */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700;
  letter-spacing:.02em;
}
.badge-green{ background:var(--green-bg); color:var(--green); }
.badge-gold{ background:var(--gold-bg); color:#8a6d13; }
.badge-red{ background:var(--red-bg); color:var(--red); }
.badge-slate{ background:#EEF1F4; color:var(--slate); }
.badge-navy{ background:#E7ECF4; color:var(--navy); }

/* ---------------------------------------------------------------- tables */
.table-wrap{ overflow-x:auto; }
table.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.data-table th{
  text-align:left; font-family:var(--font-head); font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--slate-light); font-weight:700;
  padding:10px 14px; border-bottom:2px solid var(--border); white-space:nowrap;
}
table.data-table td{ padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tbody tr:hover{ background:#FAFBFC; }
.cell-strong{ font-weight:700; color:var(--navy); }
.cell-muted{ color:var(--slate-light); }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* ---------------------------------------------------------------- forms */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:5px; }
.field .hint{ font-size:11.5px; color:var(--slate-light); margin-top:4px; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=date], .field input[type=number], .field input[type=url],
.field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:13.5px; color:var(--slate); background:var(--white);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ resize:vertical; min-height:80px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.checkbox-row{ display:flex; align-items:center; gap:8px; }
.checkbox-row input{ width:16px; height:16px; accent-color:var(--gold); }

.token-input-group{ display:flex; gap:8px; }
.token-input-group input{ flex:1; }
.input-with-btn{ position:relative; }
.input-with-btn input{ padding-right:70px; }
.input-with-btn .mini-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:11px; padding:5px 10px;
}

/* ---------------------------------------------------------------- progress / checklist */
.progress-track{ background:var(--bg); border-radius:999px; height:9px; overflow:hidden; }
.progress-fill{ height:100%; border-radius:999px; background:var(--green); }
.progress-fill.gold{ background:var(--gold); }
.milestone-list{ list-style:none; margin:0; padding:0; }
.milestone-list li{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px; }
.milestone-dot{ width:11px; height:11px; border-radius:50%; flex:none; }
.milestone-dot.done{ background:var(--green); }
.milestone-dot.current{ background:var(--gold); }
.milestone-dot.todo{ background:var(--border); }
.milestone-list li.done{ color:var(--slate); }
.milestone-list li.todo{ color:var(--slate-light); }

.check-item{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; }
.check-box{ width:18px; height:18px; border-radius:4px; border:2px solid var(--border); flex:none;
  display:flex; align-items:center; justify-content:center; }
.check-box.checked{ background:var(--green); border-color:var(--green); color:#fff; font-size:12px; }

/* ---------------------------------------------------------------- modal ---------------------------------------------------------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(19,42,74,.55); backdrop-filter:blur(1px);
  display:flex; align-items:flex-start; justify-content:center; padding:6vh 20px;
  z-index:100; overflow-y:auto;
}
.modal{
  background:var(--white); border-radius:var(--radius-lg); width:100%; max-width:520px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); animation:modal-in .15s ease;
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--border);
}
.modal-header h3{ font-size:16px; }
.modal-close{ background:none; border:none; font-size:20px; color:var(--slate-light); line-height:1; }
.modal-body{ padding:20px 22px; max-height:65vh; overflow-y:auto; }
.modal-footer{ padding:16px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; }

/* ---------------------------------------------------------------- toasts */
.toast-root{ position:fixed; right:22px; bottom:22px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{
  background:var(--navy); color:var(--white); padding:12px 18px; border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); font-size:13px; font-weight:600; min-width:220px;
  border-left:4px solid var(--gold); animation:toast-in .18s ease;
}
.toast.error{ border-left-color:var(--red); }
.toast.success{ border-left-color:var(--green); }
@keyframes toast-in{ from{ opacity:0; transform:translateX(20px);} to{ opacity:1; transform:translateX(0);} }

/* ---------------------------------------------------------------- empty state */
.empty-state{ text-align:center; padding:50px 20px; color:var(--slate-light); }
.empty-state h3{ color:var(--slate); font-size:15px; margin-bottom:6px; }

/* ---------------------------------------------------------------- login page */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--navy); background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:28px 28px; padding:20px;
}
.auth-card{
  background:var(--white); border-radius:var(--radius-lg); width:100%; max-width:400px;
  padding:36px 32px 30px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.auth-logo{ display:flex; justify-content:center; margin-bottom:18px; }
.auth-logo img{ height:56px; }
.auth-card h1{ font-size:19px; text-align:center; }
.auth-card .sub{ text-align:center; color:var(--slate-light); font-size:12.5px; margin-bottom:22px; }
.auth-error{
  background:var(--red-bg); color:var(--red); font-size:12.5px; font-weight:600;
  padding:9px 12px; border-radius:var(--radius-sm); margin-bottom:14px; display:none;
}
.auth-error.show{ display:block; }
.auth-hint{
  margin-top:18px; background:var(--bg); border:1px dashed var(--border); border-radius:var(--radius-sm);
  padding:10px 12px; font-size:11.5px; color:var(--slate-light); text-align:center;
}
.auth-footer{ text-align:center; margin-top:22px; font-size:11px; color:rgba(255,255,255,.55); }

/* ---------------------------------------------------------------- settings: model picker */
.model-list{ display:flex; flex-direction:column; gap:10px; }
.model-option{
  border:1.5px solid var(--border); border-radius:var(--radius-md); padding:14px 16px;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.model-option:hover{ border-color:var(--gold-light); }
.model-option.selected{ border-color:var(--gold); background:var(--gold-bg); }
.model-option-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.model-option-name{ font-weight:700; color:var(--navy); font-size:13.5px; display:flex; align-items:center; gap:8px; }
.model-option-desc{ font-size:11.5px; color:var(--slate-light); margin-top:2px; }
.radio-dot{
  width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.radio-dot.on{ border-color:var(--gold); }
.radio-dot.on::after{ content:''; width:9px; height:9px; border-radius:50%; background:var(--gold); }
.model-token-area{ margin-top:12px; display:none; }
.model-option.selected .model-token-area{ display:block; }
.default-pill{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; background:var(--navy); color:var(--gold-light); padding:2px 7px; border-radius:999px; }

.local-model-box{
  border:1.5px dashed var(--border); border-radius:var(--radius-md); padding:16px 18px; margin-top:8px;
}
.switch{ position:relative; width:42px; height:24px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0; background:var(--border); border-radius:999px; transition:.15s;
}
.switch .track::after{
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:var(--white); border-radius:50%; transition:.15s; box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.switch input:checked + .track{ background:var(--gold); }
.switch input:checked + .track::after{ transform:translateX(18px); }
.settings-row-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }

/* ---------------------------------------------------------------- prototype-style visit chips (scheduling view) */
.week-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width:800px){ .week-grid{ grid-template-columns:repeat(2,1fr); } }
.day-col-label{ font-size:10.5px; color:var(--slate-light); font-weight:700; text-transform:uppercase; margin-bottom:6px; }
.visit-chip{
  border-radius:8px; padding:10px 10px; color:#fff; font-size:12px; font-weight:700;
  margin-bottom:8px; cursor:pointer; line-height:1.3;
}
.visit-chip .vc-time{ font-weight:600; font-size:10.5px; opacity:.85; display:block; margin-top:2px; }
.visit-chip.confirmed{ background:var(--green); }
.visit-chip.pending{ background:var(--gold); color:var(--navy-dark); }
.visit-chip.declined{ background:var(--slate-light); }

.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:18px; }
.tab-btn{
  background:none; border:none; padding:10px 4px; margin-right:18px; font-weight:700; font-size:13px;
  color:var(--slate-light); border-bottom:2.5px solid transparent; margin-bottom:-1px;
}
.tab-btn.active{ color:var(--navy); border-color:var(--gold); }

.helper-banner{
  background:var(--gold-bg); border:1px solid #EEDDA6; color:#7a5f10; border-radius:var(--radius-md);
  padding:12px 16px; font-size:12.5px; margin-bottom:18px; display:flex; gap:10px; align-items:flex-start;
}
.section-title{ font-size:14px; font-weight:700; color:var(--navy); margin:22px 0 10px; }
.muted{ color:var(--slate-light); }
.text-right{ text-align:right; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
hr.sep{ border:none; border-top:1px solid var(--border); margin:18px 0; }