/* Panel tema değişkenleri — dark/light tam geçiş */

:root,
html.dark {
  --panel-bg: #0a0f1f;
  --panel-fg: #dce1fb;
  --panel-muted: #bac9cc;
  --panel-card-bg: rgba(25, 31, 49, 0.55);
  --panel-card-border: rgba(195, 245, 255, 0.1);
  --panel-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  --panel-sidebar-bg: rgba(12, 19, 36, 0.88);
  --panel-header-bg: rgba(12, 19, 36, 0.82);
  --panel-header-border: rgba(195, 245, 255, 0.08);
  --panel-stat-bg: linear-gradient(135deg, rgba(25, 31, 49, 0.65) 0%, rgba(35, 41, 60, 0.45) 100%);
  --panel-quick-bg: rgba(25, 31, 49, 0.65);
  --panel-glow-a: rgba(0, 218, 243, 0.05);
  --panel-glow-b: rgba(195, 245, 255, 0.03);
  --panel-scroll-track: rgba(12, 19, 36, 0.5);
  --panel-scroll-thumb: rgba(0, 218, 243, 0.3);
  --panel-tile-bg: rgba(255, 255, 255, 0.03);
  --panel-tile-border: rgba(195, 245, 255, 0.1);
  --panel-progress-track: rgba(255, 255, 255, 0.08);
  --panel-toast-bg: rgba(21, 27, 45, 0.96);
  --panel-toast-border: rgba(195, 245, 255, 0.15);
  --panel-toast-fg: #dce1fb;
  --tw-primary: 195 245 255;
  --tw-primary-dim: 0 218 243;
  --tw-surface: 12 19 36;
  --tw-surface-container: 25 31 49;
  --tw-surface-container-low: 21 27 45;
  --tw-surface-container-high: 35 41 60;
  --tw-surface-container-highest: 46 52 71;
  --tw-background: 12 19 36;
  --tw-on-surface: 220 225 251;
  --tw-on-surface-variant: 186 201 204;
  --tw-outline-variant: 59 73 76;
  --tw-on-primary: 0 54 61;
  --tw-surface-tint: 0 218 243;
}

html.light {
  --panel-bg: #eef2f8;
  --panel-fg: #0f172a;
  --panel-muted: #64748b;
  --panel-card-bg: rgba(255, 255, 255, 0.97);
  --panel-card-border: rgba(15, 23, 42, 0.09);
  --panel-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  --panel-sidebar-bg: rgba(255, 255, 255, 0.98);
  --panel-header-bg: rgba(255, 255, 255, 0.96);
  --panel-header-border: rgba(15, 23, 42, 0.08);
  --panel-stat-bg: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  --panel-quick-bg: rgba(255, 255, 255, 0.95);
  --panel-glow-a: rgba(14, 165, 233, 0.07);
  --panel-glow-b: rgba(99, 102, 241, 0.04);
  --panel-scroll-track: rgba(226, 232, 240, 0.8);
  --panel-scroll-thumb: rgba(14, 165, 233, 0.35);
  --panel-tile-bg: #ffffff;
  --panel-tile-border: rgba(15, 23, 42, 0.08);
  --panel-progress-track: rgba(15, 23, 42, 0.08);
  --panel-toast-bg: rgba(255, 255, 255, 0.98);
  --panel-toast-border: rgba(15, 23, 42, 0.1);
  --panel-toast-fg: #0f172a;
  --tw-primary: 2 132 199;
  --tw-primary-dim: 14 165 233;
  --tw-surface: 241 245 249;
  --tw-surface-container: 241 245 249;
  --tw-surface-container-low: 248 250 252;
  --tw-surface-container-high: 255 255 255;
  --tw-surface-container-highest: 255 255 255;
  --tw-background: 238 242 248;
  --tw-on-surface: 15 23 42;
  --tw-on-surface-variant: 100 116 139;
  --tw-outline-variant: 203 213 225;
  --tw-on-primary: 255 255 255;
  --tw-surface-tint: 14 165 233;
}

html.light body.panel-app,
html.light body.adm-panel {
  background: var(--panel-bg) !important;
  color: var(--panel-fg) !important;
}

html.light body.panel-app::before,
html.light body.adm-panel::before {
  background:
    radial-gradient(ellipse 900px 500px at 10% -10%, var(--panel-glow-a) 0%, transparent 55%),
    radial-gradient(ellipse 700px 400px at 90% 0%, var(--panel-glow-b) 0%, transparent 50%) !important;
}

body.panel-app {
  background: var(--panel-bg);
  color: var(--panel-fg);
}

body.panel-app::before {
  background:
    radial-gradient(ellipse 700px 600px at 0% 0%, var(--panel-glow-a) 0%, transparent 50%),
    radial-gradient(ellipse 500px 500px at 100% 100%, var(--panel-glow-b) 0%, transparent 50%);
}

body.panel-app .glass-card,
body.panel-app .stat-card {
  background: var(--panel-card-bg);
  border-color: var(--panel-card-border);
  box-shadow: var(--panel-card-shadow);
}

body.panel-app .sidebar {
  background: var(--panel-sidebar-bg);
  border-color: var(--panel-header-border);
}

body.panel-app .header-bar {
  background: var(--panel-header-bg);
  border-color: var(--panel-header-border);
}

body.panel-app .quick-action {
  background: var(--panel-quick-bg);
  border: 1px solid var(--panel-card-border);
  transition: all 0.3s ease;
}

body.panel-app .quick-action:hover {
  border-color: rgba(14, 165, 233, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.1);
}

body.panel-app .header-bar {
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--panel-header-border);
}

body.panel-app .stat-card {
  background: var(--panel-stat-bg);
  border: 1px solid var(--panel-card-border);
}

body.panel-app .glass-card {
  border: 1px solid var(--panel-card-border);
}

html.light body.panel-app .hover\:bg-white\/\[0\.02\]:hover {
  background-color: rgba(15, 23, 42, 0.03) !important;
}

html.light body.panel-app .hover\:bg-white\/\[0\.05\]:hover {
  background-color: rgba(15, 23, 42, 0.05) !important;
}

html.light body.panel-app #widget-ts {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}


body.panel-app .panel-widget-tile {
  background: var(--panel-tile-bg) !important;
  border-color: var(--panel-tile-border) !important;
}

body.panel-app .progress-bar {
  background: var(--panel-progress-track);
}

body.panel-app .toast {
  background: var(--panel-toast-bg);
  border-color: var(--panel-toast-border);
  color: var(--panel-toast-fg);
}

body.panel-app ::-webkit-scrollbar-track {
  background: var(--panel-scroll-track);
}

body.panel-app ::-webkit-scrollbar-thumb {
  background: var(--panel-scroll-thumb);
}

html.light body.panel-app .sidebar-item {
  color: var(--panel-muted) !important;
}

html.light body.panel-app .sidebar-item:hover,
html.light body.panel-app .sidebar-item.active {
  color: #0284c7 !important;
}

html.light body.panel-app .sidebar-dropdown-toggle,
html.light body.panel-app .sidebar-dropdown-item {
  color: var(--panel-muted) !important;
}

html.light body.panel-app .hamburger span {
  background: var(--panel-fg) !important;
}

html.light body.panel-app .toast-msg {
  color: var(--panel-muted) !important;
}

html.light body.panel-app .glass-card[style*="linear-gradient"] {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
}

html.light body.panel-app #announcementBanner {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(241, 245, 249, 1) 100%) !important;
}

html.light body.panel-app #cityModal .glass-card {
  background: rgba(255, 255, 255, 0.98) !important;
}

/* Legacy admin */
html.light body:not(.panel-app):not(.adm-panel) {
  background: #eef2f8 !important;
  color: #0f172a !important;
}

html.light .card,
html.light .main-content .card {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

html.light .sidebar-link {
  color: #475569 !important;
}

html.light .sidebar-link:hover,
html.light .sidebar-link.active {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.08) !important;
}

html.light .inp,
html.light input,
html.light select,
html.light textarea {
  background: #fff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}

html.light .btn {
  color: #0284c7 !important;
}

html.light body.adm-panel::before {
  background:
    radial-gradient(ellipse 900px 500px at 10% -10%, rgba(14, 165, 233, 0.06), transparent 55%),
    radial-gradient(ellipse 700px 400px at 90% 0%, rgba(99, 102, 241, 0.04), transparent 50%) !important;
}

/* Customer panel — mirror panel-app light rules */
body.cust-panel .glass-card,
body.cust-panel .stat-card {
  background: var(--panel-card-bg);
  border-color: var(--panel-card-border);
  box-shadow: var(--panel-card-shadow);
  color: var(--panel-fg);
}

body.cust-panel .quick-action {
  background: var(--panel-quick-bg);
  border-color: var(--panel-card-border);
}

html.light body.cust-panel .sidebar-item {
  color: var(--panel-muted) !important;
}

html.light body.cust-panel .sidebar-item:hover,
html.light body.cust-panel .sidebar-item.active {
  color: #0284c7 !important;
}

html.light body.cust-panel .glass-card[style*="linear-gradient"] {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
}

html.light body.cust-panel .msg-ok {
  color: #15803d !important;
  background: rgba(34, 197, 94, 0.12) !important;
}

html.light body.cust-panel #chatBox {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

/* Admin premium panel — dark/light tam geçiş */
body.adm-panel .adm-market-tile,
body.adm-panel .panel-widget-tile {
  background: var(--panel-tile-bg) !important;
  border-color: var(--panel-tile-border) !important;
  color: var(--panel-fg) !important;
}

body.adm-panel .adm-market-value,
body.adm-panel .adm-market-label {
  color: inherit;
}

html.light body.adm-panel .adm-market-tile,
html.light body.adm-panel .panel-widget-tile {
  background: var(--panel-tile-bg) !important;
  border-color: var(--panel-tile-border) !important;
}

html.dark body.adm-panel .adm-market-tile,
html.dark body.adm-panel .panel-widget-tile {
  background: var(--panel-tile-bg) !important;
  border-color: var(--panel-tile-border) !important;
}

html.light body.adm-panel .adm-sidebar,
html.light body.adm-panel .adm-topbar {
  background: var(--panel-sidebar-bg) !important;
  border-color: var(--panel-header-border) !important;
}

html.light body.adm-panel .adm-nav-item,
html.light body.adm-panel .adm-nav-group-title,
html.light body.adm-panel .adm-breadcrumb {
  color: #475569 !important;
}

html.light body.adm-panel .adm-nav-item.active,
html.light body.adm-panel .adm-nav-item:hover {
  color: #0284c7 !important;
  background: rgba(14, 165, 233, 0.1) !important;
}

html.light body.adm-panel .adm-brand-text h1,
html.light body.adm-panel .adm-user-meta strong {
  color: #0f172a !important;
}

html.light body.adm-panel .adm-brand-text p,
html.light body.adm-panel .adm-user-meta small {
  color: #64748b !important;
}

/* Legacy admin sayfaları — inline koyu arka plan override */
html.light body.dark,
html.light body[class*="dark"] {
  background: #eef2f8 !important;
  color: #0f172a !important;
}

html.light .card,
html.light div.card {
  color: #0f172a !important;
}

html.dark .card,
html.dark div.card {
  background: rgba(25, 31, 49, 0.72) !important;
  border-color: rgba(195, 245, 255, 0.1) !important;
  color: #dce1fb !important;
}