/* =============================================================================
   theme.css — Sinergica HR design tokens (SHARED fra BackOffice e Mobile)

   Single source of truth per palette, tipografia, spacing, radius, ombre.
   Caricato dopo blazing-berry.bs5.min.css e prima di site.css/mobile.css/
   devexpress-overrides.css.

   Per personalizzare il brand di un cliente, sovrascrivere le tre brand-*
   in un file separato e caricarlo dopo questo.
   ============================================================================= */

:root {
    /* ---- Brand colors (parametrizzabili per cliente) ---- */
    --app-brand-primary:        #e51943;
    --app-brand-primary-rgb:    229, 25, 67;
    --app-brand-primary-hover:  #c51538;
    --app-brand-primary-light:  #fce8ed;
    --app-brand-primary-fg:     #f9f8f8;

    --app-brand-secondary:      #6c757d;
    --app-brand-secondary-rgb:  108, 117, 125;
    --app-brand-secondary-hover:#565d63;
    --app-brand-secondary-light:#e9ecef;
    --app-brand-secondary-fg:   #ffffff;

    --app-brand-tertiary:       #0d6efd;
    --app-brand-tertiary-rgb:   13, 110, 253;
    --app-brand-tertiary-hover: #0b5ed7;
    --app-brand-tertiary-light: #e7f1ff;
    --app-brand-tertiary-fg:    #ffffff;

    /* ---- Colori semantici (fissi) ---- */
    --app-success:        #198754;
    --app-success-bg:     #d1edde;
    --app-success-border: #86c39c;
    --app-success-fg:     #0a5d34;

    /* P5.5: danger ridotto/scuro per distinguersi nettamente dal brand. */
    --app-danger:         #7A1024;
    --app-danger-hover:   #5C0C1B;
    --app-danger-bg:      #f5d8dd;
    --app-danger-border:  #e3a8b0;
    --app-danger-fg:      #ffffff;

    /* P5.5: warning hue ambra uniforme su tutta la scala. */
    --app-warning:        #C77700;
    --app-warning-bg:     #FEF4DD;
    --app-warning-border: #f0d8a6;
    --app-warning-fg:     #6B3F00;

    /* P5.5: info separato dal tertiary (decorativo). */
    --app-info:           #1657C2;
    --app-info-bg:        #d9e5f7;
    --app-info-border:    #a5bce8;
    --app-info-fg:        #0a2f6e;

    /* P5.5: focus ring WCAG dedicato (non coincide col brand). */
    --app-focus:          #A8C7FA;
    --app-focus-rgb:      168, 199, 250;

    /* P5.5: link in contenuti — vinaccia neutro, cliccabile senza "gridare". */
    --app-link:           #5B2E33;

    /* ---- Superfici / sfondi / bordi / testo ---- */
    --app-bg:             #f9f8f8;
    --app-surface:        #ffffff;
    --app-surface-alt:    #fafafa;          /* row hover, table stripe */
    --app-sidebar-bg:     #ffffff;
    --app-header-bg:      #ffffff;
    --app-border:         #dee2e6;
    --app-border-strong:  #cfd4da;
    --app-divider:        #f0f0f2;

    --app-text:           #212529;
    --app-text-muted:     #6c757d;
    --app-text-subtle:    #adb5bd;

    /* ---- Tipografia ---- */
    --app-font-family:    'Segoe UI', system-ui, -apple-system, sans-serif;

    --app-fs-xs:          10px;
    --app-fs-sm:          11px;
    --app-fs-body-sm:     12px;
    --app-fs-body:        13px;
    --app-fs-base:        14px;
    --app-fs-h4:          15px;
    --app-fs-h3:          16px;
    --app-fs-h2:          20px;
    --app-fs-h1:          24px;
    --app-fs-display:     32px;

    --app-fw-regular:     400;
    --app-fw-medium:      500;
    --app-fw-semibold:    600;
    --app-fw-bold:        700;

    --app-line-tight:     1.2;
    --app-line-normal:    1.4;
    --app-line-relaxed:   1.6;

    /* ---- Spacing scale ---- */
    --app-space-1:        4px;
    --app-space-2:        8px;
    --app-space-3:        12px;
    --app-space-4:        16px;
    --app-space-5:        20px;
    --app-space-6:        24px;
    --app-space-8:        32px;
    --app-space-12:       48px;

    /* ---- Radius ---- */
    --app-radius-sm:      4px;
    --app-radius:         6px;
    --app-radius-lg:      8px;
    --app-radius-xl:      12px;
    --app-radius-pill:    9999px;

    /* ---- Shadow ---- */
    --app-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.04);
    --app-shadow:         0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --app-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.08);
    --app-shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.12);
    /* P5.5: focus ring ricostruito da --app-focus (non più dal brand). */
    --app-shadow-focus:   0 0 0 3px rgba(var(--app-focus-rgb), 0.45);

    /* ---- Layout fissi (back office; il mobile li ignora o li sovrascrive) ---- */
    --app-sidebar-width:  240px;
    --app-topbar-height:  56px;
    --app-logo-height:    32px;
    --app-content-max:    1280px;

    /* ---- Transizioni ---- */
    --app-transition:     150ms ease;
}

/* =============================================================================
   Hint inline (CONDIVISO BackOffice/Mobile) — icona "i" con una nota
   esplicativa. Si apre al passaggio del mouse (desktop), al focus da tastiera
   (:focus-visible) e al tap/click (classe .app-hint-open gestita dal
   componente, per il touch dove il <button> non riceve focus). Nessun JS.
   ============================================================================= */
.app-hint {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.app-hint-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    border: none;
    background: none;
    color: var(--app-text-muted);
    cursor: pointer;
    font-size: inherit;
    line-height: 1;
    border-radius: var(--app-radius-pill);
}

    .app-hint-trigger:hover,
    .app-hint-trigger:focus-visible {
        color: var(--app-brand-primary);
    }

.app-hint-bubble {
    position: absolute;
    z-index: 50;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    max-width: min(280px, calc(100vw - 32px));
    padding: var(--app-space-3);
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
    font-size: var(--app-fs-body-sm);
    font-weight: var(--app-fw-regular);
    line-height: var(--app-line-normal);
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--app-transition);
}

    .app-hint-bubble strong {
        font-weight: var(--app-fw-semibold);
    }

/* Variante ancorata al bordo destro del trigger (per icone vicine al margine). */
.app-hint-end .app-hint-bubble {
    left: auto;
    right: 0;
}

.app-hint:hover .app-hint-bubble,
.app-hint:has(.app-hint-trigger:focus-visible) .app-hint-bubble,
.app-hint.app-hint-open .app-hint-bubble {
    opacity: 1;
    visibility: visible;
}