/* Luxury UI Theme - Premium Enterprise Dashboard */

:root {
  /* Colors */
  --premium-bg: #f4f7fc;
  --premium-bg-card: #ffffff;
  --premium-text: #1e293b;
  --premium-text-muted: #64748b;
  --premium-primary: #4f46e5;
  --premium-primary-dark: #4338ca;
  --premium-accent: #0ea5e9;
  --premium-success: #10b981;
  --premium-warning: #f59e0b;
  --premium-danger: #ef4444;
  --premium-border: #e2e8f0;
  
  /* Shadows */
  --premium-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --premium-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --premium-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  
  /* Layout */
  --sidebar-width: 260px;
  --header-height: 64px;
}

/* Dark Mode Overrides (if needed, based on body class) */
body.theme-luxury {
  --premium-bg: #0f172a;
  --premium-bg-card: #1e293b;
  --premium-text: #f8fafc;
  --premium-text-muted: #94a3b8;
  --premium-border: #334155;
  --premium-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Global Reset */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--premium-bg);
  color: var(--premium-text);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ========== LAYOUT ========== */

.app-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.app-sidebar {
  width: var(--sidebar-width) !important;
  height: 100vh !important;
  background: var(--premium-bg-card) !important;
  border-right: 1px solid var(--premium-border) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  overflow-y: auto !important;
  transition: transform 0.3s ease !important;
  padding: 20px 16px !important;
  box-shadow: var(--premium-shadow-sm) !important;
}

[dir="rtl"] .app-sidebar {
  right: 0 !important;
  left: auto !important;
  border-right: none !important;
  border-left: 1px solid var(--premium-border) !important;
}

/* Main Content Wrapper */
.app-main {
  flex: 1 !important;
  margin-left: var(--sidebar-width) !important;
  width: calc(100% - var(--sidebar-width)) !important;
  min-height: 100vh !important;
  background: var(--premium-bg) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: margin 0.3s ease, width 0.3s ease !important;
}

[dir="rtl"] .app-main {
  margin-left: 0 !important;
  margin-right: var(--sidebar-width) !important;
}

/* Header */
.app-header {
  height: var(--header-height) !important;
  background: var(--premium-bg-card) !important;
  border-bottom: 1px solid var(--premium-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
  backdrop-filter: blur(8px) !important;
}

/* Page Content */
.page-content {
  padding: 24px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* ========== COMPONENTS ========== */

/* Cards */
.card, .dashboard-card {
  background: var(--premium-bg-card) !important;
  border-radius: 12px !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow) !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card:hover, .dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--premium-shadow-lg) !important;
}

/* Buttons */
.btn {
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn-primary {
  background: var(--premium-primary) !important;
  color: white !important;
}

.btn-primary:hover {
  background: var(--premium-primary-dark) !important;
}

.btn-outline {
  background: transparent !important;
  border: 1px solid var(--premium-border) !important;
  color: var(--premium-text) !important;
}

.btn-outline:hover {
  background: var(--premium-bg) !important;
  border-color: var(--premium-text-muted) !important;
}

/* Inputs */
.form-control, input[type="text"], input[type="number"], input[type="date"], select {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--premium-border) !important;
  background: var(--premium-bg-card) !important;
  color: var(--premium-text) !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus, input:focus, select:focus {
  outline: none !important;
  border-color: var(--premium-primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
}

/* Tables */
.table-container {
  overflow-x: auto !important;
  border-radius: 8px !important;
  border: 1px solid var(--premium-border) !important;
}

table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
}

th {
  background: var(--premium-bg) !important;
  color: var(--premium-text-muted) !important;
  font-weight: 600 !important;
  text-align: left !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--premium-border) !important;
  white-space: nowrap !important;
}

[dir="rtl"] th {
  text-align: right !important;
}

td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--premium-border) !important;
  color: var(--premium-text) !important;
}

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

tr:hover td {
  background-color: rgba(0,0,0,0.02) !important;
}

/* ========== DASHBOARD GRID ========== */

.dashboard-grid {
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: 1fr !important;
}

/* Top Toolbar */
.dashboard-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--premium-bg-card) !important;
  padding: 16px 24px !important;
  border-radius: 12px !important;
  border: 1px solid var(--premium-border) !important;
  margin-bottom: 24px !important;
}

.dashboard-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.page-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.branch-badge {
  padding: 4px 12px !important;
  background: var(--premium-primary) !important;
  color: white !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.dashboard-filters {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* KPI Cards */
.kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

.kpi-card {
  background: var(--premium-bg-card) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  border: 1px solid var(--premium-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: relative !important;
  overflow: hidden !important;
}

.kpi-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: var(--premium-primary) !important;
}

.kpi-title {
  font-size: 14px !important;
  color: var(--premium-text-muted) !important;
  font-weight: 500 !important;
}

.kpi-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--premium-text) !important;
}

.kpi-trend {
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.kpi-trend.positive { color: var(--premium-success) !important; }
.kpi-trend.negative { color: var(--premium-danger) !important; }

/* Dashboard Tables Grid */
.dashboard-tables-grid {
  display: grid !important;
  grid-template-columns: 1fr 2fr !important; /* 1/3 and 2/3 split */
  gap: 24px !important;
}

/* ========== HTML ALIASES (Applied globally, overridden by mobile below) ========== */

/* Map existing HTML classes to premium styles */
.page-inner {
  padding: 24px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.section-box {
  background: var(--premium-bg-card) !important;
  border-radius: 12px !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow) !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
}

.dashboard-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}

.dashboard-panel {
  background: var(--premium-bg-card) !important;
  border-radius: 12px !important;
  border: 1px solid var(--premium-border) !important;
  box-shadow: var(--premium-shadow) !important;
  padding: 20px !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.panel-scrollable {
  max-height: 500px !important; /* Fixed height for scrolling */
}

.panel-scrollable .table-responsive {
  overflow-y: auto !important;
  flex: 1 !important;
}

.dashboard-filter-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.dashboard-filter-controls {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
}

.filter-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 0 4px 0 !important;
}

.filter-subtitle {
  font-size: 14px !important;
  color: var(--premium-text-muted) !important;
  margin: 0 !important;
}

.filter-actions {
  display: flex !important;
  gap: 8px !important;
}

/* ========== MOBILE RESPONSIVENESS ========== */

/* Header Menu Toggle */
.header-menu-toggle {
  display: none !important;
  background: transparent !important;
  border: none !important;
  color: var(--premium-text) !important;
  font-size: 24px !important;
  cursor: pointer !important;
  padding: 8px !important;
}

/* Sidebar Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35); /* Darker backdrop as requested */
  z-index: 950;
  backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* Show overlay when body has sidebar-open class */
body.sidebar-open .sidebar-overlay {
  display: block !important;
  opacity: 1;
}

@media (max-width: 992px) {
  /* Layout Adjustments */
  body {
    overflow-x: hidden;
  }

  body.sidebar-open {
    overflow: hidden; /* Prevent scrolling when sidebar is open */
  }

  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 82vw !important;
    max-width: 320px !important;
    z-index: 1000 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateX(100%) !important; /* Default hidden RTL */
    box-shadow: 0 0 20px rgba(0,0,0,0.2) !important;
  }
  
  [dir="ltr"] .app-sidebar {
    transform: translateX(-100%) !important; /* Default hidden LTR */
  }

  /* Open state controlled by body class */
  body.sidebar-open .app-sidebar {
    transform: translateX(0) !important;
  }

  .app-main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Toggle Button Visibility */
  .header-menu-toggle {
    display: block !important;
  }
}

/* ========== MOBILE CONTENT FIXES (<= 768px) ========== */
@media (max-width: 768px) {
  /* ========== SINGLE PAGE VISIBILITY ENFORCEMENT (MOBILE) ========== */
  .page,
  .app-page {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
  }
  
  .page.active,
  .app-page.active {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    left: auto !important;
    opacity: 1 !important;
  }
  
  /* Force hide all non-active pages */
  .page:not(.active),
  .app-page:not(.active) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
  }

  /* ========== FIX .app-body FLEX LAYOUT ========== */
  .app-body {
    display: block !important;
    flex-direction: column !important;
  }

  [dir="rtl"] .app-body {
    flex-direction: column !important;
  }

  /* ========== SIDEBAR OFF-CANVAS ========== */
  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(82vw, 320px) !important;
    z-index: 2000 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -2px 0 16px rgba(0,0,0,0.15) !important;
  }

  [dir="ltr"] .app-sidebar {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
  }

  /* Sidebar open state */
  body.sidebar-open .app-sidebar {
    transform: translateX(0) !important;
  }

  /* Sidebar does NOT participate in layout */
  .app-sidebar {
    order: unset !important;
  }

  /* ========== SIDEBAR OVERLAY (BACKDROP) ========== */
  .sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 1999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s !important;
  }

  body.sidebar-open .sidebar-overlay {
    opacity: 1 !important;
    pointer-events: all !important;
  }

  /* ========== MAIN CONTENT FULL WIDTH ========== */
  .app-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: unset !important;
  }

  [dir="rtl"] .app-main {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* 1. Force Main Wrappers to Full Width */
  .app-main, 
  .page-inner, 
  .page-content, 
  .container, 
  .main-content,
  .workspace,
  .form-page-container,
  .login-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  /* 2. Kill Narrow Columns & Fixed Widths */
  .section-box,
  .dashboard-panel,
  .card,
  .panel,
  .dashboard-filters,
  .form-page-card {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3. Fix Grid/Flex Layouts (Force Single Column) */
  .dashboard-grid,
  .dashboard-tables-grid,
  .kpi-grid,
  .dashboard-kpi-grid,
  .grid-2-col,
  .grid-3-col {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 4. Remove Dark Empty Block & Height Fixes */
  .dashboard-panel,
  .section-box {
    height: auto !important;
    min-height: auto !important;
    flex: none !important; /* Stop flexing to fill height */
  }

  .panel-scrollable {
    max-height: none !important; /* Let it grow naturally */
    overflow: visible !important;
  }
  
  /* Allow horizontal scroll for tables only */
  .table-responsive,
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    display: block !important;
  }

  /* 5. Header Tools Stacking */
  .dashboard-toolbar,
  .dashboard-filter-header,
  .dashboard-filter-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .filter-actions {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
  }

  .filter-actions .btn {
    flex: 1 !important;
    text-align: center !important;
  }
  
  /* Field Inputs Full Width */
  .field, .field input, .field select {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ========== MOBILE DASHBOARD LAYOUT (<= 480px) ========== */
  @media (max-width: 480px) {
    /* Dashboard Page Container */
    #page-dashboard .page-inner {
      padding: 12px !important;
    }

    /* ========== COMPACT TOOLBAR CARD ========== */
    .dashboard-filters {
      padding: 12px !important;
      margin-bottom: 12px !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      max-width: 100% !important;
    }

    .dashboard-filter-header {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      margin-bottom: 12px !important;
      align-items: flex-start !important;
    }

    .dashboard-filter-header > div:first-child {
      width: 100% !important;
    }

    .filter-title {
      font-size: 16px !important;
      margin: 0 0 4px 0 !important;
    }

    .filter-subtitle {
      font-size: 12px !important;
      margin: 0 !important;
    }

    .header-actions {
      width: 100% !important;
      margin-top: 8px !important;
    }

    .btn-print-page {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding: 10px 16px !important;
      font-size: 14px !important;
      box-sizing: border-box !important;
    }

    /* ========== DATE RANGE CONTROLS ========== */
    .dashboard-filter-controls {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .dashboard-filter-controls .field {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }

    .dashboard-filter-controls .field label {
      font-size: 12px !important;
      margin-bottom: 6px !important;
      display: block !important;
    }

    .dashboard-filter-controls .field input,
    .dashboard-filter-controls .field select {
      width: 100% !important;
      max-width: 100% !important;
      padding: 10px 12px !important;
      font-size: 14px !important;
      box-sizing: border-box !important;
      -webkit-appearance: none !important;
      appearance: none !important;
    }

    /* Date inputs in 2-column grid */
    .dashboard-filter-controls > .field:nth-child(1),
    .dashboard-filter-controls > .field:nth-child(2) {
      display: inline-block !important;
      width: calc(50% - 5px) !important;
      vertical-align: top !important;
    }

    [dir="rtl"] .dashboard-filter-controls > .field:nth-child(1) {
      margin-left: 5px !important;
      margin-right: 0 !important;
    }

    [dir="rtl"] .dashboard-filter-controls > .field:nth-child(2) {
      margin-right: 5px !important;
      margin-left: 0 !important;
    }

    /* Stack date inputs at very narrow screens */
    @media (max-width: 360px) {
      .dashboard-filter-controls > .field:nth-child(1),
      .dashboard-filter-controls > .field:nth-child(2) {
        width: 100% !important;
        display: block !important;
        margin: 0 0 10px 0 !important;
      }
    }

    /* ========== QUICK FILTERS (SEGMENTED CONTROL) ========== */
    .filter-actions {
      display: flex !important;
      gap: 8px !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      padding-bottom: 4px !important;
      margin-top: 4px !important;
      box-sizing: border-box !important;
    }

    .filter-actions::-webkit-scrollbar {
      height: 2px !important;
    }

    .filter-actions .quick-filter {
      flex: 1 !important;
      min-width: 80px !important;
      padding: 8px 12px !important;
      font-size: 12px !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
    }

    /* ========== KPI CARDS GRID (2 PER ROW) ========== */
    .dashboard-kpi-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
      margin-bottom: 12px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .kpi-card {
      padding: 12px !important;
      min-height: auto !important;
      height: auto !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
    }

    .kpi-header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 4px !important;
    }

    .kpi-label {
      font-size: 11px !important;
      line-height: 1.2 !important;
      margin: 0 !important;
    }

    .kpi-icon {
      font-size: 16px !important;
      flex-shrink: 0 !important;
    }

    .kpi-value {
      font-size: 18px !important;
      font-weight: 700 !important;
      text-align: center !important;
      line-height: 1.2 !important;
      margin: 0 !important;
    }

    [dir="rtl"] .kpi-card {
      text-align: right !important;
    }

    [dir="rtl"] .kpi-value {
      text-align: center !important;
    }

    /* ========== DASHBOARD GRID (SINGLE COLUMN) ========== */
    .dashboard-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      margin-bottom: 12px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .dashboard-grid > * {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    /* ========== SECTION BOXES ========== */
    .section-box {
      padding: 12px !important;
      margin-bottom: 12px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .section-title {
      font-size: 14px !important;
      font-weight: 600 !important;
      margin-bottom: 10px !important;
      padding-bottom: 8px !important;
      border-bottom: 1px solid var(--premium-border, #e5e7eb) !important;
    }

    /* ========== REDUCE SPACING ========== */
    .page-inner {
      padding: 12px !important;
    }

    .dashboard-panel {
      padding: 12px !important;
      margin-bottom: 12px !important;
      min-height: auto !important;
      height: auto !important;
    }

    /* ========== PREVENT OVERFLOW ========== */
    #page-dashboard * {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    #page-dashboard input,
    #page-dashboard select,
    #page-dashboard button,
    #page-dashboard .btn {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Tables */
    .table-responsive {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    /* ========== REMOVE EXCESSIVE SPACING ========== */
    .dashboard-filter-header,
    .dashboard-filter-controls,
    .filter-actions {
      margin: 0 !important;
    }

    .dashboard-filter-controls .field {
      margin-bottom: 10px !important;
    }

    .dashboard-filter-controls .field:last-child {
      margin-bottom: 0 !important;
    }
  }

  /* 6. Safety & KPI Stacking */
  img, svg, canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .kpi-card {
    width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Hide Decorative Backgrounds/Shines on Mobile to prevent blocks */
  .luxury-logo-shine,
  .luxury-logo-particles {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS (Max-width: 480px)
   Target: iPhone 17 and similar mobile devices
   ========================================================================== */
@media (max-width: 480px) {

  /* 1. General Layout Fixes */
  body.is-mobile {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  body.is-mobile .app-main {
    width: 100vw !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  
  body.is-mobile .page-inner {
    padding: 12px 0 !important;
    width: 100% !important;
  }

  /* 2. Top Filter Card - Vertical Stack */
  body.is-mobile .dashboard-filters,
  body.is-mobile .dash-toolbar-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
    height: auto !important;
    align-items: stretch !important;
  }

  /* Header Section */
  body.is-mobile .dashboard-filter-header {
    width: 100% !important;
    margin-bottom: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Date Controls Section */
  body.is-mobile .dashboard-filter-controls,
  body.is-mobile .dash-toolbar-dates {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body.is-mobile .dashboard-filter-controls .field {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Date Inputs - Fixed Height & Touch Target */
  body.is-mobile input[type="date"] {
    width: 100% !important;
    min-height: 48px !important; /* Touch target */
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 8px 12px !important;
    direction: ltr !important; /* Force LTR for numbers */
    text-align: right !important; /* Align text to right */
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: var(--input-bg, #fff) !important;
  }
  
  /* Labels */
  body.is-mobile .field label {
    display: block !important;
    margin-bottom: 6px !important;
    text-align: right !important; /* Ensure RTL labels */
  }

  /* Quick Filter Buttons */
  body.is-mobile .filter-actions,
  body.is-mobile .dash-toolbar-quick {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }
  
  body.is-mobile .quick-filter {
    width: 100% !important;
    padding: 10px 4px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Print Button - Full Width at Bottom */
  body.is-mobile .dash-toolbar-actions,
  body.is-mobile .print-section-btn-wrapper {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 8px !important;
    display: flex !important;
  }
  
  body.is-mobile .btn-print-page {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 16px !important;
    margin: 0 !important;
  }

  /* 3. KPI Cards - 2 Columns Grid */
  body.is-mobile .kpi-grid,
  body.is-mobile .dashboard-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  body.is-mobile .kpi-card {
    padding: 12px !important;
    min-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  body.is-mobile .kpi-value {
    font-size: 18px !important;
    margin: 4px 0 !important;
  }
  
  body.is-mobile .kpi-title {
    font-size: 12px !important;
  }

  /* 4. Tables - Horizontal Scroll */
  body.is-mobile .table-responsive,
  body.is-mobile .dashboard-tables-grid {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  body.is-mobile table {
    min-width: 600px !important; /* Force scroll */
  }

  body.is-mobile .dashboard-tables-grid {
    /* Reset grid for tables container on mobile */
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* 5. Available Cash Pill - Floating & Minimized */
  body.is-mobile #cash-pill {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 20px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 20px)) !important;
    background: rgba(30, 41, 59, 0.95) !important; /* Dark glass */
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0);
  }

  /* Minimized State (triggered by JS) */
  body.is-mobile #cash-pill.minimized {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    left: 20px !important; /* Left aligned LTR, Right for RTL? No, stick to left or right */
    right: auto !important; /* Let's put it on the left (thumb reach) */
    bottom: calc(20px + env(safe-area-inset-bottom, 20px)) !important;
    padding: 0 !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: var(--premium-primary, #3b82f6) !important;
  }
  
  /* RTL adjustments for minimized pill */
  [dir="rtl"] body.is-mobile #cash-pill.minimized {
    left: 20px !important;
    right: auto !important;
  }

  /* Hide label/currency when minimized */
  body.is-mobile #cash-pill.minimized .cash-pill__label,
  body.is-mobile #cash-pill.minimized .cash-pill__currency {
    display: none !important;
  }

  /* Value style when minimized */
  body.is-mobile #cash-pill.minimized .cash-pill__value {
    font-size: 12px !important;
    color: white !important;
    white-space: nowrap !important;
  }
  
  /* Value style normal */
  body.is-mobile #cash-pill .cash-pill__value {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff !important;
  }
  
  body.is-mobile #cash-pill .cash-pill__label {
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px !important;
  }

  /* Ensure content doesn't get hidden behind pill */
  body.is-mobile .app-main {
    padding-bottom: 100px !important;
  }
}