/* ==========================================================
   Mosque Portal - Emerald & Gold Custom Theme System
   ========================================================== */

:root {
    --primary-emerald: #0D5C3A;
    --emerald-dark: #073B24;
    --emerald-light: #E8F5E9;
    --accent-gold: #D4AF37;
    --gold-hover: #B89628;
    --bg-offwhite: #F8F9FA;
    --surface-white: #FFFFFF;
    --text-dark: #1E293B;
    --text-muted: #64748B;
    --border-color: #E2E8F0;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-offwhite);
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navbar Custom Styling */
.navbar-custom {
    background-color: var(--primary-emerald);
    border-bottom: 3px solid var(--accent-gold);
}

.brand-text {
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

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

/* Custom Buttons */
.btn-emerald {
    background-color: var(--primary-emerald);
    color: #FFFFFF;
    border: none;
    transition: all 0.2s ease-in-out;
}

.btn-emerald:hover {
    background-color: var(--emerald-dark);
    color: #FFFFFF;
}

.btn-gold {
    background-color: var(--accent-gold);
    color: #FFFFFF;
    font-weight: 600;
    border: none;
    transition: all 0.2s ease-in-out;
}

.btn-gold:hover {
    background-color: var(--gold-hover);
    color: #FFFFFF;
}

/* Soft Styled Cards */
.card-custom {
    background-color: var(--surface-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-header-emerald {
    background-color: var(--primary-emerald);
    color: #FFFFFF;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom: 2px solid var(--accent-gold);
}

/* Custom Badges */
.badge-approved {
    background-color: #D1FAE5;
    color: #065F46;
    border: 1px solid #A7F3D0;
    padding: 0.4em 0.8em;
    border-radius: 20px;
    font-weight: 600;
}

.badge-pending {
    background-color: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    padding: 0.4em 0.8em;
    border-radius: 20px;
    font-weight: 600;
}

.badge-rejected {
    background-color: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
    padding: 0.4em 0.8em;
    border-radius: 20px;
    font-weight: 600;
}

/* Table Styling */
.table-custom {
    background-color: var(--surface-white);
    border-radius: 8px;
    overflow: hidden;
}

.table-custom th {
    background-color: #F1F5F9;
    color: var(--text-dark);
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

/* Custom Form Controls */
.form-control:focus, .form-select:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}

/* Footer Styling */
.footer-custom {
    background-color: var(--surface-white);
    border-top: 1px solid var(--border-color);
}