body{font-family:var(--font-ui);}

/* Bootstrap primary color overrides */
.btn-primary{background:var(--brand-blue); color:#fff; border-color:var(--brand-blue);}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{background:#1530c7; border-color:#1530c7;}
.btn-outline-primary{color:var(--brand-blue); border-color:var(--brand-blue);}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active{background:var(--brand-blue); border-color:var(--brand-blue); color:#fff;}
.btn-link{color:var(--brand-blue); text-decoration:none;}
.btn-link:hover, .btn-link:focus{color:#1530c7; text-decoration:underline;}
.badge.bg-primary{background-color:var(--brand-blue) !important;}
.text-primary{color:var(--brand-blue) !important;}
.border-primary{border-color:var(--brand-blue) !important;}
a{color:var(--brand-blue);}
a:hover{color:#1530c7;}

.badge{border-radius:999px; padding:.25rem .6rem; background:var(--grey-300);}
/* Theme header/footer consumption */
.navbar{ background-color: var(--header-bg, var(--brand-blue)) !important; color: var(--header-fg, #fff) !important; border-bottom: 1px solid var(--header-bg, var(--brand-blue)) !important; }
.navbar .navbar-brand, .navbar .nav-link{ color: var(--header-fg, #fff) !important; }
footer, .site-footer{ background-color: var(--footer-bg, #111) !important; color: var(--footer-fg, #fff) !important; }
.site-footer .social-pill{ display:inline-flex; align-items:center; justify-content:center; height:44px; min-width:44px; padding:0 .6rem; border:1px solid rgba(255,255,255,.35); color:#fff; text-decoration:none; border-radius:999px; font-size:.8rem; letter-spacing:.3px; backdrop-filter:saturate(120%) blur(2px); }
.site-footer .social-pill:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }
.site-footer .social-pill img{ height:28px; width:auto; display:block; }
/* Footer color and text overrides */
.site-footer{ background-color: var(--header-bg, var(--brand-blue, #0b1f3a)) !important; color: var(--header-fg, #fff) !important; }
/* Force readable text in footer */
.site-footer, .site-footer p, .site-footer li, .site-footer small, .site-footer span, .site-footer h6 { color: #fff !important; }
.site-footer .text-secondary{ color: rgba(255,255,255,0.92) !important; }
.site-footer a{ color:#fff !important; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.site-footer .opacity-75{ opacity: .95 !important; }

/* === FONT DEFINITIONS === */
/* Self-hosted Metropolis fonts */
@font-face {
  font-family: 'Metropolis';
  src: url(/fonts/metropolis/Metropolis-Light.otf);
  font-weight: 300;
}
@font-face {
  font-family: 'Metropolis';
  src: url(/fonts/metropolis/Metropolis-Regular.otf);
  font-weight: 400;
}
@font-face {
  font-family: 'Metropolis';
  src: url(/fonts/metropolis/Metropolis-Medium.otf);
  font-weight: 500;
}
@font-face {
  font-family: 'Metropolis';
  src: url(/fonts/metropolis/Metropolis-Bold.otf);
  font-weight: 700;
}
/* ... more @font-face rules ... */

/* Or for Google Fonts: */
@import /* url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap'); */

body{font-family:var(--font-ui);}
/* ... rest of existing styles ... */

/* Utilities: navbar sizes, brand logo, icons */
.navbar .container.navbar-min-64, .navbar-min-64 .container{ min-height:64px; }
.navbar .container.navbar-min-72, .navbar .container-fluid.navbar-min-72, .navbar-min-72 .container{ min-height:72px; }
.brand-logo-sm{ width:54px; height:54px; object-fit:contain; display:block; }
.brand-logo-lg{ width:78px; height:78px; object-fit:contain; display:block; }
.icon-18{ height:18px; width:auto; }
/* Site-wide header icon size to align with Bootstrap button height */
.site-header-icon{ height: calc(1.5em + 0.75rem + (var(--bs-border-width, 1px) * 2)); width:auto; display:inline-block; }

/* Header action buttons (Logout/Help) */
.logout-btn{ background: transparent !important; border: 0 !important; padding: 0 !important; cursor: pointer; display:inline-flex; align-items:center; box-shadow: none !important; }
.logout-btn:focus{ outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }
/* Header icons — fixed, equal size for true parity */
.header-icon{
  height: 26px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
/* Help icon baseline (no offset) */
.help-icon{ transform: none; }
.pre-wrap{ white-space:pre-wrap; word-break:break-word; }

/* Site-wide content padding inside main */
.content-pad{ padding: 16px; }
@media (max-width: 576px){ .content-pad{ padding: 12px; } }
.minw-200{ min-width:200px; }
.maxw-420{ max-width:420px; }

/* Env banner (uses theme header variables by default) */
#env-banner{ background-color: var(--header-bg, var(--brand-blue)); color: var(--header-fg, #fff); border-top: 2px solid var(--header-bg, var(--brand-blue)); box-shadow: 0 -2px 8px rgba(0,0,0,.25); opacity:.97; }
#env-banner .env-icon{ height: calc(1.5em + 0.75rem + (var(--bs-border-width, 1px) * 2)); width:auto; display:block; }
#env-banner-stub{ background: transparent; border: 0; }

/* Overlay/backdrop and spinner */
.overlay-backdrop{ background: rgba(255,255,255,.85); pointer-events:none; z-index:9999; }
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-48{ width:48px; height:48px; border:4px solid var(--brand-blue, #316CF4); border-top-color: transparent; border-radius:50%; animation: spin 1s linear infinite; }
.dialog-basic{ padding:48px; border:2px solid #1B39E2; border-radius:16px; max-width:560px; width:90vw; }
.dialog-basic::backdrop{ background: rgba(255,255,255,.85); }
.dialog-basic h3{ color:#0b2a4a; margin-bottom:24px; font-size:2rem; font-weight:600; }
.dialog-basic p{ color:#6c757d; margin-bottom:32px; font-size:1.125rem; }
.dialog-basic .btn{ min-width:160px; padding:12px 24px; font-size:1.125rem; }

/* Print helpers (lightweight; keep agreements maintainable) */
.print-header{ border-bottom:1px solid #aaa; padding:4mm 0; font-size:10pt; }
.print-footer{ border-top:1px solid #aaa; padding-top:2mm; font-size:9pt; text-align:center; }

/* Print utilities: scoped helpers to replace inline styles in agreements */
.print-table{ width:100%; border-collapse:collapse; }
.print-th{ border-bottom:1px solid grey; background-color:#EBEBEB; }
.print-td{ padding:3px 30px; }
.print-bb{ border-bottom:1px solid grey; }
.print-text-center{ text-align:center; }
.print-muted{ color:#C0C0C0; }
.print-w-40{ width:40%; }
.print-w-30{ width:30%; }
.print-w-540{ width:540px; }

.maxw-360{ max-width:360px; }

/* Dropdown readability inside themed navbar */
.navbar .dropdown-menu{ color:#212529; background-color:#fff; }
.navbar .dropdown-menu .dropdown-item{ color:#212529 !important; }
.navbar .dropdown-menu .dropdown-item:hover, \
.navbar .dropdown-menu .dropdown-item:focus{ color:#111 !important; background-color:rgba(0,0,0,.05); }
/* Ensure dropdowns overlay the page and do not expand the header height */
.navbar{ overflow: visible !important; }
.navbar .dropdown-menu{ position: absolute !important; z-index: 1080; }

/* Toast slide-in animation from right */
@keyframes slideInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.showing {
  animation: slideInRight 0.3s ease-out forwards;
}

.toast.show {
  animation: slideInRight 0.3s ease-out forwards;
}

/* Widget styling */
.widget-stat-number{ font-size:1.5rem; font-weight:600; line-height:1.2; }
.widget-header{ 
  background-color:#f8f9fa;
  display: grid !important;
  grid-template-columns: 32px 1fr 80px 32px;
  grid-template-rows: 1fr;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
}
.widget-header > *:nth-child(n+5) { display: none !important; }
/* Widget header element slots - Order: traffic-light, title, badge, chevron */
.widget-traffic-light{ grid-column: 1; justify-self: center; width: 24px; }
.widget-title{ 
  grid-column: 2; 
  justify-self: start; 
  margin-bottom: 0 !important; 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}
.widget-badge-container{ grid-column: 3; justify-self: end; }
.widget-chevron{ grid-column: 4; justify-self: center; width: 24px; flex-shrink: 0; }
.widget-badge{ background-color:#1B39E2; }
.card-body.widget-collapsed{ display: none; }
.card-footer.widget-collapsed{ display: none; }
.widget-footer.widget-collapsed{ display: none; }

/* Owner Hub navigation card headers - distinct from dashboard widgets */
.hub-card-header {
  background-color: #f8f9fa;
  padding: 12px 16px;
}

/* Brand name styling */
.mynzh {
  font-weight: 600;
  color: #1B39E2;
}
.site-footer .mynzh {
  color: #fff;
}
/* Remove extra emphasis when mynzh appears in headings */
h1 .mynzh, h2 .mynzh, h3 .mynzh, h4 .mynzh, h5 .mynzh, h6 .mynzh {
  font-weight: inherit;
  color: inherit;
}
  ul.dashed-list {
    /* Sets the marker to a dash followed by a space */
    list-style-type: "- ";
  }
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}