/* =========================================
   Lamira Spa – Global Styles
   Path: /static/css/style.css
   ========================================= */
/* 🌸 Lamira Spa Brand Palette — Unified Light Mode */
:root {
  /* brand core */
  --brand:#cc798a;          /* Lamira pink */
  --brand-soft:#f9e6ea;     /* light pink background tint */
  --ink:#1f2937;            /* primary text */
  --muted:#6b7280;          /* secondary text */
  --bg:#fafafa;             /* page background */
  --panel:#ffffff;          /* cards/panels */
  --line:#e5e7eb;           /* borders/dividers */
  --shadow:0 8px 30px rgba(0,0,0,.06);
  --r-sm:8px;
  --r-lg:16px;
}

/* ✅ Remove browser color-scheme switching */
@media (prefers-color-scheme: dark) {
  :root {
    /* Keep same Lamira palette (no dark override) */
    --brand:#cc798a;
    --brand-soft:#f9e6ea;
    --ink:#1f2937;
    --muted:#6b7280;
    --bg:#fafafa;
    --panel:#ffffff;
    --line:#e5e7eb;
    --shadow:0 8px 30px rgba(0,0,0,.06);
  }
}

/* Base layout uses unified tokens */
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
}
.card, .home-card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.btn.primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.btn.primary:hover{
  background:#b5677a;
}
a{color:var(--brand);}


/* Typography helpers */
.muted{ color:var(--muted); }
.lead{ font-size:1.1rem; line-height:1.6; }
.small{ font-size:.925rem; }
.kbd{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background:#f3f4f6; border:1px solid var(--line); padding:.1rem .35rem; border-radius:.25rem;
}

/* -------------------------------
   Header + Brand Fade Bar
   ------------------------------- */
header{
  position:sticky; top:0; z-index:50; overflow:hidden;
  background:var(--panel); border-bottom:1px solid var(--line);
}
header .fadebar{
  position:absolute; inset:0; pointer-events:none; opacity:.14;
  background:
    linear-gradient(90deg, var(--panel), transparent 18%, transparent 82%, var(--panel)),
    var(--lamira-header-image) center/180px no-repeat;
  animation: lamiraFadePulse 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  header .fadebar{ animation:none; }
}
@keyframes lamiraFadePulse{ 0%,100%{opacity:.08} 50%{opacity:.18} }

.nav{
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:10px 16px;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:700;
}
.brand img.logo-lg{
  height:46px; width:46px; object-fit:cover; border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.brand-name{ letter-spacing:.3px; }

/* Primary nav */
.menu{ display:flex; gap:10px; flex-wrap:wrap; }
.menu a{
  padding:8px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--panel);
  transition:border-color .15s ease;
}
.menu a.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.menu a.muted{ color:var(--muted); }
.menu a:hover{ border-color:var(--brand); }

/* Footer */
footer{
  margin-top:40px; border-top:1px solid var(--line);
  padding:18px 16px; color:var(--muted); font-size:13px;
}

/* -------------------------------
   Role buckets (client-resolved)
   ------------------------------- */
.nav-role{ display:flex; gap:10px; flex-wrap:wrap; }
.role-customer, .role-therapist, .role-admin, .role-superadmin{ display:none; }
.show-role .role-customer,
.show-role-therapist .role-therapist,
.show-role-admin .role-admin,
.show-role-superadmin .role-superadmin{ display:flex; }

/* -------------------------------
   Install Banner
   ------------------------------- */
.install-banner{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:60;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:12px 14px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:12px;
}
.install-banner .icon{
  height:36px; width:36px; border-radius:10px; background:var(--panel);
  border:1px solid var(--line); display:grid; place-items:center;
}
.install-banner .icon img{ height:26px; width:26px; border-radius:6px; }
.install-banner .txt{ flex:1; }
.install-banner .txt b{ display:block; margin-bottom:2px; }
.install-banner .actions{ display:flex; gap:8px; }
.hidden{ display:none !important; }

/* Buttons */
.btn{
  padding:8px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--panel);
  cursor:pointer; transition:transform .06s ease;
}
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn.success{ background:var(--success); border-color:var(--success); color:#fff; }
.btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.link{ border:none; background:transparent; color:var(--muted); }

/* -------------------------------
   iOS Install Modal (sheet)
   ------------------------------- */
.ios-modal.hidden{ display:none; }
.ios-modal{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:end center;
  background:rgba(17,24,39,.45);
  backdrop-filter:saturate(140%) blur(4px);
}
@media (prefers-color-scheme: dark){
  .ios-modal{ background:rgba(0,0,0,.55); }
}
.ios-modal-sheet{
  width:min(560px, 94vw); background:var(--panel); border:1px solid var(--line);
  border-radius:18px 18px 0 0; padding:16px 16px 18px;
  box-shadow:0 -20px 40px rgba(0,0,0,.15);
}
.ios-modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ios-steps{ margin:0; padding-left:1.2rem; }
.ios-steps li{ margin:.55rem 0; }
.ios-steps .hint{ display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.inline-icon{ display:inline-grid; place-items:center; margin-left:6px; opacity:.85; }

/* -------------------------------
   Components (cards, tables, forms)
   ------------------------------- */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:12px 12px 16px; margin-bottom:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.row{ display:flex; gap:8px; flex-wrap:wrap; }
.grid{ display:grid; gap:12px; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width:720px){
  .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr; }
}

/* Tables */
table{ width:100%; border-collapse:collapse; margin-top:12px; }
th,td{ border-top:1px solid var(--line); padding:8px; text-align:left; font-size:14px; vertical-align:top; }
thead th{ background:rgba(0,0,0,.02); }
tbody tr:hover{ background:rgba(0,0,0,.02); }

/* Forms */
input,select,button,textarea{
  padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--panel); color:var(--ink); outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
label{ display:block; margin:.4rem 0 .25rem; }
.help{ font-size:.85rem; color:var(--muted); }

/* Alerts/Pills */
.alert{
  padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--panel);
}
.alert.success{ border-color:color-mix(in srgb, var(--success) 40%, var(--line)); }
.alert.danger{ border-color:color-mix(in srgb, var(--danger) 40%, var(--line)); }
.pill{
  font-size:12px; border:1px solid var(--line); border-radius:999px;
  padding:2px 8px; background:#f9fafb; color:#111827;
}
@media (prefers-color-scheme: dark){
  .pill{ background:#0f172a; color:#e5e7eb; }
}

/* -------------------------------
   Responsive helpers
   ------------------------------- */
html.is-mobile .menu a{ padding:7px 10px; }
html.is-mobile .brand img.logo-lg{ height:42px; width:42px; }
html.is-tablet .brand img.logo-lg{ height:44px; width:44px; }

/* Utility spacing */
.mt-0{ margin-top:0 !important; }
.mt-2{ margin-top:.5rem !important; }
.mt-3{ margin-top:.75rem !important; }
.mt-4{ margin-top:1rem !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-2{ margin-bottom:.5rem !important; }
.mb-3{ margin-bottom:.75rem !important; }
.mb-4{ margin-bottom:1rem !important; }
.p-0{ padding:0 !important; }
.p-2{ padding:.5rem !important; }
.p-3{ padding:.75rem !important; }
.p-4{ padding:1rem !important; }

/* Width helpers */
.w-100{ width:100% !important; }
.maxw-600{ max-width:600px; }

/* Text alignment */
.text-center{ text-align:center !important; }
.text-right{ text-align:right !important; }

/* Visibility helpers */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}