/* Extensie tematică pentru wwwroot/app.css. Se încarcă după token-uri. */

html,
body {
    color: var(--invoice-theme-text);
    background: var(--invoice-theme-canvas);
    font-family: var(--invoice-theme-font-sans);
    line-height: var(--invoice-theme-line-height);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a,
.btn-link {
    color: var(--invoice-theme-primary);
    text-underline-offset: 0.16em;
    transition: color var(--invoice-theme-transition);
}

a:hover,
.btn-link:hover {
    color: var(--invoice-theme-primary-dark);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--invoice-theme-primary);
    outline-offset: 2px;
}

.content {
    padding-top: var(--invoice-theme-space-5);
}

/* Blazor (<FocusOnNavigate Selector="h1" />) pune tabindex="-1" pe primul h1 si il
   focuseaza programatic dupa navigare, deci Chrome il trateaza ca :focus-visible si
   deseneaza un dreptunghi in jurul titlului (ex. "eFactura" pe /Account/Login), care
   dispare abia la primul click. Titlul nu e tab-abil (tabindex="-1"), deci nu pierdem
   nimic la accesibilitate ascunzand inelul — la fel face si regula din app.css. */
h1:focus,
h1:focus-visible {
    outline: none;
}

.btn-primary {
    color: #ffffff;
    border-color: var(--invoice-theme-primary);
    background: linear-gradient(135deg, var(--invoice-theme-primary), var(--invoice-theme-primary-dark));
    box-shadow: 0 7px 18px rgba(38, 53, 140, 0.20);
}

.btn:focus-visible,
.btn:active:focus,
.btn-link.nav-link:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: var(--invoice-theme-focus-ring);
}

.valid.modified:not([type="checkbox"]) {
    outline: none;
    border-color: var(--invoice-theme-success);
    box-shadow: 0 0 0 3px rgba(22, 128, 92, 0.12);
}

.invalid {
    outline: none;
    border-color: var(--invoice-theme-danger);
    box-shadow: 0 0 0 3px rgba(178, 27, 77, 0.12);
}

.validation-message {
    margin-top: 2px;
    color: var(--invoice-theme-danger);
    font-size: 0.8rem;
    font-weight: 500;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--invoice-theme-text-muted);
}

.blazor-error-boundary {
    padding: 14px 18px 14px 46px;
    border: 1px solid var(--invoice-theme-danger-border);
    border-radius: var(--invoice-theme-radius-md);
    color: var(--invoice-theme-danger);
    background-color: var(--invoice-theme-danger-soft);
    box-shadow: var(--invoice-theme-shadow-sm);
}

.e-spin-label,
.e-spinner-pane.e-spin-overlay .e-spinner-inner .e-spin-label {
    color: var(--invoice-theme-text);
    font-family: var(--invoice-theme-font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
}

.hint-text {
    color: var(--invoice-theme-text-muted-ui);
    font-size: 12.5px;
    font-style: normal;
}

.container-confirm {
    top: 5%;
    z-index: 1100;
}

.card-confirm {
    overflow: hidden;
    border: 1px solid var(--invoice-theme-danger-border);
    border-radius: var(--invoice-theme-radius-lg);
    background: var(--invoice-theme-surface);
    box-shadow: var(--invoice-theme-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto;
    }
}