/* =============================================================================
   UI ENHANCEMENTS — Professional Visual Upgrade
   All improvements are additive and non-breaking.
   ============================================================================= */

/* ─── 1. CSS DESIGN TOKENS (Variables) ───────────────────────────────────────
   Single source of truth for brand colors, spacing, shadows, and transitions.
   To change the whole theme, edit only this block.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-primary:        #1d4ed8;
  --color-primary-light:  #3b82f6;
  --color-primary-dark:   #1e3a8a;

  /* Semantic */
  --color-success:  #16a34a;
  --color-warning:  #d97706;
  --color-danger:   #dc2626;
  --color-info:     #0891b2;
  --color-muted:    #6b7280;

  /* Surface */
  --color-bg:       #f3f4f6;
  --color-surface:  #ffffff;
  --color-border:   #e5e7eb;

  /* Typography */
  --font-body:    'Cairo', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --line-height:  1.65;

  /* Elevation */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
  --shadow-card: 0 0 0 1px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);

  /* Motion */
  --ease-default: cubic-bezier(.4, 0, .2, 1);
  --duration-fast:   120ms;
  --duration-normal: 220ms;
  --duration-slow:   400ms;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-full: 9999px;
}

/* ─── 2. FONT OPTIMIZATION ────────────────────────────────────────────────────
   font-display: swap ensures text renders immediately with fallback font
   while Cairo loads. Prevents invisible text (FOIT).
   ─────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Cairo';
  font-display: swap;
}

body {
  font-family: var(--font-body);
  line-height: var(--line-height);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── 3. PACE PROGRESS BAR ────────────────────────────────────────────────────
   Override default Pace styling with a sleek primary-color bar.
   ─────────────────────────────────────────────────────────────────────────── */
.pace {
  pointer-events: none;
  user-select: none;
}
.pace.pace-active .pace-progress {
  display: block;
}
.pace .pace-progress {
  background: var(--color-primary-light);
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px;
  transition: none;
}
.pace .pace-progress::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px var(--color-primary), 0 0 5px var(--color-primary-light);
  opacity: 1;
  transform: rotate(3deg) translateY(-4px);
}
.pace-inactive .pace-progress {
  display: none;
}

/* ─── 4. SKELETON LOADERS ─────────────────────────────────────────────────────
   Pulsing placeholder animation for dashboard cards while data loads via AJAX.
   The `.skeleton` class can be applied to any element.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

.skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #edf2f7 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton * { visibility: hidden; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Preset skeleton shapes */
.skeleton-text  { height: 1em;  border-radius: var(--radius-sm); }
.skeleton-title { height: 1.5em; border-radius: var(--radius-sm); width: 60%; }
.skeleton-amount {
  display: inline-block;
  height: 28px;
  width: 110px;
  border-radius: var(--radius-sm);
}
.skeleton-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}

/* Dashboard card value skeleton */
.dashboard-stat-skeleton {
  display: inline-block;
  height: 28px;
  width: 120px;
  border-radius: var(--radius-sm);
}

/* ─── 5. FADE-IN STAGGERED ANIMATIONS ────────────────────────────────────────
   Cards and sections animate in with a staggered delay for a polished feel.
   Add `.fade-in-up` to any container; children with `.anim-child` get delays.
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fade-in-up {
  animation: fadeInUp var(--duration-slow) var(--ease-default) both;
}

.fade-in-scale {
  animation: fadeInScale var(--duration-normal) var(--ease-default) both;
}

/* Stagger delays for grid children */
.anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 60ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 120ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 180ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 240ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 300ms; }
.anim-stagger > *:nth-child(n+7) { animation-delay: 360ms; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up, .fade-in-scale, .anim-stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── 6. BUTTON LOADING STATES ────────────────────────────────────────────────
   When a form is submitted, buttons get `.btn-loading` class via JS which
   shows a spinner and prevents double-submission.
   ─────────────────────────────────────────────────────────────────────────── */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.85;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  margin-top: -.5em;
  margin-left: -.5em;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* For dark buttons on light bg */
.btn-loading.btn-light::after,
.btn-loading.btn-default::after,
.btn-loading.btn-outline-primary::after {
  border-color: rgba(0,0,0,.15);
  border-top-color: var(--color-primary);
}

/* ─── 7. TOAST NOTIFICATIONS ──────────────────────────────────────────────────
   Custom toastr overrides for a cleaner, more modern look.
   Works with the existing toastr.js library.
   ─────────────────────────────────────────────────────────────────────────── */
#toast-container {
  pointer-events: none;
}

#toast-container > .toast {
  pointer-events: auto;
  border: none !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 14px 18px 14px 54px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 280px !important;
  max-width: 420px !important;
  opacity: 1 !important;
  margin-bottom: 10px !important;
  backdrop-filter: blur(4px);
}

/* override opacity on hover */
#toast-container > .toast:hover {
  box-shadow: var(--shadow-lg) !important;
  opacity: 0.98 !important;
}

#toast-container > .toast-success {
  background-color: #065f46 !important;
  background-image: none !important;
}

#toast-container > .toast-error {
  background-color: #991b1b !important;
  background-image: none !important;
}

#toast-container > .toast-warning {
  background-color: #92400e !important;
  background-image: none !important;
}

#toast-container > .toast-info {
  background-color: #1e40af !important;
  background-image: none !important;
}

/* Custom icons via ::before pseudo-element */
#toast-container > .toast::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(255,255,255,.25);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

#toast-container > .toast-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

#toast-container > .toast-error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

#toast-container > .toast-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

#toast-container > .toast-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

.toast-progress {
  opacity: 0.3 !important;
  height: 3px !important;
  bottom: 0;
}

/* ─── 8. STATUS BADGES ────────────────────────────────────────────────────────
   Unified pill-shaped badges with dot indicators.
   Usage: <span class="ui-badge ui-badge-success">مكتمل</span>
   ─────────────────────────────────────────────────────────────────────────── */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
}

.ui-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ui-badge-success { background: #dcfce7; color: #15803d; }
.ui-badge-success::before { background: #16a34a; }

.ui-badge-danger  { background: #fee2e2; color: #b91c1c; }
.ui-badge-danger::before  { background: #dc2626; }

.ui-badge-warning { background: #fef9c3; color: #92400e; }
.ui-badge-warning::before { background: #d97706; }

.ui-badge-info    { background: #dbeafe; color: #1d4ed8; }
.ui-badge-info::before    { background: #2563eb; }

.ui-badge-muted   { background: #f3f4f6; color: #4b5563; }
.ui-badge-muted::before   { background: #9ca3af; }

.ui-badge-purple  { background: #ede9fe; color: #6d28d9; }
.ui-badge-purple::before  { background: #7c3aed; }

/* ZATCA-specific status badges */
.badge-zatca-success  { @extend .ui-badge; background: #dcfce7; color: #15803d; }
.badge-zatca-pending  { @extend .ui-badge; background: #fef9c3; color: #92400e; }
.badge-zatca-failed   { @extend .ui-badge; background: #fee2e2; color: #b91c1c; }

/* Map existing Bootstrap label classes to the new style */
.label.label-success { background: #dcfce7 !important; color: #15803d !important; border: none !important; }
.label.label-danger  { background: #fee2e2 !important; color: #b91c1c !important; border: none !important; }
.label.label-warning { background: #fef9c3 !important; color: #92400e !important; border: none !important; }
.label.label-info    { background: #dbeafe !important; color: #1d4ed8 !important; border: none !important; }
.label.label-primary { background: #eff6ff !important; color: #1d4ed8 !important; border: none !important; }
.label.label-default { background: #f3f4f6 !important; color: #4b5563 !important; border: none !important; }

/* ─── 9. TABLE ENHANCEMENTS ───────────────────────────────────────────────────
   Row hover highlight, sticky header, and refined zebra striping.
   ─────────────────────────────────────────────────────────────────────────── */
.table > tbody > tr {
  transition: background-color var(--duration-fast) var(--ease-default);
}

.table > tbody > tr:hover > td {
  background-color: #eff6ff !important;
}

/* Smooth row click ripple visual */
.table > tbody > tr:active > td {
  background-color: #dbeafe !important;
}

/* Sticky table header */
.table-sticky-header {
  position: relative;
}

.table-sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #f8fafc;
  box-shadow: 0 1px 0 0 var(--color-border);
}

/* Refined striped tables */
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: #fafafa;
}

/* DataTables header style */
table.dataTable thead th,
table.dataTable thead td {
  background-color: #f8fafc;
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* ─── 10. SCROLL-TO-TOP BUTTON ────────────────────────────────────────────────
   Floating button that appears after scrolling down 400px.
   Injected via JavaScript below.
   ─────────────────────────────────────────────────────────────────────────── */
#scroll-to-top {
  position: fixed;
  bottom: 28px;
  left: 28px;   /* left for RTL */
  z-index: 1050;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

#scroll-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#scroll-to-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

#scroll-to-top:active {
  transform: scale(0.93);
}

/* ─── 11. DASHBOARD TREND INDICATORS ─────────────────────────────────────────
   Small percentage change indicators (↑ green / ↓ red) shown beneath card values.
   ─────────────────────────────────────────────────────────────────────────── */
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  transition: opacity var(--duration-normal);
}

.stat-trend-up   { color: var(--color-success); }
.stat-trend-down { color: var(--color-danger); }
.stat-trend-flat { color: var(--color-muted); }

.stat-trend svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ─── 12. CARD ENHANCEMENTS ───────────────────────────────────────────────────
   Subtle hover lift effect on dashboard stat cards.
   ─────────────────────────────────────────────────────────────────────────── */
.dashboard-card-hover {
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.dashboard-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg) !important;
}

/* ─── 13. PRINT CSS ───────────────────────────────────────────────────────────
   Hides all UI chrome (sidebar, header, buttons) when printing invoices or
   ZATCA documents. Ensures a clean A4-ready output.
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
  /* Hide application chrome */
  .side-bar,
  aside.side-bar,
  nav.main-header,
  .main-header,
  .no-print,
  .btn,
  .btn-group,
  [data-toggle="modal"],
  .modal-footer,
  .navbar,
  #scroll-to-top,
  #toast-container,
  .Toastify,
  .breadcrumb,
  .pagination,
  .dataTables_length,
  .dataTables_filter,
  .dataTables_paginate,
  .dataTables_info,
  .dt-buttons,
  .sidebar-mini .content-wrapper,
  footer.main-footer {
    display: none !important;
  }

  /* Full-width content */
  body,
  .content-wrapper,
  .main-content,
  .tw-flex,
  .thetop {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* Tables print clean */
  .table {
    border-collapse: collapse !important;
    page-break-inside: auto;
  }

  .table th,
  .table td {
    border: 1px solid #ccc !important;
    padding: 6px 8px !important;
    color: #000 !important;
    background: #fff !important;
    font-size: 11pt !important;
  }

  .table thead th {
    background-color: #f0f0f0 !important;
    font-weight: bold;
  }

  /* Page breaks */
  tr { page-break-inside: avoid; }

  /* Print header */
  @page {
    margin: 1.5cm;
    size: A4;
  }

  /* Links */
  a[href]:after { content: none !important; }
}

/* ─── 14. DARK MODE ───────────────────────────────────────────────────────────
   Full dark theme activated by adding `data-theme="dark"` to <html>.
   Toggle is controlled via JavaScript. Preference saved to localStorage.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:      #0f172a;
  --color-surface: #1e293b;
  --color-border:  #334155;
  --color-muted:   #94a3b8;

  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: var(--color-bg);
  color: #e2e8f0;
}

[data-theme="dark"] .side-bar {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .side-bar a {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .side-bar a:hover,
[data-theme="dark"] .side-bar a.active {
  background-color: #334155 !important;
  color: #fff !important;
}

[data-theme="dark"] .tw-bg-white,
[data-theme="dark"] .bg-white {
  background-color: var(--color-surface) !important;
}

[data-theme="dark"] .tw-text-gray-900,
[data-theme="dark"] .tw-text-gray-800 {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .tw-text-gray-500,
[data-theme="dark"] .tw-text-gray-600 {
  color: #94a3b8 !important;
}

[data-theme="dark"] .tw-bg-gray-100,
[data-theme="dark"] .tw-bg-gray-50,
[data-theme="dark"] body {
  background-color: var(--color-bg) !important;
}

[data-theme="dark"] .tw-ring-gray-200,
[data-theme="dark"] .tw-border-gray-200,
[data-theme="dark"] .tw-border {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .table > tbody > tr:hover > td {
  background-color: #1e3a5f !important;
}

[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td {
  background-color: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .panel,
[data-theme="dark"] .box,
[data-theme="dark"] .card {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .panel-heading,
[data-theme="dark"] .box-header {
  background-color: #1e293b !important;
  border-color: var(--color-border) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .modal-content {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .dropdown-menu {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .dropdown-menu > li > a {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .dropdown-menu > li > a:hover {
  background-color: #334155 !important;
}

/* ─── 15. DARK MODE TOGGLE BUTTON ────────────────────────────────────────────
   Fixed toggle button (moon/sun icon) injected by JavaScript.
   ─────────────────────────────────────────────────────────────────────────── */
#dark-mode-toggle {
  position: fixed;
  bottom: 80px;
  left: 28px;   /* left = visible for RTL layout */
  z-index: 1050;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: var(--radius-full);
  background: #334155;
  color: #fbbf24;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-normal) var(--ease-default),
              background var(--duration-normal) var(--ease-default);
}

#dark-mode-toggle:hover {
  transform: rotate(20deg) scale(1.1);
}

[data-theme="dark"] #dark-mode-toggle {
  background: #fbbf24;
  color: #1e293b;
}

/* ─── 16. GENERAL UI POLISH ───────────────────────────────────────────────────
   Small refinements across the whole interface.
   ─────────────────────────────────────────────────────────────────────────── */

/* Smoother focus rings */
:focus-visible {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove default outline */
:focus:not(:focus-visible) { outline: none; }

/* Smooth all transitions */
a, button, input, select, textarea, .btn {
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-default);
}

/* Buttons slight hover lift */
.btn:not(:disabled):not(.btn-link) {
  transition: transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.btn:not(:disabled):not(.btn-link):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:not(:disabled):not(.btn-link):active {
  transform: translateY(0);
}

/* Modal animations */
.modal.fade .modal-dialog {
  transform: scale(0.96) translateY(-8px);
  transition: transform var(--duration-normal) var(--ease-default);
}

.modal.in .modal-dialog {
  transform: scale(1) translateY(0);
}

/* Select2 refinements */
.select2-container--default .select2-selection--single {
  height: 34px;
  border-color: var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 32px;
}

/* Scrollbar styling (webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }