/* KolamFlow final UI layer.
   Loaded after app.css through render_pwa_head(), so this wins over older
   page-specific CSS without changing working PHP flows. */

@media (min-width: 921px) {
    html body:has(.app-nav.admin-nav):not(.super-admin-page),
    html body:has(.app-nav.admin-nav):not(:has(.super-shell)),
    html body:has(.app-nav.super-nav),
    html body.super-admin-page {
        --sidebar-w: 176px !important;
        --app-nav-w: 176px !important;
    }

    html body:has(.app-nav.admin-nav) .app-nav.admin-nav,
    html body:has(.app-nav.super-nav) .app-nav.super-nav {
        width: 176px !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, .84) !important;
        border-right: 1px solid rgba(91, 168, 214, .14) !important;
        box-shadow: 10px 0 34px rgba(15, 23, 42, .045) !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-brand,
    html body:has(.app-nav.super-nav) .sidebar-brand {
        min-height: 74px !important;
        padding: 18px 12px 14px !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-brand-logo,
    html body:has(.app-nav.super-nav) .sidebar-brand-logo {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
        font-size: 15px !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-brand-text,
    html body:has(.app-nav.super-nav) .sidebar-brand-text {
        font-size: 15px !important;
        line-height: 1.1 !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-scroll,
    html body:has(.app-nav.super-nav) .sidebar-scroll {
        gap: 3px !important;
        padding: 14px 10px 70px !important;
    }

    html body:has(.app-nav.admin-nav) .nav-group-label,
    html body:has(.app-nav.super-nav) .nav-group-label {
        margin: 14px 12px 5px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        letter-spacing: .1em !important;
    }

    html body:has(.app-nav.admin-nav) .app-nav.admin-nav .sidebar-scroll > a,
    html body:has(.app-nav.super-nav) .app-nav.super-nav .sidebar-scroll > a {
        min-height: 38px !important;
        padding: 9px 10px 9px 36px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
    }

    html body:has(.app-nav.admin-nav) .app-nav.admin-nav .sidebar-scroll > a::before,
    html body:has(.app-nav.super-nav) .app-nav.super-nav .sidebar-scroll > a::before {
        left: 12px !important;
        width: 17px !important;
        height: 17px !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-language-switcher,
    html body:has(.app-nav.super-nav) .sidebar-language-switcher {
        width: calc(100% - 20px) !important;
        margin: 10px 10px 12px !important;
        padding: 4px !important;
        display: grid !important;
        grid-template-columns: auto 1fr 1fr !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    html body:has(.app-nav.admin-nav) .sidebar-language-switcher a,
    html body:has(.app-nav.super-nav) .sidebar-language-switcher a {
        min-height: 26px !important;
        padding: 5px 6px !important;
        font-size: 10px !important;
        justify-content: center !important;
    }

    html body:has(.app-nav.admin-nav) .language-switcher a::before,
    html body:has(.app-nav.admin-nav) .language-switcher a::after,
    html body:has(.app-nav.super-nav) .language-switcher a::before,
    html body:has(.app-nav.super-nav) .language-switcher a::after {
        display: none !important;
        content: none !important;
    }

    html body:has(.app-nav.admin-nav) .shell,
    html body:has(.app-nav.admin-nav) .timbang-shell,
    html body:has(.app-nav.admin-nav) .crm-shell,
    html body:has(.app-nav.admin-nav) .settings-shell,
    html body:has(.app-nav.super-nav) .shell,
    html body:has(.app-nav.super-nav) .super-shell {
        width: min(calc(100vw - 228px), 1120px) !important;
        margin-left: 202px !important;
        margin-right: 26px !important;
    }

    html body:has(.app-nav.admin-nav) .event-context-bar,
    html body:has(.app-nav.super-nav) .event-context-bar {
        left: 202px !important;
        right: 26px !important;
    }

    html body.login-page,
    html body.landing-page,
    html body.business-register-page,
    html body.public-page,
    html body.participant-public-page,
    html body.participant-ticket-page {
        --sidebar-w: 0px !important;
        --app-nav-w: 0px !important;
    }

    html body.login-page .shell,
    html body.landing-page .shell,
    html body.business-register-page .shell,
    html body.public-page .shell,
    html body.participant-public-page .shell,
    html body.participant-ticket-page .shell {
        width: min(100% - 48px, 1120px) !important;
        max-width: 1120px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 520px) {
    html body.login-page .login-shell,
    html body.landing-page .shell,
    html body.business-register-page .shell,
    html body.public-page .shell,
    html body.participant-public-page .shell,
    html body.participant-ticket-page .shell,
    html body.super-admin-page .super-shell,
    html body:has(.app-nav.admin-nav) .shell,
    html body:has(.app-nav.admin-nav) .timbang-shell,
    html body:has(.app-nav.admin-nav) .crm-shell,
    html body:has(.app-nav.admin-nav) .settings-shell {
        width: min(100% - 20px, 520px) !important;
    }

    html body.login-page .login-topbar,
    html body.landing-page .landing-topbar {
        margin-top: 0 !important;
        padding: 8px !important;
        border-radius: 18px !important;
        gap: 6px !important;
    }

    html body.login-page .login-brand span,
    html body.landing-page .landing-brand span {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }

    html body.login-page .login-brand strong,
    html body.landing-page .landing-brand strong {
        font-size: 14px !important;
    }

    html body.login-page .login-hero-panel,
    html body.login-page .compact-card,
    html body.super-admin-page .super-hero,
    html body.super-admin-page .panel,
    html body:has(.app-nav.admin-nav) .panel,
    html body:has(.app-nav.admin-nav) .leader-panel,
    html body:has(.app-nav.admin-nav) .page-hero {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    html body.login-page .login-hero-panel h1,
    html body.landing-page .landing-hero h1,
    html body.business-register-page h1,
    html body.super-admin-page .super-hero h1,
    html body.super-admin-page .panel h1,
    html body:has(.app-nav.admin-nav) .panel h1,
    html body:has(.app-nav.admin-nav) .page-hero h1,
    html body:has(.app-nav.admin-nav) .leader-panel h1 {
        font-size: clamp(24px, 7vw, 30px) !important;
        line-height: 1.08 !important;
    }

    html body.login-page .login-hero-panel .hint,
    html body.super-admin-page .super-hero .hint,
    html body.super-admin-page .panel p,
    html body:has(.app-nav.admin-nav) .panel p,
    html body:has(.app-nav.admin-nav) .hint {
        font-size: 12.5px !important;
        line-height: 1.42 !important;
    }

    html body.login-page input,
    html body.login-page button,
    html body.login-page .password-toggle,
    html body:has(.app-nav.admin-nav) input,
    html body:has(.app-nav.admin-nav) select,
    html body:has(.app-nav.admin-nav) textarea {
        min-height: 44px !important;
    }
}

/* Participant QR: keep the final ticket content visible above the fixed
   bottom nav and mobile browser controls. */
html body.participant-ticket-page {
    min-height: 100dvh !important;
    overflow-x: hidden !important;
}

html body.participant-ticket-page .public-participant-flow {
    max-width: 760px !important;
}

html body.participant-ticket-page .participant-event-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 10px 0 14px !important;
}

html body.participant-ticket-page .participant-event-meta span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(91, 168, 214, .2) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(224, 246, 255, .8), rgba(223, 249, 233, .78)) !important;
    color: #24445a !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
}

html body.participant-ticket-page .qr-fullsize-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 30px !important;
    margin: 8px auto 0 !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(91, 168, 214, .20) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .72) !important;
    color: #315674 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

html body.participant-ticket-page .participant-actions .participant-copy-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-height: 34px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(91, 168, 214, .22) !important;
    background: linear-gradient(135deg, rgba(224, 246, 255, .84), rgba(223, 249, 233, .82)) !important;
    color: #24516c !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}

html body.participant-ticket-page .participant-actions .participant-copy-link strong {
    font: inherit !important;
    color: inherit !important;
}

html body.participant-ticket-page .participant-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 18px !important;
    padding: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
    transform: none !important;
}

html body.participant-ticket-page .participant-actions a,
html body.participant-ticket-page .participant-actions .participant-copy-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(91, 168, 214, .20) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(224, 246, 255, .78), rgba(223, 249, 233, .72)) !important;
    color: #24516c !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
    text-decoration: none !important;
}

@media (max-width: 720px) {
    html body.participant-ticket-page .public-participant-flow {
        width: min(100% - 18px, 460px) !important;
        padding-top: calc(var(--safe-top, 0px) + 8px) !important;
        padding-bottom: calc(var(--safe-bottom, 0px) + 190px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html body.participant-ticket-page .shell-language-switcher {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 2 !important;
        width: fit-content !important;
        margin: 0 0 8px auto !important;
        transform: none !important;
        box-shadow: 0 10px 24px rgba(28, 40, 56, .08) !important;
    }

    html body.participant-ticket-page .participant-ticket {
        margin-bottom: 34px !important;
        padding-bottom: 24px !important;
    }

    html body.participant-ticket-page .participant-event-meta {
        margin: 8px 0 12px !important;
    }

    html body.participant-ticket-page .participant-event-meta span {
        min-height: 26px !important;
        padding: 6px 9px !important;
        font-size: 10.5px !important;
    }

    html body.participant-ticket-page .qr-fullsize-link {
        min-height: 28px !important;
        padding: 7px 10px !important;
        font-size: 10.5px !important;
    }

    html body.participant-ticket-page .participant-actions .participant-copy-link {
        width: 100% !important;
        min-height: 40px !important;
        padding: 8px 9px !important;
        font-size: 11px !important;
    }

    html body.participant-ticket-page .participant-proof-strip {
        margin-bottom: 28px !important;
    }

    html body.participant-ticket-page .participant-proof-strip .secondary-btn {
        width: 100% !important;
        min-height: 42px !important;
    }

    html body.participant-ticket-page .app-nav.public-nav {
        bottom: calc(10px + var(--safe-bottom, 0px)) !important;
        z-index: 80 !important;
    }
}

/* Public participant bottom nav v213: compact, readable, and safely above
   mobile browser controls without feeling like a second card. */
@media (max-width: 720px) {
    html body:has(.app-nav.public-nav) {
        --bottom-nav-h: 64px !important;
    }

    html body:has(.app-nav.public-nav) .shell,
    html body:has(.app-nav.public-nav) .public-participant-flow,
    html body:has(.app-nav.public-nav) .public-leaderboard-flow {
        padding-bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-bottom, 0px) + 34px) !important;
    }

    html body:has(.app-nav.public-nav) .app-nav.public-nav,
    html body:has(.public-participant-flow) .app-nav.public-event-nav {
        position: fixed !important;
        top: auto !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        right: max(10px, env(safe-area-inset-right)) !important;
        bottom: calc(12px + var(--safe-bottom, 0px)) !important;
        width: auto !important;
        height: var(--bottom-nav-h, 64px) !important;
        min-height: var(--bottom-nav-h, 64px) !important;
        padding: 6px !important;
        border: 1px solid rgba(91, 168, 214, .20) !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, .92) !important;
        box-shadow: 0 12px 34px rgba(15, 31, 58, .14) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
        backdrop-filter: blur(24px) saturate(1.16) !important;
        overflow: hidden !important;
        z-index: 1200 !important;
        transform: translateZ(0) !important;
    }

    html body:has(.app-nav.public-nav) .app-nav.public-nav .sidebar-scroll,
    html body:has(.public-participant-flow) .app-nav.public-event-nav .sidebar-scroll {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body:has(.app-nav.public-nav) .app-nav.public-nav .sidebar-brand,
    html body:has(.app-nav.public-nav) .app-nav.public-nav .nav-group-label,
    html body:has(.app-nav.public-nav) .app-nav.public-nav .sidebar-toggle,
    html body:has(.app-nav.public-nav) .app-nav.public-nav::before,
    html body:has(.app-nav.public-nav) .app-nav.public-nav::after,
    html body:has(.public-participant-flow) .app-nav.public-event-nav a:not(.mobile-primary) {
        display: none !important;
    }

    html body:has(.app-nav.public-nav) .app-nav.public-nav a.mobile-primary,
    html body:has(.public-participant-flow) .app-nav.public-event-nav a.mobile-primary {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 31px 2px 7px !important;
        border: 0 !important;
        border-radius: 17px !important;
        background: transparent !important;
        color: #5f6f84 !important;
        box-shadow: none !important;
        font-size: 9px !important;
        font-weight: 850 !important;
        letter-spacing: 0 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body:has(.app-nav.public-nav) .app-nav.public-nav a.mobile-primary::before,
    html body:has(.public-participant-flow) .app-nav.public-event-nav a.mobile-primary::before {
        top: 8px !important;
        left: 50% !important;
        width: 18px !important;
        height: 18px !important;
        transform: translateX(-50%) !important;
        opacity: .82 !important;
    }

    html body:has(.app-nav.public-nav) .app-nav.public-nav a.mobile-primary.active,
    html body:has(.app-nav.public-nav) .app-nav.public-nav a.mobile-primary[aria-current="page"],
    html body:has(.public-participant-flow) .app-nav.public-event-nav a.mobile-primary.active,
    html body:has(.public-participant-flow) .app-nav.public-event-nav a.mobile-primary[aria-current="page"] {
        color: #174f68 !important;
        background: linear-gradient(135deg, rgba(222, 244, 255, .94), rgba(224, 249, 235, .92)) !important;
        box-shadow: inset 0 0 0 1px rgba(91, 168, 214, .22) !important;
    }
}