/* Platform Fonts (ERP): Aether — Plus Jakarta Sans + Arabic-friendly */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap");

:root {
  --platform-font-sans: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Bootstrap + Velzon base font */
html,
body {
  font-family: var(--platform-font-sans) !important;
}

/* Ensure Bootstrap components pick it up */
:root {
  --bs-body-font-family: var(--platform-font-sans);
}

/* Sidebar + Topbar explicit (some themes override these) */
#page-topbar,
.navbar-menu,
.app-menu {
  font-family: var(--platform-font-sans) !important;
}

/* Burger (sidebar collapse) — Uiverse-style SVG */
:root {
  --burger-line: rgba(15, 23, 42, 0.95);
}
html[data-bs-theme="dark"] {
  --burger-line: rgba(249, 249, 249, 0.92);
}

#page-topbar .burger {
  position: relative;
  width: 40px;
  height: 30px;
  background: transparent !important;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 !important;
}

/* Desktop alignment tweak (keep mobile as-is) */
@media (min-width: 992px) {
  #page-topbar .burger {
    transform: none;
    height: 70px;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* SVG hamburger (3 lines => dashed lines that animate to X) */
#page-topbar .burger svg {
  height: 3em;
  width: 3em;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

#page-topbar .burger .line {
  fill: none;
  stroke: var(--burger-line);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition:
    stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* initial dash for top/bottom */
#page-topbar .burger .line-top-bottom {
  stroke-dasharray: 12 63;
}

/* JS-driven state (superadmin/legacy topbars): app.js toggles .hamburger-icon.open */
#page-topbar #topnav-hamburger-icon .hamburger-icon.open svg {
  transform: rotate(-45deg);
}
#page-topbar #topnav-hamburger-icon .hamburger-icon.open .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

/* Staff/business toggle path uses aria-expanded on the same SVG button */
#page-topbar #topnav-hamburger-icon[aria-expanded="true"] svg {
  transform: rotate(-45deg);
}
#page-topbar #topnav-hamburger-icon[aria-expanded="true"] .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

/* animate => X when sidebar is open */
@media (max-width: 1199.98px) {
  /* On tablet/mobile: open = checkbox checked */
  #sidebar-toggle:checked ~ #layout-wrapper #topnav-hamburger-icon svg {
    transform: rotate(-45deg);
  }
  #sidebar-toggle:checked ~ #layout-wrapper #topnav-hamburger-icon svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
  }
}

@media (min-width: 1200px) {
  /* On desktop: open = checkbox NOT checked (mini = checked) */
  #sidebar-toggle:not(:checked) ~ #layout-wrapper #topnav-hamburger-icon svg {
    transform: rotate(-45deg);
  }
  #sidebar-toggle:not(:checked) ~ #layout-wrapper #topnav-hamburger-icon svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
  }
}

/* Slightly improve Arabic readability */
html[lang^="ar"] body,
html[dir="rtl"] body {
  letter-spacing: 0;
}