/* =========================================================
   CENTRAL SYNC ERP — Mobile / Responsive overrides
   Loaded AFTER style.css so it can override vendor rules.
   Breakpoints (Bootstrap 5 compatible):
     - xl: 1200px and up   (default desktop)
     - lg:  992 – 1199.98  (small desktop / tablet landscape)
     - md:  768 – 991.98   (tablet)
     - sm:  576 – 767.98   (large phone)
     - xs:  < 575.98       (phone)

   Mobile header layout (left → right, all aligned vertically):
     [🍔 hamburger] [Logo] [===== Dashboard title =====] [icons]
   ========================================================= */

html, body { overflow-x: hidden; }

/* === Off-canvas drawer (≤ lg) === */
@media (max-width: 991.98px) {
  /* Sidebar fixed off-screen until menu-toggle is added. */
  .dlabnav {
    position: fixed !important;
    top: 0 !important;
    left: -16.5rem !important;
    height: 100vh !important;
    width: 16.5rem !important;
    transition: left .3s ease;
    z-index: 1060 !important;
    margin: 0 !important;
  }
  #main-wrapper.menu-toggle .dlabnav {
    left: 0 !important;
    box-shadow: 0 0 30px rgba(0,0,0,.25);
  }

  /* Backdrop only when drawer is open. */
  #main-wrapper.menu-toggle::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1050;
  }

  /* Hide vendor's hamburger — it lives inside .nav-header and would
     appear AFTER the logo. We render our own `.mobile-menu-btn` that
     sits BEFORE the logo in the header bar. */
  .nav-header .nav-control { display: none !important; }

  /* Vendor's nav-header sits in the top-left at width 5rem on mobile.
     We override that to flow inline so the logo sits next to our
     hamburger button in the header bar. */
  .nav-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    height: var(--dz-header-height) !important;
    background-color: transparent !important;
    z-index: auto !important;
    padding-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }
  .nav-header .brand-logo {
    padding: 0 .5rem !important;
    justify-content: flex-start !important;
  }
  .nav-header .brand-title { display: none !important; }

  /* Our mobile-menu-btn lives directly BEFORE `.nav-header` in DOM.
     Position both elements absolutely inside the fixed header bar so
     they render in a clean horizontal row at the very left. */
  .mobile-menu-btn {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 3rem !important;
    height: var(--dz-header-height) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--nav-headbg, #145650) !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    z-index: 1100 !important;
  }
  .nav-header {
    position: fixed !important;
    top: 0 !important;
    left: 3rem !important;
    z-index: 1090 !important;
  }
  .mobile-menu-btn .line {
    display: block !important;
    width: 1.25rem !important;
    height: 2px !important;
    background: #fff !important;
    margin: 3px 0 !important;
    border-radius: 2px !important;
    transition: transform .25s ease, opacity .25s ease !important;
  }
  body.menu-toggle .mobile-menu-btn .line:nth-child(1) {
    transform: translateY(5px) rotate(45deg) !important;
  }
  body.menu-toggle .mobile-menu-btn .line:nth-child(2) {
    opacity: 0 !important;
  }
  body.menu-toggle .mobile-menu-btn .line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg) !important;
  }

  /* Keep the header bar above the backdrop so close-hamburger stays
     clickable while the drawer is open. */
  .header { position: fixed; top: 0; width: 100%; z-index: 1080; }

  /* Vendor's header bar is offset left by sidebar width on desktop;
     on mobile we leave space for hamburger (3rem) + logo (~5rem). */
  .header { padding-left: 8rem !important; }

  /* Content takes full width — drawer overlays, does NOT displace. */
  .content-body {
    margin-left: 0 !important;
    padding-top: var(--dz-header-height) !important; /* room for fixed header */
  }
}

/* === Tablet (md) === */
@media (max-width: 991.98px) {
  .header .header-content {
    padding-left: .75rem !important;
    padding-right: 1rem !important;
    gap: .5rem;
  }
  .header-left .dashboard_bar { font-size: 1.1rem; }
  .header-left .search-area { display: none; }
  .header-right { gap: .25rem; }
  .content-body { padding: 1rem !important; padding-top: calc(var(--dz-header-height) + 1rem) !important; }

  .erp-hero .card-body { padding: 1.25rem !important; }
  .erp-hero h2 { font-size: 1.25rem; }
  .erp-hero p  { font-size: .9rem; }
  .erp-kpi .display-6 { font-size: 1.75rem; }

  .modal-dialog { margin: .5rem; }
}

/* === Small phone (sm) === */
@media (max-width: 767.98px) {
  /* Match header height to the smaller bar at this breakpoint */
  :root { --dz-header-height: 3.75rem; }

  .header { height: 3.75rem; }
  .header .header-content {
    padding: 0 .5rem !important;
  }
  .nav-header { height: 3.75rem !important; }
  .nav-control { height: 3.75rem !important; width: 2.75rem !important; }

  .header-left { flex: 1 1 auto; display: flex; align-items: center; gap: .35rem; }
  .header-left .dashboard_bar {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
  }
  .header-right .nav-item { margin: 0 2px; }
  .header-right .nav-item .nav-link svg,
  .header-right .nav-item .nav-link img {
    width: 18px !important;
    height: 18px !important;
  }
  .chatbox { display: none; }

  /* Drawer width on phones (≤320px so it doesn't dominate) */
  #main-wrapper.menu-toggle .dlabnav {
    width: 80% !important;
    max-width: 320px;
  }

  .content-body { padding: .75rem !important; padding-top: calc(var(--dz-header-height) + .75rem) !important; }

  .card-body  { padding: .85rem !important; }
  .card-header { padding: .85rem !important; }
  .erp-hero .card-body { padding: 1rem !important; }
  .erp-hero h2 { font-size: 1.1rem; }
  .erp-hero p  { font-size: .85rem; }
  .erp-hero .btn { width: 100%; margin-bottom: .5rem; }
  .erp-kpi .display-6 { font-size: 1.5rem; }
  .erp-kpi .erp-card-title h6 { font-size: .9rem; }

  .table { font-size: .8rem; }
  .table th, .table td { padding: .35rem .4rem; white-space: nowrap; }
  .table-responsive { -webkit-overflow-scrolling: touch; }

  .btn { font-size: .8rem; padding: .35rem .6rem; }
  .form-control, .form-select { font-size: .9rem; }
  .mui-floating label { font-size: .8rem; }

  .modal-dialog { margin: 0; max-width: 100%; height: 100vh; }
  .modal-content { height: 100vh; border-radius: 0; border: 0; }
  .modal-body { overflow-y: auto; }

  .plus-box { display: none; }
  .copyright { display: none; }

  .footer .copyright p { font-size: .75rem; text-align: center; }

  .card-header .d-flex { flex-wrap: wrap; gap: .5rem; }
  .card-header h4.card-title { font-size: 1rem; }
}

/* === Extra small phones (xs) === */
@media (max-width: 575.98px) {
  .erp-page .container-fluid { padding-left: .5rem; padding-right: .5rem; }
  .erp-kpi { margin-bottom: .75rem; }
  #main-wrapper.menu-toggle .dlabnav {
    width: 100% !important;
    max-width: 100%;
  }

  .erp-hero h2 { font-size: 1rem; }
  .erp-hero p  { font-size: .8rem; }
  .display-6   { font-size: 1.35rem; }
  .card .card-title { font-size: .95rem; }
  .nav-text { font-size: .85rem; }
}

/* Cards stack with consistent mobile gap */
@media (max-width: 767.98px) {
  .row > [class*="col-"] { margin-bottom: .75rem; }
  .row > [class*="col-"]:last-child { margin-bottom: 0; }
}

/* On desktop the Jobick metismenu sidebar is already shown;
   hide our mobile helper button to avoid a double hamburger. */
@media (min-width: 992px) {
  .mobile-menu-btn { display: none !important; }
}