/* ======================================================
   APP.CSS — CLEAN APP-LEVEL FIXES
   Version: 20260610-topmenu-drawer-clean1

   Məqsəd:
   - Top menu yuxarıda sabit qalsın
   - Məzmun top menunun altına girməsin
   - Sol menyuda Dashboard üst header altında qalmasın
   - Mobil overflow qoruması qalsın
====================================================== */


/* ======================================================
   1) ROOT VARIABLES
====================================================== */

:root {
  --app-top-menu-h: 54px;
  --app-drawer-safe-top: 76px;
}

@media (max-width: 820px) {
  :root {
    --app-top-menu-h: 48px;
    --app-drawer-safe-top: 68px;
  }
}


/* ======================================================
   2) GLOBAL LAYOUT SAFETY
====================================================== */

html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  padding-top: var(--app-top-menu-h) !important;
  scroll-padding-top: calc(var(--app-top-menu-h) + 10px);
}

/* Anchor / tab keçidlərində başlıq altında gizlənməsin */
[id] {
  scroll-margin-top: calc(var(--app-top-menu-h) + 10px);
}

@media (max-width: 820px) {
  html,
  body {
    overflow-x: hidden;
  }

  body {
    position: relative;
  }

  #app,
  #main,
  .app,
  .app-root,
  .app-content,
  .page,
  .page-content {
    max-width: 100%;
    overflow-x: hidden;
  }
}


/* ======================================================
   3) TOP MENU — FIXED / STABLE
====================================================== */

:where(
  #appTopHeader,
  #topHeader,
  .app-top-header,
  .app-header,
  .top-header,
  .app-topbar,
  .topbar,
  .main-topbar,
  .top-menu,
  .orange-menu
) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  min-height: var(--app-top-menu-h) !important;
  z-index: 10000 !important;

  transform: none !important;
  translate: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Scroll zamanı JS class əlavə etsə belə menu gizlənməsin */
:where(
  #appTopHeader,
  #topHeader,
  .app-top-header,
  .app-header,
  .top-header,
  .app-topbar,
  .topbar,
  .main-topbar,
  .top-menu,
  .orange-menu
).is-hidden,
:where(
  #appTopHeader,
  #topHeader,
  .app-top-header,
  .app-header,
  .top-header,
  .app-topbar,
  .topbar,
  .main-topbar,
  .top-menu,
  .orange-menu
).hidden {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}


/* ======================================================
   4) DRAWER / TABS OVERLAY COMPATIBILITY
====================================================== */

.tabs-overlay {
  max-width: 100vw;
}

.tabs-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Drawer top header-in altında qalsın, ilk düymə gizlənməsin */
#tabsDrawer.tabs-drawer,
.tabs-drawer {
  z-index: 9999;
  max-width: 86vw;
  overflow-x: hidden;
}

#tabsDrawer.tabs-drawer {
  padding-top: var(--app-drawer-safe-top) !important;
  scroll-padding-top: var(--app-drawer-safe-top) !important;
}

#tabsDrawer.tabs-drawer.open,
#tabsDrawer.tabs-drawer.show {
  scroll-behavior: auto !important;
}

.tabs-drawer.open,
.tabs-drawer.show {
  transform: translateX(0);
}

#tabsDrawer.tabs-drawer .tab:first-child {
  margin-top: 0 !important;
}


@media (max-width: 820px) {
  .tabs-overlay {
    overflow: hidden;
  }
}