/* =====================================================================
   سالن آرایشی فیل طور — استایل پنل مدیر و ناخن‌کار
   ===================================================================== */

.panel-body{background:var(--surface-2);min-height:100vh}

/* ---------------------------------------------------------- چیدمان */
.panel-shell{display:flex;min-height:100vh}
.panel-side{display:none;width:246px;flex:none;background:var(--surface);border-inline-start:1px solid var(--line);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:16px 12px}
.panel-main{flex:1;min-width:0;display:flex;flex-direction:column}

.panel-topbar{position:sticky;top:0;z-index:35;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:10px;min-height:60px}
.panel-topbar .title{font-weight:700;font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-content{padding:16px 14px 24px;flex:1;min-width:0;max-width:100%}
.panel-content.with-nav{padding-bottom:86px}

/* ---------------------------------------------------------- منوی کناری */
.side-brand{display:flex;align-items:center;gap:9px;padding:8px 10px 16px;font-weight:700;font-size:16px;color:var(--ink)}
.side-group{margin-bottom:14px}
.side-group-title{font-size:11px;color:var(--muted-2);padding:6px 12px;font-weight:600;letter-spacing:.2px}
.side-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);
  color:var(--ink-2);font-size:14px;margin-bottom:2px;transition:all var(--t)}
.side-link:hover{background:var(--pink-tint);color:var(--ink)}
.side-link.is-active{background:var(--teal-soft);color:var(--teal-dark);font-weight:600}
.side-link .ic{flex:none;opacity:.85}
.side-link .count{margin-inline-start:auto;background:var(--pink);color:#8A5252;font-size:11px;
  padding:1px 8px;border-radius:var(--r-pill);font-weight:600}
.side-foot{margin-top:auto;padding:12px 10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted-2)}

/* کشوی موبایل */
.drawer-backdrop{position:fixed;inset:0;background:rgba(51,38,43,.42);z-index:59;display:none}
.drawer-backdrop.is-open{display:block}
.panel-side.is-open{display:flex;flex-direction:column;position:fixed;inset-block:0;inset-inline-end:0;z-index:60;
  width:270px;box-shadow:var(--sh-3);animation:drawerIn .22s ease}
@keyframes drawerIn{from{transform:translateX(-16px);opacity:.5}to{transform:translateX(0);opacity:1}}

/* ---------------------------------------------------------- کارت‌های داشبورد */
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.panel-section{margin-top:22px}
.panel-section>h2{font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:8px}

/* ---------------------------------------------------------- فیلترها */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:14px}
.filter-bar .field{margin-bottom:0;flex:1 1 140px;min-width:0}
.filter-bar .input,.filter-bar .select{min-height:44px}
.filter-actions{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.filter-actions>*{flex:0 1 auto;min-width:0}

/* ---------------------------------------------------------- تقویم پنل */
.week-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:8px;overflow-x:auto;overscroll-behavior-x:contain;max-width:100%;padding-bottom:6px}
.week-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;min-height:120px}
.week-col-head{font-size:12px;font-weight:600;text-align:center;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.week-col-head small{display:block;color:var(--muted);font-weight:400}
.appt{display:block;padding:8px 9px;border-radius:11px;font-size:12px;margin-bottom:6px;border-inline-start:3px solid;
  background:var(--surface-2);color:var(--ink)}
.appt:hover{color:var(--ink);filter:brightness(.98)}
.appt-time{font-weight:600;font-variant-numeric:tabular-nums}
.appt-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appt-serv{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appt.st-pending{border-color:var(--amber);background:var(--amber-soft)}
.appt.st-confirmed{border-color:var(--teal);background:var(--teal-soft)}
.appt.st-arrived{border-color:var(--blue);background:var(--blue-soft)}
.appt.st-in_progress{border-color:var(--purple);background:var(--purple-soft)}
.appt.st-completed{border-color:var(--green);background:var(--green-soft)}
.appt.st-cancelled_customer,.appt.st-cancelled_salon{border-color:var(--gray);background:var(--gray-soft);opacity:.75}
.appt.st-no_show{border-color:var(--red);background:var(--red-soft)}

.day-timeline{display:flex;flex-direction:column;gap:8px}
.day-slot{display:flex;gap:10px;align-items:stretch}
.day-hour{width:52px;flex:none;font-size:12px;color:var(--muted);padding-top:8px;font-variant-numeric:tabular-nums}
.day-items{flex:1;min-width:0;border-inline-start:1px dashed var(--line);padding-inline-start:10px;min-height:38px}

/* ---------------------------------------------------------- ورود */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(160deg,var(--pink-soft) 0%,var(--bg) 42%,var(--teal-tint) 100%)}
.login-card{width:100%;max-width:400px;background:var(--surface);border-radius:var(--r-xl);
  padding:26px 22px;box-shadow:var(--sh-2);border:1px solid var(--line)}
.login-logo{width:56px;height:56px;border-radius:18px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--pink),var(--teal));display:flex;align-items:center;justify-content:center;color:#fff}

/* ---------------------------------------------------------- گزارش */
.report-table td.num,.report-table th.num{text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
.mini-legend{font-size:11.5px;color:var(--muted);margin-top:6px}
.export-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}

/* ---------------------------------------------------------- ریسپانسیو پنل */
@media (min-width:1024px){
  .panel-side{display:flex;flex-direction:column}
  .panel-topbar .menu-btn{display:none}
  .panel-content{padding:22px 24px 32px}
  .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .panel-content.with-nav{padding-bottom:32px}
  .panel-bottom-nav{display:none}
}
@media (min-width:640px) and (max-width:1023px){
  .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
  .panel-side{display:none}
}