/* ==========================================================================
   Modern Dashboard Design System & Overrides
   High-end aesthetics (Cairo & Plus Jakarta Sans typography, sleek DataTables,
   flat 2D pastel icon containers, 16px unified geometry, ambient elevation).
   ========================================================================== */

:root {
  /* Typography Stack */
  --pro-font-sans: 'Plus Jakarta Sans', 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pro-font-arabic: 'Cairo', 'Plus Jakarta Sans', sans-serif;
  
  /* Color Palette */
  --pro-primary: #55bbfe;
  --pro-primary-hover: #3ba6fc;
  --pro-primary-light: #e8f6ff;
  --pro-primary-gradient: linear-gradient(135deg, #70c7ff 0%, #55bbfe 100%);
  
  --pro-secondary: #64748b;
  --pro-secondary-hover: #475569;
  --pro-muted: #8a92a6;
  
  --pro-success: #10b981;
  --pro-success-gradient: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --pro-success-light: #d1fae5;
  
  --pro-danger: #ef4444;
  --pro-danger-gradient: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  --pro-danger-light: #fee2e2;
  
  --pro-warning: #f59e0b;
  --pro-warning-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --pro-warning-light: #fef3c7;
  
  --pro-info: #06b6d4;
  --pro-info-gradient: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  --pro-info-light: #cffaff;
  
  --pro-dark: #0f172a;
  --pro-light: #f8fafc;
  --pro-border: rgba(226, 232, 240, 0.8);
  
  /* Unified Radii (16px standard) */
  --pro-radius-sm: 8px;
  --pro-radius-md: 12px;
  --pro-radius-lg: 16px;
  --pro-radius-pill: 50px;
  
  /* Ambient Soft Shadows & Elevation */
  --pro-shadow-ambient: 0 10px 30px rgba(18, 38, 63, 0.03);
  --pro-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
  --pro-shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  --pro-shadow-lg: 0 20px 35px -10px rgba(0, 0, 0, 0.07);
  --pro-shadow-glow-primary: 0 4px 12px 0 rgba(85, 187, 254, 0.35);
  --pro-shadow-glow-success: 0 4px 12px 0 rgba(16, 185, 129, 0.25);
  --pro-shadow-glow-danger: 0 4px 12px 0 rgba(239, 68, 68, 0.25);
}

/* --------------------------------------------------------------------------
   0. GLOBAL TYPOGRAPHY & RTL SUPPORT
   -------------------------------------------------------------------------- */
body, button, input, select, textarea {
  font-family: var(--pro-font-sans) !important;
  color: #334155;
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"] body, 
[dir="rtl"] button, 
[dir="rtl"] input, 
[dir="rtl"] select, 
[dir="rtl"] textarea {
  font-family: var(--pro-font-arabic) !important;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pro-font-sans) !important;
  font-weight: 700 !important;
  color: #0f172a;
  letter-spacing: -0.01em;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: var(--pro-font-arabic) !important;
}

.text-muted, .sub-title, label, .small {
  color: var(--pro-muted) !important;
  font-weight: 500;
}
/* --------------------------------------------------------------------------
   Logical Margin & Flex Gap Utilities (Bootstrap 5 Polyfills for LTR & RTL)
   -------------------------------------------------------------------------- */
.me-0 { margin-inline-end: 0 !important; }
.me-1 { margin-inline-end: 0.25rem !important; }
.me-2 { margin-inline-end: 0.5rem !important; }
.me-3 { margin-inline-end: 1rem !important; }
.me-4 { margin-inline-end: 1.5rem !important; }
.me-5 { margin-inline-end: 3rem !important; }
.me-auto { margin-inline-end: auto !important; }

.ms-0 { margin-inline-start: 0 !important; }
.ms-1 { margin-inline-start: 0.25rem !important; }
.ms-2 { margin-inline-start: 0.5rem !important; }
.ms-3 { margin-inline-start: 1rem !important; }
.ms-4 { margin-inline-start: 1.5rem !important; }
.ms-5 { margin-inline-start: 3rem !important; }
.ms-auto { margin-inline-start: auto !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.g-0 { margin-right: 0; margin-left: 0; }
.g-0 > * { padding-right: 0; padding-left: 0; }
.g-1 { margin-right: -0.25rem; margin-left: -0.25rem; }
.g-1 > * { padding-right: 0.25rem; padding-left: 0.25rem; }
.g-2 { margin-right: -0.5rem; margin-left: -0.5rem; }
.g-2 > * { padding-right: 0.5rem; padding-left: 0.5rem; }
.g-3 { margin-right: -0.75rem; margin-left: -0.75rem; }
.g-3 > * { padding-right: 0.75rem; padding-left: 0.75rem; }
.g-4 { margin-right: -1.25rem; margin-left: -1.25rem; }
.g-4 > * { padding-right: 1.25rem; padding-left: 1.25rem; }
.g-5 { margin-right: -1.5rem; margin-left: -1.5rem; }
.g-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; }

[dir="rtl"] .ml-auto {
  margin-left: unset !important;
  margin-right: auto !important;
}

[dir="rtl"] .dropdown-menu {
  text-align: right;
}

[dir="rtl"] .mr-1 {
  margin-left: .25rem;
}

[dir="rtl"] .btn:not(:last-child){
  margin-left: .5rem;
}

[dir="rtl"] .dropdown-menu .dropdown-item>i, .dropdown-menu .dropdown-item>svg {
  margin-right: 0;
  margin-left: 1rem;
}

[dir="rtl"] .modal-header .close {
  margin: -1rem auto -1.25rem -1rem;
}

select.form-control {
  padding-top: 0;
  padding-bottom: 0;
}

[dir="rtl"] table.dataTable > thead .sorting::after, 
[dir="rtl"] table.dataTable > thead .sorting_asc::after, 
[dir="rtl"] table.dataTable > thead .sorting_desc::after, 
[dir="rtl"] table.dataTable > thead .sorting_asc_disabled::after, 
[dir="rtl"] table.dataTable > thead .sorting_desc_disabled::after {
  right: auto;
  left: 0.5em;
}

[dir="rtl"] table.dataTable > thead .sorting::before, 
[dir="rtl"] table.dataTable > thead .sorting_asc::before, 
[dir="rtl"] table.dataTable > thead .sorting_desc::before, 
[dir="rtl"] table.dataTable > thead .sorting_asc_disabled::before, 
[dir="rtl"] table.dataTable > thead .sorting_desc_disabled::before {
  right: auto;
  left: 1em;
}


/* --------------------------------------------------------------------------
   1. CARDS (.card) & UNIFIED GEOMETRY
   -------------------------------------------------------------------------- */
.card {
  background-color: #ffffff !important;
  border-radius: var(--pro-radius-lg) !important;
  border: 1px solid var(--pro-border) !important;
  box-shadow: var(--pro-shadow-ambient) !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-bottom: 1.5rem;
}

.card:hover,
.card-interactive:hover {
  box-shadow: var(--pro-shadow-md) !important;
}

.card-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 1.25rem 1.5rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  border-top-left-radius: var(--pro-radius-lg) !important;
  border-top-right-radius: var(--pro-radius-lg) !important;
}

.card-header-gradient {
  background: var(--pro-primary-gradient) !important;
  color: #ffffff !important;
  border-bottom: none !important;
}

.card-body {
  padding: 1.5rem !important;
  color: #334155;
}

.card-footer {
  background-color: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  padding: 1rem 1.5rem !important;
  border-bottom-left-radius: var(--pro-radius-lg) !important;
  border-bottom-right-radius: var(--pro-radius-lg) !important;
}

/* Stat Cards & Flat 2D Pastel Containers */
.card-stat,
.card-box {
  position: relative;
  border-radius: var(--pro-radius-lg) !important;
}

.card-box .number,
.card-stat .number,
.stat-value {
  font-weight: 800 !important;
  color: #0f172a !important;
  font-size: 1.75rem !important;
  letter-spacing: -0.02em;
}

.card-box .title,
.card-stat .title,
.stat-title {
  font-weight: 600 !important;
  color: var(--pro-muted) !important;
  font-size: 0.775rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* 2D Flat Pastel Icon Boxes */
.card-box .icon,
.card-stat .icon,
.icon-box,
.stat-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  box-shadow: none !important;
  border: none !important;
  transition: transform 0.2s ease;
}

.icon-primary,
.bg-primary-soft,
.card-box .icon.bg-primary {
  background: var(--pro-primary-light) !important;
  color: #0284c7 !important;
}

.icon-success,
.bg-success-soft,
.card-box .icon.bg-success {
  background: var(--pro-success-light) !important;
  color: #047857 !important;
}

.icon-danger,
.bg-danger-soft,
.card-box .icon.bg-danger {
  background: var(--pro-danger-light) !important;
  color: #b91c1c !important;
}

.icon-warning,
.bg-warning-soft,
.card-box .icon.bg-warning {
  background: var(--pro-warning-light) !important;
  color: #b45309 !important;
}


/* --------------------------------------------------------------------------
   2. BUTTONS (.btn)
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 1.15rem !important;
  letter-spacing: 0.01em !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

.btn:focus,
.btn.focus {
  box-shadow: 0 0 0 4px rgba(85, 187, 254, 0.25) !important;
  outline: none !important;
}

/* Primary Button */
.btn-primary {
  background: var(--pro-primary-gradient) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: var(--pro-shadow-glow-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #3ba6fc 0%, #2299fa 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px 0 rgba(85, 187, 254, 0.4) !important;
}

.btn-primary:active,
.btn-primary.active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px 0 rgba(85, 187, 254, 0.3) !important;
}

/* Secondary Button */
.btn-secondary {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.btn-secondary:hover {
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
  transform: translateY(-1px);
}

/* Success Button */
.btn-success {
  background: var(--pro-success-gradient) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: var(--pro-shadow-glow-success) !important;
}

/* Danger Button */
.btn-danger {
  background: var(--pro-danger-gradient) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: var(--pro-shadow-glow-danger) !important;
}

/* Pill Buttons */
.btn-pill,
.btn-rounded,
.rounded-pill {
  border-radius: var(--pro-radius-pill) !important;
}


/* --------------------------------------------------------------------------
   3. TABLES (.table), DATA TABLES & CONTROL OVERRIDES
   -------------------------------------------------------------------------- */
/* Complete override for .table-bordered: Remove vertical grid lines */
.table-bordered,
.table-bordered th,
.table-bordered td,
.table-bordered thead th,
.table-bordered tbody td {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* Complete override for .table-striped: Clean white rows */
.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(even),
.table tbody tr {
  background-color: #ffffff !important;
}

.table-hover tbody tr:hover,
.table tbody tr:hover {
  background-color: #f8fafc !important;
}

/* Base Table Styling */
.table {
  width: 100% !important;
  margin-bottom: 0 !important;
  color: #334155 !important;
  vertical-align: middle !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Table Header (th) */
.table thead th,
.table th {
  background-color: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  white-space: nowrap !important;
}

/* Table Body Cells (td) */
.table tbody td,
.table td {
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  font-size: 0.875rem !important;
  color: #334155 !important;
  vertical-align: middle !important;
  transition: background-color 0.15s ease !important;
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* DataTables Wrapper Container */
div.dataTables_wrapper {
  padding: 0 !important;
  width: 100% !important;
  background-color: #ffffff !important;
  border-radius: var(--pro-radius-lg) !important;
  box-shadow: var(--pro-shadow-ambient) !important;
  border: 1px solid var(--pro-border) !important;
  overflow: hidden !important;
}

/* Inside cards: No double shadow or outer border */
.card div.dataTables_wrapper,
.card .table-responsive {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}

/* DataTables Top Toolbar (Filter & Length) */
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_length {
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
}

div.dataTables_wrapper div.dataTables_filter {
  float: right !important;
}

[dir="rtl"] div.dataTables_wrapper div.dataTables_filter {
  float: left !important;
}

div.dataTables_wrapper div.dataTables_length {
  float: left !important;
}

[dir="rtl"] div.dataTables_wrapper div.dataTables_length {
  float: right !important;
}

/* DataTables Search Input with Magnifying Glass SVG Icon */
div.dataTables_wrapper div.dataTables_filter label {
  font-weight: 600 !important;
  color: #64748b !important;
  font-size: 0.85rem !important;
  margin-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

div.dataTables_wrapper div.dataTables_filter input {
  border-radius: 50px !important;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 14px center !important;
  padding-left: 38px !important;
  padding-right: 14px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 0.875rem !important;
  color: #1e293b !important;
  outline: none !important;
  height: 38px !important;
  width: 220px !important;
  transition: all 0.2s ease !important;
}

[dir="rtl"] div.dataTables_wrapper div.dataTables_filter input {
  background-position: right 14px center !important;
  padding-right: 38px !important;
  padding-left: 14px !important;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
  background-color: #ffffff !important;
  border-color: var(--pro-primary) !important;
  box-shadow: 0 0 0 4px rgba(85, 187, 254, 0.18) !important;
}

/* DataTables Select Dropdown */
div.dataTables_wrapper div.dataTables_length select {
  border-radius: 10px !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0.35rem 0.75rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  outline: none !important;
  height: 36px !important;
}

/* DataTables Bottom Toolbar (Info & Paginate) */
div.dataTables_wrapper div.dataTables_info {
  padding: 1.25rem 1.5rem !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
  float: left !important;
}

[dir="rtl"] div.dataTables_wrapper div.dataTables_info {
  float: right !important;
}

/* Table Action Buttons with Soft Pastel Backgrounds */
.table td .btn,
.table .btn-sm,
.table-action,
.table td a.btn,
.table td button.btn {
  padding: 4px 12px !important;
  width: auto !important;
  height: auto !important;
  min-height: 34px !important;
  min-width: 34px !important;
  font-size: 0.85rem !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 2px !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

/* Icon-Only Buttons (Square 34px x 34px) */
.table td .btn-icon-only,
.table td .btn-icon,
.table-action,
.table td .btn-square,
.table td .btn-circle {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
}

/* Edit / Primary Action Button */
.table td .btn-primary,
.table td a.btn-primary,
.table td a.btn-edit,
.table td a[href*="edit"] {
  background: var(--pro-primary-light) !important;
  color: #0284c7 !important;
}

.table td .btn-primary:hover,
.table td a.btn-primary:hover,
.table td a.btn-edit:hover {
  background: #dbefea !important;
  color: #0369a1 !important;
  transform: translateY(-1px) !important;
}


.table td .btn-danger:hover,
.table td a.btn-danger:hover,
.table td .btn-delete-trigger:hover,
.table td button[type="submit"]:hover {
  cursor: pointer;
  background: #fecdd3 !important;
  color: #991b1b !important;
}

/* Sleek Toggle Switch (.switch, .slider) */
.switch {
  position: relative;
  display: inline-block;
  width: 44px !important;
  height: 24px !important;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1 !important;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 34px !important;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: white !important;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

input:checked + .slider {
  background-color: var(--pro-primary) !important;
  box-shadow: 0 2px 8px rgba(85, 187, 254, 0.35) !important;
}

input:checked + .slider:before {
  transform: translateX(20px) !important;
}

/* Image Thumbnails in Tables */
.thumbnail,
.imageBox,
.imageBoxService,
.lang_table_flag,
.table td img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
  overflow: hidden;
  object-fit: cover !important;
}


/* --------------------------------------------------------------------------
   4. MODALS (.modal)
   -------------------------------------------------------------------------- */
.modal-backdrop {
  background-color: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal-dialog {
  margin: 2rem auto;
}

.modal-content {
  border-radius: var(--pro-radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  background-color: #ffffff !important;
}

.modal-header {
  padding: 1.25rem 1.5rem 1rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background-color: #ffffff !important;
  border-top-left-radius: var(--pro-radius-lg) !important;
  border-top-right-radius: var(--pro-radius-lg) !important;
}

.modal-title {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 1.1rem !important;
}

.modal-body {
  padding: 1.5rem !important;
  color: #334155;
}

.modal-footer {
  padding: 1rem 1.5rem 1.25rem !important;
  border-top: 1px solid #f1f5f9 !important;
  background-color: #f8fafc !important;
  border-bottom-left-radius: var(--pro-radius-lg) !important;
  border-bottom-right-radius: var(--pro-radius-lg) !important;
}


/* --------------------------------------------------------------------------
   5. TOASTS (.toast)
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 1090 !important;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[dir="rtl"] .toast-container {
  right: auto !important;
  left: 1.5rem !important;
}

.toast {
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08) !important;
  min-width: 320px;
}

.toast-header {
  background: transparent !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 0.875rem 1.25rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.toast-body {
  padding: 1rem 1.25rem !important;
  color: #475569 !important;
  font-size: 0.875rem !important;
}


/* --------------------------------------------------------------------------
   6. HEADER & SUB-HEADER SIDEBAR LAYOUT
   -------------------------------------------------------------------------- */
.navbar-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 60px !important;
  z-index: 1040 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

@media (min-width: 768px) {
  .navbar-vertical.fixed-left,
  .navbar-vertical.fixed-right,
  .navbar-vertical {
    top: 60px !important;
    height: calc(100vh - 60px) !important;
    z-index: 1030 !important;
    border-top: 1px solid #f1f5f9 !important;
  }

  .main-content {
    margin-top: 60px !important;
    padding-top: 1.5rem !important;
  }

  .navbar-vertical.fixed-left + .main-content {
    margin-left: 250px !important;
    margin-right: 0 !important;
  }

  .navbar-vertical.fixed-right + .main-content {
    margin-right: 250px !important;
    margin-left: 0 !important;
  }

  [dir="rtl"] .navbar-vertical.fixed-right + .main-content {
    margin-right: 250px !important;
    margin-left: 0 !important;
  }

  [dir="rtl"] .navbar-vertical.fixed-left + .main-content {
    margin-left: 250px !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767.98px) {
  .main-content {
    margin-top: 60px !important;
    padding-top: 1rem !important;
  }
}

/* --------------------------------------------------------------------------
   7. DASHBOARD OVERVIEW CARD & HERO BANNER REFINEMENT
   -------------------------------------------------------------------------- */
.overview {
  position: relative !important;
  max-height: 200px !important;
  overflow: hidden !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
}

.overview img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
}

[dir="rtl"] .overview img {
  transform: scaleX(-1);
}

.overview div {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 2rem !important;
  bottom: auto !important;
}

[dir="rtl"] .overview div {
  left: auto !important;
  right: 2rem !important;
}

.overview h2 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}