/* Keep small cyan labels legible on light PWA surfaces. */
html[data-theme="light"] body.pwa-security.theme-light {
    background:
        radial-gradient(ellipse at 8% 4%, rgba(100, 116, 139, 0.10), transparent 34%),
        linear-gradient(155deg, #f8fafc 0%, #edf2f7 62%, #f1f5f9 100%) !important;
}

html[data-theme="light"] body.pwa-security.theme-light .pwa-shell::before {
    background:
        radial-gradient(ellipse at 8% 4%, rgba(148, 163, 184, 0.12), transparent 34%),
        radial-gradient(ellipse at 92% 96%, rgba(34, 211, 238, 0.06), transparent 38%);
}

html[data-theme="light"] body.pwa-security.theme-light #app:has(#login-form) h1 {
    color: #0f172a !important;
    text-shadow: none;
    background-color: transparent !important;
}

html[data-theme="light"] body.pwa-security.theme-light #app:has(#login-form) h1 + p {
    color: #475569 !important;
}

html[data-theme="light"] body.pwa-security.theme-light #app > div:has(#login-form) {
    background-color: #eef2f7 !important;
    color: #0f172a !important;
}

html[data-theme="light"] body.pwa-security.theme-light #app > div:has(#login-form) > .bg-gradient-to-br {
    background-image: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

html[data-theme="light"] body.pwa-security.theme-light #app:has(#login-form) .animate-blob {
    opacity: 0.1 !important;
    mix-blend-mode: multiply;
}

html[data-theme="light"] body.pwa-security.theme-light #app #login-form label {
    color: #334155 !important;
}

html[data-theme="light"] body.pwa-security.theme-light #app:has(#login-form) [class~="bg-cyan-950/80"] {
    background-color: #cffafe !important;
    border-color: #0891b2 !important;
    color: #155e75 !important;
}

/* Compatibility for the currently deployed login markup, which lacks pwa-security and semantic classes. */
html[data-theme="light"] body.theme-light #app:has(#login-form) > div {
    background-color: #eef2f7 !important;
    color: #0f172a !important;
}

html[data-theme="light"] body.theme-light #app:has(#login-form) > div > .bg-gradient-to-br {
    background-image: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

html[data-theme="light"] body.theme-light #app:has(#login-form) h1 {
    color: #0f172a !important;
    text-shadow: none !important;
}

html[data-theme="light"] body.theme-light #app:has(#login-form) h1 + p,
html[data-theme="light"] body.theme-light #app:has(#login-form) label {
    color: #334155 !important;
}

html[data-theme="light"] body.theme-light #app:has(#login-form) div:has(> #login-form) {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] body.theme-light #app:has(#login-form) input {
    background-color: #fff !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

html[data-theme="light"] body.theme-light #app:has(#login-form) input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

html[data-theme="light"] body.theme-light #app:has(#login-form) [class~="bg-cyan-950/80"] {
    background-color: #cffafe !important;
    border-color: #0891b2 !important;
    color: #155e75 !important;
}

body.pwa-security #app {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

html[data-theme="light"] body.pwa-security .text-cyan-300,
html[data-theme="light"] body.pwa-security .text-cyan-200 {
    color: #155e75 !important;
}

/* Keep the dashboard hero coherent if cached markup and the active theme briefly disagree. */
html[data-theme="light"] body.pwa-security #app main > section:first-child {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%) !important;
    border-color: #bae6fd !important;
}

html[data-theme="light"] body.pwa-security #app main > section:first-child > p,
html[data-theme="light"] body.pwa-security #app main > section:first-child > h2 {
    color: #0f172a !important;
}

html[data-theme="light"] body.pwa-security #app main > section:first-child > p:first-child {
    color: #0e7490 !important;
}

html[data-theme="dark"] body.pwa-security #app main > section:first-child > p,
html[data-theme="dark"] body.pwa-security #app main > section:first-child > h2 {
    color: #f8fafc !important;
}

html[data-theme="dark"] body.pwa-security #app main > section:first-child > p:first-child {
    color: #cffafe !important;
}

/* Native disabled selects dim their text as well as their surface. Preserve the value. */
html[data-theme="dark"] body.pwa-security #punto:disabled {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9;
    opacity: 1 !important;
}

html[data-theme="light"] body.pwa-security #punto:disabled {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a;
    opacity: 1 !important;
}

/* Keep selected native option text visible even when global theme rules conflict. */
html[data-theme="dark"] body.pwa-security.theme-dark #app select,
html[data-theme="dark"] body.pwa-security.theme-dark #app select option {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    color-scheme: dark;
}

html[data-theme="dark"] body.pwa-security.theme-dark #app select:disabled {
    background-color: #334155 !important;
    border-color: #64748b !important;
    opacity: 1 !important;
}

html[data-theme="light"] body.pwa-security.theme-light #app select,
html[data-theme="light"] body.pwa-security.theme-light #app select option {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    color-scheme: light;
}

html[data-theme="light"] body.pwa-security.theme-light #app select:disabled {
    background-color: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body.pwa-security #app #parking-assign:disabled {
    background-color: #334155 !important;
    border-color: #64748b !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    opacity: 1 !important;
}

html[data-theme="light"] body.pwa-security #app #parking-assign:disabled {
    background-color: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body.pwa-security #app #ronda-scan-form button:disabled {
    background-color: #334155 !important;
    border: 1px solid #64748b !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    opacity: 1 !important;
}

html[data-theme="light"] body.pwa-security #app #ronda-scan-form button:disabled {
    background-color: #e2e8f0 !important;
    border: 1px solid #94a3b8 !important;
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
    opacity: 1 !important;
}