/* =============================================================================
   SEDNA DESIGN SYSTEM - BASE STYLES
   Reset moderno + stili globali
   ============================================================================= */

/* =============================================================================
   MODERN CSS RESET
   ============================================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: 1.5;
    scroll-behavior: smooth;
}

body {
    font-family: var(--sedna-font-sans);
    font-size: var(--sedna-text-base);
    font-weight: var(--sedna-font-normal);
    line-height: var(--sedna-leading-normal);
    color: var(--sedna-text);
    background-color: var(--sedna-bg);
    min-height: 100vh;
    overflow-x: hidden;
}

/* =============================================================================
   SEDNA APP ROOT
   ============================================================================= */
.sedna-app {
    min-height: 100vh;
    background-color: var(--sedna-bg);
    color: var(--sedna-text);
    transition: background-color var(--sedna-transition-base),
                color var(--sedna-transition-base);
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--sedna-font-semibold);
    line-height: var(--sedna-leading-tight);
    color: var(--sedna-text);
    margin-bottom: var(--sedna-space-4);
}

h1 {
    font-size: var(--sedna-text-4xl);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--sedna-text-3xl);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--sedna-text-2xl);
}

h4 {
    font-size: var(--sedna-text-xl);
}

h5 {
    font-size: var(--sedna-text-lg);
}

h6 {
    font-size: var(--sedna-text-base);
}

p {
    margin-bottom: var(--sedna-space-4);
    color: var(--sedna-text-secondary);
}

a {
    color: var(--sedna-primary);
    text-decoration: none;
    transition: color var(--sedna-transition-fast);
}

a:hover {
    color: var(--sedna-primary-hover);
    text-decoration: underline;
}

strong, b {
    font-weight: var(--sedna-font-semibold);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--sedna-text-sm);
}

code {
    font-family: var(--sedna-font-mono);
    font-size: 0.875em;
    padding: 0.125rem 0.375rem;
    background-color: var(--sedna-surface-variant);
    border-radius: var(--sedna-radius-sm);
    color: var(--sedna-text);
}

pre {
    font-family: var(--sedna-font-mono);
    font-size: var(--sedna-text-sm);
    padding: var(--sedna-space-4);
    background-color: var(--sedna-surface-variant);
    border-radius: var(--sedna-radius-md);
    overflow-x: auto;
    margin-bottom: var(--sedna-space-4);
}

pre code {
    padding: 0;
    background-color: transparent;
}

/* =============================================================================
   LISTS
   ============================================================================= */
ul, ol {
    padding-left: var(--sedna-space-6);
    margin-bottom: var(--sedna-space-4);
}

li {
    margin-bottom: var(--sedna-space-2);
}

/* =============================================================================
   FOCUS STYLES
   ============================================================================= */
:focus-visible {
    outline: 2px solid var(--sedna-focus-color);
    outline-offset: 2px;
    border-radius: var(--sedna-radius-sm);
}

/* =============================================================================
   SELECTION
   =============================================================================
   ⚠️ NON primary-subtle, ed e' il punto (Antonio, 2026-08-05: «non riesco a capire
   se il testo che sto modificando e' selezionato o meno»). Primary-subtle e'
   brand-50 — lo STESSO tono di --sedna-input-focus-bg, il fondo del campo col
   focus: la selezione dentro un input era invisibile per costruzione, non per
   sfortuna. Un'evidenziazione deve staccare dal fondo piu' chiaro su cui puo'
   capitare, che da noi e' proprio il campo attivo.

   BRAND-200 CON TESTO SCURO, e non un blu pieno col bianco: provato iniettando i
   toni sulla pagina viva del suo Mac. Il blu pieno «fa un po' sparire il testo»
   (parole sue); il 200 stacca dal fondo-focus e lascia le cifre nere leggibili.

   ⚠️ ALPHA .99, NON 1: Chromium SBIADISCE i colori di selezione completamente
   opachi (li rende semitrasparenti per lasciar vedere il testo). Dichiarare
   l'alpha sotto 1 disattiva quel trattamento e il tono resta quello scelto.
   E' il motivo per cui qui c'e' un rgba scritto a mano e non var(--sedna-brand-200):
   dentro var() l'alpha non si puo' aggiungere senza color-mix, che rientra nello
   stesso trattamento. Se brand-200 cambia (#90caf9), va cambiato anche qui.

   ⚠️ I CAMPI DATA NON PASSANO DA QUI e non e' un difetto nostro: con la mask
   attiva DevExpress sovrappone all'input uno span suo (dxbl-text-edit-caret-element)
   e DIPINGE DA SE' la selezione — misurato: qualunque ::selection, anche con
   !important, non li tocca. La loro banda pero' si vede gia' di suo, che e' quello
   che conta. */
::selection {
    background-color: rgba(144, 202, 249, 0.99);  /* --sedna-brand-200 */
    color: var(--sedna-neutral-900);
}

/* =============================================================================
   SCROLLBAR (Webkit)
   ============================================================================= */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background-color: var(--sedna-bg);
}

::-webkit-scrollbar-thumb {
    background-color: var(--sedna-border-strong);
    border-radius: var(--sedna-radius-full);
    border: 3px solid var(--sedna-bg);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--sedna-text-tertiary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sedna-border-strong) var(--sedna-bg);
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */
.sedna-surface {
    background-color: var(--sedna-surface);
    border: 1px solid var(--sedna-border);
    border-radius: var(--sedna-radius-lg);
}

.sedna-surface-elevated {
    background-color: var(--sedna-bg-elevated);
    box-shadow: var(--sedna-shadow-md);
    border-radius: var(--sedna-radius-lg);
}

.sedna-divider {
    height: 1px;
    background-color: var(--sedna-divider);
    border: none;
}

.sedna-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--sedna-space-6);
}

.sedna-container-sm {
    max-width: 640px;
}

.sedna-container-md {
    max-width: 768px;
}

.sedna-container-lg {
    max-width: 1024px;
}



/* =============================================================================
   ACCESSIBILITY UTILITIES
   ============================================================================= */

/* Screen reader only - visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ARIA state styling */
[aria-disabled="true"] {
    opacity: var(--sedna-opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

[aria-invalid="true"] {
    border-color: var(--sedna-error-600) !important;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :focus-visible {
        outline-width: 3px;
    }

    .sedna-btn,
    button {
        border-width: 2px;
    }
}

/* =============================================================================
   RESPONSIVE UTILITIES
   ============================================================================= */
@media (max-width: 640px) {
    :root {
        font-size: 14px;
    }
    
    .sedna-container {
        padding-inline: var(--sedna-space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   INTERLINEA DELLE LABEL DI CAMPO
   =============================================================================
   Una <label> dentro la shell e' l'etichetta di un campo, e la sua altezza deve
   essere quella del suo testo. Senza questa riga eredita l'interlinea del corpo
   COME LUNGHEZZA — misurato sull'app: 20px su un carattere da 10px, rapporto 2.
   Cioe' meta' dell'altezza di ogni fila di form era spazio vuoto.

   PERCHE' STA QUI E NON NELLE PAGINE. La label canonica della libreria
   (.sedna-field__label) l'interlinea ce l'ha sempre avuta giusta: il design system
   non aveva il difetto. Ce l'avevano le TREDICI ridefinizioni di pagina (.bl-f,
   .rv-f, .sa-f, .sk-f, .smm-f, .cfg-f, .doc-testata__label, .mp-ins-campo,
   .sedna-form-label...) che hanno ricopiato corpo, peso e colore e hanno lasciato
   indietro l'interlinea. Tredici toppe uguali sarebbero il modo garantito di
   ritrovarsi al quattordicesimo pattern senza: si dichiara una volta, qui.

   Stesso valore di .sedna-field__label (--sedna-leading-tight), non un secondo
   valore inventato: l'applicazione converge su uno.

   ⚠️ PORTATA. Vale solo dentro .sedna-app, cioe' la shell. Le pagine di Auth usano
   EmptyLayout e restano fuori da sole — non guadagnano righe a nessuno e non hanno
   motivo di entrare. E vale sui soli elementi <label>: le "label" che non sono di
   campo (KPI, pannello di raggruppamento, dock, indicatore bozze) sono span e div
   con una classe che contiene la parola, non elementi label, quindi non le tocca.

   ⚠️ UNA LABEL CHE VA A CAPO. A 1.25 su un carattere da 10px restano 2,5px fra le
   due righe: stretto. In quest'app le label di campo sono nowrap con i puntini —
   a capo non ci vanno per costruzione — ma se un giorno ne compare una a due righe
   il posto da correggere e' QUELLA label, non questa regola.

   Misurato prima/dopo sull'app vera (staging), iniettando la regola sulla pagina
   viva: Bilancio, fila di campi 46 -> 38px; Situazione Movimenti, 44 -> 36px.
   Otto pixel per fila di label, su ogni barra filtri dell'applicazione.
   ============================================================================= */
.sedna-app label {
    line-height: var(--sedna-leading-tight);
}