/* ===========================================================
   MAJ Platform — shared design tokens & component styles
   Ported from the maj-design mockups (:root token block repeated
   on every screen). Manrope (body) + Fraunces (headings) via
   Google Fonts. Reception = green staff accent, Backend = blue.
   =========================================================== */

:root{
  --primary:#0e7a53; --primary-dark:#0a5c3f; --primary-light:#e6f4ee;
  --accent-amber:#d98c2b;
  --ink:#12201b; --ink-soft:#4d5c56; --muted:#7c8a84;
  --bg:#f5f8f6; --surface:#ffffff; --border:#e1e8e4; --border-soft:#edf2ef;
  --danger:#c0392b; --danger-bg:#fbeae7;
  --warn:#a5670c; --warn-bg:#fdf1dd;
  --info:#1a56b0; --info-bg:#e6eefc;
  --ok:#1e8e5a; --ok-bg:#e2f7ea;
  --staff-bg:#0f1b17; --staff-surface:#16241e; --staff-border:#243830; --staff-ink:#dfeae5; --staff-muted:#8ea69c;
  --reception-accent:#2f8f6b;
  --backend-accent:#4c7cf0;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(18,32,27,.04), 0 8px 24px -12px rgba(18,32,27,.12);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Manrope',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);}
a{color:var(--primary);text-decoration:none;} a:hover{color:var(--primary-dark);}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:500;margin:0;letter-spacing:-0.01em;}
p{margin:0;}
img{max-width:100%;}

.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border-radius:10px;border:none;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;padding:12px 20px;cursor:pointer;white-space:nowrap;
  text-decoration:none;transition:background .15s ease;}
.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);color:#fff;}
.btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--border);}
.btn-secondary:hover{color:var(--ink);background:var(--border-soft);}
.btn-ghost{background:transparent;color:var(--ink-soft);}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:8px;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-block{width:100%;}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;}
.tag-ok{background:var(--ok-bg);color:var(--ok);} .tag-warn{background:var(--warn-bg);color:var(--warn);}
.tag-info{background:var(--info-bg);color:var(--info);} .tag-danger{background:var(--danger-bg);color:var(--danger);}
.muted{color:var(--muted);} .soft{color:var(--ink-soft);}

input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],
input[type=date],select,textarea{
  width:100%;padding:11px 13px;border-radius:9px;border:1.5px solid var(--border);font-family:inherit;font-size:14px;
  color:var(--ink);background:#fff;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-light);border-color:var(--primary);}
label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-soft);margin:0 0 6px;text-transform:uppercase;letter-spacing:.03em;}
.field{margin-bottom:16px;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;padding:10px 14px;color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1.5px solid var(--border);}
td{padding:13px 14px;border-bottom:1px solid var(--border-soft);}
tr:last-child td{border-bottom:none;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--ink-soft);cursor:pointer;}

.errors{background:var(--danger-bg);color:var(--danger);border-radius:9px;padding:12px 14px;margin-bottom:16px;font-size:13.5px;}
.status-banner{background:var(--ok-bg);color:var(--ok);border-radius:9px;padding:12px 14px;margin-bottom:16px;font-size:13.5px;font-weight:700;}
.demo-banner{background:var(--accent-amber);color:#fff;border-radius:9px;padding:12px 16px;margin-bottom:16px;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:10px;}

/* ---------------- Public portal layout ---------------- */
.pub-shell{min-height:100vh;background:var(--bg);display:flex;}
.pub-sidebar{width:236px;flex-shrink:0;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:22px 14px;}
.pub-sidebar .brand{display:flex;align-items:center;gap:10px;padding:0 6px 24px;}
.pub-sidebar .brand-mark{width:30px;height:30px;border-radius:8px;background:var(--primary);display:flex;align-items:center;justify-content:center;}
.pub-sidebar .brand-name{font-family:'Fraunces',serif;font-size:17px;font-weight:600;}
.pub-nav{display:flex;flex-direction:column;gap:2px;}
.pub-nav a{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:9px;color:var(--ink-soft);font-weight:600;font-size:14px;}
.pub-nav a.active{background:var(--primary-light);color:var(--primary-dark);font-weight:800;}
.pub-sidebar-footer{display:flex;align-items:center;gap:10px;padding:12px 10px;border-top:1px solid var(--border-soft);margin-top:10px;}
.avatar-chip{width:34px;height:34px;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;flex-shrink:0;}
.pub-main{flex:1;min-width:0;}
.pub-content{max-width:1100px;margin:0 auto;padding:36px 24px 60px;}
.pub-content.narrow{max-width:900px;}

/* wizard step indicator */
.wizard-steps{display:flex;align-items:center;padding:18px 0 26px;}
.wizard-step{display:flex;align-items:center;gap:10px;}
.wizard-step .dot{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;font-weight:800;color:var(--muted);}
.wizard-step.done .dot,.wizard-step.active .dot{background:var(--primary);border-color:var(--primary);color:#fff;}
.wizard-step .label{font-size:13.5px;font-weight:700;color:var(--muted);}
.wizard-step.done .label,.wizard-step.active .label{color:var(--ink);}
.wizard-connector{flex:1;height:2px;background:var(--border);margin:0 4px;min-width:24px;}
.wizard-connector.done{background:var(--primary);}

/* ---------------- Staff (reception / backend) shared shell ---------------- */
.staff-shell{min-height:100vh;background:var(--bg);display:flex;}
.staff-sidebar{width:224px;flex-shrink:0;background:var(--staff-bg);color:var(--staff-ink);display:flex;flex-direction:column;padding:20px 12px;}
.staff-sidebar .brand{display:flex;align-items:center;gap:10px;padding:0 8px 6px;}
.staff-sidebar .brand-mark{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.staff-sidebar .brand-name{font-family:'Fraunces',serif;font-size:16px;font-weight:600;color:#fff;}
.staff-portal-badge{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.06);padding:4px 9px;border-radius:6px;display:inline-block;margin:2px 8px 20px;}
.staff-nav{display:flex;flex-direction:column;gap:2px;}
.staff-nav a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:9px;color:var(--staff-muted);font-weight:600;font-size:13.5px;border-left:3px solid transparent;}
.staff-nav a.active{background:rgba(255,255,255,.08);color:#fff;font-weight:800;}
.staff-sidebar-spacer{flex:1;}
.staff-sidebar-footer{display:flex;align-items:center;gap:10px;padding:12px 10px;border-top:1px solid var(--staff-border);margin-top:10px;color:var(--staff-muted);}
.staff-sidebar-footer button{background:none;border:none;color:inherit;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:10px;padding:0;}
.staff-main{flex:1;padding:32px 40px;min-width:0;}
.staff-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;}

/* Reception (green) accent */
.reception .brand-mark{background:var(--reception-accent);}
.reception .staff-portal-badge{color:var(--reception-accent);}
.reception .staff-nav a.active{border-left-color:var(--reception-accent);}
.reception .btn-accent{background:var(--reception-accent);color:#fff;}
.reception .btn-accent:hover{background:#267a5b;color:#fff;}

/* Backend (blue) accent */
.backend .brand-mark{background:var(--backend-accent);}
.backend .staff-portal-badge{color:var(--backend-accent);}
.backend .staff-nav a.active{border-left-color:var(--backend-accent);}
.backend .btn-accent{background:var(--backend-accent);color:#fff;}
.backend .btn-accent:hover{background:#3b68d6;color:#fff;}

.stat-card{padding:18px 20px;flex:1;}
.stat-icon{width:36px;height:36px;border-radius:9px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.stat-value{font-size:26px;font-weight:800;font-family:'Fraunces',serif;}
.stat-label{color:var(--muted);font-size:12.5px;font-weight:600;margin-top:2px;}

.filter-pill{padding:9px 16px;border-radius:8px;font-size:13px;font-weight:700;background:transparent;color:var(--ink-soft);cursor:pointer;border:none;text-decoration:none;display:inline-block;}
.filter-pill.active{color:#fff;}
.reception .filter-pill.active{background:var(--reception-accent);}
.backend .filter-pill.active{background:var(--backend-accent);}
.pub-content .filter-pill.active{background:var(--primary);}

/* auth cards on dark staff background */
.staff-auth-shell{min-height:100vh;background:var(--staff-bg);display:flex;flex-direction:column;}
.staff-auth-shell .top{padding:20px 28px;}
.staff-auth-shell .center{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;}
.staff-auth-card{width:420px;padding:32px;background:var(--staff-surface);border:1px solid var(--staff-border);border-radius:var(--radius);box-shadow:var(--shadow);}
.staff-auth-card label{color:var(--staff-muted);}
.staff-auth-card input,.staff-auth-card select{background:#0f1b17;border-color:var(--staff-border);color:#fff;}
.staff-auth-card h2{color:#fff;}
.staff-auth-card p.lead{font-size:13px;color:var(--staff-muted);margin:0 0 24px;}

/* chat bubbles */
.chat-scroll{flex:1;padding:20px 22px;display:flex;flex-direction:column;gap:12px;overflow:auto;}
.bubble{border-radius:10px;padding:10px 13px;max-width:75%;font-size:13px;}
.bubble.theirs{align-self:flex-start;background:var(--bg);}
.bubble.mine{align-self:flex-end;background:var(--primary-light);}
.bubble .who{font-size:11px;color:var(--muted);margin-bottom:2px;}

/* map picker */
.map-pick-area{position:relative;height:340px;background:#eaf1ec;border-radius:0;overflow:hidden;}
.map-pick-area .leaflet-container{cursor:crosshair;}

/* disclaimer callout */
.disclaimer-box{padding:18px 22px;border:1.5px solid var(--danger);background:var(--danger-bg);border-radius:var(--radius);}
.disclaimer-box .title{font-weight:800;font-size:13.5px;color:var(--danger);margin-bottom:4px;}
.disclaimer-box p{font-size:12.5px;line-height:1.6;color:#8b2f24;}

/* responsive */
.mkt-cta-btn{width:100%;}

@media (max-width: 860px){
  .pub-shell,.staff-shell{flex-direction:column;}
  .pub-sidebar,.staff-sidebar{width:100%;flex-direction:row;overflow-x:auto;padding:12px;}
  .pub-nav,.staff-nav{flex-direction:row;}
  .pub-sidebar-footer,.staff-sidebar-footer{display:none;}
  .staff-main{padding:20px;}
  .pub-content{padding:20px 14px;}

  /* marketing homepage sidebar becomes a horizontal top bar too —
     keep its login/signup button visible but no longer full-width */
  .mkt-sidebar-footer{border-top:none;margin-top:0;padding:8px 0 8px 10px;flex-shrink:0;}
  .mkt-cta-btn{width:auto;white-space:nowrap;}
}

/* marketing homepage — phone-sized screens */
@media (max-width: 640px){
  .mkt-hero-topbar{padding:14px 18px;}
  .mkt-hero-inner{padding:26px 18px 0 !important;}
  .mkt-h1{font-size:26px !important;line-height:1.22 !important;}
  .mkt-hero-sub{font-size:14px !important;margin:12px 0 22px !important;}
  .mkt-features{gap:20px !important;margin-bottom:26px !important;}
  .mkt-hiw{padding:0 18px !important;}
  .mkt-steps-card{padding:20px 18px !important;transform:none !important;margin-top:20px;}
  .mkt-hero-spacer{height:0 !important;}
  .mkt-services{padding:36px 18px 20px !important;}
  .mkt-footer{padding:20px 18px !important;justify-content:center !important;text-align:center;}
}