/* ==========================================================================
   Bluecake OS v2.4 - Responsive System CSS
   Full mobile / tablet / desktop RTL Arabic UI
   Breakpoints: xs<576 | sm 576-767 | md 768-991 | lg 992-1199 | xl>=1200
   ========================================================================== */

/* 1. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
body { overflow-x: hidden; }

/* 2. App Layout ============================================================ */
@media (max-width: 991.98px) {
  #layout-wrapper { display: flex; flex-direction: column; }
  .app-header {
    position: fixed !important; top: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important; z-index: 1050 !important; padding: 0 12px !important;
  }
  .app-header .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
  .app-wrapper, main.app-wrapper {
    margin-left: 0 !important; margin-right: 0 !important;
    margin-inline-start: 0 !important;
    padding-top: calc(var(--pe-app-header-height, 70px) + 12px) !important;
    padding-left: 12px !important; padding-right: 12px !important;
    width: 100% !important; min-width: 0 !important;
  }
  .app-menu, #sidebar-wrapper, .vertical-menu {
    position: fixed !important; top: 0 !important; bottom: 0 !important;
    z-index: 1060 !important;
    transform: translateX(100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    overflow-y: auto !important;
  }
  [dir="ltr"] .app-menu, [dir="ltr"] .vertical-menu { transform: translateX(-100%) !important; }
  .app-menu.sidebar-open, .vertical-menu.sidebar-open,
  body.sidebar-open .app-menu, body.sidebar-open .vertical-menu { transform: translateX(0) !important; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 1059;
    opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
  }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: all; }
  footer.bc-global-footer, .bc-global-footer {
    margin-left: 0 !important; margin-right: 0 !important; width: 100% !important;
  }
  .app-menu, .vertical-menu { width: 280px !important; max-width: 85vw !important; }
  .navbar-nav .nav-link, #side-menu li a, .side-nav .side-nav-link {
    padding: 12px 16px !important; font-size: 0.9375rem !important;
    min-height: 48px !important; display: flex !important; align-items: center !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .app-wrapper, main.app-wrapper { padding-left: 20px !important; padding-right: 20px !important; }
}

/* 3. Header ================================================================ */
@media (max-width: 575.98px) {
  .app-header .container-fluid > .d-flex { gap: 8px !important; }
  .dropdown-mega-md.header-dropdown-menu, .pe-noti-dropdown-menu {
    width: 100vw !important; max-width: 100vw !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 4px !important; border-radius: 12px 12px 0 0 !important;
  }
}

@media (max-width: 767.98px) {
  .app-header h4 { font-size: 0.875rem !important; }
  .dark-mode-btn { gap: 2px !important; }
  .dark-mode-btn .btn { padding: 0.3rem 0.45rem !important; font-size: 0.875rem !important; }
}

/* 4. Page Content ========================================================== */
@media (max-width: 575.98px) {
  .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
  .bc-page-header {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 0.5rem !important; margin-bottom: 1rem !important;
  }
  .bc-page-title { font-size: 1.1rem !important; }
}

@media (max-width: 767.98px) {
  .bc-page-header .d-flex { flex-wrap: wrap !important; gap: 0.5rem !important; }
  .page-title-box { padding: 10px 0 !important; }
  .page-title-box h4 { font-size: 1rem !important; }
  .row.g-3 > .col-xl-3, .row.g-3 > .col-lg-3 { flex: 0 0 50% !important; max-width: 50% !important; }
  .row.g-3 > .col-xl-4, .row.g-3 > .col-lg-4 { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* 5. Cards & Stats ========================================================= */
@media (max-width: 575.98px) {
  .bc-card-body { padding: 0.875rem !important; }
  .bc-card-header { padding: 0.75rem 0.875rem !important; flex-wrap: wrap !important; gap: 0.5rem !important; }
  .stat-card-v2 { padding: 0.875rem !important; }
  .stat-value { font-size: 1.35rem !important; }
  .stat-label { font-size: 0.75rem !important; }
  .stat-card-icon-box { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
  .action-card-v2 { padding: 0.75rem !important; }
}

/* 6. Tables ================================================================ */
@media (max-width: 767.98px) {
  .table-responsive, .bc-table-wrap {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    border-radius: var(--bc-radius-md, 10px) !important;
  }
  table.table { min-width: 600px; }
  .table td, .table th { font-size: 0.8125rem !important; padding: 0.5rem 0.75rem !important; white-space: nowrap !important; }
  .table .btn-sm { padding: 0.25rem 0.4rem !important; font-size: 0.75rem !important; }
}

/* 7. Forms & Modals ======================================================== */
@media (max-width: 575.98px) {
  .modal-dialog { margin: 0 !important; max-width: 100% !important; height: 100dvh !important; }
  .modal-content { height: 100% !important; border-radius: 0 !important; }
  .modal-dialog.modal-lg, .modal-dialog.modal-xl {
    max-width: 100% !important; width: 100% !important; margin: 0 !important;
  }
  .dropdown-menu {
    position: fixed !important; left: 8px !important; right: 8px !important;
    width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important;
    margin: 0 !important; border-radius: 12px !important; z-index: 1100 !important;
  }
  .dropdown-item {
    padding: 0.6rem 1rem !important; font-size: 0.875rem !important;
    min-height: 44px !important; display: flex !important; align-items: center !important;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .modal-dialog { max-width: 95% !important; margin: 1rem auto !important; height: auto !important; }
  .modal-content { height: auto !important; border-radius: var(--bc-radius-lg, 16px) !important; }
}

@media (max-width: 767.98px) {
  .form-control, .form-select, .input-group { font-size: 0.875rem !important; }
  .form-row-actions { flex-direction: column !important; gap: 0.5rem !important; }
  .form-row-actions .btn { width: 100% !important; justify-content: center !important; }
}

/* 8. POS Terminal ========================================================== */
@media (max-width: 991.98px) {
  .pos-layout-grid, .pos-terminal-container { flex-direction: column !important; gap: 0.75rem !important; }
  .pos-product-grid { max-height: 55vh !important; overflow-y: auto !important; }
  .pos-cart-panel {
    position: sticky !important; bottom: 0 !important; z-index: 100 !important;
    background-color: var(--bc-card-bg, #fff) !important;
    border-top: 1px solid var(--bc-border-subtle) !important;
    padding: 0.75rem !important; max-height: 45vh !important; overflow-y: auto !important;
  }
}

@media (max-width: 575.98px) {
  .pos-products-grid .row > [class*="col-"] { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* 9. Nav Tabs ============================================================== */
@media (max-width: 767.98px) {
  .bc-nav-tabs, .nav-tabs {
    flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important;
    -ms-overflow-style: none !important; gap: 0 !important; padding-bottom: 2px !important;
  }
  .bc-nav-tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none !important; }
  .bc-nav-tab, .nav-link {
    white-space: nowrap !important; font-size: 0.8125rem !important;
    padding: 0.5rem 0.75rem !important; flex-shrink: 0 !important;
  }
}

/* 10. Buttons ============================================================== */
@media (max-width: 767.98px) {
  .btn { min-height: 36px !important; min-width: 36px !important; }
  .bc-action-btn-row { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; }
  .bc-action-btn-row .btn { width: 100% !important; }
}

/* 11. CRM Pipeline ========================================================= */
@media (max-width: 575.98px) {
  .bc-safe-card-grid { grid-template-columns: 1fr !important; }
  .bc-contact-cards-grid { grid-template-columns: 1fr !important; }
  .bc-pipeline-board {
    overflow-x: auto !important; display: flex !important;
    gap: 0.75rem !important; padding-bottom: 1rem !important;
  }
  .bc-pipeline-column { min-width: 240px !important; flex-shrink: 0 !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .bc-contact-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 12. Typography =========================================================== */
@media (max-width: 575.98px) {
  h1, .h1 { font-size: 1.5rem !important; }
  h2, .h2 { font-size: 1.25rem !important; }
  h3, .h3 { font-size: 1.1rem !important; }
  h4, .h4 { font-size: 1rem !important; }
  h5, .h5 { font-size: 0.9375rem !important; }
  h6, .h6 { font-size: 0.875rem !important; }
  p { font-size: 0.8125rem !important; }
}

/* 13. Dashboard ============================================================ */
@media (max-width: 575.98px) {
  .apexcharts-canvas, .bc-chart-wrap { max-width: 100% !important; overflow: hidden !important; }
  .bc-welcome-banner { padding: 1rem !important; text-align: center !important; }
  .bc-welcome-banner h3 { font-size: 1rem !important; }
}

/* 14. Toasts =============================================================== */
@media (max-width: 575.98px) {
  .toast-container {
    left: 8px !important; right: 8px !important; bottom: 8px !important;
    width: calc(100vw - 16px) !important; max-width: 100% !important;
  }
  .toast { width: 100% !important; max-width: 100% !important; }
}

/* 15. Invoice & Reports ==================================================== */
@media (max-width: 767.98px) {
  .bc-invoice-container, .bc-report-card { padding: 1rem !important; font-size: 0.8125rem !important; }
  .bc-invoice-header { flex-direction: column !important; gap: 0.75rem !important; }
  .bc-invoice-logo { max-width: 120px !important; }
}

/* 16. Ultra-Wide =========================================================== */
@media (min-width: 1400px) {
  main.app-wrapper .container-fluid { max-width: 1600px; margin-left: auto; margin-right: auto; }
}

/* 17. Utilities ============================================================ */
@media (max-width: 767.98px) {
  .d-mobile-none { display: none !important; }
  .d-mobile-block { display: block !important; }
  .d-mobile-flex { display: flex !important; }
  .text-mobile-center { text-align: center !important; }
  .text-mobile-start { text-align: start !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .d-tablet-none { display: none !important; }
  .d-tablet-block { display: block !important; }
}

/* 18. Touch Scroll ========================================================= */
.table-responsive, .bc-nav-tabs, .bc-pipeline-board,
.pos-product-grid, .modal-body, .bc-drawer-body {
  -webkit-overflow-scrolling: touch;
}

/* 19. Print ================================================================ */
@media print {
  .app-header, .app-menu, .vertical-menu, .sidebar-backdrop,
  .bc-global-footer, .btn-print-hide, .no-print { display: none !important; }
  .app-wrapper, main.app-wrapper { margin: 0 !important; padding: 0 !important; width: 100% !important; }
  body { font-size: 11pt !important; color: #000 !important; background: #fff !important; }
  .bc-card, .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid !important; }
  table { page-break-inside: avoid !important; }
}

/* ==========================================================================
   Footer Responsive Fix — Sidebar Margin Override
   ========================================================================== */

/* Desktop: Footer follows sidebar width just like app-wrapper */
@media (min-width: 992px) {
  [dir="rtl"] footer.bc-global-footer,
  [dir="rtl"] .footer.bc-global-footer {
    margin-right: var(--pe-app-sidebar-width, 250px) !important;
    margin-left: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    transition: margin-right 240ms cubic-bezier(0.4,0,0.2,1) !important;
  }

  [dir="ltr"] footer.bc-global-footer,
  [dir="ltr"] .footer.bc-global-footer {
    margin-left: var(--pe-app-sidebar-width, 250px) !important;
    margin-right: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    transition: margin-left 240ms cubic-bezier(0.4,0,0.2,1) !important;
  }

  /* When sidebar is collapsed/icon-only */
  body[data-sidebar="icon"] [dir="rtl"] footer.bc-global-footer,
  body[data-sidebar="icon"] [dir="rtl"] .footer.bc-global-footer {
    margin-right: var(--pe-app-sidebar-collapsed-width, 70px) !important;
  }

  body[data-sidebar="icon"] [dir="ltr"] footer.bc-global-footer,
  body[data-sidebar="icon"] [dir="ltr"] .footer.bc-global-footer {
    margin-left: var(--pe-app-sidebar-collapsed-width, 70px) !important;
  }
}

/* Mobile/Tablet: Footer must be full width — zero sidebar margin */
@media (max-width: 991.98px) {
  footer.bc-global-footer,
  .footer.bc-global-footer,
  .bc-global-footer {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 2.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Compact footer columns on mobile: stack to 2-col then 1-col */
  footer.bc-global-footer .col-12.col-md-6.col-lg-4,
  footer.bc-global-footer .col-12.col-md-6.col-lg-3 {
    padding-bottom: 1rem !important;
  }
}

@media (max-width: 575.98px) {
  footer.bc-global-footer,
  .footer.bc-global-footer {
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
  }

  /* Copyright bar: stack vertically on phones */
  footer.bc-global-footer .d-flex.flex-column.flex-md-row {
    text-align: center !important;
    gap: 0.5rem !important;
  }

  /* Social icons: center on mobile */
  footer.bc-global-footer .d-flex.align-items-center.gap-2.flex-wrap {
    justify-content: center !important;
  }

  /* Reduce footer top padding when footer overflows */
  footer.bc-global-footer .container-fluid {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ==========================================================================
   SIDEBAR SCROLL — DEFINITIVE FIX
   Forces the sidebar nav to scroll vertically with a visible scrollbar
   ========================================================================== */

/* Make the <aside> a fixed-height flex column */
.pe-app-sidebar,
#sidebar,
aside.pe-app-sidebar {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100vh !important;
}

/* Logo header: never scroll */
.pe-app-sidebar .pe-app-sidebar-logo,
#sidebar .pe-app-sidebar-logo {
  flex: 0 0 auto !important;
  min-height: 64px !important;
  overflow: hidden !important;
}

/* Nav menu: fills remaining height and scrolls */
.pe-app-sidebar nav.pe-app-sidebar-menu,
.pe-app-sidebar #sidebar-simplebar,
#sidebar nav.pe-app-sidebar-menu,
#sidebar #sidebar-simplebar {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  
  /* Native scrollbar style */
  scrollbar-width: thin !important;
  scrollbar-color: rgba(0, 92, 184, 0.4) transparent !important;
}

/* WebKit scrollbar (Chrome, Safari, Edge) */
.pe-app-sidebar nav.pe-app-sidebar-menu::-webkit-scrollbar,
#sidebar nav.pe-app-sidebar-menu::-webkit-scrollbar {
  width: 4px !important;
}

.pe-app-sidebar nav.pe-app-sidebar-menu::-webkit-scrollbar-track,
#sidebar nav.pe-app-sidebar-menu::-webkit-scrollbar-track {
  background: transparent !important;
}

.pe-app-sidebar nav.pe-app-sidebar-menu::-webkit-scrollbar-thumb,
#sidebar nav.pe-app-sidebar-menu::-webkit-scrollbar-thumb {
  background-color: rgba(0, 92, 184, 0.35) !important;
  border-radius: 4px !important;
}

.pe-app-sidebar nav.pe-app-sidebar-menu::-webkit-scrollbar-thumb:hover,
#sidebar nav.pe-app-sidebar-menu::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 92, 184, 0.6) !important;
}

/* Simplebar overrides (if simplebar is initialized) */
.pe-app-sidebar .simplebar-content-wrapper,
#sidebar .simplebar-content-wrapper {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  height: 100% !important;
}

.pe-app-sidebar .simplebar-track.simplebar-vertical,
#sidebar .simplebar-track.simplebar-vertical {
  right: 2px !important;
  left: auto !important;
  width: 6px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

[dir="rtl"] .pe-app-sidebar .simplebar-track.simplebar-vertical,
[dir="rtl"] #sidebar .simplebar-track.simplebar-vertical {
  right: auto !important;
  left: 2px !important;
}

.pe-app-sidebar .simplebar-scrollbar::before,
#sidebar .simplebar-scrollbar::before {
  background: rgba(0, 92, 184, 0.45) !important;
  border-radius: 4px !important;
  opacity: 1 !important;
}

/* Dark mode scrollbar */
[data-bs-theme="dark"] .pe-app-sidebar .simplebar-scrollbar::before,
[data-bs-theme="dark"] #sidebar .simplebar-scrollbar::before {
  background: rgba(99, 155, 255, 0.4) !important;
}

[data-bs-theme="dark"] .pe-app-sidebar nav.pe-app-sidebar-menu,
[data-bs-theme="dark"] #sidebar nav.pe-app-sidebar-menu {
  scrollbar-color: rgba(99, 155, 255, 0.4) transparent !important;
}

/* ==========================================================================
   SIDEBAR SCROLL — FINAL CLEAN FIX (no UI changes)
   Only adds scroll to the nav menu area. Logo stays fixed.
   ========================================================================== */

/* 1. The aside: full viewport height, flex column */
.pe-app-sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* 2. Logo area: fixed, never scrolls */
.pe-app-sidebar .pe-app-sidebar-logo {
  flex-shrink: 0 !important;
}

/* 3. Nav menu: takes remaining height and scrolls */
.pe-app-sidebar nav.pe-app-sidebar-menu {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  /* Hide scrollbar visually but keep functionality */
  scrollbar-width: none !important;      /* Firefox */
  -ms-overflow-style: none !important;   /* IE/Edge */
}

/* Hide WebKit scrollbar */
.pe-app-sidebar nav.pe-app-sidebar-menu::-webkit-scrollbar {
  display: none !important;
}

/* Mobile: use dvh for better viewport handling */
@media (max-width: 991.98px) {
  .pe-app-sidebar {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* ==========================================================================
   Profile Dropdown — Scrollable Menu Body (sections 3-5)
   Fixed: company info + business center button
   Scrollable: management tools + support + logout
   ========================================================================== */

/* The dropdown has max-height. Make it flex only when open so it stays hidden when closed */
.dropdown-menu.show:has(.bc-dropdown-scroll-body) {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(90vh, 600px) !important;
  overflow: hidden !important;
}

/* Fallback for browsers without :has() support */
.bc-dropdown-scroll-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;   /* iOS momentum scroll */
  flex: 1 1 auto !important;
  min-height: 0 !important;

  /* Hide scrollbar visually, keep functionality */
  scrollbar-width: none !important;              /* Firefox */
  -ms-overflow-style: none !important;           /* IE/Edge */
}

/* Hide WebKit scrollbar */
.bc-dropdown-scroll-body::-webkit-scrollbar {
  display: none !important;
}