/* Application-specific Tabler overrides and demo helpers. */

/*
 * 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 {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

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

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

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