/* ============================================================
   ناروِلا — «بنفش» theme overlay (v2, from docs/salonanewtheme.html)
   Loaded AFTER css/salon.css when the operator picks the violet theme in
   «تنظیمات → تم پنل». It only re-states the colour-bearing rules of
   salon.css (tokens + the hardcoded pink/gold shades); layout, sizing and
   every component that already reads a var() inherit automatically — so all
   panel components built since the demo page keep working untouched.
   ============================================================ */

/* 1. Theme tokens — vivid purple palette */
:root{
    --primary:#7c5cff; --primary-600:#6642f0; --primary-100:#ede8ff; --primary-50:#f7f5ff;
    --violet-2:#a855f7;
    --gold:#ffb547; --gold-600:#f0a02a;
    --bg:#f5f4fb; --surface:#ffffff; --ink:#241f33; --ink-soft:#5a5470; --muted:#8b85a0; --border:#ebe7f7;
    --sidebar:#221c3a; --sidebar-2:#150f28;
    --success:#12b57a; --success-bg:#e4f8f0;
    --warning:#f5a524; --warning-bg:#fff5e2;
    --info:#3b82f6;    --info-bg:#e9f1fe;
    --danger:#ef4444;  --danger-bg:#feecec;
    --shadow-sm:0 2px 8px rgba(36,31,51,.05);
    --shadow:0 10px 30px rgba(36,31,51,.07);
    --shadow-lg:0 20px 50px rgba(36,31,51,.14);
}

/* 2. Base tints */
body{
    background:
        radial-gradient(900px 500px at 100% -10%, #ede8ff 0%, transparent 60%),
        radial-gradient(700px 400px at -10% 110%, #f3ecff 0%, transparent 60%),
        var(--bg);
}
::-webkit-scrollbar-thumb{ background:#d6cfe8; }
::-webkit-scrollbar-thumb:hover{ background:var(--primary); }

/* 4. Sidebar inks + gradients */
.sidebar{ color:#cfc8e4; }
.brand-mark{ background:linear-gradient(135deg, var(--primary), var(--violet-2)); box-shadow:0 8px 22px rgba(124,92,255,.45); }
.brand-text span{ color:#8b83a8; }
.nav-title{ color:#6f6690; }
.nav-item{ color:#b7aecd; }
.nav-item.active{ background:linear-gradient(135deg, var(--primary) 0%, var(--violet-2) 100%); box-shadow:0 10px 24px rgba(124,92,255,.42); }
.user-card span, .user-card .logout{ color:#8b83a8; }
.sheet-close{ color:#cfc8e4; }
.sheet-tile{ color:#cfc8e4; }
.sheet-tile:hover{ color:#fff; }
.sheet-tile.active{ background:linear-gradient(135deg, var(--primary) 0%, var(--violet-2) 100%); box-shadow:0 8px 18px rgba(124,92,255,.3); }

/* 5. Topbar controls */
.search input{ background:#f9f8fd; }
.search input::placeholder{ color:#a9a2c0; }
.search input:focus{ box-shadow:0 0 0 4px rgba(124,92,255,.14); }
.icon-btn{ background:#f9f8fd; }
.icon-btn .dot{ background:var(--gold); }
.notif-badge{ background:var(--primary); }

/* 6. Stats + chart + progress */
.stat-icon.gold{ background:#fff4e0; color:#d9901a; }
.chart-track{ background:#f4f2fb; }
.chart-bar{ background:linear-gradient(180deg, #b9a6ff 0%, var(--primary) 100%); }
.chart-col:hover .chart-bar{ background:linear-gradient(180deg, #ffc978 0%, var(--gold) 100%); }
.progress{ background:#f0edfa; }
.progress > i.rose{ background:linear-gradient(90deg, var(--primary), var(--violet-2)); }
.progress > i.gold{ background:linear-gradient(90deg, var(--gold-600), var(--gold)); }
.progress > i.green{ background:linear-gradient(90deg, #12b57a, #4fd6a2); }

/* 9. Table + avatars + badges */
tbody td{ border-bottom:1px solid #f3f0fb; }
tbody tr:hover{ background:var(--primary-50); }
.avatar{ background:linear-gradient(135deg, var(--primary), var(--violet-2)); }
.avatar.alt-1{ background:linear-gradient(135deg, #12b5a5, #4fd6c9); }
.avatar.alt-2{ background:linear-gradient(135deg, #ff8a65, #ffb08f); }
.avatar.alt-3{ background:linear-gradient(135deg, var(--gold-600), var(--gold)); }
.badge.warning{ color:#b8790f; }
.badge.plain{ background:#f2effb; }

/* 10. Buttons, forms, switches, chips, alerts */
.btn-primary{ background:linear-gradient(135deg, var(--primary), var(--violet-2)); box-shadow:0 8px 20px rgba(124,92,255,.38); }
.btn-primary:hover{ box-shadow:0 12px 28px rgba(124,92,255,.5); }
.btn-ghost:hover{ background:#e2daff; }
.btn-dark{ background:linear-gradient(135deg, #362d55, #221c3a); box-shadow:0 8px 18px rgba(36,31,51,.25); }
.field input, .field select, .field textarea{ background:#f9f8fd; }
.field input:focus, .field select:focus, .field textarea:focus{ box-shadow:0 0 0 4px rgba(124,92,255,.14); }
.field input::placeholder, .field textarea::placeholder{ color:#a9a2c0; }
.collapse{ background:#f9f8fd; }
.switch .track{ background:#ddd7ee; }
.switch input:checked + .track{ background:linear-gradient(135deg, var(--primary), var(--violet-2)); }
.chip{ background:#f2effb; }
.chip.active, .chip:has(input:checked){ background:linear-gradient(135deg, var(--primary), var(--violet-2)); }
.alert.ok{ color:#0d8a5c; }
.control{ background:#f9f8fd; }
.control:focus{ box-shadow:0 0 0 4px rgba(124,92,255,.14); }
.control::placeholder{ color:#a9a2c0; }

/* 10c–d. Jalali/time pickers */
.jp-toggle, .tp-toggle, .jp-nav{ background:#f9f8fd; }
.jp-day.is-selected, .tp-cell.is-selected{ background:linear-gradient(135deg, var(--primary), var(--violet-2)); }
.jp-foot button.jp-clear, .tp-foot button{ background:#f2effb; }

/* 11–12. Modal + overlays */
.modal{ background:rgba(24,18,40,.5); }
.modal-close{ background:#f2effb; }
.overlay{ background:rgba(24,18,40,.45); }

/* Jalali booking calendar */
.cal-cell{ background:#f9f8fd; }
.cal-today{ box-shadow:0 0 0 3px rgba(124,92,255,.10); }

/* Mobile bottom-sheet shadow (mirrors the 720px block in salon.css). */
@media (max-width:720px){
    .sidebar{ box-shadow:0 -14px 44px rgba(24,18,40,.42); }
}

/* Front side only: the public mini-site drops amber for the violet accent —
   the gold token is re-bound on the .public-shell subtree (logo, accent bar,
   staff avatars), so the panels keep --gold untouched. */
.public-shell{ --gold:var(--violet-2); --gold-600:var(--primary-600); }