/* ============================================================
   Overrides dark-mode para componentes Blazor scoped.
   Necessário porque [data-theme="dark"] vive no <html>, fora
   do scope do componente. Mantém regras agrupadas por componente.
   ============================================================ */

/* === NgtBrand === */
[data-theme="dark"] .brand__sup   { color: var(--ab-blue-300); }
[data-theme="dark"] .brand__title { color: var(--ab-blue-400); }
[data-theme="dark"] .brand__sub   { color: rgba(230, 232, 238, 0.55); }

/* === BackLink === */
[data-theme="dark"] .back-link a       { color: var(--ab-blue-300); }
[data-theme="dark"] .back-link a:hover { color: var(--ab-blue-200); }

/* === Login forgot-link === */
[data-theme="dark"] .forgot-link a       { color: var(--ab-blue-300); }
[data-theme="dark"] .forgot-link a:hover { color: var(--ab-blue-200); }

/* === Inputs (FormField / TextField / PasswordField) === */
[data-theme="dark"] .field__icon { color: rgba(230,232,238,0.4); }
[data-theme="dark"] .field input,
[data-theme="dark"] input.form-input-base {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
    color: #fff;
    caret-color: var(--ab-blue-300);
}
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] input.form-input-base::placeholder { color: rgba(230,232,238,0.4); }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] input.form-input-base:focus {
    border-color: var(--ab-blue-400);
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 3px rgba(45,63,231,0.25);
}
[data-theme="dark"] .field__toggle { color: rgba(230,232,238,0.4); }
[data-theme="dark"] .field__toggle:hover { color: rgba(230,232,238,0.8); }

/* === AuthCard === */
[data-theme="dark"] .auth-card__title { color: rgba(230,232,238,0.95); }
[data-theme="dark"] .auth-card__sub   { color: rgba(230,232,238,0.6); }

/* === Theme/Language FABs === */
[data-theme="dark"] .theme-fab,
[data-theme="dark"] .lang-fab {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: rgba(230,232,238,0.65);
}
[data-theme="dark"] .theme-fab:hover,
[data-theme="dark"] .lang-fab:hover {
    background: rgba(255,255,255,0.10);
    color: rgba(230,232,238,0.95);
}

/* === PasswordStrengthMeter === */
[data-theme="dark"] .pw-meter__bar { background: rgba(255,255,255,0.10); }
[data-theme="dark"] .pw-hint { color: rgba(230,232,238,0.55); }

/* === IconButton ghost === */
[data-theme="dark"] .icon-btn { color: rgba(230,232,238,0.4); }
[data-theme="dark"] .icon-btn:hover { color: rgba(230,232,238,0.95); }
[data-theme="dark"] .icon-btn--outline {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .icon-btn--outline:hover {
    background: rgba(255,255,255,0.10);
}

/* === Shell — Sidebar === */
[data-theme="dark"] .sidebar {
    background: var(--color-surface);
    border-right-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .nav-item,
[data-theme="dark"] .nav-group__header,
[data-theme="dark"] .nav-subitem { color: rgba(230,232,238,0.65); }
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-group__header:hover,
[data-theme="dark"] .nav-subitem:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(230,232,238,0.95);
}
[data-theme="dark"] .nav-item.is-active {
    background: var(--color-primary);
    color: var(--color-primary-fg);
}
[data-theme="dark"] .nav-subitem.is-active { color: var(--ab-blue-300); }
[data-theme="dark"] .sidebar__user { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .sidebar__user-link:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .sidebar__user-link.is-active { background: rgba(91,110,255,0.18); }
[data-theme="dark"] .sidebar__user-link.is-active .sidebar__user-name { color: var(--ab-blue-300); }
[data-theme="dark"] .sidebar__user-name { color: rgba(230,232,238,0.95); }
[data-theme="dark"] .sidebar__user-role { color: rgba(230,232,238,0.55); }
[data-theme="dark"] .sidebar__user-avatar {
    background: rgba(91,110,255,0.18);
    color: var(--ab-blue-300);
}
[data-theme="dark"] .sidebar__user-logout:hover { background: rgba(255,255,255,0.06); }

/* === Shell — Topbar === */
[data-theme="dark"] .topbar {
    background: var(--color-surface);
    border-bottom-color: rgba(255,255,255,0.08);
}

/* === Shell — MainLayout content === */
[data-theme="dark"] .app { background: var(--color-bg); }

/* === Home === */
[data-theme="dark"] .selector-card {
    background: var(--color-surface);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .selector-card h2 { color: rgba(230,232,238,0.95); }
[data-theme="dark"] .selector-card .helper { color: rgba(230,232,238,0.6); }
[data-theme="dark"] .selector-field label { color: rgba(230,232,238,0.85); }
[data-theme="dark"] .selector-field select {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: #fff;
}
[data-theme="dark"] .selector-field select:focus {
    border-color: var(--ab-blue-400);
    box-shadow: 0 0 0 3px rgba(45,63,231,0.25);
}
[data-theme="dark"] .active-summary {
    background: rgba(45,63,231,0.18);
    border-color: var(--ab-blue-400);
}
[data-theme="dark"] .active-summary__title { color: rgba(230,232,238,0.95); }
[data-theme="dark"] .active-summary__meta { color: rgba(230,232,238,0.6); }

/* === Pages — Profile === */
[data-theme="dark"] .id-card,
[data-theme="dark"] .detail-card {
    background: var(--color-surface);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .id-card__name,
[data-theme="dark"] .detail-row__value,
[data-theme="dark"] .detail-card h2,
[data-theme="dark"] .page-title { color: rgba(230,232,238,0.95); }
[data-theme="dark"] .id-card__email,
[data-theme="dark"] .detail-row__label,
[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .hint,
[data-theme="dark"] .modal-body__sub { color: rgba(230,232,238,0.6); }
[data-theme="dark"] .detail-row { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .detail-actions { border-top-color: rgba(255,255,255,0.08); }

/* === Pages — UserStory === */
[data-theme="dark"] .wf-card,
[data-theme="dark"] .us-card,
[data-theme="dark"] .stat,
[data-theme="dark"] .processing,
[data-theme="dark"] .error-state,
[data-theme="dark"] .gen-upload-card,
[data-theme="dark"] .sync-panel {
    background: var(--color-surface);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .us-card.is-open {
    border-color: var(--ab-blue-400);
}
[data-theme="dark"] .us-card__header,
[data-theme="dark"] .us-card__body,
[data-theme="dark"] .us-narrative,
[data-theme="dark"] .scenario-card,
[data-theme="dark"] .ac-list li {
    background: var(--color-surface);
    border-color: rgba(255,255,255,0.08);
    color: rgba(230,232,238,0.92);
}
[data-theme="dark"] .us-card__header:hover {
    background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .us-card__count {
    background: rgba(255,255,255,0.06);
    color: rgba(230,232,238,0.7);
}
[data-theme="dark"] .stat__value,
[data-theme="dark"] .usd-title,
[data-theme="dark"] .processing__title,
[data-theme="dark"] .error-state__title,
[data-theme="dark"] .wf-card__title {
    color: rgba(230,232,238,0.95);
}
[data-theme="dark"] .stat__label,
[data-theme="dark"] .us-section__title,
[data-theme="dark"] .wf-card__file,
[data-theme="dark"] .wf-card__foot,
[data-theme="dark"] .processing__hint,
[data-theme="dark"] .dropzone__sub,
[data-theme="dark"] .dropzone__formats,
[data-theme="dark"] .file-pill__size {
    color: rgba(230,232,238,0.6);
}
[data-theme="dark"] .pulse-ring::before,
[data-theme="dark"] .pulse-ring::after {
    border-color: var(--ab-blue-400);
}
[data-theme="dark"] .dropzone {
    background: rgba(255,255,255,0.02);
    border-color: rgba(255,255,255,0.18);
}
[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone.is-dragging {
    background: rgba(45,63,231,0.10);
    border-color: var(--ab-blue-400);
}
[data-theme="dark"] .file-pill {
    background: rgba(255,255,255,0.05);
}
[data-theme="dark"] .us-status--pending {
    background: rgba(224,168,0,0.22);
    color: #F0C24A;
}
[data-theme="dark"] .us-status--completed {
    background: rgba(31,169,113,0.20);
    color: #4DD3A4;
}
[data-theme="dark"] .us-status--error {
    background: rgba(220,53,69,0.20);
    color: #F08C97;
}
[data-theme="dark"] .error-causes,
[data-theme="dark"] .us-page-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: rgba(230,232,238,0.85);
}
[data-theme="dark"] .us-page-btn.is-active {
    background: var(--ab-blue-500);
    border-color: var(--ab-blue-500);
    color: #fff;
}
[data-theme="dark"] .us-empty,
[data-theme="dark"] .us-empty p {
    color: rgba(230,232,238,0.6);
}
[data-theme="dark"] .us-empty h3 {
    color: rgba(230,232,238,0.9);
}
[data-theme="dark"] .progress-step__bullet {
    background: rgba(255,255,255,0.06);
    color: rgba(230,232,238,0.6);
}

/* === UserStory ViewToggle + List === */
/* As regras de .view-toggle em tema escuro que aqui estavam desenhavam o estilo
   antigo (borda exterior, separador entre botões, activo em azul primário) e
   sobrepunham-se ao CSS isolado do componente, mantendo os dois ecrãs de consulta
   com alternadores diferentes. O bloco mais abaixo neste ficheiro já trata
   .method-segmented e .view-toggle em conjunto, com o desenho de pastilha. */
[data-theme="dark"] .view-toggle__btn {
    color: rgba(230,232,238,0.65);
}
[data-theme="dark"] .view-toggle__btn:hover:not(.is-active) {
    color: rgba(230,232,238,0.92);
}
[data-theme="dark"] .wf-row {
    background: var(--color-surface);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .wf-row:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--ab-blue-400);
}
[data-theme="dark"] .wf-row__name {
    color: rgba(230,232,238,0.92);
}
[data-theme="dark"] .wf-row__time {
    color: rgba(230,232,238,0.6);
}

/* === UserStory regen-box (dark) === */
[data-theme="dark"] .regen-box {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .regen-box__input {
    background: rgba(0,0,0,0.20);
    border-color: rgba(255,255,255,0.12);
    color: rgba(230,232,238,0.92);
}
[data-theme="dark"] .regen-box__input:focus {
    border-color: var(--ab-blue-400);
    box-shadow: 0 0 0 3px rgba(45,63,231,0.25);
}
[data-theme="dark"] .regen-box__label {
    color: rgba(230,232,238,0.6);
}

/* === USCard overlay (regenerating, dark) === */
[data-theme="dark"] .us-card__overlay {
    background: rgba(7, 9, 26, 0.72);
}
[data-theme="dark"] .us-card__overlay-text {
    color: var(--ab-blue-300);
}
[data-theme="dark"] .us-card__overlay-spinner {
    border-color: rgba(255,255,255,0.08);
    border-top-color: var(--ab-blue-400);
}
[data-theme="dark"] .us-card.is-regenerating {
    border-color: var(--ab-blue-400);
}

/* === UploadZone — InputFile overlay (não-scoped para apanhar o <input> emitido pelo InputFile) === */
.dropzone .dropzone__input,
.dropzone input[type="file"].dropzone__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    /* impedir que o browser desenhe o botão nativo "Choose File" no fluxo */
    font-size: 0;
    color: transparent;
}

/* === USCard delete button (dark) === */
[data-theme="dark"] .us-card__delete {
    color: rgba(230,232,238,0.55);
}
[data-theme="dark"] .us-card__delete:hover {
    color: #F08C97;
    background: rgba(220,53,69,0.18);
}

/* === USCard description / RF chips (dark) === */
[data-theme="dark"] .us-section__text {
    color: rgba(230,232,238,0.92);
}
[data-theme="dark"] .us-rf-chip {
    background: rgba(45,63,231,0.18);
    color: var(--ab-blue-300);
}

/* =============================================================
   Pages — TestCase (Fase 5)
   Dark mode overrides para componentes de Casos de Teste.
   Os estilos base vivem nos .razor.css scoped; aqui só ficam
   overrides que dependem de [data-theme="dark"].
   ============================================================= */

[data-theme="dark"] .tc-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .tc-card:hover {
    border-color: var(--color-primary);
}
[data-theme="dark"] .tc-card__delete {
    color: rgba(230, 232, 238, 0.55);
}
[data-theme="dark"] .tc-card__delete:hover {
    color: #F08C97;
    background: rgba(220, 53, 69, 0.18);
}

[data-theme="dark"] .tc-row {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .tc-row:hover {
    background: var(--color-surface-alt);
}
[data-theme="dark"] .tc-row__delete:hover {
    color: #F08C97;
    background: rgba(220, 53, 69, 0.18);
}

[data-theme="dark"] .tc-toolbar .btn-filters {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-fg);
}
[data-theme="dark"] .filters-popover {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .chip {
    background: var(--color-surface);
    color: var(--color-fg);
    border-color: var(--color-border);
}
[data-theme="dark"] .filter-select {
    background: var(--color-surface);
    color: var(--color-fg);
    border-color: var(--color-border);
}

[data-theme="dark"] .wizard-stepper__num {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .tc-content-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .tc-content-card__content {
    color: rgba(230, 232, 238, 0.92);
}
[data-theme="dark"] .tc-content-card__code {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(230, 232, 238, 0.92);
}
[data-theme="dark"] .tc-content-card__overlay {
    background: rgba(7, 9, 26, 0.85);
    color: var(--color-fg);
}
[data-theme="dark"] .regen-box__input {
    background: var(--color-surface);
    color: var(--color-fg);
    border-color: var(--color-border);
}

[data-theme="dark"] .export-target-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .export-target-card__icon {
    background: rgba(45, 63, 231, 0.18);
    color: var(--ab-blue-300);
}

[data-theme="dark"] .regen-overlay {
    background: rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .regen-overlay__box {
    background: var(--color-surface);
}

[data-theme="dark"] .method-segmented,
[data-theme="dark"] .view-toggle {
    background: var(--color-surface-alt);
}
[data-theme="dark"] .method-segmented__btn.is-active,
[data-theme="dark"] .view-toggle__btn.is-active {
    background: var(--color-surface);
    color: var(--color-fg);
}

[data-theme="dark"] .method-choice-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .method-choice-card__icon {
    background: rgba(45, 63, 231, 0.18);
    color: var(--ab-blue-300);
}

[data-theme="dark"] .uscb__input {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .uscb__dropdown {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .uscb__row:hover {
    background: var(--color-surface-alt);
}

[data-theme="dark"] .us-detail {
    background: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] .wi-form__select,
[data-theme="dark"] .wi-form__textarea {
    background: var(--color-surface);
    color: var(--color-fg);
    border-color: var(--color-border);
}

[data-theme="dark"] .gen-tc__notice {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}