/* 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;
}

/*
 * 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 {
  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);
}

/*
 * 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;
}

/*
 * 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;
}

/*
 * 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;
}