/* ===================================================================
   SevinSoft Admin Theme System
   حالت‌ها: light | dark | custom
   همه رنگ‌ها با CSS Variables تعریف شده‌اند تا حالت "سفارشی" بتونه
   در زمان اجرا (JS) هرکدوم رو override کنه و در دیتابیس ذخیره بشه.
   =================================================================== */

/* هویت رنگی: تک‌سرشاخه به‌جای رنگ‌های نامرتبط. ترکیب "سرمه‌ای عمیق +
   فیروزه‌ای" برای برند SevinSoft/معجزه (تمیزی، اعتماد، حرفه‌ای‌بودن).
   نوارهای خنثی (مسیر/ابزار) به‌جای رنگ‌های شلوغِ نمای اولیه، سطح خاکستریِ
   ملایم می‌گیرند تا تمرکز روی محتوا و دکمه رنگیِ اصلی (accent) بماند. */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');

:root,
[data-theme="light"] {
  --c-header:        #0F3D3E;   /* سرمه‌ای-تیره مایل به فیروزه‌ای، برند اصلی */
  --c-breadcrumb:    #EEF2F1;   /* نوار مسیر: خنثی و روشن */
  --c-toolbar:       #F6F8F7;   /* نوار ابزار: خنثی، کمی روشن‌تر از پس‌زمینه */
  --c-sidebar:       #10262A;   /* بدنه سایدبار (پروفایل)، هم‌خانواده هدر */
  --c-sidebar-menu:  #163338;   /* لیست منو، کمی روشن‌تر برای عمق بصری */
  --c-footer:        #0F3D3E;   /* هم‌رنگ هدر برای انسجام برند */

  --c-bg:            #F1F3F6;
  --c-surface:       #FFFFFF;
  --c-surface-alt:   #F7F8FA;
  --c-border:        #E3E5EA;

  --c-text:          #1F2430;
  --c-text-muted:    #6B7280;
  --c-text-invert:   #FFFFFF;
  --c-band-text:     #1F2430;   /* رنگ متن روی نوارهای خنثی (مسیر/ابزار) */

  --c-accent:        #0EA5A0;   /* فیروزه‌ای زنده: دکمه اصلی، حالت فعال، لینک */
  --c-danger:        #E1544C;

  --shadow-sm: 0 1px 2px rgba(20, 20, 30, .06);
  --shadow-md: 0 4px 14px rgba(20, 20, 30, .10);
  --radius: 10px;
  --transition: .18s ease;
}

[data-theme="dark"] {
  --c-header:        #0B2426;
  --c-breadcrumb:    #1B2028;
  --c-toolbar:       #1B2028;
  --c-sidebar:       #081A1C;
  --c-sidebar-menu:  #0F2528;
  --c-footer:        #0B2426;

  --c-bg:            #12141C;
  --c-surface:       #1B1E29;
  --c-surface-alt:   #202433;
  --c-border:        #2B2F3D;

  --c-text:          #E7E9EE;
  --c-text-muted:    #9BA1B0;
  --c-text-invert:   #FFFFFF;
  --c-band-text:     #E7E9EE;

  --c-accent:        #1FCDA9;
  --c-danger:        #F17B75;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
}

/* حالت "سفارشی" با همین متغیرها کار می‌کند؛ JS مقادیر inline روی
   :root ست می‌کند، پس نیازی به بلوک جدا نیست - فقط یک نقطه شروع می‌دهیم
   (کاربر می‌تواند هرکدام از این ۷ رنگ را از پنل تم سفارشی جدا تغییر دهد) */
[data-theme="custom"] {
  --c-header:        #0F3D3E;
  --c-breadcrumb:    #EEF2F1;
  --c-toolbar:       #F6F8F7;
  --c-sidebar:       #10262A;
  --c-sidebar-menu:  #163338;
  --c-footer:        #0F3D3E;
  --c-bg:            #F1F3F6;
  --c-surface:       #FFFFFF;
  --c-text:          #1F2430;
  --c-accent:        #12A98C;
}

* { box-sizing: border-box; }

html {
  /* پایه rem؛ JS برای بزرگ/کوچک‌کردن فونت فقط همین مقدار را تغییر می‌دهد
     و چون تمام فونت‌های کامپوننت‌ها با rem نوشته شده‌اند، کل رابط کاربری
     هماهنگ اسکیل می‌شود */
  font-size: 16px;
}

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Vazirmatn", "IRANSans", Tahoma, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  transition: background var(--transition), color var(--transition), font-size var(--transition);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Topbar ---------- */
.app-topbar {
  height: 52px;
  background: var(--c-header);
  color: var(--c-text-invert);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 30;
}
.app-topbar .bell { font-size: 1.25rem; }
.app-topbar .menu-toggle {
  display: none;
  background: none; border: none; color: #fff; font-size: 1.375rem;
}
.topbar-controls { display: flex; align-items: center; gap: 14px; }
.theme-switcher, .font-switcher { display: flex; gap: 6px; align-items: center; }
.theme-switcher button,
.font-switcher button {
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.12);
  color: #fff;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.78rem;
  transition: background var(--transition);
}
.font-switcher button { min-width: 34px; font-weight: 700; border-radius: 8px; padding: 5px 8px; }
.theme-switcher button.active,
.theme-switcher button:hover,
.font-switcher button:hover { background: rgba(255,255,255,.32); }

/* ---------- Topbar icons: SIP status / driver locations / notifications ---------- */
.topbar-icons { display: flex; align-items: center; gap: 4px; }
.icon-btn {
  position: relative;
  background: none; border: none; color: #fff;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.1rem;
  transition: background var(--transition);
}
.icon-btn:hover { background: rgba(255,255,255,.16); }
.icon-badge {
  position: absolute; top: -2px; left: -2px;
  background: var(--c-danger); color: #fff;
  font-size: 0.625rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}
#sip-status-icon.online { color: #4ADE80; }
#sip-status-icon.offline { color: rgba(255,255,255,.5); }
#sip-status-icon.ringing { animation: sip-ring .6s infinite; color: #FBBF24; }
@keyframes sip-ring {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-15deg); }
  75% { transform: rotate(15deg); }
}

.notif-wrap { position: relative; }
.notif-dropdown {
  display: none;
  position: absolute; top: 44px; left: 0;
  width: 300px; max-width: 88vw;
  background: var(--c-surface); color: var(--c-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 50;
}
.notif-dropdown.open { display: block; }
.notif-header {
  padding: 10px 14px; font-weight: 700; font-size: 0.8125rem;
  background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border);
}
.notif-list { list-style: none; margin: 0; padding: 4px; max-height: 320px; overflow-y: auto; }
.notif-list li a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 8px; font-size: 0.8125rem; color: var(--c-text);
  transition: background var(--transition);
}
.notif-list li a:hover { background: var(--c-surface-alt); }
.notif-list li a .count {
  margin-inline-start: auto;
  background: var(--c-accent); color: #fff;
  font-size: 0.6875rem; font-weight: 700;
  border-radius: 999px; padding: 1px 7px;
}
.notif-footer {
  display: block; text-align: center; padding: 9px;
  font-size: 0.8125rem; font-weight: 700; color: var(--c-accent);
  border-top: 1px solid var(--c-border);
}

/* ---------- Incoming-call panel (SIP) ---------- */
.call-panel {
  position: fixed; bottom: 20px; left: 20px;
  width: 300px; max-width: 90vw;
  background: var(--c-surface); color: var(--c-text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 16px;
  z-index: 60;
  border-inline-start: 4px solid var(--c-accent);
  animation: call-pop .25s ease;
}
@keyframes call-pop {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.call-panel-caller { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.call-panel-number { font-size: 1.05rem; font-weight: 800; }
.call-panel-status { font-size: 0.75rem; color: var(--c-text-muted); }
.call-panel-customer {
  font-size: 0.8125rem; margin-bottom: 10px;
  background: var(--c-surface-alt); border-radius: 8px; padding: 8px 10px;
  max-height: 160px; overflow-y: auto;
}
.call-panel-customer .order-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  border-bottom: 1px solid var(--c-border);
}
.call-panel-customer .order-row:last-child { border-bottom: none; }
.call-panel-actions { display: flex; gap: 8px; }
.call-btn {
  flex: 1; padding: 9px; border: none; border-radius: 8px;
  font-weight: 700; font-size: 0.8125rem; color: #fff;
}
.call-btn.answer  { background: #16A34A; }
.call-btn.reject  { background: var(--c-danger); }
.call-btn.hangup  { background: var(--c-danger); }

/* ---------- Body: sidebar + content ---------- */
.app-body {
  flex: 1;
  display: flex;           /* dir=rtl => اولین فرزند سمت راست می‌نشیند */
  min-height: 0;
}

.app-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--c-sidebar);
  color: var(--c-text-invert);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), width var(--transition);
}
.sidebar-profile {
  padding: 22px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-profile .avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  margin: 0 auto 10px;
}
.sidebar-profile .name { font-weight: 700; font-size: 0.9375rem; }

.sidebar-menu {
  flex: 1;
  background: var(--c-sidebar-menu);
  padding: 14px 10px;
  overflow-y: auto;
}
.sidebar-menu .menu-title {
  font-weight: 700; font-size: 0.9375rem; padding: 6px 8px 12px;
}
.sidebar-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 4px;
  font-size: 0.8438rem;
  color: var(--c-text-invert);
  transition: background var(--transition);
}
.sidebar-menu a.active,
.sidebar-menu a:hover { background: rgba(255,255,255,.22); }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 25;
}

/* ---------- Content column ---------- */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.breadcrumb-bar {
  background: var(--c-breadcrumb);
  color: var(--c-band-text);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--c-border);
}

.toolbar-bar {
  background: var(--c-toolbar);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--c-border);
}
.toolbar-bar .tb-btn {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.7812rem;
  line-height: 1.5;
  min-width: 96px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.toolbar-bar .tb-btn::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--c-accent);
  opacity: 0;
  transition: opacity .16s ease;
}
.toolbar-bar .tb-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent);
}
.toolbar-bar .tb-btn:hover::after { opacity: .07; }
.toolbar-bar .tb-btn:active { transform: translateY(-1px) scale(.98); }
.toolbar-bar .tb-btn.primary {
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
  border-color: var(--c-accent);
}

.main-content {
  flex: 1;
  background: var(--c-surface);
  margin: 16px;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  min-height: 300px;
}
.main-content.is-loading { opacity: .5; pointer-events: none; }
.loading-spinner {
  position: absolute; top: 18px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.8125rem; color: var(--c-text-muted);
  display: none;
}
.main-content.is-loading .loading-spinner { display: block; }

/* ---------- Footer status bar ---------- */
.app-footer {
  background: var(--c-footer);
  color: var(--c-text-invert);
  padding: 10px 18px;
  font-size: 0.8125rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.app-footer a { font-weight: 700; }

/* ---------- Custom theme picker panel ---------- */
.custom-panel {
  position: fixed;
  top: 60px; left: 16px;
  width: 260px;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 14px;
  z-index: 40;
  display: none;
}
.custom-panel.open { display: block; }
.custom-panel h4 { margin: 0 0 10px; font-size: 0.875rem; }
.custom-panel .row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; font-size: 0.7812rem;
}
.custom-panel input[type="color"] {
  width: 36px; height: 26px; border: none; background: none; padding: 0;
}
.custom-panel .save-btn {
  width: 100%; margin-top: 8px; padding: 8px;
  background: var(--c-accent); color: #fff; border: none; border-radius: 6px;
  font-size: 0.8125rem; font-weight: 700;
}

/* =========================== RESPONSIVE =========================== */

/* Tablet */
@media (max-width: 1024px) {
  .app-sidebar { width: 210px; }
  .sidebar-profile .avatar { width: 52px; height: 52px; }
}

/* Mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 767px) {
  .app-topbar .menu-toggle { display: block; }
  .app-topbar { padding: 0 10px; gap: 6px; }
  .topbar-controls { gap: 8px; }
  .font-switcher button { padding: 4px 6px; min-width: 28px; }
  .theme-switcher button { padding: 4px 8px; }
  .icon-btn { width: 30px; height: 30px; font-size: 1rem; }
  .notif-dropdown { left: -40px; }

  .app-body { position: relative; }

  .app-sidebar {
    position: fixed;
    top: 52px; bottom: 0;
    right: 0;
    width: 78%;
    max-width: 300px;
    transform: translateX(100%);
    z-index: 30;
  }
  .app-sidebar.open { transform: translateX(0); }

  .sidebar-overlay.open { display: block; }

  .main-content { margin: 10px; padding: 16px; }
  .toolbar-bar .tb-btn { min-width: 84px; font-size: 0.75rem; padding: 10px 12px; }
  .custom-panel { left: 8px; right: 8px; width: auto; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ===== اضافه‌های SevinSoft ===== */

/* role badge */
.role-badge { font-size:.7rem; padding:2px 8px; border-radius:20px; display:inline-block; margin-top:4px; }
.role-badge.admin   { background:#e74c3c20; color:#e74c3c; }
.role-badge.manager { background:var(--c-accent)20; color:var(--c-accent); }
.role-badge.driver  { background:#27ae6020; color:#27ae60; }

/* avatar small */
.avatar-sm { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--c-accent); color:#fff; font-weight:700; font-size:.8rem; }

/* user dropdown */
.user-menu-wrap { position:relative; }
.user-dropdown {
  display:none; position:absolute; left:0; top:calc(100% + 6px);
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  min-width:160px; padding:8px 0; z-index:200;
}
.user-dropdown.open { display:block; }
.user-dropdown-name { padding:6px 14px; font-weight:700; font-size:.85rem; }
.user-dropdown-role { padding:0 14px 6px; font-size:.75rem; color:var(--c-text-muted); }
.user-dropdown hr { border:none; border-top:1px solid var(--c-border); margin:4px 0; }
.user-dropdown a { display:block; padding:7px 14px; font-size:.83rem; color:var(--c-text); text-decoration:none; }
.user-dropdown a:hover { background:color-mix(in srgb,var(--c-accent) 10%,transparent); }
.user-dropdown a.danger { color:var(--c-danger); }

/* toolbar inputs */
.tb-search {
  padding:7px 10px; border:1.5px solid var(--c-border); border-radius:8px;
  background:var(--c-bg); color:var(--c-text); font-family:inherit; font-size:.83rem;
  min-width:180px;
}
.tb-search:focus { outline:none; border-color:var(--c-accent); }
.tb-select {
  padding:7px 10px; border:1.5px solid var(--c-border); border-radius:8px;
  background:var(--c-bg); color:var(--c-text); font-family:inherit; font-size:.83rem;
}

/* topbar title */
.topbar-title {
  font-weight:700; font-size:.95rem; color:var(--c-text);
  flex:1; text-align:center;
}

/* loading spinner */
.loading-spinner {
  display:block; padding:30px; text-align:center; color:var(--c-text-muted); font-size:.85rem;
}