/* ============================================================
 * UMSA Bridge CSS — Smooths transition from Bootstrap
 *
 * This file resolves conflicts between UMSA Design System and
 * Bootstrap 5.3 during the gradual migration. Once Bootstrap
 * is fully removed, this file should be deleted.
 *
 * Load AFTER umsa.bundle.css and Bootstrap.
 * ============================================================ */

/* ============================================================
 * MISSING UMSA TOKENS — variables referenced by bridge CSS that
 * aren't yet defined in umsa.bundle.css tokens.
 * Remove when migrating to a newer version of UMSA DS.
 * ============================================================ */
:root {
  --color-bg-elevated: var(--stone-0, #ffffff);
  --color-bg-hover:    var(--stone-100, #f5f5f4);
  --color-bg-inverse:  var(--stone-900, #1c1917);
  --color-border-hover: var(--stone-400, #a8a29e);
}
[data-theme="dark"] {
  --color-bg-elevated: var(--stone-900, #1c1917);
  --color-bg-hover:    rgba(255,255,255,0.05);
  --color-bg-inverse:  var(--stone-950, #0c0a09);
  --color-border-hover: var(--stone-500, #78716c);
}

/* ===== UMSA navbar takes priority over Bootstrap .navbar ===== */
nav.navbar {
  height: 56px;
  background: var(--color-bg-inverted);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-6);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.navbar .container-fluid {
  all: unset;
  display: contents;
}

/* UMSA nav links */
.navbar__nav {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 100%;
}

.navbar__link {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.7);
  padding: 0 var(--space-3);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color var(--motion-interactive), border-color var(--motion-interactive);
}
.navbar__link:hover { color: var(--color-text-inverted); }
.navbar__link.is-active,
.navbar__link.active {
  color: var(--color-text-inverted);
  border-bottom-color: var(--color-brand-primary);
}
.navbar__link .material-icons { font-size: 14px; }

/* Right section */
.navbar__right {
  margin-left: auto;
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

/* Override Bootstrap dropdown toggle inside UMSA navbar */
.navbar .dropdown-toggle::after {
  display: none;
}
.navbar .nav-link.dropdown-toggle {
  all: unset;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.7);
  padding: 0 var(--space-3);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--motion-interactive), border-color var(--motion-interactive);
}
.navbar .nav-link.dropdown-toggle:hover { color: var(--color-text-inverted); }
.navbar .nav-link.dropdown-toggle.show {
  color: var(--color-text-inverted);
  border-bottom-color: var(--color-brand-primary);
}
.navbar .nav-link.dropdown-toggle .material-icons { font-size: 14px; }

/* Bootstrap dropdown menu styled for UMSA */
.navbar .dropdown-menu {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-popover);
  padding: var(--space-2);
  margin-top: var(--space-2);
  min-width: 220px;
}
.navbar .dropdown-menu .dropdown-item {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--color-text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--motion-interactive);
}
.navbar .dropdown-menu .dropdown-item:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}
.navbar .dropdown-menu .dropdown-item .material-icons {
  font-size: 16px;
  color: var(--color-text-tertiary);
}
.navbar .dropdown-menu .dropdown-divider {
  margin: var(--space-1) 0;
  border-color: var(--color-border-subtle);
}

/* Bottom nav */
.sgi-bottom-nav {
  display: flex;
  height: 60px;
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-subtle);
  padding-bottom: 4px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
}
.sgi-bottom-nav .sgi-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--color-text-tertiary);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  position: relative;
  padding-top: 4px;
  padding: 8px 4px;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--motion-interactive);
}
.sgi-bottom-nav .sgi-bottom-nav-item .material-icons { font-size: 20px; }
.sgi-bottom-nav .sgi-bottom-nav-item.active,
.sgi-bottom-nav .sgi-bottom-nav-item.is-active {
  color: var(--color-brand-primary);
}
.sgi-bottom-nav .sgi-bottom-nav-item.active::before,
.sgi-bottom-nav .sgi-bottom-nav-item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  height: 2px;
  background: var(--color-brand-primary);
  width: 28px;
  border-radius: 0 0 2px 2px;
}

.layout-desktop-nav,
.layout-desktop-only {
  display: none;
}
.layout-mobile-only {
  display: flex;
}
.navbar__ghost-action,
.navbar__auth-link {
  color: rgba(255,255,255,0.7) !important;
}
.navbar__notification {
  position: relative;
}
.navbar__notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 9px;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
}
.navbar__logout-form {
  margin: 0;
}
.app-footer {
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-tertiary);
  font-size: var(--fs-11);
  padding: var(--space-4);
  text-align: center;
}
.mobile-menu-user {
  align-items: center;
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
}
.mobile-menu-avatar {
  font-size: var(--fs-14);
  height: 40px;
  margin-left: 0;
  width: 40px;
}
.mobile-menu-username {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
}
.mobile-menu-status {
  color: var(--color-feedback-success);
}
.mobile-menu-section {
  margin: var(--space-3) 0 var(--space-1);
}
.mobile-menu-logout {
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}
.mobile-menu-logout .btn {
  width: 100%;
}

@media (min-width: 768px) {
  .layout-desktop-nav {
    display: flex;
  }
  .layout-desktop-only {
    display: block;
  }
  .layout-mobile-only {
    display: none;
  }
}

/* Main content area — override Bootstrap container */
main {
  padding: var(--space-3) var(--space-3) 72px;
}

/* container-fluid fallback (Bootstrap removed) */
.container-fluid {
  width: 100%;
  margin: 0 auto;
}
.page-shell {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 992px) {
  main { padding: var(--space-4) var(--space-4) 72px; }
}

/* ===== UMSA transition utilities ===== */
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-grid { display: grid !important; }
.u-block { display: block !important; }
.u-inline-block { display: inline-block !important; }
.u-hidden { display: none !important; }
.u-align-center { align-items: center !important; }
.u-align-start { align-items: flex-start !important; }
.u-align-end { align-items: flex-end !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-column { flex-direction: column !important; }
.u-wrap { flex-wrap: wrap !important; }
.u-shrink-0 { flex-shrink: 0 !important; }
.u-grow-1 { flex-grow: 1 !important; }
.u-gap-1 { gap: var(--space-1) !important; }
.u-gap-2 { gap: var(--space-2) !important; }
.u-gap-3 { gap: var(--space-3) !important; }
.u-gap-4 { gap: var(--space-4) !important; }
.uxGap4 { gap: 4px !important; }
.u-w-full { width: 100% !important; }
.u-h-full { height: 100% !important; }
.u-min-h-screen { min-height: 100vh !important; }
.uxMinH250 { min-height: 250px !important; }
.uxW5p { width: 5% !important; }
.uxW10p { width: 10% !important; }
.uxW15p { width: 15% !important; }
.uxW20p { width: 20% !important; }
.uxW25p { width: 25% !important; }
.uxW32p { width: 32% !important; }
.uxW35p { width: 35% !important; }
.uxW40p { width: 40% !important; }
.uxW70p { width: 70% !important; }
.uxW95p { width: 95% !important; }
.uxWAuto { width: auto !important; }
.uxW30 { width: 30px !important; }
.uxW50 { width: 50px !important; }
.uxW60 { width: 60px !important; }
.uxW70 { width: 70px !important; }
.uxW80 { width: 80px !important; }
.uxW90 { width: 90px !important; }
.uxW100 { width: 100px !important; }
.uxW120 { width: 120px !important; }
.uxW130 { width: 130px !important; }
.uxW140 { width: 140px !important; }
.uxW150 { width: 150px !important; }
.uxMinW0 { min-width: 0 !important; }
.uxMinW90 { min-width: 90px !important; }
.uxMinW150 { min-width: 150px !important; }
.uxMinW180 { min-width: 180px !important; }
.uxMaxW120 { max-width: 120px !important; }
.uxMaxW140 { max-width: 140px !important; }
.uxMaxW150 { max-width: 150px !important; }
.uxMaxW160 { max-width: 160px !important; }
.uxMaxW200 { max-width: 200px !important; }
.uxMaxW240 { max-width: 240px !important; }
.uxMaxW280 { max-width: 280px !important; }
.uxMaxW320 { max-width: 320px !important; }
.uxMaxW65p { max-width: 65% !important; }
.uxMaxW70p { max-width: 70% !important; }
.uxMaxW100 { max-width: 100px !important; }
.uxMaxH200 { max-height: 200px !important; }
.uxMaxH400 { max-height: 400px !important; }
.uxMaxH450 { max-height: 450px !important; }
.uxMaxH500 { max-height: 500px !important; }
.uxH6 { height: 6px !important; }
.uxH10 { height: 10px !important; }
.uxH20 { height: 20px !important; }
.uxH50 { height: 50px !important; }
.uxH280 { height: 280px !important; }
.uxH350 { height: 350px !important; }
.uxSize40 { width: 40px !important; height: 40px !important; }
.uxSize42 { width: 42px !important; height: 42px !important; }
.uxSize48 { width: 48px !important; height: 48px !important; }
.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-auto-y { overflow-y: auto !important; }
.u-scroll-y-300 { max-height: 300px !important; overflow-y: auto !important; }
.uxTruncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.uxNowrap { white-space: nowrap !important; }
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-sticky-top { position: sticky !important; top: 0 !important; z-index: 10 !important; }
.u-float-end { float: right !important; }
.u-clear-both { clear: both !important; }
.u-flex-1 { flex: 1 1 0 !important; }
.u-img-fluid { height: auto !important; max-width: 100% !important; }
.uxVaMiddle { vertical-align: middle !important; }
.uxClickable { cursor: pointer !important; }
.uxTop50 { top: 50% !important; }
.uxRight8 { right: 8px !important; }
.uxTranslateYMinus50 { transform: translateY(-50%) !important; }
.uxZ1000 { z-index: 1000 !important; }
.uxZ1050 { z-index: 1050 !important; }
.uxZ1055 { z-index: 1055 !important; }
.uxListNone { list-style: none !important; }
.uxOpacity25 { opacity: 0.25 !important; }
.uxOpacity50 { opacity: 0.5 !important; }
.uxOpacity75 { opacity: 0.75 !important; }

.uxTextCenter { text-align: center !important; }
.uxTextStart { text-align: start !important; }
.uxTextEnd { text-align: end !important; }
.uxTextRight { text-align: right !important; }
.uxTextPrimary { color: var(--color-text-primary) !important; }
.uxTextSecondary { color: var(--color-text-secondary) !important; }
.uxTextMuted { color: var(--color-text-tertiary) !important; }
.uxTextInverted { color: var(--color-text-inverted) !important; }
.uxTextBrand { color: var(--color-brand-primary) !important; }
.uxTextSuccess { color: var(--color-feedback-success) !important; }
.uxTextWarning { color: var(--color-feedback-warning) !important; }
.uxTextDanger { color: var(--color-feedback-danger) !important; }
.uxTextInfo { color: var(--color-feedback-info) !important; }
.uxTextInfoStrong { color: #055160 !important; }
.uxTextWarningStrong { color: #856404 !important; }
.uxTextDisabled { color: var(--color-text-disabled, #ddd) !important; }
.uxFontSans { font-family: var(--font-sans) !important; }
.uxFwMedium { font-weight: var(--fw-medium) !important; }
.uxFwSemibold { font-weight: var(--fw-semibold) !important; }
.uxFwBold { font-weight: var(--fw-bold) !important; }
.uxFs10 { font-size: 10px !important; }
.uxFs11 { font-size: var(--fs-11) !important; }
.uxFs12 { font-size: var(--fs-12) !important; }
.uxFs13 { font-size: var(--fs-13) !important; }
.uxFs14 { font-size: var(--fs-14) !important; }
.uxFs16 { font-size: 1rem !important; }
.uxFs18 { font-size: 1.125rem !important; }
.uxFs22 { font-size: 1.375rem !important; }
.uxFs24 { font-size: 1.5rem !important; }
.uxFs06 { font-size: 0.6rem !important; }
.uxFs085 { font-size: 0.85rem !important; }
.uxFs085em { font-size: 0.85em !important; }
.uxFs09 { font-size: 0.9rem !important; }
.uxFs17 { font-size: 1.1rem !important; }
.uxFs20 { font-size: 1.25rem !important; }
.uxFs32 { font-size: 2rem !important; }
.uxFs40 { font-size: 2.5rem !important; }
.uxFs48 { font-size: 3rem !important; }
.uxFs64 { font-size: 4rem !important; }
.uxFs80 { font-size: 5rem !important; }
.uxLetterWide { letter-spacing: 1px !important; }
.uxUppercase { text-transform: uppercase !important; }
.uxLinkClean { text-decoration: none !important; }

.uxBgBase { background: var(--color-bg-base) !important; }
.uxBgSubtle { background: var(--color-bg-subtle) !important; }
.uxBgMuted { background: var(--color-bg-muted) !important; }
.uxBgBrand { background: var(--color-brand-primary) !important; }
.uxBgTransparent { background: transparent !important; }
.uxBgNone { background: none !important; }
.uxBgSuccess { background: var(--color-feedback-success) !important; }
.uxBgWarning { background: var(--color-feedback-warning) !important; }
.uxBgInfo { background: var(--color-feedback-info) !important; }
.uxBgDanger { background: var(--color-feedback-danger) !important; }
.uxBgInverse { background: var(--color-bg-inverse) !important; }
.uxBgBrandSoft { background: var(--color-brand-primary-bg, #fee2e2) !important; }
.uxBgSuccessSoft { background: var(--color-feedback-success-bg, #dcfce7) !important; }
.uxBgWarningSoft { background: var(--color-feedback-warning-bg, #fef3c7) !important; }
.uxBgInfoSoft { background: var(--color-feedback-info-bg, #dbeafe) !important; }
.uxBgDangerSoft { background: var(--color-feedback-danger-bg, #fee2e2) !important; }
.uxBgInfoWash { background: rgba(13, 202, 240, 0.05) !important; }
.uxBgInvertedWash { background: rgba(255,255,255,0.1) !important; }
.uxBgSuccessWash { background: rgba(25,135,84,0.03) !important; }
.uxBgDangerWash { background: rgba(220,53,69,0.03) !important; }

.u-border { border: 1px solid var(--color-border-subtle) !important; }
.u-border-top { border-top: 1px solid var(--color-border-subtle) !important; }
.u-border-bottom { border-bottom: 1px solid var(--color-border-subtle) !important; }
.u-border-right { border-right: 1px solid var(--color-border-subtle) !important; }
.u-border-0 { border: 0 !important; }
.uxBorderStrong { border: 2px solid var(--color-border-subtle) !important; }
.uxBorderSuccess { border: 1px solid var(--color-feedback-success) !important; }
.uxBorderWarning { border: 1px solid var(--color-feedback-warning) !important; }
.uxBorderInfo { border: 1px solid var(--color-feedback-info) !important; }
.uxBorderDanger { border: 1px solid var(--color-feedback-danger) !important; }
.uxBorderTopPrint { border-top: 1px solid #000 !important; }
.uxBorderLeftSuccess { border-left: 4px solid var(--color-feedback-success) !important; }
.uxBorderLeftWarning { border-left: 4px solid var(--color-feedback-warning) !important; }
.uxBorderLeftInfo { border-left: 4px solid var(--color-feedback-info) !important; }
.uxBorderLeftDanger { border-left: 4px solid var(--color-feedback-danger) !important; }
.uxBorderLeftMuted { border-left: 4px solid var(--color-text-tertiary) !important; }
.uxRadius0 { border-radius: 0 !important; }
.uxRounded { border-radius: var(--radius-md) !important; }
.uxRounded4 { border-radius: 4px !important; }
.uxRoundedControl { border-radius: var(--radius-control) !important; }
.uxRoundedFull { border-radius: 999px !important; }
.uxRoundedCircle { border-radius: 50% !important; }
.u-shadow-none { box-shadow: none !important; }

.uxM0 { margin: 0 !important; }
.uxMb0 { margin-bottom: 0 !important; }
.uxMb1 { margin-bottom: var(--space-1) !important; }
.uxMb2 { margin-bottom: var(--space-2) !important; }
.uxMb3 { margin-bottom: var(--space-3) !important; }
.uxMb4 { margin-bottom: var(--space-4) !important; }
.uxMb5 { margin-bottom: var(--space-5) !important; }
.uxMb6 { margin-bottom: var(--space-6) !important; }
.uxMb20 { margin-bottom: 20px !important; }
.uxMt0 { margin-top: 0 !important; }
.uxMt1 { margin-top: var(--space-1) !important; }
.uxMt2 { margin-top: var(--space-2) !important; }
.uxMt3 { margin-top: var(--space-3) !important; }
.uxMt4 { margin-top: var(--space-4) !important; }
.uxMt5 { margin-top: var(--space-5) !important; }
.uxMt6 { margin-top: var(--space-6) !important; }
.uxMt10 { margin-top: 10px !important; }
.uxMt30 { margin-top: 30px !important; }
.uxMe1 { margin-right: var(--space-1) !important; }
.uxMe2 { margin-right: var(--space-2) !important; }
.uxMe3 { margin-right: var(--space-3) !important; }
.uxMeAuto { margin-right: auto !important; }
.uxMs1 { margin-left: var(--space-1) !important; }
.uxMs2 { margin-left: var(--space-2) !important; }
.uxMs3 { margin-left: var(--space-3) !important; }
.uxMy0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.uxMy2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.uxMy3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.uxMy4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.uxMy20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.uxMx0 { margin-left: 0 !important; margin-right: 0 !important; }
.uxMx2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }

.uxP0 { padding: 0 !important; }
.uxP1 { padding: var(--space-1) !important; }
.uxP2 { padding: var(--space-2) !important; }
.uxP3 { padding: var(--space-3) !important; }
.uxP4 { padding: var(--space-4) !important; }
.uxP5 { padding: var(--space-5) !important; }
.uxP2rem { padding: 2rem !important; }
.uxPadSm { padding: 4px 8px !important; }
.uxPadAlert { padding: var(--space-3) var(--space-4) !important; }
.uxPadX5Y3 { padding: 0.75rem var(--space-5) !important; }
.uxPt0 { padding-top: 0 !important; }
.uxPt1 { padding-top: var(--space-1) !important; }
.uxPt2 { padding-top: var(--space-2) !important; }
.uxPt3 { padding-top: var(--space-3) !important; }
.uxPt4 { padding-top: var(--space-4) !important; }
.uxPt5 { padding-top: var(--space-5) !important; }
.uxPt6 { padding-top: var(--space-6) !important; }
.uxPt10 { padding-top: 10px !important; }
.uxPb0 { padding-bottom: 0 !important; }
.uxPb1 { padding-bottom: var(--space-1) !important; }
.uxPb2 { padding-bottom: var(--space-2) !important; }
.uxPb3 { padding-bottom: var(--space-3) !important; }
.uxPb4 { padding-bottom: var(--space-4) !important; }
.uxPb5 { padding-bottom: var(--space-5) !important; }
.uxPb6 { padding-bottom: var(--space-6) !important; }
.uxPb120 { padding-bottom: 120px !important; }
.uxPs0 { padding-left: 0 !important; }
.uxPs1 { padding-left: var(--space-1) !important; }
.uxPs2 { padding-left: var(--space-2) !important; }
.uxPs3 { padding-left: var(--space-3) !important; }
.uxPs4 { padding-left: var(--space-4) !important; }
.uxPs5 { padding-left: var(--space-5) !important; }
.uxPe0 { padding-right: 0 !important; }
.uxPe1 { padding-right: var(--space-1) !important; }
.uxPe2 { padding-right: var(--space-2) !important; }
.uxPe3 { padding-right: var(--space-3) !important; }
.uxPe4 { padding-right: var(--space-4) !important; }
.uxPe5 { padding-right: var(--space-5) !important; }
.uxPe40 { padding-right: 40px !important; }
.uxPx0 { padding-left: 0 !important; padding-right: 0 !important; }
.uxPx1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.uxPx2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.uxPx3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.uxPx4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.uxPy0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.uxPy1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.uxPy2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.uxPy3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.uxPy4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.uxPy6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }

.uxCrumbs {
  display: flex !important;
  gap: var(--space-2) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.uxCrumb { display: inline-flex !important; align-items: center !important; }

.icon--lg { font-size: 2rem !important; }
.icon--xl { font-size: 3rem !important; }
.icon--spin { animation: umsa-icon-spin 0.8s linear infinite; }
@keyframes umsa-icon-spin { to { transform: rotate(360deg); } }

.u-show-md-block,
.u-show-md-flex,
.u-show-md-table-cell,
.u-show-lg-block,
.u-show-lg-flex,
.u-show-lg-table-cell,
.u-show-xl-table-cell {
  display: none !important;
}
@media (min-width: 768px) {
  .u-hide-md { display: none !important; }
  .u-show-md-block { display: block !important; }
  .u-show-md-flex { display: flex !important; }
  .u-show-md-table-cell { display: table-cell !important; }
}
@media (min-width: 992px) {
  .u-hide-lg { display: none !important; }
  .u-show-lg-block { display: block !important; }
  .u-show-lg-flex { display: flex !important; }
  .u-show-lg-table-cell { display: table-cell !important; }
}
@media (min-width: 1200px) {
  .u-show-xl-table-cell { display: table-cell !important; }
}

.row > .span-12,
.row > .span-sm-4,
.row > .span-sm-8,
.row > .span-sm-12,
.row > .span-md-1,
.row > .span-md-2,
.row > .span-md-3,
.row > .span-md-4,
.row > .span-md-5,
.row > .span-md-6,
.row > .span-md-7,
.row > .span-md-8,
.row > .span-md-9,
.row > .span-md-12,
.row > .span-lg-3,
.row > .span-lg-4,
.row > .span-lg-6,
.row > .span-lg-8,
.row > .span-xl-3 {
  grid-column: span 12;
  min-width: 0;
}
.row > .span-12 { grid-column: span 12; }
@media (min-width: 576px) {
  .row > .span-sm-4 { grid-column: span 4; }
  .row > .span-sm-8 { grid-column: span 8; }
  .row > .span-sm-12 { grid-column: span 12; }
}
@media (min-width: 768px) {
  .row > .span-md-1 { grid-column: span 1; }
  .row > .span-md-2 { grid-column: span 2; }
  .row > .span-md-3 { grid-column: span 3; }
  .row > .span-md-4 { grid-column: span 4; }
  .row > .span-md-5 { grid-column: span 5; }
  .row > .span-md-6 { grid-column: span 6; }
  .row > .span-md-7 { grid-column: span 7; }
  .row > .span-md-8 { grid-column: span 8; }
  .row > .span-md-9 { grid-column: span 9; }
  .row > .span-md-12 { grid-column: span 12; }
}
@media (min-width: 992px) {
  .row > .span-lg-3 { grid-column: span 3; }
  .row > .span-lg-4 { grid-column: span 4; }
  .row > .span-lg-6 { grid-column: span 6; }
  .row > .span-lg-8 { grid-column: span 8; }
}
@media (min-width: 1200px) {
  .row > .span-xl-3 { grid-column: span 3; }
}

/* ===== Bootstrap display utilities (needed by main layout) ===== */
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-flex { display: flex !important; }
  .d-md-block { display: block !important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-block { display: block !important; }
}

/* ============================================================
 * OVERRIDES — Defeat legacy styles.css !important rules
 *
 * The legacy SGI CSS (styles.css) uses !important on virtually
 * every rule and loads before this file. These overrides use
 * equal specificity + !important to restore UMSA Design System
 * tokens.
 *
 * When legacy CSS is removed, this entire file can be deleted.
 * ============================================================ */

/* ===== BUTTONS ===== */
/* Override legacy .btn base (styles.css:235-246) */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-1) !important;
  padding: var(--space-2) var(--space-4) !important;
  border-radius: var(--radius-control) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-13) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: 1 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color var(--motion-interactive), border-color var(--motion-interactive), color var(--motion-interactive) !important;
  overflow: visible !important;
  position: static !important;
  transform: none !important;
}
.btn:hover { transform: none !important; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5 !important; cursor: not-allowed !important; }
.btn .material-icons { font-size: var(--fs-16) !important; }

/* Size variants */
.btn--xs { padding: var(--space-1) var(--space-2) !important; font-size: var(--fs-11) !important; }
.btn--sm { padding: 6px var(--space-3) !important; font-size: var(--fs-12) !important; }
.btn--lg { padding: var(--space-3) var(--space-5) !important; font-size: var(--fs-14) !important; }

/* Color variants */
.btn--primary {
  background: var(--color-brand-primary) !important;
  color: var(--color-text-inverted) !important;
  border: none !important;
  box-shadow: none !important;
}
.btn--primary:hover:not(:disabled) { background: var(--color-brand-primary-hover) !important; color: var(--color-text-inverted) !important; box-shadow: none !important; transform: none !important; }

.btn--secondary {
  background: var(--color-bg-base) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-strong) !important;
  box-shadow: none !important;
}
.btn--secondary:hover:not(:disabled) { background: var(--color-bg-subtle) !important; color: var(--color-text-primary) !important; }

.btn--ghost {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  box-shadow: none !important;
}
.btn--ghost:hover:not(:disabled) { background: var(--color-bg-subtle) !important; color: var(--color-text-primary) !important; }

.btn--danger {
  background: var(--color-feedback-danger) !important;
  color: var(--color-text-inverted) !important;
  border: none !important;
  box-shadow: none !important;
}
.btn--danger:hover:not(:disabled) { background: var(--red-800) !important; color: var(--color-text-inverted) !important; }

.btn--success {
  background: var(--color-feedback-success) !important;
  color: var(--color-text-inverted) !important;
  border: none !important;
  box-shadow: none !important;
}
.btn--success:hover:not(:disabled) { filter: brightness(0.92); color: var(--color-text-inverted) !important; }

.btn--warning {
  background: var(--color-feedback-warning) !important;
  color: var(--color-text-primary) !important;
  border: none !important;
  box-shadow: none !important;
}
.btn--warning:hover:not(:disabled) { filter: brightness(0.96); color: var(--color-text-primary) !important; }

.btn--info {
  background: var(--color-feedback-info) !important;
  color: var(--color-text-inverted) !important;
  border: none !important;
  box-shadow: none !important;
}
.btn--info:hover:not(:disabled) { filter: brightness(0.92); color: var(--color-text-inverted) !important; }

/* Legacy Bootstrap btn-outline-* → UMSA ghost */
.btn-outline-primary,
.btn-outline-warning,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-secondary {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border-default) !important;
  box-shadow: none !important;
}
.btn-outline-primary:hover,
.btn-outline-warning:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-secondary:hover {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-primary) !important;
  transform: none !important;
}

/* ===== BADGES ===== */
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 7px !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-10) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.badge .material-icons { font-size: 11px !important; }

/* SGI domain state badges */
.badge--pendiente { background: var(--color-status-pendiente-bg) !important; color: var(--color-status-pendiente-fg) !important; }
.badge--proceso   { background: var(--color-status-proceso-bg) !important;   color: var(--color-status-proceso-fg) !important; }
.badge--aprobado  { background: var(--color-status-aprobado-bg) !important;  color: var(--color-status-aprobado-fg) !important; }
.badge--facturado { background: var(--color-status-facturado-bg) !important; color: var(--color-status-facturado-fg) !important; }
.badge--cobrado   { background: var(--color-status-cobrado-bg) !important;   color: var(--color-status-cobrado-fg) !important; }
.badge--vencido   { background: var(--color-status-vencido-bg) !important;   color: var(--color-status-vencido-fg) !important; }

/* Only override legacy .badge.bg-* / .badge-* (not UMSA .badge--*) */
.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-primary,
.badge.bg-info,
.badge.bg-secondary {
  background: var(--color-bg-muted) !important;
  color: var(--color-text-tertiary) !important;
  box-shadow: none !important;
}

/* ===== CARDS (see also Structural Overrides below) ===== */

/* Card stats variant */
.card-stats {
  background: var(--color-bg-inverted) !important;
  border: none !important;
}
.card-stats .card-header { background: rgba(255,255,255,0.08) !important; color: var(--color-text-inverted) !important; }
.card-stats .card-title { color: var(--color-text-inverted) !important; }
.card-stats .card-text { color: rgba(255,255,255,0.7) !important; }

/* ===== TABLES (see also Structural Overrides below) ===== */

/* ===== FORMS ===== */
/* Override legacy .form-control, .form-select (styles.css:300-330) */
.form-control,
.form-select {
  width: 100% !important;
  padding: 8px 12px !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-14) !important;
  color: var(--color-text-primary) !important;
  background: var(--color-bg-base) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-control) !important;
  line-height: 1.4 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  height: auto !important;
  transition: border-color var(--motion-interactive), box-shadow var(--motion-interactive) !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-brand-primary) !important;
  box-shadow: 0 0 0 3px var(--color-brand-primary-bg) !important;
  background: var(--color-bg-base) !important;
}
.form-label {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-11) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  color: var(--color-text-tertiary) !important;
  margin-bottom: var(--space-1) !important;
}
.input-group-text {
  background: var(--color-bg-subtle) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-control) !important;
  color: var(--color-text-tertiary) !important;
  font-weight: var(--fw-medium) !important;
  padding: 8px 12px !important;
}

/* ===== DROPDOWNS ===== */
/* Override legacy .dropdown-menu and .dropdown-item (styles.css:122-144) */
.dropdown-menu {
  background: var(--color-bg-base) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-popover) !important;
  padding: var(--space-2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1000;
}
.dropdown-item {
  padding: 8px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-13) !important;
  color: var(--color-text-primary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: var(--fw-medium) !important;
  transition: background var(--motion-interactive) !important;
}
.dropdown-item:hover {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-primary) !important;
  transform: none !important;
}
.dropdown-item .material-icons { font-size: 16px; color: var(--color-text-tertiary); }
.dropdown-divider { border-color: var(--color-border-subtle) !important; margin: var(--space-1) 0 !important; }
.dropdown-header { color: var(--color-text-tertiary) !important; font-size: var(--fs-11) !important; }
.dropdown-item-text { color: var(--color-text-primary) !important; }

/* ===== OFFCANVAS ===== */
/* Override legacy hardcoded gradient styles (styles.css:1448-1578) */
.offcanvas {
  background: var(--color-bg-base) !important;
  color: var(--color-text-primary) !important;
}
.offcanvas-header {
  background: var(--color-bg-inverted) !important;
  color: var(--color-text-inverted) !important;
  padding: var(--space-5) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.offcanvas-header .offcanvas-title {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-16) !important;
  font-weight: var(--fw-bold) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
}
.offcanvas-body {
  background: var(--color-bg-base) !important;
  padding: var(--space-5) !important;
}
.offcanvas-body .d-flex:first-child {
  background: var(--color-bg-subtle) !important;
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--color-border-subtle) !important;
  box-shadow: none !important;
  padding: var(--space-4) !important;
}
.offcanvas .nav-link {
  color: var(--color-text-primary) !important;
  padding: 10px 12px !important;
  margin-bottom: 2px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--fs-13) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  transition: background var(--motion-interactive) !important;
  border-left: none !important;
  transform: none !important;
}
.offcanvas .nav-link:hover {
  background: var(--color-bg-subtle) !important;
  color: var(--color-text-primary) !important;
  border-left: none !important;
  transform: none !important;
}
.offcanvas .nav-link .material-icons { font-size: 16px !important; color: var(--color-text-tertiary) !important; }
.offcanvas .eyebrow {
  color: var(--color-text-tertiary) !important;
  font-size: var(--fs-10) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  margin: var(--space-4) 0 var(--space-1) !important;
  padding-left: 0 !important;
  border-left: none !important;
}
.btn-close { filter: brightness(0) invert(1) !important; opacity: 0.6 !important; }

/* ===== MODALS ===== */
/* Override legacy modal styles (styles.css:430-457) */
.modal-content {
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-modal) !important;
  box-shadow: var(--shadow-modal) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--color-bg-base) !important;
}
.modal-header {
  background: var(--color-bg-subtle) !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-modal) var(--radius-modal) 0 0 !important;
  padding: var(--space-4) var(--space-5) !important;
}
.modal-title { font-weight: var(--fw-bold) !important; color: var(--color-text-primary) !important; }
.modal-body { padding: var(--space-5) !important; }
.modal-backdrop { backdrop-filter: none !important; }

/* ===== NAVBAR Z-INDEX ===== */
/* Override styles.css z-index:1030 on .navbar */
nav.navbar { z-index: var(--z-sticky) !important; }

/* ============================================================
 * DARK MODE — override legacy hardcoded colors
 * Applies when [data-theme="dark"] is set on <html>
 * ============================================================ */
[data-theme="dark"] .card {
  background: var(--color-bg-base) !important;
  border-color: var(--color-border-subtle) !important;
}
[data-theme="dark"] .card-body { background: transparent !important; }
[data-theme="dark"] .card-header { background: var(--color-bg-subtle) !important; }
[data-theme="dark"] .table { color: var(--color-text-primary) !important; }
[data-theme="dark"] .table thead th { background: var(--color-bg-subtle) !important; color: var(--color-text-tertiary) !important; }
[data-theme="dark"] .table tbody td { color: var(--color-text-primary) !important; }
[data-theme="dark"] .table-hover tbody tr:hover td { background: var(--color-bg-subtle) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select { background: var(--color-bg-base) !important; color: var(--color-text-primary) !important; }
[data-theme="dark"] .dropdown-menu { background: var(--color-bg-base) !important; border-color: var(--color-border-subtle) !important; }
[data-theme="dark"] .dropdown-item { color: var(--color-text-primary) !important; }
[data-theme="dark"] .dropdown-item:hover { background: var(--color-bg-subtle) !important; }
[data-theme="dark"] .offcanvas { background: var(--color-bg-base) !important; }
[data-theme="dark"] .offcanvas-body { background: var(--color-bg-base) !important; }
[data-theme="dark"] .modal-content { background: var(--color-bg-base) !important; }
[data-theme="dark"] .modal-header { background: var(--color-bg-subtle) !important; }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--color-text-tertiary) !important; }
[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--color-text-primary) !important; background: transparent !important; }
[data-theme="dark"] .tab-content { background: var(--color-bg-base) !important; }
[data-theme="dark"] .alert-success { background: var(--color-feedback-success-bg) !important; }
[data-theme="dark"] .alert-danger  { background: var(--color-feedback-danger-bg) !important; }
[data-theme="dark"] .alert-warning { background: var(--color-feedback-warning-bg) !important; }
[data-theme="dark"] .alert-info    { background: var(--color-feedback-info-bg) !important; }

/* ============================================================
 * Bootstrap Utility Overrides — bg-* and text-* classes
 * These override Bootstrap's hardcoded utility colors with UMSA tokens.
 * ============================================================ */

/* Background utilities — use UMSA semantic tokens */
.bg-primary { background: var(--color-brand-primary) !important; }
.bg-success { background: var(--color-feedback-success) !important; }
.bg-danger { background: var(--color-feedback-danger) !important; }
.bg-warning { background: var(--color-feedback-warning) !important; }
.bg-info { background: var(--color-feedback-info) !important; }
.bg-secondary { background: var(--color-bg-subtle) !important; }
.bg-dark { background: var(--color-bg-inverse) !important; }
.bg-light { background: var(--color-bg-base) !important; }
.bg-white { background: var(--color-bg-base) !important; }

/* Text utilities — use UMSA semantic tokens */
.text-primary { color: var(--color-brand-primary) !important; }
.text-success { color: var(--color-feedback-success) !important; }
.text-danger { color: var(--color-feedback-danger) !important; }
.text-warning { color: var(--color-feedback-warning) !important; }
.text-info { color: var(--color-feedback-info) !important; }
.text-white { color: var(--color-text-inverted) !important; }
.text-muted { color: var(--color-text-tertiary) !important; }
.text-dark { color: var(--color-text-primary) !important; }
.text-body { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }

/* Badge bg-* variants — used in templates that haven't migrated to badge--* */
.badge.bg-primary { background: var(--color-brand-primary) !important; color: var(--color-text-inverted) !important; }
.badge.bg-success { background: var(--color-feedback-success) !important; color: var(--color-text-inverted) !important; }
.badge.bg-danger  { background: var(--color-feedback-danger) !important; color: var(--color-text-inverted) !important; }
.badge.bg-warning { background: var(--color-feedback-warning) !important; color: var(--color-text-primary) !important; }
.badge.bg-info    { background: var(--color-feedback-info) !important; color: var(--color-text-inverted) !important; }
.badge.bg-secondary { background: var(--color-bg-subtle) !important; color: var(--color-text-primary) !important; }
.badge.bg-light   { background: var(--color-bg-subtle) !important; color: var(--color-text-primary) !important; }
.badge.bg-dark    { background: var(--color-bg-inverse) !important; color: var(--color-text-inverted) !important; }

/* Table base — match UMSA .tbl style */
.table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-13) !important;
  color: var(--color-text-primary) !important;
}
.table thead th {
  font-weight: var(--fw-semibold) !important;
  font-size: var(--fs-12) !important;
  color: var(--color-text-tertiary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: var(--space-2) var(--space-3) !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  background: transparent !important;
}
.table tbody td {
  padding: var(--space-2) var(--space-3) !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
}
.table tbody tr:hover { background: var(--color-bg-hover) !important; }
.table-dark { background: var(--color-bg-inverse) !important; color: var(--color-text-inverted) !important; }
.table-dark thead th { color: rgba(255,255,255,0.7) !important; border-bottom-color: rgba(255,255,255,0.15) !important; }
.table-hover tbody tr:hover { background: var(--color-bg-hover) !important; }
.table-light thead th { background: var(--color-bg-subtle) !important; }
.table-responsive { overflow-x: auto !important; }

/* Table variant rows */
.table-success { background: var(--color-feedback-success-bg) !important; }
.table-info    { background: var(--color-feedback-info-bg) !important; }
.table-warning { background: var(--color-feedback-warning-bg) !important; }
.table-danger  { background: var(--color-feedback-danger-bg) !important; }
.table-primary { background: var(--color-brand-primary-bg, rgba(220, 38, 38, 0.08)) !important; }

/* Dark mode variants */
[data-theme="dark"] .bg-primary { background: var(--color-brand-primary) !important; }
[data-theme="dark"] .bg-success { background: var(--color-feedback-success) !important; }
[data-theme="dark"] .bg-danger { background: var(--color-feedback-danger) !important; }
[data-theme="dark"] .bg-warning { background: var(--color-feedback-warning) !important; }
[data-theme="dark"] .bg-info { background: var(--color-feedback-info) !important; }
[data-theme="dark"] .bg-secondary { background: var(--color-bg-subtle) !important; }
[data-theme="dark"] .bg-dark { background: var(--color-bg-inverse) !important; }
[data-theme="dark"] .bg-light { background: var(--color-bg-base) !important; }
[data-theme="dark"] .bg-white { background: var(--color-bg-base) !important; }
[data-theme="dark"] .text-primary { color: var(--color-brand-primary) !important; }
[data-theme="dark"] .text-success { color: var(--color-feedback-success) !important; }
[data-theme="dark"] .text-danger { color: var(--color-feedback-danger) !important; }
[data-theme="dark"] .text-warning { color: var(--color-feedback-warning) !important; }
[data-theme="dark"] .text-info { color: var(--color-feedback-info) !important; }
[data-theme="dark"] .text-white { color: var(--color-text-inverted) !important; }
[data-theme="dark"] .text-muted { color: var(--color-text-tertiary) !important; }
[data-theme="dark"] .text-dark { color: var(--color-text-primary) !important; }
[data-theme="dark"] .table-success { background: var(--color-feedback-success-bg) !important; }
[data-theme="dark"] .table-info    { background: var(--color-feedback-info-bg) !important; }
[data-theme="dark"] .table-warning { background: var(--color-feedback-warning-bg) !important; }
[data-theme="dark"] .table-danger  { background: var(--color-feedback-danger-bg) !important; }

/* ============================================================
 * Bootstrap Structural Overrides
 * Maps Bootstrap layout components to UMSA Design System look.
 * ============================================================ */

/* Cards → UMSA panels */
.card {
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-card) !important;
  font-family: var(--font-sans) !important;
}
.card-header {
  background: var(--color-bg-subtle) !important;
  border-bottom: 1px solid var(--color-border-default) !important;
  font-size: var(--fs-14) !important;
  font-weight: var(--fw-semibold) !important;
  padding: var(--space-3) var(--space-4) !important;
}
.card-body {
  padding: var(--space-4) !important;
}
.card-footer {
  background: var(--color-bg-subtle) !important;
  border-top: 1px solid var(--color-border-default) !important;
}

/* Form controls → UMSA inputs */
.form-control {
  background: var(--color-bg-base) !important;
  border: 1px solid var(--color-border-default) !important;
  border-radius: var(--radius-control) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-13) !important;
  color: var(--color-text-primary) !important;
  padding: 8px 12px !important;
  height: auto !important;
  line-height: 1.5 !important;
}
.form-control:focus {
  border-color: var(--color-brand-primary) !important;
  box-shadow: 0 0 0 2px var(--color-brand-primary-bg, rgba(220,38,38,0.15)) !important;
  outline: none !important;
}
.form-control::placeholder {
  color: var(--color-text-tertiary) !important;
}
.form-label {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-13) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: var(--space-1) !important;
}

/* Bootstrap button variants → UMSA colors */
.btn-primary {
  background: var(--color-brand-primary) !important;
  border: none !important;
  color: var(--color-text-inverted) !important;
}
.btn-success {
  background: var(--color-feedback-success) !important;
  border: none !important;
  color: var(--color-text-inverted) !important;
}
.btn-info {
  background: var(--color-feedback-info) !important;
  border: none !important;
  color: var(--color-text-inverted) !important;
}
.btn-warning {
  background: var(--color-feedback-warning) !important;
  border: none !important;
  color: var(--color-text-primary) !important;
}
.btn-danger {
  background: var(--color-feedback-danger) !important;
  border: none !important;
  color: var(--color-text-inverted) !important;
}

/* Bootstrap outline buttons */
.btn-outline-primary {
  border: 1px solid var(--color-brand-primary) !important;
  color: var(--color-brand-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--color-brand-primary) !important;
  color: var(--color-text-inverted) !important;
}
.btn-outline-secondary {
  border: 1px solid var(--color-border-default) !important;
  color: var(--color-text-secondary) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background: var(--color-bg-subtle) !important;
}
.btn-outline-success {
  border: 1px solid var(--color-feedback-success) !important;
  color: var(--color-feedback-success) !important;
  background: transparent !important;
}
.btn-outline-success:hover {
  background: var(--color-feedback-success) !important;
  color: var(--color-text-inverted) !important;
}
.btn-outline-danger {
  border: 1px solid var(--color-feedback-danger) !important;
  color: var(--color-feedback-danger) !important;
  background: transparent !important;
}
.btn-outline-danger:hover {
  background: var(--color-feedback-danger) !important;
  color: var(--color-text-inverted) !important;
}
.btn-outline-warning {
  border: 1px solid var(--color-feedback-warning) !important;
  color: var(--color-feedback-warning) !important;
  background: transparent !important;
}
.btn-outline-warning:hover {
  background: var(--color-feedback-warning) !important;
  color: var(--color-text-primary) !important;
}

/* Button group — simple flex layout */
.btn-group {
  display: inline-flex !important;
  gap: 0 !important;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group {
  border-left: 1px solid rgba(0,0,0,0.1) !important;
}

/* Spinner */
.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}
@keyframes spinner-border {
  to { transform: rotate(360deg); }
}

/* Pagination → UMSA style */
.pagination {
  font-family: var(--font-sans) !important;
  gap: 2px !important;
}
.page-link {
  border: 1px solid var(--color-border-default) !important;
  color: var(--color-text-primary) !important;
  background: var(--color-bg-elevated) !important;
  border-radius: var(--radius-control) !important;
  font-size: var(--fs-13) !important;
  padding: 4px 12px !important;
}
.page-link:hover {
  background: var(--color-bg-hover) !important;
}
.page-item.active .page-link {
  background: var(--color-brand-primary) !important;
  border-color: var(--color-brand-primary) !important;
  color: var(--color-text-inverted) !important;
}

/* Breadcrumb → UMSA crumbs style */
.breadcrumb {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-13) !important;
}
.breadcrumb-item a {
  color: var(--color-brand-primary) !important;
  text-decoration: none !important;
}

/* Nav tabs → UMSA tab style */
.nav-tabs {
  border-bottom: 1px solid var(--color-border-default) !important;
  gap: 0 !important;
}
.nav-tabs .nav-link {
  border: none !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-13) !important;
  font-weight: var(--fw-medium) !important;
  padding: var(--space-2) var(--space-4) !important;
  border-bottom: 2px solid transparent !important;
}
.nav-tabs .nav-link:hover {
  color: var(--color-text-primary) !important;
  border-bottom-color: var(--color-border-hover) !important;
}
.nav-tabs .nav-link.active {
  color: var(--color-brand-primary) !important;
  border-bottom-color: var(--color-brand-primary) !important;
}
.tab-content {
  background: var(--color-bg-base) !important;
}
.alert {
  border-radius: var(--radius-card) !important;
  font-family: var(--font-sans) !important;
  border: none !important;
}
.alert-success { background: var(--color-feedback-success-bg) !important; color: var(--color-feedback-success) !important; }
.alert-danger  { background: var(--color-feedback-danger-bg) !important; color: var(--color-feedback-danger) !important; }
.alert-warning { background: var(--color-feedback-warning-bg) !important; color: var(--color-text-primary) !important; }
.alert-info    { background: var(--color-feedback-info-bg) !important; color: var(--color-feedback-info) !important; }

/* Dark mode overrides for structural elements */
[data-theme="dark"] .card { background: var(--color-bg-base) !important; }
[data-theme="dark"] .card-header { background: var(--color-bg-subtle) !important; }
[data-theme="dark"] .form-control { background: var(--color-bg-subtle) !important; color: var(--color-text-primary) !important; }
[data-theme="dark"] .form-control:focus { box-shadow: 0 0 0 2px rgba(220,38,38,0.25) !important; }
[data-theme="dark"] .page-link { background: var(--color-bg-base) !important; }
[data-theme="dark"] .alert-success { background: var(--color-feedback-success-bg) !important; }
[data-theme="dark"] .alert-danger  { background: var(--color-feedback-danger-bg) !important; }
[data-theme="dark"] .alert-warning { background: var(--color-feedback-warning-bg) !important; }
[data-theme="dark"] .alert-info    { background: var(--color-feedback-info-bg) !important; }

/* ============================================================
 * Missing Bootstrap Components — polyfills for classes not yet
 * migrated away in active views.
 * ============================================================ */

/* Progress bar */
.progress {
  display: flex !important;
  height: 8px !important;
  background: var(--color-bg-subtle) !important;
  border-radius: var(--radius-full) !important;
  overflow: hidden !important;
}
.progress-bar {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  color: var(--color-text-inverted) !important;
  text-align: center !important;
  white-space: nowrap !important;
  background: var(--color-brand-primary) !important;
  transition: width .3s ease !important;
}

/* Input group container */
.input-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}
.input-group > .form-control,
.input-group > .form-select {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 1% !important;
  min-width: 0 !important;
}
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* Table variants */
.table-sm th,
.table-sm td { padding: var(--space-1) var(--space-2) !important; }
.table-bordered { border: 1px solid var(--color-border-subtle) !important; }
.table-bordered th,
.table-bordered td { border: 1px solid var(--color-border-subtle) !important; }
.table-striped tbody tr:nth-child(odd) { background: var(--color-bg-subtle) !important; }

/* Modal positioning & animation */
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1055 !important;
  display: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  outline: 0 !important;
}
.modal.show { display: block !important; }
.modal.fade .modal-dialog { transform: translate(0,-50px) !important; transition: transform .3s ease-out !important; }
.modal.show .modal-dialog { transform: none !important; }
.modal-dialog {
  position: relative !important;
  margin: 1.75rem auto !important;
  max-width: 500px !important;
  pointer-events: none !important;
}
.modal-dialog.modal-lg { max-width: 800px !important; }
.modal-dialog.modal-xl { max-width: 1140px !important; }
.modal-dialog.modal-sm { max-width: 300px !important; }
.modal-content { pointer-events: auto !important; }
.modal-backdrop.fade { opacity: 0 !important; transition: opacity .15s linear !important; }
.modal-backdrop.show { opacity: 0.5 !important; }

/* Toast */
.toast {
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-popover) !important;
  max-width: 350px !important;
  overflow: hidden !important;
}
.toast-header {
  display: flex !important;
  align-items: center !important;
  padding: var(--space-2) var(--space-3) !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  gap: var(--space-2) !important;
}
.toast-body { padding: var(--space-3) !important; }

/* Dark mode for new components */
[data-theme="dark"] .progress { background: var(--color-bg-muted) !important; }
[data-theme="dark"] .toast { background: var(--color-bg-base) !important; }
[data-theme="dark"] .toast-header { background: var(--color-bg-subtle) !important; }

/* ============================================================
 * ID-specific overrides — defeat ID-scoped selectors in styles.css
 * These use higher-specificity selectors (html body #id) to force UMSA
 * colors on elements that use legacy styles via #tablaProyectos etc.
 * ============================================================ */

/* #tablaProyectos badges — styles.css lines 717-755 */
html body #tablaProyectos .badge {
  background: var(--color-bg-muted) !important;
  color: var(--color-text-tertiary) !important;
  font-size: var(--fs-10) !important;
  font-weight: var(--fw-semibold) !important;
  padding: 2px 7px !important;
  border-radius: var(--radius-sm) !important;
  text-transform: uppercase !important;
  border: none !important;
}
html body #tablaProyectos .badge.bg-danger { background: var(--color-feedback-danger-bg) !important; color: var(--color-feedback-danger) !important; }
html body #tablaProyectos .badge.bg-warning { background: var(--color-feedback-warning-bg) !important; color: var(--color-feedback-warning) !important; }
html body #tablaProyectos .badge.bg-success { background: var(--color-feedback-success-bg) !important; color: var(--color-feedback-success) !important; }
html body #tablaProyectos .badge.bg-info { background: var(--color-feedback-info-bg) !important; color: var(--color-feedback-info) !important; }

/* #presupuestosTable — styles.css lines 765-793 */
html body #presupuestosTable a,
html body #presupuestosTable td a {
  color: var(--color-brand-primary) !important;
  text-decoration: none !important;
}
html body #presupuestosTable a:hover,
html body #presupuestosTable td a:hover {
  color: var(--color-brand-primary-hover) !important;
  text-decoration: underline !important;
  transform: none !important;
  box-shadow: none !important;
}
html body #presupuestosTable .text-muted {
  color: var(--color-text-tertiary) !important;
}

/* #searchResults — styles.css lines 1011-1023 */
html body #searchResults {
  background: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border-default) !important;
  box-shadow: var(--shadow-popover) !important;
}
html body #searchResults a {
  color: var(--color-text-primary) !important;
}
html body #searchResults a:hover {
  background: var(--color-bg-hover) !important;
}

/* Dark mode */
[data-theme="dark"] html body #tablaProyectos .badge { background: var(--color-bg-muted) !important; }
[data-theme="dark"] html body #tablaProyectos .badge.bg-danger { background: rgba(220,38,38,0.18) !important; }
[data-theme="dark"] html body #tablaProyectos .badge.bg-warning { background: rgba(180,83,9,0.18) !important; }
[data-theme="dark"] html body #tablaProyectos .badge.bg-success { background: rgba(22,101,52,0.18) !important; }
[data-theme="dark"] html body #tablaProyectos .badge.bg-info { background: rgba(37,99,235,0.18) !important; }
[data-theme="dark"] html body #presupuestosTable .text-muted { color: var(--color-text-tertiary) !important; }

/* ============================================================
 * CSS Grid — Bootstrap flexbox grid replacement
 * Replaces Bootstrap's row/col-* grid with CSS Grid.
 * Only added when we're ready to remove Bootstrap CSS.
 * ============================================================ */
.row {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: var(--space-4, 1.5rem) !important;
  margin: 0 !important;
}
.row > *,
[class*=" col-md-"], [class^="col-md-"],
[class*=" col-lg-"], [class^="col-lg-"],
[class*=" col-sm-"], [class^="col-sm-"],
[class*=" col-xl-"], [class^="col-xl-"],
[class*=" col-xxl-"], [class^="col-xxl-"] {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Non-responsive columns */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
.col-auto { grid-column: auto; }

/* sm (≥576px) */
@media (min-width: 576px) {
  .col-sm-1  { grid-column: span 1; }
  .col-sm-2  { grid-column: span 2; }
  .col-sm-3  { grid-column: span 3; }
  .col-sm-4  { grid-column: span 4; }
  .col-sm-5  { grid-column: span 5; }
  .col-sm-6  { grid-column: span 6; }
  .col-sm-7  { grid-column: span 7; }
  .col-sm-8  { grid-column: span 8; }
  .col-sm-9  { grid-column: span 9; }
  .col-sm-10 { grid-column: span 10; }
  .col-sm-11 { grid-column: span 11; }
  .col-sm-12 { grid-column: span 12; }
}

/* md (≥768px) */
@media (min-width: 768px) {
  .col-md-1  { grid-column: span 1; }
  .col-md-2  { grid-column: span 2; }
  .col-md-3  { grid-column: span 3; }
  .col-md-4  { grid-column: span 4; }
  .col-md-5  { grid-column: span 5; }
  .col-md-6  { grid-column: span 6; }
  .col-md-7  { grid-column: span 7; }
  .col-md-8  { grid-column: span 8; }
  .col-md-9  { grid-column: span 9; }
  .col-md-10 { grid-column: span 10; }
  .col-md-11 { grid-column: span 11; }
  .col-md-12 { grid-column: span 12; }
}

/* lg (≥992px) */
@media (min-width: 992px) {
  .col-lg-1  { grid-column: span 1; }
  .col-lg-2  { grid-column: span 2; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-6  { grid-column: span 6; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-10 { grid-column: span 10; }
  .col-lg-11 { grid-column: span 11; }
  .col-lg-12 { grid-column: span 12; }
}

/* xl (≥1200px) */
@media (min-width: 1200px) {
  .col-xl-1  { grid-column: span 1; }
  .col-xl-2  { grid-column: span 2; }
  .col-xl-3  { grid-column: span 3; }
  .col-xl-4  { grid-column: span 4; }
  .col-xl-5  { grid-column: span 5; }
  .col-xl-6  { grid-column: span 6; }
  .col-xl-7  { grid-column: span 7; }
  .col-xl-8  { grid-column: span 8; }
  .col-xl-9  { grid-column: span 9; }
  .col-xl-10 { grid-column: span 10; }
  .col-xl-11 { grid-column: span 11; }
  .col-xl-12 { grid-column: span 12; }
}

/* Row layout helpers */
.row.align-items-center { align-items: center; }
.row.justify-content-center { justify-content: center; }
.row.justify-content-between { justify-content: space-between; }
.row.g-0 { gap: 0; }
.row.g-2 { gap: var(--space-2); }
.row.g-3 { gap: var(--space-3); }

/* ============================================================
 * BOOTSTRAP UTILITY POLYFILL — common utilities not in UMSA
 *
 * These are the most-used Bootstrap utility classes across
 * SGI views. Remove as each view is migrated to native UMSA.
 * ============================================================ */

/* ---------- Text alignment ---------- */
.text-center { text-align: center !important; }
.text-end    { text-align: right !important; }
.text-start  { text-align: left !important; }

/* ---------- Font weight ---------- */
.fw-bold     { font-weight: var(--fw-bold, 700) !important; }
.fw-semibold { font-weight: var(--fw-semibold, 600) !important; }
.fw-normal   { font-weight: var(--fw-normal, 400) !important; }
.fw-medium   { font-weight: var(--fw-medium, 500) !important; }
.fw-light    { font-weight: var(--fw-light, 300) !important; }

/* ---------- Sizing ---------- */
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
.w-50  { width: 50% !important; }
.w-auto { width: auto !important; }

/* ---------- Vertical alignment ---------- */
.align-middle     { vertical-align: middle !important; }
.align-top        { vertical-align: top !important; }
.align-bottom     { vertical-align: bottom !important; }
.align-baseline   { vertical-align: baseline !important; }

/* ---------- Display ---------- */
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-table        { display: table !important; }
.d-table-cell   { display: table-cell !important; }

/* ---------- Borders ---------- */
.border            { border: 1px solid var(--color-border, #e5e7eb) !important; }
.border-0          { border: 0 !important; }
.border-top        { border-top: 1px solid var(--color-border, #e5e7eb) !important; }
.border-bottom     { border-bottom: 1px solid var(--color-border, #e5e7eb) !important; }
.border-start      { border-inline-start: 1px solid var(--color-border, #e5e7eb) !important; }
.border-end        { border-inline-end: 1px solid var(--color-border, #e5e7eb) !important; }
.border-primary    { border-color: var(--color-brand-primary, #dc2626) !important; }
.border-success    { border-color: var(--color-feedback-success, #16a34a) !important; }
.border-danger     { border-color: var(--color-feedback-danger, #dc2626) !important; }
.border-warning    { border-color: var(--color-feedback-warning, #d97706) !important; }
.border-info       { border-color: var(--color-feedback-info, #2563eb) !important; }
.border-secondary  { border-color: var(--color-text-tertiary, #78716c) !important; }

/* ---------- Border-radius ---------- */
.rounded           { border-radius: var(--radius-md, 6px) !important; }
.rounded-sm        { border-radius: var(--radius-sm, 4px) !important; }
.rounded-lg        { border-radius: var(--radius-lg, 8px) !important; }
.rounded-xl        { border-radius: var(--radius-xl, 12px) !important; }
.rounded-circle    { border-radius: 50% !important; }
.rounded-pill      { border-radius: 9999px !important; }
.rounded-0         { border-radius: 0 !important; }

/* ---------- Box shadow ---------- */
.shadow            { box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.1)) !important; }
.shadow-sm         { box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important; }
.shadow-lg         { box-shadow: var(--shadow-lg, 0 4px 6px rgba(0,0,0,0.1)) !important; }
.shadow-none       { box-shadow: none !important; }

/* ---------- Table helpers ---------- */
.table-responsive  { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-light       { background-color: var(--color-bg-subtle, #f5f5f4); }

/* ---------- Position ---------- */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-sticky   { position: sticky !important; }
.fixed-top         { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky, 100); }
.fixed-bottom      { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky, 100); }

/* ---------- Overflow ---------- */
.overflow-hidden   { overflow: hidden !important; }
.overflow-auto     { overflow: auto !important; }
.overflow-visible  { overflow: visible !important; }

/* ---------- Float ---------- */
.float-start  { float: left !important; }
.float-end    { float: right !important; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ---------- Visibility ---------- */
.invisible    { visibility: hidden !important; }
.visible      { visibility: visible !important; }

/* ---------- Text utilities ---------- */
.text-nowrap       { white-space: nowrap !important; }
.text-wrap         { white-space: normal !important; }
.text-break        { word-break: break-word !important; }
.text-truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-uppercase    { text-transform: uppercase !important; }
.text-lowercase    { text-transform: lowercase !important; }
.text-capitalize   { text-transform: capitalize !important; }
.text-decoration-none { text-decoration: none !important; }
.small             { font-size: var(--fs-12, 0.75rem) !important; }

/* ---------- Background variants ---------- */
.bg-white          { background-color: var(--color-bg-base, #ffffff) !important; }
.bg-light          { background-color: var(--color-bg-subtle, #f5f5f4) !important; }
.bg-dark           { background-color: var(--color-bg-inverted, #1c1917) !important; }
.bg-transparent    { background-color: transparent !important; }
.bg-body           { background-color: var(--color-bg-base, #ffffff) !important; }

/* ---------- Text color variants ---------- */
.text-white        { color: var(--color-text-inverted, #ffffff) !important; }
.text-body         { color: var(--color-text, #292524) !important; }
.text-muted        { color: var(--color-text-tertiary, #78716c) !important; }
.text-primary      { color: var(--color-brand-primary, #dc2626) !important; }
.text-success      { color: var(--color-feedback-success, #16a34a) !important; }
.text-danger       { color: var(--color-feedback-danger, #dc2626) !important; }
.text-warning      { color: var(--color-feedback-warning, #d97706) !important; }
.text-info         { color: var(--color-feedback-info, #2563eb) !important; }
.text-dark         { color: var(--color-text, #292524) !important; }
.text-light        { color: var(--color-text-tertiary, #78716c) !important; }

/* ============================================================
 * BOOTSTRAP SPACING POLYFILL
 *
 * Bootstrap margin/padding scale (0-5) used across SGI views.
 * Values follow Bootstrap conventions:
 *   0 = 0, 1 = 0.25rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem
 * ============================================================ */

/* --- Margin --- */
.m-auto { margin: auto !important; }
.mx-auto { margin-inline: auto !important; }
.my-auto { margin-block: auto !important; }

.m-0  { margin: 0 !important; }        .p-0  { padding: 0 !important; }
.m-1  { margin: 0.25rem !important; }   .p-1  { padding: 0.25rem !important; }
.m-2  { margin: 0.5rem !important; }    .p-2  { padding: 0.5rem !important; }
.m-3  { margin: 1rem !important; }      .p-3  { padding: 1rem !important; }
.m-4  { margin: 1.5rem !important; }    .p-4  { padding: 1.5rem !important; }
.m-5  { margin: 3rem !important; }      .p-5  { padding: 3rem !important; }

.mt-0 { margin-top: 0 !important; }     .pt-0 { padding-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; } .pt-1 { padding-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }  .pt-2 { padding-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }    .pt-3 { padding-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }  .pt-4 { padding-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }    .pt-5 { padding-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }    .pb-0 { padding-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; } .pb-1 { padding-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }  .pb-2 { padding-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }    .pb-3 { padding-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }  .pb-4 { padding-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }    .pb-5 { padding-bottom: 3rem !important; }

.ms-0 { margin-inline-start: 0 !important; }  .ps-0 { padding-inline-start: 0 !important; }
.ms-1 { margin-inline-start: 0.25rem !important; } .ps-1 { padding-inline-start: 0.25rem !important; }
.ms-2 { margin-inline-start: 0.5rem !important; }  .ps-2 { padding-inline-start: 0.5rem !important; }
.ms-3 { margin-inline-start: 1rem !important; }    .ps-3 { padding-inline-start: 1rem !important; }
.ms-4 { margin-inline-start: 1.5rem !important; }  .ps-4 { padding-inline-start: 1.5rem !important; }
.ms-5 { margin-inline-start: 3rem !important; }    .ps-5 { padding-inline-start: 3rem !important; }

.me-0 { margin-inline-end: 0 !important; }    .pe-0 { padding-inline-end: 0 !important; }
.me-1 { margin-inline-end: 0.25rem !important; }   .pe-1 { padding-inline-end: 0.25rem !important; }
.me-2 { margin-inline-end: 0.5rem !important; }    .pe-2 { padding-inline-end: 0.5rem !important; }
.me-3 { margin-inline-end: 1rem !important; }      .pe-3 { padding-inline-end: 1rem !important; }
.me-4 { margin-inline-end: 1.5rem !important; }    .pe-4 { padding-inline-end: 1.5rem !important; }
.me-5 { margin-inline-end: 3rem !important; }      .pe-5 { padding-inline-end: 3rem !important; }

.mx-0 { margin-inline: 0 !important; }        .px-0 { padding-inline: 0 !important; }
.mx-1 { margin-inline: 0.25rem !important; }   .px-1 { padding-inline: 0.25rem !important; }
.mx-2 { margin-inline: 0.5rem !important; }    .px-2 { padding-inline: 0.5rem !important; }
.mx-3 { margin-inline: 1rem !important; }      .px-3 { padding-inline: 1rem !important; }
.mx-4 { margin-inline: 1.5rem !important; }    .px-4 { padding-inline: 1.5rem !important; }
.mx-5 { margin-inline: 3rem !important; }      .px-5 { padding-inline: 3rem !important; }

.my-0 { margin-block: 0 !important; }         .py-0 { padding-block: 0 !important; }
.my-1 { margin-block: 0.25rem !important; }    .py-1 { padding-block: 0.25rem !important; }
.my-2 { margin-block: 0.5rem !important; }     .py-2 { padding-block: 0.5rem !important; }
.my-3 { margin-block: 1rem !important; }       .py-3 { padding-block: 1rem !important; }
.my-4 { margin-block: 1.5rem !important; }     .py-4 { padding-block: 1.5rem !important; }
.my-5 { margin-block: 3rem !important; }       .py-5 { padding-block: 3rem !important; }

/* ============================================================
 * ADDITIONAL UTILITIES — font-size, opacity, flex, position
 * ============================================================ */

/* ---------- Font sizes (Bootstrap fs-* scale) ---------- */
.fs-1 { font-size: var(--fs-30, 2.5rem) !important; }
.fs-2 { font-size: var(--fs-22, 2rem) !important; }
.fs-3 { font-size: var(--fs-18, 1.75rem) !important; }
.fs-4 { font-size: var(--fs-16, 1.5rem) !important; }
.fs-5 { font-size: var(--fs-14, 1.25rem) !important; }
.fs-6 { font-size: var(--fs-13, 1rem) !important; }

/* ---------- Opacity ---------- */
.opacity-0  { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ---------- Flex utilities ---------- */
.flex-grow-0   { flex-grow: 0 !important; }
.flex-grow-1   { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }
.flex-row      { flex-direction: row !important; }
.flex-column   { flex-direction: column !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-nowrap   { flex-wrap: nowrap !important; }

/* ---------- Position ---------- */
.sticky-top    { position: sticky; top: 0; z-index: var(--z-sticky, 100); }

/* ---------- List ---------- */
.list-unstyled { list-style: none; padding-left: 0; }

/* ---------- Button group sizing ---------- */
.btn-group-sm > .btn--sm { font-size: var(--fs-12, 0.75rem); padding: var(--space-1) var(--space-2); }

/* ---------- Gap on non-row elements ---------- */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-1, 0.25rem) !important; }
.gap-2 { gap: var(--space-2, 0.5rem) !important; }
.gap-3 { gap: var(--space-3, 1rem) !important; }
.gap-4 { gap: var(--space-4, 1.5rem) !important; }
.gap-5 { gap: var(--space-5, 3rem) !important; }