/* ============================================================
   ViCorp — livello condiviso di rifinitura visiva + mobile-first
   Caricato DOPO lo style.css di ogni pannello in tutti e tre gli
   index.html (Dashboard/Admin/La Mia Area): i tre pannelli usano
   nomi di classe identici per sidebar/topbar/modal/toolbar/kpi/
   request-list (stesso pattern condiviso di common.js), quindi un
   solo file qui evita di triplicare queste regole tre volte.
   ============================================================ */

/* ---------------- Rifinitura globale (tutte le dimensioni) ---------------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

a, button, .sidebar-link, .row-btn, .icon-btn, .kpi-tile, .emp-card, .project-card,
.app-card, .request-row, .kudos-card, .org-node, select, input {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease,
    background-color .15s ease, color .15s ease, filter .15s ease;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
.sidebar-link:focus-visible, .row-btn:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px;
}

.primary-btn:active, .btn-primary:active, .btn:active { transform: scale(.97); }
.row-btn:active, .icon-btn:active { transform: scale(.94); }

/* Ingresso più morbido per le schermate di login (puro CSS, zero rischio) */
.login-card { animation: vicorp-rise .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes vicorp-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* Hamburger: rotazione discreta quando la sidebar mobile è aperta */
#sidebarToggle { transition: transform .2s ease; }
.sidebar.mobile-open ~ .app-main #sidebarToggle,
body.sidebar-scrim #sidebarToggle { transform: rotate(90deg); }

/* ---------------- Sidebar: drawer overlay sotto i 900px ---------------- */
@media (max-width: 900px) {
  .app { display: block; }
  .app-main { display: flex; min-height: 100vh; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 278px !important; height: 100dvh;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.16,1,.3,1);
    z-index: 300; box-shadow: var(--shadow-pop);
  }
  .sidebar.mobile-open { transform: translateX(0); }

  /* Sotto i 900px la sidebar è sempre un drawer a piena etichetta: lo stato
     "collapsed" (icona-soltanto, preferenza desktop persistita) e la vecchia
     regola ":not(.collapsed) { width:68px }" dei breakpoint più stretti dei
     singoli pannelli non devono avere alcun effetto qui — annullati entrambi
     senza qualificatore, così vincono su qualunque combinazione di stato. */
  .sidebar, .sidebar.collapsed, .sidebar:not(.collapsed) { width: 278px !important; }
  .sidebar .brand-text,
  .sidebar .sidebar-team-label,
  .sidebar .sidebar-group-label,
  .sidebar .sidebar-link-label { display: revert !important; }
  .sidebar .sidebar-team { padding: 12px 14px !important; text-align: left !important; }
  .sidebar.collapsed .sidebar-team-value { font-size: revert !important; }
  .sidebar .sidebar-link { justify-content: flex-start !important; padding: 9px 10px !important; }

  /* Velo scuro dietro la sidebar aperta — nessun markup extra: uno pseudo-elemento su body */
  body.sidebar-scrim { overflow: hidden; }
  body.sidebar-scrim::after {
    content: ''; position: fixed; inset: 0; z-index: 260;
    background: rgba(0,0,0,.5); backdrop-filter: blur(1px);
    animation: vicorp-fade .18s ease both;
  }
  @keyframes vicorp-fade { from { opacity: 0; } to { opacity: 1; } }

  .topbar { padding: 12px 16px; gap: 8px; }
  .topbar-title { font-size: 14px; }
  .topbar-right { gap: 8px; }
  .clock { display: none; }
  .admin-link span { display: none; }
  .admin-link { padding: 8px; }
  .role-badge { display: none; }
  .content { padding: 16px; }
  .footer { flex-direction: column; gap: 4px; padding: 14px 16px; text-align: center; }

  .notif-panel { width: min(340px, calc(100vw - 24px)); right: -8px; }
}

@media (min-width: 901px) {
  /* Su desktop la scia/scrim non deve mai comparire anche se lo stato è rimasto sporco */
  body.sidebar-scrim::after { content: none; }
}

/* ---------------- Toolbar & form: input più comodi al tocco ---------------- */
@media (max-width: 640px) {
  .toolbar { gap: 8px; }
  .toolbar input[type="search"], .toolbar select, .form-field input, .form-field select,
  .form-field textarea { min-height: 42px; font-size: 14px; }
  .toolbar select { width: 100%; flex: 1 1 140px; }
  .primary-btn, .btn, .btn-primary, .btn-ghost, .btn-danger { min-height: 42px; padding-left: 16px; padding-right: 16px; }
  .row-btn { min-height: 34px; padding: 7px 12px; }
}

/* ---------------- Tabelle: scroll orizzontale invece del clipping ---------------- */
@media (max-width: 900px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
  .admin-table { min-width: 640px; }
  .calendar-scroll { -webkit-overflow-scrolling: touch; }
}

/* ---------------- Modal → bottom sheet in mobile ---------------- */
@media (max-width: 640px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%; width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0;
    animation: vicorp-sheet-up .24s cubic-bezier(.16,1,.3,1) both;
  }
  .modal::before {
    content: ''; display: block; width: 40px; height: 4px; border-radius: 999px;
    background: var(--border-strong); margin: 10px auto -2px;
  }
  @keyframes vicorp-sheet-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  .modal-header, .modal-body { padding-left: 18px; padding-right: 18px; }
}

/* ---------------- Strato "premium": rifiniture visive condivise ---------------- */
/* Sfondo pagina con una profondità in più (radial wash discretissimo, stessa
   coppia di colori già in uso per il topbar — nessun colore nuovo introdotto) */
body {
  background-image:
    radial-gradient(900px 480px at 100% -10%, color-mix(in srgb, var(--brand) 5%, transparent), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, color-mix(in srgb, var(--cinema-gold) 6%, transparent), transparent 60%);
  background-attachment: fixed;
}

/* Card più "tattili": leggero bordo interno luminoso + ombra a due strati già
   esistente, resa più ricca solo in dark mode dove si apprezza di più */
:root[data-theme="dark"] .kpi-tile, :root[data-theme="dark"] .emp-card,
:root[data-theme="dark"] .project-card, :root[data-theme="dark"] .app-card,
:root[data-theme="dark"] .request-row, :root[data-theme="dark"] .kudos-card {
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .kpi-tile, :root:where(:not([data-theme="light"])) .emp-card,
  :root:where(:not([data-theme="light"])) .project-card, :root:where(:not([data-theme="light"])) .app-card,
  :root:where(:not([data-theme="light"])) .request-row, :root:where(:not([data-theme="light"])) .kudos-card {
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04);
  }
}
.kpi-tile:hover, .emp-card:hover, .project-card:hover, .app-card:hover,
.request-row:hover, .kudos-card:hover, .org-node:hover {
  box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
}

/* Pulsanti primari: passata di luce diagonale al passaggio del mouse */
.primary-btn, .btn-primary {
  position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.primary-btn::after, .btn-primary::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .5s ease;
}
.primary-btn:hover::after, .btn-primary:hover::after { transform: translateX(120%); }

/* Badge di stato: piccolo rilievo "smaltato" invece del piatto pieno colore */
.status-badge { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }

/* Link di navigazione attivi: leggero rientro all'hover per dare profondità */
.sidebar-link:not(.active):hover { transform: translateX(2px); }

/* Focus-visible coerente anche sulle checkbox/radio dei form nativi */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------------- Righe/carte a lista: impilano su schermi molto stretti ---------------- */
@media (max-width: 480px) {
  .request-row { grid-template-columns: auto 1fr; row-gap: 8px; }
  .request-importo { grid-column: 2; justify-self: start; }
  .request-actions { grid-column: 1 / -1; }
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .modal-header .avatar { width: 46px; height: 46px; }
}

/* ---------------- Chat (La Mia Area): lista + conversazione impilate invece
   che affiancate — a 260px fissi la colonna conversazione restava tagliata
   su un telefono in verticale (serviva ruotare in orizzontale per vederla
   tutta). "dvh" invece di "vh" evita il salto di layout dato dalla barra
   indirizzi dinamica di Safari iOS quando appare/scompare. ---------------- */
@media (max-width: 640px) {
  .chat-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: auto; gap: 10px; }
  .chat-sidebar { max-height: 34dvh; }
  .chat-main { height: 56dvh; min-height: 320px; }
}