/* =============================================================
   oc-topbar.css — Barra superiore OpenCloud (Phase 3, 2026-04-30)

   Struttura:
     [ logo ]            [   search   ]            [ 🌓 ] [ avatar ▾ ]

   Segment-aware via token oc-* (Step 21):
     - Quadrista B "Industrial Steel": navy + giallo accent
     - Mandatario B "Diplomatic Silver": blu UE + silver
     - Default (entrambi): palette quadrista
   ============================================================= */

/* Wrapper + altezza fissa */
.oc-topbar-wrap {
    /* container <header>, no styling diretto */
}

.navbar.oc-topbar {
    min-height: 64px;
    padding: 0 1rem;
    background: linear-gradient(135deg, var(--oc-primary) 0%, var(--oc-primary-dark) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--oc-primary-dark) 70%, black);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    z-index: 1030;
}

/* Body padding-top per evitare che la navbar fixed copra il contenuto.
   Sostituisce il padding-top legacy in loggedLight/Dark. */
body {
    padding-top: 64px;
}

.oc-topbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0;
}

/* =============== LOGO (sinistra) =============== */

.oc-topbar-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-right: .5rem;
    transition: opacity var(--oc-transition-fast, 150ms) ease;
}

.oc-topbar-brand:hover,
.oc-topbar-brand:focus-visible {
    opacity: .85;
    text-decoration: none;
    color: inherit;
}

.oc-topbar-brand:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 4px;
    border-radius: var(--oc-radius-sm, 6px);
}

/* La classe .imglogo ha gia' il background-image gestito da loggedLight.css.
   Qui non sovrascriviamo le dimensioni perché vanno bene anche per la nuova navbar. */

/* =============== SEARCH (centro) =============== */

.oc-topbar-search {
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    align-items: center;
}

.oc-topbar-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, .65);
    pointer-events: none;
    z-index: 2;
}

.oc-topbar-search-input {
    width: 100%;
    height: 38px;
    padding: 0 64px 0 40px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--oc-radius, 10px);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.oc-topbar-search-input::placeholder {
    color: rgba(255, 255, 255, .55);
}

.oc-topbar-search-input:hover:not(:disabled) {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .26);
}

.oc-topbar-search-input:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, .20);
    border-color: var(--oc-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--oc-accent) 30%, transparent);
}

.oc-topbar-search-input:disabled {
    cursor: text; /* mantiene UX di "ricerca disponibile a breve" */
    opacity: .82;
}

.oc-topbar-search-kbd {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, .85);
    pointer-events: none;
    user-select: none;
}

/* =============== CLUSTER DESTRO =============== */

.oc-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* =============== THEME TOGGLE (bottoncino accanto avatar) =============== */

.oc-topbar-theme-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.oc-topbar-theme-btn:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .28);
    color: var(--oc-accent);
}

.oc-topbar-theme-btn:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 2px;
}

.oc-topbar-theme-icon {
    width: 18px;
    height: 18px;
}

/* Icone alternate: light visibile in dark, dark visibile in light */
.oc-theme-icon-light { display: none; }
.oc-theme-icon-dark  { display: block; }

[data-bs-theme="dark"] .oc-theme-icon-light { display: block; }
[data-bs-theme="dark"] .oc-theme-icon-dark  { display: none; }

/* =============== USER DROPDOWN =============== */

.oc-topbar-user {
    position: relative;
}

.oc-topbar-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.oc-topbar-user-btn:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .26);
}

.oc-topbar-user-btn:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: 2px;
}

.oc-topbar-user-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .30);
}

.oc-topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--oc-accent) 0%, color-mix(in srgb, var(--oc-accent) 70%, var(--oc-primary)) 100%);
    color: var(--oc-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    flex-shrink: 0;
}

/* Avatar con foto profilo (img) — sostituisce le iniziali */
.oc-topbar-avatar-img {
    object-fit: cover;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
}

.oc-topbar-username {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-topbar-chevron {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, .75);
    transition: transform 150ms ease;
}

.oc-topbar-user-btn[aria-expanded="true"] .oc-topbar-chevron {
    transform: rotate(180deg);
}

/* Dropdown menu */
.oc-topbar-menu {
    min-width: 240px;
    margin-top: 8px !important;
    padding: 6px;
    border: 1px solid var(--oc-border, #d4dae3);
    border-radius: var(--oc-radius, 10px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .08);
    background: var(--oc-surface, #fff);
}

.oc-topbar-menu .dropdown-item {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--oc-text);
    font-size: 14px;
    font-weight: 500;
    transition: background-color 120ms ease;
}

.oc-topbar-menu .dropdown-item:hover,
.oc-topbar-menu .dropdown-item:focus {
    background: var(--oc-primary-soft, rgba(27, 59, 95, .08));
    color: var(--oc-primary);
}

.oc-topbar-menu .dropdown-divider {
    margin: 6px 4px;
    border-top: 1px solid var(--oc-border, #d4dae3);
}

.oc-topbar-menu .oc-topbar-logout {
    color: var(--oc-danger, #d33);
}

.oc-topbar-menu .oc-topbar-logout:hover {
    background: color-mix(in srgb, var(--oc-danger, #d33) 10%, white);
    color: var(--oc-danger, #d33);
}

/* =============== MOBILE (< 992px) =============== */

@media (max-width: 991.98px) {
    .navbar.oc-topbar {
        padding: 0 .75rem;
        min-height: 56px;
    }

    body {
        padding-top: 56px;
    }

    .oc-topbar-inner {
        gap: .5rem;
    }

    .oc-topbar-username {
        display: none;
    }

    .oc-topbar-user-btn {
        padding: 4px;
        gap: 4px;
    }
}

/* Dark theme: i token --oc-surface/--oc-border/--oc-text gia' cambiano via
   oc-tokens.css (Step 7 dark, 2026-05-21). Le regole specifiche del menu
   dropdown sono state rimosse perche' ridondanti: ereditano dai token. */

/* =============================================================
   FOTO PROFILO COMPONENT (accountDetails)

   Layout: avatar 96px + bottone "Rimuovi" overlay sotto
           a fianco: label "Carica immagine" + file input + hint
   Mood-aware via token oc-* (Step 21).
   ============================================================= */

.oc-foto-profilo-block {
    /* container row Bootstrap, niente di speciale */
}

.oc-foto-profilo-title {
    color: var(--oc-text);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 12px;
}

.oc-foto-profilo {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.oc-foto-preview-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: color-mix(in srgb, var(--oc-primary) 8%, white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.oc-foto-preview {
    width: 96px;
    height: 96px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

/* Fallback iniziali quando manca la foto */
.oc-foto-preview-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--oc-primary) 0%, var(--oc-primary-dark) 100%);
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Bottone "Rimuovi" overlay in basso */
.oc-foto-remove {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--oc-success, #2ea84a);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background-color 150ms ease;
}

.oc-foto-remove:hover {
    background: color-mix(in srgb, var(--oc-success, #2ea84a) 85%, black);
}

.oc-foto-remove:focus-visible {
    outline: 2px solid var(--oc-accent);
    outline-offset: -2px;
}

.oc-foto-remove svg {
    flex-shrink: 0;
}

/* Controlli (label + file input + hint) */
.oc-foto-controls {
    flex: 1 1 auto;
    min-width: 220px;
}

.oc-foto-upload-label {
    color: var(--oc-text);
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.oc-foto-input {
    /* eredita .form-control da bootstrap; il bridge gia' applica i token oc-* */
    margin-bottom: 8px;
    max-width: 420px;
}

.oc-foto-hint {
    color: var(--oc-text-muted);
    font-size: 12px;
    margin-bottom: 0;
}

/* Mobile: stacking + icon-only remove button */
@media (max-width: 575.98px) {
    .oc-foto-profilo {
        flex-direction: column;
        gap: 12px;
    }
    .oc-foto-controls {
        width: 100%;
    }
}

/* Dark theme: i token cambiano gia' via oc-tokens.css. Le regole
   precedenti forzavano testi chiari su .oc-foto-* col rischio di
   metterli su card ancora bianche (i token erano light-only).
   Rimossi (2026-05-21): ora --oc-text/--oc-surface/--oc-primary
   commutano coerentemente. */

/* =============================================================
   ACCOUNT DETAILS — 3 sezioni (I tuoi dati / La tua azienda /
   Personalizzazione grafica)
   ============================================================= */

.oc-account-section {
    background: color-mix(in srgb, var(--oc-primary) 4%, var(--oc-surface, #fff));
    border: 1px solid var(--oc-border, #d4dae3);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
}

.oc-account-section-title {
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--oc-primary);
    margin: 0 0 22px;
    padding-bottom: 12px;
    border-bottom: 2px solid color-mix(in srgb, var(--oc-primary) 20%, transparent);
}

/* Dark theme: --oc-primary/--oc-surface/--oc-border cambiano via token
   (2026-05-21). Override hardcoded rimosso. Il color-mix sopra (.oc-account-section)
   funziona correttamente con --oc-surface dark. */

/* Logo aziendale — variant square del foto profilo block */
.oc-foto-preview-wrap.oc-logo-square {
    border-radius: 10px;
    background: #fff;       /* fondo bianco per loghi PNG/SVG con trasparenza */
    overflow: hidden;
}

.oc-foto-preview-wrap.oc-logo-square .oc-foto-preview {
    border-radius: 10px;
    object-fit: contain;    /* logo non crop, intero */
    padding: 6px;
    background: #fff;
}

/* =============================================================
   PREVIEW NAVBAR LIVE
   ============================================================= */

.oc-preview-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--oc-text-muted, #6b7280);
    margin-bottom: 8px;
    display: block;
}

.oc-preview-wrap {
    border: 1px solid var(--oc-border, #d4dae3);
    border-radius: 10px;
    overflow: hidden;
    background: var(--oc-surface, #fff);
}

.oc-preview-navbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    color: #fff;
    transition: background-color 200ms ease;
}

.oc-preview-logo-oc img {
    height: 22px;
    width: auto;
    display: block;
}

.oc-preview-logo-azienda {
    display: flex;
    align-items: center;
    height: 22px;
}

.oc-preview-logo-azienda img {
    height: 22px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
    background: rgba(255,255,255,.92);
    padding: 2px 4px;
    border-radius: 4px;
}

.oc-preview-spacer {
    flex: 1 1 auto;
}

.oc-preview-user {
    font-size: 13px;
    font-weight: 500;
    opacity: .92;
}

.oc-preview-body {
    padding: 14px 16px;
    background: var(--oc-bg, #ECEFF4);
}
/* Dark .oc-preview-body: --oc-bg gia' cambia via token (2026-05-21). */

.oc-preview-card {
    background: var(--oc-surface, #fff);
    border: 1px solid var(--oc-border, #d4dae3);
    border-radius: 8px;
    padding: 12px;
}

.oc-preview-card h6 {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--oc-text);
}

.oc-preview-card small {
    color: var(--oc-text-muted, #6b7280);
}

/* Dark theme: tutti gli oc-preview-card* hanno gia' i token corretti
   (--oc-surface, --oc-border, --oc-text, --oc-text-muted). Rimosso
   (2026-05-21). */

/* =============================================================
   LOGO AZIENDALE NELLA TOPBAR (a destra del logo OpenCloud)
   ============================================================= */

.oc-topbar-logo-azienda {
    height: 32px;
    display: flex;
    align-items: center;
    margin-left: 4px;
    margin-right: 8px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, .92);
    border-radius: 6px;
    flex-shrink: 0;
}

.oc-topbar-logo-azienda img {
    height: 24px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    display: block;
}

@media (max-width: 575.98px) {
    /* Su mobile nascondiamo il logo aziendale per lasciare spazio */
    .oc-topbar-logo-azienda { display: none; }
}