/* ==========================================
   Fund Raiser Manager Professional

   Version 4.0.0 RC1

   Developed by Quinton Lebatie

   Simple. Professional. Reliable.

   Helping you stay organised,
   one fundraiser at a time.
========================================== */

:root{
    --primary:#1976D2;
    --primary-dark:#0D47A1;

    --success:#2E7D32;
    --warning:#F57C00;
    --danger:#D32F2F;

    --background:#F5F7FA;
    --card:#FFFFFF;

    --text:#212121;
    --text-light:#666666;

    --border:#E0E0E0;

    --radius:16px;

    --shadow:
        0 2px 8px rgba(0,0,0,.08);

    --transition:.25s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#1976d2;
    --primary-dark:#125aa0;
    --success:#2e7d32;
    --danger:#d32f2f;
    --warning:#f9a825;

    --background:#f4f7fb;
    --card:#ffffff;

    --text:#222;
    --text-light:#666;

    --border:#e5e7eb;

    --radius:16px;

}

/* ---------- BODY ---------- */

body{
    margin:0;
    padding:0;
    background:var(--background);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
}

/* ---------- LOADING ---------- */

#loadingScreen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #1976d2,
        #0d47a1
    );

    color:#fff;

    z-index:9999;

}

.loading-box{

    text-align:center;

}

.loading-box h1{

    font-size:34px;

    margin-bottom:15px;

}

.loading-box h2{

    font-weight:normal;

    margin-bottom:20px;

}

.loading-text{

    margin-top:25px;

    font-size:18px;

}

/* ---------- APP ---------- */

#app{

    max-width:1200px;

    margin:auto;

    padding:25px;

}
/* ---------- HEADER ---------- */

.app-header{

    background:var(--primary);

    color:#fff;

    padding:25px;

    border-radius:var(--radius);

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

}

.app-header h1{

    font-size:32px;

    margin-bottom:8px;

}

.app-header p{

    opacity:.9;

}

/* ---------- CARDS ---------- */

.card{

    background:var(--card);

    border-radius:var(--radius);

    padding:20px;

    margin-top:20px;

    border:1px solid var(--border);

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

/* ---------- DASHBOARD ---------- */

.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-top:25px;

}

.dashboard-grid button{

    background:var(--primary);

    color:#fff;

    border:none;

    border-radius:14px;

    padding:20px;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

}

.dashboard-grid button:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}
/* ---------- SCREENS ---------- */

.screen{

    margin-top:25px;

}

.hidden{

    display:none;

}

/* ---------- SCREEN HEADER ---------- */

.screen-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.screen-header h2{

    color:var(--primary);

    font-size:28px;

}

/* ---------- INPUTS ---------- */

input,
select,
textarea{
    width:100%;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    font-size:15px;
    box-sizing:border-box;
    background:white;
}

/* ---------- BUTTONS ---------- */

button{

    cursor:pointer;

    transition:.25s;

    border:none;

    border-radius:12px;

}

button:hover{

    transform:translateY(-2px);

}

#btnSaveFundraiser,
#btnSaveCustomer,
#btnSaveItem,
#btnSaveOrder,
#btnSavePayment,
#btnSaveExpense,
#btnSaveSettings{

    width:100%;

    margin-top:18px;

    padding:16px;

    background:var(--success);

    color:#fff;

    font-size:17px;

}

#btnSaveFundraiser:hover,
#btnSaveCustomer:hover,
#btnSaveItem:hover,
#btnSaveOrder:hover,
#btnSavePayment:hover,
#btnSaveExpense:hover,
#btnSaveSettings:hover{

    background:#1b5e20;

}
/* ---------- SUMMARY ROWS ---------- */

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid var(--border);

}

.summary-row:last-child{

    border-bottom:none;

}

/* ---------- BADGES ---------- */

.badge{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

    color:#fff;

}

.badge-active{

    background:#2e7d32;

}

.badge-completed{

    background:#1976d2;

}

.badge-hold{

    background:#f9a825;

}

.badge-archived{

    background:#757575;

}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

    #app{

        padding:15px;

    }

    .app-header{

        flex-direction:column;

        text-align:center;

    }

.app-header{
    background:linear-gradient(135deg,#1976D2,#1565C0);
    color:#fff;

    text-align:center;

    padding:40px 20px;

    border-radius:0 0 24px 24px;

    margin-bottom:20px;

    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

    .screen-header{

        flex-direction:column;

        gap:10px;

        align-items:flex-start;

    }

}



/* ==========================================
   DASHBOARD UI v4.0.0
========================================== */

.dashboard-container{
    max-width:900px;
    margin:20px auto;
    padding:16px;
}

.dashboard-card{
    background:#fff;
    border-radius:16px;
    padding:18px;
    margin-bottom:18px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.dashboard-title{
    color:#fff;
    font-size:34px;
    font-weight:700;
    margin-bottom:10px;
}

.dashboard-subtitle{
    color:var(--text-light);
    font-size:14px;
    margin-bottom:18px;
}

.dashboard-section-title{
    font-size:18px;
    font-weight:600;
    color:var(--primary);
    margin-bottom:12px;
}

/* Add this next */

.summary-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #eee;
}

.summary-row:last-child{
    border-bottom:none;
}

.summary-label{
    font-weight:500;
}

.summary-value{
    font-weight:700;
}

/* Then add this */

.quick-actions{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

    margin-top:20px;

}


.quick-actions button{

    position:relative;

    overflow:hidden;

    width:100%;

    min-height:85px;

    padding:14px 10px;

    border:none;

    border-radius:16px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    font-size:15px;

    font-weight:600;

    color:#ffffff;

    box-shadow:
        0 8px 18px rgba(0,0,0,.18),
        inset 0 2px 6px rgba(255,255,255,.12);

    transition:all .25s ease;

}

.quick-actions button::before{

    content:"";

    position:absolute;

    top:0;

    left:-40%;

    width:60%;

    height:100%;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.15),
        rgba(255,255,255,0)
    );

    transform:skewX(-25deg);

}

#btnDashboardFundraisers{background:linear-gradient(135deg,#1565C0,#42A5F5);}
#btnDashboardCustomers{background:linear-gradient(135deg,#00897B,#26C6DA);}
#btnDashboardItems{background:linear-gradient(135deg,#EF6C00,#FFA726);}
#btnDashboardOrders{background:linear-gradient(135deg,#8E24AA,#BA68C8);}
#btnDashboardPayments{background:linear-gradient(135deg,#2E7D32,#66BB6A);}
#btnDashboardExpenses{background:linear-gradient(135deg,#C62828,#EF5350);}
#btnDashboardReports{background:linear-gradient(135deg,#455A64,#78909C);}
#btnReportStudio{background:linear-gradient(135deg,#6A1B9A,#AB47BC);}
#btnDashboardSettings{background:linear-gradient(135deg,#5D4037,#8D6E63);}
#btnAbout{background:linear-gradient(135deg,#546E7A,#90A4AE);}

.quick-actions button:hover{

    transform:translateY(-3px);

}

.quick-actions button:active{
    transform:scale(.98);
}

/* Dashboard Header */

.app-header{
    color:white;
    text-align:center;
}

.app-header p{
    color:white;
}

.dashboard-subtitle{
    color:rgba(255,255,255,.90);

    font-size:17px;

    margin-bottom:24px;

    line-height:1.5;
}

#lblWelcome{
    color:#fff;
    font-size:22px;
    font-weight:600;
}

/* ==========================================
   ACTIVE FUNDRAISER CARD
========================================== */

.active-fundraiser-card{

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:18px;

}

.active-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:12px;

    margin-bottom:18px;

}

.active-title{

    font-size:26px;

    font-weight:700;

    color:#212121;

}

.active-subtitle{

    margin-top:4px;

    font-size:14px;

    color:#757575;

}

.status-badge{

    background:#2E7D32;

    color:#ffffff;

    padding:8px 14px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;

    white-space:nowrap;

}

.active-details{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.detail-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid #eceff1;

}

.detail-row:last-child{

    border-bottom:none;

}

.detail-label{

    color:#616161;

    font-weight:600;

}

/* ==========================================
   NEXT STEP CARD
========================================== */

.next-step-card{

    text-align:center;

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:18px;

    padding:24px;

}

.next-step-icon{

    font-size:48px;

    margin-bottom:12px;

}

.next-step-title{

    font-size:24px;

    font-weight:700;

    margin-bottom:8px;

    color:#212121;

}

.next-step-description{

    color:#616161;

    margin-bottom:20px;

    line-height:1.5;

}

.next-step-button{

    background:linear-gradient(135deg,#1976D2,#42A5F5);

    color:#ffffff;

    border:none;

    border-radius:14px;

    padding:14px 24px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    box-shadow:0 6px 16px rgba(25,118,210,.25);

}

/* ==========================================
   MISSION CONTROL
========================================== */

.mission-priority{

    display:inline-block;

    margin:18px 0;

    padding:8px 18px;

    border-radius:20px;

    font-size:14px;

    font-weight:700;

    background:#E3F2FD;

    color:#1565C0;

    letter-spacing:1px;

}

/* Dashboard Health Cards */

.dashboard-grid .info-row{

    background:#f8fafc;

    border:1px solid #e5e7eb;

    border-radius:14px;

    padding:16px;

    margin:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}

.dashboard-grid .info-row span{

    font-size:15px;

    font-weight:600;

    color:#ffffff;

}

.dashboard-grid .info-row strong{

    font-size:28px;

    font-weight:700;

    color:#ffffff;

    align-self:flex-end;

}

/* Dashboard Info Rows */

.info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #EEEEEE;
}

.info-row:last-child{
    border-bottom:none;
}

.info-row span{
    color:#555;
    font-size:16px;
}

.info-row strong{
    color:#222;
    font-size:16px;
    font-weight:700;
}



/* ==========================================
   Report Studio
========================================== */

.report-card{

    max-width:700px;

    margin:20px auto;

    background:#ffffff;

    border:1px solid #dcdcdc;

    border-radius:12px;

    padding:20px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.report-header{

    text-align:center;

    margin-bottom:20px;

}

.report-header h2,
.report-header h3,
.report-header h4{

    margin:6px 0;

}

.report-info{

    width:100%;

    border-collapse:collapse;

    margin-top:15px;

}

.report-info td{

    padding:6px;

    border-bottom:1px solid #ececec;

}

.report-table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

.report-table td{

    padding:10px;

    border-bottom:1px solid #ececec;

}

.report-table tr td:last-child{

    text-align:right;

    font-weight:bold;

}

.report-message{

    padding:15px;

    border-radius:8px;

    background:#f7f7f7;

    text-align:center;

    font-style:italic;

}

.report-footer{

    margin-top:20px;

    text-align:center;

    font-size:12px;

    color:#666;

}
/* ==========================================
   Report Summary Cards
========================================== */

.report-summary{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));

    gap:15px;

    margin:20px 0;

}

.summary-card{

    background:#fafafa;

    border:1px solid #e5e5e5;

    border-radius:10px;

    padding:15px;

    text-align:center;

}

.summary-title{

    display:block;

    font-size:13px;

    color:#777;

    margin-bottom:8px;

}

.summary-value{

    display:block;

    font-size:22px;

    font-weight:bold;

}
/* ==========================================
   REPORT STUDIO
========================================== */

.report-actions .report-btn{
    display:block;
    width:100%;
    padding:16px 20px;
    margin:0;
    font-size:18px;
    font-weight:600;
    text-align:left;

    background:#1976d2;
    color:#ffffff;

    border:none;
    border-radius:12px;

    box-shadow:0 2px 6px rgba(0,0,0,.15);

    cursor:pointer;

    transition:.2s;
}

.report-actions .report-btn:hover{
    background:#1565c0;
}

.report-actions .report-btn:active{
    transform:scale(.98);
}
/* ==========================================
   Dialog Manager
========================================== */

.dialog-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;
    align-items:center;

    z-index:99999;

    animation:fadeIn .20s ease;

}

.dialog-box{

    width:82%;

    max-width:320px;

    background:#ffffff;

    border-radius:16px;

    padding:18px;

    box-shadow:0 10px 35px rgba(0,0,0,.30);

    text-align:center;

}

.dialog-title{

    font-size:20px;

    font-weight:bold;

    margin-bottom:12px;

    color:#D32F2F;

}

.dialog-message{

    font-size:16px;

    margin-bottom:18px;

    color:#444;

    line-height:1.5;

}

.dialog-buttons{

    display:flex;

    justify-content:center;

    gap:12px;

}

.dialog-buttons button{

    min-width:90px;

    padding:10px 18px;

    border:none;

    border-radius:10px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

}

#btnDialogOk{

    background:#1976d2;

    color:#fff;

}

#btnDialogCancel{

    background:#9e9e9e;

    color:#fff;

}

#btnDialogOk:hover{

    background:#1565c0;

}

#btnDialogCancel:hover{

    background:#757575;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ==========================================
   Statement Card
========================================== */

.statement-card{

    width:800px;
    background:#ffffff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 8px 30px rgba(0,0,0,.20);
    font-family:Arial,Helvetica,sans-serif;
    color:#222;

}

.statement-header{

    text-align:center;
    border-bottom:3px solid #1E88E5;
    padding-bottom:20px;
    margin-bottom:20px;

}

.statement-header img{

    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:10px;

}

.statement-header h2{

    margin:0;
    color:#1E88E5;
    font-size:28px;

}

.statement-section{

    margin-top:18px;

}

.statement-row{

    display:flex;
    justify-content:space-between;
    padding:8px 0;
    border-bottom:1px solid #eee;

}

.statement-total{

    font-weight:bold;
    font-size:18px;
    color:#1E88E5;

}

.statement-footer{

    margin-top:30px;
    text-align:center;
    font-size:14px;
    color:#666;

}

/* ==========================================
   DASHBOARD 2.0 SUMMARY CARDS
========================================== */

.dashboard-summary-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    margin: 20px 0;

}

.summary-card {

    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, #1976d2, #42a5f5);

    color: #ffffff;

    border-radius: 16px;

    padding: 12px;

    min-height: 110px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    box-shadow:
        0 8px 18px rgba(0,0,0,.18),
        inset 0 2px 6px rgba(255,255,255,.12);

    transition: all .25s ease;

}

.summary-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -40%;

    width: 60%;

    height: 100%;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.15),
        rgba(255,255,255,0)
    );

    transform: skewX(-25deg);

}

.summary-card:hover {

    transform: translateY(-3px);

}

.summary-title {

    font-size: 15px;

    font-weight: 600;

    color: #ffffff;

    margin-bottom: 8px;

    text-shadow: 0 1px 2px rgba(0,0,0,.25);

}

.summary-value {

    font-size: 32px;

    font-weight: 700;

    line-height: 1.1;

    color: #ffffff;

    text-shadow: 0 2px 4px rgba(0,0,0,.25);

}

/* ==========================================
   DASHBOARD CARD COLOURS
========================================== */

.customers-card {

    background: linear-gradient(135deg, #1976d2, #42a5f5);

}

.orders-card {

    background: linear-gradient(135deg, #7b1fa2, #ab47bc);

}

.qty-card {

    background: linear-gradient(135deg, #ef6c00, #ffa726);

}

.sales-card {

    background: linear-gradient(135deg, #2e7d32, #66bb6a);

}

.paid-card {

    background: linear-gradient(135deg, #00897b, #26c6da);

}

.outstanding-card {

    background: linear-gradient(135deg, #c62828, #ef5350);

}

.donations-card {

    background: linear-gradient(135deg, #8e24aa, #d81b60);

}

.expenses-card {

    background: linear-gradient(135deg, #FB8C00, #FDD835);

}

.netfunds-card {

    background: linear-gradient(135deg, #455a64, #78909c);

}

/* ==========================================
   QUICK ACTIONS 2.0
========================================== */

.quick-action {

    display: flex;
    align-items: center;
    gap: 16px;

    padding: 18px;

    border-radius: 16px;

    margin-bottom: 14px;

    color: #fff;

    font-size: 20px;

    font-weight: bold;

    box-shadow: 0 6px 16px rgba(0,0,0,.18);

    transition: .25s;

}

.quick-action:active {

    transform: scale(.98);

}

.action-icon {

    font-size: 34px;

    width: 44px;

    text-align: center;

}

.action-fundraisers { background: linear-gradient(135deg,#1565c0,#42a5f5); }

.action-customers { background: linear-gradient(135deg,#00897b,#26c6da); }

.action-items { background: linear-gradient(135deg,#ef6c00,#ffa726); }

.action-orders { background: linear-gradient(135deg,#8e24aa,#ba68c8); }

.action-payments { background: linear-gradient(135deg,#2e7d32,#66bb6a); }

.action-expenses { background: linear-gradient(135deg,#c62828,#ef5350); }

.action-reports { background: linear-gradient(135deg,#455a64,#78909c); }

.action-settings { background: linear-gradient(135deg,#5d4037,#8d6e63); }

/* ==========================================
   NAVIGATION DRAWER
========================================== */

/* Dark background */

#navigationOverlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.45);

    display: flex;

    justify-content: center;

    align-items: flex-end;

    z-index: 9999;

}

#navigationOverlay.hidden {

    display: none;

}

/* Drawer */

#navigationDrawer {

    width: 100%;

    max-width: 520px;

    background: #ffffff;

    border-radius: 28px 28px 0 0;

    padding: 18px 20px 28px;

    box-shadow: 0 -8px 28px rgba(0,0,0,.20);

    animation: drawerUp .25s ease;

}

/* Grab Handle */

.navHandle {

    width: 60px;

    height: 6px;

    background: #d5d5d5;

    border-radius: 20px;

    margin: 0 auto 20px;

}

/* Title */

#navigationDrawer h2 {

    text-align: center;

    font-size: 22px;

    font-weight: 700;

    color: #212121;

    margin-bottom: 20px;

}

/* Buttons */

#navigationDrawer button {

    display: flex;

    align-items: center;

    width: 100%;

    padding: 16px 18px;

    margin: 10px 0;

    border: none;

    border-radius: 14px;

    background: #f7f7f7;

    color: #212121;

    font-size: 17px;

    font-weight: 600;

    text-align: left;

    box-shadow: none;

    transition: background .2s ease,
                transform .15s ease;

}

/* Prevent glossy effect from dashboard buttons */

#navigationDrawer button::before {

    display: none;

    content: none;

}

/* Hover */

#navigationDrawer button:hover {

    background: #ececec;

    transform: none;

}

/* Press */

#navigationDrawer button:active {

    background: #e2e2e2;

    transform: scale(.98);

}

/* Slide-up animation */

@keyframes drawerUp {

    from {

        transform: translateY(100%);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}

.navigation-menu {

    display: flex;

    flex-direction: column;

    gap: 10px;

    max-height: 70vh;

    overflow-y: auto;

    padding-right: 4px;

}

/* ==========================================
   MOBILE DASHBOARD FIX
========================================== */

.dashboard-summary-grid,
.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:16px;

    width:100%;

}

.summary-card{

    width:100%;

    min-width:0;

    min-height:150px;

    box-sizing:border-box;

}

.summary-value{

    font-size:22px;

    word-break:break-word;

}

.dashboard-container,
.dashboard-card{

    width:100%;

    overflow:hidden;

}

.mission-actions{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:14px;

    margin:20px 0 30px 0;

}

.mission-actions button{

    flex:1 1 140px;

    max-width:180px;

    min-height:52px;

}

.journey-card{

    margin-top:30px;

}

/* ==========================================
   GO TO MENU - FULL SCREEN
========================================== */

#goToMenu{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
}

#goToMenu > .dialog{
    width:100%;
    max-width:none;
    min-height:100%;
    margin:0;
    border-radius:0;
    padding:24px;
    box-sizing:border-box;
    overflow-y:auto;
}

#goToMenu > .dialog h3{
    font-size:28px;
    margin:10px 0 24px 0;
    text-align:center;
}

#goToMenuItems{
    width:100%;
}

#goToMenuItems button{
    width:100%;
    min-height:64px;
    margin-bottom:14px;
    padding:16px 20px;
    font-size:20px;
    font-weight:bold;
    border-radius:12px;
    box-sizing:border-box;
}

/* ==========================================
   GO TO MENU - FULL SCREEN
   DISPLAY ONLY
========================================== */

#dialogOverlay:has(#dialogMessage button){
    align-items:stretch;
    justify-content:stretch;
}

#dialogOverlay:has(#dialogMessage button) .dialog-box{
    width:100%;
    max-width:none;
    height:100%;
    min-height:100%;
    margin:0;
    border-radius:0;
    box-sizing:border-box;
    padding:24px;
    overflow-y:auto;
}

#dialogOverlay:has(#dialogMessage button) #dialogTitle{
    font-size:28px;
    text-align:center;
    padding:18px;
    margin-bottom:24px;
}

#dialogOverlay:has(#dialogMessage button) #dialogMessage{
    width:100%;
}

#dialogOverlay:has(#dialogMessage button) #dialogMessage button{
    width:100%;
    min-height:70px;
    margin-bottom:16px;
    padding:18px 20px;
    font-size:21px;
    font-weight:bold;
    border-radius:12px;
}

/* ======================================
   Fundraiser Health - Clean Layout
====================================== */

.fundraiser-health {
    width: 100%;
}

.health-status {
    text-align: center;
    margin-bottom: 18px;
}

.health-status-text {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 20px;
}

.health-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.health-item {
    text-align: center;
    padding: 12px 8px;
    border-radius: 10px;
    background: #f7f7f7;
}

.health-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
}

.health-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 600px) {

    .health-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .health-value {
        font-size: 17px;
    }

}

/* ==========================================
   DIALOG HIDDEN STATE FIX
   ========================================== */

.dialog-overlay.hidden {
    display: none !important;
}