/* ── Zen App Shell: left sidebar + top bar layout ─────────────────
   Loaded by header2.php for main Zen. Zen Central is a separate app and does not use this menu/shell. */
[v-cloak] { display: none !important; }

/* .zenheader wraps #zen-shell + #zen-main for pages that set enablezenheaderwrapper; it is not the top bar.
   As a normal block it stretches to full content height and breaks scripts that use $('.zenheader').outerHeight().
   display:contents removes the wrapper from the box tree so only #zen-shell (fixed chrome) and #zen-main matter. */
body.zen-vue-shell .zenheader {
  display: contents;
}

:root {
  --zen-sidebar-width: 240px;
  --zen-sidebar-collapsed: 52px;
  --zen-topbar-height: 48px;
  --zen-sidebar-bg: #1e293b;
  --zen-sidebar-hover: #334155;
  --zen-sidebar-active: #0ea5e9;
  --zen-sidebar-text: #cbd5e1;
  --zen-sidebar-text-active: #fff;
  --zen-topbar-bg: #00aeec;
  --zen-topbar-text: #ffffff;
}

/* ── Top bar ──────────────────────────────────────────────────── */
.zen-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--zen-topbar-height);
  background: var(--zen-topbar-bg);
  color: var(--zen-topbar-text);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1040;
  gap: 12px;
}

.zen-topbar-logo img { height: 28px; width: auto; }
.zen-topbar-spacer { flex: 1; }

.zen-topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--zen-topbar-text);
  position: relative;
}

.zen-topbar-user-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.15);
  color: var(--zen-topbar-text);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
}
.zen-topbar-user-btn:hover { background: rgba(255,255,255,.08); }

.zen-topbar-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  min-width: 200px;
  overflow: hidden;
  z-index: 1060;
}
.zen-topbar-dropdown a {
  display: block;
  padding: 10px 16px;
  color: #334155;
  text-decoration: none;
  font-size: 13px;
  transition: background .1s;
}
.zen-topbar-dropdown a:hover { background: #f1f5f9; }
.zen-topbar-dropdown a.zen-logout { color: #ef4444; }

/* ── Sidebar: icon rail (default collapsed) ───────────────────── */
.zen-sidebar {
  position: fixed;
  top: var(--zen-topbar-height);
  left: 0;
  bottom: 0;
  width: var(--zen-sidebar-collapsed);
  background: var(--zen-sidebar-bg);
  overflow: visible;
  z-index: 1030;
  transition: width .18s ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.zen-sidebar::-webkit-scrollbar { width: 4px; }
.zen-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

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

.zen-sidebar-nav { padding: 4px 0; }
.zen-sidebar-group { margin-bottom: 0; }

/* ── Sidebar items ────────────────────────────────────────────── */
.zen-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  padding-left: 14px;
  padding-right: 8px;
  color: var(--zen-sidebar-text);
  text-decoration: none;
  font-size: 13px;
  border-radius: 0;
  margin: 0;
  transition: background .12s, color .12s;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.3;
  position: relative;
}
.zen-sidebar-item:hover {
  background: var(--zen-sidebar-hover);
  color: #fff;
  text-decoration: none;
}
.zen-sidebar-item.active {
  color: var(--zen-sidebar-text-active);
}

.zen-sidebar-item i,
.zen-sidebar-item .zen-icons-wrap {
  font-size: 18px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.zen-sidebar-item .zen-icons {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  filter: brightness(0) invert(.75);
}
.zen-sidebar-item.active .zen-icons { filter: brightness(0) invert(1); }

/* Label text — hidden when collapsed */
.zen-sidebar-label {
  opacity: 0;
  transition: opacity .12s ease;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zen-sidebar.expanded .zen-sidebar-label {
  opacity: 1;
}

/* Parent items */
.zen-sidebar-parent {
  font-weight: 600;
  font-size: 13px;
}

/* Active indicator pip — visible when collapsed */
.zen-sidebar-parent .zen-active-pip {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 2px;
  background: var(--zen-sidebar-active);
  opacity: 0;
  transition: opacity .15s;
}
.zen-sidebar:not(.expanded) .zen-sidebar-parent.has-active-child .zen-active-pip {
  opacity: 1;
}

.zen-sidebar-toggle-icon {
  margin-left: auto;
  font-size: 10px;
  transition: transform .2s, opacity .12s;
  flex-shrink: 0;
  opacity: 0;
}
.zen-sidebar.expanded .zen-sidebar-toggle-icon { opacity: 1; }
.zen-sidebar-toggle-icon.open { transform: rotate(90deg); }

/* ── Children: hidden when collapsed ──────────────────────────── */
.zen-sidebar-children {
  overflow: hidden;
  max-height: 0;
  transition: max-height .2s ease;
}
.zen-sidebar.expanded .zen-sidebar-children.open {
  /* Viewport-based cap so long Profile submenus scroll instead of clipping at a fixed 600px. */
  max-height: max(0px, calc(100vh - var(--zen-topbar-height) - 100px));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.zen-sidebar.expanded .zen-sidebar-children.open::-webkit-scrollbar { width: 4px; }
.zen-sidebar.expanded .zen-sidebar-children.open::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 2px;
}

.zen-sidebar-child {
  padding-left: 46px;
  font-size: 12px;
  font-weight: 400;
  padding-top: 6px;
  padding-bottom: 6px;
}
.zen-sidebar-child.active {
  background: rgba(14,165,233,.12);
  color: var(--zen-sidebar-text-active);
}

.zen-sidebar-warn {
  color: #fbbf24;
  margin-left: 4px;
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Collapsed: tooltip on hover ──────────────────────────────── */
.zen-sidebar-tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 1031;
}
.zen-sidebar:not(.expanded) .zen-sidebar-parent:hover .zen-sidebar-tooltip {
  opacity: 1;
}

/* ── Pin + Search row ─────────────────────────────────────────── */
.zen-sidebar-pin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 10px 2px;
  opacity: 0;
  transition: opacity .12s;
}
.zen-sidebar.expanded .zen-sidebar-pin { opacity: 1; }
.zen-sidebar-pin > button {
  background: none;
  border: none;
  color: var(--zen-sidebar-text);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.zen-sidebar-pin > button:hover { background: var(--zen-sidebar-hover); color: #fff; }
.zen-sidebar-pin > button.pinned { color: var(--zen-sidebar-active); }

/* Search box */
.zen-sidebar-search {
  flex: 1;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.08);
  border-radius: 5px;
  padding: 3px 7px;
  gap: 5px;
  min-width: 0;
  border: 1px solid transparent;
  transition: border-color .12s, background .12s;
}
.zen-sidebar-search:focus-within {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
}
.zen-sidebar-search-icon {
  font-size: 11px;
  color: rgba(203,213,225,.6);
  flex-shrink: 0;
}
.zen-sidebar-search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--zen-sidebar-text);
  font-size: 12px;
  width: 100%;
  min-width: 0;
  padding: 0;
  line-height: 1.4;
}
.zen-sidebar-search-input::placeholder { color: rgba(203,213,225,.4); }
.zen-sidebar-search-clear {
  background: none;
  border: none;
  color: rgba(203,213,225,.5);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}
.zen-sidebar-search-clear:hover { color: #fff; }
.zen-sidebar-no-results {
  padding: 10px 14px;
  color: rgba(203,213,225,.5);
  font-size: 12px;
  font-style: italic;
}

/* ── Main content area ────────────────────────────────────────── */
.zen-main-content {
  margin-left: var(--zen-sidebar-collapsed);
  margin-top: var(--zen-topbar-height);
  min-height: calc(100vh - var(--zen-topbar-height));
  transition: margin-left .18s ease;
}
.zen-main-content.sidebar-pinned {
  margin-left: var(--zen-sidebar-width);
}

.zen-main-content > .container-fluid { padding-left: 15px; padding-right: 15px; }

/* ── Mobile drawer ────────────────────────────────────────────── */
.zen-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1029;
}

.zen-hamburger {
  background: none;
  border: none;
  color: var(--zen-topbar-text);
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  display: none;
}
.zen-mobile-only { display: none; }
@media (max-width: 767px) {
  .zen-mobile-only { display: block; }
  .zen-topbar-central { display: none !important; }
  .zen-topbar-user-name { display: none; }
}

/* ── Admin "view as" (hidden until top-edge click, like legacy adminnavbartrigger) ─ */
.zen-admin-edge-trigger {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 1065;
  cursor: default;
  background: transparent;
}

/* #zen-main lives outside #zen-shell, so sibling selectors do not apply; use body class when bar is open */
body.zen-vue-shell.zen-shell-admin-reveal .zen-main-content#zen-main {
  margin-top: calc(var(--zen-topbar-height) + 28px);
}

.zen-admin-bar {
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  padding: 3px 12px;
  text-align: center;
  position: fixed;
  top: var(--zen-topbar-height);
  left: 0; right: 0;
  z-index: 1041;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.zen-admin-bar ~ .zen-sidebar { top: calc(var(--zen-topbar-height) + 28px); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .zen-sidebar {
    width: var(--zen-sidebar-width) !important;
    transform: translateX(-100%);
    z-index: 1050;
  }
  .zen-sidebar.mobile-open {
    transform: translateX(0);
    overflow-y: auto;
  }
  .zen-sidebar.mobile-open .zen-sidebar-label { opacity: 1; }
  .zen-sidebar.mobile-open .zen-sidebar-toggle-icon { opacity: 1; }
  .zen-sidebar.mobile-open .zen-sidebar-children.open {
    max-height: max(0px, calc(100vh - var(--zen-topbar-height) - 100px));
    overflow-x: hidden;
    overflow-y: auto;
  }
  .zen-main-content, .zen-main-content.sidebar-pinned { margin-left: 0; }
}

/* CodeIgniter error boxes are rendered before #zen-main opens, so they fall outside the main margin.
   Give them the same left clearance as the sidebar rail so they're not hidden under it. */
body.zen-vue-shell > div[style*="border:1px solid #990000"],
body.zen-vue-shell > div[style*="border: 1px solid #990000"] {
  margin-left: var(--zen-sidebar-collapsed);
}

/* ── Footer layout fix for sidebar-shell pages ────────────────
   Old layout: .footer { position:absolute; bottom:0 } with body { margin-bottom:60px }
   to clear the overlaid footer. With zen-main-content min-height: 100vh-48px the body
   becomes 100vh+60px, always causing an unnecessary scrollbar.
   Fix: flex-column body so zen-main-content expands to fill remaining space and the
   footer flows naturally at the bottom — no magic clearance numbers needed. */
body.zen-vue-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-bottom: 0;
}
body.zen-vue-shell .zen-main-content {
  flex: 1 1 auto;
  min-height: 0; /* flex: 1 handles the stretching; old min-height stacked with footer caused scrollbar */
}
body.zen-vue-shell .footer {
  position: static !important;
  bottom: auto !important;
  flex-shrink: 0;
}

/* hide old menu elements when shell is active */
body.zen-vue-shell .zen-top-tab-container,
body.zen-vue-shell .zen-tab-pane,
body.zen-vue-shell #menurow,
body.zen-vue-shell .navbar-zen {
  display: none !important;
}

body.zen-vue-shell .container-fluid { max-width: 100%; }

/* Full-viewport vendor panels: legacy calc(100vh - 238px) assumed navbar + menu + tabs.
   Shell hides those; retune fudge (~92px) for in-page alerts, padding, footer breathing room.
   imv2: single title row (toolbox in header) + inventory_management_v2.php flex fill — smaller subtract when calc is used. */
body.zen-vue-shell .dspv2-container,
body.zen-vue-shell .fs-container,
body.zen-vue-shell .shp-container,
body.zen-vue-shell .dcv2-split-container {
  height: calc(100vh - var(--zen-topbar-height) - 92px);
  min-height: 400px;
}
body.zen-vue-shell .imv2-container {
  height: calc(100vh - var(--zen-topbar-height) - 56px);
  min-height: 400px;
}

/* Same shell retune; min-height left to each view (.pm-container uses 500px).
   Permission management fills #zen-main with flex — do not fix .pm-container to 100vh there
   (intro block + that height caused page scroll; scroll belongs in .pm-panel-body). */
body.zen-vue-shell .rai-container,
body.zen-vue-shell .tsv2-container {
  height: calc(100vh - var(--zen-topbar-height) - 92px);
}
body.zen-vue-shell .pm-container {
  height: calc(100vh - var(--zen-topbar-height) - 92px);
}
/* Permission management: body.page-permission-mgmt set by controller (reliable vs :has()). */
/* Lock the viewport: scrollbar on .pm-panel-body only, not on html/body. */
html:has(body.zen-vue-shell.page-permission-mgmt) {
  height: 100%;
  overflow: hidden;
}
body.zen-vue-shell.page-permission-mgmt {
  /* 100vh: works even when html:has() is unsupported; pairs with flex body + #zen-main overflow:hidden */
  height: 100vh;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  box-sizing: border-box;
}
body.zen-vue-shell.page-permission-mgmt #zen-main .pm-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.zen-vue-shell.page-permission-mgmt #zen-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 0%;
  overflow: hidden;
}
body.zen-vue-shell.page-permission-mgmt #zen-main > section.permission-management-page {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

/* visualizations v2 — legacy min-height used 155px chrome fudge */
body.zen-vue-shell .viz2-page {
  min-height: calc(100vh - var(--zen-topbar-height) - 47px);
}

body.zen-vue-shell .viz2-filter-bar {
  top: var(--zen-topbar-height);
}

/* calculator v5 — legacy min-height matched ~200px subtract */
body.zen-vue-shell .cv5-main {
  min-height: calc(100vh - var(--zen-topbar-height) - 92px);
}

/* dcformapproval.php only — list / expense panes (legacy subtracted 240–290px) */
body.zen-vue-shell .user-list-container {
  max-height: calc(100vh - var(--zen-topbar-height) - 92px);
}

body.zen-vue-shell .user-list-scrollable {
  max-height: calc(100vh - var(--zen-topbar-height) - 142px);
}

body.zen-vue-shell #userexpensereports {
  max-height: calc(100vh - var(--zen-topbar-height) - 102px);
}

body.zen-vue-shell.zen-shell-admin-reveal .dspv2-container,
body.zen-vue-shell.zen-shell-admin-reveal .fs-container,
body.zen-vue-shell.zen-shell-admin-reveal .shp-container,
body.zen-vue-shell.zen-shell-admin-reveal .dcv2-split-container {
  height: calc(100vh - var(--zen-topbar-height) - 92px - 28px);
}
body.zen-vue-shell.zen-shell-admin-reveal .imv2-container {
  height: calc(100vh - var(--zen-topbar-height) - 56px - 28px);
}

body.zen-vue-shell.zen-shell-admin-reveal .rai-container,
body.zen-vue-shell.zen-shell-admin-reveal .tsv2-container {
  height: calc(100vh - var(--zen-topbar-height) - 92px - 28px);
}
body.zen-vue-shell.zen-shell-admin-reveal .pm-container {
  height: calc(100vh - var(--zen-topbar-height) - 92px - 28px);
}
body.zen-vue-shell.zen-shell-admin-reveal.page-permission-mgmt #zen-main .pm-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.zen-vue-shell.zen-shell-admin-reveal .viz2-page {
  min-height: calc(100vh - var(--zen-topbar-height) - 47px - 28px);
}

body.zen-vue-shell.zen-shell-admin-reveal .viz2-filter-bar {
  top: calc(var(--zen-topbar-height) + 28px);
}

body.zen-vue-shell.zen-shell-admin-reveal .cv5-main {
  min-height: calc(100vh - var(--zen-topbar-height) - 92px - 28px);
}

body.zen-vue-shell.zen-shell-admin-reveal .user-list-container {
  max-height: calc(100vh - var(--zen-topbar-height) - 92px - 28px);
}

body.zen-vue-shell.zen-shell-admin-reveal .user-list-scrollable {
  max-height: calc(100vh - var(--zen-topbar-height) - 142px - 28px);
}

body.zen-vue-shell.zen-shell-admin-reveal #userexpensereports {
  max-height: calc(100vh - var(--zen-topbar-height) - 102px - 28px);
}

@media (max-width: 991px) {
  body.zen-vue-shell .dspv2-container,
  body.zen-vue-shell .fs-container,
  body.zen-vue-shell .shp-container,
  body.zen-vue-shell .imv2-container,
  body.zen-vue-shell .dcv2-split-container,
  body.zen-vue-shell .pm-container,
  body.zen-vue-shell .rai-container,
  body.zen-vue-shell .tsv2-container {
    height: auto;
  }

  body.zen-vue-shell #location .row > .col-lg-6:first-child {
    position: relative;
    top: auto;
    max-height: none;
    overflow-y: visible;
  }

  body.zen-vue-shell #location #acmapheader {
    top: 0;
  }
}

/* dcformapproval responsive block mirrors legacy -40px subtract vs desktop */
@media (max-width: 768px) {
  body.zen-vue-shell .user-list-container {
    max-height: calc(100vh - var(--zen-topbar-height) - 52px);
  }

  body.zen-vue-shell .user-list-scrollable {
    max-height: calc(100vh - var(--zen-topbar-height) - 102px);
  }

  body.zen-vue-shell #userexpensereports {
    max-height: calc(100vh - var(--zen-topbar-height) - 52px);
  }

  body.zen-vue-shell.zen-shell-admin-reveal .user-list-container {
    max-height: calc(100vh - var(--zen-topbar-height) - 52px - 28px);
  }

  body.zen-vue-shell.zen-shell-admin-reveal .user-list-scrollable {
    max-height: calc(100vh - var(--zen-topbar-height) - 102px - 28px);
  }

  body.zen-vue-shell.zen-shell-admin-reveal #userexpensereports {
    max-height: calc(100vh - var(--zen-topbar-height) - 52px - 28px);
  }
}

/* inventory_management.php (v1) — .events-panel only used there */
body.zen-vue-shell .events-panel {
  max-height: calc(100vh - var(--zen-topbar-height) - 92px);
}

body.zen-vue-shell.zen-shell-admin-reveal .events-panel {
  max-height: calc(100vh - var(--zen-topbar-height) - 92px - 28px);
}

/* eventdetail.php — Location tab: sticky column sat under legacy top: 20px vs fixed top bar (desktop only) */
@media (min-width: 992px) {
  body.zen-vue-shell #location .row > .col-lg-6:first-child {
    top: calc(var(--zen-topbar-height) + 20px);
    max-height: calc(100vh - var(--zen-topbar-height) - 44px);
  }

  body.zen-vue-shell.zen-shell-admin-reveal #location .row > .col-lg-6:first-child {
    top: calc(var(--zen-topbar-height) + 28px + 20px);
    max-height: calc(100vh - var(--zen-topbar-height) - 28px - 44px);
  }

  body.zen-vue-shell #location #acmapheader {
    top: 0;
  }

  body.zen-vue-shell.zen-shell-admin-reveal #location #acmapheader {
    top: 0;
  }
}