/* ============================================
   AYKAFIN CUSTOM STYLES - Beautiful UI Components
   ============================================ */

/* Modern Color Palette */
:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --info-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  
  --primary-color: #667eea;
  --success-color: #10b981;
  --danger-color: #ef4444;
  --warning-color: #f59e0b;
  --info-color: #3b82f6;
  
  --border-radius-sm: 10px;
  --border-radius-md: 15px;
  --border-radius-lg: 20px;
  --border-radius-xl: 30px;
  
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
}

/* ============================================
   BEAUTIFUL BUTTONS
   ============================================ */

/* Primary Button */
.btn-primary {
  background: var(--primary-gradient) !important;
  border: none !important;
  border-radius: var(--border-radius-md) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25) !important;
  color: white !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(102, 126, 234, 0.35) !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
}

/* Success Button */
.btn-success {
  background: var(--success-gradient) !important;
  border: none !important;
  border-radius: var(--border-radius-md) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25) !important;
  color: white !important;
}

.btn-success:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.35) !important;
}

/* Danger Button */
.btn-danger {
  background: var(--danger-gradient) !important;
  border: none !important;
  border-radius: var(--border-radius-md) !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.25) !important;
  color: white !important;
}

.btn-danger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.35) !important;
}

/* Outline Buttons */
.btn-outline-primary {
  border: 2px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--primary-gradient) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.25) !important;
}

.btn-outline-success {
  border: 2px solid var(--success-color) !important;
  color: var(--success-color) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
}

.btn-outline-success:hover {
  background: var(--success-gradient) !important;
  color: white !important;
  transform: translateY(-2px) !important;
}

/* Icon Buttons */
.btn-icon-only {
  border-radius: 12px !important;
  padding: 10px !important;
  transition: all 0.3s ease !important;
  box-shadow: var(--shadow-sm) !important;
}

.btn-icon-only:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ============================================
   BEAUTIFUL CARDS
   ============================================ */

.card {
  border-radius: var(--border-radius-lg) !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

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

.card.selected {
  border-left: 4px solid var(--primary-color) !important;
}

/* ============================================
   BEAUTIFUL FORM INPUTS
   ============================================ */

.form-control, .form-select {
  border-radius: var(--border-radius-md) !important;
  padding: 12px 18px !important;
  border: 2px solid #e8ecef !important;
  transition: all 0.3s ease !important;
  font-size: 15px !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Textarea */
textarea.form-control {
  border-radius: var(--border-radius-md) !important;
  padding: 12px 18px !important;
}

/* ============================================
   BEAUTIFUL BADGES
   ============================================ */

.badge {
  border-radius: var(--border-radius-sm) !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
}

.badge.rounded-pill {
  border-radius: 50px !important;
  padding: 6px 14px !important;
}

.bg-outline-primary {
  background: rgba(102, 126, 234, 0.1) !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
}

.bg-outline-success {
  background: rgba(16, 185, 129, 0.1) !important;
  color: var(--success-color) !important;
  border: 1px solid var(--success-color) !important;
}

.bg-outline-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  color: var(--danger-color) !important;
  border: 1px solid var(--danger-color) !important;
}

.bg-outline-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  color: var(--warning-color) !important;
  border: 1px solid var(--warning-color) !important;
}

.bg-outline-secondary {
  background: rgba(107, 114, 128, 0.1) !important;
  color: #6b7280 !important;
  border: 1px solid #9ca3af !important;
}

/* ============================================
   MODALS
   ============================================ */

.modal-content {
  border-radius: var(--border-radius-lg) !important;
  border: none !important;
  box-shadow: var(--shadow-xl) !important;
}

.modal-header {
  border-bottom: 2px solid #f3f4f6 !important;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0 !important;
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%) !important;
}

.modal-title {
  font-weight: 700 !important;
  background: var(--primary-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.modal-footer {
  border-top: 2px solid #f3f4f6 !important;
  background: #f9fafb !important;
}

/* ============================================
   PAGE TITLE
   ============================================ */

.page-title-container h1 {
  font-weight: 700 !important;
  background: var(--primary-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ============================================
   ANALYTICS SUMMARY CARDS
   ============================================ */

.analytics-card {
  border-radius: var(--border-radius-lg);
  padding: 20px;
  background: white;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

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

.analytics-card.primary {
  border-left-color: var(--primary-color);
}

.analytics-card.success {
  border-left-color: var(--success-color);
}

.analytics-card.danger {
  border-left-color: var(--danger-color);
}

.analytics-card.warning {
  border-left-color: var(--warning-color);
}

.analytics-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.analytics-card .stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   SEARCH INPUT
   ============================================ */

.search-input-container {
  border-radius: var(--border-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.3s ease !important;
}

.search-input-container:hover {
  box-shadow: var(--shadow-md) !important;
}

.search-input-container .form-control {
  border: none !important;
  padding: 12px 45px 12px 45px !important;
}

.search-input-container .form-control:focus {
  box-shadow: none !important;
  transform: none !important;
}

/* ============================================
   TABLES
   ============================================ */

.table {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.table thead {
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
}

.table thead th {
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  border-bottom: 2px solid #e5e7eb !important;
}

.table tbody tr:hover {
  background: #f9fafb;
}

/* ============================================
   ALERTS
   ============================================ */

.alert {
  border-radius: var(--border-radius-md) !important;
  border: none !important;
  padding: 16px 20px !important;
  box-shadow: var(--shadow-sm) !important;
}

.alert-success {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #065f46 !important;
  border-left: 4px solid var(--success-color) !important;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #991b1b !important;
  border-left: 4px solid var(--danger-color) !important;
}

.alert-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #92400e !important;
  border-left: 4px solid var(--warning-color) !important;
}

.alert-info {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #1e3a8a !important;
  border-left: 4px solid var(--info-color) !important;
}

/* ============================================
   DROPDOWN MENU
   ============================================ */

.dropdown-menu {
  border-radius: var(--border-radius-md) !important;
  border: none !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
}

.dropdown-item {
  border-radius: var(--border-radius-sm) !important;
  padding: 10px 16px !important;
  transition: all 0.2s ease !important;
  margin-bottom: 4px !important;
}

.dropdown-item:hover {
  background: var(--primary-gradient) !important;
  color: white !important;
}

/* ============================================
   LOADING STATES
   ============================================ */

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: var(--border-radius-md);
}

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

@media (max-width: 768px) {
  .btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }
  
  .card {
    margin-bottom: 12px !important;
  }
  
  .analytics-card .stat-value {
    font-size: 1.5rem !important;
  }
}

/* Page load animation */
body {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide in from bottom */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  animation: slideInUp 0.5s ease;
}

/* ============================================
   PROFILE PHOTOS
   ============================================ */

.profile-photo-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.profile-photo-circle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

/* ============================================
   EMPTY STATES
   ============================================ */

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #9ca3af;
}

.empty-state i {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.3;
}

.empty-state h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 10px;
}

.empty-state p {
  color: #9ca3af;
  margin-bottom: 24px;
}

/* ============================================
   RESPONSIVE ADD BUTTON - SIMPLE & CLEAN
   ============================================ */

/* Mobile: Floating Action Button (FAB) */
@media (max-width: 767px) {
  .add-button-container {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 1050 !important;
  }

  .add-button-container .btn {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
  }

  .add-button-container .btn span {
    display: none !important;
  }

  .add-button-container .btn i {
    margin: 0 !important;
    font-size: 24px !important;
  }

  .add-button-container .btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.5) !important;
  }
}

/* ============================================
   MOBILE NAVIGATION - IMPROVED SEGMENTATION
   ============================================ */

/* Better mobile menu organization */
@media (max-width: 1199px) {
  /* Menu container improvements */
  .menu-container {
    padding: 10px 0 !important;
  }

  /* Main menu list */
  #menu {
    padding: 0 !important;
  }

  /* Menu items - better spacing and visual separation */
  #menu > li {
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  #menu > li:last-child {
    border-bottom: none !important;
  }

  /* Menu links - larger touch targets */
  #menu > li > a {
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    border-radius: 12px !important;
    margin: 2px 8px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
  }

  /* Active/Hover states */
  #menu > li > a:hover,
  #menu > li > a.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    color: var(--primary-color) !important;
    transform: translateX(4px) !important;
  }

  /* Icons in menu */
  #menu > li > a .icon {
    width: 24px !important;
    height: 24px !important;
    margin-right: 12px !important;
    color: var(--primary-color) !important;
    flex-shrink: 0 !important;
  }

  /* Menu labels */
  #menu > li > a .label {
    flex: 1 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
  }

  /* Submenu styling */
  #menu > li > ul {
    padding-left: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    background: #f9fafb !important;
    border-radius: 8px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  #menu > li > ul > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
  }

  #menu > li > ul > li:last-child {
    border-bottom: none !important;
  }

  #menu > li > ul > li > a {
    padding: 12px 20px 12px 48px !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    display: block !important;
    transition: all 0.2s ease !important;
    border-radius: 6px !important;
    margin: 2px 6px !important;
  }

  #menu > li > ul > li > a:hover {
    background: white !important;
    color: var(--primary-color) !important;
    padding-left: 52px !important;
  }

  /* Group headings */
  #menu > li > a[data-href]:after {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    margin-left: auto !important;
    transition: transform 0.3s ease !important;
  }

  #menu > li > a[aria-expanded="true"]:after {
    transform: rotate(-135deg) !important;
  }

  /* Financial Profile section header */
  #menu > li:first-child {
    margin-top: 10px !important;
  }

  /* Removed: a nth-child(4)/(10) "group divider" rule used to live here.
     It assumed a fixed menu shape (from the original Support-role menu) and
     landed on arbitrary items for other roles (e.g. Admin's 9-item menu),
     producing a stray double-line right after "Notifications". The uniform
     border-bottom on every #menu > li above is sufficient and role-agnostic. */
}
@media (max-width: 1199px) {
html[data-dimension='mobile'] .nav-container.mobile-side-ready .mobile-buttons-container,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .mobile-buttons-container {
    height: auto !important;
    flex: 0 0 auto !important;
  }
  html[data-dimension='mobile'] .nav-container.mobile-side-ready .menu-container,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .menu-container {
    display: block !important;
  }

  html[data-dimension='mobile'] .nav-container.mobile-side-ready .language-switch-container,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .language-switch-container {
    display: block !important;
  }

  html[data-dimension='mobile'] .nav-container.mobile-side-ready .user-container,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .user-container {
    display: flex !important;
  }
}
/* Mobile menu button */
@media (max-width: 1199px) {
  /* Was color: var(--light-text) (white) — a leftover from when this
     button's visible color actually came from a vendor rule scoped to
     .mobile-buttons-container > a (html[data-navcolor='light'] ...), which
     only applied while data-navcolor happened to be 'light'. Once that
     attribute is anything else (its runtime default), or once the button
     moved out of .mobile-buttons-container (see .logo #mobileMenuButton
     below), that vendor rule stops matching and the white fallback here
     was left invisible against the drawer's white background. Setting an
     explicit dark color here removes the dependency on that vendor rule
     and the data-navcolor attribute entirely. */
  #mobileMenuButton {
    color: #1f2937 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
  }

  #mobileMenuButton:hover {
    transform: none !important;
    background: rgba(0, 0, 0, 0.05) !important;
    box-shadow: none !important;
  }
}

/* Navigation overlay improvements */
@media (max-width: 1199px) {
  .nav-container.mobile-side-in {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3) !important;
  }

  .nav-shadow {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
  }
}

/* Improve user profile section in mobile */
@media (max-width: 1199px) {
  .user-container {
    padding: 16px 20px !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05) !important;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%) !important;
  }

  .user-container .user {
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background: white !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.3s ease !important;
  }

  .user-container .user:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .user-container .user .profile {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

  .user-container .user .name {
    margin-left: 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
  }
}

/* Logo in mobile top bar — keep Acorn native sizing */
@media (max-width: 1199px) {
  .nav-container .logo {
    position: relative !important;
    padding: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }
}

/* ============================================
   MOBILE MENU - MATCH ACORN DEMO EXACTLY
   ============================================ */

/* Force the hamburger button visible on mobile.
   Acorn's own styles.css has an unconditional rule for vertical placement —
   html[data-placement='vertical'] .nav-container .nav-content .mobile-buttons-container { display: none }
   (styles.css ~line 11621) — that isn't guarded by .mobile-side-ready, so it
   fires at every screen size. This app always forces data-placement="vertical"
   (see the data-override on <html> in layout/app.blade.php), even on phones,
   so that rule was hiding the burger button that Acorn's own mobile-dimension
   rule (styles.css ~line 11796) is supposed to show. */
@media (max-width: 1199px) {
  html[data-dimension='mobile'] .nav-container .mobile-buttons-container {
    display: flex !important;
  }
}



/* Remove ALL blur effects */
html[data-dimension='mobile'] .nav-container .nav-shadow,
html[data-dimension='mobile'].mobile .nav-container .nav-shadow {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}

/* Mobile menu - Clean white background like Acorn demo */
html[data-dimension='mobile'] .nav-container,
html[data-dimension='mobile'].mobile .nav-container {
  background: #ffffff !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
}

html[data-dimension='mobile'] .nav-container .nav-content,
html[data-dimension='mobile'].mobile .nav-container .nav-content {
  background: #ffffff !important;
  opacity: 1 !important;
}

/* Menu items - Dark text on white background */
html[data-dimension='mobile'] .nav-container .menu-container,
html[data-dimension='mobile'].mobile .nav-container .menu-container {
  background: #ffffff !important;
}

html[data-dimension='mobile'] .nav-container .menu-container .menu li a,
html[data-dimension='mobile'].mobile .nav-container .menu-container .menu li a {
  color: #1f2937 !important;
  background: transparent !important;
}

html[data-dimension='mobile'] .nav-container .menu-container .menu li a .icon,
html[data-dimension='mobile'].mobile .nav-container .menu-container .menu li a .icon {
  color: #1f2937 !important;
}

html[data-dimension='mobile'] .nav-container .menu-container .menu li a .label,
html[data-dimension='mobile'].mobile .nav-container .menu-container .menu li a .label {
  color: #1f2937 !important;
}

/* Hover state */
html[data-dimension='mobile'] .nav-container .menu-container .menu li a:hover,
html[data-dimension='mobile'].mobile .nav-container .menu-container .menu li a:hover {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* Active menu item */
html[data-dimension='mobile'] .nav-container .menu-container .menu li a.active,
html[data-dimension='mobile'].mobile .nav-container .menu-container .menu li a.active {
  background: #e5e7eb !important;
  color: #1f2937 !important;
}

/* User section */
html[data-dimension='mobile'] .nav-container .user-container,
html[data-dimension='mobile'].mobile .nav-container .user-container {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
}

html[data-dimension='mobile'] .nav-container .user-container .user .name,
html[data-dimension='mobile'].mobile .nav-container .user-container .user .name {
  color: #1f2937 !important;
}

/* Language switcher */
html[data-dimension='mobile'] .nav-container .language-switch-container,
html[data-dimension='mobile'].mobile .nav-container .language-switch-container {
  background: #ffffff !important;
}

html[data-dimension='mobile'] .nav-container .language-switch-container .language-button,
html[data-dimension='mobile'].mobile .nav-container .language-switch-container .language-button {
  color: #1f2937 !important;
  background: transparent !important;
}

/* Logo section */
html[data-dimension='mobile'] .nav-container .logo,
html[data-dimension='mobile'].mobile .nav-container .logo {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* Belt-and-suspenders: force dark, visible text in the open mobile drawer,
   keyed off the drawer's own open-state class (.mobile-side-in) rather than
   just [data-dimension='mobile'], in case that attribute rule above doesn't
   win the cascade on some devices/cached asset combinations. Without this,
   menu text was reported as white-on-white (invisible) even though the
   items were actually rendering correctly. */
.nav-container.mobile-side-in .menu-container .menu li a,
.nav-container.mobile-side-in .menu-container .menu li a .label,
.nav-container.mobile-side-in .menu-container .menu li a .icon,
.nav-container.mobile-side-in .user-container .user .name,
.nav-container.mobile-side-in .language-switch-container .language-button {
  color: #1f2937 !important;
}

/* Mobile drawer scroll fix (temp-scr-shot/menuissue.txt): the drawer had no
   independent scroll containment, so background page scroll would "leak" through
   the menu's OverlayScrollbars viewport once it hit its own scroll bound (felt like
   the page jumping to top when expanding a submenu), and there was no lock stopping
   the page behind the drawer from scrolling at all. base/nav.js now toggles
   body.mobile-menu-open at the same points it already toggles .mobile-side-in/-out
   (no new state machine); this locks the page and contains scroll/touch to the menu
   itself. Bootstrap's own collapse click handler already calls preventDefault() on
   these submenu toggle links (verified in vendor/bootstrap.bundle.min.js), so no
   anchor/hash-navigation change was needed. */
body.mobile-menu-open {
  overflow: hidden !important;
}

@media (max-width: 1199px) {
  /* First attempt only added min-height:0 to .menu-container, trusting the theme's
     existing flex-grow-1 + .nav-content{height:100%} chain to give it a bounded
     height. User reports scrolling is still broken, so this strengthens it with an
     explicit, self-contained height chain that doesn't depend on that assumption:
     .nav-content gets an explicit dvh height (with vh/% fallbacks for older engines)
     and .menu-container uses the height:0 + flex-grow trick, which is the
     bulletproof cross-browser way to force a flex child to actually respect its
     container's bound instead of growing to fit its content. Still does not put
     overflow-y on .menu-container itself -- OverlayScrollbars' own .os-viewport
     child remains the single scroll container, so this isn't a second/competing
     scrollbar, just making sure that inner viewport finally has a real height to
     compute a scroll range against on real devices. */
html[data-dimension='mobile'] .nav-container.mobile-side-ready .nav-content,
html[data-dimension='mobile'] .nav-container.mobile-side-in .nav-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
  html[data-dimension='mobile'] .nav-container .menu-container {
    flex: 1 1 auto;
    height: 0;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  html[data-dimension='mobile'] .nav-container .menu-container .os-viewport {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
}

/* ============================================
   ACORN-STYLE BADGES - Global Application
   Beautiful status badges matching Acorn Payment Methods design
   ============================================ */

/* Base Badge Styling */
.badge {
  padding: 5px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 65px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
}

/* Success Badge - Green (Active, Completed, Paid) */
.badge.bg-success,
.badge.bg-outline-success {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border-color: #6ee7b7 !important;
}

/* Danger Badge - Red (Inactive, Expired, Cancelled) */
.badge.bg-danger,
.badge.bg-outline-danger {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
}

/* Primary Badge - Blue (Default, Info) */
.badge.bg-primary,
.badge.bg-outline-primary {
  background: #dbeafe !important;
  color: #1e40af !important;
  border-color: #93c5fd !important;
}

/* Secondary Badge - Gray (Pending, Draft) */
.badge.bg-secondary,
.badge.bg-outline-secondary {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #d1d5db !important;
}

/* Warning Badge - Yellow (Warning, Review) */
.badge.bg-warning,
.badge.bg-outline-warning {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fcd34d !important;
}

/* Info Badge - Cyan (Information, New) */
.badge.bg-info,
.badge.bg-outline-info {
  background: #cffafe !important;
  color: #155e75 !important;
  border-color: #67e8f9 !important;
}

/* Dark Badge - Dark Gray */
.badge.bg-dark,
.badge.bg-outline-dark {
  background: #e5e7eb !important;
  color: #1f2937 !important;
  border-color: #9ca3af !important;
}

/* Light Badge - Very Light Gray */
.badge.bg-light,
.badge.bg-outline-light {
  background: #f9fafb !important;
  color: #6b7280 !important;
  border-color: #e5e7eb !important;
}

/* Pill Style Badges */
.badge.rounded-pill {
  border-radius: 100px !important;
  padding: 5px 16px !important;
}

/* Large Badges */
.badge-lg {
  padding: 7px 18px !important;
  font-size: 12px !important;
  min-width: 80px !important;
}

/* Small Badges */
.badge-sm {
  padding: 3px 10px !important;
  font-size: 10px !important;
  min-width: 50px !important;
}

/* Badge with Icon */
.badge i,
.badge svg {
  margin-right: 4px !important;
  font-size: 10px !important;
}

/* Hover Effects */
.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

/* ============================================
   WEBHOOK EVENTS STYLES
   ============================================ */

/* Statistics Cards */
.webhook-stats-card {
  background: white;
  border-radius: var(--border-radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid;
  transition: all 0.3s ease;
}

.webhook-stats-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.webhook-stats-card.total { border-left-color: var(--info-color); }
.webhook-stats-card.success { border-left-color: var(--success-color); }
.webhook-stats-card.failed { border-left-color: var(--danger-color); }
.webhook-stats-card.today { border-left-color: var(--warning-color); }

.webhook-stats-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.webhook-stats-icon.total { background: var(--info-gradient); }
.webhook-stats-icon.success { background: var(--success-gradient); }
.webhook-stats-icon.failed { background: var(--danger-gradient); }
.webhook-stats-icon.today { background: var(--warning-gradient); }

.webhook-stats-value {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.webhook-stats-label {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Filter Card */
.webhook-filter-card {
  background: white;
  border-radius: var(--border-radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 30px;
}

.filter-group label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  font-size: 13px;
}

/* Timeline */
.webhook-timeline {
  position: relative;
  padding-left: 0;
}

.timeline-item {
  position: relative;
  padding-left: 0;
  margin-bottom: 30px;
}

/* Event Card Base */
.event-card {
  background: white;
  border-radius: var(--border-radius-md);
  padding: 25px;
  box-shadow: var(--shadow-sm);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(5px);
}

.event-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.event-card.success::before { background: var(--success-gradient); }
.event-card.danger::before { background: var(--danger-gradient); }
.event-card.warning::before { background: var(--warning-gradient); }
.event-card.info::before { background: var(--info-gradient); }

/* Event Header */
.event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f3f4f6;
}

.event-icon {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
}

.event-icon.success { background: var(--success-gradient); }
.event-icon.danger { background: var(--danger-gradient); }
.event-icon.warning { background: var(--warning-gradient); }
.event-icon.info { background: var(--info-gradient); }

/* Event Details Grid */
.event-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.detail-item {
  padding: 12px 15px;
  background: #f9fafb;
  border-radius: 10px;
  border-left: 3px solid #e5e7eb;
  transition: all 0.2s ease;
}

.detail-item:hover {
  background: #f3f4f6;
  border-left-color: var(--primary-color);
}

.detail-label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 5px;
}

.detail-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
  word-break: break-all;
}

/* Payment Method Badge */
.payment-method-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

.payment-method-badge i {
  margin-right: 5px;
  font-size: 14px;
}

/* Payload Section */
.expand-payload-btn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--primary-gradient);
  color: white;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2);
}

.expand-payload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.3);
}

.payload-json {
  display: none;
  margin-top: 15px;
  background: #1f2937;
  border-radius: 10px;
  padding: 15px;
  overflow-x: auto;
}

.payload-json pre {
  color: #10b981;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 12px;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Empty State */
.webhook-empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

.webhook-empty-state i {
  font-size: 64px;
  color: #d1d5db;
  margin-bottom: 20px;
}

.webhook-empty-state h4 {
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 10px;
}

.webhook-empty-state p {
  color: #9ca3af;
  font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .event-details {
    grid-template-columns: 1fr;
  }

  .event-header {
    flex-direction: column;
    gap: 15px;
  }

  .webhook-stats-value {
    font-size: 24px;
  }
}

/* ============================================
   MOBILE MENU — DESIGN POLISH
   (post-fix cleanup: the layout bugs above are resolved;
   this section is purely cosmetic refinement)
   ============================================ */
@media (max-width: 1199px) {
  /* Fix: long labels (e.g. "Managing App Settings") were overflowing past
     their flex container and visually overlapping the submenu chevron.
     Flex items default to min-width:auto, which blocks shrinking/truncation
     even with flex:1 — min-width:0 plus ellipsis fixes it, matching how
     truncation is already handled elsewhere in the app. */
  #menu > li > a {
    gap: 10px !important;
  }

  #menu > li > a .label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #menu > li > a[data-href]:after {
    flex-shrink: 0 !important;
  }

  /* Submenu labels can be just as long — same truncation treatment */
  #menu > li > ul > li > a {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Slightly calmer hover/active motion — 4px translate reads jumpy on touch */
  #menu > li > a:hover,
  #menu > li > a.active {
    transform: translateX(2px) !important;
  }

  /* User card: avatar gets a subtle ring, name truncates instead of wrapping
     awkwardly against the card edge */
  .user-container .user .profile {
    border: 2px solid rgba(102, 126, 234, 0.15) !important;
  }

  .user-container .user .name {
    max-width: 160px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Logo: guarantee breathing room in both the collapsed top bar and the
     open drawer header so the wordmark never sits flush against an edge */
  html[data-dimension='mobile'] .nav-container .logo {
    padding: 10px 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Section dividers: reduce visual weight so they read as separators,
     not as strongly as the accent-colored group divider two rules down */
  .language-switch-container,
  .user-container {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
}

/* ============================================
   MOBILE MENU — ROUND 2 POLISH
   (logo clipping, hamburger→X, header redesign,
   stray divider cleanup)
   ============================================ */
@media (max-width: 1199px) {
  /* Fix: real cause of the "clipping" — .logo .img is a plain <div> with a
     CSS background-image (not an <img> tag), so the vendor's object-fit/
     object-position rule (line ~11405 in styles.css) does nothing — those
     properties only affect replaced elements like <img>/<video>. With no
     background-size set, the browser renders the logo PNG at its native
     pixel size inside a 100x50px box with overflow:hidden, so anything
     past that gets cropped. background-size:contain fixes it properly. */
  .nav-container .logo .img {
    background-size: contain !important;
    background-position: center !important;
  }

  /* Header block (logo / user card / language) redesign — was three
     visually disconnected stacked segments with plain hairline dividers.
     Group them as one soft panel instead. */
  html[data-dimension='mobile'] .nav-container.mobile-side-ready .nav-content > .logo,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .nav-content > .logo {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    padding: 20px 16px 16px 20px !important;
    margin-bottom: 0 !important;
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  /* The anchor was a fixed ~100px box with centered text (sized for the
     old square image logo) — that's what made the text still look
     centered/boxed even after .logo itself was told to left-align. Let it
     shrink to the text's own width instead. */
  html[data-dimension='mobile'] .nav-container.mobile-side-ready .nav-content > .logo a,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .nav-content > .logo a {
    width: auto !important;
    text-align: left !important;
  }

  html[data-dimension='mobile'] .nav-container.mobile-side-ready .user-container,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .user-container {
    padding: 14px 20px 10px !important;
    background: #ffffff !important;
    border-bottom: none !important;
  }

  html[data-dimension='mobile'] .nav-container.mobile-side-ready .language-switch-container,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .language-switch-container {
    padding: 0 20px 14px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    justify-content: flex-start !important;
  }

  .language-switch-container .language-button {
    padding: 5px 14px !important;
    border-radius: 999px !important;
    background: #f3f4f6 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
  }

  /* Hamburger → X. The button's icon is injected as an inline <svg> at
     load time (cs-icon library draws the 3 bars as one <path>, so its
     shape can't be animated via CSS) — instead, fade that svg out and
     draw a CSS X on the button itself, toggled by html[data-mobile],
     which nav.js already sets/removes on open/close (base/nav.js
     _showMobileMenu / _hideMobileMenu). No JS changes needed. */
  #mobileMenuButton {
    position: relative !important;
  }

  #mobileMenuButton svg.cs-icon-menu {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }

  #mobileMenuButton::before,
  #mobileMenuButton::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 18px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 2px !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    pointer-events: none !important;
  }

  html[data-mobile='true'] #mobileMenuButton svg.cs-icon-menu {
    opacity: 0 !important;
    transform: scale(0.5) !important;
  }

  html[data-mobile='true'] #mobileMenuButton::before {
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  html[data-mobile='true'] #mobileMenuButton::after {
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}

/* ============================================
   MOBILE MENU — ROUND 3 DESIGN REFRESH
   Matches the reference layout supplied by the user: icon badges behind
   each menu icon, an initials avatar + role subtitle on the user row, a
   proper "Language" row (globe icon, label, value, chevron), a softly
   floating rounded panel, and slightly tighter type. Light theme only —
   the reference's dark background is intentionally NOT used here.
   Desktop is untouched: every new element below (.profile-initials,
   .role-subtitle, .user-row-chevron, .language-button-icon/-text/
   -chevron) is hidden by default and only switched on inside the
   max-width:1199px block; the desktop nav keeps the plain avatar image
   and the short "EN" language button exactly as before.
   ============================================ */

.user-container .user .profile-initials,
.user-container .user .role-subtitle,
.user-container .user .user-row-chevron,
.language-button-icon,
.language-button-label,
.language-button-value,
.language-button-chevron,
.logo-text-mobile {
  display: none;
}

@media (max-width: 1199px) {

  /* ---- Floating panel look for the whole drawer ---- */
  html[data-dimension='mobile'] .nav-container.mobile-side-ready,
  html[data-dimension='mobile'] .nav-container.mobile-side-in {
    border-radius: 0 22px 22px 0 !important;
    overflow: hidden !important;
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.18) !important;
  }

  html[data-dimension='mobile'] .nav-container.mobile-side-ready .user-container,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .user-container {
    padding: 10px 12px 6px !important;
  }

  /* Space the logo text and the menu/close button apart, matching the
     higher-specificity open-state rule above (kept here too so the logo
     doesn't flash centered before that state class is added). Both
     .logo's children (the logo link and #mobileMenuButton, moved here in
     the markup) share .logo's own align-items:center, so they're always
     exactly vertically centered on each other — no pixel-guessing. */
  html[data-dimension='mobile'] .nav-container .logo {
    width: 100% !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
    padding-right: 16px !important;
  }

  html[data-dimension='mobile'] .nav-container .logo .img {
    display: none !important;
  }

  html[data-dimension='mobile'] .nav-container .logo .logo-text-mobile {
    display: inline-block !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #1f6b45 !important;
    letter-spacing: 0.2px !important;
    line-height: 1 !important;
  }

  /* Close/menu button: lives inside .logo now (moved there in the markup)
     instead of a separately-positioned .mobile-buttons-container, so it
     shares .logo's flexbox and is always exactly vertically centered with
     the logo text — in both the closed top bar and the open drawer,
     with no pixel offset to keep in sync between states. Fixed, small
     size overrides the vendor's height:100% (which stretched it to the
     full ~64px top-bar height and threw off its centered icon). */
  html[data-dimension='mobile'] .nav-container .logo #mobileMenuButton {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* Previously #mobileMenuButton's visibility on desktop came for free from
   .mobile-buttons-container being hidden there by default — now that the
   button lives inside .logo (always visible), it needs its own explicit
   desktop-hidden rule so it doesn't show up next to the desktop logo. */
#mobileMenuButton {
  display: none !important;
}
html[data-dimension='mobile'] .nav-container .logo #mobileMenuButton {
  display: flex !important;
}

@media (max-width: 1199px) {

  /* .mobile-buttons-container now only holds the (hidden) scroll-spy
     button — no longer needs special positioning. */
  html[data-dimension='mobile'] .nav-container .mobile-buttons-container {
    z-index: 20 !important;
  }

  html[data-dimension='mobile'] .nav-container.mobile-side-ready .language-switch-container,
  html[data-dimension='mobile'] .nav-container.mobile-side-in .language-switch-container {
    padding: 0 12px 14px !important;
  }

  /* ---- User row: initials avatar, name + role subtitle, chevron ---- */
  .user-container .user {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  .user-container .user .profile {
    display: none !important;
  }

  .user-container .user .profile-initials {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
  }

  .user-container .user .user-text-block {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left !important;
  }

  .user-container .user .name {
    margin-left: 0 !important;
    font-size: 13.5px !important;
    max-width: none !important;
  }

  .user-container .user .role-subtitle {
    display: block !important;
    font-size: 12px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    margin-top: 1px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-container .user .user-row-chevron {
    display: block !important;
    flex-shrink: 0;
    color: #b0b7c3 !important;
    width: 13px !important;
    height: 13px !important;
  }

  /* ---- Language row: single line - icon, "Language" label, value, chevron
     (matches the reference: one row, not a stacked label/value) ---- */
  .language-switch-container .language-button {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: #f6f7f9 !important;
    font-weight: 400 !important;
    text-align: left !important;
  }

  .language-switch-container .language-button::after {
    display: none !important;
  }

  .language-button-icon {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    color: #6b7280 !important;
    flex-shrink: 0;
  }

  .language-button-short {
    display: none !important;
  }

  .language-button-label {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #4b5563 !important;
  }

  .language-button-value {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    flex-shrink: 0;
  }

  .language-button-chevron {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    color: #b0b7c3 !important;
    flex-shrink: 0;
  }

  /* ---- Menu list: icon badges, tighter type, muted expand chevron ---- */
  #menu > li > a {
    padding: 11px 14px !important;
    font-size: 13.5px !important;
  }

  #menu > li > a .icon {
    width: 18px !important;
    height: 18px !important;
    padding: 8px !important;
    box-sizing: content-box !important;
    background: rgba(102, 126, 234, 0.1) !important;
    border-radius: 10px !important;
  }

  #menu > li > a .label {
    font-size: 13.5px !important;
  }

  #menu > li > a[data-href]:after {
    border-color: #b0b7c3 !important;
    width: 6px !important;
    height: 6px !important;
    border-width: 1.75px !important;
  }

  #menu > li > ul > li > a {
    font-size: 12.5px !important;
  }
}