/* ============================================================
   Design System — shadcn/ui inspired, light monochromatic
   ============================================================ */

:root {
  --color-canvas: #f5f5f5;
  --color-paper: #ffffff;
  --color-surface-alt: #fafafa;
  --color-ink: #0a0a0a;
  --color-ink-soft: #171717;
  --color-mid-gray: #737373;
  --color-hairline: #e5e5e5;
  --color-ember: #e7000b;
  --font-geist: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-cards: 24px;
  --radius-small: 6px;
  --radius-badges: 18px;
  --radius-inputs: 18px;
  --radius-nested: 10px;
  --radius-buttons: 18px;
  --shadow-card: 0 0 0 1px rgba(23,23,23,0.05), 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
}

/* ── Base ── */
body, html { font-family: var(--font-geist) !important; background-color: var(--color-canvas) !important; color: var(--color-ink) !important; font-size: 14px !important; line-height: 1.43 !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-geist) !important; color: var(--color-ink) !important; }
a { color: var(--color-ink) !important; text-decoration: none !important; }
a:hover { color: var(--color-ink-soft) !important; }
body, p, span, div, input, textarea, select, button, a, label, th, td, li, h1, h2, h3, h4, h5, h6, small, strong, em, blockquote { font-family: var(--font-geist) !important; }

/* ── Sidebar ── */
#leftsidebar, .sidebar, .theme-blush #leftsidebar, .theme-blush .sidebar { background-color: var(--color-surface-alt) !important; border-right: 1px solid var(--color-hairline) !important; box-shadow: none !important; }
.sidebar .navbar-brand, .theme-blush .sidebar .navbar-brand { background-color: var(--color-surface-alt) !important; border-bottom: 1px solid var(--color-hairline) !important; box-shadow: none !important; }
.navbar-brand a, .navbar-brand span { color: var(--color-ink) !important; }
.sidebar .menu ul li a, .theme-blush .sidebar .menu ul li a { color: var(--color-mid-gray) !important; font-size: 14px !important; font-weight: 500 !important; transition: background 0.15s, color 0.15s !important; background: transparent !important; }
.sidebar .menu ul li a:hover, .sidebar .menu ul li.active > a, .theme-blush .sidebar .menu ul li a:hover, .theme-blush .sidebar .menu ul li.active > a { color: var(--color-ink) !important; background-color: var(--color-hairline) !important; }
.sidebar .menu ul li a i, .theme-blush .sidebar .menu ul li a i { color: var(--color-mid-gray) !important; }
.sidebar .menu ul li a:hover i { color: var(--color-ink) !important; }
.sidebar .menu ul.ml-menu { background: transparent !important; }
.sidebar .menu ul.ml-menu li a { color: var(--color-mid-gray) !important; font-size: 13px !important; }
.sidebar .menu ul.ml-menu li a:hover { color: var(--color-ink) !important; background-color: var(--color-hairline) !important; }

/* ── Cards ── */
.card, .theme-blush .card { background-color: var(--color-paper) !important; border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-cards) !important; box-shadow: var(--shadow-card) !important; }
.card .header, .theme-blush .card .header { background-color: var(--color-paper) !important; border-bottom: 1px solid var(--color-hairline) !important; border-radius: var(--radius-cards) var(--radius-cards) 0 0 !important; padding: 20px !important; }
.card .header h2, .card .header h3 { color: var(--color-ink) !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; }
.card .body, .theme-blush .card .body { background-color: var(--color-paper) !important; padding: 20px !important; border-color: var(--color-hairline) !important; }
.card.w_data_1, .theme-blush .card.w_data_1 { background-color: var(--color-paper) !important; }
.card.w_data_1 .body h4 { color: var(--color-ink) !important; font-size: 30px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; }
.w_icon, .w_icon.orange, .w_icon.blue, .w_icon.pink, .w_icon.green, .w_icon.indigo, .w_icon.red { background-color: var(--color-canvas) !important; border-radius: var(--radius-inputs) !important; }
.w_icon i { color: var(--color-ink-soft) !important; }
/* nested card-body (for bootstrap grid cards) */
.card-body { background-color: var(--color-paper) !important; }

/* ── Buttons ── */
.btn, .theme-blush .btn { border-radius: var(--radius-buttons) !important; font-size: 14px !important; font-weight: 500 !important; padding: 8px 16px !important; box-shadow: none !important; transition: opacity 0.15s !important; line-height: 1.43 !important; }
.btn:hover { opacity: 0.85 !important; box-shadow: none !important; }
.btn-primary, .theme-blush .btn-primary, .btn-raised.btn-primary, .btn-primary:focus, .btn-primary:active { background-color: var(--color-ink) !important; color: #fafafa !important; border: none !important; box-shadow: none !important; }
.btn-primary:hover { background-color: var(--color-ink-soft) !important; opacity: 1 !important; }
.btn-secondary, .btn-default, .theme-blush .btn-secondary, .theme-blush .btn-default { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; border: none !important; }
.btn-outline-secondary { background-color: transparent !important; color: var(--color-ink) !important; border: 1px solid var(--color-hairline) !important; }
.btn-outline-secondary:hover, .btn-outline-secondary.active, .view-toggle .btn.active { background-color: var(--color-ink) !important; color: #fafafa !important; border-color: var(--color-ink) !important; opacity: 1 !important; }
.btn-outline-primary { background-color: transparent !important; color: var(--color-ink) !important; border: 1px solid var(--color-hairline) !important; }
.btn-outline-primary:hover { background-color: var(--color-ink) !important; color: #fafafa !important; border-color: var(--color-ink) !important; }
.btn-success, .theme-blush .btn-success { background-color: var(--color-ink-soft) !important; color: #fafafa !important; border: none !important; }
.btn-success:hover { background-color: var(--color-ink) !important; opacity: 1 !important; }
.btn-danger, .theme-blush .btn-danger { background-color: var(--color-ember) !important; color: #ffffff !important; border: none !important; }
.btn-warning, .theme-blush .btn-warning { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; border: 1px solid var(--color-hairline) !important; }
.btn-info { background-color: var(--color-ink-soft) !important; color: #fafafa !important; border: none !important; }
.btn-icon { width: 36px !important; height: 36px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }

/* ── Form Controls ── */
.form-control, .theme-blush .form-control { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; border: 1px solid transparent !important; border-radius: var(--radius-inputs) !important; font-size: 14px !important; padding: 8px 14px !important; height: auto !important; box-shadow: none !important; }
.form-control::placeholder { color: var(--color-mid-gray) !important; }
.form-control:focus { background-color: var(--color-paper) !important; border-color: var(--color-hairline) !important; box-shadow: none !important; }
.select2-container--default .select2-selection--single { background-color: var(--color-canvas) !important; border: 1px solid transparent !important; border-radius: var(--radius-inputs) !important; height: 38px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--color-ink) !important; line-height: 38px !important; padding-left: 14px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; }
.select2-dropdown { border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-nested) !important; }
.select2-results__option { font-size: 14px !important; }
.select2-results__option--highlighted { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; }
.input-group-text { background-color: var(--color-canvas) !important; border: 1px solid transparent !important; border-radius: var(--radius-inputs) !important; color: var(--color-mid-gray) !important; }

/* ── Tables ── */
.table, .theme-blush .table { color: var(--color-ink) !important; font-size: 14px !important; }
.table th, .theme-blush .table th { color: var(--color-mid-gray) !important; font-size: 12px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; border-bottom: 1px solid var(--color-hairline) !important; border-top: none !important; padding: 12px 16px !important; background-color: var(--color-canvas) !important; }
.table td, .theme-blush .table td { border-color: var(--color-hairline) !important; padding: 12px 16px !important; vertical-align: middle !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(245,245,245,0.5) !important; }
.table-hover tbody tr:hover { background-color: rgba(245,245,245,0.8) !important; }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--color-hairline) !important; }
.thead-light th { background-color: var(--color-canvas) !important; color: var(--color-mid-gray) !important; border-color: var(--color-hairline) !important; }

/* ── Badges ── */
.badge, .theme-blush .badge { border-radius: var(--radius-badges) !important; padding: 4px 10px !important; font-size: 12px !important; font-weight: 500 !important; }
.badge-primary { background-color: var(--color-ink) !important; color: #fafafa !important; }
.badge-success { background-color: var(--color-ink-soft) !important; color: #fafafa !important; }
.badge-danger { background-color: var(--color-ember) !important; color: #ffffff !important; }
.badge-warning { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; border: 1px solid var(--color-hairline) !important; }
.badge-info { background-color: var(--color-canvas) !important; color: var(--color-ink-soft) !important; border: 1px solid var(--color-hairline) !important; }
.badge-secondary { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; }

/* ── Block Header & Breadcrumbs ── */
.block-header, .theme-blush .block-header { background-color: transparent !important; padding: 20px 20px 0 !important; margin-bottom: 20px !important; }
.block-header h2, .theme-blush .block-header h2 { color: var(--color-ink) !important; font-size: 24px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; background: transparent !important; }
.breadcrumb, .theme-blush .breadcrumb { background-color: transparent !important; padding: 4px 0 !important; margin-bottom: 0 !important; }
.breadcrumb-item a { color: var(--color-mid-gray) !important; }
.breadcrumb-item a:hover { color: var(--color-ink) !important; }
.breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item { color: var(--color-ink) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-mid-gray) !important; }

/* ── Pagination ── */
.page-link { color: var(--color-ink) !important; background-color: var(--color-paper) !important; border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-badges) !important; margin: 0 2px !important; padding: 4px 10px !important; font-size: 13px !important; }
.page-link:hover { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; }
.page-item.active .page-link { background-color: var(--color-ink) !important; border-color: var(--color-ink) !important; color: #fafafa !important; }
.page-item.disabled .page-link { color: var(--color-mid-gray) !important; background-color: var(--color-canvas) !important; }
.pagination { gap: 2px !important; }

/* ── Alerts ── */
.alert { border-radius: var(--radius-nested) !important; font-size: 14px !important; }
.alert-success { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; border: 1px solid var(--color-hairline) !important; }
.alert-danger { background-color: #fff5f5 !important; color: var(--color-ember) !important; border: 1px solid #fecaca !important; }
.alert-warning { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; border: 1px solid var(--color-hairline) !important; }
.alert-info { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; border: 1px solid var(--color-hairline) !important; }

/* ── Modal ── */
.modal-content { border-radius: var(--radius-cards) !important; border: 1px solid var(--color-hairline) !important; box-shadow: var(--shadow-card) !important; background-color: var(--color-paper) !important; }
.modal-header { border-bottom: 1px solid var(--color-hairline) !important; padding: 20px !important; border-radius: var(--radius-cards) var(--radius-cards) 0 0 !important; }
.modal-footer { border-top: 1px solid var(--color-hairline) !important; padding: 16px 20px !important; border-radius: 0 0 var(--radius-cards) var(--radius-cards) !important; }
.modal-body { padding: 20px !important; }
.modal-title { color: var(--color-ink) !important; font-size: 18px !important; font-weight: 600 !important; }

/* ── Page Loader ── */
.loader-circle { border: 2px solid rgba(10,10,10,0.1) !important; border-top-color: #0a0a0a !important; width: 40px !important; height: 40px !important; }
.loader-text { color: #737373 !important; font-size: 13px !important; font-weight: 500 !important; }

/* ── Footer ── */
.footer, aside.footer { background-color: var(--color-canvas) !important; border-top: 1px solid var(--color-hairline) !important; padding: 16px 20px !important; font-size: 13px !important; color: var(--color-mid-gray) !important; }
.footer a, aside.footer a { color: var(--color-mid-gray) !important; }
.footer a:hover, aside.footer a:hover { color: var(--color-ink) !important; }
.footer .text-danger, aside.footer .text-danger { color: var(--color-mid-gray) !important; }

/* ── Utility overrides ── */
.text-muted { color: var(--color-mid-gray) !important; }
.text-danger { color: var(--color-ember) !important; }
.text-success { color: var(--color-ink) !important; }
.text-primary { color: var(--color-ink) !important; }
.text-info { color: var(--color-ink-soft) !important; }

/* ── Dropdown ── */
.dropdown-menu { border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-nested) !important; box-shadow: var(--shadow-card) !important; background-color: var(--color-paper) !important; padding: 4px !important; }
.dropdown-item { color: var(--color-ink) !important; font-size: 14px !important; border-radius: var(--radius-small) !important; padding: 8px 12px !important; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; }

/* ── Auth / Login ── */
.authentication, .theme-blush .authentication { background-color: var(--color-canvas) !important; }
.authentication .container { display: flex !important; align-items: center !important; min-height: 100vh !important; }
.auth_form, .authentication .card.auth_form { border-radius: var(--radius-cards) !important; border: 1px solid var(--color-hairline) !important; box-shadow: var(--shadow-card) !important; padding: 20px !important; background-color: var(--color-paper) !important; }
.auth_form .header, .authentication .header { border-bottom: none !important; padding-bottom: 0 !important; }
.auth_form .body { padding: 20px 0 0 !important; }

/* ── Sidebar toggle btn ── */
.btn-menu { background-color: transparent !important; border: none !important; color: var(--color-mid-gray) !important; box-shadow: none !important; border-radius: var(--radius-small) !important; }
.btn-menu:hover { background-color: var(--color-hairline) !important; color: var(--color-ink) !important; }

/* ── Overlay ── */
.overlay { background-color: rgba(10,10,10,0.3) !important; }

/* ── Product cards ── */
.product-card { border-radius: var(--radius-cards) !important; border: 1px solid var(--color-hairline) !important; box-shadow: var(--shadow-card) !important; }
.product-card:hover { box-shadow: 0 0 0 1px rgba(23,23,23,0.1), 0 4px 16px rgba(0,0,0,0.12) !important; transform: translateY(-2px) !important; }

/* ── Section / layout background ── */
.body_scroll, .container-fluid, .content { background-color: transparent !important; }

/* ── Search overlay ── */
#search { background-color: var(--color-paper) !important; }
#search input[type="search"] { background-color: var(--color-canvas) !important; border-radius: var(--radius-inputs) !important; border: 1px solid var(--color-hairline) !important; color: var(--color-ink) !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-mid-gray); }

/* ── AI Widget color overrides ── */
.ai-trigger { background-color: var(--color-ink) !important; background: var(--color-ink) !important; box-shadow: 0 0 0 1px rgba(23,23,23,0.05), 0 4px 12px rgba(0,0,0,0.15) !important; }
.ai-trigger:hover { opacity: 0.85 !important; transform: none !important; background-color: var(--color-ink) !important; }
.ai-trigger.active { background: var(--color-ink-soft) !important; background-color: var(--color-ink-soft) !important; }
.ai-chat-container { border-radius: var(--radius-cards) !important; border: 1px solid var(--color-hairline) !important; box-shadow: 0 0 0 1px rgba(23,23,23,0.05), 0 8px 32px rgba(0,0,0,0.12) !important; background-color: var(--color-paper) !important; }
.ai-chat-header { background: var(--color-ink) !important; background-color: var(--color-ink) !important; }
.ai-chat-messages { background: var(--color-surface-alt) !important; background-color: var(--color-surface-alt) !important; }
.ai-chat-input { background: var(--color-paper) !important; border-top: 1px solid var(--color-hairline) !important; }
.message.user .message-bubble { background: var(--color-ink-soft) !important; background-color: var(--color-ink-soft) !important; color: #fafafa !important; }
.message.ai .message-bubble { background: var(--color-paper) !important; background-color: var(--color-paper) !important; color: var(--color-ink) !important; border: 1px solid var(--color-hairline) !important; }
.route-info { background: var(--color-canvas) !important; background-color: var(--color-canvas) !important; color: var(--color-ink) !important; border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-nested) !important; }
.navigate-button { background: var(--color-ink) !important; background-color: var(--color-ink) !important; border-radius: var(--radius-buttons) !important; color: #fafafa !important; }
.navigate-button:hover { background: var(--color-ink-soft) !important; transform: none !important; }
.ai-input { background: var(--color-canvas) !important; background-color: var(--color-canvas) !important; border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-inputs) !important; color: var(--color-ink) !important; }
.ai-input:focus { border-color: var(--color-hairline) !important; background-color: var(--color-paper) !important; }
.send-button { background: var(--color-ink) !important; background-color: var(--color-ink) !important; }
.send-button:hover { opacity: 0.85 !important; transform: none !important; }
.send-button:disabled { background: var(--color-hairline) !important; background-color: var(--color-hairline) !important; color: var(--color-mid-gray) !important; }
.quick-action { background: var(--color-canvas) !important; border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-buttons) !important; color: var(--color-mid-gray) !important; }
.quick-action:hover { background: var(--color-ink) !important; color: #fafafa !important; border-color: var(--color-ink) !important; }
.typing-indicator { border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-inputs) !important; background: var(--color-paper) !important; }
.typing-dot { background: var(--color-hairline) !important; }

/* ── Demo card (legacy) ── */
.demo-card { background: var(--color-surface-alt) !important; border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-cards) !important; }
.demo-card:hover { border-color: var(--color-ink) !important; }
.demo-content { border-radius: var(--radius-cards) !important; box-shadow: var(--shadow-card) !important; border: 1px solid var(--color-hairline) !important; }

/* ── SweetAlert overrides ── */
.sweet-overlay { background-color: rgba(10,10,10,0.4) !important; }
.sweet-alert { border-radius: var(--radius-cards) !important; border: 1px solid var(--color-hairline) !important; box-shadow: var(--shadow-card) !important; }
.sweet-alert .confirm { background-color: var(--color-ink) !important; border-radius: var(--radius-buttons) !important; }
.sweet-alert .cancel { background-color: var(--color-canvas) !important; color: var(--color-ink) !important; border-radius: var(--radius-buttons) !important; }

/* ── form-group labels ── */
label { color: var(--color-ink) !important; font-size: 13px !important; font-weight: 500 !important; }
label[style*="color: blue"] { color: var(--color-mid-gray) !important; }

/* ════════════════════════════════════════════════════════════
   Sidebar
   Background #fafafa — tonal separation from canvas #f5f5f5
   is sufficient; no divider line needed (CLAUDE.md)
   ════════════════════════════════════════════════════════════ */

/* Shell — no border-right per design system */
#leftsidebar, .sidebar, .theme-blush #leftsidebar, .theme-blush .sidebar {
  background-color: #fafafa !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* Brand row */
.sb-brand, .navbar-brand, .sidebar .navbar-brand, .theme-blush .sidebar .navbar-brand {
  background-color: #fafafa !important;
  border-bottom: 1px solid #e5e5e5 !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.sb-brand-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  flex: 1 !important;
  overflow: hidden !important;
}

.sb-logo-wrap {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: #e5e5e5;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.sb-logo-img {
  width: 32px; height: 32px;
  object-fit: cover;
  display: none;
}

.sb-logo-fallback {
  font-size: 15px; font-weight: 600;
  color: #0a0a0a;
  line-height: 1;
}

.sb-brand-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0a0a0a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.01em !important;
}

/* Hamburger */
.btn-menu, .ls-toggle-btn {
  background: transparent !important;
  border: none !important;
  color: #737373 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
}
.btn-menu:hover, .ls-toggle-btn:hover {
  background: #e5e5e5 !important;
  color: #0a0a0a !important;
}

/* Section labels — caption role: 12px/500 uppercase +0.05em */
.sb-section-label {
  list-style: none !important;
  padding: 16px 16px 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #737373 !important;
  line-height: 1.33 !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Nav list container */
.sidebar .menu, .theme-blush .sidebar .menu { background: transparent !important; }
.sidebar .menu .list, .theme-blush .sidebar .menu .list { padding: 8px 0 16px !important; }

/* Top-level nav links — 14px body text minimum */
.sidebar .menu ul.list > li > a,
.theme-blush .sidebar .menu ul.list > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  margin: 1px 8px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #737373 !important;
  background: transparent !important;
  transition: background 0.12s, color 0.12s !important;
  white-space: nowrap !important;
}
.sidebar .menu ul.list > li > a:hover,
.sidebar .menu ul.list > li.active > a,
.theme-blush .sidebar .menu ul.list > li > a:hover,
.theme-blush .sidebar .menu ul.list > li.active > a {
  background: #efefef !important;
  color: #0a0a0a !important;
}

/* Icons */
.sidebar .menu ul.list > li > a > i,
.theme-blush .sidebar .menu ul.list > li > a > i {
  font-size: 15px !important;
  width: 20px !important;
  text-align: center !important;
  color: #a3a3a3 !important;
  flex-shrink: 0 !important;
  transition: color 0.12s !important;
}
.sidebar .menu ul.list > li > a:hover > i,
.sidebar .menu ul.list > li.active > a > i {
  color: #0a0a0a !important;
}

/* Submenu — 14px, indented, no decorative border accent */
.sidebar .menu ul.ml-menu,
.theme-blush .sidebar .menu ul.ml-menu {
  background: transparent !important;
  padding: 2px 0 6px !important;
  margin: 0 !important;
}
.sidebar .menu ul.ml-menu li a,
.theme-blush .sidebar .menu ul.ml-menu li a {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #737373 !important;
  padding: 7px 12px 7px 44px !important;
  margin: 1px 8px !important;
  border-radius: 10px !important;
  display: block !important;
  background: transparent !important;
  transition: background 0.12s, color 0.12s !important;
}
.sidebar .menu ul.ml-menu li a:hover,
.sidebar .menu ul.ml-menu li.active a,
.theme-blush .sidebar .menu ul.ml-menu li a:hover {
  background: #efefef !important;
  color: #0a0a0a !important;
}

/* Menu-toggle arrow */
.sidebar .menu ul.list > li > a.menu-toggle::after,
.theme-blush .sidebar .menu ul.list > li > a.menu-toggle::after {
  margin-left: auto !important;
  opacity: 0.35 !important;
}

/* Logout — ember color on hover only (destructive) */
.sb-logout-item > a { color: #737373 !important; }
.sb-logout-item > a:hover {
  background: #fff5f5 !important;
  color: #e7000b !important;
}
.sb-logout-item > a:hover > i { color: #e7000b !important; }

/* Scrollbar inside sidebar */
.sidebar .scrollthis::-webkit-scrollbar { width: 3px; }
.sidebar .scrollthis::-webkit-scrollbar-thumb { background: #e5e5e5; border-radius: 3px; }
.sidebar .scrollthis::-webkit-scrollbar-track { background: transparent; }

/* ════════════════════════════════════════════════════════════
   Sidebar — Collapsed state (body.ls-toggle-menu)
   ════════════════════════════════════════════════════════════ */

body.ls-toggle-menu .sb-section-label,
body.ls-closed    .sb-section-label { display: none !important; }

body.ls-toggle-menu .sb-brand-link { justify-content: center !important; }
body.ls-toggle-menu .sb-brand-name { display: none !important; }
body.ls-toggle-menu .navbar-brand,
body.ls-toggle-menu .sb-brand { justify-content: center !important; padding: 0 8px !important; }
body.ls-toggle-menu .btn-menu { margin: 0 !important; }

body.ls-toggle-menu .sidebar .menu ul.list > li > a,
body.ls-toggle-menu .theme-blush .sidebar .menu ul.list > li > a {
  justify-content: center !important;
  padding: 10px 8px !important;
  margin: 1px 6px !important;
  gap: 0 !important;
}

body.ls-toggle-menu .sidebar .menu ul.list > li > a > span,
body.ls-toggle-menu .sidebar .menu ul.list > li > a span:not(i) { display: none !important; }

/* Tooltip label on hover in collapsed mode */
body.ls-toggle-menu .sidebar .menu ul.list > li:hover > a > span {
  display: block !important;
  position: fixed !important;
  left: 64px !important;
  top: auto !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 0 0 1px rgba(23,23,23,0.05), 0 4px 12px rgba(0,0,0,0.1) !important;
  pointer-events: none !important;
  z-index: 99999 !important;
  line-height: 1.43 !important;
  letter-spacing: 0 !important;
}

body.ls-toggle-menu .sidebar .menu ul.list > li > a > i {
  width: auto !important;
  font-size: 18px !important;
  margin: 0 !important;
  color: #737373 !important;
}
body.ls-toggle-menu .sidebar .menu ul.list > li > a:hover > i { color: #0a0a0a !important; }

/* Submenu flyout in collapsed mode */
body.ls-toggle-menu .sidebar .menu ul.ml-menu {
  position: fixed !important;
  left: 64px !important;
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px rgba(23,23,23,0.05), 0 4px 16px rgba(0,0,0,0.1) !important;
  padding: 4px !important;
  min-width: 160px !important;
  z-index: 99999 !important;
}
body.ls-toggle-menu .sidebar .menu ul.ml-menu li a {
  padding: 8px 14px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  color: #737373 !important;
  background: transparent !important;
}
body.ls-toggle-menu .sidebar .menu ul.ml-menu li a:hover {
  background: #f5f5f5 !important;
  color: #0a0a0a !important;
}

/* ls-closed (narrow screens) */
body.ls-closed .sidebar .menu ul.list > li > a > span { display: none !important; }
body.ls-closed .sidebar .menu ul.list > li:hover > a > span {
  display: block !important;
  position: fixed !important;
  left: 64px !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 0 0 1px rgba(23,23,23,0.05), 0 4px 12px rgba(0,0,0,0.1) !important;
  z-index: 99999 !important;
  pointer-events: none !important;
}
body.ls-closed .sb-brand-name { display: none !important; }
body.ls-closed .sb-brand-link { justify-content: center !important; }

/* ════════════════════════════════════════════════════════════
   Sidebar — Active link states
   ════════════════════════════════════════════════════════════ */

.sidebar .menu ul.list > li.active > ul.ml-menu { display: block !important; }

/* Active direct link */
.sidebar .menu ul.list > li.active > a:not(.menu-toggle) {
  background: #eff6ff !important;
  color: #2563eb !important;
  font-weight: 600 !important;
}
.sidebar .menu ul.list > li.active > a:not(.menu-toggle) > i { color: #2563eb !important; }

/* Active parent toggle — blue text/icon when a child is active */
.sidebar .menu ul.list > li.active > a.menu-toggle { color: #2563eb !important; }
.sidebar .menu ul.list > li.active > a.menu-toggle > i { color: #2563eb !important; }

/* Active child — blue highlight */
.sidebar .menu ul.ml-menu > li.active > a {
  background: #eff6ff !important;
  color: #2563eb !important;
  font-weight: 600 !important;
}