/*
 * Renov'x brand theme — overrides Tabler defaults.
 *
 * Identity: black sidebar (already enforced by ``data-bs-theme="dark"`` on the
 * navbar) + orange accent on every primary control. Works in both light and
 * dark page themes; the orange stays the same so the brand reads identically
 * across modes.
 *
 * The ``--tblr-primary`` family drives buttons, links, focus rings, switches,
 * progress bars and the ``.text-primary`` / ``.bg-primary`` utility classes.
 * Overriding the variables propagates the change without touching component
 * styles individually.
 */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --tblr-primary: #f76707;
  --tblr-primary-rgb: 247, 103, 7;
  --tblr-primary-fg: #ffffff;
  --tblr-link-color: #f76707;
  --tblr-link-color-rgb: 247, 103, 7;
  --tblr-link-hover-color: #c4530a;
  --tblr-link-hover-color-rgb: 196, 83, 10;
}

.btn-primary,
.btn-primary:focus {
  --tblr-btn-bg: #f76707;
  --tblr-btn-border-color: #f76707;
  --tblr-btn-hover-bg: #d85a06;
  --tblr-btn-hover-border-color: #cc5505;
  --tblr-btn-active-bg: #cc5505;
  --tblr-btn-active-border-color: #b04a04;
  --tblr-btn-disabled-bg: #f76707;
  --tblr-btn-disabled-border-color: #f76707;
}

.btn-outline-primary {
  --tblr-btn-color: #f76707;
  --tblr-btn-border-color: #f76707;
  --tblr-btn-hover-bg: #f76707;
  --tblr-btn-hover-border-color: #f76707;
  --tblr-btn-active-bg: #cc5505;
  --tblr-btn-active-border-color: #cc5505;
}

.nav-link.active,
.nav-item.active > .nav-link {
  color: #f76707;
}

/*
 * Theme toggle button — placed in the admin page-header and the collaborator
 * navbar. The two icons are stacked and shown via ``data-theme-mode`` on the
 * root element so the user sees the current mode (sun = light, moon = dark).
 */

.theme-toggle {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.5rem;
  line-height: 1;
}

.theme-toggle .icon {
  width: 20px;
  height: 20px;
  display: none;
}

[data-theme-mode="light"] .theme-toggle .icon-light,
[data-theme-mode="dark"] .theme-toggle .icon-dark {
  display: inline-block;
}

/* Login page brand block */
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.login-brand img {
  max-height: 64px;
  max-width: 220px;
  height: auto;
  width: auto;
}

/* Alpine.js x-cloak — hide elements until Alpine initialises so x-show
   conditions do not flash on first paint. */
[x-cloak] { display: none !important; }