/* ASSETA_TOPBAR_DROPDOWN_V1 */
:root {
  --atb-height: 54px;
  --atb-bg: rgba(15, 23, 42, .96);
  --atb-border: rgba(255, 255, 255, .10);
  --atb-text: #e7eef7;
  --atb-muted: #9fb0c5;
  --atb-accent: #4fd1c5;
  --atb-dropdown: rgba(255, 255, 255, .94);
  --atb-dropdown-text: #172033;
}

html {
  scroll-padding-top: var(--atb-height);
}

body.asseta-topbar-ready {
  padding-top: var(--atb-height) !important;
}

body.asseta-topbar-ready .sidebar,
body.asseta-topbar-ready aside.sidebar {
  display: none !important;
}

body.asseta-topbar-ready .app,
body.asseta-topbar-ready .app.collapsed {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: calc(100vh - var(--atb-height)) !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body.asseta-topbar-ready .app > .main,
body.asseta-topbar-ready .app.collapsed > .main,
body.asseta-topbar-ready .main {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

body.asseta-topbar-ready #af-app,
body.asseta-topbar-ready #ap-app,
body.asseta-topbar-ready #procurement-app {
  top: var(--atb-height) !important;
  height: calc(100vh - var(--atb-height)) !important;
  max-height: calc(100vh - var(--atb-height)) !important;
}

.asseta-global-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2147483000;
  height: var(--atb-height);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  box-sizing: border-box;
  color: var(--atb-text);
  background: var(--atb-bg);
  border-bottom: 1px solid var(--atb-border);
  box-shadow: 0 8px 30px rgba(15, 23, 42, .16);
  font-family: Inter, Arial, sans-serif;
}

.asseta-global-topbar.atb-hidden {
  display: none !important;
}

.atb-brand,
.atb-menu-button,
.atb-dropdown-item {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.atb-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  color: inherit;
  background: transparent;
  font-weight: 900;
  letter-spacing: .04em;
}

.atb-brand-mark {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  color: #073238;
  background: linear-gradient(135deg, #7cebdd, #2fc9b7);
}

.atb-brand-text {
  font-size: 14px;
}

.atb-groups,
.atb-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.atb-groups {
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.atb-groups::-webkit-scrollbar {
  display: none;
}

.atb-right {
  gap: 7px;
}

.atb-menu {
  position: relative;
}

.atb-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--atb-muted);
  background: transparent;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
}

.atb-menu-button:hover,
.atb-menu.open > .atb-menu-button,
.atb-menu.active > .atb-menu-button {
  color: #fff;
  background: rgba(255, 255, 255, .09);
}

.atb-actions-button {
  color: #062f34;
  background: var(--atb-accent);
}

.atb-actions-button:hover,
.atb-actions-menu.open > .atb-actions-button {
  color: #062f34;
  background: #73e5d8;
}

.atb-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.atb-menu.open .atb-chevron {
  transform: rotate(225deg) translate(-1px, -1px);
}

.atb-dropdown {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 30;
  display: none;
  width: max-content;
  min-width: 220px;
  max-width: min(340px, calc(100vw - 24px));
  max-height: calc(100vh - var(--atb-height) - 24px);
  overflow: auto;
  padding: 8px;
  box-sizing: border-box;
  color: var(--atb-dropdown-text);
  background: var(--atb-dropdown);
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 13px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.atb-menu.open > .atb-dropdown {
  display: block;
}

.atb-right .atb-dropdown {
  right: 0;
  left: auto;
}

.atb-dropdown-title {
  padding: 6px 9px 8px;
  margin-bottom: 5px;
  color: #64748b;
  border-bottom: 1px solid rgba(148, 163, 184, .20);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.atb-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  text-align: left;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.atb-dropdown-item:hover,
.atb-dropdown-item.active {
  color: #0f766e;
  background: rgba(20, 184, 166, .10);
}

.atb-action-item::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 6px;
  color: #0f766e;
  background: rgba(20, 184, 166, .12);
  font-size: 15px;
}

.atb-account-button {
  gap: 7px;
  padding: 4px 7px;
}

.atb-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #d9e5f0 0 18%, transparent 19%),
    radial-gradient(circle at 50% 90%, #d9e5f0 0 34%, transparent 35%),
    rgba(255, 255, 255, .11);
}

.atb-account-name {
  max-width: 130px;
  overflow: hidden;
  color: #f8fafc;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.atb-signout {
  color: #b42318;
}

.atb-signout:hover {
  color: #b42318;
  background: rgba(180, 35, 24, .08);
}

@media (max-width: 820px) {
  .asseta-global-topbar {
    gap: 8px;
    padding: 0 8px;
  }

  .atb-brand-text,
  .atb-account-name {
    display: none;
  }

  .atb-dropdown {
    position: fixed;
    top: calc(var(--atb-height) + 7px);
    right: 8px !important;
    left: 8px !important;
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 520px) {
  .atb-account-menu {
    display: none;
  }
}
/* ASSETA_TOPBAR_DROPDOWN_V1_END */

/* ASSETA_TOPBAR_DROPDOWN_LAYOUT_FIX_V2_START */

#asseta-global-topbar .atb-groups {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  position: relative !important;
  z-index: 40 !important;
}

#asseta-global-topbar .atb-menu {
  overflow: visible !important;
  position: relative !important;
}

#asseta-global-topbar .atb-dropdown {
  z-index: 2147483100 !important;
}

body.asseta-topbar-ready #root,
body.asseta-topbar-ready #root > div,
body.asseta-topbar-ready .asseta-page,
body.asseta-topbar-ready .app,
body.asseta-topbar-ready .app.collapsed {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body.asseta-topbar-ready .asseta-page {
  display: block !important;
}

body.asseta-topbar-ready .sidebar,
body.asseta-topbar-ready aside.sidebar,
body.asseta-topbar-ready .app-sidebar,
body.asseta-topbar-ready .side-nav,
body.asseta-topbar-ready nav.sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.asseta-topbar-ready .main,
body.asseta-topbar-ready .main-content,
body.asseta-topbar-ready .page-content,
body.asseta-topbar-ready .content,
body.asseta-topbar-ready .asseta-page > .main,
body.asseta-topbar-ready .app > .main,
body.asseta-topbar-ready .app.collapsed > .main {
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  box-sizing: border-box !important;
}

body.asseta-topbar-ready .asseta-page:has(.sidebar) .main,
body.asseta-topbar-ready .asseta-page:has(.sidebar.collapsed) .main,
body.asseta-topbar-ready .asseta-page:has(aside.sidebar) .main {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}

@media (max-width: 820px) {
  #asseta-global-topbar .atb-groups {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  #asseta-global-topbar .atb-dropdown {
    position: fixed !important;
    top: calc(var(--atb-height) + 7px) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ASSETA_TOPBAR_DROPDOWN_LAYOUT_FIX_V2_END */

/* ASSETA_TOPBAR_VIDEO_LAYOUT_FIX_V3_START */

/*
 * Finance and Procurement are full-screen application layers.
 * They must begin below the global Top Bar and must not inherit
 * the former 218px/250px sidebar offset.
 */
html body.asseta-topbar-ready #af-app,
html body.asseta-topbar-ready #ap-app,
html body.asseta-topbar-ready #procurement-app,
html body.asseta-topbar-ready #asseta-procurement-app {
  position: fixed !important;
  inset: var(--atb-height) 0 0 0 !important;
  top: var(--atb-height) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  z-index: 7000 !important;
}

/* Keep internal page headers attached to the top of their own layer. */
html body.asseta-topbar-ready #af-app .af-topbar,
html body.asseta-topbar-ready #ap-app .ap-topbar,
html body.asseta-topbar-ready #procurement-app .ap-topbar,
html body.asseta-topbar-ready #asseta-procurement-app .ap-topbar {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* The screen body now consumes the full layer width. */
html body.asseta-topbar-ready #af-app .af-content,
html body.asseta-topbar-ready #ap-app .ap-content,
html body.asseta-topbar-ready #procurement-app .ap-content,
html body.asseta-topbar-ready #asseta-procurement-app .ap-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/*
 * Remove every remaining grid/flex column that was reserved
 * for the deleted sidebar on native React pages.
 */
html body.asseta-topbar-ready .asseta-page,
html body.asseta-topbar-ready .app,
html body.asseta-topbar-ready .app.collapsed {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

html body.asseta-topbar-ready .sidebar,
html body.asseta-topbar-ready aside.sidebar,
html body.asseta-topbar-ready nav.sidebar,
html body.asseta-topbar-ready .app-sidebar,
html body.asseta-topbar-ready .side-nav {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body.asseta-topbar-ready .main,
html body.asseta-topbar-ready .main-content,
html body.asseta-topbar-ready .page-content,
html body.asseta-topbar-ready .asseta-page > .main,
html body.asseta-topbar-ready .app > .main,
html body.asseta-topbar-ready .app.collapsed > .main {
  display: block !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

/* Dropdowns stay above all page layers. */
html body #asseta-global-topbar {
  z-index: 2147483000 !important;
}

html body #asseta-global-topbar .atb-dropdown {
  z-index: 2147483100 !important;
}

/* ASSETA_TOPBAR_VIDEO_LAYOUT_FIX_V3_END */

/* ASSETA_PAGE_SIDE_GUTTERS_V5_START */

:root {
  --asseta-page-gutter: clamp(16px, 1.8vw, 28px);
  --asseta-page-gutter-mobile: 12px;
}

/* Native React pages: balanced left and right spacing. */
html body.asseta-topbar-ready .main,
html body.asseta-topbar-ready .main-content,
html body.asseta-topbar-ready .page-content,
html body.asseta-topbar-ready .asseta-page > .main,
html body.asseta-topbar-ready .app > .main,
html body.asseta-topbar-ready .app.collapsed > .main {
  padding-left: var(--asseta-page-gutter) !important;
  padding-right: var(--asseta-page-gutter) !important;
  box-sizing: border-box !important;
}

/* Keep page headers aligned with page content. */
html body.asseta-topbar-ready .main > header,
html body.asseta-topbar-ready .main .page-header,
html body.asseta-topbar-ready .main .toolbar,
html body.asseta-topbar-ready .main .topbar {
  box-sizing: border-box !important;
}

/* Finance and Procurement remain full-screen layers,
   but their actual content gets equal inner gutters. */
html body.asseta-topbar-ready #af-app .af-content,
html body.asseta-topbar-ready #ap-app .ap-content,
html body.asseta-topbar-ready #procurement-app .ap-content,
html body.asseta-topbar-ready #asseta-procurement-app .ap-content {
  padding-left: var(--asseta-page-gutter) !important;
  padding-right: var(--asseta-page-gutter) !important;
  box-sizing: border-box !important;
}

/* Align module headers with the same visual gutter. */
html body.asseta-topbar-ready #af-app .af-topbar,
html body.asseta-topbar-ready #ap-app .ap-topbar,
html body.asseta-topbar-ready #procurement-app .ap-topbar,
html body.asseta-topbar-ready #asseta-procurement-app .ap-topbar {
  padding-left: var(--asseta-page-gutter) !important;
  padding-right: var(--asseta-page-gutter) !important;
  box-sizing: border-box !important;
}

/* Avoid cards and tables touching the viewport edge. */
html body.asseta-topbar-ready #af-app .af-content > *,
html body.asseta-topbar-ready #ap-app .ap-content > *,
html body.asseta-topbar-ready #procurement-app .ap-content > *,
html body.asseta-topbar-ready #asseta-procurement-app .ap-content > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 820px) {
  html body.asseta-topbar-ready .main,
  html body.asseta-topbar-ready .main-content,
  html body.asseta-topbar-ready .page-content,
  html body.asseta-topbar-ready .asseta-page > .main,
  html body.asseta-topbar-ready .app > .main,
  html body.asseta-topbar-ready .app.collapsed > .main,
  html body.asseta-topbar-ready #af-app .af-content,
  html body.asseta-topbar-ready #ap-app .ap-content,
  html body.asseta-topbar-ready #procurement-app .ap-content,
  html body.asseta-topbar-ready #asseta-procurement-app .ap-content,
  html body.asseta-topbar-ready #af-app .af-topbar,
  html body.asseta-topbar-ready #ap-app .ap-topbar,
  html body.asseta-topbar-ready #procurement-app .ap-topbar,
  html body.asseta-topbar-ready #asseta-procurement-app .ap-topbar {
    padding-left: var(--asseta-page-gutter-mobile) !important;
    padding-right: var(--asseta-page-gutter-mobile) !important;
  }
}

/* ASSETA_PAGE_SIDE_GUTTERS_V5_END */