/* ============================================================
   Aurora Glass — Made For Artist backend design system
   One source of truth for client / studio / super-admin / auth.
   Loaded AFTER app.css; overrides Bootstrap + legacy blue.
   ============================================================ */
:root{
  --au-ink:#2B1E24; --au-ink-2:#6E5A63; --au-ink-3:#9A8791;
  --au-rose:#D96A85; --au-berry:#A83A5B; --au-berry-deep:#7C2743;
  --au-line:rgba(124,39,67,.10);
  --au-glass:rgba(255,255,255,.55);
  --au-glass-strong:rgba(255,255,255,.74);
  --au-glass-line:rgba(255,255,255,.72);
  --au-ok:#12A594; --au-ok-bg:rgba(18,165,148,.12);
  --au-warn:#C77A18; --au-warn-bg:rgba(199,122,24,.14);
  --au-crit:#D64562; --au-crit-bg:rgba(214,69,98,.12);
  --au-shadow:0 22px 60px -26px rgba(120,20,60,.45);
  --au-shadow-sm:0 10px 30px -16px rgba(120,20,60,.32);
}

/* ── Aurora mesh ground ──────────────────────────────────── */
html{background:var(--mfa-ground,#FBE6EE) !important}
body{background:transparent !important}
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--mfa-ground,#FCDCE8)}
.aurora::before,.aurora::after{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(40% 44% at 16% 20%, rgba(var(--mfa-b1,255,158,193),.95), transparent 62%),
    radial-gradient(36% 42% at 84% 12%, rgba(var(--mfa-b2,196,150,255),.85), transparent 60%),
    radial-gradient(48% 50% at 68% 90%, rgba(var(--mfa-b3,255,184,138),.8), transparent 62%),
    radial-gradient(42% 48% at 28% 84%, rgba(var(--mfa-b4,255,126,176),.7), transparent 60%);
  filter:blur(6px);
  animation:mfaDrift 26s ease-in-out infinite alternate;
}
.aurora::after{animation-duration:34s;animation-direction:alternate-reverse;opacity:.7;mix-blend-mode:screen}
@keyframes mfaDrift{
  0%{transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg)}
  100%{transform:translate3d(4%,3%,0) scale(1.12) rotate(6deg)}
}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size:4px 4px;}
@media (prefers-reduced-motion:reduce){.aurora::before,.aurora::after{animation:none}}

/* ── Glass panels (Bootstrap cards + studio blocks) ──────── */
.card,.card-block{
  background:linear-gradient(158deg, rgba(255,255,255,.66), rgba(255,238,244,.5)) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:24px !important;
  box-shadow:0 26px 64px -28px rgba(120,20,60,.5), inset 0 1px 0 rgba(255,255,255,.85) !important;
  position:relative;
}
.card::before,.card-block::before{
  content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:radial-gradient(140% 90% at 12% -10%, rgba(255,255,255,.5), transparent 46%);
}
.card>*,.card-block>*{position:relative;z-index:1}
.card .card-header,.card .card-footer{background:transparent !important;border-color:var(--au-line) !important}
.list-group-item{background:transparent !important;border-color:var(--au-line) !important}
.table{--bs-table-bg:transparent}
.modal-content{background:var(--au-glass-strong) !important;backdrop-filter:blur(24px);
  border:1px solid var(--au-glass-line) !important;border-radius:22px !important}
.dropdown-menu{background:var(--au-glass-strong) !important;backdrop-filter:blur(20px);
  border:1px solid var(--au-glass-line) !important;border-radius:16px !important;box-shadow:var(--au-shadow-sm) !important}

/* ── App top navbar (client / reception / staff) ─────────── */
.wn-navbar{
  background:linear-gradient(135deg,rgba(217,106,133,.88),rgba(168,58,91,.92)) !important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 10px 30px -18px rgba(120,20,60,.6);
}
.wn-navbar::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}

/* ── Studio nav (solo / business owner) — kill legacy blue ── */
.studio-nav{
  background:var(--au-glass-strong) !important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--au-glass-line) !important;
}
.studio-logo .glyph{background:linear-gradient(140deg,var(--au-rose),var(--au-berry-deep)) !important}
.studio-tabs a.is-active{color:var(--au-berry) !important;border-bottom-color:var(--au-rose) !important}
.studio-tabs a:hover,.studio-nav-actions a:hover{color:var(--au-berry) !important}

/* ── Buttons → gradient pills ────────────────────────────── */
.btn-primary,.btn-info,.btn-sky{
  background:linear-gradient(135deg,var(--au-rose),var(--au-berry)) !important;
  border:0 !important;color:#fff !important;font-weight:700;border-radius:999px !important;
  box-shadow:0 16px 30px -14px rgba(124,39,67,.6);
  transition:transform .14s ease, box-shadow .14s ease;
}
.btn-primary:hover,.btn-info:hover,.btn-sky:hover{transform:translateY(-2px);
  box-shadow:0 20px 34px -14px rgba(124,39,67,.7);color:#fff !important}
.btn-outline-primary,.btn-outline-sky{
  color:var(--au-berry) !important;border:1.5px solid var(--au-rose) !important;
  border-radius:999px !important;background:rgba(255,255,255,.5) !important;font-weight:600;
}
.btn-outline-primary:hover,.btn-outline-sky:hover{background:rgba(217,106,133,.14) !important;color:var(--au-berry-deep) !important}
.btn-light,.btn-outline-secondary{border-radius:999px !important}
.btn-success{background:linear-gradient(135deg,#2fd6b8,var(--au-ok)) !important;border:0 !important;border-radius:999px !important}

/* ── Forms → soft glass ──────────────────────────────────── */
.form-control,.form-select{
  border-radius:14px !important;background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(124,39,67,.14) !important;
}
.form-control:focus,.form-select:focus{
  border-color:var(--au-rose) !important;box-shadow:0 0 0 4px rgba(217,106,133,.18) !important;
}
.input-group-text{background:rgba(253,236,239,.85) !important;border:1px solid rgba(124,39,67,.14) !important;
  border-radius:14px 0 0 14px !important;color:var(--au-berry) !important}

/* ── Accents / semantic ──────────────────────────────────── */
.text-primary,.text-info,.text-sky{color:var(--au-rose) !important}
.bg-primary{background:var(--au-rose) !important}
.badge.bg-primary,.badge.bg-info{background:linear-gradient(135deg,var(--au-rose),var(--au-berry)) !important}
a{color:var(--au-berry)}
a:hover{color:var(--au-rose)}

/* ── New utilities for Aurora surfaces ───────────────────── */
.aurora-title,.page-head h1,
.wn-customer h2,.wn-owner h2,.wn-reception h2,.wn-staff h2,.wn-love h2{
  font-family:'Instrument Serif',Georgia,serif !important;font-weight:400 !important;
  letter-spacing:.3px;font-size:2.15rem;line-height:1.05;color:var(--au-ink) !important;
}
.aurora-title em,.page-head h1 em{font-style:italic;color:var(--au-berry)}
.pill{font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--au-ok);background:var(--au-ok-bg)}
.pill.warn{color:var(--au-warn);background:var(--au-warn-bg)}
.pill.crit{color:var(--au-crit);background:var(--au-crit-bg)}
.chip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;
  color:var(--au-berry-deep);background:rgba(217,106,133,.15)}

/* ── Frosted scrollbar ───────────────────────────────────── */
*{scrollbar-width:thin;scrollbar-color:rgba(168,58,91,.4) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(168,58,91,.35);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(168,58,91,.55);background-clip:padding-box}

/* keep app content above the aurora ground (aurora is at negative z-index, so
   position:relative alone lifts content above it — do NOT give content a positive
   z-index or it will overlay the navbar's dropdown menu and eat its clicks). */
main,.container,.container-fluid,.studio-main{position:relative}
/* the top navbar + its dropdown menu must sit ABOVE the page content */
.wn-navbar,.studio-nav{position:relative;z-index:1040}
.wn-navbar .dropdown-menu,.dropdown-menu.show{z-index:1050}

/* ============================================================
   Aurora dashboard kit — shared mockup components for every
   role dashboard (studio/owner/customer/reception/staff).
   ============================================================ */
.sd-wrap{max-width:1180px;margin:0 auto;padding:24px 24px 40px;position:relative;z-index:1}
.sd-top{display:flex;align-items:flex-start;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sd-hello .eyebrow{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--au-berry);font-weight:600}
.sd-hello h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(1.9rem,4.5vw,2.5rem);line-height:1.03;margin:2px 0 0;color:var(--au-ink)}
.sd-hello h1 em{font-style:italic;color:var(--au-berry)}
.sd-top .grow{flex:1 1 40px}
.sd-search{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);
  border-radius:999px;padding:11px 18px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);min-width:210px;color:var(--au-ink-3);
  box-shadow:0 10px 30px -18px rgba(120,20,60,.4)}
.sd-search input{border:0;background:transparent;outline:0;font:inherit;color:var(--au-ink);width:100%}
.sd-icon-btn{width:46px;height:46px;border-radius:15px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);
  display:inline-flex;align-items:center;justify-content:center;color:var(--au-berry);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  position:relative;text-decoration:none;box-shadow:0 10px 30px -18px rgba(120,20,60,.4)}
.sd-icon-btn .dot{position:absolute;top:11px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--au-crit);border:2px solid #fdeaf0}
.sd-new{display:inline-flex;align-items:center;gap:8px;border:0;font-weight:700;color:#fff !important;
  background:linear-gradient(135deg,var(--au-rose),var(--au-berry));border-radius:999px;padding:12px 20px;text-decoration:none;
  box-shadow:0 16px 30px -14px rgba(124,39,67,.7);transition:transform .14s ease}
.sd-new:hover{transform:translateY(-2px);color:#fff !important}
.sd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px}
@media (max-width:900px){.sd-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.sd-stats{grid-template-columns:1fr}}
.sd-card{position:relative;overflow:hidden;background:linear-gradient(158deg,rgba(255,255,255,.66),rgba(255,238,244,.5));
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid rgba(255,255,255,.9);border-radius:24px;box-shadow:0 26px 64px -28px rgba(120,20,60,.5),inset 0 1px 0 rgba(255,255,255,.85)}
.sd-card::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:24px;
  background:radial-gradient(140% 90% at 12% -10%,rgba(255,255,255,.5),transparent 46%)}
.sd-stat{padding:20px 20px 16px;position:relative;z-index:1}
.sd-stat .lbl{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--au-ink-2);font-weight:500}
.sd-stat .ico{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:13px;
  background:linear-gradient(150deg,rgba(217,106,133,.2),rgba(168,58,91,.14));color:var(--au-berry)}
.sd-stat .num{font-size:2rem;font-weight:800;letter-spacing:-1px;margin:12px 0 2px;color:var(--au-ink);font-variant-numeric:tabular-nums}
.sd-stat .sub{font-size:12px;font-weight:600;color:var(--au-ink-3)}
.sd-spark{position:absolute;right:14px;bottom:14px;width:74px;height:30px;opacity:.85}
.sd-row{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-top:18px}
@media (max-width:900px){.sd-row{grid-template-columns:1fr}}
.sd-panel{background:linear-gradient(158deg,rgba(255,255,255,.66),rgba(255,238,244,.5));
  -webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid rgba(255,255,255,.9);border-radius:24px;box-shadow:0 26px 64px -28px rgba(120,20,60,.5),inset 0 1px 0 rgba(255,255,255,.85);overflow:hidden}
.sd-hd{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 6px}
.sd-hd h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.5rem;margin:0;color:var(--au-ink)}
.sd-hd a{font-size:12.5px;color:var(--au-berry);font-weight:600;text-decoration:none}
.sd-appt{display:flex;align-items:center;gap:14px;padding:14px 22px;border-top:1px solid var(--au-line)}
.sd-appt:first-of-type{border-top:0}
.sd-appt .t{width:64px;flex-shrink:0;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;color:var(--au-ink)}
.sd-appt .t small{display:block;font-weight:500;color:var(--au-ink-3);font-size:11px}
.sd-appt .av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff}
.sd-appt .body{flex:1;min-width:0}
.sd-appt .body b{font-weight:600;font-size:14px;color:var(--au-ink)}
.sd-appt .body span{display:block;font-size:12px;color:var(--au-ink-2)}
.sd-empty{padding:40px 22px;text-align:center;color:var(--au-ink-3)}
.sd-empty i{font-size:1.8rem;color:var(--au-rose);display:block;margin-bottom:.5rem}

/* ── Kit polish + interactivity ──────────────────────────── */
.sd-card{min-height:118px;transition:transform .16s ease, box-shadow .16s ease}
.sd-card:hover{transform:translateY(-3px);box-shadow:0 34px 72px -30px rgba(120,20,60,.55),inset 0 1px 0 rgba(255,255,255,.9)}
.sd-appt{transition:background .14s ease}
.sd-appt:hover{background:rgba(255,255,255,.42)}
.sd-search:focus-within{border-color:rgba(217,106,133,.6);box-shadow:0 0 0 4px rgba(217,106,133,.16)}

/* ── Responsive / mobile ─────────────────────────────────── */
@media (max-width:768px){
  .sd-wrap{padding:18px 16px 34px}
  .sd-top{gap:12px}
  .sd-top .grow{display:none}
  .sd-search{order:3;min-width:0;flex:1 1 100%}
  .sd-new{order:2}
  .sd-hello{flex:1 1 100%}
  .sd-stat .num{font-size:1.7rem}
  .sd-hd{padding:16px 18px 4px}
  .sd-hd h2{font-size:1.3rem}
  .sd-appt{flex-wrap:wrap;gap:10px 12px;padding:13px 18px}
  .sd-appt .body{flex:1 1 60%}
  .sd-appt .t{width:54px}
  .sd-appt .pill,.sd-appt .sd-chip{margin-left:auto}
}
@media (max-width:420px){
  .sd-appt .t{width:100%;order:-1;display:flex;gap:6px;align-items:baseline}
  .sd-appt .t small{display:inline}
}

/* ── App sidebar (owner / reception) → aurora glass rail ──── */
.wn-sidebar{
  background:rgba(255,255,255,.58) !important;
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border-right:1px solid rgba(255,255,255,.72) !important;
  box-shadow:10px 0 44px -32px rgba(120,20,60,.5);
}
.wn-sidebar-section{color:var(--au-berry) !important;font-weight:700 !important;letter-spacing:.07em;text-transform:uppercase;font-size:.66rem;opacity:.8}
.wn-sl{color:var(--au-ink) !important;font-weight:500;border-radius:11px !important;transition:background .14s ease,color .14s ease}
.wn-sl i{color:var(--au-berry) !important;opacity:.7}
.wn-sl:hover{background:rgba(217,106,133,.12) !important;color:var(--au-berry-deep) !important}
.wn-sl:hover i{opacity:1}
.wn-sl.active{background:rgba(217,106,133,.16) !important;color:var(--au-berry-deep) !important;font-weight:600;box-shadow:inset 3px 0 0 var(--au-rose)}
.wn-sl.active i{color:var(--au-berry-deep) !important;opacity:1}
.wn-main{background:transparent !important}