/* Force light color scheme – prevents dark canvas when OS is in dark mode */
html {
    color-scheme: light;
    background-color: transparent;
}

body {
    background-color: #FAFAFA;
}

/* Mobile menu - prevent page scroll when open (Alpine x-effect backup) */
body.mobile-menu-open {
    overflow: hidden;
}

/* Mobile menu - prevent horizontal scroll, responsive height with vh/dvh support */
#mobile-nav-menu {
    height: 80vh;
    height: 80dvh;
    max-height: 80vh;
    max-height: 80dvh;
}

@media (max-height: 620px) {
    #mobile-nav-menu {
        height: 95vh;
        height: 95dvh;
        max-height: 95vh;
        max-height: 95dvh;
    }
}

/* Mobile menu - social icons: responsive, always 5 per row, scale with viewport */
#mobile-nav-menu .mobile-social-icon {
    max-width: 47px;
    margin: 0 auto;
}

/* Header - sticky at top */
#app-header {
    position: sticky;
    top: 0;
    box-shadow: 0 4px 8px 0 rgba(219, 225, 245, 0.25);
}

/* Header - Figma design overrides */
#app-header .header-desktop {
    min-height: 56px;
}

/* Small laptop (1250px–1300px): reduce nav and button sizes for header only */
/*
@media (min-width: 1250px) and (max-width: 1422px) {
    #app-header .header-desktop {
        padding-left: 1rem;
        padding-right: 1rem;
        gap: 0.75rem;
    }

    #app-header .header-desktop > div:first-child {
        gap: 0.75rem;
    }

    #app-header .header-desktop > div:last-child {
        gap: 0.5rem;
    }

    #app-header .header-desktop nav {
        gap: 0.25rem;
    }

    #app-header .header-desktop nav button {
        padding: 0.375rem;
    }

    #app-header .header-desktop nav button svg {
        width: 1rem;
        height: 1rem;
    }

    #app-header .header-desktop .btn.btn-green,
    #app-header .header-desktop .btn.btn-primary {
        font-size: 12px;
        padding: 0.375rem 0.75rem;
    }

    #app-header .header-desktop .btn.btn-outline {
        font-size: 12px;
        padding: 0.375rem 0.75rem;
    }

    #app-header .header-desktop [data-name="icons wrapper"] a {
        padding: 0.375rem;
    }

    #app-header .header-desktop button[data-name="User Account Menu"] img {
        width: 2rem;
        height: 2rem;
    }

    #app-header .header-desktop .text-foreground.font-bold.text-sm {
        font-size: 12px;
    }
}
    */

/* Active nav link - gradient (accent to primary), used in mobile-main-menu & desktop */
.nav-link-active {
    background: linear-gradient(to right, #1aaa69, #0c5c38);
    color: white;
}

/* Mobile menu accordion row - ensure border-radius is fully visible, no text wrap */
#mobile-nav-menu .mobile-nav-accordion-row {
    overflow: visible;
}

/* Footer - Figma 44-302: dark grey #434343, green accent #1aaa69 */
#app-footer.footer {
    --footer-bg: #434343;
    --footer-accent: #1aaa69;
    --footer-accent-lift: 15%;
}

/* Reserve space above footer so green accent doesn't overlap content above */
#app-footer.footer {
    margin-top: 6vh;
    margin-top: 100px;
}

/* Green curved accent - Figma 44-304: ::after, between dark bg and content */
#app-footer.footer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: var(--footer-accent);
    border-radius: 145px 0 0 0;
    transform: translateY(calc(-1 * var(--footer-accent-lift)));
    pointer-events: none;
    z-index: 1;
    display: none;
}

@media (min-width: 1024px) {
    #app-footer.footer::after {
        border-radius: 161px 0 0 0;
    }
}

/* Dashboard pages - no green accent and no margin-top */
#app-footer.footer.footer--no-accent {
    margin-top: 0;
}

#app-footer.footer.footer--no-accent::after {
    display: none;
}

@media (min-width: 768px) {
    #app-footer.footer.footer--sidebar-visible {
        background: #fff;
    }
}

#app-footer .footer-main {
    position: relative;
    z-index: 2;
    overflow-x: hidden;
    background: var(--footer-bg);
    border-radius: 145px 0 0 0;
    padding-block: 3rem;
}

@media (min-width: 768px) {
    #app-footer .footer-main {
        border-radius: 145px 0 0 0;
        padding-top: 5rem;
        padding-bottom: 4rem;
        background: var(--footer-bg);
    }
}

@media (min-width: 1024px) {
    #app-footer .footer-main {
        border-radius: 161px 0 0 0;
        padding-top: 5rem;
        background: var(--footer-bg);
    }
}

/* Footer tablet: 3 rows - logo, columns, socials (Figma 44-359) */
#app-footer .footer-tablet {
    padding-bottom: 3rem;
    /* Fluid padding-left on entire container: 89px at 834px, scales with viewport */
    padding-left: clamp(60px, 10.67vw, 110px);
}

#app-footer .footer-tablet .footer-tablet-socials .grid,
#app-footer .footer-logo-social-wrap .grid,
#app-footer .footer-mobile .grid {
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
}

#app-footer .footer-col-logo {
    min-width: 0;
}

/* Desktop footer: fluid height (457px at 1512px, scales with viewport) */
@media (min-width: 1024px) {
    #app-footer .footer-main {
        display: flex;
        flex-direction: column;
        min-height: clamp(350px, 30.23vw, 457px);
        padding-block: 5rem;
    }

    #app-footer .footer-main > div {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    #app-footer .footer-grid {
        height: 100%;
        flex: 1;
        min-height: 0;
        align-items: stretch;
    }

    #app-footer .footer-grid .footer-col-logo > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    #app-footer .footer-grid .footer-cols-end {
        align-self: flex-start;
    }

    #app-footer .footer-grid .footer-logo-social-wrap {
        margin-top: auto;
    }
}

/* Footer cols: 650px max-width between 1023px and 1240px */
@media (min-width: 1023px) and (max-width: 1240px) {

    #app-footer .footer-tablet-cols,
    #app-footer .footer-grid .footer-cols-end {
        max-width: 650px;
    }
}

/* Desktop footer-grid: fluid padding-left (140px at 1512px, scales with viewport) */
#app-footer .footer-grid .footer-col-logo {
    padding-left: clamp(80px, 9.26vw, 180px);
}

/* Footer logo - invert for dark background */
#app-footer .footer-logo-invert {
    filter: brightness(0) invert(1);
}

#app-footer .footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

#app-footer .footer-social-icon {
    max-width: 32px;
    max-height: 32px;
    margin: 0 auto;
}

/* Notifications dropdown - category icon colors */
.notification-category-icon {
    border: 2px solid white;
}

.notification-category-message {
    background-color: #22c55e;
}

.notification-category-listing {
    background-color: #f97316;
}

.notification-category-payment {
    background-color: #3b82f6;
}

.notification-category-system,
.notification-category-general,
.notification-category-account {
    background-color: #8b5cf6;
}

/* Notification circle - read state (outlined) */
.notification-circle-read {
    background: transparent;
    border: 1px solid rgb(26 170 105);
    cursor: default;
}