/* ============================================
   eduSYMS Admin Accessibility Improvements
   ============================================
   
   This file provides enhanced accessibility for the admin interface
   following WCAG 2.1 AA standards for contrast ratios and readability.
   
   Target contrast ratios:
   - Normal text: 4.5:1 minimum
   - Large text (18pt+): 3:1 minimum
   - UI components: 3:1 minimum
   
   Created: October 13, 2025
   ============================================ */

/* ============================================
   Page Header & Background Improvements - ULTRA MINIMAL
   ============================================ */

/* Make the primary header minimal and clean */
.header.bg-gradient-primary {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  /* Clean white header for minimal look */
}

/* Header text should be dark on white */
.header h1,
.header h2,
.header .text-white {
  color: #1f2937 !important;
  text-shadow: none !important;
}

/* Ensure header buttons have sufficient contrast */
.header .btn-danger {
  background-color: #dc3545 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.2s ease !important;
}

.header .btn-danger:hover {
  background-color: #c82333 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

.header .btn-warning {
  background-color: #ffc107 !important;
  color: #212529 !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
}

.header .btn-warning:hover {
  background-color: #e0a800 !important;
  transform: translateY(-1px) !important;
}

/* ============================================
   Card & Container Improvements
   ============================================ */

/* White card background with better text contrast - CLEAN & MINIMAL */
.card.bg-secondary {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

.card-header.bg-white {
  background-color: #f7fafc !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

.card-header h3 {
  color: #1a202c !important;
  font-weight: 600 !important;
}

.card-body {
  background-color: #ffffff !important;
  color: #2d3748 !important;
}

/* ============================================
   Navigation Tabs - ULTRA MINIMAL
   ============================================ */

/* Tab buttons - clean and minimal */
.nav-pills .nav-link,
.nav-link {
  background-color: #ffffff !important;
  color: #6b7280 !important;
  border: 1px solid #e5e7eb !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  transition: all 0.15s ease !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
}

.nav-pills .nav-link:hover,
.nav-link:hover {
  background-color: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
  text-decoration: none !important;
}

/* Minimal active state with tiny green accent */
.nav-pills .nav-link.active,
.nav-link.active {
  background-color: #f9fafb !important;
  color: #1f2937 !important;
  border-color: #d1d5db !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  border-left: 3px solid #10b981 !important;
}

.nav-pills .nav-link i {
  opacity: 1 !important;
}

/* Ensure sufficient spacing between tabs */
.nav-wrapper {
  margin-bottom: 1.5rem !important;
}

/* ============================================
   Form Elements Accessibility
   ============================================ */

/* Form labels with better contrast */
label,
.form-control-label {
  color: #495057 !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.95rem !important;
}

/* Input fields with clear borders and focus states */
.form-control,
input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  border-radius: 0.375rem !important;
  min-height: 2.75rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  position: relative !important;
  z-index: 1 !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  background-color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  outline: 0 !important;
  color: #1f2937 !important;
}

/* Placeholder text with adequate contrast */
::placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}

:-ms-input-placeholder {
  color: #6c757d !important;
}

::-ms-input-placeholder {
  color: #6c757d !important;
}

/* Disabled form elements */
.form-control:disabled,
.form-control[readonly],
input:disabled,
input[readonly],
select:disabled,
textarea:disabled {
  background-color: #f9fafb !important;
  color: #6b7280 !important;
  border-color: #e5e7eb !important;
  cursor: not-allowed !important;
  opacity: 0.75 !important;
}

/* Force white background on active inputs */
.form-control:not(:disabled):not([readonly]),
input:not(:disabled):not([readonly]),
select:not(:disabled),
textarea:not(:disabled) {
  background-color: #ffffff !important;
}

/* ============================================
   Button Improvements - ULTRA MINIMAL
   ============================================ */

/* Primary save button - minimal with green accent */
.btn-primary,
button[type="submit"] {
  background-color: #1f2937 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-left: 3px solid #10b981 !important;
  padding: 0.625rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  border-radius: 0.375rem !important;
}

.btn-primary:hover,
button[type="submit"]:hover {
  background-color: #111827 !important;
  border-left-width: 4px !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  transform: none !important;
}

.btn-primary:active,
button[type="submit"]:active {
  background-color: #1a202c !important;
  transform: translateY(0) !important;
}

.btn-primary:focus,
button[type="submit"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.3) !important;
}

/* Secondary buttons - light gray */
.btn-secondary {
  background-color: #e2e8f0 !important;
  background-image: none !important;
  color: #2d3748 !important;
  border: 1px solid #cbd5e0 !important;
  font-weight: 600 !important;
}

.btn-secondary:hover {
  background-color: #cbd5e0 !important;
  color: #1a202c !important;
}

/* Info buttons - medium gray */
.btn-info {
  background-color: #4a5568 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.btn-info:hover {
  background-color: #2d3748 !important;
}

/* Outline buttons - gray with green on hover */
.btn-outline-primary {
  border: 2px solid #2d3748 !important;
  color: #2d3748 !important;
  background-color: transparent !important;
  font-weight: 600 !important;
}

.btn-outline-primary:hover {
  background-color: #2d3748 !important;
  color: #ffffff !important;
  border-color: #2d3748 !important;
  border-left-width: 4px !important;
  border-left-color: #28a745 !important;
}

/* Small buttons */
.btn-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
}

/* Ensure all buttons have minimum touch target size (44x44px) */
.btn {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ============================================
   Alert Messages - ULTRA MINIMAL
   ============================================ */

.alert {
  border: 1px solid !important;
  border-left: 3px solid !important;
  border-radius: 0.5rem !important;
  padding: 1rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.alert-success {
  background-color: #f0fdf4 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
  border-left-color: #10b981 !important;
}

.alert-danger {
  background-color: #fef2f2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
  border-left-color: #dc3545 !important;
}

.alert-warning {
  background-color: #fffbeb !important;
  color: #92400e !important;
  border-color: #fde68a !important;
  border-left-color: #f59e0b !important;
}

.alert-info {
  background-color: #eff6ff !important;
  color: #1e40af !important;
  border-color: #bfdbfe !important;
  border-left-color: #3b82f6 !important;
}

/* Checkmark icon for success alerts */
.alert-success::before {
  content: "✓ " !important;
  font-weight: 700 !important;
  color: #10b981 !important;
}

/* ============================================
   Focus Indicators (Keyboard Navigation)
   ============================================ */

/* Clear focus indicators for all interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus,
.nav-link:focus {
  outline: 3px solid #28a745 !important;
  outline-offset: 2px !important;
}

/* Remove default browser outline in favor of custom */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 3px solid #28a745 !important;
  outline-offset: 2px !important;
}

/* ============================================
   Sidebar Navigation - DARK GRAY WITH GREEN ACCENT
   ============================================ */

.sidenav {
  background-color: #1a202c !important;
}

.sidenav .nav-link {
  color: #cbd5e0 !important;
  font-weight: 500 !important;
  padding: 0.75rem 1rem !important;
  border-left: 4px solid transparent !important;
  transition: all 0.2s ease !important;
}

.sidenav .nav-link:hover {
  background-color: #2d3748 !important;
  color: #ffffff !important;
  border-left-color: #28a745 !important; /* Green accent on hover */
}

.sidenav .nav-link.active {
  background-color: #2d3748 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-left-color: #28a745 !important; /* Green accent for active */
}

.sidenav .nav-link i {
  color: #a0aec0 !important;
  margin-right: 0.5rem !important;
}

.sidenav .nav-link:hover i,
.sidenav .nav-link.active i {
  color: #ffffff !important;
}

/* ============================================
   Table Improvements - CLEAN GRAY SCHEME
   ============================================ */

.table {
  color: #2d3748 !important;
  background-color: #ffffff !important;
}

.table thead th {
  background-color: #f7fafc !important;
  color: #1a202c !important;
  font-weight: 600 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.5px !important;
}

.table tbody tr {
  border-bottom: 1px solid #f7fafc !important;
}

.table tbody tr:hover {
  background-color: #f7fafc !important;
  border-left: 4px solid #28a745 !important; /* Green accent on hover */
}

.table td,
.table th {
  padding: 1rem !important;
  vertical-align: middle !important;
  color: #4a5568 !important;
}

/* ============================================
   Badge & Label Improvements
   ============================================ */

.badge {
  font-weight: 600 !important;
  padding: 0.35rem 0.65rem !important;
  font-size: 0.85rem !important;
}

.badge-success {
  background-color: #28a745 !important;
  color: #ffffff !important;
}

.badge-danger {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}

.badge-warning {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

.badge-info {
  background-color: #17a2b8 !important;
  color: #ffffff !important;
}

/* ============================================
   Dropdown Menus
   ============================================ */

.dropdown-menu {
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.dropdown-item {
  color: #212529 !important;
  padding: 0.625rem 1rem !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #f8f9fa !important;
  color: #28a745 !important;
}

.dropdown-item.active {
  background-color: #28a745 !important;
  color: #ffffff !important;
}

/* ============================================
   Modal Improvements
   ============================================ */

.modal-content {
  border: none !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
}

.modal-header {
  background-color: #f8f9fa !important;
  border-bottom: 2px solid #dee2e6 !important;
}

.modal-title {
  color: #212529 !important;
  font-weight: 600 !important;
}

.modal-body {
  color: #495057 !important;
}

.modal-footer {
  border-top: 1px solid #dee2e6 !important;
  background-color: #f8f9fa !important;
}

/* ============================================
   Version Info & Footer Elements
   ============================================ */

.version-info,
.text-muted {
  color: #6c757d !important;
  font-size: 0.875rem !important;
}

/* ============================================
   Icon Improvements
   ============================================ */

/* Ensure icons have proper contrast */
i,
.ni,
.fa,
.fas,
.far,
.fab {
  color: inherit !important;
}

/* ============================================
   Loading States
   ============================================ */

.spinner-border {
  border-color: #28a745 !important;
  border-right-color: transparent !important;
}

/* ============================================
   Responsive Improvements
   ============================================ */

@media (max-width: 768px) {
  .nav-pills .nav-link {
    padding: 0.625rem 0.875rem !important;
    font-size: 0.9rem !important;
  }
  
  .btn {
    padding: 0.625rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  label,
  .form-control-label {
    font-size: 0.9rem !important;
  }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  .header,
  .sidenav,
  .btn,
  .nav-pills {
    display: none !important;
  }
  
  .card {
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
  .nav-pills .nav-link {
    border-width: 3px !important;
  }
  
  .form-control:focus {
    border-width: 3px !important;
  }
  
  *:focus-visible {
    outline-width: 4px !important;
  }
}

/* ============================================
   Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   Color Blind Friendly Adjustments
   ============================================ */

/* Ensure status indicators use more than just color */
.badge-success::before,
.text-success::before,
.alert-success::before {
  content: "✓ ";
}

.badge-danger::before,
.text-danger::before,
.alert-danger::before {
  content: "✗ ";
}

.badge-warning::before,
.text-warning::before,
.alert-warning::before {
  content: "⚠ ";
}

/* ============================================
   Dashboard & Data Table Improvements
   ============================================ */

/* Dashboard welcome header */
.header h1,
.header h2,
.header .display-1,
.header .display-2,
.header .display-3,
.header .display-4 {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  font-weight: 600 !important;
}

/* Dashboard stats cards */
.card-stats {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.card-stats .card-body {
  padding: 1.5rem !important;
}

.card-stats h2,
.card-stats h3,
.card-stats h4,
.card-stats .h2,
.card-stats .h3,
.card-stats .h4 {
  color: #212529 !important;
  font-weight: 700 !important;
}

.card-stats p,
.card-stats small,
.card-stats .text-sm {
  color: #6c757d !important;
  font-weight: 500 !important;
}

/* Stats card icons - MINIMAL */
.card-stats .icon {
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  color: #10b981 !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.5rem !important;
}

/* Latest businesses / data tables section */
.card-header {
  background-color: #f8f9fa !important;
  border-bottom: 2px solid #dee2e6 !important;
  padding: 1rem 1.5rem !important;
}

.card-header h3,
.card-header h4,
.card-header h5 {
  color: #212529 !important;
  font-weight: 600 !important;
  margin-bottom: 0 !important;
}

/* Table headers - ULTRA MINIMAL */
.table thead th,
table thead th,
thead th {
  background-color: #fafbfc !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 0.75rem 1rem !important;
  text-transform: uppercase !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.05em !important;
  position: relative !important;
}

/* No green accent lines - pure minimalism */

/* Table body cells - clean and minimal */
.table tbody td,
table tbody td,
tbody td {
  color: #1f2937 !important;
  font-weight: 400 !important;
  padding: 1rem !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #f3f4f6 !important;
  background-color: #ffffff !important;
}

/* Table row hover - subtle with tiny green accent */
.table tbody tr:hover,
table tbody tr:hover,
tbody tr:hover {
  background-color: #f9fafb !important;
  cursor: pointer !important;
  box-shadow: inset 3px 0 0 0 #10b981 !important;
}

/* Active status badges - ULTRA MINIMAL with dot */
.badge.badge-success,
.badge-success {
  background-color: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
  font-weight: 500 !important;
  padding: 0.25rem 0.625rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
}

/* Add green dot indicator */
.badge.badge-success::before,
.badge-success::before {
  content: '●' !important;
  color: #10b981 !important;
  font-size: 0.5rem !important;
}

/* Action buttons in tables - MINIMALIST */
.table .btn,
table .btn {
  min-height: 36px !important;
  padding: 0.375rem 0.875rem !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  border-radius: 0.375rem !important;
  transition: all 0.15s ease !important;
}

.table .btn-success,
table .btn-success {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
  border-left: 3px solid #10b981 !important;
}

.table .btn-success:hover {
  background-color: #f9fafb !important;
  border-left-width: 4px !important;
}

.table .btn-info,
table .btn-info {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #1f2937 !important;
}

.table .btn-info:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
}

/* ============================================
   Filter Section Improvements - ULTRA MINIMALIST
   ============================================ */

/* Filter container - clean white */
.filter-section,
.filters,
.card-body.filter-container {
  background-color: #ffffff !important;
  padding: 2rem !important;
  border-radius: 0.5rem !important;
  margin-bottom: 1.5rem !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Filter labels - dark and clear */
.filter-section label,
.filters label {
  color: #1f2937 !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  display: block !important;
  font-size: 0.875rem !important;
  letter-spacing: -0.01em !important;
}

/* Filter inputs and selects - minimal style */
.filter-section input[type="text"],
.filter-section input[type="date"],
.filter-section select,
.filters input[type="text"],
.filters input[type="date"],
.filters select {
  background-color: #fafbfc !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  padding: 0.625rem 0.875rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  transition: all 0.15s ease !important;
}

.filter-section input:focus,
.filter-section select:focus,
.filters input:focus,
.filters select:focus {
  background-color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08) !important;
  outline: 0 !important;
}

/* Filter button - minimalist with green accent */
.btn-filter,
button[type="submit"].filter-button,
.filter-section .btn-primary {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  border-left: 3px solid #10b981 !important;
  padding: 0.625rem 1.5rem !important;
  font-weight: 600 !important;
  border-radius: 0.375rem !important;
  min-height: 44px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.btn-filter:hover,
.filter-section .btn-primary:hover {
  background-color: #f9fafb !important;
  border-left-width: 4px !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
  transform: none !important;
}

/* ============================================
   Stats Cards & Metrics Improvements
   ============================================ */

/* Finance stats cards at top */
.stats-card,
.metric-card {
  background: #ffffff !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 1rem !important;
}

.stats-card h4,
.stats-card h5,
.metric-card h4,
.metric-card h5,
.stats-card .card-title,
.metric-card .card-title {
  color: #6c757d !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 0.5rem !important;
}

.stats-card h2,
.stats-card h3,
.metric-card h2,
.metric-card h3,
.stats-card .display-4,
.metric-card .display-4 {
  color: #212529 !important;
  font-weight: 700 !important;
  font-size: 2rem !important;
  margin: 0 !important;
}

.stats-card small,
.metric-card small {
  color: #28a745 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

/* ============================================
   Business List Page Improvements
   ============================================ */

/* Top action buttons - ULTRA MINIMAL */
.btn-add,
.btn-export,
.btn-import {
  min-height: 40px !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 500 !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  transition: all 0.15s ease !important;
}

/* Add button - primary action with minimal green */
.btn-add {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  border-left: 3px solid #10b981 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Export button - minimal */
.btn-export {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
}

/* Import button - minimal */
.btn-import {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
}

.btn-add:hover {
  background-color: #f9fafb !important;
  border-left-width: 4px !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
}

.btn-export:hover,
.btn-import:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
}

/* Search box */
.search-box,
input[type="search"],
.select2-container {
  background-color: #ffffff !important;
  border: 1px solid #ced4da !important;
  color: #495057 !important;
  padding: 0.625rem 1rem !important;
  border-radius: 0.375rem !important;
  min-height: 44px !important;
}

.search-box:focus,
input[type="search"]:focus {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

/* ============================================
   Logo Placeholders & Images
   ============================================ */

/* Business logo placeholders in tables */
.logo-placeholder,
.business-logo {
  background-color: #28a745 !important;
  border-radius: 0.375rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
}

/* ============================================
   Order/Transaction ID Badges
   ============================================ */

/* Order ID badges - MINIMAL with subtle accent */
.order-id,
.transaction-id,
.badge-pill {
  background-color: #f9fafb !important;
  color: #1f2937 !important;
  border: 1px solid #e5e7eb !important;
  border-left: 2px solid #10b981 !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.375rem !important;
  font-weight: 500 !important;
  font-size: 0.8125rem !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
}

/* ============================================
   Responsive Table Improvements
   ============================================ */

/* Horizontal scroll for tables on mobile */
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 768px) {
  .table thead th,
  table thead th {
    font-size: 0.7rem !important;
    padding: 0.75rem 0.5rem !important;
  }
  
  .table tbody td,
  table tbody td {
    font-size: 0.85rem !important;
    padding: 0.75rem 0.5rem !important;
  }
  
  .table .btn,
  table .btn {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
}

/* ============================================
   Page Header Improvements
   ============================================ */

/* Page title sections */
.page-header,
.header-body {
  padding: 2rem 0 !important;
}

.page-header h1,
.page-header h2,
.header-body h1,
.header-body h2 {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Header action buttons */
.header .btn-sm {
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  min-height: 38px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 0.375rem !important;
}

/* ============================================
   Select2 Dropdown Improvements
   ============================================ */

.select2-container--default .select2-selection--single {
  background-color: #ffffff !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.375rem !important;
  height: 44px !important;
  padding: 0.5rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #495057 !important;
  line-height: 32px !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #28a745 !important;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

.select2-dropdown {
  border: 1px solid #ced4da !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.select2-results__option {
  color: #495057 !important;
  padding: 0.75rem 1rem !important;
}

.select2-results__option--highlighted {
  background-color: #28a745 !important;
  color: #ffffff !important;
}

/* ============================================
   Date Range Picker Improvements
   ============================================ */

.daterangepicker {
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: #ffffff !important;
}

.daterangepicker .ranges li.active {
  background-color: #28a745 !important;
  color: #ffffff !important;
}

/* ============================================
   Pagination Improvements
   ============================================ */

.pagination .page-link {
  color: #28a745 !important;
  background-color: #ffffff !important;
  border: 1px solid #dee2e6 !important;
  padding: 0.5rem 0.75rem !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pagination .page-link:hover {
  background-color: #e9ecef !important;
  border-color: #28a745 !important;
}

.pagination .page-item.active .page-link {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: #ffffff !important;
}

.pagination .page-item.disabled .page-link {
  color: #6c757d !important;
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
}

/* ============================================
   Empty State & No Data Messages
   ============================================ */

.empty-state,
.no-data,
.alert-info {
  background-color: #d1ecf1 !important;
  color: #0c5460 !important;
  border: 1px solid #bee5eb !important;
  border-radius: 0.375rem !important;
  padding: 1.5rem !important;
  text-align: center !important;
}

/* ============================================
   Sidebar Navigation Enhancements
   ============================================ */

/* Ensure sidebar links are accessible */
.sidenav .navbar-nav .nav-link {
  color: #e2e8f0 !important;
  padding: 0.75rem 1rem !important;
  margin: 0.25rem 0.5rem !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s ease !important;
}

.sidenav .navbar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.sidenav .navbar-nav .nav-link.active {
  background-color: #28a745 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.sidenav .navbar-nav .nav-link i {
  color: inherit !important;
  margin-right: 0.75rem !important;
  font-size: 1rem !important;
}

/* Sidebar footer version info */
.sidenav .navbar-footer {
  padding: 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sidenav .navbar-footer small {
  color: #a0aec0 !important;
  font-size: 0.75rem !important;
}

/* ============================================
   Top Navbar User Menu
   ============================================ */

.navbar-top {
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.navbar-top .navbar-brand {
  color: #212529 !important;
  font-weight: 700 !important;
}

.navbar-top .navbar-nav .nav-link {
  color: #495057 !important;
  font-weight: 500 !important;
}

.navbar-top .navbar-nav .nav-link:hover {
  color: #28a745 !important;
}

/* User dropdown */
.navbar-top .dropdown-menu {
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ============================================
   Loading States & Spinners
   ============================================ */

.spinner-border,
.spinner-grow {
  color: #28a745 !important;
}

.loading-overlay {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================
   End of Admin Accessibility Improvements
   ============================================ */

/* ============================================
   Business Edit Page Specific Styles
   ============================================ */

/* Page header section with title and actions */
.container-fluid > .header.pb-8 {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  padding-bottom: 2rem !important;
}

/* Business Management section bar */
.bg-success,
.bg-gradient-success {
  background: #ffffff !important;
  border-bottom: 3px solid #10b981 !important;
  box-shadow: none !important;
}

.bg-success h1,
.bg-gradient-success h1 {
  color: #1f2937 !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

/* Image upload placeholders - subtle and minimal */
.card img[src*="placeholder"],
img.img-thumbnail {
  background-color: #f9fafb !important;
  border: 2px dashed #d1d5db !important;
  padding: 2rem !important;
}

/* Image upload sections */
.card .form-group img,
.business-image-upload img {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Select Image / Remove buttons under images */
.text-primary,
a.text-primary {
  color: #2563eb !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.text-primary:hover {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}

/* PNG/JPEG recommendation text */
.text-muted.small,
small.text-muted {
  color: #6b7280 !important;
  font-size: 0.75rem !important;
}

/* Owner information section and all section headings */
.card-header h3,
.form-group h3,
h3.text-muted,
.text-muted.text-uppercase,
h4.text-uppercase,
.section-heading {
  color: #6b7280 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid #10b981 !important;
  background: transparent !important;
}

/* First section heading - no top margin */
.card-body > h3:first-child,
.card-body > .text-muted:first-child {
  margin-top: 0 !important;
}

/* Form groups with proper spacing */
.form-group {
  margin-bottom: 1.5rem !important;
  clear: both !important;
}

.form-group label,
.form-label,
label {
  color: #374151 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.625rem !important;
  letter-spacing: -0.01em !important;
  display: block !important;
}

/* Phone input styling - FIX OVERLAP ISSUE */
.input-group {
  position: relative !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}

.input-group .form-control,
.input-group input[type="tel"] {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 3.5rem !important; /* Space for flag icon */
  z-index: 1 !important;
}

.input-group-prepend,
.input-group-append {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  padding: 0 0.5rem !important;
  background-color: transparent !important;
  border: none !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.input-group-prepend img,
.input-group-prepend .flag-icon {
  max-width: 24px !important;
  max-height: 16px !important;
  display: block !important;
}

/* Phone input with flag icons */
.input-group {
  position: relative !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
}

.input-group input[type="tel"] {
  border-left: 1px solid #d1d5db !important;
  flex: 1 1 auto !important;
}

.input-group-prepend,
.input-group-append {
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-right: none !important;
  border-radius: 0.375rem 0 0 0.375rem !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 0.75rem !important;
}

.input-group-prepend .flag-icon,
.input-group-prepend img {
  max-width: 24px !important;
  max-height: 16px !important;
}

/* Toggle switches (Is Featured, Pickup, Delivery, etc.) */
.custom-toggle,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}

.custom-control-input:not(:checked) ~ .custom-control-label::before {
  background-color: #e5e7eb !important;
  border-color: #d1d5db !important;
}

/* End of Business Edit Page Styles */

/* ============================================
   Pagination Styles - ULTRA MINIMAL
   ============================================ */

/* Pagination container */
.pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.25rem !important;
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Page item */
.page-item {
  margin: 0 !important;
}

/* Page links - minimal white design */
.page-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.page-link:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #1f2937 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Active page - green accent */
.page-item.active .page-link {
  background-color: #f0fdf4 !important;
  border-color: #10b981 !important;
  border-left-width: 3px !important;
  color: #166534 !important;
  font-weight: 600 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  z-index: 1 !important;
}

/* Disabled state */
.page-item.disabled .page-link {
  color: #9ca3af !important;
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Previous/Next arrows */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
}

/* Per page selector styling */
select.form-control-sm {
  padding: 0.5rem 2rem 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.5rem center !important;
  background-size: 16px 12px !important;
}

select.form-control-sm:hover {
  border-color: #9ca3af !important;
  background-color: #f9fafb !important;
}

select.form-control-sm:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  background-color: #ffffff !important;
}

/* Pagination info text */
.text-muted {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
}

/* Inline form for per-page selector */
.form-inline {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.form-inline label {
  margin: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
}

/* ============================================
   Items Page Specific Styles
   ============================================ */

/* Category container alert */
.alert.category-container {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
  border: 1px solid #4b5563 !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 0.5rem !important;
  padding: 1.25rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
}

.alert.category-container .h1 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Item cards - minimal design */
.card {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  border-color: #10b981 !important;
}

.card-img-top {
  height: 180px !important;
  object-fit: cover !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.card-body {
  padding: 1.25rem !important;
}

.card-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
  color: #1f2937 !important;
}

.card-text.description {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  line-height: 1.5 !important;
  margin-bottom: 1rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Badge styling */
.badge-pill {
  padding: 0.375rem 0.875rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: 1rem !important;
}

.badge-primary {
  background-color: #f0fdf4 !important;
  color: #166534 !important;
  border: 1px solid #bbf7d0 !important;
}

.badge-neutral {
  background-color: #f3f4f6 !important;
  color: #6b7280 !important;
  border: 1px solid #d1d5db !important;
}

/* Status badges */
.text-success {
  color: #10b981 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
}

.text-danger {
  color: #dc2626 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
}

/* Button improvements for items page */
.btn-icon.btn-sm {
  width: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important;
}

/* End of Items Page Styles */