/*
 * AI Birds shared platform theme.
 * Mirrors the Scanner / Converter visual system across dashboard, auth, and error pages.
 */

:root {
    --text: #0c1024 !important;
    --muted: #63708f !important;
    --muted-soft: #6b7692 !important;
    --soft: #f7f9ff !important;
    --panel: rgba(255, 255, 255, 0.86) !important;
    --border: rgba(73, 92, 143, 0.14) !important;
    --border-strong: rgba(37, 99, 235, 0.18) !important;
    --blue: #2563eb !important;
    --indigo: #4f46e5 !important;
    --purple: #7c3aed !important;
    --pink: #7c3aed !important;
    --cyan: #1d7cf2 !important;
    --shadow: 0 22px 60px rgba(39, 53, 97, 0.10) !important;
}

html {
    background: transparent !important;
}

body {
    color: var(--text) !important;
    background:
        radial-gradient(circle at 82% 8%, rgba(91, 141, 255, 0.16), transparent 28%),
        radial-gradient(circle at 95% 45%, rgba(124, 58, 237, 0.10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f8faff 44%, #f4f0ff 100%) !important;
    overflow-x: hidden;
}

body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background-image:
        linear-gradient(rgba(73, 92, 143, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 92, 143, 0.035) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    background-position: 0 0 !important;
}

body::after {
    content: none !important;
    background: none !important;
}

.page,
.app,
.main,
.dashboard-page,
.dashboard-shell,
.auth-shell,
.page-wrap,
main {
    background: transparent !important;
    background-image: none !important;
}

.topbar,
.sidebar,
.hero-card,
.side-card,
.card,
.table-card,
.panel,
.main-card,
.role-card,
.module-card,
.quick-card,
.summary .card,
.feature,
.brand-mark,
.user-pill,
.token-box,
.profile-box,
.info-box,
.method-card,
.session-item,
.passkey-item,
.qr-box,
.recovery,
.codes,
.notice,
.message,
.empty {
    background: rgba(255, 255, 255, 0.82) !important;
    background-image: none !important;
    border-color: rgba(73, 92, 143, 0.14) !important;
    box-shadow:
        0 14px 36px rgba(39, 53, 97, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(22px);
}

.hero,
.login-wrap .card,
.passkey-panel {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)),
        radial-gradient(circle at 90% 12%, rgba(37, 99, 235, 0.12), transparent 26%) !important;
    border-color: rgba(73, 92, 143, 0.14) !important;
    box-shadow: 0 22px 60px rgba(39, 53, 97, 0.10) !important;
}

.side-card,
.security-card,
.overview-card,
.status-card {
    color: #11162d !important;
}

.side-card h1,
.side-card h2,
.side-card h3,
.security-card h1,
.security-card h2,
.overview-card h1,
.overview-card h2,
.status-card h1,
.status-card h2 {
    color: #11162d !important;
}

.side-card p,
.security-card p,
.overview-card p,
.status-card p,
.lead,
.subtitle,
.description,
.note,
.foot,
.muted,
.title p,
.page-title p,
.table-head p,
.panel-head p,
.module-card p,
.card span,
.feature p,
.links,
.secondary,
.trust {
    color: #5b6783 !important;
}

.gradient,
.highlight,
.brand-name span {
    background: none !important;
    -webkit-background-clip: initial !important;
    color: #4338ca !important;
}

.btn:not(.ghost):not(.danger),
button.btn:not(.ghost):not(.danger),
.logout,
.passkey,
.copy-token-btn,
input[type="submit"] {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d7cf2 0%, #4f46e5 58%, #7c3aed 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.20) !important;
}

.btn:not(.ghost):not(.danger):hover,
button.btn:not(.ghost):not(.danger):hover,
.logout:hover,
.passkey:hover,
.copy-token-btn:hover {
    box-shadow: 0 16px 32px rgba(79, 70, 229, 0.24) !important;
}

.btn.ghost,
.secondary,
.links a,
.actions a.ghost {
    color: #30406b !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border-color: rgba(73, 92, 143, 0.14) !important;
    box-shadow: none !important;
}

.btn.danger,
button.danger {
    color: #ffffff !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 24px rgba(185, 28, 28, 0.16) !important;
}

.pill,
.chip,
.status,
.status-pill,
.future-pill,
.permission-pill,
.eyebrow,
.tab.active {
    color: #4338ca !important;
    background: #eef2ff !important;
    border-color: rgba(73, 92, 143, 0.14) !important;
    box-shadow: none !important;
}

.dot {
    background: #2563eb !important;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.45) !important;
}

.avatar,
.role-icon,
.feature-icon,
.icon {
    color: #4338ca !important;
    background: #eef2ff !important;
    border-color: rgba(79, 70, 229, 0.12) !important;
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.10) !important;
}

.avatar {
    color: #ffffff !important;
    background: linear-gradient(135deg, #1d7cf2 0%, #4f46e5 58%, #7c3aed 100%) !important;
}

input,
select,
textarea,
.field input,
.field select,
.field textarea,
.password-wrap input {
    color: #11162d !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(73, 92, 143, 0.16) !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.password-wrap input:focus {
    border-color: rgba(37, 99, 235, 0.34) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10) !important;
}

table td,
td,
.security-item,
.item,
.mini,
.detail-line,
.token-value,
.code,
.workflow-step {
    background: #fbfcff !important;
    border-color: rgba(73, 92, 143, 0.10) !important;
    color: #52607f !important;
}

th,
label,
.field label {
    color: #5b6783 !important;
}

a {
    color: #4338ca;
}

.error,
.error-box,
.errors {
    color: #991b1b !important;
    background: rgba(254, 242, 242, 0.88) !important;
    border-color: rgba(220, 38, 38, 0.18) !important;
}

.success,
.passkey-message.success {
    color: #166534 !important;
    background: rgba(240, 253, 244, 0.88) !important;
    border-color: rgba(22, 163, 74, 0.16) !important;
}