/**
 * Utility Classes - Common Inline Style Replacements
 *
 * This file provides utility classes to replace common inline styles
 * found throughout the templates. These classes use CSS variables
 * from theme.css for automatic light/dark mode support.
 *
 * Consolidated: October 26, 2025
 * - Merged utilities from components.css (lines 7072-7688)
 * - Removed all duplicates
 * - Fixed hardcoded colors to use CSS variables
 * - Organized by category
 *
 * @version 2.0
 * @requires theme.css
 * @author Physics Labs Web Team
 */

/* ==========================================
   TEXT COLORS - Replace inline style="color: #xxx"
   ========================================================================== */

.text-helper {
    color: var(--helper-text-color, #666) !important;
}

.text-helper-dark {
    color: var(--helper-text-dark, #565656) !important;
}

.text-helper-light {
    color: var(--helper-text-light, #999) !important;
}

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

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

.text-tertiary {
    color: var(--text-tertiary) !important; /* Fixed: was #999 hardcoded */
}

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

.text-gold {
    color: var(--ucb-gold) !important;
}

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

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

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

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

.text-warning-dark {
    color: var(--color-warning-text) !important;
}

/* ==========================================
   BACKGROUND COLORS - Replace inline style="background-color: #xxx"
   ========================================================================== */

.bg-elevated {
    background-color: var(--bg-elevated) !important;
}

.bg-primary {
    background-color: var(--bg-primary) !important;
}

.bg-secondary {
    background-color: var(--bg-secondary) !important;
}

.bg-tertiary {
    background-color: var(--bg-tertiary) !important;
}

.bg-light-gray {
    background-color: var(--inline-gray-light, #f5f5f5) !important;
}

.bg-light {
    background-color: var(--color-muted-light) !important;
}

.bg-stats-card {
    background-color: var(--stats-card-bg, #f8f9fa) !important;
}

.bg-info-box {
    background-color: var(--info-box-bg, #e7f3ff) !important;
}

.bg-warning-box {
    background-color: var(--warning-box-bg, #fff9c4) !important;
}

.bg-success-light {
    background-color: var(--color-success-light) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.bg-danger-light {
    background-color: var(--color-danger-light) !important;
}

.text-white {
    color: var(--ucb-white) !important;
}

.bg-info-light {
    background-color: var(--color-info-light) !important;
}

.bg-warning-light {
    background-color: var(--color-warning-light) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--ucb-black) !important;
}

.bg-dark-white {
    background-color: var(--ucb-black) !important;
    color: var(--ucb-white) !important;
}

.bg-white-dark {
    background-color: var(--bg-elevated) !important; /* Fixed: was "white" hardcoded */
    color: var(--ucb-black) !important;
}

.bg-gray-badge {
    background-color: var(--color-muted-dark) !important;
    color: var(--ucb-white) !important;
}

.bg-info-white {
    background-color: var(--color-info) !important;
    color: var(--ucb-white) !important;
}

.bg-danger-white {
    background-color: var(--color-danger) !important;
    color: var(--ucb-white) !important;
    border-bottom: 2px solid var(--color-danger-dark) !important;
}

.bg-danger-white-simple {
    background-color: var(--color-danger) !important;
    color: var(--ucb-white) !important;
}

/* ==========================================
   SPACING UTILITIES - Replace inline margin/padding
   ========================================================================== */

/* Margins - Scale-based (using theme.css spacing variables) */
.m-0 { margin: var(--spacing-0) !important; }
.m-1 { margin: var(--spacing-1) !important; }
.m-2 { margin: var(--spacing-2) !important; }
.m-3 { margin: var(--spacing-3) !important; }
.m-4 { margin: var(--spacing-4) !important; }
.m-5 { margin: var(--spacing-5) !important; }

.mt-0 { margin-top: var(--spacing-0) !important; }
.mt-1 { margin-top: var(--spacing-1) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-3 { margin-top: var(--spacing-3) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-5 { margin-top: var(--spacing-5) !important; }
.mt-6 { margin-top: var(--spacing-10) !important; } /* 40px */

.mb-0 { margin-bottom: var(--spacing-0) !important; }
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-5 { margin-bottom: var(--spacing-5) !important; }
.mb-6 { margin-bottom: var(--spacing-10) !important; } /* 40px */
.mb-7 { margin-bottom: var(--spacing-7) !important; } /* 30px */

.ml-0 { margin-left: var(--spacing-0) !important; }
.ml-1 { margin-left: var(--spacing-1) !important; }
.ml-2 { margin-left: var(--spacing-2) !important; }
.ml-3 { margin-left: var(--spacing-3) !important; }
.ml-4 { margin-left: var(--spacing-4) !important; }
.ml-5 { margin-left: var(--spacing-5) !important; }

.mr-0 { margin-right: var(--spacing-0) !important; }
.mr-1 { margin-right: var(--spacing-1) !important; }
.mr-2 { margin-right: var(--spacing-2) !important; }
.mr-3 { margin-right: var(--spacing-3) !important; }
.mr-4 { margin-right: var(--spacing-4) !important; }
.mr-5 { margin-right: var(--spacing-5) !important; }

.my-0 { margin-top: var(--spacing-0) !important; margin-bottom: var(--spacing-0) !important; }
.my-3 { margin-top: var(--spacing-3) !important; margin-bottom: var(--spacing-3) !important; }
.my-4 { margin-top: var(--spacing-4) !important; margin-bottom: var(--spacing-4) !important; }
.my-5 { margin-top: var(--spacing-5) !important; margin-bottom: var(--spacing-5) !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.px-3 { padding-left: var(--spacing-3) !important; padding-right: var(--spacing-3) !important; }
.py-5 { padding-top: var(--spacing-5) !important; padding-bottom: var(--spacing-5) !important; }

/* Margins - Pixel-specific (legacy support, consider migrating to scale-based) */
.mt-5px { margin-top: 5px !important; }
.mt-8px { margin-top: 8px !important; }
.mt-10px { margin-top: 10px !important; }
.mt-15px { margin-top: 15px !important; }
.mt-20px { margin-top: 20px !important; }
.mt-30px { margin-top: 30px !important; }

.mb-5px { margin-bottom: 5px !important; }
.mb-10px { margin-bottom: 10px !important; }
.mb-15px { margin-bottom: 15px !important; }
.mb-20px { margin-bottom: 20px !important; }
.mb-30px { margin-bottom: 30px !important; }

.ml-5px { margin-left: 5px !important; }
.ml-10px { margin-left: 10px !important; }
.ml-15px { margin-left: 15px !important; }

.mr-5px { margin-right: 5px !important; }

.m-20px { margin: 20px 0 !important; }
.m-15px-0 { margin: 15px 0 !important; }

/* Combined margin utilities (legacy - consider using atomic classes instead) */
.mt-15px-mb-0 { margin-top: 15px !important; margin-bottom: 0 !important; }
.mt-10px-mb-0 { margin-top: 10px !important; margin-bottom: 0 !important; }

/* Padding - Scale-based */
.p-0 { padding: var(--spacing-0) !important; }
.p-1 { padding: var(--spacing-1) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-3 { padding: var(--spacing-3) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-5 { padding: var(--spacing-5) !important; }

.pt-0 { padding-top: var(--spacing-0) !important; }
.pt-1 { padding-top: var(--spacing-1) !important; }
.pt-2 { padding-top: var(--spacing-2) !important; }
.pt-3 { padding-top: var(--spacing-3) !important; }
.pt-4 { padding-top: var(--spacing-4) !important; }
.pt-5 { padding-top: var(--spacing-5) !important; }

.pb-0 { padding-bottom: var(--spacing-0) !important; }
.pb-1 { padding-bottom: var(--spacing-1) !important; }
.pb-2 { padding-bottom: var(--spacing-2) !important; }
.pb-3 { padding-bottom: var(--spacing-3) !important; }
.pb-4 { padding-bottom: var(--spacing-4) !important; }
.pb-5 { padding-bottom: var(--spacing-5) !important; }

.pl-0 { padding-left: var(--spacing-0) !important; }
.pl-1 { padding-left: var(--spacing-1) !important; }
.pl-2 { padding-left: var(--spacing-2) !important; }
.pl-3 { padding-left: var(--spacing-3) !important; }
.pl-4 { padding-left: var(--spacing-4) !important; }
.pl-5 { padding-left: var(--spacing-5) !important; }

.pr-0 { padding-right: var(--spacing-0) !important; }
.pr-1 { padding-right: var(--spacing-1) !important; }
.pr-2 { padding-right: var(--spacing-2) !important; }
.pr-3 { padding-right: var(--spacing-3) !important; }
.pr-4 { padding-right: var(--spacing-4) !important; }
.pr-5 { padding-right: var(--spacing-5) !important; }

/* Padding - Pixel-specific (legacy support) */
.p-8px { padding: 8px !important; }
.p-10px { padding: 10px !important; }
.p-15px { padding: 15px !important; }
.p-40px-0 { padding: 40px 0 !important; }

/* Combined padding utilities (legacy - consider using atomic classes instead) */
.p-15px-br-4px-mb-20px {
    padding: 15px !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
}

.p-10px-br-4px {
    padding: 10px !important;
    border-radius: 4px !important;
}

.p-10px-br-4px-mb-15px {
    padding: 10px !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
}

/* ==========================================
   TEXT ALIGNMENT - Replace inline text-align
   ========================================================================== */

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

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

.d-block {
    display: block !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-flex {
    display: flex !important;
}

.d-none {
    display: none !important;
}

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

.flex {
    display: flex !important;
}

.flex-col {
    display: flex !important;
    flex-direction: column !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flex-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.flex-start {
    display: flex !important;
    align-items: flex-start !important;
}

.flex-end {
    display: flex !important;
    align-items: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-flex-end {
    justify-content: flex-end !important;
}

.align-center {
    align-items: center !important;
}

.align-flex-end {
    align-items: flex-end !important;
}

.flex-1 {
    flex: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* ==========================================
   GAP UTILITIES (for flexbox and grid)
   ========================================================================== */

.gap-1 { gap: var(--spacing-1) !important; }
.gap-2 { gap: var(--spacing-2) !important; }
.gap-3 { gap: var(--spacing-3) !important; }
.gap-4 { gap: var(--spacing-4) !important; }
.gap-5 { gap: var(--spacing-5) !important; }

/* Gap - Pixel-specific (legacy support) */
.gap-5px { gap: 5px !important; }
.gap-10px { gap: 10px !important; }
.gap-15px { gap: 15px !important; }
.gap-20px { gap: 20px !important; }

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

.grid-auto-fit {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
}

.grid-auto-fit-lg {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 15px !important;
}

.grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.grid-3col {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 15px !important;
}

.grid-2-1-3 {
    display: grid !important;
    grid-template-columns: 2fr 1fr 3fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.grid-2-15-15-1 {
    display: grid !important;
    grid-template-columns: 2fr 1.5fr 1.5fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

/* ==========================================
   BORDER UTILITIES - Replace inline borders
   ========================================================================== */

.border-0 {
    border: none !important;
}

.border-none {
    border: none !important;
}

.border-1 {
    border: var(--border-width-1) solid var(--card-border) !important;
}

.border-2 {
    border: var(--border-width-2) solid var(--card-border) !important;
}

.border-light {
    border: 1px solid var(--border-color) !important;
}

.border-danger {
    border: 2px solid var(--color-danger) !important;
}

.border-top {
    border-top: var(--border-width-1) solid var(--card-border) !important;
}

.border-top-solid {
    border-top: 1px solid var(--border-color) !important;
}

.border-top-none {
    border-top: none !important;
}

.border-top-warning {
    border-top: 3px solid var(--color-warning) !important;
}

.border-top-info {
    border-top: 3px solid var(--color-info) !important;
}

.border-bottom {
    border-bottom: var(--border-width-1) solid var(--card-border) !important;
}

.border-left {
    border-left: var(--border-width-1) solid var(--card-border) !important;
}

.border-right {
    border-right: var(--border-width-1) solid var(--card-border) !important;
}

.border-gold {
    border-color: var(--ucb-gold) !important;
}

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

.border-left-gold {
    border-left: 4px solid var(--ucb-gold) !important;
}

.border-left-info {
    border-left: 4px solid var(--info-box-border) !important;
}

.border-left-warning {
    border-left: 4px solid var(--warning-box-border) !important;
}

.border-bottom-gold {
    border-bottom: 3px solid var(--ucb-gold) !important;
    display: inline-block !important;
}

/* ==========================================
   ROUNDED CORNERS - Replace inline border-radius
   ========================================================================== */

.rounded-0 {
    border-radius: var(--radius-none) !important;
}

.rounded-sm {
    border-radius: var(--radius-sm) !important;
}

.rounded {
    border-radius: var(--radius-md) !important;
}

.rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.rounded-xl {
    border-radius: var(--radius-xl) !important;
}

.rounded-full {
    border-radius: var(--radius-full) !important;
}

/* ==========================================
   SHADOWS - Replace inline box-shadow
   ========================================================================== */

.shadow-none {
    box-shadow: none !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-xl {
    box-shadow: var(--shadow-xl) !important;
}

/* ==========================================
   FONT UTILITIES - Replace inline font styles
   ========================================================================== */

.font-weight-light {
    font-weight: var(--font-weight-light) !important;
}

.font-weight-normal {
    font-weight: var(--font-weight-normal) !important;
}

.font-weight-medium {
    font-weight: var(--font-weight-medium) !important;
}

.font-weight-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.font-weight-bold {
    font-weight: var(--font-weight-bold) !important;
}

/* Font Weight - Shortened */
.fw-normal { font-weight: var(--font-weight-normal) !important; }
.fw-medium { font-weight: var(--font-weight-medium) !important; }
.fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.fw-bold { font-weight: var(--font-weight-bold) !important; }

/* Font Family */
.font-mono { font-family: monospace !important; }

/* Link Variants */
.link-gold {
    color: var(--ucb-gold) !important;
    text-decoration: none !important;
}
.link-gold:hover {
    text-decoration: underline !important;
}

/* Text Truncation */
.text-truncate-cell {
    max-width: 200px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Font Size - Scale-based */
.font-size-sm {
    font-size: var(--font-size-sm) !important;
}

.font-size-base {
    font-size: var(--font-size-base) !important;
}

.font-size-lg {
    font-size: var(--font-size-lg) !important;
}

.font-size-xl {
    font-size: var(--font-size-xl) !important;
}

/* Font Size - Shortened */
.fs-xs { font-size: var(--font-size-xs) !important; } /* 12px */
.fs-sm { font-size: var(--font-size-sm) !important; } /* 14px */
.fs-base { font-size: var(--font-size-base) !important; } /* 16px */
.fs-md { font-size: 1.1rem !important; }
.fs-lg { font-size: var(--font-size-lg) !important; } /* 18px */
.fs-xl { font-size: var(--font-size-xl) !important; } /* 20px */
.fs-2xl { font-size: var(--font-size-2xl) !important; } /* 24px */
.fs-3xl { font-size: var(--font-size-3xl) !important; } /* 28px */

/* Combined font utilities (legacy - consider using atomic classes instead) */
.fs-base-mt-15px {
    font-size: 1rem !important;
    margin-top: 15px !important;
}

.fs-md-mt-0 {
    font-size: 1.1rem !important;
    margin-top: 0 !important;
}

/* Letter spacing */
.letter-spacing-sm {
    letter-spacing: 0.5px !important;
}

/* Line height */
.lh-relaxed { line-height: 1.6 !important; }
.lh-loose { line-height: 1.8 !important; }

/* ==========================================
   WIDTH & HEIGHT UTILITIES
   ========================================================================== */

/* Width - Percentage */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.w-full { width: 100% !important; }
.w-100-percent { width: 100% !important; }

/* Min Width - Pixel-specific */
.min-w-150px { min-width: 150px !important; }
.min-w-180px { min-width: 180px !important; }
.min-w-200px { min-width: 200px !important; }
.min-w-250px { min-width: 250px !important; }

/* Max Width */
.max-w-300 { max-width: 300px !important; }
.max-w-600 { max-width: 600px !important; }
.max-w-800 { max-width: 800px !important; }
.max-w-1000 { max-width: 1000px !important; }
.max-w-1200 { max-width: 1200px !important; }
.overflow-x-auto { overflow-x: auto !important; }

/* Height */
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

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

.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-90 { opacity: 0.9 !important; }
.opacity-100 { opacity: 1 !important; }

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

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-default {
    cursor: default !important;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

/* ==========================================
   COMPONENT-SPECIFIC UTILITIES
   ========================================================================== */

/* Info box with left border */
.info-box {
    background-color: var(--info-box-bg) !important;
    border-left: 4px solid var(--info-box-border) !important;
    padding: var(--spacing-4) !important;
    margin-bottom: var(--spacing-4) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--info-box-text) !important;
}

/* Info box with full border */
.info-box-bordered {
    background-color: var(--info-box-bg) !important;
    color: var(--info-box-text) !important;
    padding: 15px !important;
    border: 1px solid var(--info-box-border) !important;
    border-radius: 4px !important;
    margin-bottom: var(--spacing-4) !important;
}

.info-box-sm {
    margin-bottom: 10px !important;
    padding: 10px !important;
    background-color: var(--bg-secondary) !important;
    border-radius: 4px !important;
}

.info-box-md {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 15px !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
}

/* Collapsible info box for public pages */
.info-collapse-box {
    background-color: var(--info-box-bg) !important;
    color: var(--info-box-text) !important;
    padding: 15px !important;
    border: 1px solid var(--info-box-border) !important;
    border-radius: 4px !important;
    margin-bottom: var(--spacing-4) !important;
}

.info-collapse-box-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
    padding: 5px 0 !important;
}

.info-collapse-box-header:hover {
    opacity: 0.8 !important;
}

.info-collapse-box-title {
    font-weight: 600 !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

.info-collapse-box-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.info-collapse-box-toggle.collapsed {
    transform: rotate(-90deg) !important;
}

.info-collapse-box-content {
    margin-top: 10px !important;
    max-height: 1000px !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, opacity 0.3s ease !important;
    opacity: 1 !important;
}

.info-collapse-box-content.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
}

/* Warning box with left border */
.warning-box {
    background-color: var(--warning-box-bg) !important;
    border-left: 4px solid var(--warning-box-border) !important;
    padding: var(--spacing-4) !important;
    margin-bottom: var(--spacing-4) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--warning-box-text) !important;
}

/* Alert Box */
.alert-box-warning {
    background-color: var(--color-warning-light) !important;
    color: var(--color-warning-text) !important;
    padding: 15px !important;
    border: 1px solid var(--color-warning) !important;
    border-radius: 4px !important;
}

.alert-box-warning-sm {
    background-color: var(--color-warning-light) !important;
    color: var(--color-warning-text) !important;
    padding: 10px !important;
    border-radius: 4px !important;
}

/* Stats card */
.stats-card {
    background-color: var(--stats-card-bg) !important;
    border: var(--border-width-1) solid var(--stats-card-border) !important;
    padding: var(--spacing-4) !important;
    border-radius: var(--radius-lg) !important;
    text-align: center !important;
}

.stats-card-number {
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--stats-card-text) !important;
}

.stats-card-label {
    font-size: var(--font-size-sm) !important;
    color: var(--stats-card-label) !important;
    text-transform: uppercase !important;
    margin-top: var(--spacing-2) !important;
}

/* Section Heading Utilities */
.section-title {
    font-size: 2rem !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.section-title-gold {
    border-bottom: 3px solid var(--ucb-gold) !important;
    display: inline-block !important;
}

.section-subtitle {
    color: var(--text-secondary) !important;
    font-size: 1.1rem !important;
    margin-top: 1rem !important;
}

.section-footer {
    text-align: center !important;
    margin-top: 50px !important;
    padding-top: 30px !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Section Heading Sizes */
.h2-section {
    font-size: 1.5rem !important;
    margin-bottom: 20px !important;
}

.h2-xl {
    font-size: 1.25rem !important;
    margin: 0 !important;
}

.h2-mb-5px {
    margin: 0 0 5px 0 !important;
    font-size: 1.25rem !important;
}

.h3-base {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
}

.h3-section {
    font-size: 1.1rem !important;
    border-bottom: 2px solid var(--border-color) !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

.h3-md {
    font-size: 1.1rem !important;
    margin: 0 !important;
}

.h3-sm {
    font-size: 1rem !important;
    margin: 0 0 10px 0 !important;
}

/* Link Utilities */
.link-no-decoration {
    color: var(--color-link) !important;
    text-decoration: none !important;
}

.link-back {
    color: var(--color-link) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Label/Form Utilities */
.label-block {
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 5px !important;
}

.label-flex {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

.select-tall {
    height: 100px !important;
}

.select-xl {
    height: 120px !important;
}

/* List Utilities */
.list-indent {
    margin-left: 20px !important;
    margin-bottom: 15px !important;
    line-height: 1.8 !important;
}

/* Table Utilities */
.table-responsive {
    overflow-x: auto !important;
}

.table-full {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 0.95rem !important;
}

.table-collapse {
    width: 100% !important;
    border-collapse: collapse !important;
}

.table-full thead tr {
    background-color: var(--bg-secondary) !important;
    border-bottom: 2px solid var(--border-color) !important;
}

.table-full th {
    padding: 12px !important;
    text-align: left !important;
    font-weight: 600 !important;
}

.table-full td {
    padding: 12px !important;
}

.table-full tbody tr {
    border-bottom: 1px solid var(--border-color) !important;
}

.td-bold {
    font-weight: 500 !important;
}

/* Card Footer Utility */
.card-footer-flex {
    display: flex !important;
    gap: 10px !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 20px !important;
    background-color: var(--bg-secondary) !important;
}

/* Stat Display Utilities */
.stat-display {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: var(--text-primary) !important;
}

/* Page Containers */
.stats-page {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

.pira-dcs-page {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* Empty State */
.empty-state {
    text-align: center !important;
    padding: 20px !important;
    color: var(--text-secondary) !important;
}

.empty-state-lg {
    padding: 40px 0 !important;
}

/* Inactive Row */
.inactive-row {
    background-color: var(--bg-secondary) !important;
    opacity: 0.7 !important;
}

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

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .w-100-mobile {
        width: 100% !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}