/* =====================================================
   Maid Finder • Customer App • Brand Theme (v3)
   ===================================================== */
:root{
  /* Brand Palette */
  --brand-50:#eef5ff;
  --brand-100:#d9e9ff;
  --brand-200:#b7d4ff;
  --brand-300:#92beff;
  --brand-400:#6aa6fb;
  --brand-500:#428cf5;
  --brand-600:#1e73e5; /* Primary */
  --brand-700:#195fbd;
  --brand-800:#144c97;
  --brand-900:#0d376d;

  --accent-600:#00BFA6;
  --warning-600:#FFB300;
  --danger-600:#E53935;
  --neutral-25:#fafbfd;
  --neutral-50:#f5f7fb;
  --neutral-100:#eef1f6;
  --neutral-200:#e6eaf2;
  --neutral-700:#4b5563;
  --text:#1f2937;
  --bg:var(--neutral-50);

  /* Elevation & Radius */
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 6px 20px rgba(0,0,0,.08);

  /* Component Tokens */
  --btn-primary-bg:var(--brand-600);
  --btn-primary-hov:#175fbc;
  --btn-outline:#d5e6fb;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
}

/* Utilities & Components */
.card-soft{ background:#fff; border-radius:var(--radius); border:1px solid var(--neutral-100); box-shadow:var(--shadow-sm) }
.badge-soft{ background:var(--brand-100); color:var(--brand-700); border:1px solid var(--brand-200) }
.hero{ background:linear-gradient(180deg,#fff,#f2f7ff); border-bottom:1px solid var(--neutral-100) }
.form-section{ background:#fff; border-radius:var(--radius); padding:1rem; border:1px solid var(--neutral-100); box-shadow:var(--shadow-sm) }
.kpi{ display:flex; gap:16px; align-items:center; padding:14px 16px; border-radius:12px; background:#fff; border:1px solid var(--neutral-100); box-shadow:var(--shadow-sm) }
.kpi .n{ font-weight:700; font-size:1.1rem }
.btn-round{ border-radius:999px }
.avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:var(--shadow-sm)}
.avatar-lg{ width:72px; height:72px }
.rating{ color:#f5b300 }
.table thead th{ background:#f7f9fc }
.token{ font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:#f0f3f9; padding:.25rem .5rem; border-radius:6px; border:1px solid #e8edf5 }

/* Buttons override */
.btn-primary{ background:var(--btn-primary-bg); border-color:var(--btn-primary-bg) }
.btn-primary:hover{ background:var(--btn-primary-hov); border-color:var(--btn-primary-hov) }
.btn-outline-secondary{ border-color:var(--btn-outline) }
a{ color:var(--brand-700) }
a:hover{ color:var(--brand-800) }

/* Calendar */
.calendar-toolbar{ display:flex; gap:.5rem; align-items:center; justify-content:space-between; margin-bottom:10px }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px }
.calendar-head{ font-weight:600; color:#6b7280; text-align:center }
.calendar-cell{
  background:#fff; border-radius:var(--radius-sm); border:1px solid var(--neutral-100);
  min-height:110px; padding:6px; position:relative; box-shadow:var(--shadow-sm);
}
.calendar-daynum{ position:absolute; right:8px; top:6px; font-size:.9rem; color:#6b7280 }
.calendar-event{
  background:var(--brand-100); border-left:3px solid var(--brand-600); padding:6px 8px; border-radius:8px; margin-top:24px;
  font-size:.85rem;
}
.calendar-event .tt{ font-weight:600 }
.calendar-legend .dot{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--brand-600); margin-right:6px }

/* Map placeholder */
.map-ph{
  height:220px; border-radius:var(--radius); border:1px dashed var(--brand-300);
  background:repeating-linear-gradient(45deg,#fafcff,#fafcff 10px,#f2f6ff 10px,#f2f6ff 20px);
  display:flex; align-items:center; justify-content:center; color:var(--brand-700);
}