/* =====================================================
   Design System Variables (SPOTC Enhanced Dashboard)
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* SPOTC Brand Colors */
  --primary: #006B7D;
  --primary-teal: #006B7D;
  --primary-teal-dark: #005260;
  --primary-teal-light: #E6F4F6;
  --primary-400: #00A3BF;
  --accent: #0A0B10;
  --secondary: #A6C6FF;
  --destructive: #EF4444;
  
  /* Neutral Colors */
  --neutral-0: #FFFFFF;
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
  
  /* Status */
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.6;
}

/* =====================================================
   Global Styles & Typography
   ===================================================== */
body {
  font-family: var(--font-family) !important;
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--neutral-800);
  background: var(--neutral-50) !important;
}

/* Admin main content: enforce demo-grade typography (no thin/small text) */
[data-css="app-content"],
[role="main"] {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--neutral-800) !important;
  font-family: var(--font-family) !important;
}

/* =====================================================
   Primary Color Application
   ===================================================== */

/* Buttons */
button[type="submit"],
.adminjs_Button--primary,
[class*="Button"][class*="primary"],
a[class*="Button"][class*="primary"] {
  background-color: var(--primary-teal) !important;
  border-color: var(--primary-teal) !important;
}

button[type="submit"]:hover,
.adminjs_Button--primary:hover,
[class*="Button"][class*="primary"]:hover,
a[class*="Button"][class*="primary"]:hover {
  background-color: var(--primary-teal-dark) !important;
  border-color: var(--primary-teal-dark) !important;
}

/* Links */
a,
.adminjs_Link,
[class*="NavLink"] {
  color: var(--primary-teal) !important;
}

a:hover,
.adminjs_Link:hover,
[class*="NavLink"]:hover {
  color: var(--primary-teal-dark) !important;
}

/* Active Navigation Items */
[class*="NavLink"][class*="active"],
[class*="NavLink"][aria-current="page"] {
  background-color: var(--primary-teal-light) !important;
  color: var(--primary-teal) !important;
}

/* Form Focus States */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-teal) !important;
  box-shadow: 0 0 0 3px rgba(0, 107, 125, 0.1) !important;
}

/* Checkboxes and Radio Buttons */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--primary-teal) !important;
  border-color: var(--primary-teal) !important;
}

/* =====================================================
   Sidebar (Demo: fixed, 280px, logo + nav sections)
   ===================================================== */
[data-css="sidebar"],
aside[data-css="sidebar"] {
  width: 280px !important;
  min-width: 280px !important;
  background: var(--neutral-0) !important;
  border-right: 1px solid var(--neutral-200) !important;
  box-shadow: none !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 100 !important;
}

[data-css="sidebar"].hidden {
  transform: translateX(-100%);
}

[data-css="sidebar"] {
  transition: transform 0.25s ease-in-out !important;
}

/* Desktop: always show sidebar (hamburger is hidden, so no way to open it otherwise) */
@media (min-width: 1025px) {
  [data-css="sidebar"],
  [data-css="sidebar"].hidden,
  [dir="rtl"] [data-css="sidebar"],
  [dir="rtl"] [data-css="sidebar"].hidden,
  html[lang="ar"] [data-css="sidebar"],
  html[lang="ar"] [data-css="sidebar"].hidden {
    transform: none !important;
  }
}

[dir="rtl"] [data-css="sidebar"],
html[lang="ar"] [data-css="sidebar"] {
  left: auto !important;
  right: 0 !important;
  border-right: none !important;
  border-left: 1px solid var(--neutral-200) !important;
}

[dir="rtl"] [data-css="sidebar"].hidden,
html[lang="ar"] [data-css="sidebar"].hidden {
  transform: translateX(100%);
}

[data-css="sidebar"] .sidebar-header,
[data-css="sidebar"] [data-css="sidebar-logo"],
[data-css="sidebar"] [class*="Logo"] {
  padding: 24px !important;
  border-bottom: 1px solid var(--neutral-200) !important;
  flex-shrink: 0 !important;
}

[data-css="sidebar"] .logo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
}

[data-css="sidebar"] .logo-icon {
  width: 40px !important;
  height: 40px !important;
  background: var(--primary-teal) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--neutral-0) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

[data-css="sidebar"] .logo-text {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
}

[data-css="sidebar"] .logo:hover .logo-text {
  color: var(--primary-teal) !important;
}

[data-css="sidebar"] .sidebar-nav,
[data-css="sidebar"] [data-css="sidebar-resources"],
[data-css="sidebar"] [class*="Resources"] {
  padding: 16px !important;
  flex: 1 !important;
  overflow-y: auto !important;
}

[data-css="sidebar"] .nav-section {
  margin-bottom: 32px !important;
}

[data-css="sidebar"] .nav-section:last-child {
  margin-bottom: 0 !important;
}

[data-css="sidebar"] .nav-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

[data-css="sidebar"] .nav-section ul ul {
  padding-left: 12px !important;
}

[dir="rtl"] [data-css="sidebar"] .nav-section ul ul,
html[lang="ar"] [data-css="sidebar"] .nav-section ul ul {
  padding-left: 0 !important;
  padding-right: 12px !important;
}

[data-css="sidebar"] .nav-section li {
  margin-bottom: 0 !important;
}

/* Nav section titles (demo: .nav-section-title) */
[data-css="sidebar"] .nav-section-title,
[data-css="sidebar"] [class*="Section"] > div:first-child,
[data-css="sidebar"] .nav-section [class*="Label"],
[data-css="sidebar"] [class*="section"] [class*="Label"] {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: var(--neutral-500) !important;
  letter-spacing: 0.5px !important;
  padding: 0 12px 8px !important;
  margin-bottom: 0 !important;
}

[dir="rtl"] [data-css="sidebar"] .nav-section-title,
[dir="rtl"] [data-css="sidebar"] .nav-section .nav-item,
html[lang="ar"] [data-css="sidebar"] .nav-section-title,
html[lang="ar"] [data-css="sidebar"] .nav-section .nav-item {
  text-align: right !important;
}

/* RTL/Arabic: keep flex-direction row so icon (first child) appears on the RIGHT.
   direction:rtl on parent reverses main-axis, placing icon at start (right). */
[dir="rtl"] [data-css="sidebar"] .nav-section .nav-item,
html[lang="ar"] [data-css="sidebar"] .nav-section .nav-item {
  flex-direction: row !important;
}

/* Nav items (demo: .nav-item with .nav-item-icon) */
[data-css="sidebar"] a.nav-item,
[data-css="sidebar"] a[class*="NavLink"],
[data-css="sidebar"] [class*="NavLink"],
[data-css="sidebar"] .nav-section a[class*="StyledNavigationElement"],
[data-css="sidebar"] .nav-section li a {
  display: flex !important;
  align-items: center !important;
  padding: 10px 12px !important;
  margin-bottom: 4px !important;
  border-radius: 8px !important;
  color: var(--neutral-700) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}

[data-css="sidebar"] .nav-item-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 1em !important;
}

[dir="rtl"] [data-css="sidebar"] .nav-item-icon,
html[lang="ar"] [data-css="sidebar"] .nav-item-icon {
  margin-right: 0 !important;
  margin-left: 12px !important;
}

/* =====================================================
   Enhanced Resource List Views (tables)
   Applies to all AdminJS list pages (brands, categories, coupons, etc.)
   ===================================================== */

/* List container – content padding and margins */
[data-css$='-list'] {
  padding: 32px !important;
}

/* Action header – spacing below title/buttons so selection bar and table have room */
[data-css$='-list'] .ActionHeader {
  margin-bottom: 32px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-css$='-list'] .ActionHeader h1,
[data-css$='-list'] .ActionHeader h2 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
}

/* Breadcrumbs and badge in list header */
[data-css$='-list'] .ActionHeader a,
[data-css$='-list'] [class*="Breadcrumb"] a,
[data-css$='-list'] [class*="Breadcrumb"] span {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--neutral-500) !important;
}

[data-css$='-list'] .ActionHeader [class*="Badge"],
[data-css$='-list'] .ActionHeader [class*="badge"] {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
}

/* List header buttons (Filter, Create new X) */
[data-css$='-list'] .ActionHeader button,
[data-css$='-list'] .ActionHeader [class*="Button"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
}

/* Table card wrapper – margins for clear separation from header */
[data-css$='-table'] {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
  background: var(--neutral-0) !important;
  border-radius: 12px !important;
  border: 1px solid var(--neutral-200) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}

/* Inner table */
[data-css$='-table'] table {
  width: 100% !important;
  border-collapse: collapse !important;
}

[data-css$='-table'] thead {
  background: var(--neutral-50) !important;
  border-bottom: 1px solid var(--neutral-200) !important;
}

[data-css$='-table'] th {
  padding: 16px !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--neutral-600) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

[data-css$='-table'] td {
  padding: 16px !important;
  border-bottom: 1px solid var(--neutral-100) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--neutral-700) !important;
}

[data-css$='-table'] tbody tr:last-child td {
  border-bottom: none !important;
}

[data-css$='-table'] tbody tr:hover {
  background: var(--neutral-50) !important;
}

/* Bulk selection checkbox styling (approximate demo look) */
[data-css$='-table'] input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
}

/* =====================================================
   Selected records bar (bulk actions) – primary teal, simple
   ===================================================== */
[data-css$='-table-caption'],
caption[data-css$='-table-caption'] {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 10px !important;
  transform: translateY(-100%) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding: 12px 20px !important;
  background: var(--primary-teal) !important;
  color: #fff !important;
  border-radius: 10px 10px 0 0 !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

[dir="rtl"] [data-css$='-table-caption'],
[dir="rtl"] caption[data-css$='-table-caption'],
html[lang="ar"] [data-css$='-table-caption'],
html[lang="ar"] caption[data-css$='-table-caption'] {
  text-align: right !important;
}

[data-css$='-table-caption'] [class*="Title"],
[data-css$='-table-caption'] h1,
[data-css$='-table-caption'] h2,
[data-css$='-table-caption'] h3,
[data-css$='-table-caption'] h4,
caption[data-css$='-table-caption'] [class*="Title"],
caption[data-css$='-table-caption'] .adminjs_Text {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

[data-css$='-table-caption'] [class*="Button"],
[data-css$='-table-caption'] button,
caption[data-css$='-table-caption'] [class*="Button"],
caption[data-css$='-table-caption'] button {
  background: #fff !important;
  color: var(--primary-teal) !important;
  border: 1px solid #fff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
}

[data-css$='-table-caption'] [class*="Button"]:hover,
[data-css$='-table-caption'] button:hover,
caption[data-css$='-table-caption'] [class*="Button"]:hover,
caption[data-css$='-table-caption'] button:hover {
  background: var(--primary-teal-light) !important;
  color: var(--primary-teal) !important;
  border-color: #fff !important;
}

/* Empty state inside lists – style InfoBox like coupons empty demo */
[data-css$='-list'] .InfoBox {
  background: var(--neutral-0) !important;
  border-radius: 12px !important;
  padding: 80px 40px !important;
  border: 1px solid var(--neutral-200) !important;
  box-shadow: var(--shadow-sm) !important;
  text-align: center !important;
}

[data-css$='-list'] .InfoBox h4 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  margin-bottom: 12px !important;
}

[data-css$='-list'] .InfoBox p,
[data-css$='-list'] .InfoBox [class*="Text"] {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--neutral-600) !important;
  margin-bottom: 32px !important;
}

[data-css$='-list'] .InfoBox button,
[data-css$='-list'] .InfoBox [class*="Button"] {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
}

/* =====================================================
   Reports Dashboard (custom reports component)
   Match reports-dashboard-demo.html styling
   ===================================================== */

.reports-dashboard-inner {
  max-width: 1200px !important;
}

.reports-header {
  margin-bottom: 32px !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.reports-header .adminjs_H2,
.reports-header h2 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.reports-filters {
  gap: 0 !important;
  align-items: flex-start !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin-inline-start: auto !important;
}

.reports-filter-form-group {
  width: auto !important;
  max-width: none !important;
  margin-bottom: 0 !important;
}

.reports-filter-form-group .reports-filter-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--neutral-600) !important;
  margin-bottom: 8px !important;
}

.reports-filter-controls {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.reports-filter-or {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--neutral-600) !important;
}

/* FormDataControl-style Selects: rounded, light border, focus ring */
.reports-filter-form-group [class*='Select'] {
  min-width: 160px !important;
  width: auto !important;
}

.reports-filter-form-group [class*='Select'] > div,
.reports-filter-form-group [class*='react-select'] > div {
  border-radius: 8px !important;
  border: 1px solid var(--neutral-300) !important;
  background: var(--neutral-0) !important;
  min-height: 48px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.reports-filter-form-group [class*='Select'] > div:focus-within,
.reports-filter-form-group [class*='react-select'] > div:focus-within {
  border-color: var(--neutral-900) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}

.reports-filter-form-group [class*='Select'] [class*='value-container'],
.reports-filter-form-group [class*='react-select'] [class*='value-container'] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.reports-filter-form-group [class*='Select'] [class*='input-container'],
.reports-filter-form-group [class*='react-select'] [class*='input-container'] {
  opacity: 0 !important;
  pointer-events: auto !important;
}

.reports-filter-form-group [class*='Select'] [class*='input-container'] input,
.reports-filter-form-group [class*='react-select'] [class*='input-container'] input {
  opacity: 0 !important;
  border: none !important;
  background: transparent !important;
}

.reports-reset-link {
  color: var(--primary-teal) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.reports-reset-link:hover {
  color: var(--primary-teal-dark) !important;
}

.reports-section-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--neutral-900) !important;
  margin-bottom: 20px !important;
}

.reports-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin-bottom: 32px !important;
}

@media (max-width: 1024px) {
  .reports-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

.reports-stats-grid .adminjs_Box {
  padding: 0 !important;
}

.reports-stats-grid .reports-stat-card,
.reports-stats-grid .reports-stat-card > .adminjs_Box {
  min-width: 0 !important;
}

.reports-stats-grid .adminjs_Box > .adminjs_Box {
  border-radius: 12px !important;
  border: 1px solid var(--neutral-200) !important;
  box-shadow: none !important;
  background: var(--neutral-0) !important;
  padding: 28px 24px !important;
  min-height: 120px !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
  width: 100% !important;
}

.reports-stats-grid .adminjs_Box > .adminjs_Box:hover {
  box-shadow: var(--shadow-sm) !important;
  border-color: var(--neutral-300) !important;
}

.reports-stats-grid .adminjs_Box .adminjs_Text {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--neutral-600) !important;
}

.reports-stats-grid .adminjs_Box .adminjs_H5 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  margin-top: 8px !important;
}

/* Chart container: white card (demo .chart-container) */
.reports-chart-container {
  background: var(--neutral-0) !important;
  border-radius: 12px !important;
  border: 1px solid var(--neutral-200) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 24px !important;
}

.reports-chart-header {
  margin-bottom: 24px !important;
}

.reports-chart-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--neutral-900) !important;
  margin-bottom: 0 !important;
}

/* Tab group: pill style (demo .tab-group) – gray container, active = white + teal */
.reports-tab-group {
  display: flex !important;
  gap: 8px !important;
  background: var(--neutral-100) !important;
  padding: 4px !important;
  border-radius: 8px !important;
}

.reports-tab {
  padding: 8px 16px !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--neutral-500) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: color 0.2s, background 0.2s, background-color 0.2s, box-shadow 0.2s !important;
  appearance: none !important;
}

.reports-tab:hover {
  color: var(--neutral-900) !important;
  background: transparent !important;
  background-color: transparent !important;
}

.reports-tab.active {
  background: var(--neutral-0) !important;
  background-color: var(--neutral-0) !important;
  color: var(--primary-teal) !important;
  box-shadow: var(--shadow-sm) !important;
}

.reports-chart-wrapper {
  height: 300px !important;
  position: relative !important;
  width: 100% !important;
  direction: ltr !important;
  isolation: isolate !important;
  unicode-bidi: isolate !important;
}

.reports-chart-wrapper > div {
  width: 100% !important;
  height: 100% !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

.reports-chart-wrapper svg,
.reports-chart-wrapper [class*='apexcharts'] {
  direction: ltr !important;
}

.reports-chart-wrapper text {
  direction: ltr !important;
  unicode-bidi: embed !important;
  font-variant-numeric: tabular-nums !important;
}

.reports-chart-content {
  margin-top: 0 !important;
}

[dir='rtl'] .reports-chart-content{
  transform: scaleX(-1) !important;
}

.kqxVZl {
  margin-bottom: 0 !important;
}

.hilNtv{
  margin-top: 0 !important;
}

[dir="rtl"] h2.sc-ilEZps.hilNtv.sc-hhGHuG.sc-hsiEis.dgJiMC.kqxVZl.adminjs_Header.adminjs_H2{
  text-align: center !important;
}

[dir="rtl"] .sc-gjTGSA.sc-caslwl.duDtti.kzura-d.adminjs_Text{
  text-align: center !important;
}
/* RTL: reports dashboard only. Charts stay LTR (no scaleX). */
.reports-dashboard[dir='rtl'] .reports-header {
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
}

.reports-dashboard[dir='rtl'] .reports-header .adminjs_H2,
.reports-dashboard[dir='rtl'] .reports-header h2 {
  text-align: right !important;
}

.reports-dashboard[dir='rtl'] .reports-filters {
  flex-direction: column !important;
  align-items: flex-end !important;
  margin-inline-start: 0 !important;
}

.reports-dashboard[dir='rtl'] .reports-filter-form-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}

.reports-dashboard[dir='rtl'] .reports-filter-form-group .reports-filter-label {
  text-align: right !important;
}

.reports-dashboard[dir='rtl'] .reports-filter-controls {
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
}

.reports-dashboard[dir='rtl'] .reports-chart-header {
  flex-direction: row-reverse !important;
}

.reports-dashboard[dir='rtl'] .reports-tab-group {
  flex-direction: row-reverse !important;
}

/* =====================================================
   New / Edit Record Forms
   Make create/edit forms look like a centered card (demo-grade typography)
   ===================================================== */

/* Outer container for resource actions */
[data-css$='-new'],
[data-css$='-edit'] {
  padding: 32px !important;
}

/* New/Edit page header (breadcrumbs, title) */
[data-css$='-new'] .ActionHeader h1,
[data-css$='-new'] .ActionHeader h2,
[data-css$='-edit'] .ActionHeader h1,
[data-css$='-edit'] .ActionHeader h2 {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
}

[data-css$='-new'] .ActionHeader a,
[data-css$='-edit'] .ActionHeader a {
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* Form card */
[data-css$='-new'] form,
[data-css$='-edit'] form {
  background: var(--neutral-0) !important;
  border-radius: 16px !important;
  border: 1px solid var(--neutral-200) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 32px !important;
  max-width: 960px !important;
  margin: 0 auto 40px !important;
  min-width: -webkit-fill-available !important;
  min-width: -moz-available !important;
}

/* Form groups spacing and fill width */
[data-css$='-new'] [class*='FormGroup'],
[data-css$='-edit'] [class*='FormGroup'] {
  margin-bottom: 24px !important;
  min-width: -webkit-fill-available !important;
  min-width: -moz-available !important;
}

/* Labels: larger, bolder */
[data-css$='-new'] label,
[data-css$='-edit'] label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--neutral-800) !important;
}

/* Inputs, selects, textareas: 16px, min-height 48px, full width. Exclude file + react-select inner. */
[data-css$='-new'] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-css$='-new'] select,
[data-css$='-new'] textarea,
[data-css$='-edit'] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-css$='-edit'] select,
[data-css$='-edit'] textarea {
  border-radius: 10px !important;
  border: 1px solid var(--neutral-300) !important;
  background: var(--neutral-0) !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: -webkit-fill-available !important;
  min-width: -moz-available !important;
  box-sizing: border-box !important;
}

/* React-Select fields (Owner, Logo File, State, etc.): make the control fill the field responsively */
[data-css$='-new'] [class*='react-select'],
[data-css$='-edit'] [class*='react-select'] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

[data-css$='-new'] [class*='react-select'] > div,
[data-css$='-edit'] [class*='react-select'] > div {
  display: block !important;
  width: 100% !important;
}

/* File inputs: no bulky box; minimal styling */
[data-css$='-new'] input[type="file"],
[data-css$='-edit'] input[type="file"] {
  font-size: 14px !important;
  min-height: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--neutral-300) !important;
  border-radius: 8px !important;
  background: var(--neutral-0) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[data-css$='-new'] input[type="checkbox"],
[data-css$='-new'] input[type="radio"],
[data-css$='-edit'] input[type="checkbox"],
[data-css$='-edit'] input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
}

[data-css$='-new'] input::placeholder,
[data-css$='-edit'] input::placeholder {
  color: var(--neutral-500) !important;
  font-size: 16px !important;
}

[data-css$='-new'] input[type="file"]:focus,
[data-css$='-edit'] input[type="file"]:focus {
  border-color: var(--primary-teal) !important;
  box-shadow: 0 0 0 2px rgba(0, 107, 125, 0.15) !important;
}

[data-css$='-new'] textarea {
  min-height: 120px !important;
}

[data-css$='-new'] input:focus,
[data-css$='-new'] select:focus,
[data-css$='-new'] textarea:focus,
[data-css$='-edit'] input:focus,
[data-css$='-edit'] select:focus,
[data-css$='-edit'] textarea:focus {
  border-color: var(--primary-teal) !important;
  box-shadow: 0 0 0 2px rgba(0, 107, 125, 0.15) !important;
}

[data-css$='-new'] [class*='Select'] > div:focus-within,
[data-css$='-edit'] [class*='Select'] > div:focus-within {
  border-color: var(--primary-teal) !important;
  box-shadow: 0 0 0 2px rgba(0, 107, 125, 0.15) !important;
}

/* React-select (Select / SelectAsync): control fills width, no "square" from inner input */
[data-css$='-new'] [class*='Select'],
[data-css$='-edit'] [class*='Select'] {
  width: 100% !important;
  min-width: -webkit-fill-available !important;
  min-width: -moz-available !important;
}

[data-css$='-new'] [class*='Select'] > div,
[data-css$='-edit'] [class*='Select'] > div {
  min-height: 48px !important;
  min-width: -webkit-fill-available !important;
  min-width: -moz-available !important;
  border-radius: 10px !important;
  border: 1px solid var(--neutral-300) !important;
  font-size: 16px !important;
}

/* Value-container: positioning context, no visible box */
[data-css$='-new'] [class*='Select'] [class*='value-container'],
[data-css$='-new'] [class*='Select'] [class*='ValueContainer'],
[data-css$='-new'] [class*='react-select'] [class*='value-container'],
[data-css$='-edit'] [class*='Select'] [class*='value-container'],
[data-css$='-edit'] [class*='Select'] [class*='ValueContainer'],
[data-css$='-edit'] [class*='react-select'] [class*='value-container'] {
  position: relative !important;
  min-width: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Input-container + input: INVISIBLE – no "bad square". Overlay value area, opacity 0. */
[data-css$='-new'] [class*='Select'] [class*='input-container'],
[data-css$='-new'] [class*='react-select'] [class*='input-container'],
[data-css$='-edit'] [class*='Select'] [class*='input-container'],
[data-css$='-edit'] [class*='react-select'] [class*='input-container'] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  z-index: 1 !important;
}

[data-css$='-new'] [class*='Select'] [class*='input-container'] input,
[data-css$='-new'] [class*='react-select'] [class*='input-container'] input,
[data-css$='-edit'] [class*='Select'] [class*='input-container'] input,
[data-css$='-edit'] [class*='react-select'] [class*='input-container'] input {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: inherit !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

[data-css$='-new'] [class*='Select'] [class*='input-container'] input:focus,
[data-css$='-new'] [class*='react-select'] [class*='input-container'] input:focus,
[data-css$='-edit'] [class*='Select'] [class*='input-container'] input:focus,
[data-css$='-edit'] [class*='react-select'] [class*='input-container'] input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholder: no box */
[data-css$='-new'] [class*='Select'] [class*='placeholder'],
[data-css$='-new'] [class*='Select'] [class*='Placeholder'],
[data-css$='-new'] [class*='react-select'] [class*='placeholder'],
[data-css$='-edit'] [class*='Select'] [class*='placeholder'],
[data-css$='-edit'] [class*='Select'] [class*='Placeholder'],
[data-css$='-edit'] [class*='react-select'] [class*='placeholder'] {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline !important;
}

/* Submit / action buttons in form */
[data-css$='-new'] form [class*='ButtonGroup'] button,
[data-css$='-new'] form button[type='submit'],
[data-css$='-edit'] form [class*='ButtonGroup'] button,
[data-css$='-edit'] form button[type='submit'] {
  font-size: 16px !important;
  font-weight: 600 !important;
  min-height: 48px !important;
  padding: 12px 24px !important;
}

[data-css$='-new'] form [class*='ButtonGroup'],
[data-css$='-edit'] form [class*='ButtonGroup'] {
  margin-top: 28px !important;
}

/* Form layout: full-width fields within card */
@media (min-width: 1280px) {
  [data-css$='-new'] form,
  [data-css$='-edit'] form {
    max-width: 720px !important;
  }
}

/* =====================================================
   Fix: Force all form inputs and selects to full width
   ===================================================== */

/* Form field sections (inside form only) should be full width */
[data-css$='-new'] form section[data-testid^="property-"],
[data-css$='-edit'] form section[data-testid^="property-"] {
  width: 100% !important;
}

/* The wrapper div inside form field sections */
[data-css$='-new'] form section[data-testid^="property-"] > div,
[data-css$='-edit'] form section[data-testid^="property-"] > div {
  width: 100% !important;
}

/* AdminJS Select container inside forms */
[data-css$='-new'] form .adminjs_Select,
[data-css$='-edit'] form .adminjs_Select {
  width: 100% !important;
  display: block !important;
}

/* React-Select outer container */
[data-css$='-new'] form .adminjs_Select > div,
[data-css$='-edit'] form .adminjs_Select > div {
  width: 100% !important;
}

/* React-Select control - the visible border element */
[data-css$='-new'] form .adminjs_Select > div > div:first-child,
[data-css$='-edit'] form .adminjs_Select > div > div:first-child {
  width: 100% !important;
}

/* Hide the input box inside React-Select (the visible square) */
[data-css$='-new'] form .adminjs_Select div[class*="Input"] > input,
[data-css$='-edit'] form .adminjs_Select div[class*="Input"] > input {
  opacity: 0 !important;
  width: 1px !important;
  min-width: 1px !important;
  border: none !important;
  background: transparent !important;
}

[data-css$='-new'] form .adminjs_Select div[class*="Input"],
[data-css$='-edit'] form .adminjs_Select div[class*="Input"] {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  border: none !important;
  background: transparent !important;
}

[data-css="sidebar"] a.nav-item:hover,
[data-css="sidebar"] a[class*="NavLink"]:hover,
[data-css="sidebar"] [class*="NavLink"]:hover,
[data-css="sidebar"] .nav-section a[class*="StyledNavigationElement"]:hover,
[data-css="sidebar"] .nav-section li a:hover {
  background: var(--neutral-100) !important;
  color: var(--primary-teal) !important;
}

[data-css="sidebar"] a.nav-item.active,
[data-css="sidebar"] a.nav-item[aria-current="page"],
[data-css="sidebar"] a[class*="NavLink"][class*="active"],
[data-css="sidebar"] a[class*="NavLink"][aria-current="page"],
[data-css="sidebar"] [class*="NavLink"][class*="active"],
[data-css="sidebar"] .nav-section a[class*="selected"],
[data-css="sidebar"] .nav-section li a[aria-selected="true"] {
  background: var(--primary-teal-light) !important;
  color: var(--primary-teal) !important;
}

/* =====================================================
   Top Bar / Header (Demo: title left, user right)
   ===================================================== */
[data-css="topbar"],
.topbar-demo,
[class*="NavBar"] {
  background: var(--neutral-0) !important;
  border-bottom: 1px solid var(--neutral-200) !important;
  padding: 16px 32px !important;
  min-height: 64px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
}

/* SPOTC Admin + Dashboard on same line: branding (logo + name) in TopBar */
[data-css="topbar"] .topbar-branding,
.topbar-demo .topbar-branding {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  margin-right: 24px !important;
  text-decoration: none !important;
  color: inherit !important;
}

[data-css="topbar"] .topbar-branding .logo-icon,
.topbar-demo .topbar-branding .logo-icon {
  width: 36px !important;
  height: 36px !important;
  background: var(--primary-teal) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--neutral-0) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

[data-css="topbar"] .topbar-branding .logo-text,
.topbar-demo .topbar-branding .logo-text {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--neutral-900) !important;
  white-space: nowrap !important;
}

[data-css="topbar"] .topbar-branding:hover .logo-text,
.topbar-demo .topbar-branding:hover .logo-text {
  color: var(--primary-teal) !important;
}

[data-css="topbar"] .topbar-branding .logo-img,
.topbar-demo .topbar-branding .logo-img {
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

[dir="rtl"] [data-css="topbar"] .topbar-branding,
[dir="rtl"] .topbar-demo .topbar-branding,
html[lang="ar"] [data-css="topbar"] .topbar-branding,
html[lang="ar"] .topbar-demo .topbar-branding {
  margin-right: 0 !important;
  margin-left: 24px !important;
}

[data-css="topbar"] .header-right,
.topbar-demo .header-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

[dir="rtl"] [data-css="topbar"] .header-right,
[dir="rtl"] .topbar-demo .header-right,
html[lang="ar"] [data-css="topbar"] .header-right,
html[lang="ar"] .topbar-demo .header-right {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* User block (card: avatar + Admin / email) */
.user-block,
.header-user-wrap .user-block {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  background: var(--neutral-100) !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font: inherit !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background 0.2s, border-color 0.2s !important;
}

button.user-block:hover {
  background: var(--neutral-200) !important;
  border-color: var(--neutral-300) !important;
}

.user-block[role="presentation"] {
  cursor: default !important;
}

.user-block[role="presentation"]:hover {
  background: var(--neutral-100) !important;
  border-color: var(--neutral-200) !important;
}

.user-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: var(--primary-teal) !important;
  color: var(--neutral-0) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.user-avatar-img {
  object-fit: cover !important;
  padding: 0 !important;
  background: none !important;
}

.user-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.user-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--neutral-900) !important;
  line-height: 1.2 !important;
}

.user-email {
  font-size: 12px !important;
  color: var(--neutral-500) !important;
  line-height: 1.2 !important;
}

/* Language selector (flag + label + chevron, dropdown with checkmark) */
.lang-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  background: var(--neutral-0) !important;
  border: 1px solid var(--neutral-200) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: var(--neutral-800) !important;
  font: inherit !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background 0.2s, border-color 0.2s !important;
}

.lang-trigger:hover {
  background: var(--neutral-50) !important;
  border-color: var(--neutral-300) !important;
}

.lang-flag {
  font-size: 1rem !important;
  line-height: 1 !important;
}

.lang-flag-img {
  width: 20px !important;
  height: 14px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.lang-label {
  font-weight: 500 !important;
}

.lang-chevron {
  flex-shrink: 0 !important;
  opacity: 0.7 !important;
}

.header-lang-wrap .lang-dropdown-menu,
.header-lang-wrap [class*="DropDownMenu"] {
  min-width: 160px !important;
}

.header-lang-wrap .lang-dropdown-item,
.header-lang-wrap [class*="DropDownItem"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.lang-item-flag {
  flex-shrink: 0 !important;
}

.lang-item-flag.lang-flag-img {
  width: 20px !important;
  height: 14px !important;
  object-fit: contain !important;
}

.lang-item-label {
  flex: 1 !important;
}

.lang-item-check {
  flex-shrink: 0 !important;
  margin-left: auto !important;
  color: var(--success) !important;
}

/* Language picker: always LTR (no RTL support) */
.lang-picker-ltr,
.lang-picker-ltr * {
  direction: ltr !important;
  text-align: left !important;
}

.lang-picker-ltr .lang-trigger,
.lang-picker-ltr .lang-dropdown-item,
.lang-picker-ltr [class*="DropDownItem"] {
  flex-direction: row !important;
}

/* Dropdown menu may be portaled – force LTR */
.lang-dropdown-menu,
.lang-dropdown-menu .lang-dropdown-item,
.lang-dropdown-menu [class*="DropDownItem"] {
  direction: ltr !important;
  text-align: left !important;
  flex-direction: row !important;
}

/* App layout: sidebar | main always in one row (no wrap) */
[data-css="app"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* =====================================================
   Main Content Area (Demo: margin-left for fixed sidebar)
   ===================================================== */
[data-css="app-content"],
[role="main"],
main {
  background: var(--neutral-50) !important;
  margin-left: 280px !important;
  min-height: 100vh !important;
}

[dir="rtl"] [data-css="app-content"],
[dir="rtl"] [role="main"],
[dir="rtl"] main {
  margin-left: 0 !important;
  margin-right: 280px !important;
}

/* Responsive: hamburger visible on mobile, hidden on desktop (match sidebar breakpoint) */
.topbar-hamburger {
  display: none !important;
}

@media (max-width: 1024px) {
  .topbar-hamburger {
    display: flex !important;
    align-items: center !important;
  }
}

@media (min-width: 1025px) {
  .topbar-hamburger {
    display: none !important;
  }
}

/* Demo-style responsive: sidebar off-canvas, main full width */
@media (max-width: 1024px) {
  [data-css="sidebar"].hidden {
    transform: translateX(-100%) !important;
  }

  [data-css="sidebar"].visible {
    transform: none !important;
  }

  [dir="rtl"] [data-css="sidebar"].hidden,
  html[lang="ar"] [data-css="sidebar"].hidden {
    transform: translateX(100%) !important;
  }

  [dir="rtl"] [data-css="sidebar"].visible,
  html[lang="ar"] [data-css="sidebar"].visible {
    transform: none !important;
  }

  [data-css="app-content"],
  [role="main"],
  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  [dir="rtl"] [data-css="app-content"],
  [dir="rtl"] [role="main"],
  [dir="rtl"] main {
    margin-right: 0 !important;
  }

  /* Prevent horizontal scroll when sidebar overlay is open */
  [data-css="app"] {
    overflow-x: hidden !important;
  }
}

/* Very small viewports: limit sidebar width so it doesn’t overflow */
@media (max-width: 380px) {
  [data-css="sidebar"],
  aside[data-css="sidebar"] {
    width: min(280px, 85vw) !important;
    min-width: min(280px, 85vw) !important;
  }
}

/* =====================================================
   RTL Support
   ===================================================== */
[dir="rtl"],
html[lang="ar"] {
  direction: rtl !important;
}

[dir="ltr"],
html[lang="en"] {
  direction: ltr !important;
}

/* RTL Layout - Apply to both [dir="rtl"] and [lang="ar"] */
[dir="rtl"], html[lang="ar"] {
  text-align: right;
}

[dir="rtl"] *, html[lang="ar"] * {
  direction: rtl;
}

/* RTL Sidebar */
[dir="rtl"] aside,
[dir="rtl"] nav,
html[lang="ar"] aside,
html[lang="ar"] nav {
  left: auto !important;
  right: 0 !important;
}

/* RTL Content Area */
[dir="rtl"] main,
[dir="rtl"] [role="main"],
html[lang="ar"] main,
html[lang="ar"] [role="main"] {
  margin-left: 0 !important;
  margin-right: 280px !important;
}

/* RTL Navigation Items */
[dir="rtl"] a,
[dir="rtl"] button,
html[lang="ar"] a,
html[lang="ar"] button {
  text-align: right;
}

/* RTL Icons */
[dir="rtl"] svg,
[dir="rtl"] [class*="Icon"],
html[lang="ar"] svg,
html[lang="ar"] [class*="Icon"] {
  margin-left: var(--spacing-sm);
  margin-right: 0;
  transform: scaleX(-1);
}

/* RTL Table Alignment */
[dir="rtl"] table,
html[lang="ar"] table {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] th,
[dir="rtl"] td,
html[lang="ar"] th,
html[lang="ar"] td {
  text-align: right;
}

/* RTL Forms */
[dir="rtl"] label,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
  text-align: right;
  direction: rtl;
}

/* RTL Flex Containers */
[dir="rtl"] [class*="Flex"],
html[lang="ar"] [class*="Flex"] {
  flex-direction: row-reverse;
}

/* RTL Padding/Margin Adjustments */
[dir="rtl"] [class*="Box"],
html[lang="ar"] [class*="Box"] {
  direction: rtl;
}

/* RTL Dropdown and Menu */
[dir="rtl"] [class*="Dropdown"],
[dir="rtl"] [class*="Menu"],
[dir="rtl"] ul,
html[lang="ar"] [class*="Dropdown"],
html[lang="ar"] [class*="Menu"],
html[lang="ar"] ul {
  text-align: right;
  direction: rtl;
}

/* RTL Dashboard Cards */
[dir="rtl"] [class*="Card"],
[dir="rtl"] [class*="Box"],
html[lang="ar"] [class*="Card"],
html[lang="ar"] [class*="Box"] {
  text-align: right;
}

/* =====================================================
   Login Page (SPOTC Admin two-column layout)
   ===================================================== */
.login__Wrapper .adminjs_Illustration {
  display: none;
}

/* Ensure login page uses full viewport and target colors */
.login__Wrapper {
  min-height: 100vh;
  box-sizing: border-box;
}

/* Login page RTL (Arabic) */
.login__Wrapper[dir='rtl'] form label,
.login__Wrapper[dir='rtl'] form input {
  text-align: right;
}
.login__Wrapper[dir='rtl'] form input::placeholder {
  text-align: right;
}

/* =====================================================
   AdminJS Locale Direction Handler
   ===================================================== */
/* Ensure RTL is applied globally when Arabic is selected */
html[lang="ar"] body,
html[lang="ar"] #app {
  direction: rtl !important;
  text-align: right !important;
}

html[lang="en"] body,
html[lang="en"] #app {
  direction: ltr !important;
  text-align: left !important;
}

div[data-rfd-draggable-id] {
  padding: 0;
}

div[data-rfd-draggable-id] .adminjs_Label {
  display: none;
}

div[data-rfd-draggable-id] [data-testid="delete-item"] {
  margin-top: 0;
}

div[data-rfd-draggable-id] .adminjs_Text:empty {
  display: none;
}

[data-css="products-show-drawer-content"] .adminjs_Box .adminjs_Section .adminjs_Box .adminjs_Label {
  display: none;
}

/* =====================================================
   Enhanced Dashboard Layout
   ===================================================== */
.dashboard-enhanced {
  padding: 32px;
  max-width: none;
}

.dashboard-enhanced .welcome-section {
  margin-bottom: 48px;
}

.dashboard-enhanced .welcome-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 12px;
}

.dashboard-enhanced .welcome-subtitle {
  font-size: 16px;
  color: var(--neutral-600);
  margin-bottom: 0;
}

p.welcome-subtitle {
  margin-top: 2.5rem !important;
}

.dashboard-enhanced .dashboard-section {
  margin-bottom: 32px;
}

.dashboard-enhanced .section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900);
  margin-bottom: 16px;
  padding-left: 0;
}

.dashboard-enhanced .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.dashboard-enhanced .stat-card {
  background: var(--neutral-0);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

.dashboard-enhanced .stat-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--primary-teal);
}

.dashboard-enhanced .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-teal), var(--primary-400));
  opacity: 0;
  transition: opacity 0.3s;
}

.dashboard-enhanced .stat-card:hover::before {
  opacity: 1;
}

.dashboard-enhanced .stat-card.stat-card-no-link {
  cursor: default;
}

.dashboard-enhanced .stat-card.stat-card-no-link:hover {
  transform: none;
}

.dashboard-enhanced .stat-value.stat-value-success {
  color: var(--success);
}

.dashboard-enhanced .stat-value.stat-value-danger {
  color: var(--danger);
}

.dashboard-enhanced .stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.dashboard-enhanced .stat-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--neutral-600);
  margin-bottom: 8px;
}

.dashboard-enhanced .stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--neutral-900);
  line-height: 1;
}

.dashboard-enhanced .stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--primary-teal-light);
  color: var(--primary-teal);
  flex-shrink: 0;
}

.dashboard-enhanced .stat-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral-100);
}

.dashboard-enhanced .stat-change {
  font-size: 14px;
  font-weight: 600;
  color: var(--neutral-500);
}

.dashboard-enhanced .stat-period {
  font-size: 14px;
  font-weight: 500;
  color: var(--neutral-500);
}

.dashboard-enhanced .pending-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 24px;
}

.dashboard-enhanced .pending-card {
  background: var(--neutral-0);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--neutral-200);
}

.dashboard-enhanced .pending-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dashboard-enhanced .pending-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--neutral-900);
}

.dashboard-enhanced .pending-badge {
  background: var(--warning);
  color: var(--neutral-0);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-enhanced .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--neutral-500);
}

.dashboard-enhanced .empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.dashboard-enhanced .empty-state-text {
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 1024px) {
  .dashboard-enhanced .stats-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-enhanced .pending-section {
    grid-template-columns: 1fr;
  }
}

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

/* Base table styling for better responsiveness */
.adminjs_Table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

/* Table header improvements */
.adminjs_Table thead th {
  white-space: nowrap;
  padding: 8px 12px;
  font-weight: 600;
  background-color: #f8f9fa;
  border-bottom: 2px solid #dee2e6;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Table body cell improvements */
.adminjs_Table tbody td {
  padding: 12px;
  vertical-align: top;
  border-bottom: 1px solid #e9ecef;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Column-specific width controls based on data type */

/* ID columns - narrow */
.adminjs_Table tbody td:first-child,
.adminjs_Table thead th:first-child {
  width: 80px;
  max-width: 80px;
  text-align: center;
}

/* Number columns (quantity, price, thresholds) - medium width */
.adminjs_Table tbody td[data-property-name*="quantity"],
.adminjs_Table tbody td[data-property-name*="price"],
.adminjs_Table tbody td[data-property-name*="threshold"],
.adminjs_Table thead th[data-property-name*="quantity"],
.adminjs_Table thead th[data-property-name*="price"],
.adminjs_Table thead th[data-property-name*="threshold"] {
  width: 120px;
  max-width: 120px;
  text-align: right;
  white-space: nowrap;
}

/* Status columns - compact */
.adminjs_Table tbody td[data-property-name*="status"],
.adminjs_Table thead th[data-property-name*="status"] {
  width: 100px;
  max-width: 100px;
  text-align: center;
}

/* SKU columns - medium */
.adminjs_Table tbody td[data-property-name*="sku"],
.adminjs_Table thead th[data-property-name*="sku"] {
  width: 150px;
  max-width: 150px;
}

/* Text columns (title, description) - flexible but constrained */
.adminjs_Table tbody td[data-property-name*="title"],
.adminjs_Table tbody td[data-property-name*="description"],
.adminjs_Table thead th[data-property-name*="title"],
.adminjs_Table thead th[data-property-name*="description"] {
  min-width: 200px;
  max-width: 300px;
  word-break: break-word;
  line-height: 1.4;
}

/* Relation columns (brands, categories, files) - medium flexible */
.adminjs_Table tbody td[data-property-name*="brands"],
.adminjs_Table tbody td[data-property-name*="categories"],
.adminjs_Table tbody td[data-property-name*="files"],
.adminjs_Table thead th[data-property-name*="brands"],
.adminjs_Table thead th[data-property-name*="categories"],
.adminjs_Table thead th[data-property-name*="files"] {
  min-width: 150px;
  max-width: 200px;
}

/* Improve text wrapping in cells */
.adminjs_Table tbody td {
  line-height: 1.5;
  white-space: normal;
}

/* Actions column - compact */
.adminjs_Table tbody td:last-child,
.adminjs_Table thead th:last-child {
  width: 120px;
  max-width: 120px;
  text-align: center;
  white-space: nowrap;
}

/* Better handling of long text content */
.adminjs_Table .adminjs_Text {
  display: block;
  max-height: 4.5em; /* ~3 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}

/* Hover effect to show full text */
.adminjs_Table tbody td:hover .adminjs_Text {
  max-height: none;
  overflow: visible;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 8px;
  border-radius: 4px;
  position: relative;
  z-index: 5;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .adminjs_Table {
    font-size: 14px;
  }

  .adminjs_Table tbody td,
  .adminjs_Table thead th {
    padding: 8px;
  }

  /* Hide less important columns on mobile */
  .adminjs_Table tbody td[data-property-name*="lowQuantityThreshold"],
  .adminjs_Table tbody td[data-property-name*="criticalQuantityThreshold"],
  .adminjs_Table thead th[data-property-name*="lowQuantityThreshold"],
  .adminjs_Table thead th[data-property-name*="criticalQuantityThreshold"] {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Stack table for very small screens */
  .adminjs_Table,
  .adminjs_Table thead,
  .adminjs_Table tbody,
  .adminjs_Table th,
  .adminjs_Table td,
  .adminjs_Table tr {
    display: block;
  }

  .adminjs_Table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .adminjs_Table tbody tr {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
  }

  .adminjs_Table tbody td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50% !important;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .adminjs_Table tbody td:before {
    content: attr(data-label);
    position: absolute;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    font-weight: bold;
    color: #666;
  }
}

/* Improve list relations display */
.adminjs_Table .adminjs_Box[data-testid*="relation"] {
  display: inline-block;
  margin: 2px;
  padding: 4px 8px;
  background-color: #e9ecef;
  border-radius: 12px;
  font-size: 0.85em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Currency and number formatting */
.adminjs_Table tbody td[data-property-name*="price"] {
  font-weight: 600;
  color: #28a745;
}

.adminjs_Table tbody td[data-property-name*="quantity"] {
  font-weight: 500;
}

/* Status badges */
.adminjs_Table tbody td[data-property-name*="status"] .adminjs_Text {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.85em;
  font-weight: 500;
  text-transform: uppercase;
}

/* Table container scrolling */
.adminjs_TableWrapper {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.adminjs_TableWrapper::-webkit-scrollbar {
  height: 8px;
}

.adminjs_TableWrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.adminjs_TableWrapper::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.adminjs_TableWrapper::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* =====================================================
   Enhanced Navbar Responsiveness
   ===================================================== */

/* Navbar container - ensure proper flex layout */
[data-css="topbar"],
[class*="NavBar"],
.topbar-demo {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 24px !important;
  min-height: 60px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Header right section - responsive */
.header-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

/* Language selector responsive */
.lang-trigger {
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* User block responsive */
.user-block {
  padding: 6px 10px !important;
}

.user-info {
  display: none !important;
}

@media (min-width: 768px) {
  .user-info {
    display: flex !important;
  }
}

/* Tablet responsiveness */
@media (max-width: 1024px) {
  [data-css="topbar"],
  [class*="NavBar"],
  .topbar-demo {
    padding: 10px 16px !important;
    gap: 8px !important;
  }

  .topbar-branding .logo-text {
    display: none !important;
  }

  .header-right {
    gap: 8px !important;
  }

  .lang-label {
    display: none !important;
  }

  .lang-trigger {
    padding: 8px !important;
    min-width: 40px !important;
    justify-content: center !important;
  }

  .lang-chevron {
    display: none !important;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  [data-css="topbar"],
  [class*="NavBar"],
  .topbar-demo {
    padding: 8px 12px !important;
    min-height: 56px !important;
  }

  .topbar-branding .logo-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  .user-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 12px !important;
  }

  .user-block {
    padding: 4px 8px !important;
    border-radius: 8px !important;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  [data-css="topbar"],
  [class*="NavBar"],
  .topbar-demo {
    padding: 6px 10px !important;
  }

  .header-right {
    gap: 6px !important;
  }

  .lang-trigger {
    padding: 6px !important;
  }

  .user-block {
    padding: 4px 6px !important;
  }
}

/* =====================================================
   Enhanced Modern Table Styles
   ===================================================== */

/* Table wrapper - prevent overflow */
[data-css$='-table'],
.adminjs_TableWrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Modern table styling */
[data-css$='-table'] table,
.adminjs_Table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

/* Professional table header */
[data-css$='-table'] thead,
.adminjs_Table thead {
  background: linear-gradient(180deg, var(--neutral-50) 0%, var(--neutral-100) 100%) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

[data-css$='-table'] th,
.adminjs_Table th {
  padding: 14px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--primary-teal) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--neutral-300) !important;
  white-space: nowrap !important;
  text-align: left !important;
  vertical-align: middle !important;
}

/* All header content (links and plain text) same teal so sortable and non-sortable match */
[data-css$='-table'] th a,
[data-css$='-table'] th button,
[data-css$='-table'] th [class*='TableCell'],
.adminjs_Table th a,
.adminjs_Table th button,
.adminjs_Table th [class*='TableCell'] {
  color: var(--primary-teal) !important;
}

[dir="rtl"] [data-css$='-table'] th,
[dir="rtl"] .adminjs_Table th,
html[lang="ar"] [data-css$='-table'] th,
html[lang="ar"] .adminjs_Table th {
  text-align: right !important;
}

/* Table body cells */
[data-css$='-table'] td,
.adminjs_Table td {
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--neutral-800) !important;
  border-bottom: 1px solid var(--neutral-150, #E8EAED) !important;
  vertical-align: middle !important;
  background: var(--neutral-0) !important;
  transition: background-color 0.15s ease !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 250px !important;
}

/* Zebra striping for better readability */
[data-css$='-table'] tbody tr:nth-child(even) td,
.adminjs_Table tbody tr:nth-child(even) td {
  background: var(--neutral-50) !important;
}

/* Hover effect */
[data-css$='-table'] tbody tr:hover td,
.adminjs_Table tbody tr:hover td {
  background: var(--primary-teal-light) !important;
}

/* First column (usually checkbox/ID) - fixed width */
[data-css$='-table'] th:first-child,
[data-css$='-table'] td:first-child,
.adminjs_Table th:first-child,
.adminjs_Table td:first-child {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  text-align: center !important;
}

/* Last column (actions) - fixed width, allow dropdown to show */
[data-css$='-table'] th:last-child,
[data-css$='-table'] td:last-child,
.adminjs_Table th:last-child,
.adminjs_Table td:last-child {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  text-align: center !important;
  overflow: visible !important;
}

/* Table row actions dropdown / popover - show above table and sticky header */
[data-css$='-table'] [class*="DropDown"] [class*="Menu"],
[data-css$='-table'] [class*="Popover"],
[data-css$='-table'] [class*="Overlay"],
.adminjs_Table [class*="DropDown"] [class*="Menu"],
.adminjs_Table [class*="Popover"],
.adminjs_Table [class*="Overlay"],
[data-css$='-list'] [class*="DropDown"] [class*="Menu"],
[data-css$='-list'] [class*="Popover"],
[data-css$='-list'] [class*="Overlay"] {
  z-index: 1100 !important;
}

/* List/table page: dropdown trigger container in last column */
[data-css$='-list'] td:last-child,
[data-css$='-list'] [data-css*='-table'] td:last-child {
  overflow: visible !important;
}

/* Action buttons in table */
[data-css$='-table'] td:last-child button,
[data-css$='-table'] td:last-child a,
.adminjs_Table td:last-child button,
.adminjs_Table td:last-child a {
  padding: 6px 10px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* Table cell text truncation */
[data-css$='-table'] td .adminjs_Text,
.adminjs_Table td .adminjs_Text {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

/* ID Badge styling */
[data-css$='-table'] td:first-child .adminjs_Text,
.adminjs_Table td:first-child .adminjs_Text {
  background: var(--neutral-100) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* Status badge styling */
[data-css$='-table'] [class*="Badge"],
.adminjs_Table [class*="Badge"] {
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Colorful status/state badges (by data-value set via script or variant class) */
[data-css$='-table'] td[data-property-name="state"] [data-value="approved"],
[data-css$='-table'] td[data-property-name="state"] [data-value="approved"] .adminjs_Text,
.adminjs_Table td[data-property-name="state"] [data-value="approved"],
.adminjs_Table td[data-property-name="state"] [data-value="approved"] .adminjs_Text,
[data-css$='-table'] [class*="Badge"][class*="success"],
.adminjs_Table [class*="Badge"][class*="success"] {
  background: #10b981 !important;
  color: #fff !important;
  border: none !important;
}

[data-css$='-table'] td[data-property-name="state"] [data-value="rejected"],
[data-css$='-table'] td[data-property-name="state"] [data-value="rejected"] .adminjs_Text,
.adminjs_Table td[data-property-name="state"] [data-value="rejected"],
.adminjs_Table td[data-property-name="state"] [data-value="rejected"] .adminjs_Text,
[data-css$='-table'] [class*="Badge"][class*="danger"],
.adminjs_Table [class*="Badge"][class*="danger"] {
  background: #ef4444 !important;
  color: #fff !important;
  border: none !important;
}

[data-css$='-table'] td[data-property-name="state"] [data-value="pending"],
[data-css$='-table'] td[data-property-name="state"] [data-value="pending"] .adminjs_Text,
.adminjs_Table td[data-property-name="state"] [data-value="pending"],
.adminjs_Table td[data-property-name="state"] [data-value="pending"] .adminjs_Text,
[data-css$='-table'] [class*="Badge"][class*="warning"],
.adminjs_Table [class*="Badge"][class*="warning"] {
  background: #f59e0b !important;
  color: #fff !important;
  border: none !important;
}

[data-css$='-table'] td[data-property-name="state"] [data-value="suspended"],
[data-css$='-table'] td[data-property-name="state"] [data-value="suspended"] .adminjs_Text,
.adminjs_Table td[data-property-name="state"] [data-value="suspended"],
.adminjs_Table td[data-property-name="state"] [data-value="suspended"] .adminjs_Text {
  background: #6b7280 !important;
  color: #fff !important;
  border: none !important;
}

/* State column: style the badge wrapper so script can set data-value on it */
[data-css$='-table'] td[data-property-name="state"] [class*="Badge"],
[data-css$='-table'] td[data-property-name="state"] .adminjs_Text,
.adminjs_Table td[data-property-name="state"] [class*="Badge"],
.adminjs_Table td[data-property-name="state"] .adminjs_Text {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* Boolean/Active status styling */
[data-css$='-table'] td[data-property-name*="active"] .adminjs_Text,
[data-css$='-table'] td[data-property-name*="Active"] .adminjs_Text,
.adminjs_Table td[data-property-name*="active"] .adminjs_Text,
.adminjs_Table td[data-property-name*="Active"] .adminjs_Text {
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* Empty state styling */
[data-css$='-list'] [class*="InfoBox"],
[data-css$='-list'] [class*="NoRecords"],
.adminjs_NoRecords {
  background: var(--neutral-0) !important;
  border: 2px dashed var(--neutral-300) !important;
  border-radius: 16px !important;
  padding: 60px 40px !important;
  text-align: center !important;
  margin: 24px 0 !important;
}

[data-css$='-list'] [class*="InfoBox"] h4,
[data-css$='-list'] [class*="NoRecords"] h4,
.adminjs_NoRecords h4 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--neutral-800) !important;
  margin-bottom: 12px !important;
}

[data-css$='-list'] [class*="InfoBox"] p,
[data-css$='-list'] [class*="NoRecords"] p,
.adminjs_NoRecords p {
  font-size: 15px !important;
  color: var(--neutral-600) !important;
  margin-bottom: 24px !important;
}

/* Breadcrumb styling */
[class*="Breadcrumb"],
[class*="breadcrumb"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: var(--neutral-600) !important;
  margin-bottom: 16px !important;
}

[class*="Breadcrumb"] a,
[class*="breadcrumb"] a {
  color: var(--primary-teal) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}

[class*="Breadcrumb"] a:hover,
[class*="breadcrumb"] a:hover {
  color: var(--primary-teal-dark) !important;
}

[class*="Breadcrumb"] span[class*="separator"],
[class*="breadcrumb"] span[class*="separator"] {
  color: var(--neutral-400) !important;
}

/* Import/Export buttons styling */
[class*="Button"][class*="import"],
[class*="Button"][class*="export"],
button[class*="import"],
button[class*="export"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
}

/* Table responsive for smaller screens */
@media (max-width: 1200px) {
  [data-css$='-table'] td,
  .adminjs_Table td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    max-width: 200px !important;
  }

  [data-css$='-table'] th,
  .adminjs_Table th {
    padding: 12px 14px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 768px) {
  [data-css$='-table'] td,
  .adminjs_Table td {
    padding: 10px 12px !important;
    font-size: 12px !important;
    max-width: 150px !important;
  }

  [data-css$='-table'] th,
  .adminjs_Table th {
    padding: 10px 12px !important;
    font-size: 10px !important;
  }

  /* Hide less important columns on mobile */
  [data-css$='-table'] td:nth-child(n+5):not(:last-child),
  [data-css$='-table'] th:nth-child(n+5):not(:last-child),
  .adminjs_Table td:nth-child(n+5):not(:last-child),
  .adminjs_Table th:nth-child(n+5):not(:last-child) {
    display: none !important;
  }
}

/* =====================================================
   Fix Small Square Bug in Forms (Reference Fields)
   ===================================================== */

/* Hide empty/broken elements in select fields */
[data-css$='-new'] [class*='Select'] [class*='indicatorContainer']:empty,
[data-css$='-edit'] [class*='Select'] [class*='indicatorContainer']:empty,
[data-css$='-new'] [class*='Select'] [class*='multiValue'] > div:empty,
[data-css$='-edit'] [class*='Select'] [class*='multiValue'] > div:empty {
  display: none !important;
}

/* Fix clear indicator (X button) styling */
[data-css$='-new'] [class*='Select'] [class*='clearIndicator'],
[data-css$='-edit'] [class*='Select'] [class*='clearIndicator'] {
  padding: 4px !important;
  cursor: pointer !important;
  color: var(--neutral-500) !important;
}

[data-css$='-new'] [class*='Select'] [class*='clearIndicator']:hover,
[data-css$='-edit'] [class*='Select'] [class*='clearIndicator']:hover {
  color: var(--danger) !important;
}

/* Fix dropdown indicator styling */
[data-css$='-new'] [class*='Select'] [class*='dropdownIndicator'],
[data-css$='-edit'] [class*='Select'] [class*='dropdownIndicator'] {
  padding: 4px 8px !important;
  cursor: pointer !important;
  color: var(--neutral-500) !important;
}

/* Fix any empty square box elements */
[data-css$='-new'] [class*='Select'] > div > div:empty,
[data-css$='-edit'] [class*='Select'] > div > div:empty {
  display: none !important;
}

/* Fix empty value containers */
[class*='singleValue']:empty,
[class*='SingleValue']:empty,
[class*='multiValue']:empty,
[class*='MultiValue']:empty {
  display: none !important;
}

/* Fix broken checkbox styling */
input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--neutral-300) !important;
  border-radius: 4px !important;
  background: var(--neutral-0) !important;
  cursor: pointer !important;
}

input[type="checkbox"]:checked {
  background: var(--primary-teal) !important;
  border-color: var(--primary-teal) !important;
}

/* Fix empty containers that show as squares */
div:empty:not([class]):not([id]):not([data-testid]) {
  display: none !important;
}

/* Remove broken square from reference fields */
[data-css$='-new'] [class*='FormGroup'] > div:empty,
[data-css$='-edit'] [class*='FormGroup'] > div:empty {
  display: none !important;
}

/* Hide the mysterious small box on right side of select fields */
[data-css$='-new'] [class*='Select'] [class*='indicatorSeparator'],
[data-css$='-edit'] [class*='Select'] [class*='indicatorSeparator'],
[data-css$='-new'] [class*='Select'] [class*='IndicatorSeparator'],
[data-css$='-edit'] [class*='Select'] [class*='IndicatorSeparator'] {
  display: none !important;
}

/* Hide any loading indicator that might show as box */
[data-css$='-new'] [class*='Select'] [class*='loadingIndicator'],
[data-css$='-edit'] [class*='Select'] [class*='loadingIndicator'],
[data-css$='-new'] [class*='Select'] [class*='LoadingIndicator'],
[data-css$='-edit'] [class*='Select'] [class*='LoadingIndicator'] {
  display: none !important;
}

/* Fix the indicators container - hide if only contains empty/invisible elements */
[data-css$='-new'] [class*='Select'] [class*='indicatorsContainer'] > div:empty,
[data-css$='-edit'] [class*='Select'] [class*='indicatorsContainer'] > div:empty,
[data-css$='-new'] [class*='Select'] [class*='IndicatorsContainer'] > div:empty,
[data-css$='-edit'] [class*='Select'] [class*='IndicatorsContainer'] > div:empty {
  display: none !important;
}

/* Target the specific box element that appears after select fields in RTL */
[dir="rtl"] [data-css$='-new'] [class*='FormGroup'] > div:last-child:not([class*='Select']),
[dir="rtl"] [data-css$='-edit'] [class*='FormGroup'] > div:last-child:not([class*='Select']),
html[lang="ar"] [data-css$='-new'] [class*='FormGroup'] > div:last-child:not([class*='Select']),
html[lang="ar"] [data-css$='-edit'] [class*='FormGroup'] > div:last-child:not([class*='Select']) {
  display: none !important;
}

/* Hide any standalone checkbox-like elements next to selects */
[data-css$='-new'] [class*='FormGroup'] > input[type="checkbox"]:not([id]),
[data-css$='-edit'] [class*='FormGroup'] > input[type="checkbox"]:not([id]) {
  display: none !important;
}

/* Fix: Hide empty box that appears in reference fields */
[class*='referenceValue']:empty,
[class*='ReferenceValue']:empty,
[class*='reference-value']:empty {
  display: none !important;
}

/* Hide any orphan elements in form groups */
[data-css$='-new'] [class*='FormGroup'] > div:not([class]),
[data-css$='-edit'] [class*='FormGroup'] > div:not([class]) {
  display: none !important;
}

/* =====================================================
   Consistent Table Headers
   ===================================================== */

/* Force all table headers to have same styling (teal like sortable columns) */
[data-css$='-table'] th,
.adminjs_Table th,
table th {
  font-family: var(--font-family) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--primary-teal) !important;
  background: var(--neutral-100) !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--neutral-300) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* RTL table headers */
[dir="rtl"] [data-css$='-table'] th,
[dir="rtl"] .adminjs_Table th,
[dir="rtl"] table th,
html[lang="ar"] [data-css$='-table'] th,
html[lang="ar"] .adminjs_Table th,
html[lang="ar"] table th {
  text-align: right !important;
}

[dir="rtl"] a.sc-ftWlEF.hLvnre{
  direction: ltr !important;
}


/* Table header sort icons */
[data-css$='-table'] th [class*='Icon'],
.adminjs_Table th [class*='Icon'] {
  margin-left: 4px !important;
  opacity: 0.6 !important;
  transform: none !important;
}

[dir="rtl"] [data-css$='-table'] th [class*='Icon'],
[dir="rtl"] .adminjs_Table th [class*='Icon'],
html[lang="ar"] [data-css$='-table'] th [class*='Icon'],
html[lang="ar"] .adminjs_Table th [class*='Icon'] {
  margin-left: 0 !important;
  margin-right: 4px !important;
}

/* Ensure all cells have consistent font */
[data-css$='-table'] td,
.adminjs_Table td,
table td {
  font-family: var(--font-family) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--neutral-700) !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
}

/* =====================================================
   Fix Breadcrumb Styling
   ===================================================== */

/* Breadcrumb container */
[class*='Breadcrumbs'],
[class*='breadcrumbs'],
nav[aria-label*='breadcrumb'] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
}

/* Breadcrumb links */
[class*='Breadcrumbs'] a,
[class*='breadcrumbs'] a,
nav[aria-label*='breadcrumb'] a {
  color: var(--primary-teal) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

[class*='Breadcrumbs'] a:hover,
[class*='breadcrumbs'] a:hover,
nav[aria-label*='breadcrumb'] a:hover {
  color: var(--primary-teal-dark) !important;
  text-decoration: underline !important;
}

/* Breadcrumb separator */
[class*='Breadcrumbs'] > span:not(:last-child)::after,
[class*='breadcrumbs'] > span:not(:last-child)::after {
  content: '/' !important;
  margin: 0 8px !important;
  color: var(--neutral-400) !important;
}

/* Current breadcrumb item */
[class*='Breadcrumbs'] > span:last-child,
[class*='breadcrumbs'] > span:last-child {
  color: var(--neutral-600) !important;
  font-weight: 600 !important;
}

/* RTL breadcrumbs */
[dir="rtl"] [class*='Breadcrumbs'],
[dir="rtl"] [class*='breadcrumbs'],
html[lang="ar"] [class*='Breadcrumbs'],
html[lang="ar"] [class*='breadcrumbs'] {
  flex-direction: row-reverse !important;
}

[dir="rtl"] [class*='Breadcrumbs'] > span:not(:last-child)::after,
[dir="rtl"] [class*='breadcrumbs'] > span:not(:last-child)::after,
html[lang="ar"] [class*='Breadcrumbs'] > span:not(:last-child)::after,
html[lang="ar"] [class*='breadcrumbs'] > span:not(:last-child)::after {
  /* Use the same forward-slash separator in RTL, layout is already reversed by flex-direction */
  content: '/' !important;
}