@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Heebo', sans-serif;
    background: radial-gradient(ellipse at top, #161616 0%, #121212 40%, #0E0E0E 100%);
    background-attachment: fixed;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    transition: background 0.4s ease;
}

body.light {
    background: radial-gradient(ellipse at top, #FEFEFD 0%, #F6F1E9 40%, #EFE7D9 100%);
    background-attachment: fixed;
}

body.light .pro-card {
    background: linear-gradient(145deg, rgba(255,254,252,0.98) 0%, rgba(252,248,241,0.98) 100%);
    border: 1px solid rgba(197, 160, 89, 0.18);
}

body.light .pro-input {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(184, 146, 62, 0.22);
}

body.light header.pro-card {
    background: rgba(254, 252, 248, 0.97);
    border-bottom: 1px solid rgba(197, 160, 89, 0.18);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.05),
        0 4px 20px rgba(197, 160, 89, 0.1);
}

body:not(.light) .pro-card {
    background: #1E1E1E;
    border: 1px solid #2C2C2C;
}

body:not(.light) .pro-input {
    background: #1A1A1A;
    border-color: #2C2C2C;
    color: #E0E0E0;
}

body:not(.light) .text-luxury-slate {
    color: #E0E0E0 !important;
}

body:not(.light) .text-luxury-slateMedium {
    color: #A0A0A0 !important;
}

body:not(.light) .text-luxury-slateLight {
    color: #A0A0A0 !important;
}

.pro-card {
    background: linear-gradient(145deg, #F9F8F4 0%, #F6F5F0 100%);
    border: 1px solid rgba(197, 160, 89, 0.15);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.03),
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.05),
        0 8px 32px rgba(197, 160, 89, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.pro-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg, rgba(197, 160, 89, 0.1), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.pro-card:hover {
    background: linear-gradient(145deg, #FAF9F5 0%, #F7F6F1 100%);
    border-color: rgba(197, 160, 89, 0.25);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 16px 48px rgba(197, 160, 89, 0.1);
    transform: translateY(-1px);
}

.pro-card:hover::before {
    opacity: 1;
}

body:not(.light) .pro-card {
    background: #1E1E1E;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #2C2C2C;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.6),
        0 8px 28px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body:not(.light) .pro-card:hover {
    background: #252525;
    border-color: #383838;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.6),
        0 14px 36px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pro-input {
    background: linear-gradient(to bottom, #FFFFFF 0%, #FEFEFE 100%);
    border: 1.5px solid rgba(184, 146, 62, 0.18);
    transition: all 0.3s ease;
    color: #3A3A3A;
    font-variant-numeric: tabular-nums;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.02);
}

.pro-input:focus {
    outline: none;
    border-color: #B8923E;
    background: #FFFFFF;
    box-shadow:
        0 0 0 4px rgba(184, 146, 62, 0.12),
        0 2px 8px rgba(184, 146, 62, 0.08),
        inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

body:not(.light) .pro-input {
    background: rgba(30, 28, 26, 0.6);
    border: 1.5px solid rgba(184, 146, 62, 0.25);
    color: #E8E6E3;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

body:not(.light) .pro-input:focus {
    border-color: #B8923E;
    background: rgba(35, 33, 31, 0.7);
    box-shadow:
        0 0 0 4px rgba(184, 146, 62, 0.2),
        0 4px 12px rgba(184, 146, 62, 0.15),
        inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Luxury Button - Enhanced Depth */
.premium-btn {
    background: linear-gradient(145deg, #B8923E 0%, #9A7A2F 100%);
    color: #FFFFFF;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow:
        0 2px 4px rgba(184, 146, 62, 0.2),
        0 4px 12px rgba(184, 146, 62, 0.25),
        0 8px 24px rgba(184, 146, 62, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.premium-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.premium-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 8px rgba(184, 146, 62, 0.25),
        0 8px 20px rgba(184, 146, 62, 0.3),
        0 16px 40px rgba(184, 146, 62, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.premium-btn:hover::before {
    opacity: 1;
}

.premium-btn:active {
    transform: translateY(0);
    box-shadow:
        0 1px 2px rgba(184, 146, 62, 0.3),
        0 2px 8px rgba(184, 146, 62, 0.25),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.premium-btn-outline {
    background: transparent;
    border: 2px solid #B8923E;
    color: #B8923E;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow:
        0 2px 8px rgba(184, 146, 62, 0.1),
        inset 0 0 0 rgba(184, 146, 62, 0);
}

.premium-btn-outline:hover {
    background: rgba(184, 146, 62, 0.1);
    border-color: #D4B376;
    color: #9A7A2F;
    box-shadow:
        0 4px 12px rgba(184, 146, 62, 0.15),
        inset 0 1px 0 rgba(184, 146, 62, 0.1);
}

body:not(.light) .premium-btn {
    box-shadow:
        0 4px 12px rgba(184, 146, 62, 0.4),
        0 8px 24px rgba(184, 146, 62, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body:not(.light) .premium-btn:hover {
    box-shadow:
        0 8px 20px rgba(184, 146, 62, 0.5),
        0 16px 40px rgba(184, 146, 62, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Category transition */
.category-transition {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
}
.category-transition.open {
    max-height: 5000px;
    opacity: 1;
}

/* Toast - Single global notification */
.toast {
    position: fixed;
    /* Desktop: top-center, just below the sticky header (118px) */
    top: 130px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(248, 247, 242, 0.97);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    color: #3A3A3A;
    padding: 14px 28px;
    border-radius: 12px;
    z-index: 9999;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(184, 146, 62, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: slide-down-in 0.3s ease-out;
    font-weight: 500;
    border: 1px solid rgba(184, 146, 62, 0.18);
    white-space: nowrap;
}

body:not(.light) .toast {
    background: rgba(35, 33, 31, 0.97);
    color: #E8E6E3;
    border-color: rgba(184, 146, 62, 0.3);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 16px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(184, 146, 62, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Desktop: slides down from behind the header */
@keyframes slide-down-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Mobile: move to bottom-center so it clears the header and search bar */
@media (max-width: 768px) {
    .toast {
        top: auto;
        bottom: 24px;
        animation: slide-up 0.3s ease-out;
        white-space: normal;
        max-width: calc(100vw - 48px);
        text-align: center;
    }
}

@keyframes slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Scrollbar - Enhanced */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: rgba(184, 146, 62, 0.05);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #B8923E 0%, #9A7A2F 100%);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 2px 4px rgba(184, 146, 62, 0.3);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #D4B376 0%, #B8923E 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 8px rgba(184, 146, 62, 0.4);
}

body:not(.light) ::-webkit-scrollbar-thumb {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 4px 8px rgba(184, 146, 62, 0.5);
}

body:not(.light) ::-webkit-scrollbar-thumb:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 6px 12px rgba(184, 146, 62, 0.6);
}

/* Save Indicator - Enhanced */
.save-indicator {
    position: fixed;
    top: 90px;
    right: 20px;
    padding: 10px 20px;
    background: linear-gradient(145deg, #5A8A5D 0%, #4A7A4D 100%);
    color: white;
    border-radius: 10px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow:
        0 2px 8px rgba(90, 138, 93, 0.3),
        0 4px 16px rgba(90, 138, 93, 0.25),
        0 8px 24px rgba(90, 138, 93, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    z-index: 999;
    font-weight: 600;
    border: 1px solid rgba(122, 160, 125, 0.3);
}

.save-indicator.show {
    opacity: 1;
    transform: translateX(0);
}

body:not(.light) .save-indicator {
    box-shadow:
        0 4px 12px rgba(90, 138, 93, 0.5),
        0 8px 24px rgba(90, 138, 93, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Lang Switch - Enhanced */
.lang-switch {
    position: relative;
    display: inline-flex;
    gap: 0;
    background: linear-gradient(to bottom, #FFFFFF 0%, #FEFEFE 100%);
    border-radius: 10px;
    padding: 4px;
    border: 1.5px solid rgba(184, 146, 62, 0.18);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.04);
}

body:not(.light) .lang-switch {
    background: rgba(30, 28, 26, 0.6);
    border: 1.5px solid rgba(184, 146, 62, 0.25);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.lang-btn {
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    color: #7A7A7A;
    border: none;
    letter-spacing: 0.6px;
    min-height: 34px;
}

.lang-btn.active {
    background: linear-gradient(145deg, #B8923E 0%, #9A7A2F 100%);
    color: #FFFFFF;
    box-shadow:
        0 2px 4px rgba(184, 146, 62, 0.3),
        0 4px 12px rgba(184, 146, 62, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body:not(.light) .lang-btn {
    color: #9A9896;
}

body:not(.light) .lang-btn.active {
    color: #FFFFFF;
    box-shadow:
        0 4px 8px rgba(184, 146, 62, 0.4),
        0 8px 16px rgba(184, 146, 62, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Spinner */
.spinner {
    border: 3px solid rgba(197, 160, 89, 0.2);
    border-top-color: #C5A059;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Modal Enter */
.modal-enter {
    animation: slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Touch Targets — 44×44px Apple/Google minimum on all touch devices */
@media (max-width: 1024px) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Warning Pulse */
@keyframes warning-pulse {
    0%, 100% {
        background-color: rgba(200, 107, 107, 0.08);
        border-color: rgba(200, 107, 107, 0.25);
    }
    50% {
        background-color: rgba(200, 107, 107, 0.12);
        border-color: rgba(200, 107, 107, 0.35);
    }
}
.animate-warning-pulse {
    animation: warning-pulse 2s infinite;
}

/* Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    font-variant-numeric: tabular-nums;
}

/* Number styling */
.number {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* Champagne accent */
.gold-accent {
    color: #C5A059;
}

/* Divider */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.15), transparent);
}

body:not(.light) .divider {
    background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.25), transparent);
}

/* MODAL FIX: Remove ALL backdrop-filter from modals – prevents stacking context conflicts */
#add-category-modal,
#edit-budget-modal,
#commitment-modal,
#payment-modal,
#confirm-modal,
#loading-modal,
#contact-modal {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Backdrop overlay divs – no blur, no stacking context, no pointer-event capture over the card */
#add-category-modal > div:first-child,
#edit-budget-modal > div:first-child,
#commitment-modal > div:first-child,
#payment-modal > div:first-child,
#confirm-modal > div:first-child,
#loading-modal > div:first-child,
#contact-modal > div:first-child {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 0 !important;
}

/* Ensure modal cards always sit above their backdrops */
#add-category-modal > .pro-card,
#edit-budget-modal > .pro-card,
#commitment-modal > .pro-card,
#payment-modal > .pro-card,
#confirm-modal > .pro-card,
#loading-modal > .pro-card,
#contact-modal > .pro-card,
#add-category-modal > div:not(:first-child),
#edit-budget-modal > div:not(:first-child),
#commitment-modal > div:not(:first-child),
#payment-modal > div:not(:first-child),
#confirm-modal > div:not(:first-child),
#loading-modal > div:not(:first-child),
#contact-modal > div:not(:first-child) {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

#add-category-modal .pro-card,
#edit-budget-modal .pro-card,
#commitment-modal .pro-card,
#payment-modal .pro-card,
#contact-modal .pro-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Enhanced Header - NO BLUR (Fixed for clicks) */
header.pro-card {
    background: #F8F7F2;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 8px 24px rgba(184, 146, 62, 0.08);
}

body:not(.light) header.pro-card {
    background: #1A1A1A;
    border-bottom: 1px solid #2C2C2C;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.4);
}

#add-category-modal .pro-card,
#edit-budget-modal .pro-card,
#commitment-modal .pro-card,
#payment-modal .pro-card,
#contact-modal .pro-card {
    background: #FDFCFB !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 16px 64px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(184, 146, 62, 0.2) !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 999 !important;
}

body:not(.light) #add-category-modal .pro-card,
body:not(.light) #edit-budget-modal .pro-card,
body:not(.light) #commitment-modal .pro-card,
body:not(.light) #payment-modal .pro-card,
body:not(.light) #contact-modal .pro-card {
    background: #1E1E1E !important;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.7),
        0 32px 96px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(184, 146, 62, 0.4) !important;
}

.header-logo {
    max-height: 86px;
    width: auto;
    display: block;
    pointer-events: none;
    flex-shrink: 0;
    align-self: center;
}

body:not(.light) .header-logo {
    filter: none !important;
    background-color: #ffffff !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    display: block;
}

/* Chart: override overflow-hidden at every ancestor level */
section:has(#budgetChart),
section:has(#budgetChart) > .relative,
section:has(#budgetChart) > .relative > .flex {
    overflow: visible !important;
}
.chart-wrap {
    overflow: visible !important;
    padding: 16px;
    margin: -16px;
    box-sizing: content-box !important;
}

/* Contact modal – dedicated close button (avoids .pro-card stacking-context conflict) */
.contact-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    color: #777;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.contact-modal-close:hover {
    color: #B85555;
    background: rgba(184, 85, 85, 0.1);
}

body:not(.light) .contact-modal-close {
    color: #9A9896;
}

body:not(.light) .contact-modal-close:hover {
    color: #C87575;
    background: rgba(184, 85, 85, 0.15);
}

/* Contact form – send button loading/disabled state */
#send-contact-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Contact form – email input direction fix (LTR for email addresses) */
#contact-email {
    direction: ltr;
    text-align: left;
}

/* ===== PRINT / PDF STYLES ===== */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .no-print { display: none !important; }

    body, body.light, body:not(.light) {
        background: #ffffff !important;
        color: #1a1a1a !important;
    }

    /* All cards: white background, subtle border */
    .pro-card,
    body:not(.light) .pro-card,
    body.light .pro-card {
        background: #ffffff !important;
        border: 1px solid #ddd8cc !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Force all text dark */
    body:not(.light) .text-luxury-slate { color: #1a1a1a !important; }
    body:not(.light) .text-luxury-slateMedium { color: #4a4a4a !important; }
    body:not(.light) .text-luxury-slateLight { color: #666666 !important; }
    body:not(.light) input { color: #1a1a1a !important; }
    input { color: #1a1a1a !important; background: transparent !important; }

    /* Header: center logo, no shadow */
    header {
        position: static !important;
        box-shadow: none !important;
        border-bottom: 1px solid #ddd8cc !important;
        text-align: center !important;
    }
    header > div { justify-content: center !important; }
    .header-logo { display: block !important; margin: 0 auto !important; }

    /* Inputs look like plain text */
    .pro-input {
        border: none !important;
        border-bottom: 1px solid #e0d8cc !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Remove sticky so search/nav don't ghost-print */
    .sticky { position: static !important; }

    /* Chart: always visible */
    canvas { display: block !important; }
    .chart-wrap { overflow: visible !important; }

    /* Expand all category sections for print */
    .category-transition {
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
    }

    /* No hover transforms */
    .pro-card:hover { transform: none !important; box-shadow: none !important; }

    /* Page-break rules */
    section { page-break-inside: avoid; break-inside: avoid; }
    #categories-list > div { page-break-inside: avoid; break-inside: avoid; }

    /* Modals and overlays hidden */
    #add-category-modal,
    #edit-budget-modal,
    #commitment-modal,
    #payment-modal,
    #contact-modal,
    #confirm-modal,
    #loading-modal,
    #save-indicator { display: none !important; }

    /* Footer: minimal */
    footer { padding-bottom: 8px !important; }
    .divider { border-color: #e0d8cc !important; }
}

/* ── Add Category modal close button: always top-right ─────────────────────── */
#add-category-close-btn {
    top: 15px;
    right: 15px;
    left: auto;
}

/* ── Icon Picker ─────────────────────────────────────────────────────────── */

/* Toggle button that reveals/hides the icon grid */
.icon-picker-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid rgba(184, 146, 62, 0.28);
    background: transparent;
    cursor: pointer;
    color: #B8923E;
    font-family: inherit;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.icon-picker-toggle-btn:hover {
    border-color: #B8923E;
    background: rgba(184, 146, 62, 0.07);
}

body:not(.light) .icon-picker-toggle-btn {
    border-color: rgba(212, 179, 118, 0.3);
    color: #D4B376;
}

body:not(.light) .icon-picker-toggle-btn:hover {
    border-color: #D4B376;
    background: rgba(184, 146, 62, 0.12);
}
.icon-picker-group-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #B8923E;
    margin-top: 10px;
    margin-bottom: 5px;
}
.icon-picker-group-label:first-child {
    margin-top: 0;
}

.icon-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    background: transparent;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
    flex-shrink: 0;
    padding: 0;
}

.icon-btn:hover {
    background: rgba(184, 146, 62, 0.12);
    border-color: rgba(184, 146, 62, 0.35);
    transform: scale(1.15);
}

.icon-btn.selected {
    background: rgba(184, 146, 62, 0.18);
    border-color: #B8923E;
    box-shadow: 0 0 0 3px rgba(184, 146, 62, 0.22);
    transform: scale(1.12);
}

/* Dark mode overrides */
body:not(.light) .icon-btn:hover {
    background: rgba(184, 146, 62, 0.18);
    border-color: rgba(212, 179, 118, 0.45);
}

body:not(.light) .icon-btn.selected {
    background: rgba(184, 146, 62, 0.25);
    border-color: #D4B376;
    box-shadow: 0 0 0 3px rgba(184, 146, 62, 0.3);
}

/* ── Sticky Header + Search Bar Alignment ─────────────────────────────────── */

/* Raise header above all modals and overlays */
header.pro-card {
    z-index: 1000;
}

/* Search bar must stick below the header, not behind it.
   Desktop header height = py-4 (32px) + logo max-height (86px) = 118px.
   Tailwind's top-24 (96px) is less than 118px → overlaps the header.
   Override to 118px so it always clears the header cleanly. */
main > .no-print.sticky {
    top: 118px;
    z-index: 999;
}

/* ── Mobile Optimizations ──────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Logo: smaller on mobile so the header stays compact */
    .header-logo {
        max-height: 52px;
    }

    /* Dark-mode backplate: subtler padding — still visible, not bulky */
    body:not(.light) .header-logo {
        padding: 6px 10px !important;
        border-radius: 6px !important;
    }

    /* Header inner div: tighter vertical padding on mobile
       New header height: 52px logo + 10px×2 padding = 72px */
    header.pro-card > div {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Search bar sticky offset: recalculated for the shorter mobile header */
    main > .no-print.sticky {
        top: 72px;
    }

    /* Budget number: prevent the large figure from wrapping on narrow screens */
    #budget-input {
        font-size: 2.5rem !important;
    }

    /* Stat boxes: 2-col grid on mobile leaves ~123px per card; scale numbers down */
    #total-quote,
    #total-paid {
        font-size: 1.5rem !important;
    }

    /* Chart donut: scale down from 256px so it doesn't dominate a small screen */
    .chart-wrap {
        width: 200px !important;
        height: 200px !important;
    }

    /* Center value inside the donut: scale proportionally */
    #chart-center-val {
        font-size: 1.75rem !important;
    }
}

/* Extra-small screens (phones ≤ 480px / 320px) */
@media (max-width: 480px) {

    /* Budget input: further reduce for very narrow viewports */
    #budget-input {
        font-size: 1.875rem !important;
    }

    /* Chart: tighten further for 320px devices */
    .chart-wrap {
        width: 176px !important;
        height: 176px !important;
    }

    #chart-center-val {
        font-size: 1.375rem !important;
    }
}

/* ── Contact Modal: Sizing, Scroll & Z-Index ───────────────────────────────── */

/* Container: must sit above the sticky header (z: 1000) and all other layers */
#contact-modal {
    z-index: 2000 !important;
}

/* Backdrop: sits at the bottom of the modal stack, covers the page behind it */
#contact-modal > div:first-child {
    z-index: 0 !important;
}

/* Card: flex column so the close button stays fixed while inner content scrolls.
   overflow: hidden preserves the rounded corners without clipping the close btn
   (close btn is absolute, so it paints above the overflow boundary). */
#contact-modal .pro-card {
    max-width: 500px !important;
    width: 100% !important;
    max-height: 80vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.28),
        0 8px 24px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(184, 146, 62, 0.28) !important;
}

/* Inner content: fills remaining card height and scrolls when content is tall */
#contact-modal .pro-card > div:first-child {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0; /* required: lets a flex child shrink below its content size */
}

/* Close button: absolutely placed above the scroll area, always visible */
#contact-modal .contact-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 30 !important;
    flex-shrink: 0;
}

/* Mobile: slightly wider allowance and taller max-height */
@media (max-width: 768px) {
    #contact-modal .pro-card {
        max-width: 90vw !important;
        max-height: 85vh !important;
    }
}