/**
 * UI UNIFORMITY FIX — Global Consistency Patch
 * ============================================
 * Fixes inconsistent font sizes, colors, and styling across
 * admin, member, and public interfaces.
 * 
 * Load this file AFTER all other CSS files to ensure it takes precedence.
 */

/* ═══════════════════════════════════════════════════
   1. GLOBAL FONT SIZE STANDARDIZATION
   ═══════════════════════════════════════════════════ */

/* Base font size reset - ensure consistency */
html {
    font-size: var(--font-base, 14px);
}

/* Body text - consistent across all panels */
body, .mem-wrapper, .main-content {
    font-family: var(--font-primary, 'Mukta', 'Noto Sans Devanagari', 'Segoe UI', sans-serif) !important;
    font-size: var(--font-base) !important;
    line-height: 1.6 !important;
    color: var(--text-primary, #1a2e1f) !important;
}

/* ═══════════════════════════════════════════════════
   2. HEADING UNIFORMITY
   ═══════════════════════════════════════════════════ */

/* Page titles - consistent size */
h1, .page-title, .dash-title-main {
    font-size: var(--font-2xl) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    line-height: 1.6 !important;
}

/* Section headers */
h2, .card-header h5, .card-header h6 {
    font-size: var(--font-xl) !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

/* Subsection headers */
h3, .section-header h2, .section-header h3 {
    font-size: var(--font-lg) !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

/* Small headings */
h4, h5, h6 {
    font-size: var(--font-md) !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

/* ── Hero / slider display headings — restore large size after global h1 reset ── */
.hero-title-modern,
.slider-content h1 {
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
}
@media (max-width: 768px) {
    .hero-title-modern, .slider-content h1 { font-size: 2rem !important; }
}
@media (max-width: 480px) {
    .hero-title-modern, .slider-content h1 { font-size: 1.8rem !important; }
}

/* ═══════════════════════════════════════════════════
   3. ADMIN INTERFACE SPECIFIC FIXES
   ═══════════════════════════════════════════════════ */

/* Sidebar navigation */
.sidebar-nav a {
    font-size: var(--font-md) !important;
    font-weight: 500 !important;
}

.nav-group-header {
    font-size: var(--font-xs) !important;
    font-weight: 700 !important;
}

/* Card headers */
.card-header {
    font-size: var(--font-md) !important;
    font-weight: 600 !important;
    color: var(--text-primary, #1a2e1f) !important;
}

/* Tables */
.table {
    font-size: var(--font-md) !important;
}

.table th {
    font-size: var(--font-xs) !important;
    font-weight: 600 !important;
}

/* Forms */
.form-label {
    font-size: var(--font-md) !important;
    font-weight: 500 !important;
    color: var(--text-primary, #1a2e1f) !important;
}

.form-control, .form-select {
    font-size: var(--font-md) !important;
}

/* Buttons */
.btn {
    font-size: var(--font-md) !important;
    font-weight: 500 !important;
}

.btn-sm {
    font-size: var(--font-xs) !important;
}

/* Badges */
.badge {
    font-size: var(--font-xs) !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════
   4. MEMBER INTERFACE SPECIFIC FIXES
   ═══════════════════════════════════════════════════ */

/* Member container headings */
.mem-container h1 {
    font-size: var(--font-2xl) !important;
}

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

/* Member topbar */
.mem-topbar-brand .mem-brand-name {
    font-size: var(--font-md) !important;
    font-weight: 700 !important;
}

.mem-topbar-brand .mem-brand-sub {
    font-size: var(--font-xs) !important;
}

/* ═══════════════════════════════════════════════════
   5. COLOR CONSISTENCY
   ═══════════════════════════════════════════════════ */

/* Primary color consistency */
.text-primary, .page-title, .dash-title-main {
    color: var(--primary-color, #1a5f2a) !important;
}

.btn-primary {
    background-color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: var(--text-on-primary, #fff) !important;
}

.btn-secondary,
.badge.bg-secondary,
.bg-secondary,
.text-bg-secondary {
    background-color: var(--secondary-color, #c0392b) !important;
    border-color: var(--secondary-color, #c0392b) !important;
    color: var(--text-on-secondary, #fff) !important;
}

.bg-primary,
.badge.bg-primary,
.text-bg-primary,
.nav-pills .nav-link.active {
    background-color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}
/* Public + member tabs: filled — admin tabs excluded (admin-modern.css handles those) */
body:not([class*="admin-page-"]) .nav-tabs .nav-link.active {
    background-color: var(--primary-color, #1a5f2a) !important;
    border-color: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #fff) !important;
}

.bg-primary *,
.text-bg-primary *,
.bg-secondary *,
.text-bg-secondary *,
.btn-primary *,
.btn-secondary * {
    color: inherit !important;
}

.hero-title-modern,
.hero-subtitle-modern,
.slider-content h1,
.slider-content p {
    color: #fff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}

.hero-btn-modern,
.home-btn-primary,
.contact-btn-modern {
    color: var(--text-on-primary, #fff) !important;
}

.hero-btn-modern *,
.home-btn-primary *,
.contact-btn-modern * {
    color: inherit !important;
}

.top-bar,
.topbar,
.header-top,
.site-topbar,
.quick-links-bar {
    color: var(--text-on-header, #fff) !important;
}

.top-bar a,
.topbar a,
.header-top a,
.site-topbar a,
.quick-links-bar a {
    color: inherit !important;
}

footer,
.site-footer,
.footer,
.footer-section,
.footer-bottom {
    color: var(--text-on-footer, #fff) !important;
}

footer a,
.site-footer a,
.footer a {
    color: color-mix(in srgb, var(--text-on-footer, #fff) 92%, transparent) !important;
}

footer a:hover,
.site-footer a:hover,
.footer a:hover {
    color: var(--text-on-footer, #fff) !important;
}

/* Secondary text colors */
.text-muted, .form-text, .empty-state p {
    color: var(--text-muted, #6b7280) !important;
    font-size: var(--font-md) !important;
}

/* ═══════════════════════════════════════════════════
   6. UTILITY CLASSES FOR CONSISTENCY
   ═══════════════════════════════════════════════════ */

/* Consistent spacing */
.section-spacing {
    margin-bottom: 2rem !important;
}

.subsection-spacing {
    margin-bottom: 1rem !important;
}

/* Consistent card styling */
.unified-card {
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: var(--radius-lg, 16px) !important;
    box-shadow: var(--shadow-sm, 0 4px 16px rgba(0,0,0,0.08)) !important;
    padding: 1.5rem !important;
}

/* ═══════════════════════════════════════════════════
   7. RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    html {
        font-size: var(--font-xs) !important;
    }
    
    h1, .page-title, .dash-title-main {
        font-size: var(--font-xl) !important;
    }
    
    h2, .card-header h5, .card-header h6 {
        font-size: var(--font-lg) !important;
    }
}

@media (max-width: 576px) {
    html {
        font-size: calc(var(--font-xs) - 1px) !important;
    }
    
    h1, .page-title, .dash-title-main {
        font-size: var(--font-lg) !important;
    }
}

/* ═══════════════════════════════════════════════════
   8. ADMIN DASHBOARD SPECIFIC FIXES
   ═══════════════════════════════════════════════════ */

/* Dashboard main title - consistent sizing */
.dash-title-main {
    font-size: var(--font-2xl) !important;
    font-weight: 800 !important;
    color: var(--primary-color, #1a5f2a) !important;
    margin: 0 0 1rem 0 !important;
    line-height: 1.2 !important;
}

/* Dashboard section titles */
.dash-section-title {
    font-size: var(--font-xl) !important;
    font-weight: 700 !important;
    color: var(--text-primary, #1a2e1f) !important;
    margin-bottom: 1rem !important;
}

/* Dashboard tabs - consistent styling */
.ds-tabs {
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: var(--radius-lg, 16px) !important;
    padding: 4px !important;
    margin-bottom: 1.5rem !important;
    box-shadow: var(--shadow-sm, 0 4px 16px rgba(0,0,0,0.08)) !important;
}

.ds-tab {
    font-size: var(--font-md) !important;
    font-weight: 600 !important;
    color: var(--text-muted, #6b7280) !important;
    padding: 0.75rem 1rem !important;
    border-radius: var(--radius-md, 10px) !important;
    transition: all 0.3s ease !important;
}

.ds-tab.active {
    background: var(--primary-color, #1a5f2a) !important;
    color: var(--text-on-primary, #ffffff) !important;
    font-weight: 700 !important;
}

/* Dashboard cards - consistent sizing */
.ds-card {
    font-size: var(--font-base) !important;
    border-radius: var(--radius-lg, 16px) !important;
    padding: 1.25rem 1rem !important;
    background: var(--bg-card, #ffffff) !important;
    border: 2px solid var(--border-color, #e5e7eb) !important;
    color: var(--text-primary, #1a2e1f) !important;
}

.ds-val {
    font-size: var(--font-3xl) !important;
    font-weight: 900 !important;
    color: var(--primary-color, #1a5f2a) !important;
    line-height: 1 !important;
}

.ds-lbl {
    font-size: var(--font-xs) !important;
    font-weight: 600 !important;
    color: var(--text-muted, #6b7280) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

/* Welfare claims section specific fixes */
.wf-summary-bar {
    display: flex !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    flex-wrap: wrap !important;
}

.wf-stat-chip {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 1rem !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: var(--radius-lg, 16px) !important;
    text-decoration: none !important;
    color: var(--text-primary, #1a2e1f) !important;
    transition: all 0.3s ease !important;
    min-width: 120px !important;
}

.wf-stat-chip:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.1)) !important;
}

.wf-stat-chip .val {
    font-size: var(--font-2xl) !important;
    font-weight: 800 !important;
    margin-bottom: 0.25rem !important;
}

.wf-stat-chip .lbl {
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    color: var(--text-muted, #6b7280) !important;
}

/* Welfare claim type rows */
.wf-type-row {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1rem !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-color, #e5e7eb) !important;
    border-radius: var(--radius-lg, 16px) !important;
    margin-bottom: 0.75rem !important;
}

.wf-type-name {
    font-size: var(--font-base) !important;
    font-weight: 600 !important;
    color: var(--text-primary, #1a2e1f) !important;
    flex: 1 !important;
}

.dash-type-total {
    font-size: var(--font-sm) !important;
    color: var(--text-muted, #6b7280) !important;
    margin-top: 0.25rem !important;
}

/* Empty state messages */
.dash-empty-note,
.dash-empty-note-lg {
    font-size: var(--font-base) !important;
    color: var(--text-muted, #6b7280) !important;
    padding: 2rem 1rem !important;
    text-align: center !important;
}

/* Dashboard buttons */
.dash-btn-primary,
.dash-btn-outline-primary,
.dash-btn-outline-secondary,
.dash-btn-outline-warn {
    font-size: var(--font-sm) !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-md, 10px) !important;
    transition: all 0.3s ease !important;
}

/* Dashboard badges */
.dash-badge-alert,
.dash-badge-primary {
    font-size: var(--font-xs) !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: var(--radius-sm, 6px) !important;
}

/* Dark mode intentionally removed — site uses CSS vars from admin settings, not OS dark mode */