/* COMPLETE DASHBOARD CSS - WITH ENHANCED BALANCE SYSTEM */

/* CSS Variables */
:root {
    --primary-purple: #5e2e6d;
    --light-purple: #f5f0ff;
    --purple-tint: #e9dfff;
    --purple-border: #e6d9f2;
    --cobalt-blue: #0047AB;
    --success-green: #52c41a;
    --warning-amber: #faad14;
    --error-red: #f5222d;
    --info-blue: #1890ff;
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --background-primary: #ffffff;
    --background-secondary: #f8fafc;
    --border-light: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    
    /* NEW: Enhanced balance system colors */
    --credit-green: #16a34a;
    --debit-red: #dc2626;
    --neutral-blue: #0047AB;
    --credit-bg: #f0fdf4;
    --debit-bg: #fef2f2;
    --neutral-bg: #eff6ff;
}

/* ========================================
   MAIN DASHBOARD LAYOUT
======================================== */

/* Page Background */
.njanji-profile-form {
    background-color: var(--background-secondary) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Dashboard Wrapper */
#id_Osls7IT {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    background: #f8f9fa !important;
    min-height: 100vh !important;
}

#id_Osls7IT .WaGadgetHtmlContent {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
}

/* ========================================
   HEADER SECTION - DARKER GRADIENT + FIXED SPACING
======================================== */

#id_Osls7IT .profile-header {
    background: linear-gradient(135deg, #4c1d95 0%, #6b21a8 50%, #7c2d12 100%) !important;
    color: white !important;
    padding: 30px !important;
    border-radius: 15px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 10px 25px rgba(76, 29, 149, 0.4) !important;
}

#id_Osls7IT .profile-title {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    color: white !important;
}

#id_Osls7IT .profile-subtitle {
    font-size: 1.1rem !important;
    opacity: 0.9 !important;
    margin-bottom: 25px !important;
    font-style: italic !important;
    text-align: center !important;
}

/* Member Status Grid - FIXED SPACING */
#id_Osls7IT .member-status-grid {
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 20px !important;
    border-radius: 10px !important;
    backdrop-filter: blur(10px) !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 8px !important;
}

#id_Osls7IT .status-card {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    font-size: 0.95rem !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

#id_Osls7IT .status-label {
    opacity: 0.9 !important;
    white-space: nowrap !important;
}

#id_Osls7IT .status-value {
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 3px 10px !important;
    border-radius: 15px !important;
    font-size: 0.85rem !important;
    white-space: nowrap !important;
}

/* ========================================
   TWO-COLUMN SECTION: BALANCE (SMALLER) + FINANCIAL (LARGER)
======================================== */

#id_Osls7IT .balance-financial-section {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: 30px !important;
    margin-bottom: 30px !important;
}

/* Left Column: Balance Due - SMALLER WIDTH */
#id_Osls7IT .balance-due-column {
    display: flex !important;
    align-items: stretch !important;
}

/* Enhanced Balance Alert with Dynamic States */
#id_Osls7IT .balance-alert {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%) !important;
    border: 1px solid var(--warning-amber) !important;
    border-radius: 15px !important;
    padding: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

/* NEW: Enhanced balance alert container states */
#id_Osls7IT .balance-alert.credit-state {
    background: linear-gradient(135deg, var(--credit-bg) 0%, #ecfdf5 100%) !important;
    border-color: var(--credit-green) !important;
}

#id_Osls7IT .balance-alert.debit-state {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%) !important;
    border-color: var(--debit-red) !important;
}

#id_Osls7IT .balance-alert.zero-state {
    background: linear-gradient(135deg, var(--neutral-bg) 0%, #e0f2fe 100%) !important;
    border-color: var(--neutral-blue) !important;
}

/* Enhanced Alert Icon with Dynamic States */
#id_Osls7IT .alert-icon {
    width: 50px !important;
    height: 50px !important;
    background: var(--warning-amber) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    color: white !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

/* NEW: Enhanced alert icon variations */
#id_Osls7IT .alert-icon.credit {
    background: var(--credit-green) !important;
    animation: none !important;
}

#id_Osls7IT .alert-icon.credit::after {
    content: '✓' !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

#id_Osls7IT .alert-icon.debit {
    background: var(--debit-red) !important;
    animation: pulse 2s ease-in-out infinite !important;
}

#id_Osls7IT .alert-icon.debit::after {
    content: '⚠️' !important;
    font-size: 24px !important;
}

#id_Osls7IT .alert-icon.zero {
    background: var(--neutral-blue) !important;
    animation: none !important;
}

#id_Osls7IT .alert-icon.zero::after {
    content: '=' !important;
    color: white !important;
    font-size: 28px !important;
    font-weight: bold !important;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

#id_Osls7IT .alert-content {
    flex: 1 !important;
}

/* Enhanced Alert Title with Dynamic States */
#id_Osls7IT .alert-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #92400e !important;
    margin-bottom: 8px !important;
    transition: color 0.3s ease !important;
}

/* NEW: Enhanced alert titles */
#id_Osls7IT .alert-title.credit {
    color: #166534 !important;
}

#id_Osls7IT .alert-title.debit {
    color: #92400e !important;
}

#id_Osls7IT .alert-title.zero {
    color: #1e40af !important;
}

/* Enhanced Alert Amount with Clear Indicators */
#id_Osls7IT .alert-amount {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    margin-bottom: 15px !important;
    font-family: 'Courier New', monospace !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

/* NEW: Credit balance (positive) styling */
#id_Osls7IT .balance-credit {
    color: var(--credit-green) !important;
}

#id_Osls7IT .balance-credit::before {
    content: '✓ ' !important;
    font-size: 0.8em !important;
    margin-right: 4px !important;
    opacity: 0.8 !important;
}

/* NEW: Debit balance (negative) styling */
#id_Osls7IT .balance-debit {
    color: var(--debit-red) !important;
}

#id_Osls7IT .balance-debit::before {
    content: '⚠ ' !important;
    font-size: 0.8em !important;
    margin-right: 4px !important;
    animation: pulse-warning 2s ease-in-out infinite !important;
}

/* NEW: Zero balance styling */
#id_Osls7IT .balance-zero {
    color: var(--neutral-blue) !important;
}

#id_Osls7IT .balance-zero::before {
    content: '= ' !important;
    font-size: 0.8em !important;
    margin-right: 4px !important;
    opacity: 0.8 !important;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Enhanced Pay Online Button */
#id_Osls7IT .pay-online-btn {
    background: var(--cobalt-blue) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    font-size: 1rem !important;
}

#id_Osls7IT .pay-online-btn:hover {
    background: #003d96 !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* NEW: Enhanced button states based on balance */
#id_Osls7IT .btn-primary.debit-action {
    background: linear-gradient(135deg, var(--debit-red) 0%, #b91c1c 100%) !important;
    animation: glow-pulse 2s ease-in-out infinite !important;
}

@keyframes glow-pulse {
    0%, 100% { 
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
    }
    50% { 
        box-shadow: 0 4px 20px rgba(220, 38, 38, 0.5) !important;
    }
}

#id_Osls7IT .btn-primary.credit-action {
    background: linear-gradient(135deg, var(--credit-green) 0%, #15803d 100%) !important;
}

#id_Osls7IT .btn-primary.zero-action {
    background: linear-gradient(135deg, var(--neutral-blue) 0%, #003d96 100%) !important;
}

/* Right Column: Financial Summary - LARGER WIDTH */
#id_Osls7IT .financial-summary-column {
    background: white !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
}

#id_Osls7IT .financial-title {
    font-size: 1.4rem !important;
    color: #1f2937 !important;
    margin: 0 0 20px 0 !important;
    font-weight: 600 !important;
}

#id_Osls7IT .financial-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
}

#id_Osls7IT .stat-card {
    text-align: center !important;
    padding: 18px 12px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
}

#id_Osls7IT .financial-stats .stat-label {
    font-size: 0.9rem !important;
    color: #6b7280 !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

/* Enhanced Financial Stats with Better Indicators */
#id_Osls7IT .financial-stats .stat-value {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    font-family: 'Courier New', monospace !important;
}

/* NEW: Status indicators for financial stats */
#id_Osls7IT .stat-value.positive::before {
    content: '+' !important;
    color: var(--credit-green) !important;
    font-weight: bold !important;
    margin-right: 2px !important;
}

#id_Osls7IT .stat-value.negative::before {
    content: '-' !important;
    color: var(--debit-red) !important;
    font-weight: bold !important;
    margin-right: 2px !important;
}

#id_Osls7IT .stat-value.positive {
    color: #059669 !important;
}

#id_Osls7IT .stat-value.negative {
    color: #dc2626 !important;
}

#id_Osls7IT .stat-value.balance {
    color: #2563eb !important;
}

/* NEW: Screen reader only text for accessibility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ========================================
   QUICK ACTIONS - HORIZONTAL LAYOUT
======================================== */

#id_Osls7IT .quick-actions-horizontal {
    background: white !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 30px !important;
}

#id_Osls7IT .quick-actions-horizontal h2 {
    font-size: 1.4rem !important;
    color: #1f2937 !important;
    margin: 0 0 20px 0 !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Adaptive Grid: 6 columns on desktop, 3 on tablet, 2 on mobile */
#id_Osls7IT .action-buttons-horizontal {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 15px !important;
}

#id_Osls7IT .action-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px 15px !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    min-height: 100px !important;
}

#id_Osls7IT .action-button.donate {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
}

#id_Osls7IT .action-button.contribute {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

#id_Osls7IT .action-button.report {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

#id_Osls7IT .action-button.invoices {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: white !important;
}

#id_Osls7IT .action-button.claims {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
}

#id_Osls7IT .action-button.profile {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    color: white !important;
}

#id_Osls7IT .action-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
}

#id_Osls7IT .action-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    font-size: 1.2rem !important;
}

#id_Osls7IT .action-text {
    line-height: 1.3 !important;
}

/* ========================================
   ANNOUNCEMENTS SECTION
======================================== */

#id_Osls7IT .announcements-section {
    background: white !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
}

#id_Osls7IT .announcements-section h2 {
    font-size: 1.4rem !important;
    color: #1f2937 !important;
    margin: 0 0 20px 0 !important;
    font-weight: 600 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#id_Osls7IT .view-all-link {
    font-size: 0.85rem !important;
    color: #6366f1 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#id_Osls7IT .announcement-card {
    border-left: 4px solid #ef4444 !important;
    background: #fef2f2 !important;
    padding: 20px !important;
    border-radius: 0 10px 10px 0 !important;
    margin-bottom: 15px !important;
}

#id_Osls7IT .announcement-header {
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 8px !important;
}

#id_Osls7IT .announcement-date {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    margin-bottom: 10px !important;
}

#id_Osls7IT .announcement-content {
    line-height: 1.6 !important;
    color: #374151 !important;
}

#id_Osls7IT .contribute-button {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    margin-right: 10px !important;
}

#id_Osls7IT .view-details-button {
    background: #6b7280 !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 10px !important;
}

/* ========================================
   CONTACT PROFILE SYSTEM STYLING (id_q6TbpuR)
======================================== */

/* Set consistent background for entire contact profile system */
#id_q6TbpuR {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    background: #f8f9fa !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

/* Remove default Wild Apricot styling */
#id_q6TbpuR .contactProfileForm,
#id_q6TbpuR .WaGadgetContactProfile,
#id_q6TbpuR .FormBody {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Style the Edit Profile and Directory Profile buttons */
#id_q6TbpuR .EditProfileButton,
#id_q6TbpuR .profileActions,
#id_q6TbpuR .profileButtons {
    background: white !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 20px !important;
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
}

#id_q6TbpuR .EditProfileButton a,
#id_q6TbpuR .profileActions a,
#id_q6TbpuR .profileButtons a {
    background: linear-gradient(135deg, var(--primary-purple) 0%, #7c3aed 100%) !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-sm) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

#id_q6TbpuR .EditProfileButton a:hover,
#id_q6TbpuR .profileActions a:hover,
#id_q6TbpuR .profileButtons a:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Balance due indicator in top right */
#id_q6TbpuR .balanceDue {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    background: var(--error-red) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: var(--shadow-md) !important;
    z-index: 1000 !important;
}

/* Navigation tabs styling */
#id_q6TbpuR .profileTabs,
#id_q6TbpuR .tabContainer {
    background: white !important;
    border-radius: 15px !important;
    padding: 8px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

#id_q6TbpuR .profileTabs a,
#id_q6TbpuR .tabContainer a {
    padding: 12px 18px !important;
    border-radius: var(--radius-sm) !important;
    text-decoration: none !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    font-size: 0.9rem !important;
}

#id_q6TbpuR .profileTabs a:hover,
#id_q6TbpuR .tabContainer a:hover {
    background: var(--light-purple) !important;
    color: var(--primary-purple) !important;
}

#id_q6TbpuR .profileTabs a.active,
#id_q6TbpuR .profileTabs a.selected,
#id_q6TbpuR .tabContainer a.active,
#id_q6TbpuR .tabContainer a.selected {
    background: var(--primary-purple) !important;
    color: white !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Warning icon for invoices tab */
#id_q6TbpuR .profileTabs a[href*="invoices"]::before,
#id_q6TbpuR .tabContainer a[href*="invoices"]::before {
    content: '⚠️' !important;
    margin-right: 6px !important;
}

/* Balance due alert section */
#id_q6TbpuR .balanceAlert,
#id_q6TbpuR .alertBox,
#id_q6TbpuR .warningBox {
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%) !important;
    border: 1px solid var(--warning-amber) !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#id_q6TbpuR .balanceAlert::before,
#id_q6TbpuR .alertBox::before,
#id_q6TbpuR .warningBox::before {
    content: '⚠️' !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--warning-amber) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: white !important;
    flex-shrink: 0 !important;
}

/* Main content area styling */
#id_q6TbpuR .contactProfileForm,
#id_q6TbpuR .FormBody,
#id_q6TbpuR .mainContent {
    background: white !important;
    border-radius: 15px !important;
    padding: 30px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 20px !important;
}

/* Section headers */
#id_q6TbpuR h1,
#id_q6TbpuR h2,
#id_q6TbpuR h3 {
    color: var(--primary-purple) !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--purple-border) !important;
}

#id_q6TbpuR h1 {
    font-size: 1.8rem !important;
}

#id_q6TbpuR h2 {
    font-size: 1.5rem !important;
}

#id_q6TbpuR h3 {
    font-size: 1.25rem !important;
}

/* Search functionality */
#id_q6TbpuR .searchBox,
#id_q6TbpuR input[type="search"],
#id_q6TbpuR .searchControls input {
    padding: 12px 16px !important;
    border: 2px solid var(--border-light) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.95rem !important;
    transition: border-color 0.3s ease !important;
    margin-bottom: 16px !important;
    width: 300px !important;
    background: white !important;
}

#id_q6TbpuR .searchBox:focus,
#id_q6TbpuR input[type="search"]:focus,
#id_q6TbpuR .searchControls input:focus {
    outline: none !important;
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px rgba(94, 46, 109, 0.1) !important;
}

/* Records count styling */
#id_q6TbpuR .recordsCount {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
    margin-bottom: 16px !important;
}

/* Table styling */
#id_q6TbpuR table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: white !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
    margin: 20px 0 !important;
}

#id_q6TbpuR table th {
    background: var(--background-secondary) !important;
    padding: 16px !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid var(--border-light) !important;
}

#id_q6TbpuR table td {
    padding: 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    vertical-align: middle !important;
    font-size: 0.95rem !important;
}

#id_q6TbpuR table tbody tr:hover {
    background: var(--background-secondary) !important;
}

/* Invoice/transaction styling */
#id_q6TbpuR .invoiceAmount,
#id_q6TbpuR .amount {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

#id_q6TbpuR .amount.negative,
#id_q6TbpuR .invoiceAmount.negative {
    color: var(--error-red) !important;
}

/* Links styling */
#id_q6TbpuR a {
    color: var(--cobalt-blue) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

#id_q6TbpuR a:hover {
    color: #003d96 !important;
    text-decoration: underline !important;
}

/* Form elements */
#id_q6TbpuR .FormFieldContainer {
    margin-bottom: 20px !important;
}

#id_q6TbpuR .FormFieldContainer label {
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#id_q6TbpuR input[type="text"],
#id_q6TbpuR input[type="email"],
#id_q6TbpuR input[type="password"],
#id_q6TbpuR select,
#id_q6TbpuR textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid var(--border-light) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 1rem !important;
    transition: border-color 0.3s ease !important;
    background: white !important;
}

#id_q6TbpuR input[type="text"]:focus,
#id_q6TbpuR input[type="email"]:focus,
#id_q6TbpuR input[type="password"]:focus,
#id_q6TbpuR select:focus,
#id_q6TbpuR textarea:focus {
    outline: none !important;
    border-color: var(--primary-purple) !important;
    box-shadow: 0 0 0 3px rgba(94, 46, 109, 0.1) !important;
}

/* Button styling */
#id_q6TbpuR input[type="submit"],
#id_q6TbpuR .button,
#id_q6TbpuR .btn {
    background: linear-gradient(135deg, var(--primary-purple) 0%, #7c3aed 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-sm) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

#id_q6TbpuR input[type="submit"]:hover,
#id_q6TbpuR .button:hover,
#id_q6TbpuR .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Pay Online button special styling */
#id_q6TbpuR .payOnlineButton,
#id_q6TbpuR input[value="PAY ONLINE"],
#id_q6TbpuR .payButton {
    background: var(--cobalt-blue) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

#id_q6TbpuR .payOnlineButton:hover,
#id_q6TbpuR input[value="PAY ONLINE"]:hover,
#id_q6TbpuR .payButton:hover {
    background: #003d96 !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Credit card icons styling */
#id_q6TbpuR .creditCardIcons,
#id_q6TbpuR .paymentIcons {
    margin: 10px 0 !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

#id_q6TbpuR .creditCardIcons img,
#id_q6TbpuR .paymentIcons img {
    height: 24px !important;
    border-radius: 4px !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Special styling for different sections */
#id_q6TbpuR .membershipDetails,
#id_q6TbpuR .profileSection,
#id_q6TbpuR .formSection {
    background: white !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 20px !important;
}

/* Footer balance due styling */
#id_q6TbpuR .balanceFooter {
    background: white !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
    margin-top: 20px !important;
}

#id_q6TbpuR .balanceFooter .amount {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--cobalt-blue) !important;
    margin-bottom: 8px !important;
}

#id_q6TbpuR .balanceFooter .label {
    color: var(--text-secondary) !important;
    font-size: 0.9rem !important;
}

/* Messages section styling */
#id_q6TbpuR .messagesSection {
    background: white !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    margin-top: 20px !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
}

/* ========================================
   RESPONSIVE DESIGN - ADAPTIVE GRID
======================================== */

/* Tablet: 3 buttons per row */
@media (max-width: 1024px) {
    #id_Osls7IT .action-buttons-horizontal {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    #id_Osls7IT .balance-financial-section {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    #id_Osls7IT .financial-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    /* Contact profile responsive */
    #id_q6TbpuR {
        padding: 15px !important;
    }
    
    #id_q6TbpuR .profileTabs,
    #id_q6TbpuR .tabContainer {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
    }
}

/* Mobile: 2 buttons per row */
@media (max-width: 768px) {
    #id_Osls7IT {
        padding: 15px !important;
    }
    
    #id_Osls7IT .profile-header {
        padding: 20px !important;
    }
    
    #id_Osls7IT .profile-title {
        font-size: 1.8rem !important;
    }
    
    #id_Osls7IT .action-buttons-horizontal {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    #id_Osls7IT .member-status-grid {
        grid-template-columns: 1fr !important;
    }
    
    #id_Osls7IT .financial-stats {
        grid-template-columns: 1fr !important;
    }
    
    #id_Osls7IT .balance-financial-section {
        gap: 15px !important;
    }
    
    /* Contact profile mobile */
    #id_q6TbpuR table th,
    #id_q6TbpuR table td {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
    
    #id_q6TbpuR .searchBox,
    #id_q6TbpuR input[type="search"] {
        width: 100% !important;
    }
    
    #id_q6TbpuR .EditProfileButton,
    #id_q6TbpuR .profileActions {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* Small Mobile: 1 button per row */
@media (max-width: 480px) {
    #id_Osls7IT .action-buttons-horizontal {
        grid-template-columns: 1fr !important;
    }
    
    #id_Osls7IT .action-button {
        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 15px !important;
    }
    
    #id_Osls7IT .action-icon {
        margin-bottom: 0 !important;
        margin-right: 15px !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
    }
    
    /* Contact profile small mobile */
    #id_q6TbpuR .contactProfileForm,
    #id_q6TbpuR .FormBody {
        padding: 20px !important;
    }
}

/* ========================================
   ACCESSIBILITY & ENHANCEMENTS
======================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .njanji-profile-form *,
    #id_Osls7IT *,
    #id_q6TbpuR * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus indicators */
.njanji-profile-form *:focus,
#id_Osls7IT *:focus,
#id_q6TbpuR *:focus {
    outline: 2px solid var(--primary-purple) !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .njanji-profile-form,
    #id_Osls7IT,
    #id_q6TbpuR {
        --border-light: #000000;
        --text-secondary: #000000;
    }
    
    #id_Osls7IT .balance-alert {
        border-width: 3px !important;
    }
    
    #id_Osls7IT .btn-primary {
        border: 2px solid var(--text-primary) !important;
    }
    
    #id_Osls7IT .stat-card {
        border-width: 2px !important;
    }
}

/* NEW: Print styles for financial records */
@media print {
    #id_Osls7IT .action-buttons-horizontal,
    #id_Osls7IT .announcements-section,
    #id_q6TbpuR .EditProfileButton,
    #id_q6TbpuR .profileActions {
        display: none !important;
    }
    
    #id_Osls7IT,
    #id_q6TbpuR {
        background: white !important;
        box-shadow: none !important;
    }
    
    #id_Osls7IT .balance-credit::after {
        content: ' (CREDIT)' !important;
        font-weight: normal !important;
        font-size: 0.8em !important;
    }
    
    #id_Osls7IT .balance-debit::after {
        content: ' (DEBIT)' !important;
        font-weight: normal !important;
        font-size: 0.8em !important;
    }
    
    #id_Osls7IT .balance-zero::after {
        content: ' (ZERO BALANCE)' !important;
        font-weight: normal !important;
        font-size: 0.8em !important;
    }
}

/* Loading states */
.njanji-profile-form .loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Success/error states */
.njanji-profile-form .success {
    border-left: 4px solid var(--success-green) !important;
    background: #f0fdf4 !important;
}

.njanji-profile-form .error {
    border-left: 4px solid var(--error-red) !important;
    background: #fef2f2 !important;
}

/* ===============================================================================================
   Top up section
============================================================================================== */
/* Style for the top-up intro block */
#id_IzwzWZm {
  background-color: #f5f5f5;
  border: 1px solid #e1e1e1;
  padding: 25px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Style for the donation gadget container */
#id_lFPCSs9 {
  background-color: #ffffff;
  border: 1px solid #eaeaea;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}