/* Application-specific Tabler overrides. */

/*
 * Keep a stable scrollbar gutter so the layout width does not change when overflow
 * briefly toggles on load (short pages, font/layout settle, dev toolbar, etc.).
 */
html {
  scrollbar-gutter: stable;
}

/*
 * Tabler's tabler-themes.css only defines --tblr-border-radius-scale for radius 0–2.
 * Extra options in Theme Settings (3–5) need matching selectors or inputs/cards keep the default scale.
 */
[data-bs-theme-radius="3"] {
  --tblr-border-radius-scale: 3;
}

[data-bs-theme-radius="4"] {
  --tblr-border-radius-scale: 4;
}

[data-bs-theme-radius="5"] {
  --tblr-border-radius-scale: 5;
}

:root {
  --p4s-primary: var(--tblr-blue);
  --p4s-secondary: var(--tblr-indigo);
  --p4s-accent: var(--tblr-pink);
}

body.theme-light {
  background-color: #f5f7fb;
}

body.theme-dark {
  background-color: #010409;
}

.page {
  min-height: 100vh;
}

.page-body {
  margin-top: 0.5rem;
  padding-top: 0.5em;
  margin-bottom: 0;
  padding-bottom: 0;
}

.page-header {
  margin-bottom: 1.5rem;
}

/*
 * Tabler sets .page-wrapper .page-header { margin-top: var(--tblr-page-padding-y) }; that wins over .page-header alone.
 * Drop the top gap so content sits closer under the navbar site-wide.
 */
.page-wrapper .page-header {
  margin-top: 0;
}

.footer {
  padding: 0.5em 0;
}

/* Ensure top navbar can stick to viewport edges even if boxed mode is present. */
.layout-boxed,
body.layout-boxed {
  padding: 0 !important;
}

.layout-boxed .page {
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.p4s-text-primary {
  color: var(--p4s-primary) !important;
}

.p4s-text-secondary {
  color: var(--p4s-secondary) !important;
}

.p4s-text-accent {
  color: var(--p4s-accent) !important;
}

.p4s-bg-primary {
  background-color: var(--p4s-primary) !important;
}

.p4s-bg-secondary {
  background-color: var(--p4s-secondary) !important;
}

.p4s-bg-accent {
  background-color: var(--p4s-accent) !important;
}

.p4s-border-primary {
  border-color: var(--p4s-primary) !important;
}

.p4s-border-secondary {
  border-color: var(--p4s-secondary) !important;
}

.p4s-border-accent {
  border-color: var(--p4s-accent) !important;
}

/* Make top navbar icon-only actions more visible. */
.navbar .nav-link-icon-only .ti {
  font-size: 1.25rem;
  line-height: 1;
}

/*
 * Signed-in user block: show company + first/last name in full. Wrap on two lines
 * rather than ellipsis; keep the block from shoving the rest of the navbar.
 */
.navbar .navbar-user-meta {
  min-width: 0;
  max-width: min(22rem, 36vw);
  text-align: left;
  line-height: 1.25;
}

.navbar .navbar-user-company,
.navbar .navbar-user-name {
  white-space: normal;
  overflow-wrap: break-word;
}

.navbar .navbar-user-company {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
}

.navbar .navbar-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
}

.navbar .navbar-user-role {
  margin-top: 0.125rem;
}

.navbar .navbar-user-avatar-two-letter {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

/*
 * Company name in chrome: wrap inside the sidebar / header instead of Tabler's nowrap clip.
 * Long German compounds (e.g. Vertriebsgesellschaft) also break if a single word is too wide.
 */
.navbar-brand {
  white-space: normal;
  min-width: 0;
  max-width: 100%;
  line-height: 1.25;
}

.navbar-vertical .navbar-brand {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}

header.navbar .navbar-brand {
  flex: 0 1 auto;
  max-width: min(22rem, 45%);
}

.navbar-brand .navbar-brand-link {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
}

.navbar-vertical .navbar-brand .navbar-brand-link {
  width: 100%;
}

.navbar-brand .avatar {
  flex-shrink: 0;
}

.navbar-brand-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.25;
}

.footer-company-name {
  max-width: min(28rem, 100%);
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-align: right;
}

/*
 * Tabler demo utility: hide top-header brand when vertical sidebar already shows it.
 * Without this, narrow viewports / high browser zoom stack two brand+hamburger rows.
 */
html[data-layout="vertical"] .d-none-navbar-horizontal {
  display: none !important;
}

/*
 * Tabler 1.6 hides one chrome bar via data-bs-navbar-position (sidebar XOR top header).
 * This app always keeps both. Tabler also sets --tblr-sidebar-width: 0 on `> .navbar`,
 * and the sidebar is `aside.navbar.navbar-vertical`, so the rail would be 0px wide.
 */
html[data-layout="vertical"] .page > aside.navbar-vertical {
  display: flex !important;
}

html[data-layout="vertical"] .page > header.navbar {
  display: flex !important;
}

@media (min-width: 992px) {
  html[data-layout="vertical"] .page > aside.navbar-vertical.navbar-expand-lg {
    width: 16rem !important;
  }

  html[data-layout="vertical"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
    margin-inline-start: 16rem !important;
  }
}

/*
 * Submenu toggles are <button type="button"> (not <a href="#">) so Hotwired Turbo Drive
 * does not handle them as visits. Match font metrics to adjacent .nav-link <a> items.
 */
#sidebar-menu button.nav-link,
#sidebar-menu button.dropdown-item.dropdown-toggle,
#navbar-menu button.nav-link {
    font: inherit;
    line-height: inherit;
}

/*
 * Vertical sidebar nested items: like top-level .nav-link — active vs inactive
 * differs by text color (brightness), not a filled row background.
 */
.navbar-vertical #sidebar-menu .dropdown-menu .dropdown-item {
  color: var(--tblr-navbar-color);
  background-color: transparent;
}

.navbar-vertical #sidebar-menu .dropdown-menu .dropdown-item.active,
.navbar-vertical #sidebar-menu .dropdown-menu .dropdown-item:active {
  color: var(--tblr-navbar-active-color);
  background-color: transparent !important;
}

.navbar-vertical #sidebar-menu .dropdown-menu .dropdown-item:hover,
.navbar-vertical #sidebar-menu .dropdown-menu .dropdown-item:focus {
  background-color: transparent;
  color: var(--tblr-navbar-hover-color);
}

/*
 * Sidebar submenus use `p4s-open`, not Bootstrap `.show`, so Tabler/BS won’t hide them.
 */
.navbar-vertical #sidebar-menu .dropdown-menu.p4s-open {
  display: block !important;
}

/*
 * Vertical sidebar: same caret on every level — closed vs open follows `p4s-open` on the toggle.
 */
.navbar-vertical #sidebar-menu .dropdown-toggle::after {
  align-self: center;
  vertical-align: middle;
  margin-top: 0;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.navbar-vertical #sidebar-menu .nav-item > .nav-link.dropdown-toggle:not(.p4s-open)::after,
.navbar-vertical #sidebar-menu .dropend > .dropdown-item.dropdown-toggle:not(.p4s-open)::after {
  transform: rotate(-135deg);
}

.navbar-vertical #sidebar-menu .nav-item > .nav-link.dropdown-toggle.p4s-open::after,
.navbar-vertical #sidebar-menu .dropend > .dropdown-item.dropdown-toggle.p4s-open::after {
  transform: rotate(-45deg);
}

/*
 * Vertical sidebar: wrap long menu labels inside the fixed sidebar width.
 * Tabler sets .nav-link { display: flex; align-items: center; }, which keeps text on one line.
 */
.navbar-vertical #sidebar-menu .navbar-nav .nav-item {
  justify-content: flex-start;
}

.navbar-vertical.navbar-expand-lg.navbar-light #sidebar-menu.navbar-collapse .navbar-nav .nav-link,
.navbar-vertical #sidebar-menu .dropdown-menu .dropdown-item {
  align-items: flex-start !important;
  white-space: normal;
  min-height: 0 !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  gap: 0.25rem !important;
}

.navbar-vertical #sidebar-menu .nav-link .nav-link-title,
.navbar-vertical #sidebar-menu .dropdown-menu .dropdown-item.d-flex > span:not([aria-hidden]) {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: break-word;
}

.navbar-vertical #sidebar-menu .nav-link-icon {
  flex-shrink: 0;
}

/* First-level vertical items: larger glyphs than nested rows. */
.navbar-vertical #sidebar-menu > .navbar-nav > .nav-item > .nav-link .nav-link-icon .ti {
  font-size: 1.25rem;
  line-height: 1;
}

/* Tiny extra gap between top-level rows only. */
.navbar-vertical #sidebar-menu > .navbar-nav > .nav-item + .nav-item {
  margin-top: 0.125rem;
}

/* Row gap replaces Tabler's icon margin-right inside nested sidebar items. */
.navbar-vertical #sidebar-menu .dropdown-menu .dropdown-item .nav-link-icon {
  margin-right: 0;
}

/*
 * Horizontal top menu (`#navbar-menu` is only rendered for `data-layout="horizontal"`):
 * no route-based “active” bar or colors; submenus stay closed on load (see tabler-app.js).
 */
#navbar-menu .navbar-nav .nav-link.active,
#navbar-menu .navbar-nav .nav-link.show {
  color: var(--tblr-navbar-color);
}

#navbar-menu .nav-item.active > .nav-link,
#navbar-menu .nav-item.active .nav-link {
  color: var(--tblr-navbar-color);
}

#navbar-menu .nav-item.active::after,
#navbar-menu.navbar-collapse .nav-item.active::after {
  content: none;
  border: 0;
}

#navbar-menu .dropdown-menu .dropdown-item.active,
#navbar-menu .dropdown-menu .dropdown-item:active {
  background-color: transparent !important;
  background: transparent !important;
  color: inherit;
}

/*
 * Theme settings offcanvas: ~half viewport so the page (e.g. home preview) stays visible;
 * data-bs-scroll on the element lets Bootstrap keep body scrollable while open.
 */
.theme-settings-offcanvas {
  --tblr-offcanvas-width: min(50vw, 38rem);
}

@media (max-width: 575.98px) {
  .theme-settings-offcanvas {
    /* Narrow phones: mostly full width so controls stay usable */
    --tblr-offcanvas-width: min(100vw - 0.5rem, 28rem);
  }
}

.theme-settings-offcanvas .offcanvas-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/*
 * Order snapshot editor: three-column address-book fields need a wide panel.
 * Must beat Tabler .offcanvas.offcanvas-end (two classes) and set width itself:
 * --tblr-offcanvas-width is reset to 400px on .offcanvas.
 */
.offcanvas.offcanvas-end.order-address-editor-offcanvas {
  --tblr-offcanvas-width: min(72rem, 100vw);
  width: min(72rem, 100vw);
}

/*
 * Modals: Tabler repeats rules later in tabler(.min).css (e.g. .modal-header with
 * min-height: 3.5rem and padding 0 3.5rem 0 1.5rem — left inset 24px). Single-class
 * overrides in this file can lose to that block; use .modal .modal-content > … instead.
 * Note: dynamic-form sections may add their own padding (e.g. border group p-3) on top of .modal-body.
 */
.modal .modal-content > .modal-body {
  --tblr-modal-padding: 12px;
  padding: 12px;
}

.modal .modal-content > .modal-header {
  min-height: 0;
  align-items: center;
  --tblr-modal-header-padding-x: 12px;
  --tblr-modal-header-padding-y: 0.5rem;
  padding: var(--tblr-modal-header-padding-y) var(--tblr-modal-header-padding-x);
}

/* Absolute .btn-close needs reserved space on the right (Tabler’s 3.5rem strip). */
.modal .modal-content > .modal-header:has(> .btn-close) {
  padding-right: 3.5rem;
}

/*
 * Dismiss control: Tabler aligns the close hit area to the modal-title line box; the glyph
 * then sits slightly low. Pull up (~6px beyond Tabler’s offset) for optical balance with the title.
 */
.modal .modal-content > .modal-header .btn-close {
  margin-top: calc(-0.5 * var(--tblr-modal-header-padding-y) - 0.375rem);
}

/*
 * Dynamic form group section title strip (only rendered when the group has border in Twig).
 * Light: secondary wash (distinct from white inputs).
 * Dark: Tabler maps --tblr-bg-surface-secondary and --tblr-bg-forms both to gray-900, so the strip
 * matched .form-control; use main surface (gray-800) so the header reads separately from inputs.
 */
.dynamic-form-group__title {
  background-color: var(--tblr-bg-surface-secondary) !important;
}

[data-bs-theme='dark'] .dynamic-form-group__title {
  background-color: var(--tblr-bg-surface) !important;
}

/*
 * Collapsible dynamic-form group (accordion): triangle toggle in card header.
 * Body uses grid 0fr/1fr — fields stay in DOM for HTML5 validation (no display:none).
 */
.dynamic-form-group__accordion-toggle {
  background-color: var(--tblr-bg-surface-secondary) !important;
  border: 0;
  color: inherit;
}

.dynamic-form-group__accordion-toggle:hover {
  background-color: var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface-secondary)) !important;
}

.dynamic-form-group__accordion-toggle:focus-visible {
  outline: 2px solid var(--tblr-primary);
  outline-offset: -2px;
}

[data-bs-theme='dark'] .dynamic-form-group__accordion-toggle {
  background-color: var(--tblr-bg-surface) !important;
  color: var(--tblr-body-color);
}

[data-bs-theme='dark'] .dynamic-form-group__accordion-toggle:hover {
  background-color: var(--tblr-bg-surface-secondary) !important;
}

.dynamic-form-group__accordion-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 0.35rem solid transparent;
  border-bottom: 0.35rem solid transparent;
  border-left: 0.45rem solid var(--tblr-secondary);
  flex-shrink: 0;
  transition: transform 200ms ease;
  transform: rotate(0deg);
}

.dynamic-form-group--accordion-expanded .dynamic-form-group__accordion-icon {
  transform: rotate(90deg);
}

[data-bs-theme='dark'] .dynamic-form-group__accordion-icon {
  border-left-color: var(--tblr-secondary-color, var(--tblr-secondary));
}

.dynamic-form-group__accordion-body {
  display: grid;
  transition: grid-template-rows 200ms ease;
}

.dynamic-form-group__accordion-body--collapsed {
  grid-template-rows: 0fr;
}

.dynamic-form-group__accordion-body--expanded {
  grid-template-rows: 1fr;
}

.dynamic-form-group__accordion-body-inner {
  overflow: hidden;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dynamic-form-group__accordion-icon,
  .dynamic-form-group__accordion-body {
    transition: none;
  }
}

/*
 * Related-form chip rail under the dynamic form title (horizontal layout).
 */
.dynamic-form-related-rail--page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0 0.75rem;
  min-width: 0;
}

.dynamic-form-related-rail--page .dynamic-form-related-rail__label {
  flex: 0 0 auto;
  margin: 0 0.15rem 0 0;
  line-height: 1.25;
  white-space: nowrap;
}

.dynamic-form-related-rail--page .dynamic-form-related-rail__label::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-left: 0.55rem;
  background: var(--tblr-border-color);
  vertical-align: -0.1em;
}

.dynamic-form-related-rail__chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.3rem;
  border-radius: 50rem;
  padding-inline: 0.7rem;
  white-space: nowrap;
}

.dynamic-form-related-rail__chip .ti-arrow-up-right {
  font-size: 0.85em;
  opacity: 0.5;
}

/*
 * Vertical sidebar: related forms sit at the bottom of the menu column.
 * Do not set `display` here — Bootstrap `.collapse` must still hide the menu on small screens.
 */
.navbar-vertical #sidebar-menu {
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
}

.navbar-vertical #sidebar-menu > .navbar-nav {
  flex: 1 1 auto;
  min-height: 0;
}

.dynamic-form-related-rail--sidebar {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 0.65rem 0 0.25rem;
  border-top: 1px solid var(--tblr-border-color);
  background: var(--tblr-navbar-bg, var(--tblr-bg-surface));
  position: relative;
  z-index: 1;
}

.dynamic-form-related-rail--sidebar .dynamic-form-related-rail__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0.15rem 1.25rem 0.1rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  line-height: 1.25;
  font: inherit;
}

.dynamic-form-related-rail--sidebar .dynamic-form-related-rail__toggle:hover,
.dynamic-form-related-rail--sidebar .dynamic-form-related-rail__toggle:focus-visible {
  color: var(--tblr-navbar-active-color);
}

.dynamic-form-related-rail--sidebar .dynamic-form-related-rail__label {
  display: block;
  margin: 0;
  padding: 0;
  min-width: 0;
  line-height: 1.25;
  white-space: nowrap;
}

.dynamic-form-related-rail--sidebar .dynamic-form-related-rail__chevron {
  flex-shrink: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.dynamic-form-related-rail--sidebar.is-collapsed .navbar-nav {
  display: none;
}

.dynamic-form-related-rail--sidebar:not(.is-collapsed) .dynamic-form-related-rail__toggle {
  margin-bottom: 0.15rem;
}

.dynamic-form-related-rail--sidebar .nav-link {
  gap: 0.35rem;
}

.dynamic-form-related-rail--sidebar .dynamic-form-related-rail__external {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.85em;
  opacity: 0.5;
}

.dynamic-form-related-rail--sidebar .dropdown-toggle::after {
  display: none;
}

.navbar-vertical #sidebar-menu .dynamic-form-related-rail--sidebar .dropdown-menu {
  position: absolute;
  inset: auto auto 100% 0;
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  box-shadow: var(--tblr-box-shadow);
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  min-width: 12rem;
  margin: 0 0 0.25rem;
  padding: 0.25rem 0;
}

.navbar-vertical #sidebar-menu .dynamic-form-related-rail--sidebar .dropdown-item {
  padding-left: 1rem;
  color: inherit;
}

/*
 * Translation modals: fixed narrow locale column (badge + header); value column uses the rest.
 * Width is set on {@code col.translation-locale-values-table__locale-col}, not {@code table-fixed}.
 */
.translation-locale-values-table col.translation-locale-values-table__locale-col {
  width: 5.5rem;
}

.translation-locale-values-table :is(th, td):first-child {
  white-space: nowrap;
  vertical-align: top;
  padding-right: 0.5rem;
}

/* HugeRTE on dynamic forms — see assets/styles/app.css (duplicated for pages without app entry CSS). */
.dynamic-form-wysiwyg-widget .tox-tinymce {
  min-height: 680px;
}

.dynamic-form-wysiwyg-widget .tox .tox-edit-area,
.dynamic-form-wysiwyg-widget .tox .tox-edit-area__iframe {
  min-height: 360px;
}

/*
 * Upload staging remove-existing: keep a square hover hit-area.
 * Lives here (direct link) because app.css via importmap can lag behind compiled public assets.
 * Without this, btn-icon + btn-sm yields ~14×28 pill on hover.
 */
.dynamic-form-upload-widget .dynamic-form-upload-remove-existing {
  box-sizing: border-box;
  width: 1.75rem !important;
  height: 1.75rem !important;
  min-width: 1.75rem !important;
  min-height: 1.75rem !important;
  padding: 0 !important;
  border-radius: 0.25rem !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.dynamic-form-upload-widget .dynamic-form-upload-remove-existing .ti {
  font-size: 1rem;
  line-height: 1;
}

/*
 * Checkbox fields have no label above the control. Next to a labeled select/input they sat too high
 * (old `mt-2` only). The aligner in Twig skips the sibling label; this block matches Tabler control
 * height and centers the box with its caption (Tabler sets `.form-check-input { margin-top: 0 }`).
 */
.dynamic-form-checkbox {
  display: flex;
  align-items: center;
  min-height: calc(1.25rem + 1.125rem + calc(var(--tblr-border-width) * 2));
  margin-bottom: 0;
  padding-left: 0;
  gap: 0.5rem;
}

.dynamic-form-checkbox .form-check-input {
  float: none;
  margin-top: 0;
  margin-left: 0;
}

.dynamic-form-checkbox .form-check-label {
  display: inline;
}

/*
 * Product collection tables: Tabler forces uppercase thead; keep sentence case like Tabulator headers.
 * Locale and actions shrink to content; description takes leftover horizontal space.
 */
.table.product-collection-table > thead > tr > th {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit;
  line-height: inherit;
  white-space: normal;
}

.table.product-collection-table > thead > tr > th.product-collection-table__locale,
.table.product-collection-table > tbody > tr > td.product-collection-table__locale,
.table.product-collection-table > thead > tr > th.product-collection-table__actions,
.table.product-collection-table > tbody > tr > td.product-collection-table__actions {
  width: 1%;
  white-space: nowrap;
}

.table.product-collection-table > tbody > tr > td.product-collection-table__locale .form-select {
  width: auto;
  min-width: 4.75rem;
  display: inline-block;
}

.table.product-collection-table > thead > tr > th.product-collection-table__description,
.table.product-collection-table > tbody > tr > td.product-collection-table__description {
  width: 65%;
}

.table.product-collection-table > tbody > tr.product-prices-editor > td {
  background: var(--tblr-bg-surface-secondary, #f8fafc);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.product-prices-editor__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(8rem, 1fr)) auto;
  gap: 0.75rem 1rem;
  align-items: end;
}

.product-prices-editor__grid .form-label {
  font-weight: 500;
  font-size: 75%;
}

.product-prices-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  padding-bottom: 0.1rem;
}

.order-items-editor__grid {
  grid-template-columns: repeat(3, minmax(8rem, 1fr));
}

@media (max-width: 991.98px) {
  .product-prices-editor__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .order-items-editor__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-prices-editor__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/*
 * Decimal-masked inputs (Betrag, volumes, catalog decimal fields): align like money.
 */
input[data-decimal-mask-scale] {
  text-align: right;
}

:root {
  --p4s-sidebar-collapsed-width: 3.75rem;
}

/*
 * Vertical sidebar: brand and chevron stay put; only the menu list scrolls.
 */
@media (min-width: 992px) {
  html[data-layout="vertical"] .navbar-vertical.navbar-expand-lg {
    overflow: hidden;
  }

  html[data-layout="vertical"] .navbar-vertical.navbar-expand-lg > .container-fluid {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  html[data-layout="vertical"] .navbar-vertical #sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  html[data-layout="vertical"] .navbar-vertical #sidebar-menu > .navbar-nav {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Chevron under the menu; desktop only (Bootstrap `d-lg-flex` also hides it below lg). */
.navbar-vertical-collapse-btn {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0;
  border: 0;
  border-top: 1px solid var(--tblr-navbar-border-color, var(--tblr-border-color));
  background: transparent;
  color: var(--tblr-navbar-color);
  line-height: 1;
}

.navbar-vertical-collapse-btn .ti {
  font-size: 1.1rem;
}

.navbar-vertical-collapse-btn:hover,
.navbar-vertical-collapse-btn:focus-visible {
  color: var(--tblr-navbar-active-color);
  background: var(--tblr-navbar-active-bg, transparent);
}

/*
 * Icon rail: first-level icons only; child menus fly out (see tabler-app.js).
 * Below lg the hamburger menu stays full-width regardless of the cookie.
 */
@media (min-width: 992px) {
  /* Tabler 1.6 sizes the fixed sidebar and page-wrapper via --tblr-sidebar-width. */
  html[data-sidebar-collapsed="1"][data-layout="vertical"] {
    --tblr-sidebar-width: var(--p4s-sidebar-collapsed-width);
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .page > aside.navbar-vertical,
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .page > .page-wrapper {
    --tblr-sidebar-width: var(--p4s-sidebar-collapsed-width) !important;
  }

  /* Must beat the 16rem rail above: that rule is more specific than a bare .navbar-vertical. */
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .page > aside.navbar-vertical.navbar-expand-lg {
    width: var(--p4s-sidebar-collapsed-width) !important;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-expand-lg.navbar-vertical ~ .navbar,
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
    margin-left: var(--p4s-sidebar-collapsed-width) !important;
    margin-inline-start: var(--p4s-sidebar-collapsed-width) !important;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical .navbar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  /* Link is full width; center the favicon inside it (me-2 would shift it left). */
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical .navbar-brand .navbar-brand-link {
    justify-content: center;
    align-items: center;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical .navbar-brand-text {
    display: none;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical .navbar-brand .avatar {
    margin-inline: 0 !important;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .navbar-nav > .nav-item > .nav-link {
    justify-content: center !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }

  /* Tabler keeps margin-right on the icon; with the label clipped that shifts the glyph left of the rail center. */
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .nav-link-icon {
    margin-inline: 0 !important;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
    display: none;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dynamic-form-related-rail--sidebar .dynamic-form-related-rail__toggle {
    justify-content: center;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu > .navbar-nav > .nav-item > .nav-link .nav-link-title,
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dynamic-form-related-rail--sidebar .nav-item:not(.dropup) .nav-link-title,
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dynamic-form-related-rail--sidebar .dynamic-form-related-rail__label,
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dynamic-form-related-rail--sidebar .dynamic-form-related-rail__external {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Placeholder when a first-level row has no Tabler icon. */
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .nav-link-icon:not(:has(.ti))::before {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dropdown-menu,
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dropdown-menu.p4s-open {
    display: none !important;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dropdown-menu.p4s-collapsed-flyout {
    display: block !important;
    position: fixed;
    z-index: 1080;
    min-width: 14rem;
    max-width: min(22rem, calc(100vw - 4rem));
    max-height: calc(100vh - 1rem);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0;
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    box-shadow: var(--tblr-box-shadow-lg, var(--tblr-box-shadow));
    border-radius: var(--tblr-border-radius);
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dropdown-menu.p4s-collapsed-flyout .dropdown-item {
    color: var(--tblr-body-color);
    padding: 0.35rem 0.85rem !important;
    white-space: nowrap;
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dropdown-menu.p4s-collapsed-flyout .dropdown-item:hover,
  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dropdown-menu.p4s-collapsed-flyout .dropdown-item:focus {
    color: var(--tblr-body-color);
    background-color: var(--tblr-bg-surface-secondary, var(--tblr-tertiary-bg, rgba(0, 0, 0, 0.04)));
  }

  html[data-sidebar-collapsed="1"][data-layout="vertical"] .navbar-vertical #sidebar-menu .dropdown-menu.p4s-collapsed-flyout .dropdown-item.active {
    color: var(--tblr-primary);
    background-color: transparent !important;
  }
}