/**
 * SmartTenant UI layer — fin-aligned surfaces, elevation, density
 * Visual skin only (no logic). Brand accent: rent-management navy (#1e4d8c).
 */
body,
.auth-main,
.landing-page,
.pc-container,
.pc-content {
  font-family: var(--st-font-sans);
  font-size: var(--st-text-base);
  line-height: var(--st-leading-body);
  font-weight: var(--st-weight-regular);
  color: var(--st-text);
  background: var(--st-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.pc-sidebar {
  font-family: var(--st-font-sans);
  font-size: var(--st-text-base);
  line-height: var(--st-leading-body);
  font-weight: var(--st-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--st-font-sans);
  font-weight: var(--st-weight-bold);
  color: var(--st-text);
  letter-spacing: -0.01em;
  line-height: var(--st-leading-tight);
}

h1, .h1 { font-size: var(--st-text-2xl); }
h2, .h2 { font-size: var(--st-text-xl); }
h3, .h3, h4, .h4, h5, .h5 { font-size: var(--st-text-lg); }
h6, .h6 { font-size: var(--st-text-base); }

small, .small, .text-muted {
  font-size: var(--st-text-sm);
  color: var(--st-text-secondary) !important;
  line-height: var(--st-leading-snug);
}

.form-label {
  font-size: var(--st-text-sm);
  font-weight: var(--st-weight-medium);
  color: var(--st-muted);
  margin-bottom: 6px;
}

.pc-content {
  background: var(--st-bg);
}

.card {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow);
  background: var(--st-surface);
}

.card-body {
  padding: var(--st-space-lg);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--st-border-subtle);
}

.btn-primary,
.btn-secondary,
.btn-rounded {
  border-radius: var(--st-radius-btn);
  font-weight: 600;
  font-size: var(--st-text-base);
  line-height: var(--st-leading-snug);
  padding: 0.6rem 1.2rem;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}

.btn-primary {
  background: var(--st-brand);
  border-color: var(--st-brand);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--st-brand-hover);
  border-color: var(--st-brand-hover);
  color: #ffffff;
  box-shadow: var(--st-shadow-sm);
}

.btn-secondary {
  background: var(--st-text);
  border: 1px solid var(--st-text);
  color: var(--st-surface);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--st-text);
  border-color: var(--st-text);
  color: var(--st-surface);
  opacity: 0.9;
  box-shadow: none;
}

.btn-outline-primary {
  border-radius: var(--st-radius-btn);
  border-color: var(--st-brand);
  color: var(--st-brand);
  font-weight: 600;
}

.btn-outline-primary:hover {
  background: var(--st-brand);
  border-color: var(--st-brand);
  color: #fff;
}

.btn-outline-google {
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  color: var(--st-text);
  border-radius: var(--st-radius-btn);
  font-weight: 600;
  width: 100%;
  padding: 0.75rem 1rem;
}

.btn-outline-google:hover {
  background: var(--st-bg-secondary);
  border-color: var(--st-border);
}

.form-control,
.form-select {
  border-radius: var(--st-radius-input);
  border: 1px solid var(--st-border);
  background: var(--st-surface);
  color: var(--st-text);
  font-size: var(--st-text-base);
  font-family: var(--st-font-sans);
  padding: 0.7rem 0.9rem;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--st-brand);
  box-shadow: 0 0 0 0.2rem rgba(var(--st-brand-rgb), 0.2);
  background: var(--st-surface);
  color: var(--st-text);
}

.form-control::placeholder {
  color: var(--st-muted);
}

.nav-tabs.profile-tabs {
  border-bottom: 1px solid var(--st-border);
  gap: 0;
}

.nav-tabs.profile-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--st-text-secondary);
  font-size: var(--st-text-base);
  font-weight: var(--st-weight-medium);
  padding: 0.9rem 1rem;
  background: transparent;
}

.nav-tabs.profile-tabs .nav-link:hover {
  color: var(--st-text);
  background: var(--st-hover);
  border-bottom-color: transparent;
}

.nav-tabs.profile-tabs .nav-link.active {
  color: var(--st-brand);
  font-weight: var(--st-weight-bold);
  background: transparent;
  border-bottom-color: var(--st-brand);
}

.auth-main {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(68, 77, 219, 0.16), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(68, 77, 219, 0.1), transparent 50%),
    linear-gradient(160deg, #eef2fb 0%, #f4f7fb 42%, #e8edf6 100%);
  min-height: 100vh;
}

.auth-main .auth-wrapper.v2 .card,
.auth-main .auth-form .card {
  border: none;
  background: transparent;
  box-shadow: none;
  max-width: none;
  margin: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.25rem 0;
  color: var(--st-text-secondary);
  font-size: var(--st-text-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--st-border);
}

/* ── App chrome: brand gradient (match landing navbar) ─────── */
.pc-sidebar,
.pc-header {
  background: linear-gradient(135deg, var(--st-brand) 0%, var(--st-brand-dark) 100%) !important;
  border: none;
  box-shadow: var(--st-shadow);
  color: rgba(255, 255, 255, 0.92);
}

.pc-sidebar {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.pc-header {
  backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pc-sidebar .navbar-wrapper {
  background: transparent;
}

/* Logo block — consistent height / spacing with header */
.pc-sidebar .m-header {
  height: 80px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pc-sidebar .m-header .b-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: var(--st-radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
}

.pc-sidebar .m-header .logo-lg {
  display: block;
  max-height: 36px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
}

.pc-sidebar .navbar-content {
  padding: 12px 0 28px;
}

/* Captions */
.pc-sidebar .pc-caption {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 16px 20px 6px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.pc-sidebar .pc-caption:first-child {
  padding-top: 8px !important;
}

.pc-sidebar .pc-caption label {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Top-level items — shared horizontal inset */
.pc-sidebar .pc-navbar > .pc-item {
  margin: 2px 12px;
}

.pc-sidebar .pc-navbar > .pc-item.pc-caption {
  margin-left: 0;
  margin-right: 0;
}

/* Links — flex alignment (icon / text / arrow) */
.pc-sidebar .pc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0.62rem 0.85rem;
  min-height: 42px;
  border-radius: var(--st-radius-md);
  font-weight: var(--st-weight-medium);
  font-size: 0.9rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.88) !important;
  position: relative;
  z-index: 0;
}

.pc-sidebar .pc-micon {
  margin-right: 0;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
}

.pc-sidebar .pc-micon i,
.pc-sidebar .pc-micon svg {
  color: inherit;
  font-size: 1rem;
  line-height: 1;
}

.pc-sidebar .pc-mtext {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  text-transform: none;
}

.pc-sidebar .pc-arrow {
  float: none;
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.7);
}

.pc-sidebar .pc-badge {
  float: none;
  margin-left: auto;
  margin-right: 0;
}

/* Hover / active — translucent white overlays */
.pc-sidebar .pc-navbar > .pc-item > .pc-link::after {
  border-radius: var(--st-radius-md);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  background: #fff;
  z-index: -1;
}

.pc-sidebar .pc-navbar > .pc-item:hover:not(.active) > .pc-link::after {
  opacity: 0.12;
  background: #fff;
}

.pc-sidebar .pc-navbar > .pc-item.active > .pc-link::after,
.pc-sidebar .pc-navbar > .pc-item.pc-trigger > .pc-link::after {
  opacity: 0.18;
  background: #fff;
}

.pc-sidebar .pc-item.active > .pc-link,
.pc-sidebar .pc-item.pc-trigger > .pc-link,
.pc-sidebar .pc-link:hover,
.pc-sidebar .pc-link:focus {
  background: transparent;
  color: #ffffff !important;
  font-weight: 600;
}

.pc-sidebar .pc-item.active > .pc-link .pc-micon i,
.pc-sidebar .pc-item.active > .pc-link .pc-micon svg,
.pc-sidebar .pc-link:hover .pc-micon i,
.pc-sidebar .pc-link:hover .pc-micon svg,
.pc-sidebar .pc-link.active .pc-micon i {
  color: #ffffff !important;
}

/* Left active rail — aligned with link padding */
.pc-sidebar .pc-navbar > .pc-item.active > .pc-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: #ffffff;
  z-index: 1;
}

/* Nested submenu — consistent indent + light rail */
.pc-sidebar .pc-navbar > .pc-item .pc-submenu {
  margin: 2px 0 6px;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu::after {
  left: 22px;
  background: rgba(255, 255, 255, 0.22);
}

.pc-sidebar .pc-caption i {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.85rem;
  opacity: 1;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-link {
  padding: 0.55rem 0.85rem 0.55rem 1.15rem;
  min-height: 38px;
  font-size: 0.86rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78) !important;
  gap: 0.55rem;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item > .pc-link::after {
  display: none;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-link > i.fa-solid,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-link > i.fas {
  width: 1.1rem;
  flex-shrink: 0;
  text-align: center;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9) !important;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.active > .pc-link,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item:hover > .pc-link {
  color: #ffffff !important;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item.active > .pc-link > i,
.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-item:hover > .pc-link > i {
  color: #ffffff !important;
  opacity: 1;
}

.pc-sidebar .pc-navbar > .pc-item .pc-submenu .pc-submenu .pc-link {
  padding-left: 2rem;
}

/* Header controls on brand chrome */
.pc-header .pc-head-link.head-link-secondary,
.pc-header .pc-head-link.head-link-primary {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.pc-header .pc-head-link.head-link-secondary > i,
.pc-header .pc-head-link.head-link-primary > i,
.pc-header .pc-head-link > i {
  color: #ffffff;
}

.pc-header .pc-head-link.head-link-secondary:hover,
.pc-header .pc-head-link.head-link-primary:hover,
.pc-header .pc-head-link:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.pc-header .pc-head-link.head-link-secondary:hover > i,
.pc-header .pc-head-link.head-link-primary:hover > i,
.pc-header .pc-head-link:hover > i {
  color: #ffffff;
}

.pc-header .pc-head-link .user-name,
.pc-header .pc-head-link .user-desc {
  color: rgba(255, 255, 255, 0.92);
}

.pc-header .header-search .form-control,
.pc-header .header-search .datatable-input,
.pc-header .header-search .custom-select,
.pc-header .header-search .dataTable-selector,
.pc-header .header-search .dataTable-input {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: none;
}

.pc-header .header-search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.pc-header .header-search .icon-search {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  pointer-events: none;
}

/* Dark / lights-out: keep brand chrome, slightly deeper stop */
[data-pc-theme="dark"] .pc-sidebar,
[data-pc-theme="dark"] .pc-header,
[data-pc-theme="lights-out"] .pc-sidebar,
[data-pc-theme="lights-out"] .pc-header {
  background: linear-gradient(135deg, var(--st-brand) 0%, #1e1b4b 100%) !important;
}

.page-header {
  background: transparent;
  border: none;
  padding-top: var(--st-space-md);
}

.page-header-title h5 {
  font-size: var(--st-text-xl);
  font-weight: var(--st-weight-bold);
  color: var(--st-text);
}

.st-stat-card {
  border-radius: var(--st-radius-md);
  border: 1px solid var(--st-border);
  box-shadow: var(--st-shadow);
  padding: var(--st-space-lg);
  background: var(--st-surface);
  height: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.st-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(26, 35, 50, 0.12);
}

.st-stat-card .st-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--st-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--st-brand-light);
  color: var(--st-brand);
}

.st-stat-card .st-stat-value {
  font-size: var(--st-text-2xl);
  font-weight: var(--st-weight-bold);
  color: var(--st-text);
  letter-spacing: -0.03em;
  margin-top: var(--st-space-sm);
}

.st-stat-card .st-stat-label {
  color: var(--st-text-secondary);
  font-size: var(--st-text-sm);
}

.currency-picker-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--st-surface);
  padding-bottom: var(--st-space-sm);
  margin-bottom: var(--st-space-sm);
}

.currency-picker-grid {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}

.currency-picker-item {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.currency-picker-item:has(input:checked) {
  border-color: var(--st-brand);
  background: var(--st-brand-light);
}

#firebase-phone-container {
  margin-top: var(--st-space-md);
}

.landing-page {
  background: var(--st-bg);
}

.landing-page .navbar,
.landing-page .navbar.default {
  background: linear-gradient(135deg, var(--st-brand) 0%, var(--st-brand-dark) 100%) !important;
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: var(--st-shadow);
}

.landing-page .navbar .nav-link {
  color: rgba(255, 255, 255, 0.92) !important;
}

.landing-page .navbar .nav-link:hover,
.landing-page .navbar .nav-link.active {
  color: #ffffff !important;
}

.landing-page .navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.45);
}

.landing-page .navbar .navbar-toggler-icon {
  filter: invert(1) brightness(2);
}

.landing-page .navbar .btn-secondary {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--st-brand);
  border-radius: var(--st-radius-btn);
  font-weight: 600;
}

.landing-page .navbar .btn-secondary:hover,
.landing-page .navbar .btn-secondary:focus {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: var(--st-brand-dark);
}

.landing-page .navbar .st-language-switcher .btn-outline-secondary {
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  background: transparent;
}

.landing-page .navbar .st-language-switcher .btn-outline-secondary:hover,
.landing-page .navbar .st-language-switcher .btn-outline-secondary:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

.landing-page .btn-primary {
  background: var(--st-brand);
  border-color: var(--st-brand);
  border-radius: var(--st-radius-btn);
}

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

a.text-secondary:hover {
  color: var(--st-brand) !important;
}

/* ── Bootstrap / preset bridge ───────────────────────────── */
:root,
[data-pc-preset] {
  --bs-primary: var(--st-brand);
  --bs-primary-rgb: var(--st-brand-rgb);
  --bs-primary-light: var(--st-brand-light);
  --bs-link-color: var(--st-brand);
  --bs-link-color-rgb: var(--st-brand-rgb);
  --bs-link-hover-color: var(--st-brand-hover);
  --bs-body-bg: var(--st-bg);
  --bs-body-color: var(--st-text);
  --bs-border-color: var(--st-border);
  --pc-sidebar-background: transparent;
  --pc-sidebar-color: rgba(255, 255, 255, 0.88);
  --pc-sidebar-color-rgb: 255, 255, 255;
  --pc-sidebar-active-color: #ffffff;
  --pc-sidebar-active-color-rgb: 255, 255, 255;
  --pc-sidebar-caption-color: rgba(255, 255, 255, 0.55);
  --pc-sidebar-submenu-border-color: rgba(255, 255, 255, 0.22);
  --pc-sidebar-border: 1px solid rgba(255, 255, 255, 0.1);
  --pc-header-background: transparent;
  --pc-header-color: rgba(255, 255, 255, 0.92);
  --dt-row-selected: var(--st-brand-rgb);
}

.bg-primary,
.btn-primary,
.badge.bg-primary {
  background-color: var(--st-brand) !important;
  border-color: var(--st-brand) !important;
}

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

.bg-light-primary,
.badge.bg-light-primary {
  background-color: var(--st-brand-light) !important;
  color: var(--st-brand) !important;
}

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

/* ── Borderless cards ──────────────────────────────────────── */
.card.border-0 {
  border: 1px solid var(--st-border) !important;
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow);
  background: var(--st-surface);
}

.card.border-0 > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--st-border);
  padding: var(--st-space-md) var(--st-space-lg);
}

.card.border-0 > .card-header h5 {
  font-size: var(--st-text-lg);
  font-weight: 600;
  margin-bottom: 0;
}

/* ── Modal chrome ─────────────────────────────────────────── */
#customModal .modal-content,
.modal-content {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow);
}

#customModal .modal-header,
.modal-header {
  border-bottom: 1px solid var(--st-border);
  padding: var(--st-space-md) var(--st-space-lg);
}

#customModal .modal-title,
.modal-title {
  font-weight: 600;
  font-size: var(--st-text-lg);
  color: var(--st-text);
}

#customModal .modal-body,
.modal-body {
  padding: var(--st-space-lg);
}

#customModal .modal-footer,
.modal-footer {
  border-top: 1px solid var(--st-border);
  padding: var(--st-space-md) var(--st-space-lg);
  gap: var(--st-space-sm);
}

/* ── Tables & DataTables ───────────────────────────────────── */
.table {
  --bs-table-border-color: var(--st-border);
  color: var(--st-text);
}

.table {
  font-size: 0.875rem;
}

.table > thead > tr > th {
  font-size: var(--st-text-sm);
  font-weight: 600;
  color: var(--st-text-secondary);
  border-bottom-width: 1px;
  background: color-mix(in srgb, var(--st-brand) 6%, var(--st-surface));
}

.table > tbody > tr > td {
  vertical-align: middle;
  border-color: var(--st-border);
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--st-brand-light);
}

.table-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--st-border);
}

div.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper .dataTables_length select {
  border-radius: var(--st-radius-sm);
  border-color: var(--st-border);
}

div.dataTables_wrapper .dataTables_filter input:focus,
div.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--st-brand);
  box-shadow: 0 0 0 3px rgba(var(--st-brand-rgb), 0.12);
  outline: none;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--st-brand) !important;
  border-color: var(--st-brand) !important;
  color: #fff !important;
  border-radius: var(--st-radius-sm);
}

/* ── Form focus on buttons ─────────────────────────────────── */
.btn:focus-visible,
.btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 3px rgba(var(--st-brand-rgb), 0.25);
}

/* ── Portal badges & buttons ───────────────────────────────── */
.portal-badge,
.badge.rounded-pill.bg-primary.bg-opacity-10 {
  background: var(--st-brand-light) !important;
  color: var(--st-brand) !important;
  border: 1px solid rgba(var(--st-brand-rgb), 0.15) !important;
  font-weight: 500;
}

.btn-sm.btn-light {
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  color: var(--st-text);
  font-weight: 500;
}

.btn-sm.btn-light:hover {
  background: var(--st-brand-light);
  border-color: var(--st-brand);
  color: var(--st-brand);
}

.list-group-item-action {
  font-weight: 500;
  color: var(--st-text);
}

.list-group-item-action:hover {
  background: var(--st-brand-light);
  color: var(--st-brand);
}

.list-group-item-action i {
  color: var(--st-text-secondary);
  width: 1.25rem;
  text-align: center;
}

/* ── Utility classes ───────────────────────────────────────── */
.st-card {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);
  box-shadow: var(--st-shadow);
  background: var(--st-surface);
}

.st-page-title {
  font-size: var(--st-text-xl);
  font-weight: 600;
  color: var(--st-text);
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.st-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--st-radius-pill);
  font-size: var(--st-text-xs);
  font-weight: 600;
  background: var(--st-brand-light);
  color: var(--st-brand);
  border: 1px solid rgba(var(--st-brand-rgb), 0.15);
}

.st-badge-success {
  background: rgba(0, 122, 4, 0.1);
  color: var(--st-success);
  border-color: rgba(0, 122, 4, 0.2);
}

.st-badge-warning {
  background: rgba(196, 92, 0, 0.1);
  color: var(--st-warning);
  border-color: rgba(196, 92, 0, 0.2);
}

.st-badge-danger {
  background: rgba(179, 0, 0, 0.1);
  color: var(--st-danger);
  border-color: rgba(179, 0, 0, 0.2);
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
  font-size: var(--st-text-sm);
}

.breadcrumb-item a {
  color: var(--st-text-secondary);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--st-brand);
}

.breadcrumb-item.active {
  color: var(--st-text);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--st-border);
}

/* ── Form labels & groups ────────────────────────────────────── */
.form-label {
  font-weight: 500;
  color: var(--st-muted);
  font-size: var(--st-text-sm);
  margin-bottom: 0.35rem;
}

.form-text {
  color: var(--st-text-secondary);
  font-size: var(--st-text-xs);
}

.input-group-text {
  background: var(--st-bg);
  border-color: var(--st-border);
  color: var(--st-text-secondary);
}

/* ── Badges (Bootstrap bridge) ─────────────────────────────── */
.badge {
  font-weight: 500;
  border-radius: var(--st-radius-pill);
}

.badge.bg-success,
.badge.bg-danger,
.badge.bg-warning {
  color: #fff;
}

.badge.bg-warning {
  color: #1f2937;
}

.badge.bg-secondary {
  background: var(--st-text-secondary) !important;
}

/* ── Card headers ───────────────────────────────────────────── */
.card > .card-header {
  background: transparent;
  border-bottom: 1px solid var(--st-border);
  padding: var(--st-space-md) var(--st-space-lg);
}

.card > .card-header h5 {
  font-size: var(--st-text-lg);
  font-weight: 600;
  margin-bottom: 0;
}

/* ── Sidebar active (Able Pro bridge) — light on brand chrome ─ */
.pc-sidebar .pc-item.active > .pc-link .pc-micon i,
.pc-sidebar .pc-link.active .pc-micon i,
[data-pc-preset] .pc-sidebar .pc-item.active > .pc-link .pc-micon i,
[data-pc-preset] .pc-sidebar .pc-item:hover > .pc-link .pc-micon i {
  color: #ffffff !important;
}

[data-pc-preset] .pc-sidebar .pc-item.active > .pc-link,
[data-pc-preset] .pc-sidebar .pc-item:focus > .pc-link,
[data-pc-preset] .pc-sidebar .pc-item:hover > .pc-link {
  color: #ffffff !important;
}

.pc-sidebar .pc-item.active > .pc-link::before {
  background: #ffffff;
}

/* ── DataTables pagination & badges ──────────────────────────── */
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--st-brand-light) !important;
  border-color: var(--st-border) !important;
  color: var(--st-brand) !important;
  border-radius: var(--st-radius-sm);
}

div.dataTables_wrapper .dataTables_info {
  color: var(--st-text-secondary);
  font-size: var(--st-text-sm);
}

table.dataTable thead th {
  border-bottom-color: var(--st-border) !important;
}

/* ── Nav tabs (settings, account) ────────────────────────────── */
.nav-tabs {
  border-bottom-color: var(--st-border);
}

.nav-tabs .nav-link {
  color: var(--st-text-secondary);
  font-weight: 500;
  border-radius: var(--st-radius-sm) var(--st-radius-sm) 0 0;
}

.nav-tabs .nav-link:hover {
  color: var(--st-brand);
  border-color: var(--st-border);
}

.nav-tabs .nav-link.active {
  color: var(--st-brand);
  border-color: var(--st-border) var(--st-border) var(--st-surface);
  background: var(--st-surface);
}

.account-tabs .nav-item .nav-link {
  color: var(--st-text-secondary);
}

.account-tabs .nav-item .nav-link.active {
  color: var(--st-brand);
  background: var(--st-brand-light);
}

/* ── Dropdown & action menus ─────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  box-shadow: var(--st-shadow);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--st-brand-light);
  color: var(--st-brand);
}

/* ── Kanban / pipeline ───────────────────────────────────────── */
.pipeline-column {
  background: var(--st-bg);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-md);
}

.pipeline-card {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  background: var(--st-surface);
  box-shadow: var(--st-shadow-sm);
}

/* ── Search dropdown (global header) ─────────────────────────── */
.search-dropdown {
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-sm);
  box-shadow: var(--st-shadow);
}

.search-item:hover,
.search-item.active {
  background: var(--st-brand-light);
}

/* ── Theme vitrine / landing bridge ──────────────────────────── */
.btn-thm,
.ud-btn.btn-thm {
  background-color: var(--st-brand);
  border-color: var(--st-brand);
  color: #fff;
}

.btn-thm:hover,
.ud-btn.btn-thm:hover {
  background-color: var(--st-brand-hover);
  border-color: var(--st-brand-hover);
  color: #fff;
}

.progress-bar.bg-primary {
  background-color: var(--st-brand) !important;
}

/* Content readability — never inherit white chrome text into pages */
.pc-content,
.pc-content .card,
.pc-content .card-body,
.pc-content .form-label,
.pc-content .table,
.pc-content .page-header-title h5 {
  color: var(--st-text);
}

.pc-content .text-muted {
  color: var(--st-text-secondary) !important;
}

.pc-content img {
  opacity: 1;
  max-width: 100%;
}