/* ════════════════════════════════════════════════════════════════════
   SNEAT × سالن رز  —  Admin design system (light + dark)
   Sneat layout language (vertical menu, soft cards, subtle shadows)
   themed with the salon's Rose/Gold brand palette.
   Driven entirely by html[data-theme="light|dark"] so every panel
   follows the global theme toggle defined in base.html.
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* Brand */
  --s-rose:#c8506e; --s-rose-dark:#a03050; --s-rose-soft:#f4a0c0;
  --s-gold:#c49a3c; --s-gold-soft:#e8c870;
  --s-teal:#1a9e8a; --s-amber:#e07b00; --s-purple:#6f42c1;
  --s-success:#28c76f; --s-warning:#ff9f43; --s-danger:#ea5455; --s-info:#00bad1;

  /* ── LIGHT surfaces (Sneat light) ── */
  --s-body:#f4f3f9;            /* page background */
  --s-card:#ffffff;            /* card / panel surface */
  --s-card-2:#fafafe;          /* nested surface */
  --s-menu:#ffffff;            /* sidebar surface */
  --s-navbar:#ffffff;          /* topbar surface */
  --s-heading:#32303e;         /* strong heading text */
  --s-body-txt:#5f5d6e;        /* body text */
  --s-muted:#a5a3b1;           /* muted text */
  --s-border:#e7e7ee;          /* hairline borders */
  --s-hover:#f1f0f7;           /* row / item hover */
  --s-shadow:0 .25rem 1.125rem -.25rem rgba(34,33,55,.10);
  --s-shadow-lg:0 .5rem 2rem -.25rem rgba(34,33,55,.16);
  --s-rose-bg:rgba(200,80,110,.12);    /* tinted active / hover */
  --s-radius:.625rem;          /* Sneat card radius (~10px) */
  --s-radius-lg:.75rem;
  --sidebar-w:260px;
  --topbar-h:64px;
}

/* ── DARK surfaces (Sneat dark, salon-tinted) ── */
html[data-theme="dark"]{
  --s-body:#0f0a0d;
  --s-card:#1a1016;
  --s-card-2:#211520;
  --s-menu:#1a1016;
  --s-navbar:#1a1016;
  --s-heading:#f3e8ee;
  --s-body-txt:rgba(243,232,238,.78);
  --s-muted:rgba(243,232,238,.45);
  --s-border:rgba(243,232,238,.08);
  --s-hover:rgba(243,232,238,.04);
  --s-shadow:0 .25rem 1.125rem -.25rem rgba(0,0,0,.5);
  --s-shadow-lg:0 .5rem 2rem -.25rem rgba(0,0,0,.6);
  --s-rose-bg:rgba(200,80,110,.18);
}

/* ════════ APP SHELL ════════ */
.app-shell{display:flex;min-height:100vh;background:var(--s-body);transition:background .35s;direction:rtl}
.app-main{
  flex:1;min-width:0;
  margin-inline-start:var(--sidebar-w);
  padding:calc(var(--topbar-h) + 1.5rem) 1.75rem 2rem;
  min-height:100vh;
  direction:rtl;
}
@media(max-width:992px){
  .app-main{margin-inline-start:0;padding:calc(var(--topbar-h) + 1rem) 1rem 1.5rem}
}

/* Page heading */
.page-head{margin-bottom:1.5rem}
.page-head .eyebrow{font-size:.75rem;font-weight:600;color:var(--s-rose);letter-spacing:.3px;text-transform:uppercase;display:block;margin-bottom:.25rem}
.page-head h4{font-size:1.375rem;font-weight:700;color:var(--s-heading);margin:0}
.page-head .sub{font-size:.85rem;color:var(--s-muted);margin-top:.25rem}

/* ════════ SNEAT VERTICAL MENU (sidebar) ════════ */
.s-menu{
  position:fixed;inset-block:0;inset-inline-start:0;
  width:var(--sidebar-w);height:100vh;z-index:1030;
  background:
    radial-gradient(130% 26% at 100% 0%, rgba(200,80,110,.10), transparent 62%),
    radial-gradient(120% 24% at 0% 100%, rgba(124,92,246,.08), transparent 60%),
    color-mix(in srgb, var(--s-menu) 78%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  border-inline-end:1px solid color-mix(in srgb, var(--s-border) 55%, transparent);
  display:flex;flex-direction:column;direction:rtl;
  box-shadow:var(--s-shadow);
  transition:transform .3s ease,background .35s;
}
.s-menu-brand{
  height:var(--topbar-h);flex-shrink:0;
  display:flex;flex-direction:row-reverse;align-items:center;gap:.6rem;
  padding:0 1.4rem;border-bottom:1px solid var(--s-border);
  text-decoration:none;
}
.s-menu-brand .logo{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--s-rose),var(--s-rose-dark));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  box-shadow:0 4px 12px rgba(200,80,110,.4);
}
.s-menu-brand .name{font-size:1.15rem;font-weight:800;color:var(--s-heading);letter-spacing:-.2px}

.s-menu-inner{flex:1;overflow-y:auto;padding:.75rem .85rem 1.5rem}
.s-menu-inner::-webkit-scrollbar{width:5px}
.s-menu-inner::-webkit-scrollbar-thumb{background:var(--s-border);border-radius:3px}

/* User mini-card at top of menu */
.s-menu-user{
  display:flex;flex-direction:row-reverse;align-items:center;gap:.7rem;
  padding:.7rem .8rem;margin-bottom:.6rem;
  border-radius:var(--s-radius);
  background:var(--s-rose-bg);
}
.s-menu-user .av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--s-rose),var(--s-rose-dark));
  color:#fff;font-weight:800;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
}
.s-menu-user .av img{width:100%;height:100%;object-fit:cover}
.s-menu-user .nm{font-size:.85rem;font-weight:700;color:var(--s-heading);line-height:1.2}
.s-menu-user .rl{font-size:.7rem;color:var(--s-rose);font-weight:600}

.s-menu-label{
  font-size:.7rem;font-weight:600;color:var(--s-muted);
  text-transform:uppercase;letter-spacing:.6px;
  padding:1rem .9rem .4rem;direction:rtl;text-align:right;
}
.s-menu-label::before{content:'';display:none}

.s-menu-item{
  display:flex;flex-direction:row-reverse;align-items:center;gap:.75rem;
  padding:.62rem .9rem;margin:.2rem 0;
  border-radius:14px;
  color:var(--s-body-txt);font-size:.9rem;font-weight:500;
  text-decoration:none;position:relative;overflow:hidden;
  border:1px solid transparent;
  transition:background .22s cubic-bezier(.22,1,.36,1),color .22s,
             box-shadow .22s,border-color .22s,transform .18s cubic-bezier(.22,1,.36,1);
}
.s-menu-item i{font-size:1.15rem;opacity:.85;flex-shrink:0;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.s-menu-item span{flex:1;text-align:right;direction:rtl}

/* glass hover */
.s-menu-item:hover{
  background:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.75);
  color:var(--s-heading);
  box-shadow:0 8px 20px rgba(60,70,170,.1),inset 0 1px 0 rgba(255,255,255,.6);
  transform:translateX(-3px);
}
html[data-theme="dark"] .s-menu-item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 8px 20px rgba(0,0,0,.32);
}
.s-menu-item:hover i{transform:scale(1.14)}

/* selected — gradient glass pill with glow + accent bar */
.s-menu-item.active{
  background:linear-gradient(135deg,var(--s-rose),var(--s-rose-dark));
  color:#fff;font-weight:700;border-color:transparent;
  box-shadow:0 12px 26px rgba(200,80,110,.42),inset 0 1px 0 rgba(255,255,255,.3);
}
.s-menu-item.active i{opacity:1;color:#fff}
.s-menu-item.active:hover{transform:none;color:#fff}
.s-menu-item.active::after{
  content:'';position:absolute;inset-inline-start:0;top:22%;bottom:22%;width:4px;
  border-radius:0 5px 5px 0;background:rgba(255,255,255,.9);box-shadow:0 0 10px rgba(255,255,255,.6);
}
.s-menu-item.active .badge{background:rgba(255,255,255,.28)!important;color:#fff!important}
.s-menu-item .badge{margin-left:auto}

/* press scale + ripple feedback on click */
.s-menu-item.is-press{transform:scale(.97)}
.s-ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(200,80,110,.35);
  transform:translate(-50%,-50%) scale(0);
  animation:sRipple .55s ease-out forwards;
}
.s-menu-item.active .s-ripple{background:rgba(255,255,255,.45)}
html[data-theme="dark"] .s-ripple{background:rgba(255,255,255,.25)}
@keyframes sRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .s-menu-item,.s-menu-item i{transition:none}
  .s-ripple{display:none}
}

.s-menu-foot{padding:.85rem;border-top:1px solid var(--s-border)}

/* ════════ SNEAT TOPBAR (navbar) ════════ */
.s-topbar{
  position:fixed;inset-block-start:0;inset-inline-start:var(--sidebar-w);inset-inline-end:0;
  height:var(--topbar-h);z-index:1020;
  background:color-mix(in srgb,var(--s-navbar) 85%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--s-border);
  display:flex;align-items:center;gap:1rem;direction:rtl;
  padding:0 1.5rem;transition:background .35s,inset-inline-start .3s;
}
@media(max-width:992px){.s-topbar{inset-inline-start:0}}
.s-topbar .menu-toggle{
  display:none;background:none;border:none;font-size:1.4rem;color:var(--s-body-txt);cursor:pointer;
}
@media(max-width:992px){.s-topbar .menu-toggle{display:block}}
.s-search{
  flex:1;max-width:360px;display:flex;align-items:center;gap:.6rem;
  color:var(--s-muted);font-size:.88rem;
}
.s-search i{font-size:1.2rem}
.s-topbar-actions{margin-inline-start:auto;display:flex;align-items:center;gap:.4rem}
.s-icon-btn{
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:transparent;color:var(--s-body-txt);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  transition:background .18s,color .18s;
}
.s-icon-btn:hover{background:var(--s-hover);color:var(--s-rose)}
.s-topbar-user{
  display:flex;align-items:center;gap:.55rem;text-decoration:none;
  padding:.25rem;border-radius:50px;transition:background .18s;
}
.s-topbar-user:hover{background:var(--s-hover)}
.s-topbar-user .av{
  width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:linear-gradient(135deg,var(--s-rose),var(--s-rose-dark));
  color:#fff;font-weight:800;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
}
.s-topbar-user .av img{width:100%;height:100%;object-fit:cover}

/* ════════ CARDS ════════ */
.s-card{
  background:var(--s-card);
  border:1px solid var(--s-border);
  border-radius:var(--s-radius);
  box-shadow:var(--s-shadow);
  transition:background .35s,box-shadow .25s,transform .25s;
}
.s-card-head{
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--s-border);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.s-card-head h6{font-size:.95rem;font-weight:700;color:var(--s-heading);margin:0;display:flex;align-items:center;gap:.5rem}
.s-card-head .link{font-size:.78rem;font-weight:600;color:var(--s-rose);text-decoration:none}
.s-card-head .link:hover{text-decoration:underline}
.s-card-body{padding:1.4rem}

/* ════════ STAT / KPI CARDS (Sneat statistics card) ════════ */
.s-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.5rem}
@media(max-width:992px){.s-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.s-kpi-grid{grid-template-columns:1fr}}
.s-kpi{
  background:var(--s-card);border:1px solid var(--s-border);
  border-radius:var(--s-radius);padding:1.25rem 1.4rem;
  box-shadow:var(--s-shadow);transition:transform .25s,box-shadow .25s,background .35s;
}
.s-kpi:hover{transform:translateY(-3px);box-shadow:var(--s-shadow-lg)}
.s-kpi .ico{
  width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:.9rem;
}
.s-kpi .ico.rose{background:rgba(200,80,110,.16);color:var(--s-rose)}
.s-kpi .ico.teal{background:rgba(26,158,138,.16);color:var(--s-teal)}
.s-kpi .ico.amber{background:rgba(224,123,0,.16);color:var(--s-amber)}
.s-kpi .ico.purple{background:rgba(111,66,193,.16);color:var(--s-purple)}
.s-kpi .ico.gold{background:rgba(196,154,60,.18);color:var(--s-gold)}
.s-kpi .ico.success{background:rgba(40,199,111,.16);color:var(--s-success)}
.s-kpi .ico.danger{background:rgba(234,84,85,.16);color:var(--s-danger)}
.s-kpi .num{font-size:1.7rem;font-weight:800;color:var(--s-heading);line-height:1;margin-bottom:.25rem}
.s-kpi .lbl{font-size:.8rem;color:var(--s-muted);font-weight:500}
.s-kpi .trend{font-size:.72rem;font-weight:600;margin-top:.5rem;display:inline-flex;align-items:center;gap:.25rem}
.s-kpi .trend.up{color:var(--s-success)}
.s-kpi .trend.dn{color:var(--s-danger)}

/* ════════ LIST ROWS (recent users / appointments) ════════ */
.s-row{
  display:flex;align-items:center;gap:.9rem;
  padding:.8rem 1.4rem;border-bottom:1px solid var(--s-border);
  transition:background .18s;
}
.s-row:last-child{border-bottom:none}
.s-row:hover{background:var(--s-hover)}
.s-row .av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--s-rose),var(--s-rose-dark));
  color:#fff;font-weight:800;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}
.s-row .av img{width:100%;height:100%;object-fit:cover}
.s-row .body{flex:1;min-width:0}
.s-row .title{font-size:.88rem;font-weight:600;color:var(--s-heading)}
.s-row .meta{font-size:.75rem;color:var(--s-muted);margin-top:.1rem}
.s-row .amt{font-weight:700;color:var(--s-rose);font-size:.9rem;flex-shrink:0}

/* Time chip */
.s-time{
  flex-shrink:0;width:48px;height:48px;border-radius:10px;
  background:var(--s-rose-bg);color:var(--s-rose);
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;text-align:center;line-height:1.15;
}

/* ════════ ROLE BADGES ════════ */
.s-role{font-size:.7rem;font-weight:700;padding:.22rem .6rem;border-radius:20px}
.s-role.customer{background:rgba(26,158,138,.14);color:var(--s-teal)}
.s-role.staff{background:rgba(196,154,60,.16);color:var(--s-gold)}
.s-role.manager{background:rgba(200,80,110,.14);color:var(--s-rose)}
.s-role.admin{background:rgba(111,66,193,.14);color:var(--s-purple)}

/* ════════ STATUS BADGES ════════ */
.s-status{font-size:.72rem;font-weight:700;padding:.28rem .7rem;border-radius:20px;display:inline-flex;align-items:center;gap:.35rem}
.s-status.pending{background:rgba(255,159,67,.16);color:var(--s-warning)}
.s-status.confirmed{background:rgba(40,199,111,.16);color:var(--s-success)}
.s-status.completed{background:rgba(0,186,209,.16);color:var(--s-info)}
.s-status.cancelled{background:rgba(234,84,85,.16);color:var(--s-danger)}
.s-status.no_show{background:rgba(165,163,177,.18);color:var(--s-muted)}
.s-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.s-dot.pending{background:var(--s-warning)}
.s-dot.confirmed{background:var(--s-success)}
.s-dot.completed{background:var(--s-info)}
.s-dot.cancelled{background:var(--s-danger)}

/* ════════ QUICK-ACTION TILES ════════ */
.s-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;padding:1.2rem}
.s-action{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  padding:1rem .7rem;border-radius:var(--s-radius);
  background:var(--s-card-2);border:1px solid var(--s-border);
  text-decoration:none;transition:all .22s;text-align:center;
}
.s-action:hover{background:var(--s-rose-bg);border-color:rgba(200,80,110,.3);transform:translateY(-2px)}
.s-action i{font-size:1.4rem;color:var(--s-rose)}
.s-action span{font-size:.76rem;font-weight:600;color:var(--s-body-txt)}

/* ════════ TABLES ════════ */
.s-table{width:100%;border-collapse:collapse}
.s-table th{
  background:var(--s-card-2);color:var(--s-muted);
  font-size:.74rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:.8rem 1.2rem;text-align:start;border-bottom:1px solid var(--s-border);
}
.s-table td{padding:.85rem 1.2rem;vertical-align:middle;font-size:.86rem;color:var(--s-body-txt);border-bottom:1px solid var(--s-border)}
.s-table tbody tr:last-child td{border-bottom:none}
.s-table tbody tr:hover{background:var(--s-hover)}

/* ════════ BUTTONS ════════ */
.s-btn{
  display:inline-flex;flex-direction:row-reverse;align-items:center;gap:.45rem;
  padding:.5rem 1.1rem;border-radius:var(--s-radius);
  font-size:.85rem;font-weight:600;cursor:pointer;text-decoration:none;
  border:1px solid transparent;transition:all .2s;
}
.s-btn-primary{background:linear-gradient(135deg,var(--s-rose),var(--s-rose-dark));color:#fff;box-shadow:0 4px 12px rgba(200,80,110,.35)}
.s-btn-primary:hover{color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(200,80,110,.45)}
.s-btn-outline{background:transparent;border-color:var(--s-rose);color:var(--s-rose)}
.s-btn-outline:hover{background:var(--s-rose);color:#fff}
.s-btn-ghost{background:var(--s-card-2);color:var(--s-body-txt);border-color:var(--s-border)}
.s-btn-ghost:hover{background:var(--s-hover);color:var(--s-heading)}
.s-btn-sm{padding:.35rem .8rem;font-size:.78rem}

/* ════════ FORM CONTROLS (themed) ════════ */
.s-input,.s-select,.s-textarea{
  width:100%;background:var(--s-card);color:var(--s-heading);
  border:1px solid var(--s-border);border-radius:var(--s-radius);
  padding:.55rem .9rem;font-family:inherit;font-size:.88rem;transition:border .18s,box-shadow .18s;
}
.s-input:focus,.s-select:focus,.s-textarea:focus{
  outline:none;border-color:var(--s-rose);box-shadow:0 0 0 3px rgba(200,80,110,.12);
}
.s-label{font-size:.82rem;font-weight:600;color:var(--s-heading);margin-bottom:.35rem;display:block}

/* ════════ EMPTY STATE ════════ */
.s-empty{text-align:center;padding:2.5rem 1rem;color:var(--s-muted)}
.s-empty i{font-size:2.4rem;display:block;margin-bottom:.6rem;opacity:.4}
.s-empty p{font-size:.85rem;margin:0}

/* ════════ GRID HELPERS ════════ */
.s-grid-2{display:grid;grid-template-columns:2fr 1fr;gap:1.25rem}
.s-grid-1-1{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:992px){.s-grid-2,.s-grid-1-1{grid-template-columns:1fr}}
.s-stack{display:flex;flex-direction:column;gap:1.25rem}

/* ════════ MOBILE MENU OVERLAY ════════ */
.s-menu-overlay{
  display:none;position:fixed;inset:0;z-index:1029;
  background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
}
@media(max-width:992px){
  .s-menu{transform:translateX(100%)}
  html[dir="ltr"] .s-menu{transform:translateX(-100%)}
  .s-menu.open{transform:translateX(0)}
  .s-menu-overlay.open{display:block}
}

/* Revenue meter */
.s-meter-val{font-size:1.6rem;font-weight:800;color:var(--s-heading);margin-bottom:.7rem}
.s-meter-val span{background:linear-gradient(135deg,var(--s-rose),var(--s-gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.s-meter-bar{height:7px;border-radius:4px;background:var(--s-hover);overflow:hidden}
.s-meter-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--s-rose),var(--s-gold))}

/* fade-in */
@keyframes sFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.s-fade{animation:sFadeUp .4s ease forwards}

/* ══ Persian Datepicker — سالن رز theme ══════════════════════════════ */
.datepicker-plot-area{
  font-family:'Vazirmatn','Tahoma',sans-serif!important;
  direction:rtl!important;
  border:none!important;
  border-radius:14px!important;
  box-shadow:0 8px 32px rgba(34,33,55,.18)!important;
  overflow:hidden!important;
  min-width:280px!important;
}
/* Header (month + year + nav arrows) */
.pdp-header{
  background:linear-gradient(135deg,var(--s-rose),var(--s-rose-dark))!important;
  padding:.6rem .75rem!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
}
.pdp-header .pd-switch,.pdp-header .pdp-arrow,.pdp-header .icon{
  color:#fff!important;font-size:1rem!important;
}
.pdp-header .pd-switch{
  font-weight:700!important;font-size:.95rem!important;letter-spacing:.02em!important;
  cursor:pointer!important;
}
.pdp-header .pdp-arrow{
  background:rgba(255,255,255,.18)!important;border-radius:6px!important;
  width:28px!important;height:28px!important;display:flex!important;
  align-items:center!important;justify-content:center!important;
  cursor:pointer!important;border:none!important;
}
.pdp-header .pdp-arrow:hover{background:rgba(255,255,255,.32)!important;}
/* Day-name header row */
.datepicker-day-view .header-row .header-col,
.datepicker-day-view .header .header-col,
.datepicker-day-view .day-header{
  color:var(--s-rose)!important;font-weight:700!important;
  font-size:.75rem!important;padding:.35rem .2rem!important;
}
/* Day cells */
.datepicker-day-view .day,.datepicker-day-view [class*="day"]{
  border-radius:8px!important;font-size:.82rem!important;
  transition:background .15s,color .15s!important;
}
.datepicker-day-view .day:hover:not(.disabled):not(.selected){
  background:rgba(200,80,110,.12)!important;color:var(--s-rose)!important;
}
.datepicker-day-view .day.selected,.datepicker-day-view .selected{
  background:var(--s-rose)!important;color:#fff!important;border-radius:8px!important;
}
.datepicker-day-view .day.today:not(.selected){
  border:2px solid var(--s-rose)!important;color:var(--s-rose)!important;font-weight:700!important;
}
.datepicker-day-view .day.disabled,.datepicker-day-view .disabled{
  opacity:.3!important;cursor:not-allowed!important;
}
/* Holiday (Friday) */
.datepicker-day-view .day.holiday{color:var(--s-danger)!important;}
/* Month/Year selection panels */
.datepicker-month-view .month-item:hover,.datepicker-year-view .year-item:hover{
  background:rgba(200,80,110,.12)!important;color:var(--s-rose)!important;border-radius:8px!important;
}
.datepicker-month-view .month-item.selected,.datepicker-year-view .year-item.selected{
  background:var(--s-rose)!important;color:#fff!important;border-radius:8px!important;
}
/* Bottom toolbar (Today / Close) */
.pdp-toolbox,.datepicker-plot-area .toolbox{
  background:var(--s-hover)!important;border-top:1px solid var(--s-border)!important;
  padding:.4rem .6rem!important;
}
.pdp-toolbox button,.pdp-toolbox .btn,.datepicker-plot-area .toolbox button{
  font-family:'Vazirmatn',sans-serif!important;font-size:.78rem!important;
  color:var(--s-rose)!important;font-weight:600!important;
  background:none!important;border:none!important;cursor:pointer!important;
}
.pdp-toolbox button:hover,.datepicker-plot-area .toolbox button:hover{
  text-decoration:underline!important;
}
/* dark theme */
[data-theme="dark"] .datepicker-plot-area{background:#2b2b3b!important;color:#e0dff5!important;}
[data-theme="dark"] .datepicker-day-view .day:not(.selected):not(.disabled){color:#c0bfe0!important;}
[data-theme="dark"] .pdp-toolbox,[data-theme="dark"] .datepicker-plot-area .toolbox{
  background:#1f1f2e!important;border-top-color:#3a3a55!important;
}
/* ════════ PROFESSIONAL FORM SYSTEM ════════════════════════════════ */

/* ── Base form-control override (Rose theme) ── */
.form-control,
.form-select {
  background: var(--s-card);
  color: var(--s-heading);
  border: 1.5px solid var(--s-border);
  border-radius: 10px;
  padding: .65rem 1rem;
  font-family: inherit;
  font-size: .875rem;
  transition: border-color .18s, box-shadow .18s, background .35s, color .35s;
  direction: rtl;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--s-rose);
  box-shadow: 0 0 0 3.5px rgba(200,80,110,.12);
  background: var(--s-card);
  color: var(--s-heading);
  outline: none;
}
.form-control::placeholder { color: var(--s-muted); opacity: 1; }
.form-control[dir="ltr"], .form-control.ltr { direction: ltr; text-align: left; }
.form-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--s-heading);
  margin-bottom: .4rem;
  display: block;
}
.form-text {
  font-size: .74rem;
  color: var(--s-muted);
  margin-top: .3rem;
}

/* Checkbox & Radio Rose theme */
.form-check-input {
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--s-border);
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.form-check-input:checked {
  background-color: var(--s-rose);
  border-color: var(--s-rose);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(200,80,110,.15);
  border-color: var(--s-rose);
}
.form-check-label { font-size: .85rem; color: var(--s-body-txt); cursor: pointer; }

/* Form switch (large toggle) */
.form-switch .form-check-input {
  width: 2.8em;
  height: 1.5em;
  border-radius: 2em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.7%29'/%3e%3c/svg%3e");
  background-color: var(--s-border);
  border: none;
  transition: background-color .25s;
}
.form-switch .form-check-input:checked {
  background-color: var(--s-rose);
  border-color: var(--s-rose);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(200,80,110,.15);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255,255,255,0.7%29'/%3e%3c/svg%3e");
}

/* ── Settings Section Card (legacy — superseded by PRO SETTINGS FORM below) ── */

/* ── Input with Icon ── */
.s-field-icon {
  position: relative;
}
.s-field-icon .s-fi {
  position: absolute;
  top: 50%; right: .9rem;
  transform: translateY(-50%);
  color: var(--s-muted);
  font-size: 1rem;
  pointer-events: none;
  z-index: 2;
  transition: color .18s;
}
.s-field-icon .form-control:focus ~ .s-fi,
.s-field-icon .form-control:focus + .s-fi { color: var(--s-rose); }
.s-field-icon .form-control { padding-right: 2.6rem; }

/* ── Dark mode form overrides (global) ── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--s-card-2);
  border-color: var(--s-border);
  color: var(--s-heading);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: var(--s-card);
  border-color: var(--s-rose);
}

/* ── Btn rose (standard everywhere) ── */
.btn-rose {
  background: linear-gradient(135deg, var(--s-rose), var(--s-rose-dark));
  color: #fff !important;
  border: none;
  box-shadow: 0 4px 14px rgba(200,80,110,.32);
  font-weight: 600;
  transition: transform .18s, box-shadow .18s;
}
.btn-rose:hover, .btn-rose:focus {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200,80,110,.42);
  color: #fff !important;
}
.btn-outline-rose {
  border: 1.5px solid var(--s-rose);
  color: var(--s-rose) !important;
  background: transparent;
  font-weight: 600;
  transition: all .18s;
}
.btn-outline-rose:hover {
  background: var(--s-rose);
  color: #fff !important;
}

/* ════════ PRO SETTINGS FORM ════════════════════════════════════════ */

/* Section card — stronger visual */
.settings-section {
  background: var(--s-card);
  border: 1.5px solid var(--s-border);
  border-radius: 18px;
  margin-bottom: 1.4rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.045);
  transition: box-shadow .2s;
}
.settings-section:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* Colored top-bar accent on each section */
.settings-section::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--sec-accent, var(--s-rose));
}
.settings-section.sec-rose   { --sec-accent: var(--s-rose); }
.settings-section.sec-purple { --sec-accent: var(--s-purple); }
.settings-section.sec-blue   { --sec-accent: #2563eb; }
.settings-section.sec-teal   { --sec-accent: var(--s-teal); }
.settings-section.sec-green  { --sec-accent: #059669; }
.settings-section.sec-gold   { --sec-accent: var(--s-gold); }

/* Section header */
.settings-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--s-border);
  background: var(--s-card-2);
  position: relative;
}
.settings-section-header .sec-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.settings-section-header .sec-icon.rose   { background: rgba(200,80,110,.13); color: var(--s-rose); }
.settings-section-header .sec-icon.purple { background: rgba(111,66,193,.12); color: var(--s-purple); }
.settings-section-header .sec-icon.blue   { background: rgba(37,99,235,.11);  color: #2563eb; }
.settings-section-header .sec-icon.teal   { background: rgba(26,158,138,.13); color: var(--s-teal); }
.settings-section-header .sec-icon.green  { background: rgba(5,150,105,.11);  color: #059669; }
.settings-section-header .sec-icon.gold   { background: rgba(196,154,60,.14); color: var(--s-gold); }
.settings-section-header .sec-title { font-size: .93rem; font-weight: 700; color: var(--s-heading); margin: 0; }
.settings-section-header .sec-desc  { font-size: .74rem; color: var(--s-muted); margin: 0; }
.settings-section-header .sec-num {
  margin-inline-start: auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sec-accent, var(--s-rose));
  color: #fff;
  font-size: .7rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  opacity: .7;
  flex-shrink: 0;
}

/* Section body */
.settings-section-body { padding: 22px 24px; }
.settings-section-body .row { --bs-gutter-y: 1.1rem; }

/* ── Pro form controls ── */
.settings-section .form-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--s-heading);
  margin-bottom: .42rem;
  display: flex;
  align-items: center;
  gap: 5px;
}
.settings-section .form-control,
.settings-section .form-select {
  height: 46px;
  padding: .55rem 1rem;
  border: 1.5px solid var(--s-border);
  border-radius: 12px;
  font-size: .9rem;
  font-family: inherit;
  background: var(--s-card);
  color: var(--s-heading);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.settings-section .form-control:focus,
.settings-section .form-select:focus {
  border-color: var(--sec-accent, var(--s-rose));
  box-shadow: 0 0 0 4px rgba(200,80,110,.1);
  background: var(--s-card);
  outline: none;
}
.settings-section textarea.form-control { height: auto; min-height: 90px; }
.settings-section .form-text { font-size: .74rem; color: var(--s-muted); margin-top: 5px; }

/* ── Pro toggle row ── */
.s-toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--s-border);
  background: var(--s-card);
  transition: background .15s;
}
.s-toggle-row:hover { background: var(--s-hover, rgba(200,80,110,.03)); }
.s-toggle-row:last-child { border-bottom: none; }
.s-toggle-row .info { flex: 1; min-width: 0; }
.s-toggle-row .info .lbl  { font-size: .88rem; font-weight: 600; color: var(--s-heading); }
.s-toggle-row .info .desc { font-size: .74rem; color: var(--s-muted); margin-top: 2px; }

/* ── Rose toggle switch ── */
.s-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.s-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.s-switch-track {
  width: 46px; height: 26px;
  background: var(--s-border);
  border-radius: 13px;
  position: relative;
  transition: background .22s;
  flex-shrink: 0;
}
.s-switch input:checked ~ .s-switch-track {
  background: var(--s-rose);
}
.s-switch-track::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.s-switch input:checked ~ .s-switch-track::after {
  transform: translateX(-20px);
}
.s-switch:focus-within .s-switch-track {
  box-shadow: 0 0 0 3px rgba(200,80,110,.25);
}

/* ── Pro file upload area ── */
.s-file-area {
  border: 2px dashed var(--s-border);
  border-radius: 14px;
  padding: 24px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
  position: relative;
  background: var(--s-card-2);
  overflow: hidden;
}
.s-file-area:hover {
  border-color: var(--s-rose);
  background: rgba(200,80,110,.035);
  box-shadow: 0 0 0 4px rgba(200,80,110,.07);
}
.s-file-area input[type="file"] {
  position: absolute; inset: 0; opacity: 0;
  cursor: pointer; width: 100%; height: 100%; z-index: 3;
}
/* Hide extra ClearableFileInput text rendered by Django */
.s-file-area a,
.s-file-area span:not(.s-fa-lbl):not(.s-fa-hint):not(.s-fa-badge),
.s-file-area label:not(.s-file-area) { display: none !important; }
.s-file-area .s-fa-icon {
  font-size: 2.2rem; color: var(--s-muted); display: block; margin-bottom: 10px; line-height: 1;
}
.s-file-area .s-fa-preview {
  width: 80px; height: 80px;
  border-radius: 14px; object-fit: cover;
  margin: 0 auto 12px; display: block;
  border: 2px solid var(--s-border);
}
.s-file-area .s-fa-lbl  { font-size: .84rem; font-weight: 700; color: var(--s-heading); }
.s-file-area .s-fa-hint { font-size: .72rem; color: var(--s-muted); margin-top: 4px; }
.s-file-area .s-fa-badge {
  display: inline-block; margin-top: 10px;
  padding: 5px 14px; border-radius: 20px;
  background: rgba(200,80,110,.1); color: var(--s-rose);
  font-size: .76rem; font-weight: 600;
  border: 1px solid rgba(200,80,110,.2);
  cursor: pointer;
  transition: background .15s;
}
.s-file-area:hover .s-fa-badge { background: rgba(200,80,110,.18); }

/* ── Settings quick-nav pills ── */
.settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
}
.settings-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--s-card);
  border: 1.5px solid var(--s-border);
  color: var(--s-muted);
  transition: all .15s;
}
.settings-nav a:hover {
  border-color: var(--s-rose);
  color: var(--s-rose);
  background: rgba(200,80,110,.06);
}

/* ── Save bar at bottom ── */
.settings-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: var(--s-card);
  border-top: 1px solid var(--s-border);
  padding: 14px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 1.5rem;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}

/* Input group prefix in settings */
.settings-section .input-group-text {
  border: 1.5px solid var(--s-border);
  border-left: 0;
  border-radius: 12px 0 0 12px;
  background: var(--s-card-2);
  color: var(--s-muted);
  font-size: .82rem;
  height: 46px;
}
.settings-section .input-group .form-control {
  border-radius: 0 12px 12px 0 !important;
  border-right: 0 !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .settings-section .form-control,
[data-theme="dark"] .settings-section .form-select {
  background: var(--s-card-2);
  border-color: var(--s-border);
  color: var(--s-heading);
}
[data-theme="dark"] .settings-section .form-control:focus,
[data-theme="dark"] .settings-section .form-select:focus {
  background: var(--s-card);
}
[data-theme="dark"] .s-file-area { background: var(--s-card-2); }
[data-theme="dark"] .settings-save-bar { background: var(--s-card); }
[data-theme="dark"] .settings-nav a { background: var(--s-card-2); }

/* ════════════════════════════════════════════════════════════════════ */