/* Stili di prodotto: mappano i token del design system (ds/tokens.css, --ds-*) su
   Bootstrap e sui componenti dell'app. NIENTE valori a mano qui: se serve un colore,
   una misura o un raggio, è un token. La personalizzazione per istanza si fa nella
   dir design_system_<nome>/, mai in questo file. */

/* ---- Bootstrap sui token ---- */
:root {
    --bs-body-bg: var(--ds-canvas);
    --bs-body-color: var(--ds-ink);
    --bs-body-font-family: var(--ds-font);
    --bs-body-font-size: var(--ds-fs-body);
    --bs-body-line-height: var(--ds-lh-body);
    --bs-font-monospace: var(--ds-font-mono);
    --bs-secondary-color: var(--ds-text-muted);
    --bs-border-color: var(--ds-border);
    --bs-border-radius: var(--ds-r-input);
    --bs-border-radius-sm: var(--ds-r-thumb);
    --bs-border-radius-lg: var(--ds-r-card-sm);
    --bs-primary: var(--ds-accent);
    --bs-danger: var(--ds-danger);
    --bs-success: var(--ds-success);
    --bs-info: var(--ds-info);
    --bs-warning: var(--ds-warning);
    --bs-link-color: var(--ds-link);
    --bs-link-hover-color: var(--ds-link-hover);
    --bs-heading-color: var(--ds-ink);
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 600; letter-spacing: var(--ds-ls-title); }
.text-muted { color: var(--ds-text-muted) !important; }
.text-primary { color: var(--ds-accent-text) !important; }   /* accent come testo = accent-text (AA) */
.bg-primary { background-color: var(--ds-accent) !important; }
.bg-light-primary { background-color: var(--ds-accent-soft) !important; }

/* Movimento: una curva, due durate; rispetta prefers-reduced-motion */
.btn, .form-control, .dropdown-item, a, .rounded {
    transition: background-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease),
                border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Focus: contorno 2px in semantico/focus, staccato 2px dal bordo — l'unico contorno del sistema */
.btn:focus-visible, .form-control:focus-visible, .dropdown-item:focus-visible, a:focus-visible {
    outline: 2px solid var(--ds-focus); outline-offset: 2px; box-shadow: none;
}

/* ---- Bottoni: pill (mock OX_Q) — primario = ink scuro, secondario = pill bianca con ombra ---- */
.btn {
    font-size: var(--ds-fs-button); font-weight: 500; line-height: 1;
    min-height: var(--ds-h); padding: 0 var(--ds-sp-4); border-radius: var(--ds-r-pill);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-sp-2);
}
.btn.btn-sm { min-height: var(--ds-h-sm); padding: 0 var(--ds-sp-3); }
.btn-primary {
    --bs-btn-bg: var(--ds-solid);
    --bs-btn-border-color: var(--ds-solid);
    --bs-btn-color: var(--ds-on-ink);
    --bs-btn-hover-bg: var(--ds-ink-hover);
    --bs-btn-hover-border-color: var(--ds-ink-hover);
    --bs-btn-hover-color: var(--ds-on-ink);
    --bs-btn-active-bg: var(--ds-ink-hover);
    --bs-btn-active-border-color: var(--ds-ink-hover);
    --bs-btn-active-color: var(--ds-on-ink);
    --bs-btn-disabled-bg: var(--ds-solid);
    --bs-btn-disabled-border-color: var(--ds-solid);
    --bs-btn-disabled-color: var(--ds-on-ink);
}
.btn-light {
    --bs-btn-bg: var(--ds-surface);
    --bs-btn-border-color: var(--ds-surface);
    --bs-btn-color: var(--ds-ink);
    --bs-btn-hover-bg: var(--ds-subtle);
    --bs-btn-hover-border-color: var(--ds-subtle);
    --bs-btn-hover-color: var(--ds-ink-hover);
    --bs-btn-active-bg: var(--ds-field);
    --bs-btn-active-border-color: var(--ds-field);
    --bs-btn-disabled-bg: var(--ds-surface);
    --bs-btn-disabled-border-color: var(--ds-surface);
    --bs-btn-disabled-color: var(--ds-text-muted);
    box-shadow: var(--ds-shadow-pill);
}
.btn-light:hover { box-shadow: var(--ds-shadow-pill-hover); }
/* IconButton "ghost": dentro barre e composer, niente sfondo né ombra */
.btn-ghost {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-color: var(--ds-ink);
    --bs-btn-hover-bg: var(--ds-control);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: var(--ds-ink-hover);
    --bs-btn-active-bg: var(--ds-control);
    --bs-btn-active-border-color: transparent;
}
.btn.btn-icon { padding: 0; width: var(--ds-h); height: var(--ds-h); flex-shrink: 0; }
.btn.btn-sm.btn-icon { width: var(--ds-h-sm); height: var(--ds-h-sm); }
.btn-active-color-danger:hover { color: var(--ds-accent-text); }

/* ---- Campi: grigio pieno senza bordo (mock) — l'affordance è lo sfondo, il focus è l'outline ---- */
.form-control {
    background: var(--ds-field); color: var(--ds-ink);
    border: 1px solid transparent; border-radius: var(--ds-r-input);
    min-height: var(--ds-h-lg); padding: var(--ds-sp-3) var(--ds-sp-4); font-size: var(--ds-fs-body);
}
.form-control::placeholder { color: var(--ds-placeholder); }
.form-control:hover { background: var(--ds-field-hover); }
.form-control:focus { background: var(--ds-field); color: var(--ds-ink); border-color: transparent; box-shadow: none; }
.form-label { font-size: var(--ds-fs-label); font-weight: 500; color: var(--ds-ink); margin-bottom: var(--ds-sp-2); }

/* ---- Card: bianche flottanti sul canvas, senza bordo (mock) ---- */
.card {
    background: var(--ds-surface); border: 0;
    border-radius: var(--ds-r-card); box-shadow: var(--ds-shadow-card);
}
.card-header { background: transparent; border-bottom: 1px solid var(--ds-hairline); }
.card-title { font-size: var(--ds-fs-section); font-weight: 600; letter-spacing: 0; }
.shadow-sm { box-shadow: var(--ds-shadow-login) !important; }
.alert-danger { background: var(--ds-danger-soft); color: var(--ds-accent-text); border-color: var(--ds-danger-soft); border-radius: var(--ds-r-input); }
.alert-success { background: var(--ds-success-tint); color: var(--ds-success); border-color: var(--ds-success-tint); border-radius: var(--ds-r-input); }

/* ---- Menu (dropdown) ---- */
.dropdown-menu {
    background: var(--ds-surface); border: 1px solid var(--ds-border-popover);
    border-radius: var(--ds-r-popover); box-shadow: var(--ds-shadow-popover); padding: var(--ds-sp-2);
}
.dropdown-item { border-radius: var(--ds-r-menu-item); color: var(--ds-ink); font-size: var(--ds-fs-body-sm); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ds-field); color: var(--ds-ink-hover); }
.dropdown-item.active, .dropdown-item:active { background: var(--ds-field); color: var(--ds-ink); }

/* ---- Shim per le utility non-Bootstrap dei template (eredità Metronic), sui token ---- */
.symbol { display: inline-block; flex-shrink: 0; }
.symbol .symbol-label {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: var(--ds-r-menu-item);
}
.symbol.symbol-35px, .symbol.symbol-35px .symbol-label { width: var(--ds-h); height: var(--ds-h); }
.symbol.symbol-60px, .symbol.symbol-60px .symbol-label { width: 60px; height: 60px; }
.symbol.symbol-65px, .symbol.symbol-65px .symbol-label { width: var(--ds-sp-16); height: var(--ds-sp-16); }
.fs-7 { font-size: var(--ds-fs-body-sm) !important; }
.fs-8 { font-size: var(--ds-fs-meta) !important; }
.fs-2x { font-size: var(--ds-fs-hero) !important; }
.text-gray-700 { color: var(--ds-text-secondary) !important; }
.text-gray-800 { color: var(--ds-ink) !important; }
.text-hover-primary:hover { color: var(--ds-accent-text) !important; }
.conv-title { text-decoration: none; }

/* ---- Chrome dell'app: header sul canvas, niente barra bianca (mock).
        Sfondo canvas pieno + z-index: nulla può disegnarcisi sopra. ---- */
.app-navbar {
    background: var(--ds-canvas); border-bottom: 0; position: relative; z-index: 10;
    min-height: var(--ds-header-h); padding-left: var(--ds-page-pad-x); padding-right: var(--ds-page-pad-x);
}
.app-navbar .navbar-brand { font-size: var(--ds-fs-section); font-weight: 600; color: var(--ds-ink); }
/* il nome del sito accanto al wordmark: label piccola secondaria (Figma: Marchio) */
.app-navbar .navbar-brand span { font-size: var(--ds-fs-label); font-weight: 500; color: var(--ds-text-secondary); }
.app-navbar .navbar-brand img { height: 20px; }   /* wordmark alto 20 in testata */
/* Avatar: iniziali su tondo scuro, mai una foto. Stessa altezza dei controlli.
   È il bottone che apre il menu account. */
.avatar-initials {
    width: var(--ds-h); height: var(--ds-h); border-radius: var(--ds-r-pill);
    background: var(--ds-solid); color: var(--ds-on-ink); border: 0; padding: 0;
    font-size: var(--ds-fs-label); font-weight: 500; letter-spacing: 0;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    text-transform: uppercase; cursor: pointer;
}
.nav-divider { width: 1px; height: 20px; background: var(--ds-border); }

/* Menu account (Figma: UserMenu): chi sei, workspace, azioni. Esci è l'unica cosa rossa. */
.user-menu { width: 300px; padding: var(--ds-sp-4); }
.user-menu .dropdown-item { border-radius: var(--ds-r-menu-item); padding: var(--ds-sp-2) var(--ds-sp-3);
                            font-size: var(--ds-fs-chat); letter-spacing: var(--ds-ls-chat); }
.user-menu-name, .user-menu-ws { font-weight: 600; font-size: var(--ds-fs-chat);
                                 letter-spacing: var(--ds-ls-chat); color: var(--ds-ink); }
.user-menu-mail { font-size: var(--ds-fs-body); color: var(--ds-text-secondary); }
.user-menu-role { font-size: var(--ds-fs-body); color: var(--ds-text-muted); }
.user-menu-kicker { margin-top: var(--ds-sp-4); font-size: var(--ds-fs-label); font-weight: 500;
                    color: var(--ds-text-muted); text-transform: uppercase; }
.user-menu form { margin: 0; }
.user-menu-esci, .user-menu-esci:hover, .user-menu-esci:focus { color: var(--ds-danger-text); }
#app-main { display: flex; flex-direction: column; min-height: 0; }

/* ---- toaster errori/messaggi: overlay in alto a destra, non sposta il layout ---- */
.toast-stack {
    position: fixed; top: var(--ds-sp-3); right: var(--ds-sp-3); z-index: 1080;
    display: flex; flex-direction: column; gap: var(--ds-sp-2); width: 320px; max-width: calc(100vw - 2 * var(--ds-sp-3));
}
.toast-stack .alert { margin-bottom: 0; }