/**
 * PanelFood Design System — Restaurant Operating System
 * Visual reference: premium SaaS mockups (navy + white + operational status)
 * Goal: one coherent product — readability, speed, hierarchy, service-ready UX
 */
:root {
  /* Surfaces */
  --pf-bg: #F4F6F9;
  --pf-card: #FFFFFF;
  --pf-text: #0B1F3A;
  --pf-muted: #5B6B7C;
  --pf-border: #E6EAF0;
  --pf-hover: #EEF2F7;

  /* Brand — navy (not generic gray dashboard) */
  --pf-navy: #0B1F3A;
  --pf-navy-mid: #143056;
  --pf-navy-soft: #1E3A5F;
  --pf-primary: #0B1F3A;
  --pf-primary-soft: #143056;

  /* Operational status (semantic, never decorative) */
  --pf-success: #16A34A;   /* libero / positivo / pronto */
  --pf-info: #2563EB;      /* occupato / attivo */
  --pf-warning: #F59E0B;   /* attenzione / in attesa */
  --pf-attention: #F97316; /* priorità soft / reserved wait */
  --pf-danger: #DC2626;    /* problema / ritardo / criticità */
  --pf-reserved: #7C3AED;  /* prenotato */

  /* Status soft surfaces */
  --pf-success-soft: #ECFDF5;
  --pf-info-soft: #EFF6FF;
  --pf-warning-soft: #FFFBEB;
  --pf-danger-soft: #FEF2F2;
  --pf-reserved-soft: #F5F3FF;

  /* Hero / Semaforo / AI — orange → yellow */
  --pf-accent-from: #F97316;
  --pf-accent-to: #FACC15;
  --pf-gradient-accent: linear-gradient(135deg, #F97316 0%, #FACC15 100%);
  --pf-gradient-navy: linear-gradient(145deg, #143056 0%, #0B1F3A 55%, #071528 100%);

  /* Sidebar chrome */
  --pf-sidebar-bg: #0B1F3A;
  --pf-sidebar-text: rgba(255, 255, 255, 0.78);
  --pf-sidebar-text-active: #FFFFFF;
  --pf-sidebar-hover: rgba(255, 255, 255, 0.08);
  --pf-sidebar-active: rgba(255, 255, 255, 0.14);
  --pf-sidebar-border: rgba(255, 255, 255, 0.08);
  --pf-sidebar-heading: rgba(255, 255, 255, 0.45);

  /* Legacy aliases kept for compatibility */
  --pf-terracotta: #F97316;
  --pf-terracotta-soft: #FFF7ED;
  --pf-terracotta-deep: #C2410C;
  --pf-on-dark: #FFFFFF;

  /* Shape & elevation */
  --pf-radius: 16px;
  --pf-radius-sm: 10px;
  --pf-radius-lg: 20px;
  --pf-shadow: 0 4px 16px -4px rgba(11, 31, 58, 0.08);
  --pf-shadow-md: 0 8px 24px -8px rgba(11, 31, 58, 0.12);
  --pf-touch-min: 44px;

  /* Bootstrap / Argon bridges */
  --blue: var(--pf-info);
  --indigo: var(--pf-navy-soft);
  --purple: var(--pf-reserved);
  --primary: var(--pf-primary);
  --secondary: var(--pf-hover);
  --success: var(--pf-success);
  --info: var(--pf-info);
  --warning: var(--pf-warning);
  --danger: var(--pf-danger);
  --light: var(--pf-border);
  --dark: var(--pf-text);
  --default: var(--pf-primary);
}

html, body {
  background-color: var(--pf-bg) !important;
  color: var(--pf-text);
}

/* =========================================================
   TITLES ON LIGHT SURFACES → dark (never same as background)
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4 {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
}
.pf-header-dark h1,
.pf-header-dark h2,
.pf-header-dark .display-2,
.pf-header-dark .display-3,
.pf-header-dark .text-white,
.pf-header-dark p {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.lead, .text-muted {
  color: var(--pf-muted) !important;
}
.card-header h1,
.card-header h2,
.card-header h3,
.card-header .h2,
.card-header .h3,
.modal-title,
.navbar-heading {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
}

/* =========================================================
   PAGE HEADER BANDS → light surface (reference look)
   Titles stay dark for contrast; not dark-on-dark
   ========================================================= */
.main-content {
  background: var(--pf-bg) !important;
}
.main-content > .header,
.main-content > .header.pb-8,
.main-content > .header.pb-7,
.main-content > .header.pb-6,
.main-content > .header.bg-gradient-primary,
.main-content > .header[style*="background-image"]:not(.pf-header-dark),
.header.bg-gradient-primary:not(.pf-header-dark),
.bg-gradient-primary {
  background-color: var(--pf-hover) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--pf-border);
}
/* Explicit dark cover (profile, etc.): keep dark bg + white text */
.main-content > .header.pf-header-dark,
.header.pf-header-dark {
  background: var(--pf-gradient-navy) !important;
  background-image: var(--pf-gradient-navy) !important;
  background-color: var(--pf-navy) !important;
  border-bottom: none !important;
}
.main-content > .header.pf-header-dark h1,
.main-content > .header.pf-header-dark h2,
.main-content > .header.pf-header-dark .display-2,
.main-content > .header.pf-header-dark .text-white,
.main-content > .header.pf-header-dark p,
.header.pf-header-dark h1,
.header.pf-header-dark .display-2,
.header.pf-header-dark .text-white,
.header.pf-header-dark p {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
/* Kill Argon dark cover masks on light headers only */
.main-content > .header:not(.pf-header-dark) > .mask,
.main-content > .header:not(.pf-header-dark) .mask.bg-gradient-default,
.main-content > .header:not(.pf-header-dark) .mask.bg-gradient-primary,
.header:not(.pf-header-dark) .mask.bg-gradient-default,
.header:not(.pf-header-dark) .mask.opacity-8 {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}
.main-content > .header:not(.pf-header-dark) h1,
.main-content > .header:not(.pf-header-dark) h2,
.main-content > .header:not(.pf-header-dark) h3,
.main-content > .header:not(.pf-header-dark) h4,
.main-content > .header:not(.pf-header-dark) h5,
.main-content > .header:not(.pf-header-dark) h6,
.main-content > .header:not(.pf-header-dark) .h1,
.main-content > .header:not(.pf-header-dark) .h2,
.main-content > .header:not(.pf-header-dark) .display-1,
.main-content > .header:not(.pf-header-dark) .display-2,
.main-content > .header:not(.pf-header-dark) .display-3,
.main-content > .header:not(.pf-header-dark) .display-4,
.main-content > .header:not(.pf-header-dark) .text-white,
.main-content > .header:not(.pf-header-dark) p,
.main-content > .header:not(.pf-header-dark) span,
.main-content > .header:not(.pf-header-dark) small,
.main-content > .header:not(.pf-header-dark) .text-muted,
.header.bg-gradient-primary:not(.pf-header-dark) h1,
.header.bg-gradient-primary:not(.pf-header-dark) h2,
.header.bg-gradient-primary:not(.pf-header-dark) .text-white,
.bg-gradient-primary h1,
.bg-gradient-primary h2,
.bg-gradient-primary .text-white {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
  opacity: 1 !important;
}
.main-content > .header .text-white,
.bg-gradient-primary .text-white {
  opacity: 1 !important;
}
.main-content > .header .btn-outline-neutral,
.main-content > .header .btn-outline-white,
.main-content > .header a.border-white {
  color: var(--pf-text) !important;
  border-color: var(--pf-border) !important;
  background: var(--pf-card) !important;
}

/* Photo covers on light chrome keep dark titles; dark covers keep white */
.header[style*="background-image"]:not(.pf-header-dark) h1,
.header[style*="background-image"]:not(.pf-header-dark) h2,
.header[style*="background-image"]:not(.pf-header-dark) .text-white,
.header[style*="background-image"]:not(.pf-header-dark) .display-2,
.header[style*="background-image"]:not(.pf-header-dark) p {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* =========================================================
   DARK SURFACES → white titles/text (contrast)
   ========================================================= */
.bg-primary,
.bg-dark,
.btn-primary,
.btn-dark,
.badge-primary,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.pf-ux-toggle__btn.is-on,
[style*="background:#1F2937"] h1,
[style*="background:#1F2937"] h2,
[style*="background:#111827"] h1,
[style*="background:#374151"] h1,
[style*="background:#0B1F3A"] h1,
[style*="background:#0B1F3A"] h2,
.card[style*="background:#1F2937"],
.card[style*="background:#111827"],
.card[style*="background:#374151"],
.card[style*="background:#0B1F3A"] {
  color: var(--pf-on-dark) !important;
}
.bg-primary,
.badge-primary,
.btn-primary {
  background-color: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--pf-primary-soft) !important;
  border-color: var(--pf-primary-soft) !important;
  color: var(--pf-on-dark) !important;
}
.btn-outline-primary {
  color: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--pf-primary) !important;
  color: var(--pf-on-dark) !important;
}
.btn-neutral {
  background: var(--pf-card) !important;
  color: var(--pf-text) !important;
  border: 1px solid var(--pf-border) !important;
}
.text-primary,
a.text-primary {
  color: var(--pf-primary) !important;
}

/* Explicit white text utility — only when intentionally on dark */
.text-white {
  color: var(--pf-on-dark) !important;
  -webkit-text-fill-color: var(--pf-on-dark) !important;
}

/* Dark accent blocks (KPI cards, CTAs) — must beat .card white bg */
.pf-on-dark,
.pf-surface-dark,
.card.pf-on-dark,
.card.pf-surface-dark,
a.card.pf-surface-dark,
.card.pf-surface-dark--ink,
.card.pf-surface-dark--soft {
  background: var(--pf-navy) !important;
  background-image: none !important;
  color: var(--pf-on-dark) !important;
  border-color: transparent !important;
}
.card.pf-surface-dark--ink {
  background: #071528 !important;
}
.card.pf-surface-dark--soft {
  background: var(--pf-navy-soft) !important;
}
.pf-surface-dark h1,
.pf-surface-dark h2,
.pf-surface-dark h3,
.pf-surface-dark h4,
.pf-surface-dark p,
.pf-surface-dark .h1,
.pf-surface-dark .h2,
.pf-surface-dark .h3,
.pf-surface-dark .text-white,
.pf-surface-dark div,
.pf-surface-dark span,
.pf-surface-dark small,
.pf-on-dark h1,
.pf-on-dark h2,
.pf-on-dark h3,
.pf-on-dark p,
.pf-on-dark div,
.card.pf-surface-dark--ink div,
.card.pf-surface-dark--soft div {
  color: var(--pf-on-dark) !important;
  -webkit-text-fill-color: var(--pf-on-dark) !important;
}
.pf-surface-dark .pf-cta-kicker,
.card.pf-surface-dark--ink .pf-cta-kicker,
.card.pf-surface-dark--soft .pf-cta-kicker,
.pf-surface-dark .pf-cta-sub,
.card.pf-surface-dark--ink .pf-cta-sub,
.card.pf-surface-dark--soft .pf-cta-sub {
  color: #D1D5DB !important;
  -webkit-text-fill-color: #D1D5DB !important;
  opacity: 1 !important;
}

/* =========================================================
   BRAND
   ========================================================= */
.pf-brand-text {
  color: var(--pf-navy) !important;
  -webkit-text-fill-color: var(--pf-navy) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
}
#navbar-main .pf-brand-text,
.navbar-horizontal .pf-brand-text {
  color: var(--pf-navy) !important;
  -webkit-text-fill-color: var(--pf-navy) !important;
}
#sidenav-main .pf-brand-text {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Accent gradient utility (hero, Semaforo, AI CTAs) */
.pf-gradient-accent,
.btn.pf-gradient-accent,
.btn-pf-accent {
  background: var(--pf-gradient-accent) !important;
  background-image: var(--pf-gradient-accent) !important;
  border: none !important;
  color: #0B1F3A !important;
  -webkit-text-fill-color: #0B1F3A !important;
  font-weight: 700;
  box-shadow: 0 6px 16px -4px rgba(249, 115, 22, 0.45);
}
.btn.pf-gradient-accent:hover,
.btn-pf-accent:hover {
  filter: brightness(1.05);
  color: #0B1F3A !important;
}

/* Status helpers */
.pf-status-ok { color: var(--pf-success) !important; }
.pf-status-info { color: var(--pf-info) !important; }
.pf-status-warn { color: var(--pf-warning) !important; }
.pf-status-danger { color: var(--pf-danger) !important; }
.pf-status-reserved { color: var(--pf-reserved) !important; }
.pf-bg-ok { background: var(--pf-success-soft) !important; }
.pf-bg-info { background: var(--pf-info-soft) !important; }
.pf-bg-warn { background: var(--pf-warning-soft) !important; }
.pf-bg-danger { background: var(--pf-danger-soft) !important; }
.pf-bg-reserved { background: var(--pf-reserved-soft) !important; }

/* =========================================================
   SIDEBAR — dark navy (mockup chrome)
   ========================================================= */
#sidenav-main {
  background: var(--pf-sidebar-bg) !important;
  border-right: 1px solid var(--pf-sidebar-border);
  box-shadow: 4px 0 24px -8px rgba(11, 31, 58, 0.25);
}
#sidenav-main.navbar-light,
#sidenav-main.bg-white {
  background: var(--pf-sidebar-bg) !important;
}
#sidenav-main .navbar-nav .nav-link {
  color: var(--pf-sidebar-text) !important;
  font-weight: 500;
  border-radius: var(--pf-radius-sm);
  margin: 2px 10px;
  padding: 0.65rem 0.85rem !important;
  min-height: var(--pf-touch-min);
  display: flex;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
#sidenav-main .navbar-nav .nav-link:hover {
  background: var(--pf-sidebar-hover) !important;
  color: var(--pf-sidebar-text-active) !important;
}
#sidenav-main .navbar-nav .nav-link.active {
  background: var(--pf-sidebar-active) !important;
  color: var(--pf-sidebar-text-active) !important;
  font-weight: 700;
}
#sidenav-main .navbar-nav .nav-link.active:before {
  display: none !important;
}
#sidenav-main .navbar-nav .nav-link i {
  color: inherit !important;
  opacity: 0.9;
  width: 1.35rem;
  text-align: center;
}
#sidenav-main .navbar-nav .nav-link .text-primary,
#sidenav-main .navbar-nav .nav-link .text-success,
#sidenav-main .navbar-nav .nav-link .text-warning,
#sidenav-main .navbar-nav .nav-link .text-danger,
#sidenav-main .navbar-nav .nav-link .text-info,
#sidenav-main .navbar-nav .nav-link .text-orange,
#sidenav-main .navbar-nav .nav-link .text-red,
#sidenav-main .navbar-nav .nav-link .text-pink {
  color: inherit !important;
}
#sidenav-main .navbar-heading,
#sidenav-main .navbar-heading.text-muted {
  color: var(--pf-sidebar-heading) !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 1.25rem 0.35rem;
}
#sidenav-main hr {
  border-color: var(--pf-sidebar-border);
}
#sidenav-main .navbar-brand,
#sidenav-main .navbar-brand .pf-brand-mark {
  color: #fff !important;
}
#sidenav-main .sidenav-toggler-inner,
#sidenav-main .sidenav-toggler-line {
  background: rgba(255, 255, 255, 0.7) !important;
}
#sidenav-main .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
#sidenav-main .btn-warning,
#sidenav-main .btn-primary {
  background: var(--pf-gradient-accent) !important;
  border: none !important;
  color: #0B1F3A !important;
  font-weight: 700;
}
#sidenav-main .pf-ux-toggle {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
#sidenav-main .pf-ux-toggle__btn {
  color: rgba(255, 255, 255, 0.75) !important;
}
#sidenav-main .pf-ux-toggle__btn.is-on {
  background: #FFFFFF !important;
  color: var(--pf-navy) !important;
}
#sidenav-main .text-muted,
#sidenav-main .nav-link-text {
  color: inherit !important;
}

/* Top bar: always readable on light chrome (including over profile header) */
#navbar-main,
#navbar-main.navbar-dark,
#navbar-main.navbar-top {
  background: transparent !important;
}
#navbar-main.navbar-dark .pf-page-title,
#navbar-main .pf-page-title,
#navbar-main a.h4,
#navbar-main .h4,
#navbar-main .navbar-brand,
#navbar-main .text-white {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* Top bar nav items: navbar-dark assumed white text; chrome is light → dark text */
#navbar-main.navbar-dark .navbar-nav .nav-link,
#navbar-main .navbar-nav .nav-link,
#navbar-main.navbar-dark .navbar-nav .nav-link i,
#navbar-main .navbar-nav .nav-link i,
#navbar-main.navbar-dark .navbar-nav .nav-link .nav-link-inner--text,
#navbar-main .navbar-nav .nav-link .nav-link-inner--text,
#navbar-main.navbar-dark .navbar-nav .media-body,
#navbar-main .navbar-nav .media-body,
#navbar-main.navbar-dark .navbar-nav .media-body span,
#navbar-main .navbar-nav .media-body span,
#navbar-main .nav-link-inner--text,
#navbar-main .font-weight-bold {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
  opacity: 1 !important;
}
#navbar-main.navbar-dark .navbar-nav .nav-link:hover,
#navbar-main .navbar-nav .nav-link:hover,
#navbar-main.navbar-dark .navbar-nav .nav-link:focus,
#navbar-main .navbar-nav .nav-link:focus,
#navbar-main.navbar-dark .navbar-nav .show > .nav-link,
#navbar-main.navbar-dark .navbar-nav .nav-link.active {
  color: var(--pf-primary) !important;
  -webkit-text-fill-color: var(--pf-primary) !important;
}

/* Profile / dark chrome: keep dark band, white letters on top bar */
body.pf-dark-chrome #navbar-main.navbar-dark .pf-page-title,
body.pf-dark-chrome #navbar-main .pf-page-title,
body.pf-dark-chrome #navbar-main a.h4,
body.pf-dark-chrome #navbar-main .h4,
body.pf-dark-chrome #navbar-main .text-white,
body.pf-dark-chrome #navbar-main.navbar-dark .navbar-nav .nav-link,
body.pf-dark-chrome #navbar-main .navbar-nav .nav-link,
body.pf-dark-chrome #navbar-main.navbar-dark .navbar-nav .nav-link i,
body.pf-dark-chrome #navbar-main .navbar-nav .nav-link i,
body.pf-dark-chrome #navbar-main.navbar-dark .navbar-nav .nav-link .nav-link-inner--text,
body.pf-dark-chrome #navbar-main .navbar-nav .nav-link .nav-link-inner--text,
body.pf-dark-chrome #navbar-main.navbar-dark .navbar-nav .media-body,
body.pf-dark-chrome #navbar-main .navbar-nav .media-body,
body.pf-dark-chrome #navbar-main.navbar-dark .navbar-nav .media-body span,
body.pf-dark-chrome #navbar-main .navbar-nav .media-body span,
body.pf-dark-chrome #navbar-main .nav-link-inner--text,
body.pf-dark-chrome #navbar-main .font-weight-bold {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}
body.pf-dark-chrome #navbar-main.navbar-dark .navbar-nav .nav-link:hover,
body.pf-dark-chrome #navbar-main .navbar-nav .nav-link:hover,
body.pf-dark-chrome #navbar-main.navbar-dark .navbar-nav .nav-link:focus,
body.pf-dark-chrome #navbar-main .navbar-nav .nav-link:focus {
  color: #E5E7EB !important;
  -webkit-text-fill-color: #E5E7EB !important;
}
body.pf-dark-chrome #navbar-main .pf-ux-toggle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
}
body.pf-dark-chrome #navbar-main .pf-ux-toggle__btn {
  color: rgba(255, 255, 255, 0.85);
}
body.pf-dark-chrome #navbar-main .pf-ux-toggle__btn.is-on {
  background: #FFFFFF !important;
  color: #111827 !important;
}

/* =========================================================
   CARDS / FORMS / TABLES
   ========================================================= */
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) {
  background: var(--pf-card) !important;
  border: 1px solid var(--pf-border) !important;
  border-radius: var(--pf-radius) !important;
  box-shadow: var(--pf-shadow) !important;
  color: var(--pf-text);
}
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) .text-muted,
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) .small,
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) p.small,
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) .card-body > p {
  color: var(--pf-muted) !important;
  -webkit-text-fill-color: var(--pf-muted) !important;
  opacity: 1 !important;
}
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) strong,
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) h1,
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) h2,
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) h3,
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) .h2,
.card:not(.pf-surface-dark):not(.pf-on-dark):not(.pf-surface-dark--ink):not(.pf-surface-dark--soft) .h3 {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
}
/* Re-assert dark CTA cards after generic .card rules */
.card.pf-surface-dark,
.card.pf-on-dark,
a.card.pf-surface-dark {
  background: var(--pf-primary) !important;
  color: var(--pf-on-dark) !important;
  border-color: transparent !important;
}
.card.pf-surface-dark--ink {
  background: #071528 !important;
  color: var(--pf-on-dark) !important;
  border-color: transparent !important;
  border-radius: var(--pf-radius) !important;
  box-shadow: var(--pf-shadow) !important;
}
.card.pf-surface-dark--soft {
  background: var(--pf-navy-soft) !important;
  color: var(--pf-on-dark) !important;
  border-color: transparent !important;
  border-radius: var(--pf-radius) !important;
  box-shadow: var(--pf-shadow) !important;
}
.card-header {
  background: var(--pf-card) !important;
  border-bottom: 1px solid var(--pf-border) !important;
}
.bg-secondary {
  background-color: var(--pf-hover) !important;
}
.bg-white {
  background-color: var(--pf-card) !important;
}
.border,
.border-bottom,
.border-top {
  border-color: var(--pf-border) !important;
}
.table thead th {
  color: var(--pf-muted) !important;
  border-bottom-color: var(--pf-border) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.table td,
.table th {
  border-top-color: var(--pf-border) !important;
  color: var(--pf-text);
}
.form-control,
.custom-select {
  border-color: var(--pf-border) !important;
  border-radius: var(--pf-radius-sm) !important;
  color: var(--pf-text);
  background: var(--pf-card);
}
.form-control:focus {
  border-color: var(--pf-navy-mid) !important;
  box-shadow: 0 0 0 0.15rem rgba(11, 31, 58, 0.15) !important;
}
.form-control-label,
label {
  color: var(--pf-muted);
  font-weight: 600;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--pf-primary) !important;
  color: var(--pf-on-dark) !important;
}
.page-item.active .page-link {
  background-color: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  color: var(--pf-on-dark) !important;
}
.page-link {
  color: var(--pf-primary);
}
.alert-primary {
  background: var(--pf-hover);
  border-color: var(--pf-border);
  color: var(--pf-text);
}
.alert-success,
.alert-success.pf-flash-autohide {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.btn-neutral,
.btn-neutral .small {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
}
.btn-neutral .small {
  color: var(--pf-muted) !important;
  -webkit-text-fill-color: var(--pf-muted) !important;
  opacity: 1 !important;
}
.btn-primary .small {
  color: #E5E7EB !important;
  -webkit-text-fill-color: #E5E7EB !important;
  opacity: 1 !important;
}
.dropdown-menu {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  box-shadow: var(--pf-shadow);
  background: var(--pf-card);
}
.dropdown-item {
  color: var(--pf-text);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--pf-hover);
  color: var(--pf-text);
}
.modal-content {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  background: var(--pf-card);
}
.modal-header,
.modal-footer {
  border-color: var(--pf-border);
}
.progress-bar {
  background-color: var(--pf-primary) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
}

.text-info { color: var(--pf-info) !important; }
.text-success { color: var(--pf-success) !important; }
.text-warning { color: var(--pf-warning) !important; }
.text-danger { color: var(--pf-danger) !important; }
.text-orange { color: var(--pf-warning) !important; }
.text-pink { color: #BE185D !important; }
.text-blue { color: var(--pf-info) !important; }
.text-red { color: var(--pf-danger) !important; }
.text-green { color: var(--pf-success) !important; }

.icon-shape.text-white,
.icon-shape .text-white,
.icon.icon-shape {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.icon-shape i {
  color: inherit !important;
}

/* KPI values stay dark on white cards */
.card-stats .h2,
.pf-kpi-value,
.card .h2.font-weight-bold {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
}

/* Landing / hero: dark photo overlay keeps white titles */
.pf-hero-overlay,
.pf-hero-overlay h1,
.pf-hero-overlay h2,
.pf-hero-overlay .display-4,
.pf-hero-overlay .lead,
.pf-hero-overlay p,
.pf-hero-title {
  color: var(--pf-on-dark) !important;
  -webkit-text-fill-color: var(--pf-on-dark) !important;
}
.pf-hero__cta .btn-primary {
  background: var(--pf-primary) !important;
  border-color: var(--pf-primary) !important;
  color: var(--pf-on-dark) !important;
}

/* Landing section titles on white sections */
.section .display-4,
.section h2.display-4,
.section h2 {
  color: var(--pf-text) !important;
  -webkit-text-fill-color: var(--pf-text) !important;
}
.section .lead,
.section .text-muted {
  color: var(--pf-muted) !important;
}

/* Colored status banners: white titles on saturated backgrounds */
.bg-gradient-success h1, .bg-gradient-success h2, .bg-gradient-success h3,
.bg-gradient-success .text-white, .bg-gradient-success p,
.bg-gradient-danger h1, .bg-gradient-danger h2, .bg-gradient-danger h3,
.bg-gradient-danger .text-white, .bg-gradient-danger p,
.bg-gradient-warning h1, .bg-gradient-warning h2, .bg-gradient-warning h3,
.bg-gradient-warning .text-white, .bg-gradient-warning p,
.bg-gradient-info h1, .bg-gradient-info h2, .bg-gradient-info h3,
.bg-gradient-info .text-white, .bg-gradient-info p,
.bg-success .text-white, .bg-danger .text-white, .bg-warning .text-white,
.pf-pulse .text-white,
.pf-tl-hero .text-white,
.pf-tl-hero h2,
.pf-pulse h2 {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* CTA dark band on landing */
.section.bg-primary,
.pf-cta-dark {
  background: var(--pf-primary) !important;
}
.section.bg-primary h1,
.section.bg-primary h2,
.section.bg-primary .display-4,
.section.bg-primary p,
.section.bg-primary .lead,
.section.bg-primary .text-white,
.pf-cta-dark h1,
.pf-cta-dark h2,
.pf-cta-dark p,
.pf-cta-dark .text-white {
  color: var(--pf-on-dark) !important;
  -webkit-text-fill-color: var(--pf-on-dark) !important;
}
.section.bg-primary .btn-white,
.pf-cta-dark .btn-white {
  background: #fff !important;
  color: var(--pf-primary) !important;
  border-color: #fff !important;
}
.section.bg-primary .btn-outline-white,
.pf-cta-dark .btn-outline-white {
  color: #fff !important;
  border-color: rgba(255,255,255,.7) !important;
  background: transparent !important;
}