/* OnNoc — Sprint 4: light mode demo + polish */

html[data-theme="light"] {
    --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
}

html[data-theme="light"] .icarus-topbar {
    background: color-mix(in srgb, #ffffff 92%, transparent);
    border-bottom-color: var(--border);
}

html[data-theme="light"] .icarus-breadcrumb__page {
    color: #0f172a;
}

html[data-theme="light"] .page-hero,
html[data-theme="light"] .dash-hero {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: var(--shadow);
}

html[data-theme="light"] .page-hero__title,
html[data-theme="light"] .dash-hero__title,
html[data-theme="light"] .page-hero .page-title {
    color: #0f172a;
}

html[data-theme="light"] .filter-card {
    background: #ffffff;
    border-color: var(--border);
}

html[data-theme="light"] .proto-list-shell .proto-filter-bar {
    background: color-mix(in srgb, #ffffff 94%, transparent);
}

html[data-theme="light"] tbody tr:hover {
    background: var(--bg-hover);
}

html[data-theme="light"] #notifPanel,
html[data-theme="light"] .icarus-mobile-drawer-panel {
    background: #ffffff;
    border-color: var(--border);
    color: #0f172a;
}

html[data-theme="light"] .dash-hero__cta,
html[data-theme="light"] .page-hero__cta {
    color: #fff;
}

html[data-theme="light"] .map-stage {
    box-shadow: var(--shadow);
}

html[data-theme="light"] .map-side-card {
    background: #ffffff;
    border-color: var(--border);
}

html[data-theme="light"] .empty-state,
html[data-theme="light"] .dash-empty-state {
    background: color-mix(in srgb, var(--bg-hover) 80%, #fff);
    border-color: var(--border);
}

html[data-theme="light"] .empty-state__icon,
html[data-theme="light"] .dash-empty-state__icon {
    background: rgba(79, 124, 255, 0.1);
    border-color: rgba(79, 124, 255, 0.18);
    color: #4f7cff;
}

/* Demo comercial: preferência explícita (documentação operacional) */
html[data-theme="light"] body.app-shell {
    background: var(--bg-main);
    color: var(--text-primary);
}

/* Superfícies escuras hardcoded (Tailwind bracket) */
html[data-theme="light"] [class*="bg-[var(--bg-main)]"] {
    background-color: #ffffff !important;
}

/* Modais ds-modal — painel sólido (protocolos, hosts, mapa) */
html[data-theme="light"] .ds-modal__panel {
    background: #ffffff !important;
    border-color: var(--border) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="light"] .ds-modal__header,
html[data-theme="light"] .ds-modal__footer {
    border-color: var(--border) !important;
}

html[data-theme="light"] .ds-modal__title {
    color: #0f172a !important;
}

html[data-theme="light"] .ds-modal__subtitle {
    color: var(--text-secondary) !important;
}

/* Painel de notificações (topbar / hero) */
html[data-theme="light"] #notifPanel {
    box-shadow: var(--shadow) !important;
}

html[data-theme="light"] #notifPanel .notif-item {
    color: #0f172a !important;
    border-bottom-color: var(--border) !important;
}

html[data-theme="light"] #notifPanel .notif-item:hover {
    background: var(--bg-hover) !important;
}

html[data-theme="light"] #notifPanel .notif-item[class*="bg-blue"] {
    background: color-mix(in srgb, var(--blue) 8%, #ffffff) !important;
}

/* Tabelas densas — listagens operacionais */
html[data-theme="light"] .proto-list-shell thead th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    box-shadow: 0 1px 0 var(--border);
}

html[data-theme="light"] .proto-list-shell tbody td {
    border-top-color: var(--border);
}

html[data-theme="light"] .proto-list-shell .filter-item {
    color: #334155 !important;
}

html[data-theme="light"] .table-wrap {
    border-color: var(--border);
    background: #ffffff;
}

html[data-theme="light"] .table th {
    background: #f1f5f9;
    color: #475569;
}

html[data-theme="light"] .table tr:nth-child(even) {
    background: var(--bg-hover);
}

/* NOC modal — badges e botões secundários */
html[data-theme="light"] .noc-badge {
    background: var(--bg-hover);
    color: #0f172a;
}

html[data-theme="light"] .noc-btn {
    background: #ffffff;
    color: #0f172a;
}

html[data-theme="light"] .noc-btn:hover {
    background: var(--bg-hover);
}

html[data-theme="light"] .noc-table thead th {
    background: #f1f5f9;
}

html[data-theme="light"] .noc-table tbody td {
    border-top-color: var(--border);
}

/* ============================================================
   Extensão light mode (2026-07-18) — inputs/superfícies escuras fixas
   Utilities do Tailwind não usam !important; maior especificidade basta.
   ============================================================ */

/* Inputs/selects "dark" acompanham o tema claro */
html[data-theme="light"] .input-dark,
html[data-theme="light"] .input.input-dark,
html[data-theme="light"] .input-group.input-dark,
html[data-theme="light"] select.select-dark,
html[data-theme="light"] .select.select-dark,
html[data-theme="light"] textarea.input-dark {
    background: #ffffff;
    border-color: var(--border);
    color: var(--text-primary);
}
html[data-theme="light"] .input-dark::placeholder { color: var(--text-secondary); }
html[data-theme="light"] .input-group.input-dark .icon { color: var(--text-secondary); }

/* Superfícies escuras fixas (Tailwind bracket) usadas como painel/campo → claras */
html[data-theme="light"] .bg-\[\#0f172a\],
html[data-theme="light"] .bg-\[\#0b1220\],
html[data-theme="light"] .bg-\[\#111827\],
html[data-theme="light"] .bg-\[\#0b1120\],
html[data-theme="light"] .bg-\[\#030712\] {
    background-color: var(--bg-card);
}

/* Texto branco/claro fixo dentro de painéis claros → legível */
html[data-theme="light"] .ds-modal__panel .text-white,
html[data-theme="light"] .ds-modal__panel .text-slate-100,
html[data-theme="light"] .ds-modal__panel .text-slate-200,
html[data-theme="light"] .ds-modal__panel .text-slate-300 {
    color: var(--text-primary);
}
html[data-theme="light"] .ds-modal__panel .text-slate-400,
html[data-theme="light"] .ds-modal__panel .text-slate-500 {
    color: var(--text-secondary);
}