/*
File: TaakBoard theme
Modern design layer over the Velzon/Bootstrap 5.3 template. Loaded after app.css and custom.css.

Light is the default theme; dark is applied with [data-bs-theme=dark] (see assets/js/layout.js).
Page code should use the --tb-* tokens below (or Bootstrap's --vz-* variables) instead of
hardcoded colors so both themes work:

  --tb-surface        card / panel background
  --tb-surface-2      subtle inset background (table heads, wells, hover rows)
  --tb-surface-3      stronger inset (weekend columns, disabled areas)
  --tb-border         default border
  --tb-border-strong  input / divider border
  --tb-text           body text
  --tb-heading        headings, emphasized text
  --tb-muted          secondary text
  --tb-subtle         tertiary text, placeholders
  --tb-brand          brand teal (for text/icons: --tb-brand-text)
  --tb-grid-line      chart/timeline grid lines
  --tb-today          "today" marker
  --tb-shadow-sm | --tb-shadow | --tb-shadow-lg
  --tb-radius-sm | --tb-radius | --tb-radius-lg
*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root,
:root[data-bs-theme=light] {
  --tb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tb-font-brand: "Quicksand", var(--tb-font);

  --tb-bg: #f5f6f8;
  --tb-surface: #ffffff;
  --tb-surface-2: #f8fafc;
  --tb-surface-3: #f1f5f9;
  --tb-border: #e5e7eb;
  --tb-border-strong: #d1d5db;
  --tb-text: #334155;
  --tb-heading: #0f172a;
  --tb-muted: #64748b;
  --tb-subtle: #94a3b8;
  --tb-brand: #0d9488;
  --tb-brand-text: #0f766e;
  --tb-brand-soft: rgba(13, 148, 136, 0.1);
  --tb-hover: rgba(15, 23, 42, 0.04);
  --tb-grid-line: #e5e7eb;
  --tb-today: #ef4444;
  --tb-focus: 0 0 0 3px rgba(13, 148, 136, 0.25);

  --tb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --tb-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --tb-shadow-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 4px 8px -4px rgba(15, 23, 42, 0.08);
  --tb-radius-sm: 6px;
  --tb-radius: 8px;
  --tb-radius-lg: 12px;

  /* Sidebar width (template default 250px); the topbar, content and footer offsets follow it */
  --vz-vertical-menu-width: 224px;

  /* Bootstrap / Velzon variables */
  --vz-font-sans-serif: var(--tb-font);
  --vz-body-font-family: var(--tb-font);
  --vz-body-bg: var(--tb-bg);
  --vz-body-bg-rgb: 245, 246, 248;
  --vz-body-color: var(--tb-text);
  --vz-body-color-rgb: 51, 65, 85;
  --vz-heading-color: var(--tb-heading);
  --vz-emphasis-color: var(--tb-heading);
  --vz-emphasis-color-rgb: 15, 23, 42;
  --vz-secondary-color: var(--tb-muted);
  --vz-secondary-bg: var(--tb-surface);
  --vz-secondary-bg-rgb: 255, 255, 255;
  --vz-tertiary-bg: var(--tb-surface-3);
  --vz-tertiary-bg-rgb: 241, 245, 249;
  --vz-border-color: var(--tb-border);
  --vz-border-color-translucent: var(--tb-border-strong);
  --vz-light: #f1f5f9;
  --vz-light-rgb: 241, 245, 249;
  --vz-border-radius: var(--tb-radius);
  --vz-border-radius-sm: var(--tb-radius-sm);
  --vz-border-radius-lg: var(--tb-radius-lg);
  --vz-box-shadow: var(--tb-shadow);
  --vz-box-shadow-sm: var(--tb-shadow-sm);
  --vz-box-shadow-lg: var(--tb-shadow-lg);
  --vz-link-color: var(--tb-brand-text);
  --vz-link-hover-color: #115e59;
  --vz-link-hover-color-rgb: 17, 94, 89;

  --vz-header-bg: rgba(255, 255, 255, 0.85);
  --vz-header-border: var(--tb-border);
  --vz-header-item-color: var(--tb-text);
  --vz-header-item-sub-color: var(--tb-muted);
  --vz-header-item-bg: var(--tb-surface-3);
  --vz-topbar-search-bg: var(--tb-surface-3);
  --vz-topbar-search-color: var(--tb-heading);
  --vz-topbar-user-bg: transparent;
  --vz-page-title-box-shadow: none;
  --vz-page-title-border: transparent;
  --vz-footer-bg: transparent;
  --vz-footer-color: var(--tb-subtle);
  --vz-input-bg-custom: var(--tb-surface);
  --vz-input-border-custom: var(--tb-border-strong);

  --vz-vertical-menu-bg: #ffffff;
  --vz-vertical-menu-border: var(--tb-border);
  --vz-vertical-menu-item-color: #475569;
  --vz-vertical-menu-item-bg: var(--tb-brand-soft);
  --vz-vertical-menu-item-hover-color: var(--tb-heading);
  --vz-vertical-menu-item-active-color: var(--tb-brand-text);
  --vz-vertical-menu-item-active-bg: var(--tb-brand-soft);
  --vz-vertical-menu-sub-item-color: #64748b;
  --vz-vertical-menu-sub-item-hover-color: var(--tb-heading);
  --vz-vertical-menu-sub-item-active-color: var(--tb-brand-text);
  --vz-vertical-menu-title-color: var(--tb-subtle);
  --vz-vertical-menu-box-shadow: none;
  --vz-vertical-menu-dropdown-box-shadow: var(--tb-shadow-lg);
  --tb-menu-hover-bg: rgba(15, 23, 42, 0.045);

  color-scheme: light;
}

:root[data-bs-theme=dark] {
  --tb-bg: #0e1116;
  --tb-surface: #161a21;
  --tb-surface-2: #1b2029;
  --tb-surface-3: #222833;
  --tb-border: #262d38;
  --tb-border-strong: #333b48;
  --tb-text: #cbd5e1;
  --tb-heading: #f1f5f9;
  --tb-muted: #94a3b8;
  --tb-subtle: #64748b;
  --tb-brand: #14b8a6;
  --tb-brand-text: #5eead4;
  --tb-brand-soft: rgba(20, 184, 166, 0.14);
  --tb-hover: rgba(255, 255, 255, 0.04);
  --tb-grid-line: #262d38;
  --tb-today: #f87171;
  --tb-focus: 0 0 0 3px rgba(20, 184, 166, 0.3);

  --tb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --tb-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --tb-shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 4px 10px -4px rgba(0, 0, 0, 0.4);

  --vz-primary: #14b8a6;
  --vz-primary-rgb: 20, 184, 166;
  --vz-primary-text-emphasis: #5eead4;
  --vz-primary-bg-subtle: rgba(20, 184, 166, 0.14);
  --vz-primary-border-subtle: #115e59;

  --vz-body-bg: var(--tb-bg);
  --vz-body-bg-rgb: 14, 17, 22;
  --vz-body-color: var(--tb-text);
  --vz-body-color-rgb: 203, 213, 225;
  --vz-heading-color: var(--tb-heading);
  --vz-emphasis-color: var(--tb-heading);
  --vz-emphasis-color-rgb: 241, 245, 249;
  --vz-secondary-color: var(--tb-muted);
  --vz-secondary-bg: var(--tb-surface);
  --vz-secondary-bg-rgb: 22, 26, 33;
  --vz-tertiary-bg: var(--tb-surface-3);
  --vz-tertiary-bg-rgb: 34, 40, 51;
  --vz-border-color: var(--tb-border);
  --vz-border-color-translucent: var(--tb-border-strong);
  --vz-light: #222833;
  --vz-light-rgb: 34, 40, 51;
  --vz-light-bg-subtle: #1b2029;
  --vz-light-border-subtle: #2a313c;
  --vz-dark: #2a313c;
  --vz-dark-rgb: 42, 49, 60;
  --vz-link-color: var(--tb-brand-text);
  --vz-link-color-rgb: 94, 234, 212;
  --vz-link-hover-color: #99f6e4;

  --vz-header-bg: rgba(14, 17, 22, 0.8);
  --vz-header-border: var(--tb-border);
  --vz-header-item-color: var(--tb-text);
  --vz-header-item-sub-color: var(--tb-muted);
  --vz-header-item-bg: var(--tb-surface-3);
  --vz-topbar-search-bg: var(--tb-surface-2);
  --vz-topbar-search-color: var(--tb-heading);
  --vz-topbar-user-bg: transparent;
  --vz-footer-bg: transparent;
  --vz-footer-color: var(--tb-subtle);
  --vz-input-bg-custom: var(--tb-surface-2);
  --vz-input-border-custom: var(--tb-border-strong);

  --vz-vertical-menu-bg: #12161c;
  --vz-vertical-menu-border: var(--tb-border);
  --vz-vertical-menu-item-color: #94a3b8;
  --vz-vertical-menu-item-bg: var(--tb-brand-soft);
  --vz-vertical-menu-item-hover-color: #f1f5f9;
  --vz-vertical-menu-item-active-color: var(--tb-brand-text);
  --vz-vertical-menu-item-active-bg: var(--tb-brand-soft);
  --vz-vertical-menu-sub-item-color: #94a3b8;
  --vz-vertical-menu-sub-item-hover-color: #f1f5f9;
  --vz-vertical-menu-sub-item-active-color: var(--tb-brand-text);
  --vz-vertical-menu-title-color: #64748b;
  --vz-twocolumn-menu-iconview-bg: #12161c;
  --tb-menu-hover-bg: rgba(255, 255, 255, 0.05);

  color-scheme: dark;
}

/* ============================================================
   2. Base
   ============================================================ */
body {
  font-family: var(--tb-font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--tb-bg);
  color: var(--tb-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--tb-font);
  color: var(--tb-heading);
  letter-spacing: -0.01em;
}

.ff-secondary,
.navbar-menu .navbar-nav .nav-link,
.navbar-menu .navbar-nav .nav-sm .nav-link {
  font-family: var(--tb-font);
}

.font-title { font-family: var(--tb-font); font-weight: 600; letter-spacing: -0.015em; }
.font-brand { font-family: var(--tb-font-brand); text-shadow: none; letter-spacing: -0.01em; }

.text-muted { color: var(--tb-muted) !important; }

a { text-underline-offset: 2px; }

::selection { background: rgba(13, 148, 136, 0.2); }

:focus-visible {
  outline: 2px solid var(--tb-brand);
  outline-offset: 2px;
}

/* Slim scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--tb-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--tb-border-strong);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* Theme switches animate colors briefly instead of snapping */
html.tb-theme-transition,
html.tb-theme-transition *,
html.tb-theme-transition *::before,
html.tb-theme-transition *::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

/* ============================================================
   3. Topbar
   ============================================================ */
#page-topbar {
  background-color: var(--vz-header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
          backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--vz-header-border);
  box-shadow: none;
}

.navbar-header { height: 64px; }

.app-search { padding: 12px 0; margin-left: 0.5rem; }
.app-search .form-control {
  height: 40px;
  min-width: 320px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding-right: 3rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.app-search .form-control::placeholder { color: var(--tb-subtle); }
.app-search .form-control:focus {
  background-color: var(--tb-surface);
  border-color: var(--tb-brand);
  box-shadow: var(--tb-focus);
}
.app-search span.search-widget-icon { color: var(--tb-subtle); }
.app-search .tb-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.app-search .form-control:focus ~ .tb-kbd { display: none; }

.tb-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font: 500 11px/1 var(--tb-font);
  color: var(--tb-muted);
  background: var(--tb-surface);
  border: 1px solid var(--tb-border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
}

.navbar-header .btn-topbar {
  width: 40px;
  height: 40px;
  border-radius: 10px !important;
  color: var(--tb-muted);
}
.navbar-header .btn-topbar:hover,
.navbar-header .btn-topbar:focus-visible {
  background-color: var(--tb-hover);
  color: var(--tb-heading);
}
.navbar-header .btn-topbar i { font-size: 20px !important; }

.topbar-badge { top: 8px !important; right: -2px !important; }

.topbar-user { background-color: transparent; }
.topbar-user .btn {
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.topbar-user .btn:hover { background-color: var(--tb-hover); }
.header-profile-user {
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 2px var(--tb-surface), 0 0 0 3px var(--tb-border);
}
.user-name-text { color: var(--tb-heading); font-size: 0.8125rem; }

.hamburger-icon span { background-color: var(--tb-muted); }

/* Notification dropdown header uses the brand instead of a pattern */
#notificationDropdown .dropdown-head {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
}

/* ============================================================
   4. Sidebar
   ============================================================ */
.navbar-menu {
  box-shadow: none;
  border-right: 1px solid var(--vz-vertical-menu-border);
}

.navbar-brand-box {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 1.25rem;
  text-align: left;
}
/* Collapsed icon rail: center the logo over the nav icons */
:root[data-sidebar-size=sm] .navbar-brand-box,
:root[data-sidebar-size=sm-hover] .navbar-menu:not(:hover) .navbar-brand-box {
  justify-content: center;
  padding: 0;
}
:root[data-sidebar-size=sm] .navbar-brand-box .btn-vertical-sm-hover,
:root[data-sidebar-size=sm-hover] .navbar-menu:not(:hover) .navbar-brand-box .btn-vertical-sm-hover { display: none; }
.navbar-brand-box .logo { line-height: 64px; }
.navbar-brand-box .logo img { margin: 0 !important; vertical-align: middle; }
.navbar-brand-box .logo .font-brand {
  color: var(--tb-heading);
  font-size: 1.25rem !important;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.navbar-menu .navbar-nav .menu-title {
  padding: 1.1rem 1.5rem 0.35rem;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
.navbar-menu .navbar-nav .menu-title span { padding: 0; }
.navbar-menu .navbar-nav .menu-title:first-child { padding-top: 0.5rem; }

.navbar-menu .navbar-nav .nav-link { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; }
.navbar-menu .navbar-nav .nav-link i { font-size: 1.15rem; line-height: 1.25rem; min-width: 1.75rem; }

/* Pill-style items when the sidebar shows labels */
:root:is([data-sidebar-size=lg], [data-sidebar-size=md]) .navbar-menu .navbar-nav > .nav-item > .nav-link,
:root .vertical-sidebar-enable .navbar-menu .navbar-nav > .nav-item > .nav-link {
  margin: 1px 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--tb-radius);
  transition: background-color 0.15s ease, color 0.15s ease;
}
:root:is([data-sidebar-size=lg], [data-sidebar-size=md]) .navbar-menu .navbar-nav > .nav-item > .nav-link:hover {
  background-color: var(--tb-menu-hover-bg);
}
.navbar-menu .navbar-nav .nav-link.active,
.navbar-menu .navbar-nav .nav-link.active i {
  color: var(--vz-vertical-menu-item-active-color) !important;
}
:root:is([data-sidebar-size=lg], [data-sidebar-size=md]) .navbar-menu .navbar-nav > .nav-item > .nav-link.active {
  background-color: var(--vz-vertical-menu-item-active-bg);
  font-weight: 600;
}
:root:is([data-sidebar-size=lg], [data-sidebar-size=md]) .navbar-menu .navbar-nav .nav-sm {
  padding-left: 2.5rem;
}
:root:is([data-sidebar-size=lg], [data-sidebar-size=md]) .navbar-menu .navbar-nav .nav-sm .nav-link {
  padding: 0.45rem 0.75rem !important;
  margin: 1px 0.75rem 1px 0;
  border-radius: var(--tb-radius-sm);
}
:root:is([data-sidebar-size=lg], [data-sidebar-size=md]) .navbar-menu .navbar-nav .nav-sm .nav-link::before { display: none; }
:root:is([data-sidebar-size=lg], [data-sidebar-size=md]) .navbar-menu .navbar-nav .nav-sm .nav-link:hover { background-color: var(--tb-menu-hover-bg); }
:root:is([data-sidebar-size=lg], [data-sidebar-size=md]) .navbar-menu .navbar-nav .nav-sm .nav-link.active { background-color: var(--vz-vertical-menu-item-active-bg); }

.navbar-menu .tb-nav-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  padding: 0.2em 0.55em;
  border-radius: 999px;
}

/* Sidebar footer card (theme toggle + signed in user) */
.tb-sidebar-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem;
  border-top: 1px solid var(--vz-vertical-menu-border);
  background: var(--vz-vertical-menu-bg);
}
:root[data-sidebar-size=sm] .tb-sidebar-footer,
:root[data-sidebar-size=sm-hover] .tb-sidebar-footer { display: none; }

/* ============================================================
   5. Page chrome
   ============================================================ */
.page-content { padding-top: calc(64px + 1.75rem); }
@media (min-width: 992px) {
  .page-content { padding-left: 1.25rem; padding-right: 1.25rem; }
}

.page-title-box {
  background: transparent;
  box-shadow: none;
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  gap: 0.75rem;
}
.page-title-box h4 {
  font-size: 1.5rem !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: none;
}
.page-title-box .breadcrumb { font-size: 0.8125rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--tb-subtle); }
.breadcrumb-item a { color: var(--tb-muted); }
.breadcrumb-item a:hover { color: var(--tb-brand-text); }
.breadcrumb-item.active { color: var(--tb-heading); }

.footer {
  border-top: 1px solid var(--tb-border);
  background: transparent;
  font-size: 0.8125rem;
}
.footer img { opacity: 0.7; transition: opacity 0.15s ease; }
.footer img:hover { opacity: 1; }
/* Brand mark: icon + text (like the sidebar logo) so the wordmark follows the theme */
.footer .tb-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--tb-heading);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.footer .tb-footer-brand:hover { opacity: 1; }
.footer .tb-footer-brand img { opacity: 1; }
.footer .tb-footer-brand .font-brand { font-size: 0.95rem; }
/* Partner logos have navy lettering; lift them off the dark background */
[data-bs-theme=dark] .footer a:not(.tb-footer-brand) img { filter: brightness(1.8); }

/* ============================================================
   6. Cards
   ============================================================ */
.card {
  --vz-card-border-width: 1px;
  --vz-card-border-color: var(--tb-border);
  --vz-card-border-radius: var(--tb-radius-lg);
  --vz-card-inner-border-radius: calc(var(--tb-radius-lg) - 1px);
  --vz-card-bg: var(--tb-surface);
  --vz-card-cap-bg: transparent;
  --vz-card-spacer-x: 1.25rem;
  --vz-card-spacer-y: 1.25rem;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-lg);
  box-shadow: var(--tb-shadow-sm);
  margin-bottom: 1.25rem;
}
.card-header {
  padding: 1rem 1.25rem;
  background-color: transparent;
  border-bottom: 1px solid var(--tb-border);
}
.card-header:first-child { border-radius: calc(var(--tb-radius-lg) - 1px) calc(var(--tb-radius-lg) - 1px) 0 0; }
.card-footer { background-color: transparent; border-top: 1px solid var(--tb-border); }
.card-title { font-size: 0.975rem; font-weight: 600; color: var(--tb-heading); }

.card-animate { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.card-animate:hover {
  transform: translateY(-2px);
  box-shadow: var(--tb-shadow-lg);
  border-color: var(--tb-border-strong);
}

/* Cards that used a colored border as decoration get a quieter accent */
.card.border.border-primary {
  border-color: var(--tb-border) !important;
  background: linear-gradient(120deg, var(--tb-brand-soft) 0%, transparent 55%), var(--tb-surface);
}

/* ============================================================
   7. Buttons, badges, avatars
   ============================================================ */
.btn {
  --vz-btn-font-weight: 500;
  border-radius: var(--tb-radius);
  font-weight: 500;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--tb-focus); outline: none; }
.btn-sm { border-radius: var(--tb-radius-sm); }
.btn-lg { border-radius: 10px; }
.btn.rounded-pill { border-radius: 999px; }
.btn.rounded-circle { border-radius: 50% !important; }

.btn-primary { box-shadow: 0 1px 2px rgba(13, 148, 136, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); }

.btn-light {
  --vz-btn-bg: var(--tb-surface);
  --vz-btn-border-color: var(--tb-border-strong);
  --vz-btn-color: var(--tb-heading);
  --vz-btn-hover-bg: var(--tb-surface-3);
  --vz-btn-hover-border-color: var(--tb-border-strong);
  --vz-btn-hover-color: var(--tb-heading);
  --vz-btn-active-bg: var(--tb-surface-3);
  --vz-btn-active-border-color: var(--tb-border-strong);
  --vz-btn-active-color: var(--tb-heading);
}

[data-bs-theme=dark] .btn-soft-primary { --vz-btn-color: var(--tb-brand-text); }
[data-bs-theme=dark] .btn-soft-primary:hover { --vz-btn-hover-color: #0e1116; }

.badge {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--tb-radius-sm);
  padding: 0.35em 0.6em;
}
.badge.rounded-pill { border-radius: 999px; }

.avatar-title { border-radius: var(--tb-radius); }
.avatar-title.rounded-circle { border-radius: 50%; }

.progress { background-color: var(--tb-surface-3); border-radius: 999px; }

/* ============================================================
   8. Forms
   ============================================================ */
.form-control,
.form-select,
.input-group-text {
  border-color: var(--tb-border-strong);
  border-radius: var(--tb-radius);
}
.form-control,
.form-select { background-color: var(--vz-input-bg-custom); color: var(--tb-heading); }
.form-control::placeholder { color: var(--tb-subtle); }
.form-control:focus,
.form-select:focus {
  border-color: var(--tb-brand);
  box-shadow: var(--tb-focus);
  background-color: var(--vz-input-bg-custom);
}
.form-control-sm, .form-select-sm { border-radius: var(--tb-radius-sm); }
.input-group-text { background-color: var(--tb-surface-2); color: var(--tb-muted); }
.form-label { font-weight: 500; color: var(--tb-heading); font-size: 0.8125rem; margin-bottom: 0.375rem; }
.form-check-input { border-color: var(--tb-border-strong); }
.form-check-input:focus { box-shadow: var(--tb-focus); border-color: var(--tb-brand); }
.form-check-input:checked { background-color: var(--tb-brand); border-color: var(--tb-brand); }
.form-text { color: var(--tb-muted); }

/* Choices.js, flatpickr inputs match */
.choices__inner { border-radius: var(--tb-radius) !important; border-color: var(--tb-border-strong) !important; background-color: var(--vz-input-bg-custom) !important; }

/* Select2 (assets/js/select2-init.js). The container carries the <select>'s classes
   (.form-select, .form-select-sm, .w-auto, ...) so page rules like ".toolbar .form-select"
   size it like the select it replaces. The visible box is .select2-selection, so the
   container itself drops the .form-select chrome. */
.select2-container.form-select { padding: 0; border: 0; background: none; box-shadow: none; }
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  height: auto;
  min-height: calc(1.5em + 1rem + var(--vz-border-width) * 2);
  border-color: var(--tb-border-strong) !important;
  border-radius: var(--tb-radius);
  background-color: var(--vz-input-bg-custom);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-select-sm.select2-container .select2-selection--single,
.form-select-sm.select2-container .select2-selection--multiple {
  min-height: calc(1.5em + 0.5rem + var(--vz-border-width) * 2);
  border-radius: var(--tb-radius-sm);
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0.5rem 2.7rem 0.5rem 0.9rem;
  line-height: 1.5;
  color: var(--tb-heading);
}
.form-select-sm.select2-container .select2-selection--single .select2-selection__rendered { padding: 0.25rem 2.25rem 0.25rem 0.5rem; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--tb-subtle); }
/* Same chevron as a native .form-select (the variable follows the theme) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  bottom: 0;
  right: 0.9rem;
  width: 16px;
  height: auto;
  background: var(--vz-form-select-bg-img) no-repeat center / 16px 12px;
  transition: transform .15s ease;
}
.form-select-sm.select2-container--default .select2-selection--single .select2-selection__arrow { right: 0.6rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-container--open .select2-selection--single .select2-selection__arrow { transform: rotate(180deg); }
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
  border-color: var(--tb-brand) !important;
  box-shadow: var(--tb-focus);
  outline: 0;
}
/* The dropdown floats below the box instead of fusing with it */
.select2-container--default.select2-container--open.select2-container--below .select2-selection,
.select2-container--default.select2-container--open.select2-container--above .select2-selection { border-radius: var(--tb-radius); }
.form-select-sm.select2-container--default.select2-container--open .select2-selection { border-radius: var(--tb-radius-sm); }
.select2-container--default.select2-container--disabled .select2-selection { background-color: var(--tb-surface-3); cursor: not-allowed; }
.select2-container--disabled .select2-selection__rendered { color: var(--tb-muted) !important; }

/* Inside .input-group (e.g. a select with an "add" button) */
.input-group > .select2-hidden-accessible:first-child + .select2-container { margin-left: 0; }
.input-group > .select2-container:not(:last-child) .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .select2-hidden-accessible:not(:first-child) + .select2-container .select2-selection { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* Form validation (the <select> stays right before its container) */
.was-validated select:valid + .select2-container .select2-selection,
select.is-valid + .select2-container .select2-selection { border-color: var(--vz-form-valid-border-color) !important; }
.was-validated select:invalid + .select2-container .select2-selection,
select.is-invalid + .select2-container .select2-selection { border-color: var(--vz-form-invalid-border-color) !important; }

/* Dropdown panel */
.select2-container .select2-dropdown {
  max-width: min(420px, calc(100vw - 32px));
  background-color: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow-lg);
  overflow: hidden;
}
.select2-container--open .select2-dropdown.select2-dropdown--below { margin-top: 4px; border-top: 1px solid var(--tb-border); border-radius: var(--tb-radius); }
.select2-container--open .select2-dropdown.select2-dropdown--above { margin-top: -4px; border-bottom: 1px solid var(--tb-border); border-radius: var(--tb-radius); }
.select2-container--default .select2-search--dropdown { padding: 6px 6px 2px; background-color: transparent; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--tb-border-strong);
  border-radius: var(--tb-radius-sm);
  background-color: var(--vz-input-bg-custom);
  color: var(--tb-heading);
  outline: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--tb-brand); box-shadow: var(--tb-focus); }
.select2-container--default .select2-results > .select2-results__options { max-height: 280px; padding: 4px; }
.select2-container .select2-results__option { padding: 0.45rem 0.65rem; border-radius: var(--tb-radius-sm); color: var(--tb-text); }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true]:hover { background-color: var(--tb-surface-3); color: var(--tb-heading); }
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option--selected[aria-selected=true] { background-color: var(--tb-brand-soft); color: var(--tb-brand-text); font-weight: 500; }
.select2-container--default .select2-results__option[aria-disabled=true] { color: var(--tb-subtle); }
.select2-container .select2-results__message { color: var(--tb-muted); }

/* ============================================================
   9. Tables
   ============================================================ */
.table {
  --vz-table-color: var(--tb-text);
  --vz-table-border-color: var(--tb-border);
  --vz-table-hover-bg: var(--tb-hover);
  --vz-table-striped-bg: var(--tb-surface-2);
  --vz-table-bg: transparent;
}
.table > :not(caption) > * > * { padding: 0.75rem 0.9rem; }
.table.table-sm > :not(caption) > * > * { padding: 0.45rem 0.6rem; }
.table > thead > tr > th,
.table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tb-muted);
  white-space: nowrap;
}
.table-light,
[data-bs-theme=dark] .table-light,
.table > thead.table-light > tr > th {
  --vz-table-color: var(--tb-muted);
  --vz-table-bg: var(--tb-surface-2);
  --vz-table-border-color: var(--tb-border);
  --vz-table-striped-color: var(--tb-muted);
  --vz-table-active-color: var(--tb-muted);
  --vz-table-hover-color: var(--tb-muted);
  --vz-table-striped-bg: var(--tb-surface-2);
  --vz-table-active-bg: var(--tb-surface-2);
  --vz-table-hover-bg: var(--tb-surface-2);
}
.table-hover > tbody > tr { transition: background-color 0.1s ease; }
.table-card { margin: -1.25rem; }
.table-card td:first-child, .table-card th:first-child { padding-left: 1.25rem; }
.table-card td:last-child, .table-card th:last-child { padding-right: 1.25rem; }
.table-card .table { margin-bottom: 0; }

/* DataTables / gridjs pagination & search */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border-radius: var(--tb-radius); border-color: var(--tb-border-strong); }
.page-link { border-radius: var(--tb-radius-sm); margin: 0 2px; border-color: var(--tb-border); color: var(--tb-text); }
.page-item.active .page-link { background-color: var(--tb-brand); border-color: var(--tb-brand); color: #fff; }

/* ============================================================
   10. Navs, dropdowns, modals, alerts
   ============================================================ */
.dropdown-menu {
  --vz-dropdown-bg: var(--tb-surface);
  --vz-dropdown-border-color: var(--tb-border);
  --vz-dropdown-link-color: var(--tb-text);
  --vz-dropdown-link-hover-color: var(--tb-heading);
  --vz-dropdown-link-hover-bg: var(--tb-hover);
  --vz-dropdown-link-active-color: var(--tb-brand-text);
  --vz-dropdown-link-active-bg: var(--tb-brand-soft);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-lg);
  box-shadow: var(--tb-shadow-lg);
  padding: 0.375rem;
}
.dropdown-menu .dropdown-item {
  border-radius: var(--tb-radius-sm);
  padding: 0.45rem 0.75rem;
}
.dropdown-menu .dropdown-header { padding: 0.5rem 0.75rem; color: var(--tb-muted); }
.dropdown-menu.p-0 { padding: 0 !important; overflow: hidden; }
.dropdown-menu.p-0 .dropdown-item { border-radius: 0; }
.dropdown-divider { border-color: var(--tb-border); margin: 0.375rem -0.375rem; }

.nav-tabs { border-bottom-color: var(--tb-border); }
.nav-tabs .nav-link { color: var(--tb-muted); font-weight: 500; border-top-left-radius: var(--tb-radius); border-top-right-radius: var(--tb-radius); }
.nav-tabs .nav-link:hover { color: var(--tb-heading); }
.nav-tabs .nav-link.active { color: var(--tb-brand-text); }
.nav-tabs-custom .nav-item .nav-link.active { color: var(--tb-brand-text); }
.nav-tabs-custom .nav-item .nav-link::after { background: var(--tb-brand); height: 2px; }
.nav-pills .nav-link { border-radius: var(--tb-radius); font-weight: 500; }

.modal-content {
  border: 1px solid var(--tb-border);
  border-radius: 14px;
  box-shadow: var(--tb-shadow-lg);
  background-color: var(--tb-surface);
}
.modal-header { border-bottom: 1px solid var(--tb-border); padding: 1rem 1.25rem; }
.modal-footer { border-top: 1px solid var(--tb-border); }
.modal-title { font-weight: 600; }
.modal-backdrop.show { opacity: 0.45; backdrop-filter: blur(2px); }

.offcanvas { border-color: var(--tb-border) !important; background-color: var(--tb-surface); }

.alert { border-radius: var(--tb-radius); }

.toast { border-radius: var(--tb-radius-lg); box-shadow: var(--tb-shadow-lg); border: 1px solid var(--tb-border); }
.tb-toast { background-color: var(--tb-surface); color: var(--tb-text); max-width: 360px; }
.tb-toast .toast-body { font-weight: 500; }

.list-group-item { border-color: var(--tb-border); background-color: transparent; }

.tooltip-inner { border-radius: var(--tb-radius-sm); font-size: 0.75rem; padding: 0.35rem 0.6rem; }

/* SweetAlert2 */
.swal2-popup { border-radius: 16px !important; font-family: var(--tb-font) !important; }
[data-bs-theme=dark] .swal2-popup { background: var(--tb-surface) !important; color: var(--tb-text) !important; }
[data-bs-theme=dark] .swal2-title,
[data-bs-theme=dark] .swal2-html-container { color: var(--tb-heading) !important; }

/* Preloader: quieter, theme-aware */
#preloader { background-color: var(--tb-bg); }

/* ============================================================
   11. Reusable UI patterns for pages
   ============================================================ */

/* Empty state: <div class="tb-empty"><div class="tb-empty-icon"><i class="ri-..."></i></div><h6>..</h6><p>..</p></div> */
.tb-empty { text-align: center; padding: 2.5rem 1rem; color: var(--tb-muted); }
.tb-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--tb-surface-3);
  color: var(--tb-muted);
  font-size: 1.5rem;
}
.tb-empty h5, .tb-empty h6 { color: var(--tb-heading); margin-bottom: 0.25rem; }
.tb-empty p { margin-bottom: 0; }

/* KPI tile label */
.tb-kpi-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tb-muted); }

/* Toolbar row that sits above a table or board */
.tb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Inset surface / well */
.tb-well { background: var(--tb-surface-2); border: 1px solid var(--tb-border); border-radius: var(--tb-radius); }

/* Theme toggle icon swap */
.tb-theme-toggle .tb-icon-dark { display: none; }
[data-bs-theme=dark] .tb-theme-toggle .tb-icon-light { display: none; }
[data-bs-theme=dark] .tb-theme-toggle .tb-icon-dark { display: inline-block; }

/* bg-light / text-dark utilities stay legible in dark mode */
[data-bs-theme=dark] .bg-light { background-color: var(--tb-surface-3) !important; }
[data-bs-theme=dark] .text-dark { color: var(--tb-heading) !important; }
[data-bs-theme=dark] .bg-white { background-color: var(--tb-surface) !important; }
[data-bs-theme=dark] .border-light { border-color: var(--tb-border) !important; }

/* ============================================================
   12. Mobile
   ============================================================ */
@media (max-width: 767.98px) {
  .page-content { padding-top: calc(64px + 1rem); }
  .page-title-box { margin-bottom: 1rem; }
  .page-title-box h4 { font-size: 1.25rem; margin-bottom: 0.25rem !important; }
  .card { margin-bottom: 1rem; }
  .card-header, .card-body { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 1199.98px) {
  .app-search .form-control { min-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; }
}

/* ============================================================
   13. Semantic text contrast (light mode)
   Velzon's semantic colors are pastels that read poorly as text on white.
   In light mode, text / soft buttons / soft badges use deeper shades;
   solid fills (bg-success, btn-success, charts) are unchanged.
   ============================================================ */
:root[data-bs-theme=light] {
  --tb-text-primary: #0f766e;
  --tb-text-secondary: #4f5ea8;
  --tb-text-success: #15803d;
  --tb-text-info: #0369a1;
  --tb-text-warning: #b45309;
  --tb-text-danger: #c2410c;
}
:root[data-bs-theme=light] .text-primary { color: var(--tb-text-primary) !important; }
:root[data-bs-theme=light] .text-secondary { color: var(--tb-text-secondary) !important; }
:root[data-bs-theme=light] .text-success { color: var(--tb-text-success) !important; }
:root[data-bs-theme=light] .text-info { color: var(--tb-text-info) !important; }
:root[data-bs-theme=light] .text-warning { color: var(--tb-text-warning) !important; }
:root[data-bs-theme=light] .text-danger { color: var(--tb-text-danger) !important; }
:root[data-bs-theme=light] .link-success { color: var(--tb-text-success) !important; }
:root[data-bs-theme=light] .link-danger { color: var(--tb-text-danger) !important; }
:root[data-bs-theme=light] .link-info { color: var(--tb-text-info) !important; }
:root[data-bs-theme=light] .link-warning { color: var(--tb-text-warning) !important; }
:root[data-bs-theme=light] .btn-soft-primary { --vz-btn-color: var(--tb-text-primary); }
:root[data-bs-theme=light] .btn-soft-secondary { --vz-btn-color: var(--tb-text-secondary); }
:root[data-bs-theme=light] .btn-soft-success { --vz-btn-color: var(--tb-text-success); }
:root[data-bs-theme=light] .btn-soft-info { --vz-btn-color: var(--tb-text-info); }
:root[data-bs-theme=light] .btn-soft-warning { --vz-btn-color: var(--tb-text-warning); }
:root[data-bs-theme=light] .btn-soft-danger { --vz-btn-color: var(--tb-text-danger); }
:root[data-bs-theme=light] .btn-ghost-success { --vz-btn-color: var(--tb-text-success); }
:root[data-bs-theme=light] .btn-ghost-danger { --vz-btn-color: var(--tb-text-danger); }
:root[data-bs-theme=light] .btn-outline-success { --vz-btn-color: var(--tb-text-success); }
:root[data-bs-theme=light] .btn-outline-info { --vz-btn-color: var(--tb-text-info); }
:root[data-bs-theme=light] .btn-outline-warning { --vz-btn-color: var(--tb-text-warning); }

/* ============================================================
   14. Shared page helpers
   ============================================================ */
.min-w-0 { min-width: 0 !important; }

/* Optional subtitle under the page title, and action buttons on the right */
.page-title-box p { margin: 0.25rem 0 0; color: var(--tb-muted); font-size: 0.875rem; }
.page-title-box .page-title-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Empty states with a call to action */
.tb-empty .btn { margin-top: 1rem; }

/* Legend chips (status / manufacturer color keys) */
.tb-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tb-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--tb-border);
  border-radius: 999px;
  background: var(--tb-surface);
  font-size: 0.75rem;
  color: var(--tb-text);
  white-space: nowrap;
}
.tb-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* DataTables: row groups, search, info */
table.dataTable tr.dtrg-group td,
table.dataTable tr.dtrg-group th { background: var(--tb-surface-2) !important; color: var(--tb-heading); font-weight: 600; }
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }
.dataTables_wrapper .dataTables_info { color: var(--tb-muted); font-size: 0.8125rem; }
@media (max-width: 575.98px) {
  .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; margin-left: 0 !important; }
}

/* Back-to-top: neutral floating button instead of red */
#back-to-top.btn {
  --vz-btn-bg: var(--tb-surface);
  --vz-btn-border-color: var(--tb-border-strong);
  --vz-btn-color: var(--tb-heading);
  --vz-btn-hover-bg: var(--tb-brand);
  --vz-btn-hover-border-color: var(--tb-brand);
  --vz-btn-hover-color: #fff;
  --vz-btn-active-bg: var(--tb-brand);
  --vz-btn-active-border-color: var(--tb-brand);
  box-shadow: var(--tb-shadow-lg);
  border-radius: 12px;
}

/* btn-light: beat Velzon's [data-bs-theme=dark] .btn-light muted text */
[data-bs-theme] .btn-light,
[data-bs-theme] .btn-outline-light {
  --vz-btn-color: var(--tb-heading);
  --vz-btn-hover-color: var(--tb-heading);
  --vz-btn-active-color: var(--tb-heading);
}

/* Alerts: readable text on light backgrounds (Velzon's are pastel) */
:root[data-bs-theme=light] .alert-danger { --vz-alert-color: #b42318; --vz-alert-bg: #fef3f2; --vz-alert-border-color: #fecdca; }
:root[data-bs-theme=light] .alert-success { --vz-alert-color: #067647; --vz-alert-bg: #ecfdf3; --vz-alert-border-color: #abefc6; }
:root[data-bs-theme=light] .alert-info { --vz-alert-color: #175cd3; --vz-alert-bg: #eff8ff; --vz-alert-border-color: #b2ddff; }
:root[data-bs-theme=light] .alert-warning { --vz-alert-color: #b54708; --vz-alert-bg: #fffaeb; --vz-alert-border-color: #fedf89; }
:root[data-bs-theme=light] .alert-primary { --vz-alert-color: #0f766e; --vz-alert-bg: #f0fdfa; --vz-alert-border-color: #99f6e4; }
.alert { border-width: 1px; }
.tb-alert { display: flex; align-items: flex-start; gap: 0.6rem; }
.tb-alert > i { font-size: 1.1rem; line-height: 1.25rem; flex-shrink: 0; }

/* Code chip, small ghost icon button, KPI value */
.tb-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tb-brand-text);
  background: var(--tb-brand-soft);
  padding: 0.2rem 0.45rem;
  border-radius: var(--tb-radius-sm);
  white-space: nowrap;
}
.tb-kpi-value { font-size: 1.625rem; font-weight: 700; color: var(--tb-heading); line-height: 1.2; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }

/* DataTables: row shading follows the theme; Responsive 2.5 expand arrow without Velzon's solid box */
[data-bs-theme=dark] table.dataTable { --dt-row-stripe: 255, 255, 255; --dt-row-hover: 255, 255, 255; --dt-row-selected: 20, 184, 166; }
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent.parent > th.dtr-control::before {
  background-color: transparent;
  box-shadow: none;
  color: var(--tb-muted);
}
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--tb-muted); }

/* Inactive custom tabs are muted, not link-teal */
.nav-tabs-custom .nav-item .nav-link { color: var(--tb-muted); }
.nav-tabs-custom .nav-item .nav-link:hover { color: var(--tb-heading); }

/* Solid semantic fills: Velzon's pastels can't carry white text, so buttons and
   solid backgrounds use deeper shades (subtle/soft variants and text colors are unaffected) */
.btn-success {
  --vz-btn-bg: #16a34a; --vz-btn-border-color: #16a34a;
  --vz-btn-hover-bg: #15803d; --vz-btn-hover-border-color: #15803d;
  --vz-btn-active-bg: #166534; --vz-btn-active-border-color: #166534;
  --vz-btn-disabled-bg: #16a34a; --vz-btn-disabled-border-color: #16a34a;
  --vz-btn-color: #fff; --vz-btn-hover-color: #fff; --vz-btn-active-color: #fff;
}
.btn-danger {
  --vz-btn-bg: #dc2626; --vz-btn-border-color: #dc2626;
  --vz-btn-hover-bg: #b91c1c; --vz-btn-hover-border-color: #b91c1c;
  --vz-btn-active-bg: #991b1b; --vz-btn-active-border-color: #991b1b;
  --vz-btn-disabled-bg: #dc2626; --vz-btn-disabled-border-color: #dc2626;
  --vz-btn-color: #fff; --vz-btn-hover-color: #fff; --vz-btn-active-color: #fff;
}
.btn-info {
  --vz-btn-bg: #0284c7; --vz-btn-border-color: #0284c7;
  --vz-btn-hover-bg: #0369a1; --vz-btn-hover-border-color: #0369a1;
  --vz-btn-active-bg: #075985; --vz-btn-active-border-color: #075985;
  --vz-btn-disabled-bg: #0284c7; --vz-btn-disabled-border-color: #0284c7;
  --vz-btn-color: #fff; --vz-btn-hover-color: #fff; --vz-btn-active-color: #fff;
}
.btn-warning {
  --vz-btn-bg: #d97706; --vz-btn-border-color: #d97706;
  --vz-btn-hover-bg: #b45309; --vz-btn-hover-border-color: #b45309;
  --vz-btn-active-bg: #92400e; --vz-btn-active-border-color: #92400e;
  --vz-btn-disabled-bg: #d97706; --vz-btn-disabled-border-color: #d97706;
  --vz-btn-color: #fff; --vz-btn-hover-color: #fff; --vz-btn-active-color: #fff;
}
/* Scoped variable override: only the element's own background changes, opacity utilities keep working */
.bg-success, .text-bg-success { --vz-success-rgb: 22, 163, 74; }
.bg-danger, .text-bg-danger { --vz-danger-rgb: 220, 38, 38; }
.bg-info, .text-bg-info { --vz-info-rgb: 2, 132, 199; }
.bg-warning, .text-bg-warning { --vz-warning-rgb: 217, 119, 6; }

/* ---------- @mentions (php/mentions.php, assets/js/mentions.js) ---------- */
.tb-mention {
  color: var(--tb-brand-text);
  background: var(--tb-brand-soft);
  font-weight: 600;
  border-radius: 4px;
  padding: 0 0.2em;
  white-space: nowrap;
}
.tb-mention-menu {
  position: absolute;
  z-index: 1080;
  min-width: 240px;
  max-width: 320px;
  max-height: 264px;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--tb-surface);
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow-lg);
}
.tb-mention-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--tb-radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--tb-text);
}
.tb-mention-option.active { background: var(--tb-brand-soft); }
.tb-mention-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--tb-brand-soft);
  color: var(--tb-brand-text);
  font-size: 0.6875rem;
  font-weight: 600;
}
.tb-mention-name { font-weight: 500; color: var(--tb-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-mention-username { margin-left: auto; padding-left: 0.5rem; color: var(--tb-muted); font-size: 0.75rem; white-space: nowrap; }

/* The comment a mention link points at (project.php#comment-123) */
@keyframes tb-comment-target {
  0%, 60% { box-shadow: 0 0 0 3px var(--tb-brand-soft), 0 0 0 1px var(--tb-brand); }
  100% { box-shadow: 0 0 0 3px transparent, 0 0 0 1px transparent; }
}
.tb-comment--target .tb-comment-bubble { animation: tb-comment-target 3s ease-out; }