/* ============================================================================
   CONSOLIDATED SITE STYLES - Main CSS for TheUIThingApp
   This file consolidates all component-scoped CSS from Razor pages
   ============================================================================ */

/* ============================================================================
   GLOBAL VARIABLES AND BASE STYLES
   ============================================================================ */

/* Variables */
:root {
    /* --- Brand palette (tier 1: the few colors you normally override) --- */
    --primary-color: #04636A;
    --primary-color-dark: #016369;
    --secondary-color: #FFEE00;
    --success-green: #3dcb6c;
    --error-red: #ff3f5f;
    --border-color: #ddd;
    --text-primary: #333;
    --text-secondary: #666;
    --input-bg: #fff;
    --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* --- Semantic surfaces (tier 2: one knob per area, defaulting to the
           palette above). Override just these to retheme a single area without
           touching the base palette. --- */
    --app-bg: #f5f5f5; /* sfondo generale (pagine auth) */
    --main-bg: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%); /* sfondo area app / home */

    --appbar-bg: var(--primary-color); /* barra superiore */
    --appbar-text: #ffffff;
    --sidebar-bg: var(--primary-color); /* sidebar */
    --sidebar-text: #ffffff;
    --sidebar-active-bg: var(--secondary-color);
    --sidebar-active-text: var(--primary-color);
    --surface-bg: #ffffff; /* card / pannelli in prima pagina */
    --title-color: var(--primary-color); /* titoli */
    --title-on-main: #ffffff; /* titoli sopra --main-bg (hero) */

    --text-color: var(--text-primary); /* testi */
    --text-muted: var(--text-secondary);
    --text-on-accent: #ffffff; /* testo sopra superfici colorate (bottoni, badge, header) */

    /* --- Neutrals (tier 2: secondary surfaces, borders, faint text) --- */
    --surface-alt: #f5f5f5; /* pannelli / toolbar attenuati */
    --surface-hover: #f9f9f9; /* hover di righe / elementi di lista */
    --border-muted: #eee; /* bordi e separatori leggeri */
    --placeholder-color: #aaa; /* placeholder degli input */
    --text-faint: #999; /* stati vuoti / disabilitati */
    --overlay-bg: rgba(0, 0, 0, 0.45); /* backdrop di dialog / sidebar mobile */
    --info-color: #2196F3; /* messaggi informativi */
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.15); /* elevazione delle card in home */

    /* --- Elevation (ombre aggiuntive, una per ruolo) --- */
    --shadow-appbar: 0 2px 4px rgba(0, 0, 0, 0.2); /* barra superiore */
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.2); /* card in hover */
    --shadow-raised: 0 6px 20px rgba(0, 0, 0, 0.2); /* bottone rialzato in hover */
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2); /* card modali (logout) */
    --shadow-dialog: 0 8px 32px rgba(0, 0, 0, 0.25); /* dialog */
    --shadow-sidebar-btn: 2px 0 6px rgba(0, 0, 0, 0.2); /* pulsante espansione sidebar (lato) */
    --shadow-sidebar-btn-portrait: 0 2px 6px rgba(0, 0, 0, 0.25); /* stesso pulsante in portrait */

    /* --- Misc surfaces / text --- */
    --hover-overlay: rgba(0, 0, 0, 0.04); /* hover neutro (bottoni secondari) */
    --appbar-text-muted: #e8e8e8; /* testo attenuato nella barra (username) */
    --text-label: #555; /* etichette dei form */
    --dialog-text: #212529; /* testo dei dialog */
    --border-on-accent: color-mix(in srgb, var(--text-on-accent) 20%, transparent); /* separatori su superfici colorate */

    /* --- Components --- */
    --btn-neutral-bg: #6c757d; /* bottone secondario (config) */
    --btn-neutral-bg-hover: #5a6268;
    --btn-danger-bg: #dc3545; /* bottone pericolo (config) */
    --btn-danger-bg-hover: #c82333;
    --btn-success-bg-hover: #2fb55d; /* hover del bottone success */
    --chat-user-bg: #e3f2fd; /* bolla chat utente */
    --chat-user-text: #1565c0;
    --spinner-track: #f3f3f3; /* traccia dello spinner */
    --scrollbar-thumb: #888; /* thumb scrollbar chat/allegati */
    --scrollbar-thumb-hover: #555;

    /* --- Assets (override with a url() to swap per tenant) --- */
    --logo: url('/assets/local/images/logo.png'); /* logo nella barra superiore */
}