/*
 * LIBER ADMIN — Design System v2.0
 * Clean, Professional, Enterprise UI
 * ====================================
 * Loads after sb-admin-2.css & Bootstrap 4
 * Full visual override — preserves all HTML structure
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- LIGHT MODE --- */
  --color-bg:        #f4f6fb;
  --color-surface:   #ffffff;
  --color-surface-2: #f1f5f9;
  --color-surface-3: #e2e8f0;

  /* Sidebar */
  --sidebar-bg:          #0f172a;
  --sidebar-hover:       rgba(255,255,255,0.05);
  --sidebar-active-bg:   rgba(99,102,241,0.14);
  --sidebar-accent:      #6366f1;
  --sidebar-text:        #8b9db5;
  --sidebar-text-hover:  #c8d3e1;
  --sidebar-text-active: #ffffff;
  --sidebar-section:     #3d5068;
  --sidebar-divider:     rgba(255,255,255,0.07);
  --sidebar-width:       240px;

  /* Topbar */
  --topbar-bg:     #ffffff;
  --topbar-border: #e8edf5;

  /* Brand / Semantic */
  --color-primary:       #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-light: #eef2ff;

  --color-success:       #10b981;
  --color-success-hover: #059669;
  --color-success-light: #ecfdf5;
  --color-success-text:  #065f46;

  --color-warning:       #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: #fffbeb;
  --color-warning-text:  #78350f;

  --color-danger:        #ef4444;
  --color-danger-hover:  #dc2626;
  --color-danger-light:  #fef2f2;
  --color-danger-text:   #991b1b;

  --color-info:          #06b6d4;
  --color-info-hover:    #0891b2;
  --color-info-light:    #ecfeff;
  --color-info-text:     #155e75;

  /* Text */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-disabled:  #cbd5e1;

  /* Borders */
  --border-color:       #e2e8f0;
  --border-strong:      #c8d3e1;
  --border-focus:       #6366f1;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm:    0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:    0 4px 8px -1px rgba(15,23,42,0.09), 0 2px 4px -1px rgba(15,23,42,0.05);
  --shadow-lg:    0 10px 20px -3px rgba(15,23,42,0.10), 0 4px 6px -2px rgba(15,23,42,0.05);
  --shadow-xl:    0 20px 30px -5px rgba(15,23,42,0.12), 0 10px 12px -5px rgba(15,23,42,0.06);
  --shadow-focus: 0 0 0 3px rgba(99,102,241,0.22);

  /* Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.25rem;
  --radius-full: 9999px;

  /* Transitions */
  --tr-fast: 130ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --tr-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- DARK MODE --- */
[data-theme="dark"] {
  --color-bg:        #0c1220;
  --color-surface:   #1a2437;
  --color-surface-2: #1f2d42;
  --color-surface-3: #2a3a52;

  --sidebar-bg:          #080e1c;
  --sidebar-hover:       rgba(255,255,255,0.04);
  --sidebar-active-bg:   rgba(129,140,248,0.12);
  --sidebar-accent:      #818cf8;
  --sidebar-text:        #5a7090;
  --sidebar-text-hover:  #8ba3c0;
  --sidebar-text-active: #f0f4ff;
  --sidebar-section:     #2a3a52;
  --sidebar-divider:     rgba(255,255,255,0.05);

  --topbar-bg:     #1a2437;
  --topbar-border: #243247;

  --color-primary:       #818cf8;
  --color-primary-hover: #6366f1;
  --color-primary-light: rgba(129,140,248,0.12);

  --color-success:       #34d399;
  --color-success-light: rgba(52,211,153,0.1);
  --color-success-text:  #6ee7b7;

  --color-warning:       #fbbf24;
  --color-warning-light: rgba(251,191,36,0.1);
  --color-warning-text:  #fde68a;

  --color-danger:        #f87171;
  --color-danger-light:  rgba(248,113,113,0.1);
  --color-danger-text:   #fca5a5;

  --color-info:          #22d3ee;
  --color-info-light:    rgba(34,211,238,0.1);
  --color-info-text:     #67e8f9;

  --text-primary:   #e8f0fc;
  --text-secondary: #8ba3c0;
  --text-muted:     #5a7090;
  --text-disabled:  #3a5070;

  --border-color:  #243247;
  --border-strong: #2e4060;
  --border-focus:  #818cf8;

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:    0 4px 8px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.3);
  --shadow-lg:    0 10px 20px -3px rgba(0,0,0,0.45), 0 4px 6px -2px rgba(0,0,0,0.3);
  --shadow-xl:    0 20px 30px -5px rgba(0,0,0,0.5), 0 10px 12px -5px rgba(0,0,0,0.35);
  --shadow-focus: 0 0 0 3px rgba(129,140,248,0.25);
}

/* ============================================================
   2. BASE & TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans) !important;
  background-color: var(--color-bg) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  transition: background-color var(--tr-slow), color var(--tr-slow);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
  letter-spacing: -0.016em;
}

a { color: var(--color-primary); transition: color var(--tr-fast); }
a:hover { color: var(--color-primary-hover); text-decoration: none; }

/* Text utilities */
.text-gray-100 { color: #f8f9fc !important; }
.text-gray-200 { color: #eaecf4 !important; }
.text-gray-300 { color: var(--text-disabled) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-500 { color: #718096 !important; }
.text-gray-600 { color: var(--text-secondary) !important; }
.text-gray-700 { color: #3d4852 !important; }
.text-gray-800 { color: var(--text-primary) !important; }
.text-gray-900 { color: #1a202c !important; }
.text-primary   { color: var(--color-primary)   !important; }
.text-success   { color: var(--color-success)   !important; }
.text-warning   { color: var(--color-warning)   !important; }
.text-danger    { color: var(--color-danger)    !important; }
.text-info      { color: var(--color-info)      !important; }
.text-muted     { color: var(--text-muted)      !important; }

hr { border-color: var(--border-color) !important; margin: 1.25rem 0; }
small, .small { color: var(--text-muted) !important; }

code {
  background: var(--color-surface-2);
  color: var(--color-primary);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

/* ============================================================
   3. LAYOUT
   ============================================================ */
#wrapper { display: flex; min-height: 100vh; }

#content-wrapper {
  background-color: var(--color-bg) !important;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: background-color var(--tr-slow);
}

#content { flex: 1; }

.container-fluid {
  padding: 1.75rem 2rem;
}

/* ============================================================
   4. SIDEBAR
   ============================================================ */
.sidebar {
  background: var(--sidebar-bg) !important;
  width: var(--sidebar-width) !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  position: sticky !important;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--tr-slow), background var(--tr-slow);
  border-right: 1px solid var(--sidebar-divider);
  scrollbar-width: none;
  flex-shrink: 0;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Kill the gradient */
.bg-gradient-primary {
  background: var(--sidebar-bg) !important;
  background-image: none !important;
}

/* Brand */
.sidebar-brand {
  padding: 1.375rem 1.25rem !important;
  border-bottom: 1px solid var(--sidebar-divider) !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  min-height: 68px;
}

.sidebar-brand-text {
  font-family: var(--font-sans) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  color: #e8f0fc !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
}

.sidebar-brand-text sup {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sidebar-accent);
  margin-left: 5px;
  vertical-align: super;
  opacity: 0.9;
}

/* Divider */
.sidebar-divider {
  border-top: 1px solid var(--sidebar-divider) !important;
  margin: 0.375rem 1rem !important;
}

/* Section Label */
.sidebar-heading {
  padding: 1rem 1.375rem 0.375rem !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--sidebar-section) !important;
}

/* Nav Items */
.sidebar .nav-item {
  padding: 0 0.625rem;
  margin-bottom: 1px;
}

.sidebar .nav-item .nav-link {
  display: flex !important;
  align-items: center !important;
  padding: 0.6rem 0.875rem !important;
  border-radius: var(--radius-md) !important;
  color: var(--sidebar-text) !important;
  font-size: 0.8375rem !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em;
  transition: all var(--tr-fast) !important;
  position: relative;
  white-space: nowrap;
}

.sidebar .nav-item .nav-link:hover {
  color: var(--sidebar-text-hover) !important;
  background: var(--sidebar-hover) !important;
}

.sidebar .nav-item.active .nav-link,
.sidebar .nav-item .nav-link.sidebar-active {
  color: var(--sidebar-text-active) !important;
  background: var(--sidebar-active-bg) !important;
  font-weight: 500 !important;
}

/* Active indicator bar */
.sidebar .nav-item.active .nav-link::before,
.sidebar .nav-item .nav-link.sidebar-active::before {
  content: '';
  position: absolute;
  left: -0.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 56%;
  background: var(--sidebar-accent);
  border-radius: 0 3px 3px 0;
}

/* Icons */
.sidebar .nav-item .nav-link .fas,
.sidebar .nav-item .nav-link .far,
.sidebar .nav-item .nav-link .fab,
.sidebar .nav-item .nav-link i {
  width: 1.25rem !important;
  font-size: 0.8125rem !important;
  text-align: center !important;
  margin-right: 0.75rem !important;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--tr-fast);
}

.sidebar .nav-item:hover .nav-link i,
.sidebar .nav-item.active .nav-link i,
.sidebar .nav-item .nav-link.sidebar-active i {
  opacity: 1;
}

/* Toggle Button */
#sidebarToggle {
  background: rgba(255,255,255,0.06) !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid var(--sidebar-divider) !important;
  color: var(--sidebar-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition: all var(--tr-base) !important;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

#sidebarToggle::after {
  content: '←';
  font-size: 0.6875rem;
  color: var(--sidebar-text);
}

.toggled #sidebarToggle::after { content: '→'; }

#sidebarToggle:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--sidebar-text-hover) !important;
}

.text-center.d-none.d-md-inline { padding: 1rem 0; }

/* ============================================================
   5. TOPBAR
   ============================================================ */
.topbar,
nav.navbar.topbar {
  background-color: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
  box-shadow: 0 1px 0 var(--topbar-border) !important;
  margin-bottom: 0 !important;
  padding: 0 1.75rem !important;
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color var(--tr-slow), border-color var(--tr-slow);
}

/* Kill white bg override from Bootstrap */
.topbar.bg-white { background-color: var(--topbar-bg) !important; }

.topbar-divider {
  border-left: 1px solid var(--border-color) !important;
  height: 1.75rem !important;
  margin: auto 0.75rem !important;
}

/* Mobile sidebar toggle */
#sidebarToggleTop {
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
  padding: 0.375rem 0.6rem !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  transition: all var(--tr-fast) !important;
}
#sidebarToggleTop:hover {
  background: var(--color-surface-2) !important;
  color: var(--text-primary) !important;
}

/* User dropdown trigger */
.navbar-nav .nav-link.dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  color: var(--text-secondary) !important;
  padding: 0.375rem 0.5rem !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--tr-fast) !important;
}
.navbar-nav .nav-link.dropdown-toggle:hover {
  background: var(--color-surface-2) !important;
  color: var(--text-primary) !important;
}
.navbar-nav .nav-link.dropdown-toggle::after { display: none !important; }

.img-profile {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 2px solid var(--border-color);
}

/* Dark mode toggle */
.theme-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--tr-fast);
  flex-shrink: 0;
  outline: none;
}
.theme-toggle:hover {
  background: var(--color-surface-3);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.theme-toggle i { font-size: 0.8125rem; pointer-events: none; }

/* Dropdown */
.dropdown-menu {
  background: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0.375rem !important;
  min-width: 185px;
}
.dropdown-item {
  color: var(--text-secondary) !important;
  font-size: 0.8375rem !important;
  font-weight: 450;
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--tr-fast) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.dropdown-item:hover {
  background: var(--color-surface-2) !important;
  color: var(--text-primary) !important;
}
.dropdown-item i {
  color: var(--text-muted) !important;
  width: 1rem;
  text-align: center;
  font-size: 0.8125rem !important;
}
.dropdown-divider { border-color: var(--border-color) !important; margin: 0.25rem 0 !important; }
.dropdown-header {
  color: var(--text-muted) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem 0.4rem !important;
}

/* Animations */
.animated--grow-in  { animation: growIn var(--tr-base) ease-in-out; transform-origin: top right; }
.animated--fade-in  { animation: fadeInMenu 180ms ease; }
@keyframes growIn   { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeInMenu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   6. CARDS
   ============================================================ */
.card {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background-color var(--tr-slow), border-color var(--tr-slow), box-shadow var(--tr-base);
}
.card:hover { box-shadow: var(--shadow-md) !important; }
.card.shadow  { box-shadow: var(--shadow-md) !important; }
.card.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.card-header {
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1rem 1.5rem !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.card-header h6, .card-header .h6 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.008em;
}

.card-body { padding: 1.5rem !important; color: var(--text-primary) !important; }
.card-footer {
  background-color: var(--color-surface-2) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 0.875rem 1.5rem !important;
}

/* KPI Stat Cards — colored left border */
.card.border-left-primary,
.card.border-left-success,
.card.border-left-info,
.card.border-left-warning,
.card.border-left-danger {
  border: 1px solid var(--border-color) !important;
  border-left-width: 3px !important;
}
.card.border-left-primary { border-left-color: var(--color-primary) !important; }
.card.border-left-success  { border-left-color: var(--color-success) !important; }
.card.border-left-info     { border-left-color: var(--color-info)    !important; }
.card.border-left-warning  { border-left-color: var(--color-warning) !important; }
.card.border-left-danger   { border-left-color: var(--color-danger)  !important; }

/* Stat card typography */
.card .text-xs {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}
.card .h5.mb-0.font-weight-bold {
  font-size: 1.625rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  line-height: 1.2 !important;
}
.card .fa-2x {
  font-size: 1.625rem !important;
  color: var(--border-strong) !important;
  opacity: 0.4;
}
[data-theme="dark"] .card .fa-2x { color: var(--color-surface-3) !important; opacity: 0.5; }

/* ============================================================
   7. DATA TABLES
   ============================================================ */
.table {
  color: var(--text-primary) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.table thead th {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  background-color: var(--color-surface-2) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-top: none !important;
  padding: 0.875rem 1.125rem !important;
  white-space: nowrap;
}
.table tbody tr {
  transition: background-color var(--tr-fast);
}
.table tbody td {
  padding: 0.9rem 1.125rem !important;
  border-top: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  font-size: 0.875rem !important;
  vertical-align: middle !important;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr:hover td {
  background-color: var(--color-surface-2) !important;
  color: var(--text-primary) !important;
}

/* table-bordered */
.table.table-bordered {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.table.table-bordered thead th {
  border: none !important;
  border-right: 1px solid var(--border-color) !important;
}
.table.table-bordered thead th:last-child { border-right: none !important; }
.table.table-bordered tbody td {
  border: none !important;
  border-right: 1px solid var(--border-color) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
.table.table-bordered tbody td:last-child { border-right: none !important; }
.table.table-bordered tbody tr:last-child td { border-bottom: none !important; }

/* DataTables overrides */
.dataTables_wrapper { color: var(--text-primary) !important; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-secondary) !important;
  font-size: 0.8125rem !important;
}
.dataTables_wrapper .dataTables_filter input {
  background: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.4rem 0.75rem !important;
  font-size: 0.875rem !important;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}
.dataTables_wrapper select {
  background: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.3rem 0.5rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  padding: 0.375rem 0.625rem !important;
  font-size: 0.8125rem !important;
  transition: all var(--tr-fast) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--color-surface-2) !important;
  color: var(--text-primary) !important;
  border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--text-disabled) !important;
  background: transparent !important;
}

/* ============================================================
   8. FORMS & INPUTS
   ============================================================ */
.form-control {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  padding: 0.5625rem 0.875rem !important;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background-color var(--tr-slow) !important;
  height: auto !important;
  line-height: 1.55 !important;
}
.form-control:hover { border-color: var(--border-strong) !important; }
.form-control:focus {
  background-color: var(--color-surface) !important;
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  color: var(--text-primary) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--text-muted) !important; font-weight: 400; }
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--color-surface-2) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
}
textarea.form-control { resize: vertical; min-height: 100px; }
select.form-control { cursor: pointer; }

/* Approved-select dropdown */
select.approved-select {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  font-size: 0.8125rem !important;
  padding: 0.3125rem 0.625rem !important;
  transition: border-color var(--tr-fast) !important;
}

/* Labels */
label, .form-label, .col-form-label {
  color: var(--text-secondary) !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.4rem !important;
}
.form-group { margin-bottom: 1.25rem !important; }

/* Input group */
.input-group-text {
  background-color: var(--color-surface-2) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.875rem !important;
  padding: 0.5625rem 0.875rem !important;
}
.input-group .form-control:first-child  { border-radius: var(--radius-md) 0 0 var(--radius-md) !important; }
.input-group .form-control:last-child   { border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; }

/* Validation */
.form-control.is-valid   { border-color: var(--color-success) !important; background-image: none !important; }
.form-control.is-valid:focus  { box-shadow: 0 0 0 3px rgba(16,185,129,0.2) !important; }
.form-control.is-invalid { border-color: var(--color-danger) !important; background-image: none !important; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.2) !important; }
.valid-feedback   { color: var(--color-success) !important; font-size: 0.8125rem !important; }
.invalid-feedback { color: var(--color-danger)  !important; font-size: 0.8125rem !important; }

/* Custom controls */
.custom-control-label { color: var(--text-secondary) !important; font-size: 0.875rem; cursor: pointer; }

/* ============================================================
   9. BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--tr-fast) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  border-width: 1px !important;
  cursor: pointer;
  line-height: 1.5 !important;
}
.btn-sm { font-size: 0.8125rem !important; padding: 0.375rem 0.75rem !important; }
.btn-lg { font-size: 1rem !important;      padding: 0.75rem 1.5rem !important; }

.btn:focus { outline: none !important; box-shadow: var(--shadow-focus) !important; }

/* Active press */
.btn:active { transform: translateY(0) !important; }

/* Primary */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-primary:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}
/* Outline Primary */
.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
/* Active outline-primary */
.btn-outline-primary.active,
.btn.btn-primary:not(.btn-outline-primary) { /* stays as is */ }

/* Success */
.btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-success:hover {
  background-color: var(--color-success-hover) !important;
  border-color: var(--color-success-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* Warning */
.btn-warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-warning:hover {
  background-color: var(--color-warning-hover) !important;
  border-color: var(--color-warning-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* Danger */
.btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn-danger:hover {
  background-color: var(--color-danger-hover) !important;
  border-color: var(--color-danger-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}

/* Secondary */
.btn-secondary {
  background-color: var(--color-surface-2) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.btn-secondary:hover {
  background-color: var(--color-surface-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

/* Light */
.btn-light {
  background-color: var(--color-surface-2) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* Icon size inside buttons */
.btn .fas, .btn .far, .btn .fab { font-size: 0.8125rem !important; }

/* ============================================================
   10. BADGES
   ============================================================ */
.badge {
  font-family: var(--font-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em;
  padding: 0.3125em 0.625em !important;
  border-radius: var(--radius-full) !important;
}
.badge-primary   { background-color: var(--color-primary-light) !important; color: var(--color-primary)   !important; }
.badge-success   { background-color: var(--color-success-light) !important; color: var(--color-success)   !important; }
.badge-warning   { background-color: var(--color-warning-light) !important; color: var(--color-warning-text)  !important; }
.badge-danger    { background-color: var(--color-danger-light)  !important; color: var(--color-danger)    !important; }
.badge-info      { background-color: var(--color-info-light)    !important; color: var(--color-info)      !important; }
.badge-secondary { background-color: var(--color-surface-3)     !important; color: var(--text-secondary)  !important; }

/* ============================================================
   11. ALERTS
   ============================================================ */
.alert {
  border-radius: var(--radius-md) !important;
  border: 1px solid !important;
  padding: 0.875rem 1.125rem !important;
  font-size: 0.875rem !important;
  font-weight: 450;
}
.alert-success { background-color: var(--color-success-light) !important; border-color: rgba(16,185,129,0.4) !important; color: var(--color-success-text) !important; }
.alert-danger  { background-color: var(--color-danger-light)  !important; border-color: rgba(239,68,68,0.4) !important; color: var(--color-danger-text)  !important; }
.alert-warning { background-color: var(--color-warning-light) !important; border-color: rgba(245,158,11,0.4) !important; color: var(--color-warning-text) !important; }
.alert-info    { background-color: var(--color-info-light)    !important; border-color: rgba(6,182,212,0.4) !important; color: var(--color-info-text)    !important; }

/* ============================================================
   12. TABS
   ============================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--border-color) !important;
  gap: 0.125rem;
}
.nav-tabs .nav-item { padding: 0; margin-bottom: 0; }
.nav-tabs .nav-link {
  font-size: 0.8375rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: 0.625rem 1rem !important;
  transition: all var(--tr-fast) !important;
}
.nav-tabs .nav-link:hover {
  color: var(--text-secondary) !important;
  background: var(--color-surface-2) !important;
  border-color: transparent !important;
}
.nav-tabs .nav-link.active {
  background-color: var(--color-surface) !important;
  border-color: var(--border-color) var(--border-color) var(--color-surface) !important;
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}
.tab-content {
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 1.5rem;
}

/* ============================================================
   13. MODALS
   ============================================================ */
.modal-content {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border-color) !important;
  padding: 1.25rem 1.5rem !important;
  background: var(--color-surface) !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}
.modal-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.012em;
}
.modal-body  { padding: 1.5rem !important; color: var(--text-secondary) !important; }
.modal-footer {
  border-top: 1px solid var(--border-color) !important;
  padding: 1rem 1.5rem !important;
  background: var(--color-surface-2) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
  gap: 0.5rem;
}
.close {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  font-size: 1.25rem !important;
  transition: color var(--tr-fast) !important;
  text-shadow: none !important;
}
.close:hover { color: var(--text-primary) !important; }
.modal-backdrop { background: rgba(8,14,28,0.55) !important; }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.7) !important; }

/* ============================================================
   14. TOASTS — compact pill notification
   ============================================================ */

/* Legacy Bootstrap toasts (kept for compatibility) */
.toast {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: 0.875rem !important;
  min-width: 240px;
}
.toast.bg-success { background-color: var(--color-success) !important; border-color: var(--color-success) !important; }
.toast.bg-danger  { background-color: var(--color-danger)  !important; border-color: var(--color-danger)  !important; }
.toast-body { padding: 0.75rem 1rem !important; font-weight: 500 !important; }

/* ── Compact inline toast (#liber-toast) ── */
#liber-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#liber-toast.liber-toast-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#liber-toast.liber-toast-success { background: var(--color-success, #10b981); }
#liber-toast.liber-toast-error   { background: var(--color-danger,  #ef4444); }

/* ============================================================
   15. PROGRESS BARS
   ============================================================ */
.progress {
  background-color: var(--color-surface-2) !important;
  border-radius: var(--radius-full) !important;
  height: 6px !important;
  overflow: hidden;
}
.progress-bar { border-radius: var(--radius-full) !important; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.progress-sm  { height: 4px !important; }
.progress-bar.bg-info    { background-color: var(--color-info)    !important; }
.progress-bar.bg-success { background-color: var(--color-success) !important; }
.progress-bar.bg-warning { background-color: var(--color-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--color-danger)  !important; }
.progress-bar.bg-primary { background-color: var(--color-primary) !important; }

/* ============================================================
   16. PAGE HEADINGS
   ============================================================ */
h1.h3, .h3.mb-4, .h3.mb-0 {
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.d-sm-flex.align-items-center.justify-content-between.mb-4 {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.75rem !important;
}

/* ============================================================
   17. FOOTER
   ============================================================ */
.sticky-footer {
  background-color: var(--color-surface) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 1rem 0 !important;
  transition: background-color var(--tr-slow), border-color var(--tr-slow);
}
.sticky-footer .copyright {
  font-size: 0.8125rem !important;
  color: var(--text-muted) !important;
}

/* ============================================================
   18. SCROLL TO TOP
   ============================================================ */
.scroll-to-top {
  position: fixed !important;
  right: 1.5rem !important;
  bottom: 1.5rem !important;
  background-color: var(--color-primary) !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--tr-base) !important;
  z-index: 1000;
}
.scroll-to-top:hover {
  background-color: var(--color-primary-hover) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}
.scroll-to-top i { font-size: 0.875rem !important; color: #fff !important; }

/* ============================================================
   19. SELECT2 OVERRIDE
   ============================================================ */
.select2-container--bootstrap4 .select2-selection {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast) !important;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
}
.select2-container--bootstrap4 .select2-selection--single {
  height: auto !important;
  padding: 0.5625rem 0.875rem !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  font-size: 0.875rem !important;
  padding-left: 0 !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted) !important;
}
.select2-dropdown {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.5rem 0.75rem !important;
}
.select2-results__option {
  color: var(--text-secondary) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.875rem !important;
  border-radius: var(--radius-sm) !important;
}
.select2-results__option--highlighted {
  background-color: var(--color-surface-2) !important;
  color: var(--text-primary) !important;
}
.select2-container--bootstrap4 .select2-results__option--selected {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary) !important;
}
.select2-container--bootstrap4 .select2-selection--multiple {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  min-height: 2.375rem;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  background-color: var(--color-primary-light) !important;
  border-color: rgba(99,102,241,0.3) !important;
  color: var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.8125rem !important;
}

/* ============================================================
   20. NPROGRESS
   ============================================================ */
#nprogress .bar {
  background: var(--color-primary) !important;
  height: 3px !important;
}
#nprogress .peg {
  box-shadow: 0 0 12px var(--color-primary), 0 0 6px var(--color-primary) !important;
}

/* ============================================================
   21. LOADING SPINNER
   ============================================================ */
.spinner-border { color: var(--color-primary) !important; }
[x-cloak]       { display: none !important; }

/* ============================================================
   22. CHARTS
   ============================================================ */
.chart-area {
  position: relative !important;
  height: 280px !important;
}
.chart-pie {
  position: relative !important;
  max-height: 320px !important;
}

/* ============================================================
   23. FORM INSIDE CARD
   ============================================================ */
form.card { padding: 0 !important; }
form.card .card-body, form.card.p-4 { padding: 1.75rem !important; }

/* ============================================================
   24. LIST GROUP
   ============================================================ */
.list-group-item {
  background-color: var(--color-surface) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
  transition: background-color var(--tr-slow);
}

/* ============================================================
   25. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============================================================
   26. MISC / UTILITY OVERRIDES
   ============================================================ */
/* Page content bottom padding */
#content_body { padding-bottom: 2rem; }

/* Section divider inside forms */
.border-bottom { border-color: var(--border-color) !important; }
.border-top    { border-color: var(--border-color) !important; }

/* Breadcrumb */
.breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; }
.breadcrumb-item a { color: var(--text-muted) !important; font-size: 0.8125rem; }
.breadcrumb-item.active { color: var(--text-primary) !important; font-size: 0.8125rem; }

/* Input group append / prepend for image URLs */
.input-group .input-group-append .btn,
.input-group .input-group-prepend .btn {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
}

/* Global smooth transitions for color theme */
.card, .card-header, .card-body, .card-footer,
.modal-content, .modal-header, .modal-body, .modal-footer,
.form-control, .table, .dataTables_wrapper,
.dropdown-menu, .sticky-footer, .topbar, nav.navbar,
.tab-content, .nav-tabs .nav-link, .input-group-text,
.list-group-item {
  transition: background-color var(--tr-slow),
              border-color var(--tr-slow),
              color var(--tr-slow) !important;
}

/* Row gutters override for breathable spacing */
.row.mb-4, .row { --bs-gutter-x: 1.25rem; }

/* ============================================================
   27. KPI / STAT CARDS (DASHBOARD)
   ============================================================ */
.kpi-card {
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--tr-base), transform var(--tr-base) !important;
}
.kpi-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}
.kpi-card .card-body {
  padding: 1.375rem 1.5rem 1.25rem !important;
}

/* Icon badge */
.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.kpi-icon-primary { background: var(--color-primary-light); color: var(--color-primary); }
.kpi-icon-success { background: var(--color-success-light); color: var(--color-success); }
.kpi-icon-info    { background: var(--color-info-light);    color: var(--color-info);    }
.kpi-icon-warning { background: var(--color-warning-light); color: var(--color-warning); }
.kpi-icon-danger  { background: var(--color-danger-light);  color: var(--color-danger);  }

/* Stat label */
.kpi-label {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.25rem;
  margin-top: 0.875rem;
}

/* Stat value */
.kpi-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
  font-family: var(--font-sans);
}

/* Days selector pill group */
.days-selector {
  display: flex;
  gap: 0.25rem;
  background: var(--color-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 3px;
}
.days-selector .btn {
  border-radius: calc(var(--radius-lg) - 2px) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.3rem 0.75rem !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  transition: all var(--tr-fast) !important;
}
.days-selector .btn.btn-primary {
  background: var(--color-surface) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-xs) !important;
}
.days-selector .btn:hover:not(.btn-primary) {
  color: var(--text-secondary) !important;
  background: rgba(255,255,255,0.5) !important;
}

/* Dashboard section heading */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}
.dashboard-title {
  font-size: 1.1875rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

/* ============================================================
   28. TOKEN TABLE COMPONENTS
   ============================================================ */

/* Token logo avatar */
.token-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-surface-2);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.token-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 50%;
}
.token-logo-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-info-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
}

/* Token name + symbol group */
.token-name {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 0.875rem;
  line-height: 1.3;
}
.token-symbol {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-top: 2px;
}

/* Approved status select */
select.approved-select {
  border-radius: var(--radius-full) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.25rem 0.75rem !important;
  height: auto !important;
  width: auto !important;
  min-width: 120px;
  cursor: pointer;
  border: 1px solid var(--border-color) !important;
  background-color: var(--color-surface) !important;
  color: var(--text-secondary) !important;
  transition: all var(--tr-fast) !important;
  appearance: auto;
}
select.approved-select:focus {
  box-shadow: var(--shadow-focus) !important;
  border-color: var(--border-focus) !important;
  outline: none !important;
}

/* Table action buttons group */
.table-actions {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
}
.table-actions .btn {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-md) !important;
  font-size: 0.8rem !important;
}
.btn-icon-edit {
  background: var(--color-warning-light) !important;
  border-color: transparent !important;
  color: var(--color-warning-text) !important;
}
[data-theme="dark"] .btn-icon-edit { color: var(--color-warning) !important; }
.btn-icon-edit:hover {
  background: var(--color-warning) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.btn-icon-delete {
  background: var(--color-danger-light) !important;
  border-color: transparent !important;
  color: var(--color-danger-text) !important;
}
[data-theme="dark"] .btn-icon-delete { color: var(--color-danger) !important; }
.btn-icon-delete:hover {
  background: var(--color-danger) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ============================================================
   29. TOKEN WIZARD (ADD TOKEN)
   ============================================================ */
.wizard-container {
  max-width: 640px;
  margin: 0 auto;
}
.wizard-card {
  background: var(--color-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
}
.wizard-header {
  text-align: center;
  margin-bottom: 2rem;
}
.wizard-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: var(--color-primary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.wizard-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}
.wizard-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
}
.wizard-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
}
.wizard-footer .btn {
  min-width: 200px;
  justify-content: center;
}

/* ============================================================
   30. TOKEN EDIT FORM IMPROVEMENTS
   ============================================================ */

/* Form card (token edit) */
form.card.shadow {
  padding: 0 !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden;
}

/* Tab wrapper inside form card */
form.card .nav-tabs {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0.5rem 1.25rem 0 !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
form.card .nav-tabs::-webkit-scrollbar { display: none; }

form.card .tab-content {
  border: none !important;
  border-radius: 0 !important;
  padding: 2rem 1.75rem !important;
  background: var(--color-surface) !important;
}

/* Tab section headings h4 */
.tab-pane h4 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.01em;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.5rem !important;
}

/* Form action bar (save/back buttons) */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--border-color);
  background: var(--color-surface-2);
}
.form-actions .btn { min-width: 120px; justify-content: center; }

/* Image preview box */
.image-preview-box {
  width: 100%;
  aspect-ratio: 1;
  max-width: 200px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color var(--tr-fast);
}
.image-preview-box:hover { border-color: var(--border-focus); }
.image-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-md);
}

/* Category checkboxes */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.625rem;
}
.category-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--tr-fast);
}
.category-item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.category-item input[type="checkbox"] { cursor: pointer; }
.category-item.checked {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.category-item label {
  margin: 0 !important;
  cursor: pointer;
  font-size: 0.8125rem !important;
  color: var(--text-secondary) !important;
}

/* ============================================================
   31. PAGE LOADING OVERLAY (Alpine.js)
   ============================================================ */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
[data-theme="dark"] .loading-overlay {
  background: rgba(0, 0, 0, 0.5);
}
.loading-spinner {
  width: 44px;
  height: 44px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   32. EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}
.empty-state-icon {
  font-size: 2.5rem;
  color: var(--text-disabled);
  margin-bottom: 1rem;
}
.empty-state-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}
.empty-state-text {
  font-size: 0.875rem;
  color: var(--text-muted);
}