/* =========================================================
   1. GLOBAL LAYOUT & SIDEBAR STRUCTURE
   - Essential layout logic for fixed sidebar
   ========================================================= */

body.d-flex > .flex-fill {
  min-width: 0;
}

:root {
  /* Central theme tokens: update these values to retheme pages extending base.html */
  --sidebar-width: 200px;
  --mobile-nav-height: 2.5rem;
  --mobile-icon-width: 36px;
  --mobile-icon-height: 34px;

  /* Legacy Purple ERP Theme */
  --theme-primary: #5D3F6A;
  --theme-primary-hover: #6B4A79;
  --theme-primary-active: #7A568B;
  --theme-primary-deep: #4A3055;
  --theme-primary-rgb: 93, 63, 106;
  --theme-on-primary: #FFFFFF;

  --theme-bg: #F8F5FB;
  --theme-surface: #FFFFFF;
  --theme-text: #2E2A34;
  --theme-muted: #6F637C;
  --theme-accent: #F2CD13;
  --theme-line: rgba(74, 48, 85, 0.16);

  --glass-bg: rgba(255, 255, 255, 0.14);
  --glass-bg-strong: rgba(255, 255, 255, 0.22);
  --glass-border: rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 10px 24px rgba(74, 48, 85, 0.15);
}

body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text) !important;
  min-height: 100vh;
}

/* Desktop: Sidebar fixed at 200px */
@media (min-width: 768px) {
  body.d-flex > .flex-fill {
    margin-left: var(--sidebar-width);
    margin-right: 0;
  }

  [dir="rtl"] body.d-flex > .flex-fill {
    margin-left: 0;
    margin-right: var(--sidebar-width);
  }
}

/* Mobile: Full width content */
@media (max-width: 767.98px) {
  body.d-flex > .flex-fill {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   2. SIDEBAR STYLING
   - Colors, Nav-links, and Sub-menu logic
   - MODIFIED: Balanced Sub-menu Spacing (Middle Ground)
   ========================================================= */

#sidebar, 
.offcanvas-body {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--theme-primary-hover);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1000;
  overflow-y: auto;
  scrollbar-width: none;
  font-size: 0.9rem !important;
}

/* Body state for popup/modal pages that intentionally hide sidebar spacing. */
.modal-mode {
  overflow-x: hidden;
  background-color: #fff;
}

@media (min-width: 768px) {
  .modal-mode.d-flex > .flex-fill {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [dir="rtl"] .modal-mode.d-flex > .flex-fill {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.sidebar-offcanvas {
  --bs-offcanvas-width: var(--sidebar-width);
  overflow-y: auto;
  overflow-x: hidden;
}

[dir="rtl"] #sidebar,
[dir="rtl"] .offcanvas-body {
  left: auto;
  right: 0;
}

#sidebar .nav,
.offcanvas-body .nav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

#sidebar::-webkit-scrollbar { width: 0; height: 0; }

#sidebar .nav-link,
.offcanvas-body .nav-link {
  color: rgba(255, 255, 255, 0.98);
  padding: 0.45rem 1rem; /* Parent vertical padding */
  margin-bottom: 2px;
  border-radius: .45rem;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

#sidebar .nav-link[data-bs-toggle="collapse"],
.offcanvas-body .nav-link[data-bs-toggle="collapse"] {
  justify-content: space-between;
}

#sidebar .nav-link:hover,
.offcanvas-body .nav-link:hover {
  background-color: color-mix(in srgb, var(--theme-primary-hover) 70%, transparent);
}

#sidebar .nav-link.active,
.offcanvas-body .nav-link.active {
  background-color: color-mix(in srgb, var(--theme-primary-active) 74%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.nav-link .submenu-arrow {
  transition: transform 0.3s ease !important;
  transform: rotate(0deg); 
}

[dir="ltr"] .nav-link:not(.collapsed) .submenu-arrow {
  transform: rotate(-90deg); 
}

[dir="rtl"] .nav-link .submenu-arrow {
  transform: rotate(180deg); 
}
[dir="rtl"] .nav-link:not(.collapsed) .submenu-arrow {
  transform: rotate(90deg); 
}

/* --- SUB-MENU ITEM OVERRIDES --- */
#sidebar .sidebar-submenu,
.offcanvas-body .sidebar-submenu {
  margin: 2px 0.35rem 0.25rem 0.35rem;
  padding-left: 0.1rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

#sidebar .collapse .nav-link,
#sidebar .collapsing .nav-link,
.offcanvas-body .collapse .nav-link,
.offcanvas-body .collapsing .nav-link {
  /* Balanced vertical spacing: 0.35rem is the middle ground between 0.25 and 0.45 */
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  margin-bottom: 1px !important; /* Tiny gap to prevent a "wall of text" look */
  
  padding-left: 0.6rem !important;
  padding-right: 1rem !important;
  opacity: 0.9;
  position: relative;
  justify-content: flex-start !important;
  transition: background-color 0.25s ease !important;
}

#sidebar .sidebar-submenu .nav-link,
.offcanvas-body .sidebar-submenu .nav-link {
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.86rem;
  border-radius: 0.35rem;
  background-color: rgba(255, 255, 255, 0.04);
}

#sidebar .sidebar-submenu .nav-link:hover,
.offcanvas-body .sidebar-submenu .nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
}

#sidebar .sidebar-submenu .nav-link.active,
.offcanvas-body .sidebar-submenu .nav-link.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

[dir="rtl"] #sidebar .collapse .nav-link,
[dir="rtl"] .offcanvas-body .collapse .nav-link {
  padding-left: 1rem !important;
  padding-right: 1.25rem !important;
  text-align: right;
}

[dir="rtl"] #sidebar .sidebar-submenu,
[dir="rtl"] .offcanvas-body .sidebar-submenu {
  padding-left: 0;
  padding-right: 0.35rem;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

/* =========================================================
   3. SIDEBAR COMPONENTS
   - Logo and Mobile Close Button
   - DO NOT ALTER
   ========================================================= */

.sidebar-logo-wide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 30px);
  max-width: 170px;
  padding: 8px 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sidebar-logo-wide img {
  width: 100%;
  max-height: 38px;
  object-fit: contain;
}

.btn-close-sidebar {
  position: absolute;
  top: 10px;
  left: var(--sidebar-width);
  width: 32px;
  height: 32px;
  background: var(--glass-bg-strong);
  color: var(--theme-on-primary);
  border: 1px solid var(--glass-border);
  border-radius: 0 6px 6px 0; 
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1060; 
  padding: 0;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.2s ease;
}

[dir="rtl"] .btn-close-sidebar {
  left: auto;
  right: var(--sidebar-width); 
  border-radius: 6px 0 0 6px;
  box-shadow: -6px 10px 24px rgba(20, 14, 24, 0.2);
}

.mobile-topbar {
  height: var(--mobile-nav-height);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
  border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.12);
  z-index: 1001;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mobile-center-icons {
  top: 50%;
  transform: translate(-50%, -50%) !important;
  z-index: 1020;
}

.mobile-icon-btn,
.mobile-brand-btn {
  border: 1px solid rgba(var(--theme-primary-rgb), 0.18) !important;
  background-color: var(--glass-bg-strong) !important;
  box-shadow: 0 6px 14px rgba(17, 36, 59, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mobile-icon-btn {
  width: var(--mobile-icon-width);
  height: var(--mobile-icon-height);
  padding: 0;
}

.mobile-brand-btn {
  height: var(--mobile-icon-height);
}

.mobile-icon-btn i {
  color: var(--theme-primary);
}

#sidebar .nav-link:focus-visible,
.offcanvas-body .nav-link:focus-visible,
.mobile-topbar .btn:focus-visible,
.btn-close-sidebar:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .btn-close-sidebar { display: none; }
}


/* =========================================================
   4. SELECT2 INTEGRATION
   - Matches Bootstrap .form-control-sm / table-sm text size
   - Reverted to default color scheme
   ========================================================= */

/* Main Selection Box */
.select2-container--default .select2-selection--single {
  font-size: .875rem !important; 
  line-height: 1.5 !important;
  padding: .25rem .5rem !important;
  border-radius: .2rem !important;
  height: auto !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 1.5em !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Search Field inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-size: .875rem !important;
  padding: .25rem .5rem !important;
  border-radius: .2rem !important;
}

/* --- THE DROPDOWN OPTIONS LIST --- */
.select2-container--default .select2-results__option {
  font-size: .875rem !important; /* Exact match to table text */
  padding: .4rem .75rem !important; /* Spacious vertical padding */
  line-height: 1.5 !important;
}


/* =========================================================
   5. MOBILE SPECIFIC UI
   - Only essential overrides for scaling and layout fixes
   ========================================================= */

@media (max-width: 767.98px) {
  .app-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .app-main > .container,
  .app-main > .container-fluid {
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
  }

  /* 1. Tighten the Outer Container */
  .container-fluid {
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
  }

  /* 2. Remove extra space in Rows (Gutters) */
  .row {
    --bs-gutter-x: 0.5rem !important; /* Reduces horizontal gap between columns */
  }

  /* 3. Compact the Card Structure */
  .card-header {
    padding: 0.45rem !important;     /* Slightly tighter header spacing */
  }
  
  .card-body {
    padding: 0 !important;           /* Let the table touch the card edges */
  }

  /* 4. Typography Scaling */
  body, table, th, td, .offcanvas-body { 
    font-size: 0.85rem !important; 
  }

  .card-header, .card-title, .info-text { 
    font-size: 0.9rem !important; 
  }

  .btn,
  .form-control,
  .form-select,
  .input-group-text,
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-search--dropdown .select2-search__field,
  .select2-container--default .select2-results__option {
    font-size: 0.85rem !important;
  }

  .btn,
  .form-control,
  .form-select,
  .select2-container--default .select2-selection--single {
    min-height: 32px;
  }

  /* 5. Compact Mobile Navbar (40px) */
  .navbar.d-md-none, 
  .mobile-nav-logo {
    height: var(--mobile-nav-height) !important;
    min-height: var(--mobile-nav-height) !important;
    padding: 0 !important;
  }

  /* 6. Prevent Table Wrapping (Force Horizontal Scroll) */
  .table-responsive > .table {
    white-space: nowrap !important; 
  }

  /* 7. Footer Section Lift (Mobile Notch/Safe Area Fix) */
  #sidebar .mt-auto,
  .offcanvas-body .mt-auto {
    padding-bottom: calc(3rem + env(safe-area-inset-bottom)) !important;
    background-color: var(--theme-primary);
  }
}

/* =========================================================
   6. BUSY LOADER OVERLAY
   ========================================================= */

#busyLoaderModal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.busyLoaderBackdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.busyLoaderContent {
  position: relative;
  z-index: 2;
  text-align: center;
}