/* ==================================================================
   THEME.CSS — Dashboard application styles (shared across all pages)
   ================================================================== */

/* ---------- Theme tokens ---------- */
[data-bs-theme="dark"]{
  --bg:#0a0d11;
  --bg-elev:#0d1117;
  --surface:#151a21;
  --surface-soft:#11151b;
  --border:#232a33;
  --text:#f3f5f7;
  --text-muted:#94a3af;
  --text-faint:#5b6675;
  --topbar-bg:rgba(10,13,17,.92);
  --skel-bg:#1c232c;
  --skel-shine:rgba(255,255,255,.05);
  --scrollbar-thumb:#242b34;
  --shadow-color:rgba(0,0,0,.35);
  --hover-bg:#1c232c;
  --chip-bg:#242b34;
  --chip-bg-hover:#2c3440;
  --close-filter:invert(1) grayscale(100%) brightness(200%);
  --text-soft:#c7ced6;
  --text-disabled:#3a4451;
  --green:#34d399;
  --green-dark:#10b981;
  --green-soft:rgba(52,211,153,.1);
  --orange:#fb923c;
  --orange-soft:rgba(251,146,60,.1);
  --amber:#fbbf24;
  --amber-soft:rgba(251,191,36,.1);
  --sky:#38bdf8;
  --sky-soft:rgba(56,189,248,.1);
  --rose:#fb7185;
  --rose-soft:rgba(251,113,133,.1);
}
[data-bs-theme="light"]{
  --bg:#f4f5f7;
  --bg-elev:#ffffff;
  --surface:#ffffff;
  --surface-soft:#f1f3f5;
  --border:#e2e5ea;
  --text:#12151a;
  --text-muted:#5b6675;
  --text-faint:#8891a0;
  --topbar-bg:rgba(255,255,255,.88);
  --skel-bg:#eaecef;
  --skel-shine:rgba(255,255,255,.9);
  --scrollbar-thumb:#d3d7dc;
  --shadow-color:rgba(20,25,35,.08);
  --hover-bg:#eef0f3;
  --chip-bg:#e9ecef;
  --chip-bg-hover:#dde1e6;
  --close-filter:none;
  --text-soft:#333a44;
  --text-disabled:#c3c8cf;
  --green:#059669;
  --green-dark:#047857;
  --green-soft:rgba(5,150,105,.12);
  --orange:#c2410c;
  --orange-soft:rgba(194,65,12,.12);
  --amber:#b45309;
  --amber-soft:rgba(180,83,9,.12);
  --sky:#0369a1;
  --sky-soft:rgba(3,105,161,.12);
  --rose:#be123c;
  --rose-soft:rgba(190,18,60,.12);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
  transition:background .2s ease,color .2s ease;
}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

a{text-decoration:none;}

/* ---------- Layout ---------- */
.app-shell{display:flex;overflow:hidden;}
.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;}
.main-scroll{flex:1;overflow-y:auto;padding:1.5rem 1rem;}
@media(min-width:576px){.main-scroll{padding:1.75rem 1.5rem;}}
@media(min-width:992px){.main-scroll{padding:2rem 2.25rem;}}
.content-max{max-width:1180px;margin:0 auto;}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;top:0;left:0;height:100vh;width:272px;
  background:var(--bg-elev);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:1060;
}
.sidebar.show{transform:translateX(0);}
@media(min-width:768px){
  .sidebar{position:sticky;top:0;height:100%;transform:none;flex-shrink:0;z-index:1;}
  .sidebar-overlay{display:none !important;}
}
.sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1055;display:none;
}
.sidebar-overlay.show{display:block;}

.brand{display:flex;align-items:center;gap:.65rem;padding:1.25rem 1.1rem;}

.nav-section-label{
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);padding:.4rem .9rem .3rem;
}
.side-nav{flex:1;overflow-y:auto;padding:0 .65rem;}
.nav-link-item{
  display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.62rem .75rem;border-radius:.6rem;border:0;background:transparent;
  color:var(--text-muted);font-size:.86rem;font-weight:500;text-align:left;
  transition:background .15s,color .15s;
}
.nav-link-item i{font-size:1rem;color:var(--text-faint);flex-shrink:0;}
.nav-link-item:hover{background:var(--hover-bg);color:var(--text);}
.nav-link-item:hover i{color:var(--text-muted);}
.nav-link-item.active{background:var(--green-soft);color:var(--green);}
.nav-link-item.active i{color:var(--green);}

.submenu{margin-left:1.05rem;padding-left:.9rem;border-left:1px solid var(--border);
  display:flex;flex-direction:column;gap:.15rem;margin-top:.15rem;margin-bottom:.35rem;}
.submenu .nav-link-item{padding:.5rem .7rem;font-size:.83rem;}

.help-card{
  margin:0 .75rem .75rem;padding:1rem;border-radius:.85rem;
  background:linear-gradient(160deg,var(--hover-bg),var(--surface-soft));border:1px solid var(--border);
}
.help-card p.title{font-size:.78rem;font-weight:600;color:var(--text);margin:0 0 .2rem;}
.help-card p.desc{font-size:.7rem;color:var(--text-faint);margin:0 0 .7rem;line-height:1.4;}
.help-card button{width:100%;font-size:.72rem;padding:.4rem;border-radius:.5rem;
  background:var(--chip-bg);border:0;color:var(--text);font-weight:500;}
.help-card button:hover{background:var(--chip-bg-hover);}

.signout-wrap{border-top:1px solid var(--border);padding:.6rem;}
.signout-btn{color:var(--text-faint);}
.signout-btn:hover{color:var(--rose);background:var(--hover-bg);}

/* ---------- Header ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1rem;background:var(--topbar-bg);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
@media(min-width:576px){.topbar{padding:.85rem 1.5rem;}}
.icon-btn{
  width:38px;height:38px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;
  background:var(--surface-soft);border:1px solid var(--border);color:var(--text-muted);position:relative;
}
.icon-btn:hover{color:var(--text);background:var(--hover-bg);}
.icon-btn .dot{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--orange);}
.search-box{
  display:none;align-items:center;gap:.5rem;background:var(--surface-soft);
  border:1px solid var(--border);border-radius:.6rem;padding:.5rem .8rem;min-width:200px;
}
@media(min-width:576px){.search-box{display:flex;}}
.search-box input{background:transparent;border:0;color:var(--text);font-size:.83rem;width:100%;}
.search-box input:focus{outline:none;}
.search-box input::placeholder{color:var(--text-faint);}
.avatar-chip{display:flex;align-items:center;gap:.6rem;}
.avatar-circle{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#fdba74,#ea580c);
  display:flex;align-items:center;justify-content:center;color:#2c0e02;
  font-size:.72rem;font-weight:700;
}
.avatar-name{font-size:.78rem;font-weight:600;color:var(--text);line-height:1.1;}
.avatar-role{font-size:.68rem;color:var(--text-faint);}

/* ---------- Generic ---------- */
.card-surface{background:var(--surface);border:1px solid var(--border);border-radius:1rem;}
.heading-row{margin-bottom:1.4rem;display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-end;justify-content:space-between;}
.heading-row h1{font-size:1.3rem;font-weight:700;margin:0;color:var(--text);}
.heading-row p{font-size:.83rem;color:var(--text-muted);margin:.25rem 0 0;}

.btn-brand{
  background:var(--green);border:0;color:#04140c;font-weight:600;font-size:.83rem;
  border-radius:.6rem;padding:.62rem 1.1rem;display:inline-flex;align-items:center;gap:.45rem;
  box-shadow:0 10px 22px -8px rgba(16,185,129,.45);
}
.btn-brand:hover{background:#5eead4;color:#04140c;}
.btn-brand:disabled{background:var(--border);color:var(--text-faint);box-shadow:none;cursor:not-allowed;}
.btn-soft{
  background:var(--chip-bg);border:0;color:var(--text);font-weight:500;font-size:.83rem;
  border-radius:.6rem;padding:.62rem 1.1rem;
}
.btn-soft:hover{background:var(--chip-bg-hover);color:var(--text);}

.badge-status{
  display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .7rem;border-radius:999px;
  font-size:.72rem;font-weight:600;
}
.badge-status .bdot{width:6px;height:6px;border-radius:50%;}
.st-confirmed{background:var(--green-soft);color:var(--green);}
.st-confirmed .bdot{background:var(--green);}
.st-pending{background:var(--amber-soft);color:var(--amber);}
.st-pending .bdot{background:var(--amber);}
.st-completed{background:var(--sky-soft);color:var(--sky);}
.st-completed .bdot{background:var(--sky);}
.st-cancelled{background:var(--rose-soft);color:var(--rose);}
.st-cancelled .bdot{background:var(--rose);}

.badge-pay{padding:.32rem .7rem;border-radius:999px;font-size:.72rem;font-weight:600;}
.pay-paid{background:var(--green-soft);color:var(--green);}
.pay-pending{background:var(--amber-soft);color:var(--amber);}
.pay-refunded{background:var(--chip-bg);color:var(--text-muted);}

/* ---------- Stat cards ---------- */
.stat-card{padding:1.1rem;border-radius:.9rem;}
.stat-icon{width:38px;height:38px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:1rem;}
.stat-val{font-size:1.5rem;font-weight:700;margin:.7rem 0 0;color:var(--text);}
.stat-label{font-size:.72rem;color:var(--text-faint);}

/* ---------- Booking cards ---------- */
.booking-card{padding:1.15rem;display:flex;flex-direction:column;height:100%;transition:border-color .15s;}
.booking-card:hover{border-color:var(--text-disabled);}
.booking-eyebrow{font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);font-weight:600;}
.booking-title{font-size:1.02rem;font-weight:700;color:var(--text);margin:.15rem 0 0;}
.booking-id{font-size:.75rem;color:var(--text-faint);margin:.65rem 0 1rem;}
.booking-id b{color:var(--text-muted);font-weight:600;}
.booking-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem;background:var(--surface-soft);
  border:1px solid var(--border);border-radius:.7rem;padding:.8rem;margin-bottom:1rem;
}
.meta-label{font-size:.68rem;color:var(--text-faint);display:flex;align-items:center;gap:.35rem;}
.meta-val{font-size:.85rem;font-weight:600;color:var(--text);margin-top:.2rem;}

.tab-pill{
  border:1px solid var(--border);background:var(--surface);color:var(--text-muted);
  font-size:.76rem;font-weight:600;border-radius:999px;padding:.5rem 1rem;
}
.tab-pill.active{background:var(--green);color:#04140c;border-color:var(--green);}
.tab-pill:hover:not(.active){color:var(--text);}

/* ---------- Calendar ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.28rem;}
.cal-dow{text-align:center;font-size:.68rem;font-weight:600;color:var(--text-faint);padding:.3rem 0;}
.cal-cell{aspect-ratio:1/1;border-radius:.55rem;border:0;background:transparent;color:var(--text-soft);font-size:.85rem;font-weight:500;}
.cal-cell:hover:not(:disabled):not(.selected){background:var(--hover-bg);}
.cal-cell.selected{background:var(--green);color:#04140c;font-weight:700;}
.cal-cell.today:not(.selected){background:var(--hover-bg);color:var(--green);box-shadow:inset 0 0 0 1px rgba(52,211,153,.4);}
.cal-cell:disabled{color:var(--text-disabled);text-decoration:line-through;cursor:not-allowed;}
.cal-legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.7rem;color:var(--text-faint);margin-top:.9rem;}
.cal-legend span{display:inline-flex;align-items:center;gap:.4rem;}
.legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block;}

.program-pick{
  text-align:left;border-radius:.8rem;padding:.9rem;border:1px solid var(--border);background:var(--surface-soft);
}
.program-pick.active{border-color:rgba(52,211,153,.45);background:var(--green-soft);}
.program-pick .pname{font-size:.86rem;font-weight:700;color:var(--text);}
.program-pick.active .pname{color:var(--green);}
.program-pick .pmeta{font-size:.72rem;color:var(--text-faint);margin-top:.2rem;}

.slot-btn{
  border-radius:.6rem;padding:.6rem .5rem;font-size:.78rem;font-weight:600;
  border:1px solid var(--border);background:var(--surface-soft);color:var(--text-soft);
}
.slot-btn:hover:not(:disabled):not(.selected){border-color:rgba(52,211,153,.4);color:var(--green);}
.slot-btn.selected{background:var(--green);color:#04140c;border-color:var(--green);}
.slot-btn:disabled{color:var(--text-disabled);text-decoration:line-through;cursor:not-allowed;}

/* ---------- Modal / toast tweaks ---------- */
.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:1rem;}
.detail-row{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid var(--border);}
.detail-row:last-child{border-bottom:0;}
.detail-row .k{font-size:.76rem;color:var(--text-faint);}
.detail-row .v{font-size:.86rem;font-weight:600;color:var(--text);}

.toast{background:var(--surface);border:1px solid rgba(52,211,153,.35);}

.empty-state, .error-state{padding:3.5rem 1.5rem;text-align:center;}
.state-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.4rem;}

.form-control-dark{
  background:var(--surface-soft);border:1px solid var(--border);color:var(--text);
  border-radius:.55rem;font-size:.85rem;padding:.55rem .75rem;
}
.form-control-dark:focus{background:var(--surface-soft);color:var(--text);border-color:var(--green);box-shadow:0 0 0 .2rem rgba(52,211,153,.15);}
.field-label{font-size:.72rem;color:var(--text-faint);display:flex;align-items:center;gap:.35rem;margin-bottom:.35rem;}
.field-val{font-size:.87rem;font-weight:600;color:var(--text);}

.app-close{filter:var(--close-filter);}

.theme-toggle{position:relative;overflow:hidden;}
.theme-toggle i{transition:transform .35s ease,opacity .2s ease;}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
[data-bs-theme="dark"] .theme-toggle .icon-sun{opacity:0;transform:translate(-50%,-50%) rotate(-90deg) scale(.4);}
[data-bs-theme="dark"] .theme-toggle .icon-moon{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1);}
[data-bs-theme="light"] .theme-toggle .icon-moon{opacity:0;transform:translate(-50%,-50%) rotate(90deg) scale(.4);}
[data-bs-theme="light"] .theme-toggle .icon-sun{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1);}
.theme-toggle .icon-sun{color:var(--orange);}
.theme-toggle .icon-moon{color:var(--sky);}

/* ---------- Layout adjustment: reserve space for the fixed site navbar,
   let the site footer sit below the app-shell in normal document flow ---------- */
.navbar .container,
.footer .container{ max-width:1470px; margin:0 auto; padding:0 1rem; }
@media(min-width:576px){ .navbar .container, .footer .container{ padding:0 1.5rem; } }

.app-shell{ height:calc(100vh - 78px); margin-top:108px; }
@media(max-width:960px){ .app-shell{ height:calc(100vh - 76px); margin-top:76px; } }