/* ═══════════════════════════════════════════════════════════════════════════
   Athidhi Comfort brand palette (Jun 2026 rebrand)
   Warm, hospitable, earthy — maroon primary, cream base, gold accent, brown text.
   
   We deliberately KEEP the legacy variable names (--indigo-*, --amber-*) so
   existing pages transform without any HTML changes. The names are semantic
   for their role in the UI, not their literal hue.
     --indigo-* → MAROON family (brand primary — headers, buttons, links)
     --amber-*  → GOLD family   (accents, chips, warning highlights)
     --slate-*  → warm-tinted NEUTRALS (backgrounds, borders, muted text)
     --cream-*  → NEW cream family (body & card backdrops)
     --brown-*  → NEW earthy text/support tones
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Maroon (brand primary) — deep burgundy ↔ blush */
  --indigo-950:#3D0A12;--indigo-900:#5C1520;--indigo-800:#7B1F2B;--indigo-700:#8B2D3C;
  --indigo-600:#A03E4E;--indigo-500:#B04E60;--indigo-400:#C77A88;--indigo-200:#EBC6CE;
  --indigo-100:#F5E1E5;--indigo-50:#FBF0F2;

  /* Gold / warm light-yellow (accent — matches logo gold #C99E3B) */
  --amber-100:#FBEAB5;--amber-300:#E0C37D;--amber-500:#C99E3B;

  /* Cream base — warm off-white for body & large surfaces */
  --cream-50:#FBF7EF;--cream-100:#F5EDD9;--cream-200:#EBE0C7;

  /* Brown text & earthy accents */
  --brown-400:#B08968;--brown-500:#8B5E3C;--brown-600:#6B4423;--brown-700:#4A2F17;
  --brown-800:#3B2410;--brown-900:#2A1A0B;

  /* Warm-tinted neutrals (retained slate-* names, subtly warmed with a
     brown undertone so they harmonise with cream instead of feeling cold). */
  --slate-50:#FBF7EF;--slate-100:#F1EBDD;--slate-200:#E4DBC7;--slate-300:#C9BB9E;
  --slate-400:#9A8B72;--slate-500:#736553;--slate-600:#544838;--slate-700:#3D3427;
  --slate-800:#2A241A;--slate-900:#1B160F;

  /* Status colours (kept as-is — emerald & red pop well on warm base) */
  --emerald-50:#ECFDF5;--emerald-100:#D1FAE5;--emerald-500:#10B981;--emerald-600:#059669;--emerald-700:#047857;
  --red-50:#FEF2F2;--red-100:#FEE2E2;--red-500:#EF4444;--red-600:#DC2626;--red-700:#B91C1C;
  --white:#FFFFFF;

  --shadow-sm:0 1px 3px rgba(75,47,23,.08);
  --shadow:0 4px 14px rgba(75,47,23,.10);
  --shadow-lg:0 12px 40px rgba(75,47,23,.18);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--slate-50);color:var(--slate-800);
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4}
body{padding-bottom:env(safe-area-inset-bottom)}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
input,select,textarea{font:inherit;color:inherit;background:var(--white);border:1px solid var(--slate-200);
  border-radius:10px;padding:12px 14px;font-size:15px;width:100%;transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo-500);box-shadow:0 0 0 4px var(--indigo-50)}
a{color:var(--indigo-700);text-decoration:none}
a:hover{text-decoration:underline}

/* === App shell === */
.appbar{position:sticky;top:0;z-index:40;background:linear-gradient(90deg,var(--indigo-950),var(--indigo-800));
  color:#fff;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  display:flex;align-items:center;gap:12px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.appbar h1{font-size:17px;margin:0;font-weight:800;letter-spacing:.2px}
.appbar .sub{font-size:9px;color:var(--indigo-100);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px}
.appbar .spacer{flex:1}
.appbar .icon-btn{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none}
.appbar .icon-btn:active{background:rgba(255,255,255,.28)}
.appbar .brand-badge{width:38px;height:38px;border-radius:50%;background:#000;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(224,195,125,.5)}
.appbar .brand-badge img{width:100%;height:100%;object-fit:cover}
.appbar .pill{background:rgba(255,255,255,.16);padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;border-radius:12px;font-weight:700;font-size:15px;letter-spacing:.1px;
  transition:transform .05s, box-shadow .15s, background .15s;user-select:none;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--indigo-700),var(--indigo-600));color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{box-shadow:var(--shadow-lg)}
.btn-primary[disabled]{opacity:.5;cursor:not-allowed}
.btn-ghost{background:var(--slate-100);color:var(--slate-700)}
.btn-ghost:hover{background:var(--slate-200)}
.btn-outline{background:#fff;color:var(--indigo-700);border:1.5px solid var(--indigo-200,#c7d2fe)}
.btn-outline:hover{background:var(--indigo-50)}
.btn-block{width:100%}
.btn-lg{padding:16px 22px;font-size:16px}
.btn-danger{background:var(--red-500);color:#fff}
.btn-danger:hover{background:var(--red-600)}

/* === Cards === */
.card{background:#fff;border-radius:14px;padding:16px;box-shadow:var(--shadow-sm);border:1px solid var(--slate-100)}
.card-h{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate-500);font-weight:700;margin-bottom:8px}

/* === Section spacing === */
.section{padding:16px}
.section h2{font-size:20px;margin:0 0 12px;font-weight:800;color:var(--slate-900)}
.section p.lead{color:var(--slate-500);font-size:14px;margin:0 0 14px}

/* === Field === */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--slate-500);font-weight:700}
.field .hint{font-size:11px;color:var(--slate-400);margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* === Chips / badges === */
.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:var(--slate-100);
  color:var(--slate-700);font-size:11px;font-weight:700}
.chip.on{background:var(--emerald-100);color:var(--emerald-700)}
.chip.warn{background:var(--amber-100);color:#B45309}
.chip.err{background:var(--red-100);color:var(--red-700)}
.chip.indigo{background:var(--indigo-50);color:var(--indigo-700)}

/* === Bottom nav (guest / admin) === */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;background:#fff;
  padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);
  border-top:1px solid var(--slate-200);display:grid;grid-template-columns:repeat(3,1fr);gap:4px;z-index:30}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;
  color:var(--slate-500);font-size:11px;font-weight:600;text-decoration:none;border-radius:10px}
.bottom-nav a.active{color:var(--indigo-700);background:var(--indigo-50)}
.bottom-nav a svg{width:22px;height:22px}
.has-bottom-nav{padding-bottom:74px}

/* === Skeleton === */
.skel{background:linear-gradient(90deg,var(--slate-100) 0%,var(--slate-200) 50%,var(--slate-100) 100%);
  background-size:200% 100%;animation:skel 1.2s infinite;border-radius:8px}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* === Modal === */
.modal-backdrop{position:fixed;inset:0;background:rgba(75,47,23,.55);display:none;align-items:flex-end;justify-content:center;z-index:60}
.modal-backdrop.on{display:flex}
.modal{background:#fff;width:100%;max-width:500px;border-radius:20px 20px 0 0;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;animation:slide-up .18s ease-out}
@keyframes slide-up{from{transform:translateY(20px);opacity:.6}to{transform:translateY(0);opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--slate-100)}
.modal-head h3{font-size:16px;margin:0;font-weight:800}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1}
.modal-foot{padding:12px 18px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--slate-100);display:flex;gap:10px}

/* === Empty === */
.empty{text-align:center;padding:40px 16px;color:var(--slate-400)}
.empty svg{width:56px;height:56px;opacity:.5;margin-bottom:10px}