/* Tabler-Inspired Design System for RxOp */
/* Inspired by https://tabler.io/admin-template */

/* ========================================
   FONT FACE DECLARATIONS - Outfit
   One variable face covers every weight (wght 100-900).
   Licensed under the SIL OFL 1.1 -- see ../fonts/Outfit-OFL.txt.
   ======================================== */

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-variable.woff2') format('woff2-variations'),
       url('../fonts/outfit-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========================================
     Brand Color Palette
     Navy: #012554 | Mint: #b3e0d7 | White | Black
     ======================================== */

  /* Primary Colors - Navy Blue */
  --tblr-primary: #012554;
  --tblr-primary-rgb: 1, 37, 84;
  --tblr-primary-lt: #E8EEF5;
  --tblr-primary-dk: #011233;

  /* Secondary/Accent Colors - Mint Green */
  --tblr-secondary: #5a9a8f;
  --tblr-secondary-rgb: 90, 154, 143;
  --tblr-secondary-lt: #E5F5F2;
  --tblr-accent: #b3e0d7;
  --tblr-accent-rgb: 179, 224, 215;
  --tblr-accent-lt: #E5F5F2;
  --tblr-accent-dk: #8fcdc1;

  /* Semantic Colors - Harmonized with palette */
  --tblr-success: #2d8a6e;
  --tblr-success-rgb: 45, 138, 110;
  --tblr-success-lt: #E5F5F2;

  --tblr-info: #012554;
  --tblr-info-rgb: 1, 37, 84;
  --tblr-info-lt: #E8EEF5;

  --tblr-warning: #c4820e;
  --tblr-warning-rgb: 196, 130, 14;
  --tblr-warning-lt: #FEF6E6;

  --tblr-danger: #b83232;
  --tblr-danger-rgb: 184, 50, 50;
  --tblr-danger-lt: #FCEAEA;

  /* Neutral Colors - Softer, easier on the eyes */
  --tblr-body-bg: #F0F4F7;
  --tblr-card-bg: #FAFBFC;
  --tblr-border-color: #D8E0E8;
  --tblr-border-color-translucent: rgba(1, 37, 84, 0.08);

  /* Text Colors */
  --tblr-body-color: #1a1a1a;
  --tblr-muted: #5a6a7a;
  --tblr-light-text: #8494a4;

  /* Sidebar - Navy themed */
  --tblr-sidebar-bg: #012554;
  --tblr-sidebar-color: rgba(255, 255, 255, 0.75);
  --tblr-sidebar-hover-color: #ffffff;
  --tblr-sidebar-active-bg: rgba(179, 224, 215, 0.15);
  --tblr-sidebar-width: 260px;
  --tblr-sidebar-collapsed-width: 64px;

  /* Spacing */
  --tblr-spacer: 1rem;
  --tblr-spacer-sm: 0.5rem;
  --tblr-spacer-lg: 1.5rem;
  --tblr-spacer-xl: 2rem;

  /* Border Radius */
  --tblr-border-radius: 4px;
  --tblr-border-radius-sm: 2px;
  --tblr-border-radius-lg: 8px;
  --tblr-border-radius-xl: 12px;

  /* Shadows */
  --tblr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tblr-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --tblr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --tblr-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Typography */
  --tblr-font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tblr-font-size-base: 0.875rem;
  --tblr-font-size-sm: 0.75rem;
  --tblr-font-size-lg: 1rem;
  --tblr-font-size-h1: 1.5rem;
  --tblr-font-size-h2: 1.25rem;
  --tblr-font-size-h3: 1rem;
  --tblr-line-height: 1.6;
  --tblr-heading-letter-spacing: -0.02em;

  /* Transitions */
  --tblr-transition: all 0.15s ease-in-out;
  --tblr-transition-slow: all 0.3s ease-in-out;
}

/* ========================================
   BASE STYLES
   ======================================== */

body {
  font-family: var(--tblr-font-family);
  font-size: var(--tblr-font-size-base);
  font-weight: 500;
  line-height: var(--tblr-line-height);
  color: var(--tblr-body-color);
  background-color: var(--tblr-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page wrapper for sidebar layout */
.page-wrapper {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}

.page-body {
  flex: 1;
  margin-left: var(--tblr-sidebar-width);
  transition: margin-left var(--tblr-transition-slow);
}

@media (max-width: 991.98px) {
  .page-body {
    margin-left: 0;
  }
}

/* ========================================
   SIDEBAR NAVIGATION
   ======================================== */

.navbar-vertical {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--tblr-sidebar-width);
  background: var(--tblr-sidebar-bg);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: width var(--tblr-transition-slow), transform var(--tblr-transition-slow);
  box-shadow: var(--tblr-shadow-lg);
}

.navbar-vertical.collapsed {
  width: var(--tblr-sidebar-collapsed-width);
}

@media (max-width: 991.98px) {
  .navbar-vertical {
    transform: translateX(-100%);
  }

  .navbar-vertical.show {
    transform: translateX(0);
  }
}

/* Sidebar Brand */
.navbar-brand-container {
  padding: var(--tblr-spacer-lg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: var(--tblr-spacer);
}

.navbar-brand-container .navbar-brand {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--tblr-spacer);
}

.navbar-brand-container .navbar-brand svg {
  height: 28px;
  width: auto;
}

.navbar-brand-container .navbar-brand:hover {
  color: #ffffff !important;
}

.navbar-brand-text {
  color: #ffffff;
  transition: opacity var(--tblr-transition);
}

.navbar-vertical.collapsed .navbar-brand-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Sidebar Navigation */
.navbar-nav-vertical {
  flex: 1;
  padding: var(--tblr-spacer) 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.navbar-nav-vertical::-webkit-scrollbar {
  width: 4px;
}

.navbar-nav-vertical::-webkit-scrollbar-track {
  background: transparent;
}

.navbar-nav-vertical::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.nav-item-vertical {
  margin: 2px var(--tblr-spacer-sm);
}

.nav-link-vertical {
  display: flex;
  align-items: center;
  gap: var(--tblr-spacer);
  padding: 0.625rem var(--tblr-spacer);
  color: var(--tblr-sidebar-color);
  border-radius: var(--tblr-border-radius);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--tblr-font-size-base);
  transition: var(--tblr-transition);
  position: relative;
  white-space: nowrap;
}

.nav-link-vertical:hover {
  color: var(--tblr-sidebar-hover-color);
  background: var(--tblr-sidebar-active-bg);
}

.nav-link-vertical.active {
  color: #ffffff;
  background: var(--tblr-primary);
}

.nav-link-vertical .nav-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-link-vertical:hover .nav-icon,
.nav-link-vertical.active .nav-icon {
  opacity: 1;
}

.nav-link-vertical .nav-text {
  flex: 1;
  transition: opacity var(--tblr-transition), width var(--tblr-transition);
}

.navbar-vertical.collapsed .nav-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* Dropdown indicator */
.nav-link-vertical .dropdown-indicator {
  margin-left: auto;
  transition: transform var(--tblr-transition);
}

.nav-link-vertical[aria-expanded="true"] .dropdown-indicator {
  transform: rotate(180deg);
}

/* Sidebar Subnav */
.nav-subnav {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 2.5rem;
}

.nav-subnav .nav-link-vertical {
  padding: 0.375rem var(--tblr-spacer);
  font-size: var(--tblr-font-size-sm);
}

/* Badge in nav */
.nav-link-badge {
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 100px;
  background: var(--tblr-warning);
  color: #ffffff;
}

/* Sidebar divider */
.nav-divider {
  height: 1px;
  margin: var(--tblr-spacer) var(--tblr-spacer);
  background: rgba(255, 255, 255, 0.1);
}

.nav-label {
  padding: var(--tblr-spacer) var(--tblr-spacer-lg);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}

/* Sidebar Footer */
.navbar-footer {
  padding: var(--tblr-spacer);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile sidebar toggle */
.sidebar-toggle {
  display: none;
  position: fixed;
  bottom: var(--tblr-spacer);
  right: var(--tblr-spacer);
  z-index: 1050;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tblr-primary);
  color: #ffffff;
  border: none;
  box-shadow: var(--tblr-shadow-lg);
  cursor: pointer;
  transition: var(--tblr-transition);
}

.sidebar-toggle:hover {
  background: var(--tblr-primary-dk);
  transform: scale(1.05);
}

@media (max-width: 991.98px) {
  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Sidebar Overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1039;
  backdrop-filter: blur(2px);
}

.sidebar-overlay.show {
  display: block;
}

/* ========================================
   TOP HEADER BAR
   ======================================== */

.page-header {
  background: var(--tblr-card-bg);
  border-bottom: 1px solid var(--tblr-border-color);
  padding: var(--tblr-spacer) var(--tblr-spacer-lg);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.page-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tblr-spacer);
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: var(--tblr-spacer);
}

.page-header-right {
  display: flex;
  align-items: center;
  gap: var(--tblr-spacer);
}

/* ========================================
   PAGE CONTENT
   ======================================== */

.page-content {
  padding: var(--tblr-spacer-lg);
  max-width: 1440px;
  margin: 0 auto;
}

.page-title-box {
  margin-bottom: var(--tblr-spacer-lg);
}

.page-title {
  font-size: var(--tblr-font-size-h1);
  font-weight: 600;
  color: var(--tblr-body-color);
  margin: 0 0 0.25rem 0;
}

.page-pretitle {
  font-size: var(--tblr-font-size-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tblr-muted);
  margin-bottom: 0.25rem;
}

/* Breadcrumbs */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--tblr-font-size-sm);
}

.breadcrumb-item {
  color: var(--tblr-muted);
}

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

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--tblr-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  color: var(--tblr-light-text);
}

/* ========================================
   CARDS - TABLER STYLE
   ======================================== */

.card {
  background: var(--tblr-card-bg);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--tblr-shadow-sm);
  margin-bottom: var(--tblr-spacer-lg);
  transition: var(--tblr-transition);
}

.card:hover {
  box-shadow: var(--tblr-shadow);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--tblr-border-color);
  padding: var(--tblr-spacer) var(--tblr-spacer-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
}

.card-title {
  font-size: var(--tblr-font-size-lg);
  font-weight: 600;
  color: var(--tblr-body-color);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-subtitle {
  font-size: var(--tblr-font-size-sm);
  color: var(--tblr-muted);
  margin-top: 0.25rem;
}

.card-body {
  padding: var(--tblr-spacer-lg);
}

.card-body-scrollable {
  max-height: 400px;
  overflow-y: auto;
}

.card-footer {
  background: var(--tblr-body-bg);
  border-top: 1px solid var(--tblr-border-color);
  padding: var(--tblr-spacer) var(--tblr-spacer-lg);
}

/* Card Options */
.card-options {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.card-options .btn {
  padding: 0.25rem 0.5rem;
}

/* Card Status Indicators - Using border-left for cleaner rendering */
.card-status-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--tblr-border-radius-lg) var(--tblr-border-radius-lg) 0 0;
}

/* Hide the old absolute positioned element */
.card-status-start {
  display: none;
}

/* Use border-left on card instead */
.card.card-status {
  position: relative;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--tblr-border-color);
}

.card.card-status.card-status-primary {
  border-left-color: var(--tblr-primary);
}

.card.card-status.card-status-success {
  border-left-color: var(--tblr-success);
}

.card.card-status.card-status-warning {
  border-left-color: var(--tblr-warning);
}

.card.card-status.card-status-danger {
  border-left-color: var(--tblr-danger);
}

.card.card-status.card-status-info {
  border-left-color: var(--tblr-info);
}

/* Legacy support for bg-*-status classes */
.bg-primary-status { background-color: var(--tblr-primary); }
.bg-success-status { background-color: var(--tblr-success); }
.bg-warning-status { background-color: var(--tblr-warning); }
.bg-danger-status { background-color: var(--tblr-danger); }
.bg-info-status { background-color: var(--tblr-info); }

/* Stacked Cards */
.card-stacked {
  position: relative;
}

.card-stacked::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 5px;
  right: 5px;
  height: 5px;
  background: var(--tblr-card-bg);
  border: 1px solid var(--tblr-border-color);
  border-top: 0;
  border-radius: 0 0 var(--tblr-border-radius-lg) var(--tblr-border-radius-lg);
}

/* ========================================
   STAT CARDS
   ======================================== */

.stat-card {
  padding: var(--tblr-spacer-lg);
}

.stat-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--tblr-border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: var(--tblr-spacer);
}

.stat-card-icon.bg-primary-lt { background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.stat-card-icon.bg-success-lt { background: var(--tblr-success-lt); color: var(--tblr-success); }
.stat-card-icon.bg-warning-lt { background: var(--tblr-warning-lt); color: var(--tblr-warning); }
.stat-card-icon.bg-danger-lt { background: var(--tblr-danger-lt); color: var(--tblr-danger); }
.stat-card-icon.bg-info-lt { background: var(--tblr-info-lt); color: var(--tblr-info); }

.stat-card-value {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  line-height: 1.2;
}

.stat-card-label {
  font-size: var(--tblr-font-size-sm);
  color: var(--tblr-muted);
  margin-top: 0.25rem;
}

.stat-card-trend {
  font-size: var(--tblr-font-size-sm);
  font-weight: 500;
  margin-top: 0.5rem;
}

.stat-card-trend.trend-up { color: var(--tblr-success); }
.stat-card-trend.trend-down { color: var(--tblr-danger); }

/* ========================================
   BUTTONS - TABLER STYLE
   ======================================== */

.btn {
  font-family: var(--tblr-font-family);
  font-size: var(--tblr-font-size-base);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--tblr-border-radius);
  border: 1px solid transparent;
  transition: var(--tblr-transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(var(--tblr-primary-rgb), 0.25);
}

/* Primary Button */
.btn-primary {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: #ffffff;
}

.btn-primary:hover {
  background: var(--tblr-primary-dk);
  border-color: var(--tblr-primary-dk);
  color: #ffffff;
}

/* Secondary Button */
.btn-secondary {
  background: var(--tblr-secondary);
  border-color: var(--tblr-secondary);
  color: #ffffff;
}

.btn-secondary:hover {
  background: #545b66;
  border-color: #545b66;
  color: #ffffff;
}

/* Success Button */
.btn-success {
  background: var(--tblr-success);
  border-color: var(--tblr-success);
  color: #ffffff;
}

.btn-success:hover {
  background: #269537;
  border-color: #269537;
  color: #ffffff;
}

/* Warning Button */
.btn-warning {
  background: var(--tblr-warning);
  border-color: var(--tblr-warning);
  color: #ffffff;
}

.btn-warning:hover {
  background: #d95805;
  border-color: #d95805;
  color: #ffffff;
}

/* Danger Button */
.btn-danger {
  background: var(--tblr-danger);
  border-color: var(--tblr-danger);
  color: #ffffff;
}

.btn-danger:hover {
  background: #bd2c2c;
  border-color: #bd2c2c;
  color: #ffffff;
}

/* Info Button */
.btn-info {
  background: var(--tblr-info);
  border-color: var(--tblr-info);
  color: #ffffff;
}

.btn-info:hover {
  background: #2d8cd3;
  border-color: #2d8cd3;
  color: #ffffff;
}

/* Outline Buttons */
.btn-outline-primary {
  color: var(--tblr-primary);
  border-color: var(--tblr-primary);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: #ffffff;
}

.btn-outline-secondary {
  color: var(--tblr-secondary);
  border-color: var(--tblr-border-color);
  background: transparent;
}

.btn-outline-secondary:hover {
  background: var(--tblr-secondary);
  border-color: var(--tblr-secondary);
  color: #ffffff;
}

.btn-outline-secondary.active,
.btn-outline-secondary:active {
  background: var(--tblr-secondary) !important;
  border-color: var(--tblr-secondary) !important;
  color: #ffffff !important;
}

.btn-outline-success {
  color: var(--tblr-success);
  border-color: var(--tblr-success);
  background: transparent;
}

.btn-outline-success:hover {
  background: var(--tblr-success);
  color: #ffffff;
}

.btn-outline-warning {
  color: var(--tblr-warning);
  border-color: var(--tblr-warning);
  background: transparent;
}

.btn-outline-warning:hover {
  background: var(--tblr-warning);
  color: #ffffff;
}

.btn-outline-danger {
  color: var(--tblr-danger);
  border-color: var(--tblr-danger);
  background: transparent;
}

.btn-outline-danger:hover {
  background: var(--tblr-danger);
  color: #ffffff;
}

.btn-outline-info {
  color: var(--tblr-info);
  border-color: var(--tblr-info);
  background: transparent;
}

.btn-outline-info:hover {
  background: var(--tblr-info);
  color: #ffffff;
}

/* Ghost Button */
.btn-ghost-primary {
  color: var(--tblr-primary);
  background: transparent;
  border-color: transparent;
}

.btn-ghost-primary:hover {
  background: var(--tblr-primary-lt);
}

/* Button Sizes */
.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: var(--tblr-font-size-sm);
  border-radius: var(--tblr-border-radius-sm);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: var(--tblr-font-size-lg);
  border-radius: var(--tblr-border-radius);
}

/* Button with Icon */
.btn-icon {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
}

.btn-icon.btn-sm {
  width: 1.75rem;
  height: 1.75rem;
}

.btn-icon.btn-lg {
  width: 3rem;
  height: 3rem;
}

/* ========================================
   FORMS - TABLER STYLE
   ======================================== */

.form-label {
  font-size: var(--tblr-font-size-base);
  font-weight: 500;
  color: var(--tblr-body-color);
  margin-bottom: 0.5rem;
}

.form-control {
  font-family: var(--tblr-font-family);
  font-size: var(--tblr-font-size-base);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
  background: var(--tblr-card-bg);
  transition: var(--tblr-transition);
  line-height: 1.5;
}

.form-control:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--tblr-primary-rgb), 0.25);
  outline: none;
}

.form-control::placeholder {
  color: var(--tblr-light-text);
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--tblr-secondary-lt);
  opacity: 1;
}

/* Form Select */
.form-select {
  font-family: var(--tblr-font-family);
  font-size: var(--tblr-font-size-base);
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
  background-color: var(--tblr-card-bg);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23626976' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  transition: var(--tblr-transition);
}

.form-select:focus {
  border-color: var(--tblr-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--tblr-primary-rgb), 0.25);
  outline: none;
}

/* Input Group */
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: var(--tblr-font-size-base);
  font-weight: 400;
  color: var(--tblr-body-color);
  text-align: center;
  white-space: nowrap;
  background: var(--tblr-secondary-lt);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
}

/* Floating Labels */
.form-floating > label {
  color: var(--tblr-muted);
  padding: 0.5rem 0.75rem;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--tblr-primary);
}

/* ========================================
   TABLES - TABLER STYLE
   ======================================== */

.table {
  font-size: var(--tblr-font-size-base);
  color: var(--tblr-body-color);
  border-collapse: collapse;
  width: 100%;
}

.table thead th {
  background: var(--tblr-secondary-lt);
  border-bottom: 1px solid var(--tblr-border-color);
  font-weight: 600;
  font-size: var(--tblr-font-size-sm);
  color: var(--tblr-body-color);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--tblr-border-color);
  vertical-align: middle;
}

.table tbody tr {
  transition: var(--tblr-transition);
}

.table tbody tr:hover {
  background: var(--tblr-primary-lt);
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(0, 0, 0, 0.02);
}

.table-striped tbody tr:nth-of-type(odd):hover {
  background: var(--tblr-primary-lt);
}

/* Table Responsive */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Card Table */
.card > .table,
.card > .table-responsive > .table {
  margin-bottom: 0;
}

.card > .table thead th:first-child,
.card > .table-responsive > .table thead th:first-child {
  border-top-left-radius: var(--tblr-border-radius-lg);
}

.card > .table thead th:last-child,
.card > .table-responsive > .table thead th:last-child {
  border-top-right-radius: var(--tblr-border-radius-lg);
}

/* ========================================
   BADGES
   ======================================== */

.badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--tblr-border-radius);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge.bg-primary { background: var(--tblr-primary) !important; }
.badge.bg-secondary { background: var(--tblr-secondary) !important; }
.badge.bg-success { background: var(--tblr-success) !important; }
.badge.bg-warning { background: var(--tblr-warning) !important; color: #ffffff !important; }
.badge.bg-danger { background: var(--tblr-danger) !important; }
.badge.bg-info { background: var(--tblr-info) !important; }

/* Soft Badges */
.badge-soft-primary { background: var(--tblr-primary-lt); color: var(--tblr-primary); }
.badge-soft-success { background: var(--tblr-success-lt); color: var(--tblr-success); }
.badge-soft-warning { background: var(--tblr-warning-lt); color: var(--tblr-warning); }
.badge-soft-danger { background: var(--tblr-danger-lt); color: var(--tblr-danger); }
.badge-soft-info { background: var(--tblr-info-lt); color: var(--tblr-info); }
/* Darker than --tblr-secondary so the small uppercase badge text clears
   WCAG AA (7:1) against the light tint instead of the palette's 2.9:1. */
.badge-soft-secondary { background: var(--tblr-secondary-lt); color: #24594f; }

/* Soft UI Status Badges */
.badge-soft-scheduled {
  background: #E0E7FF;
  color: #3730A3;
  border: 1px solid #C7D2FE;
}

.badge-soft-timeoff {
  background: #FFE4E6;
  color: #BE123C;
  border: 1px solid #FECDD3;
}

.badge-soft-total {
  background: #E0F2FE;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}

.badge-soft-unassigned {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.badge-soft-pending {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.badge-soft-approved {
  background: #D1FAE5;
  color: #065F46;
  border: 1px solid #A7F3D0;
}

.badge-soft-denied {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FECACA;
}

/* Pill Badges */
.badge-pill {
  border-radius: 100px;
}

/* ========================================
   ALERTS
   ======================================== */

.alert {
  padding: var(--tblr-spacer);
  border: 1px solid transparent;
  border-radius: var(--tblr-border-radius);
  font-size: var(--tblr-font-size-base);
}

.alert-primary {
  background: var(--tblr-primary-lt);
  border-color: rgba(var(--tblr-primary-rgb), 0.2);
  color: var(--tblr-primary-dk) !important;
}

.alert-success {
  background: var(--tblr-success-lt);
  border-color: rgba(var(--tblr-success-rgb), 0.2);
  color: #227a30 !important;
}

.alert-warning {
  background: var(--tblr-warning-lt);
  border-color: rgba(var(--tblr-warning-rgb), 0.2);
  color: #b84b04 !important;
}

.alert-danger {
  background: var(--tblr-danger-lt);
  border-color: rgba(var(--tblr-danger-rgb), 0.2);
  color: #a82929 !important;
}

.alert-info {
  background: var(--tblr-info-lt);
  border-color: rgba(var(--tblr-info-rgb), 0.2);
  color: var(--tblr-primary) !important;
}

/* Alert with Icon */
.alert-icon {
  display: flex;
  align-items: flex-start;
  gap: var(--tblr-spacer);
}

.alert-icon > i,
.alert-icon > svg {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* Dismissible alerts - fix close button positioning */
.alert-dismissible {
  padding-right: var(--tblr-spacer);
}

.alert-dismissible .btn-close {
  position: static;
  padding: 0.5rem;
  flex-shrink: 0;
}

.alert-dismissible .d-flex .btn-close {
  position: static;
  margin: 0;
}

/* ========================================
   MODALS - TABLER STYLE
   ======================================== */

.modal-content {
  border: none;
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--tblr-shadow-lg);
}

.modal-header {
  padding: var(--tblr-spacer-lg);
  background: var(--tblr-primary);
  border-bottom: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg) var(--tblr-border-radius-lg) 0 0;
}

.modal-title {
  font-size: var(--tblr-font-size-h3);
  font-weight: 600;
  color: #ffffff !important;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-body {
  padding: var(--tblr-spacer-lg);
  max-height: 70vh;
  overflow-y: auto;
}

.modal-footer {
  padding: var(--tblr-spacer) var(--tblr-spacer-lg);
  background: var(--tblr-secondary-lt);
  border-top: 1px solid var(--tblr-border-color);
  border-radius: 0 0 var(--tblr-border-radius-lg) var(--tblr-border-radius-lg);
  color: var(--tblr-body-color);
}

.modal-backdrop {
  background-color: rgba(29, 39, 59, 0.5);
  backdrop-filter: blur(4px);
}

/* ========================================
   DROPDOWN MENUS
   ======================================== */

.dropdown-menu {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-shadow-md);
  padding: 0.5rem;
  background: var(--tblr-card-bg);
}

.dropdown-item {
  padding: 0.5rem 0.75rem;
  border-radius: var(--tblr-border-radius-sm);
  font-size: var(--tblr-font-size-base);
  color: var(--tblr-body-color);
  transition: var(--tblr-transition);
}

.dropdown-item:hover {
  background: var(--tblr-primary-lt);
  color: var(--tblr-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--tblr-primary);
  color: #ffffff;
}

.dropdown-item i,
.dropdown-item svg {
  margin-right: 0.5rem;
  width: 1rem;
  text-align: center;
  color: var(--tblr-muted);
}

.dropdown-item:hover i,
.dropdown-item:hover svg {
  color: var(--tblr-primary);
}

.dropdown-divider {
  margin: 0.5rem 0;
  border-color: var(--tblr-border-color);
}

.dropdown-header {
  padding: 0.5rem 0.75rem;
  font-size: var(--tblr-font-size-sm);
  font-weight: 600;
  color: var(--tblr-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ========================================
   NAV TABS
   ======================================== */

.nav-tabs {
  border-bottom: 1px solid var(--tblr-border-color);
  gap: 0.5rem;
}

.nav-tabs .nav-link {
  color: var(--tblr-muted) !important;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.75rem 1rem;
  font-weight: 500;
  transition: var(--tblr-transition);
  background: transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--tblr-primary) !important;
  border-bottom-color: var(--tblr-primary);
}

.nav-tabs .nav-link.active {
  color: var(--tblr-primary) !important;
  border-bottom-color: var(--tblr-primary);
  background: transparent !important;
}

/* ========================================
   AVATARS
   ======================================== */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--tblr-primary-lt);
  color: var(--tblr-primary);
  font-weight: 600;
  font-size: 0.875rem;
}

.avatar-sm {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
}

.avatar-lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.25rem;
}

.avatar-xl {
  width: 5rem;
  height: 5rem;
  font-size: 1.5rem;
}

.avatar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.avatar-list-stacked .avatar {
  margin-left: -0.75rem;
  border: 2px solid var(--tblr-card-bg);
}

.avatar-list-stacked .avatar:first-child {
  margin-left: 0;
}

/* ========================================
   EMPTY STATES
   ======================================== */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--tblr-spacer-xl);
  text-align: center;
}

.empty-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--tblr-secondary-lt);
  color: var(--tblr-body-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--tblr-spacer);
  font-size: 1.5rem;
}

.empty-title {
  font-size: var(--tblr-font-size-lg);
  font-weight: 600;
  color: var(--tblr-body-color);
  margin-bottom: 0.5rem;
}

.empty-subtitle {
  font-size: var(--tblr-font-size-base);
  color: var(--tblr-muted);
  max-width: 300px;
}

.empty-action {
  margin-top: var(--tblr-spacer);
}

/* ========================================
   STATUS DOT
   ======================================== */

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tblr-muted);
}

.status-dot-animated {
  animation: pulse 1.5s ease-in-out infinite;
}

.status-dot.bg-primary { background: var(--tblr-primary); }
.status-dot.bg-success { background: var(--tblr-success); }
.status-dot.bg-warning { background: var(--tblr-warning); }
.status-dot.bg-danger { background: var(--tblr-danger); }
.status-dot.bg-info { background: var(--tblr-info); }

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* ========================================
   PROGRESS BARS
   ======================================== */

.progress {
  height: 0.5rem;
  background: var(--tblr-secondary-lt);
  border-radius: var(--tblr-border-radius);
  overflow: hidden;
}

.progress-bar {
  background: var(--tblr-primary);
  border-radius: var(--tblr-border-radius);
  transition: width var(--tblr-transition-slow);
}

.progress-bar.bg-success { background: var(--tblr-success) !important; }
.progress-bar.bg-warning { background: var(--tblr-warning) !important; }
.progress-bar.bg-danger { background: var(--tblr-danger) !important; }
.progress-bar.bg-info { background: var(--tblr-info) !important; }

/* ========================================
   UTILITIES
   ======================================== */

/* Text Colors */
.text-primary { color: var(--tblr-primary) !important; }
.text-secondary { color: var(--tblr-secondary) !important; }
.text-success { color: var(--tblr-success) !important; }
.text-warning { color: var(--tblr-warning) !important; }
.text-danger { color: var(--tblr-danger) !important; }
.text-info { color: var(--tblr-info) !important; }
.text-muted { color: var(--tblr-muted) !important; }

/* Background Colors */
.bg-primary { background-color: var(--tblr-primary) !important; }
.bg-secondary { background-color: var(--tblr-secondary) !important; }
.bg-success { background-color: var(--tblr-success) !important; }
.bg-warning { background-color: var(--tblr-warning) !important; }
.bg-danger { background-color: var(--tblr-danger) !important; }
.bg-info { background-color: var(--tblr-info) !important; }

.bg-primary-lt { background-color: var(--tblr-primary-lt) !important; }
.bg-success-lt { background-color: var(--tblr-success-lt) !important; }
.bg-warning-lt { background-color: var(--tblr-warning-lt) !important; }
.bg-danger-lt { background-color: var(--tblr-danger-lt) !important; }
.bg-info-lt { background-color: var(--tblr-info-lt) !important; }

/* Border Left Colors */
.border-left-primary { border-left: 3px solid var(--tblr-primary) !important; }
.border-left-success { border-left: 3px solid var(--tblr-success) !important; }
.border-left-warning { border-left: 3px solid var(--tblr-warning) !important; }
.border-left-danger { border-left: 3px solid var(--tblr-danger) !important; }
.border-left-info { border-left: 3px solid var(--tblr-info) !important; }

/* Spacing helpers */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* Font sizes */
.fs-sm { font-size: var(--tblr-font-size-sm) !important; }
.fs-base { font-size: var(--tblr-font-size-base) !important; }
.fs-lg { font-size: var(--tblr-font-size-lg) !important; }

/* ========================================
   TOPNAV OVERRIDE (for horizontal nav style)
   ======================================== */

.sb-topnav {
  background: var(--tblr-card-bg) !important;
  border-bottom: 1px solid var(--tblr-border-color);
  box-shadow: none;
  padding: 0 var(--tblr-spacer-lg);
}

.sb-topnav .navbar-brand {
  color: var(--tblr-body-color) !important;
  font-weight: 600;
}

.sb-topnav .nav-link {
  color: var(--tblr-muted) !important;
  padding: 0.75rem 1rem !important;
  border-radius: var(--tblr-border-radius);
}

.sb-topnav .nav-link:hover {
  color: var(--tblr-primary) !important;
  background: var(--tblr-primary-lt);
}

.sb-topnav .nav-link.active {
  color: var(--tblr-primary) !important;
}

.sb-topnav .dropdown-toggle::after {
  color: var(--tblr-muted);
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.fade-in-up {
  animation: fadeInUp 0.3s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 991.98px) {
  .page-content {
    padding: var(--tblr-spacer);
  }

  .card-body {
    padding: var(--tblr-spacer);
  }

  .page-title-box {
    margin-bottom: var(--tblr-spacer);
  }
}

@media (max-width: 575.98px) {
  .stat-card {
    padding: var(--tblr-spacer);
  }

  .stat-card-value {
    font-size: 1.25rem;
  }

  .btn {
    padding: 0.375rem 0.75rem;
    font-size: var(--tblr-font-size-sm);
  }
}

#availabilityAccordion .accordion-body {
  background-color: #fff;
}

#availabilityAccordion .accordion-button {
  background-color: var(--tblr-secondary-lt);
  font-size: 0.875rem;
  color: var(--tblr-body-color);
}

#availabilityAccordion .accordion-button:not(.collapsed) {
  background-color: var(--tblr-danger-lt);
  color: var(--tblr-danger);
  box-shadow: none;
}

#availabilityAccordion .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

/* Availability warning badges */
.availability-badge-main {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  cursor: default;
}

.availability-badge-main .badge-date {
  font-weight: 600;
  padding-right: 0.5rem;
  border-right: 1px solid rgba(255,255,255,0.3);
}

.availability-badge-main .badge-time {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
}

.availability-badge-main .badge-icon {
  opacity: 0.8;
  font-size: 0.75rem;
}

/* Orange background for moderate severity */
.bg-orange {
  background-color: #fd7e14 !important;
}

/* ========================================
   DRAG ACTION POPUP
   ======================================== */

.drag-action-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drag-action-content {
  background: white;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: popupFadeIn 0.15s ease-out;
}

.drag-action-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tblr-body-color);
  margin-bottom: 16px;
}

.drag-action-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.drag-action-buttons .btn {
  min-width: 90px;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   DARK MODE SUPPORT (Optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Uncomment to enable automatic dark mode */
    /* --tblr-body-bg: #1a1d21;
    --tblr-card-bg: #232730;
    --tblr-border-color: #3a3f47;
    --tblr-body-color: #e6e7e9;
    --tblr-muted: #a0a6ad; */
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  .navbar-vertical,
  .sidebar-toggle,
  .sidebar-overlay,
  .page-header {
    display: none !important;
  }

  .page-body {
    margin-left: 0 !important;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ========================================
   NAVY NAVBAR STYLES
   ======================================== */

.navbar-navy {
  /* --app-color is the current app's colour, set by the body class in
     app-theme.css. It falls back to the brand navy, so an unthemed page and
     the employee portal look exactly as they did. */
  background: var(--app-color, var(--tblr-primary)) !important;
  border-bottom: 2px solid var(--app-color-lt, var(--tblr-accent));
  box-shadow: 0 2px 8px rgba(1, 37, 84, 0.15);
}

.navbar-navy .navbar-brand {
  color: #ffffff !important;
}

.navbar-navy .navbar-brand span {
  color: #ffffff !important;
}

.navbar-navy .nav-link {
  /* 0.92, not 0.85. The per-app bar colours are mid-tone rather than the
     near-black navy this was written for. Measured: white at 0.85 scores
     4.21:1 on the scheduler's bar and 4.24:1 on Home's -- both under WCAG
     AA's 4.5:1 for normal text, not just the one I first assumed. At 0.92 the
     three bars score 6.97, 8.14 and 6.91, and the navy is unchanged at 12.94
     where it was 11.14. See static/css/app-theme.css for the shades. */
  color: rgba(255, 255, 255, 0.92) !important;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.navbar-navy .nav-link:hover {
  color: #ffffff !important;
  background: rgba(179, 224, 215, 0.3);
}

.navbar-navy .nav-link.active {
  color: #ffffff !important;
  background: rgba(179, 224, 215, 0.2);
}

.navbar-navy .nav-link i {
  color: inherit;
}

/* Dropdown toggle arrow */
.navbar-navy .dropdown-toggle::after {
  color: rgba(255, 255, 255, 0.7);
}

/* Dropdown menu styling */
.navbar-navy .dropdown-menu {
  border: none;
  box-shadow: 0 8px 24px rgba(1, 37, 84, 0.15);
  border-radius: var(--tblr-border-radius-lg);
}

.navbar-navy .dropdown-item {
  color: var(--tblr-body-color);
}

.navbar-navy .dropdown-item:hover {
  background: var(--tblr-accent-lt);
  color: var(--tblr-primary);
}

.navbar-navy .dropdown-item.active {
  background: var(--tblr-primary);
  color: #ffffff;
}

.navbar-navy .dropdown-item i {
  color: var(--tblr-muted);
}

.navbar-navy .dropdown-item:hover i {
  color: var(--tblr-primary);
}

.navbar-navy .dropdown-item.active i {
  color: #ffffff;
}

/* Mobile toggler */
.navbar-navy .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
}

.navbar-navy .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Pending badge - navy background with white text for contrast */
.badge-navbar-pending {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Landing spot for a deep-link from the unified admin inbox, which anchors its
   rows at the specific request (#swap-12, #offer-4). The browser scrolls the
   element into view but gives no sign which one it scrolled to, and on a page
   of near-identical cards that is no help at all. Shared rather than
   re-solved per queue, so every page that opts in highlights the same way.
   scroll-margin-top clears the sticky navbar. */
.deep-link-target:target {
  box-shadow: 0 0 0 3px rgba(1, 37, 84, 0.18);
  scroll-margin-top: 5rem;
}

/* The same badge inside a dropdown sits on a light surface, where white text on
   20% white is invisible -- the count renders as a blank outline. Scoped as an
   override rather than a second class so a badge moved between the bar and a
   menu can never silently disappear. */
.dropdown-menu .badge-navbar-pending {
  background: var(--tblr-primary) !important;
  color: #ffffff !important;
  border-color: transparent;
}

/* ...and on the active item, whose own background is already the primary navy. */
.dropdown-item.active .badge-navbar-pending,
.dropdown-item:active .badge-navbar-pending {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.35);
}

/* An attention-coloured modal header, legible.

   schedule-realtime.css paints every .modal-header navy and sets `color: white`
   on it plus `filter: brightness(0) invert(1)` on its close button. A utility
   class like .bg-warning-subtle repaints the background and nothing else, so an
   amber header arrived as white text and a white X on pale yellow. All three
   properties move together here, which is the whole reason this is a class
   rather than two utilities at the call site.

   Both selectors outrank what they override on specificity (0,2,0 and 0,3,0
   against 0,1,0 and 0,2,0), so which stylesheet loads last cannot change the
   result. #4a3600 on #fff3cd is ~10:1, comfortably past AA. */
.modal-header.modal-header--attention {
  background: #fff3cd;
  color: #4a3600;
  border-bottom: 1px solid #f0d68a;
}

/* !important because .modal-title above carries one, and nothing outranks that
   on specificity alone -- without it the title stays white on the pale amber
   while the close button beside it correctly goes dark. #4a3600 on #fff3cd is
   ~10:1. */
.modal-header.modal-header--attention .modal-title {
  color: #4a3600 !important;
}

.modal-header.modal-header--attention .btn-close {
  filter: none;
  opacity: 0.7;
}

/* User avatar in navbar - semi-transparent white with white icon for contrast */
.avatar-navbar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Ensure nav items in collapsed menu still look good */
@media (max-width: 1199.98px) {
  .navbar-navy .navbar-collapse {
    background: var(--tblr-primary);
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: var(--tblr-border-radius-lg);
  }

  .navbar-navy .nav-link {
    padding: 0.75rem 1rem;
  }

  .navbar-navy .dropdown-menu {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
  }

  .navbar-navy .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
  }

  .navbar-navy .dropdown-item:hover {
    background: rgba(179, 224, 215, 0.2);
    color: #ffffff;
  }

  .navbar-navy .dropdown-item i {
    color: rgba(255, 255, 255, 0.7);
  }

  .navbar-navy .dropdown-header {
    color: rgba(255, 255, 255, 0.5);
  }

  .navbar-navy .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1);
  }
}