/* Foli·Share — "Cloud": interfaccia di navigazione file.
   Scoperto sotto .cloud apposta: non tocca le pagine non ancora ridisegnate
   (Condivisioni, Invia, Sicurezza, login) che restano su style.css. */

/* font-display: block + preload in base.html: niente lampo col font di sistema (che ha
   misure diverse e faceva "zoomare" la pagina appena arrivava il font vero). */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/cabinet-grotesk/CabinetGrotesk-Regular.woff2") format("woff2");
  font-weight: 400; font-display: block;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/cabinet-grotesk/CabinetGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-display: block;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/cabinet-grotesk/CabinetGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-display: block;
}
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/cabinet-grotesk/CabinetGrotesk-Black.woff2") format("woff2");
  font-weight: 900; font-display: block;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/space-mono/SpaceMono-Regular.woff2") format("woff2"), url("fonts/space-mono/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400; font-display: block;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/space-mono/SpaceMono-Bold.woff2") format("woff2"), url("fonts/space-mono/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700; font-display: block;
}

.cloud {
  /* Palette del layout "Studio Folì Archive". I PSD sono in Adobe RGB: questi sono i
     valori CONVERTITI in sRGB (come appaiono in Photoshop), non i numeri grezzi del PSD —
     copiati grezzi escono sbagliati sul web (es. arancio grezzo #eaaa43 = #feac37 a schermo).
     Unica eccezione voluta: lo sfondo resta #f4f1ea (deciso dal committente). */
  --cream: #f4f1ea;
  --cream-deep: #ebe6da;
  --ink: #121212;
  --ink-soft: #6a6761;
  --ink-faint: #a39e94;
  --blue: #b8caf2;
  --blue-deep: #101ca9;
  --pink: #f6b8db;
  --mustard: #feac37;
  --olive: #98aa61;
  --grey: #a5a5a5;
  --white: #ffffff;
  --line: #121212;
  --line-soft: #e4dfcf;
  --danger: #c0392b;
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-sm: 10px;
  --font-display: "Cabinet Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-mono);
  min-height: 100vh;
}

.cloud, .cloud input, .cloud button, .cloud select {
  font-family: var(--font-mono);
}

.cloud a { color: inherit; }

.cloud .cloud-shell {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas: "topbar topbar" "sidebar main";
  column-gap: 24px;
  row-gap: 0;
  max-width: 1720px;
  margin: 0 auto;
  padding: 40px 40px 24px;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.cloud .sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 4px;
}
.cloud .sidebar-nav {
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.cloud .nav-btn {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.cloud .nav-btn svg { width: 20px; height: 20px; }
.cloud .nav-btn.is-active { background: var(--blue); }
/* Barra laterale del layout: 4 voci, ognuna col suo colore quando è attiva.
   Casa = arancio · Cloud = azzurro · Condivisioni = rosa · Contatti = verde.
   Il Cestino (voce in più aggiunta dal sito) resta in barra: è la rete di sicurezza per i file cancellati. */
.cloud .sidebar-nav > .nav-btn[title^="Home"].is-active { background: var(--mustard); }
.cloud .sidebar-nav > a[href="/files"].is-active { background: var(--blue); }
.cloud .sidebar-nav > a[href="/shares"].is-active { background: var(--pink); }
.cloud .sidebar-nav > .nav-btn[title^="Contatti"].is-active { background: var(--olive); }
.cloud .sidebar-nav > a[href="/cestino"].is-active { background: var(--grey); }
.cloud .nav-btn:not(.is-disabled):not(.is-active):hover { background: var(--cream); }
.cloud .sidebar-nav { padding: 14px 10px; }
.cloud .sidebar-bell { padding: 10px; }
.cloud .sidebar-bell {
  background: var(--white);
  border-radius: 999px;
  padding: 14px 0;
  display: flex;
  justify-content: center;
}

/* ---------- Topbar ---------- */
.cloud .cloud-main { grid-area: main; min-width: 0; }
.cloud .topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 96px;
}
.cloud .topbar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-right: 24px;
}
.cloud .topbar-logo { width: 46px; height: 41px; flex-shrink: 0; object-fit: contain; margin-bottom: 44px; }
.cloud .topbar-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.03em;
  line-height: 0.92;
}
.cloud .pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.cloud .pill-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.cloud .pill-btn.is-primary { background: var(--blue); }
.cloud .pill-btn:disabled, .cloud .pill-btn.is-disabled {
  color: var(--ink-faint); cursor: default;
}
.cloud .pill-btn:not(:disabled):not(.is-disabled):hover { filter: brightness(0.97); }

.cloud .search-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  min-width: 180px;
  max-width: 420px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 0;
  gap: 10px;
}
.cloud .search-btn {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--mustard);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  flex-shrink: 0;
  cursor: pointer;
}
.cloud .search-btn svg { width: 18px; height: 18px; }
.cloud .search-input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
  padding-right: 14px;
}

.cloud .avatar-btn {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--mustard);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/* Logo sopra, poi titolo con pulsanti, ricerca e avatar allineati al centro del titolo */
.cloud .topbar { align-items: flex-end; }
.cloud .topbar > :not(.topbar-brand) {
  margin-bottom: calc((clamp(48px, 6vw, 88px) * 0.92 - 40px) / 2);
}

/* ---------- Breadcrumb / screen head ---------- */
.cloud .cloud-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  min-height: 32px;
}
.cloud .cloud-head .crumb-view svg { width: 24px; height: 24px; color: var(--blue); }
.cloud .cloud-head .crumb-name {
  font-weight: 700;
  font-size: 16px;
}
.cloud .cloud-head .sel-count {
  font-weight: 700;
  font-size: 16px;
}
.cloud .cloud-head .sel-count strong { display: inline-block; margin-right: 4px; }

/* ---------- View switcher ---------- */
.cloud .view-toggle { display: flex; gap: 4px; position: relative; margin-left: auto; }
.cloud .view-toggle-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: var(--radius-sm);
  color: var(--ink); cursor: pointer;
}
.cloud .view-toggle-btn svg { width: 18px; height: 18px; }
.cloud .view-toggle-btn { color: var(--ink-faint); }
.cloud .view-toggle-btn.is-active { color: var(--ink); }
.cloud .view-toggle-btn:hover { background: var(--white); }

/* ---------- File table (list view) ---------- */
.cloud .file-table { width: 100%; }
.cloud .file-thead {
  display: grid;
  grid-template-columns: 1fr 220px 160px 140px 80px;
  gap: 20px;
  padding: 0 18px 18px;
  font-weight: 700;
  font-size: 14px;
  align-items: center;
}
.cloud .file-thead > div { border-left: 1.5px solid var(--ink); padding-left: 20px; }
.cloud .file-thead > div:first-child { border-left: none; padding-left: 0; display: flex; align-items: center; gap: 10px; }

.cloud .file-row {
  display: grid;
  grid-template-columns: 1fr 220px 160px 140px 80px;
  gap: 20px;
  align-items: center;
  padding: 18px;
  border-top: 1.5px solid var(--ink);
  font-size: 14px;
  text-decoration: none;
  color: var(--ink);
}
.cloud .file-list > .file-row:last-child { border-bottom: 1.5px solid var(--ink); }
.cloud .file-row.is-selected, .cloud .file-row:hover { background: rgba(25, 25, 25, 0.05); }
.cloud .file-row .fr-name { font-weight: 400; }
.cloud .file-row.is-selected .fr-name, .cloud .file-row:hover .fr-name { font-weight: 700; }
.cloud .file-row.is-selected .fr-icon { color: var(--blue-deep); }

.cloud .fr-name-col { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cloud .fr-check {
  width: 18px; height: 18px;
  accent-color: var(--blue-deep);
  flex-shrink: 0;
  opacity: 0;
}
.cloud .file-row:hover .fr-check,
.cloud .file-row.is-selected .fr-check,
.cloud .fr-check:focus-visible {
  opacity: 1;
}
.cloud .fr-icon { flex-shrink: 0; display: flex; }
.cloud .fr-icon svg { width: 19px; height: 19px; }
.cloud .fr-icon.is-folder { color: var(--ink); }
.cloud .fr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud .fr-badges { display: flex; gap: 10px; margin-left: auto; padding-left: 10px; flex-shrink: 0; position: relative; }
.cloud .fr-badges svg { width: 17px; height: 17px; }
.cloud .fr-shared { display: flex; align-items: center; justify-content: center; color: var(--ink-soft); flex-shrink: 0; }
.cloud .fr-menu-btn {
  border: none; background: transparent; cursor: pointer;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  color: var(--ink); border-radius: var(--radius-sm); flex-shrink: 0; position: relative;
  opacity: 0;
}
.cloud .file-row:hover .fr-menu-btn,
.cloud .file-row.is-selected .fr-menu-btn,
.cloud .fr-menu-btn:focus-visible,
.cloud .fr-menu-btn[aria-expanded="true"] {
  opacity: 1;
}
.cloud .fr-menu-btn:hover { background: var(--white); }
.cloud .fr-menu-btn svg { width: 17px; height: 17px; }

.cloud .empty-state {
  padding: 60px 18px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ---------- Grid / icons view ---------- */
.cloud .file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 36px 24px;
}
.cloud .grid-item { text-decoration: none; color: var(--ink); position: relative; display: block; }
.cloud .grid-folder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cloud .grid-folder svg { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }
/* Sagoma piena della cartella dietro il contorno: compare quando l'elemento è selezionato */
.cloud .grid-folder::before {
  content: "";
  position: absolute;
  inset: 3%;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M447.1 96H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H63.1c-35.35 0-64 28.65-64 64v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V160C511.1 124.7 483.3 96 447.1 96z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M447.1 96H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H63.1c-35.35 0-64 28.65-64 64v320c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V160C511.1 124.7 483.3 96 447.1 96z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transition: opacity .15s;
}
.cloud .grid-item.is-selected .grid-folder::before { opacity: 1; }
.cloud .grid-meta .fr-name { font-weight: 400; }
.cloud .grid-badge {
  position: absolute;
  bottom: 14%;
  right: 8%;
  width: 22px; height: 22px;
  color: var(--ink);
}
.cloud .grid-badge svg { width: 100%; height: 100%; display: block; }
.cloud .grid-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 14px;
  gap: 8px;
}

.cloud .grid-size { color: var(--ink-soft); flex-shrink: 0; }
.cloud .grid-check {
  position: absolute;
  top: 4px; left: 4px;
  z-index: 2;
}

/* ---------- Context menu ---------- */
.cloud .ctx-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(25,25,25,0.16);
  padding: 10px 0;
  min-width: 220px;
}
.cloud .ctx-menu[hidden] { display: none; }
.cloud .ctx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 22px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.cloud .ctx-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.cloud .ctx-item:hover { background: var(--cream); }
.cloud .ctx-item.is-danger { color: var(--danger); }
.cloud .ctx-sep { height: 1px; background: var(--line-soft); margin: 8px 0; }
.cloud .ctx-item .ctx-arrow { margin-left: auto; }

/* ---------- Options menu (colonne / vista) ---------- */
.cloud .opt-menu {
  position: absolute;
  z-index: 40;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px rgba(25,25,25,0.16);
  padding: 18px 22px;
  min-width: 210px;
}
.cloud .opt-menu[hidden] { display: none; }
.cloud .opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--ink);
  font-family: var(--font-mono);
}
.cloud .opt-row svg { width: 16px; height: 16px; }
.cloud .opt-dot {
  width: 9px; height: 9px; border-radius: 999px;
  border: 1.4px solid var(--ink);
  flex-shrink: 0;
}
.cloud .opt-dot.is-on { background: var(--ink); }
.cloud .opt-row.is-disabled { color: var(--ink-faint); cursor: default; }
.cloud .opt-row.is-disabled .opt-dot { border-color: var(--ink-faint); }

/* ---------- Storage bar ---------- */
.cloud .storage-bar-wrap { margin-top: auto; padding-top: 56px; }
.cloud .storage-labels {
  display: flex;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.cloud .storage-track {
  height: 24px;
  border-radius: var(--radius-pill);
  background: repeating-linear-gradient(
    -45deg, var(--cream-deep), var(--cream-deep) 1.5px, var(--white) 1.5px, var(--white) 7px
  );
  display: flex;
  overflow: hidden;
  border: none;
}
.cloud .storage-seg { height: 100%; display: flex; align-items: center; padding-left: 14px; font-size: 12px; font-weight: 700; }
.cloud .storage-seg.seg-archive { background: var(--blue); }
.cloud .storage-seg.seg-zips { background: var(--pink); }
.cloud .storage-cap { font-weight: 700; color: var(--blue-deep); font-size: 12px; flex-shrink: 0; margin-left: auto; padding: 0 14px 0 12px; align-self: center; }
.cloud .storage-underline { height: 3px; background: var(--mustard); border-radius: 999px; margin-top: 8px; }
.cloud .storage-total-label { text-align: center; font-size: 12px; margin-top: 6px; color: var(--ink-soft); }
.cloud .cloud-footer {
  text-align: right;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 18px;
}

/* ---------- Upload dropzone / selection bar (riuso concetti esistenti) ---------- */
.cloud .cloud-dropzone {
  border: 1.5px dashed var(--ink-faint);
  border-radius: var(--radius-card);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 24px;
}
.cloud .cloud-dropzone:hover { border-color: var(--ink); color: var(--ink); }
.cloud .cloud-dropzone svg { width: 20px; height: 20px; flex-shrink: 0; }
.cloud .cloud-dropzone.is-dragover { background: var(--white); border-color: var(--blue-deep); color: var(--ink); }
.cloud .cloud-dropzone.is-lg { flex-direction: column; padding: 46px 20px; text-align: center; }
.cloud .cloud-dropzone.is-lg svg { width: 30px; height: 30px; }
.cloud .cloud-dropzone .dz-title { font-weight: 700; color: var(--ink); font-size: 15px; }
.cloud .cloud-dropzone .dz-sub { font-size: 13px; }

.cloud .cloud-field { margin-bottom: 22px; }
.cloud .cloud-flabel { display: block; font-weight: 700; font-size: 13px; margin-bottom: 8px; }

.cloud .chip-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.cloud .chip-radio { position: absolute; opacity: 0; pointer-events: none; }
.cloud .chip {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-soft);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: var(--white);
}
.cloud .chip-radio:checked + .chip { background: var(--blue); border-color: var(--blue); }
.cloud .chip-radio:focus-visible + .chip { outline: 2px solid var(--blue-deep); outline-offset: 2px; }

.cloud .cloud-toggle { margin-bottom: 18px; }
.cloud .toggle-cb { position: absolute; opacity: 0; pointer-events: none; }
.cloud .toggle-head { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 14px; }
.cloud .switch-visual {
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--line-soft);
  position: relative;
  flex-shrink: 0;
  transition: background .15s;
}
.cloud .switch-visual .track {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--white);
  transition: transform .15s;
}
.cloud .toggle-cb:checked + .toggle-head .switch-visual { background: var(--blue-deep); }
.cloud .toggle-cb:checked + .toggle-head .switch-visual .track { transform: translateX(16px); }
.cloud .toggle-body { display: none; margin: 10px 0 0 48px; }
.cloud .toggle-cb:checked ~ .toggle-body { display: block; }

.cloud .slug-row { display: flex; align-items: center; background: var(--white); border-radius: var(--radius-sm); border: 1.5px solid var(--line-soft); overflow: hidden; }
.cloud .slug-prefix { padding: 11px 0 11px 14px; color: var(--ink-soft); font-size: 14px; white-space: nowrap; }
.cloud .slug-input { border: none; background: transparent; padding: 11px 14px 11px 4px; font-family: var(--font-mono); font-size: 14px; flex: 1; min-width: 0; }
.cloud .slug-input:focus { outline: none; }

.cloud .picked-list { margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.cloud .picked-item { background: var(--cream); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; display: flex; justify-content: space-between; }

/* ---------- Card di contenuto generica (Sicurezza, Condivisioni, Invia, dettaglio) ---------- */
.cloud .cloud-card {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 26px 28px;
  margin-bottom: 20px;
}
.cloud .cloud-card h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 6px;
}
.cloud .cloud-card .lede { color: var(--ink-soft); font-size: 14px; margin: 0; }
.cloud .cloud-rule { height: 1px; background: var(--line-soft); border: none; margin: 22px 0; }
.cloud .cloud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Bottoni di contenuto (dentro le card, distinti dalle pillole della topbar) ---------- */
.cloud .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.cloud .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.cloud .btn:hover { background: var(--cream); }
.cloud .btn-primary { background: var(--blue); border-color: var(--blue); }
.cloud .btn-primary:hover { filter: brightness(0.97); }
.cloud .btn-danger { border-color: var(--danger); color: var(--danger); }
.cloud .btn-danger:hover { background: #fbecea; }
.cloud .btn-sm { padding: 7px 13px; font-size: 13px; }

.cloud .cloud-input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-soft);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 10px;
}
.cloud .cloud-input:focus { outline: none; border-color: var(--blue-deep); }

.cloud .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
}
.cloud .badge svg { width: 12px; height: 12px; }
.cloud .badge-good { background: #e3f3e9; color: #1e7a44; }
.cloud .badge-warn { background: #fdf0dc; color: #9a6414; }

.cloud .otp-input {
  font-size: 22px;
  letter-spacing: 6px;
  text-align: center;
  max-width: 220px;
}
.cloud .codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.cloud .code-chip {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .cloud .cloud-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "main" "sidebar";
    padding: 20px;
  }
  .cloud .sidebar { flex-direction: row; }
  .cloud .sidebar-nav { flex-direction: row; }
  .cloud .sidebar-bell { display: none; }
  .cloud .topbar-title { font-size: 32px; }
  .cloud .file-thead { display: none; }
  .cloud .file-row { grid-template-columns: 1fr; gap: 6px; }
}

/* =====================================================================
   Allineamenti dell'elenco, come nel layout "Lista Cloud"
   ===================================================================== */

/* Intestazione: separatori verticali alti, testo in basso */
.cloud .file-thead { align-items: end; padding-bottom: 16px; }
.cloud .file-thead > div { padding-top: 26px; line-height: 1.2; }
.cloud .file-thead > div:first-child { gap: 14px; }
.cloud .file-thead > div:first-child svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Ogni colonna delle righe parte esattamente dove parte l'etichetta sopra
   (separatore 1.5px + 20px di spazio) */
.cloud .file-row > * + * { padding-left: 21.5px; }

/* Prima colonna: l'icona sotto il pallino dell'intestazione, il nome sotto "Nome".
   La casella di selezione esce dal flusso e compare a sinistra, al passaggio del mouse. */
.cloud .fr-name-col { position: relative; gap: 14px; }
.cloud .file-row .fr-check { position: absolute; left: -30px; top: 50%; margin: 0; transform: translateY(-50%); }
.cloud .fr-icon svg { width: 19px; height: 19px; }

.cloud .view-toggle-btn svg { width: 19px; height: 19px; }
/* Spazio a sinistra della prima colonna per far comparire la casella fuori dalla riga */
.cloud .file-table { padding-left: 0; }

/* La testata resta in alto: lo spazio libero va all'area dei file, non sopra il logo */
.cloud .cloud-shell { grid-template-rows: auto 1fr; align-content: start; }
/* La barra laterale parte all'altezza dell'intestazione dell'elenco, come nel layout */
.cloud .sidebar { padding-top: 60px; }

/* =====================================================================
   Misure prese dal layout "Lista Cloud"
   ===================================================================== */
/* Proporzioni delle colonne: Nome 31,5% · Data 21,3% · Tipo 17% · Dimensioni 16,2% · vista 14% */
.cloud .file-thead,
.cloud .file-row { grid-template-columns: 31.5fr 21.3fr 17fr 16.2fr 14fr; gap: 0; }
/* Righe più compatte, come nel layout */
.cloud .file-row { padding: 14px 18px; }
/* Nessuna linea tra intestazione e prima riga: le linee stanno tra una riga e l'altra e in fondo */
.cloud .file-list > .file-row:first-child { border-top: none; }
.cloud .file-thead { border-bottom: none; }
/* Icone piccole come nel layout: pallino 14px, cartelle e file 17px */
.cloud .file-thead > div:first-child svg { width: 14px; height: 14px; }
.cloud .fr-icon svg { width: 17px; height: 17px; }
.cloud .file-thead > div:first-child { gap: 17px; }
.cloud .fr-name-col { gap: 14px; }

/* =====================================================================
   Struttura reale della pagina (dal sorgente HTML)
   ===================================================================== */

/* Pulsanti Vista / Colonne nella riga dell'intestazione, a destra dopo l'ultimo separatore.
   Il sito mette "position:relative" direttamente nell'HTML: serve !important. */
.cloud .cloud-head { position: relative; }
.cloud .cloud-head .view-toggle {
  position: absolute !important;
  right: 18px;
  top: calc(100% + 28px);
  height: 50px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin: 0;
  z-index: 5;
}
.cloud .view-toggle-btn { color: var(--ink); width: 28px; height: 24px; padding: 0; }
.cloud .view-toggle-btn:hover { background: transparent; color: var(--blue-deep); }
/* "Colonne" con l'icona elenco del layout */
.cloud .view-toggle-btn[data-opt-toggle="colOptMenu"] svg { display: none; }
.cloud .view-toggle-btn[data-opt-toggle="colOptMenu"]::before {
  content: "";
  width: 19px; height: 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 32h384c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V96c0-35.35 28.65-64 64-64zm0 48c-8.84 0-16 7.16-16 16v320c0 8.8 7.16 16 16 16h384c8.8 0 16-7.2 16-16V96c0-8.84-7.2-16-16-16H64zm48 64h24c13.3 0 24 10.7 24 24s-10.7 24-24 24h-24c-13.25 0-24-10.7-24-24s10.75-24 24-24zm88 0h200c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24zm-88 88h24c13.3 0 24 10.7 24 24s-10.7 24-24 24h-24c-13.25 0-24-10.7-24-24s10.75-24 24-24zm88 0h200c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24zm-88 88h24c13.3 0 24 10.7 24 24s-10.7 24-24 24h-24c-13.25 0-24-10.7-24-24s10.75-24 24-24zm88 0h200c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 32h384c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V96c0-35.35 28.65-64 64-64zm0 48c-8.84 0-16 7.16-16 16v320c0 8.8 7.16 16 16 16h384c8.8 0 16-7.2 16-16V96c0-8.84-7.2-16-16-16H64zm48 64h24c13.3 0 24 10.7 24 24s-10.7 24-24 24h-24c-13.25 0-24-10.7-24-24s10.75-24 24-24zm88 0h200c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24zm-88 88h24c13.3 0 24 10.7 24 24s-10.7 24-24 24h-24c-13.25 0-24-10.7-24-24s10.75-24 24-24zm88 0h200c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24zm-88 88h24c13.3 0 24 10.7 24 24s-10.7 24-24 24h-24c-13.25 0-24-10.7-24-24s10.75-24 24-24zm88 0h200c13.3 0 24 10.7 24 24s-10.7 24-24 24H200c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* I menu Vista e Colonne si aprono sotto i pulsanti */
.cloud .cloud-head .opt-menu { top: calc(100% + 8px) !important; }

/* Intestazione: tutte le celle alte uguali, testo in basso, separatori della stessa altezza */
.cloud .file-thead > div { display: flex; align-items: flex-end; min-height: 50px; padding-top: 0; }
.cloud .file-thead { align-items: stretch; }

/* Le voci "in arrivo" della barra laterale restano nere come nel layout */
.cloud .nav-btn.is-disabled { color: var(--ink); }
.cloud .sidebar-bell .nav-btn { color: var(--ink); }

/* Barra laterale allineata all'intestazione dell'elenco (sotto il percorso) */
.cloud .sidebar { padding-top: 88px; }

/* La riga d'aiuto non è nel layout */
.cloud .cloud-main > p.hint { display: none; }

/* Barra dello spazio come nel layout: etichetta dentro la parte usata, totale sotto la linea */
.cloud .storage-labels { display: none; }
.cloud .storage-total-label { text-align: left; }
.cloud .cloud-footer { text-align: right; }

.cloud .file-thead > div:first-child { align-items: flex-end; }
.cloud .file-thead > div:first-child svg { margin-bottom: 3px; }
.cloud .view-toggle-btn svg { fill: currentColor; }

/* Vista a icone: riga vuota in alto per i pulsanti Vista/Colonne, come nel layout "Icone Cloud" */
.cloud .view-grid { padding-top: 66px; }
.cloud .grid-meta { margin-top: 12px; }
/* Cartella allineata a sinistra con il nome, come nel layout */
.cloud .grid-folder { aspect-ratio: 1.15 / 1; justify-content: flex-start; }
.cloud .grid-folder svg { width: auto; height: 100%; aspect-ratio: 1 / 1; }
.cloud .grid-folder::before {
  inset: 0 auto 0 0;
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  transform: scale(0.94);
}
/* Griglia ariosa come nel layout: cartelle di ~150px con ampio spazio tra le colonne */
.cloud .file-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 170px)); gap: 44px 64px; }

/* Cartella aperta nel percorso come nel layout: retro a contorno, aletta anteriore piena, azzurra */
.cloud .crumb-view > svg { display: none; }
.cloud .crumb-view::before {
  content: "";
  flex-shrink: 0;
  width: 27px; height: 24px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M566.6 211.6C557.5 199.1 543.4 192 527.1 192H134.2C114.3 192 96.2 204.5 89.23 223.1L32 375.8V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32h32c0-35.35-28.65-64-64-64H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h403.1c21.11 0 39.53-13.53 45.81-33.69l60-192C578.4 239.6 575.8 224 566.6 211.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M566.6 211.6C557.5 199.1 543.4 192 527.1 192H134.2C114.3 192 96.2 204.5 89.23 223.1L32 375.8V96c0-17.64 14.36-32 32-32h117.5c8.549 0 16.58 3.328 22.63 9.375L258.7 128H448c17.64 0 32 14.36 32 32h32c0-35.35-28.65-64-64-64H272L226.7 50.75C214.7 38.74 198.5 32 181.5 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h403.1c21.11 0 39.53-13.53 45.81-33.69l60-192C578.4 239.6 575.8 224 566.6 211.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =====================================================================
   Rondine: logo a strati (corpo + 3 stelline) ritagliati da cloud-logo.png.
   Ferma = tutta blu come nel layout. In caricamento fa come l'app HetznerCloud
   sul Mac: rondine e stelline nere, una stellina alla volta si accende di blu
   (grande → piccola in basso → piccola in alto). In errore le stelline diventano rosse.
   Si attiva da cloud.js con le classi is-loading / is-error.
   ===================================================================== */
.cloud .swallow { display: block; position: relative; }
.cloud .swallow > span {
  position: absolute; inset: 0;
  background: var(--blue-deep);
  -webkit-mask: var(--sw-mask) center / contain no-repeat;
          mask: var(--sw-mask) center / contain no-repeat;
}
.cloud .swallow .sw-body   { --sw-mask: url("rondine-swallow.png"); }
.cloud .swallow .sw-big    { --sw-mask: url("rondine-star-big.png"); }
.cloud .swallow .sw-bottom { --sw-mask: url("rondine-star-bottom.png"); }
.cloud .swallow .sw-top    { --sw-mask: url("rondine-star-top.png"); }
.cloud .swallow.is-loading > span,
.cloud .swallow.is-error .sw-body { background: var(--ink); }
.cloud .swallow.is-loading .sw-star { animation: sw-blink 1.2s infinite; }
.cloud .swallow.is-loading .sw-bottom { animation-delay: .4s; }
.cloud .swallow.is-loading .sw-top { animation-delay: .8s; }
.cloud .swallow.is-error .sw-star { background: var(--danger); }
@keyframes sw-blink {
  0%, 33% { background: var(--blue-deep); }
  34%, 100% { background: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .cloud .swallow.is-loading .sw-star { animation-duration: 3.6s; }
  .cloud .swallow.is-loading .sw-bottom { animation-delay: 1.2s; }
  .cloud .swallow.is-loading .sw-top { animation-delay: 2.4s; }
}

/* ---------- Menu utente (avatar) — layout "Dashboard (Menù Utente)" ---------- */
.cloud .user-menu-wrap { position: relative; flex-shrink: 0; }
.cloud .user-menu { right: 0; top: calc(100% + 10px); min-width: 300px; padding: 20px 0 14px; }
.cloud .user-hello {
  color: var(--mustard);
  font-weight: 700;
  font-size: 21px;
  padding: 0 28px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cloud .user-menu .ctx-item { padding: 11px 28px; }
.cloud .user-menu .ctx-item svg { width: 18px; height: 18px; fill: currentColor; }
.cloud .user-menu .ctx-item.is-disabled { color: var(--ink-faint); cursor: default; }
.cloud .user-menu .ctx-item.is-disabled:hover { background: none; }
.cloud .user-menu form { margin: 0; }

/* =====================================================================
   Home ("Studio Folì Archive") — layout "Dashboard"
   ===================================================================== */
.cloud .home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 0.95fr);
  column-gap: clamp(28px, 4.5vw, 72px);
  align-items: end;
}

/* Cartella-scheda: bordo e riempimento con la stessa sagoma (aletta in alto a sinistra) */
.cloud .home-folder {
  --fill: var(--blue);
  position: relative;
  isolation: isolate;
  min-height: 430px;
  padding: 0 26px 24px;
  display: flex;
  flex-direction: column;
}
.cloud .home-folder.is-share { --fill: var(--pink); }
.cloud .home-folder::before,
.cloud .home-folder::after { content: ""; position: absolute; z-index: -1; }
.cloud .home-folder::before {
  inset: 0;
  background: var(--line);
  clip-path: polygon(0 0, 158px 0, 180px 34px, 100% 34px, 100% 100%, 0 100%);
}
.cloud .home-folder::after {
  inset: 1.5px;
  background: var(--fill);
  clip-path: polygon(0 0, 156.5px 0, 178px 32.5px, 100% 32.5px, 100% 100%, 0 100%);
}
.cloud .hf-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 8px 0 0;
  line-height: 1;
}
.cloud .hf-body { margin-top: auto; padding-top: 40px; min-width: 0; }
.cloud .hf-label { font-weight: 700; font-size: 13px; text-transform: uppercase; margin-bottom: 18px; }
.cloud .hf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cloud .hf-list a {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; text-decoration: none; min-width: 0;
}
.cloud .hf-list a:hover span { text-decoration: underline; }
.cloud .hf-list svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.cloud .hf-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud .hf-empty { font-size: 14px; color: var(--ink-soft); margin: 0; }
.cloud .hf-arrow { align-self: flex-end; margin-top: 18px; display: flex; color: var(--ink); }
.cloud .hf-arrow svg { width: 38px; height: 38px; fill: currentColor; }
.cloud .hf-arrow:hover { color: var(--blue-deep); }

/* Agenda: giorno grande sopra, scheda bianca con i prossimi impegni */
.cloud .home-agenda { display: flex; flex-direction: column; min-width: 0; }
.cloud .ha-date { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 14px; }
.cloud .ha-day { font-family: var(--font-display); font-weight: 900; font-size: 78px; line-height: 0.85; letter-spacing: -0.02em; }
.cloud .ha-dow { color: var(--mustard); font-family: var(--font-display); font-size: 17px; }
.cloud .ha-card { background: var(--white); padding: 16px 22px 24px; min-height: 430px; }
.cloud .ha-list { list-style: none; margin: 0; padding: 0; }
.cloud .ha-item {
  display: flex; align-items: center; gap: 14px;
  padding: 24px 0 20px;
  border-bottom: 1.5px solid var(--line);
}
.cloud .ha-item:last-child { border-bottom: none; }
.cloud .ha-text { flex: 1; min-width: 0; }
.cloud .ha-when { color: var(--ink-faint); font-size: 14px; }
.cloud .ha-what { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud .ha-ico { position: relative; width: 28px; height: 32px; flex-shrink: 0; color: var(--ink); }
.cloud .ha-ico svg { width: 100%; height: 100%; fill: currentColor; }
.cloud .ha-ico.is-today { color: var(--mustard); }
/* Numero dei giorni che mancano, dentro l'icona del calendario */
.cloud .ha-num {
  position: absolute; left: 0; right: 0; bottom: 4px;
  text-align: center; font-size: 11px; font-weight: 700; line-height: 1;
}
.cloud .ha-num.is-long { font-size: 8.5px; bottom: 6px; }
.cloud .ha-msg { font-size: 14px; color: var(--ink-soft); margin: 24px 0 0; }
.cloud .ha-msg[hidden] { display: none; }

@media (max-width: 1100px) {
  .cloud .home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 48px; }
  .cloud .home-agenda { grid-column: 1 / -1; }
  .cloud .ha-card { min-height: 0; }
}
@media (max-width: 860px) {
  .cloud .home-grid { grid-template-columns: 1fr; }
  .cloud .home-folder { min-height: 300px; }
  .cloud .user-menu { min-width: 240px; }
}

/* =====================================================================
   Misure dal PSD "Cloud Layout" (tavole a 4134 px = pagina di 1440 px, 1 px CSS = 2,871 px PSD).
   Valori letti dai livelli (posizioni, corpi, interlinee), non campionati dagli screenshot.
   Riferimenti: tavole "Dashboard (Desktop)" e "Lista Cloud".
   ===================================================================== */

/* Pagina: 1440 di riferimento. Logo/titolo a x 88-90, barra laterale 70 px, contenuto
   della Home a x 232, avatar che finisce a x 1337. */
.cloud .cloud-shell {
  max-width: 1440px;
  padding: 75px 103px 24px 90px;
  grid-template-columns: 70px 1fr;
  column-gap: 72px;
}

/* Testata: logo 41×36 a y 75, titolo Cabinet Grotesk Bold 87/62 a y 163;
   pulsanti, ricerca e avatar alti 40 a y 184 (allineati alla PRIMA riga del titolo,
   anche quando il titolo va su due righe come nella Home). */
.cloud .topbar { align-items: flex-start; gap: 16px; margin-bottom: 76px; }
.cloud .topbar > :not(.topbar-brand) { margin-bottom: 0; margin-top: 109px; }
.cloud .topbar-brand { margin-right: 47px; gap: 0; }
.cloud .topbar-logo { width: 41px; height: 36px; margin: 0 0 52px; }
.cloud .topbar-title { font-size: 87px; line-height: 62px; letter-spacing: -0.02em; }
.cloud .pill-btn { font-size: 15.7px; height: 40px; padding: 0 16px 0 12px; gap: 12px; }
.cloud .pill-btn svg { width: 20px; height: 20px; }
.cloud .search-wrap { flex: 0 1 225px; min-width: 160px; max-width: 225px; }
.cloud .search-btn { width: 40px; height: 40px; }
.cloud .search-btn svg { width: 20px; height: 20px; }
.cloud .user-menu-wrap { margin-left: 48px; }
.cloud .avatar-btn { width: 40px; height: 40px; font-size: 13.9px; font-weight: 400; }

/* Barra laterale: pillola 70 px, cerchi 40 px, icone 22 px; campanella in un cerchio da 67 */
.cloud .sidebar { gap: 10px; padding-top: 61px; }
.cloud .cloud-shell.is-home .sidebar { padding-top: 68px; }
.cloud .sidebar-nav { width: 70px; padding: 19px 15px 24px; gap: 23px; }
.cloud .nav-btn { width: 40px; height: 40px; }
.cloud .nav-btn svg { width: 22px; height: 22px; }
.cloud .sidebar-bell { width: 67px; height: 67px; padding: 0; align-items: center; }
.cloud .sidebar-bell .nav-btn svg { width: 19px; height: 21px; }

/* Elenco file (tavola "Lista Cloud"): tabella che parte a x 296, testo 15,7 px,
   righe da 53 px, icone 14 px */
.cloud .cloud-main { padding-left: 64px; }
.cloud .cloud-shell.is-home .cloud-main { padding-left: 0; }
.cloud .file-thead { font-size: 15.7px; }
.cloud .file-row { font-size: 15.7px; padding: 16px 18px; line-height: 21px; }
.cloud .fr-icon svg, .cloud .file-thead > div:first-child svg { width: 14px; height: 14px; }

/* Barra dello spazio: alta 23, etichette 12,2 px dentro le parti usate, linea arancio 5 px
   e totale centrato sotto. Nella Home è larga quanto le due cartelle (728 px). */
.cloud .storage-bar-wrap { padding-top: 52px; }
.cloud .cloud-shell.is-home .storage-bar-wrap { max-width: 728px; }
.cloud .storage-track { height: 23px; }
.cloud .storage-seg {
  font-size: 12.2px; font-weight: 400; padding-left: 8px;
  white-space: nowrap; overflow: hidden;
}
.cloud .storage-cap { font-size: 12.2px; font-weight: 400; color: var(--blue-deep); }
.cloud .storage-underline { height: 5px; margin-top: 7px; }
.cloud .storage-total-label { text-align: center; font-size: 12.2px; color: var(--ink); margin-top: 6px; }
.cloud .cloud-footer { font-size: 10.4px; color: var(--ink); margin-top: 60px; }

/* Home: cartelle 326×409 a x 232 e 623, agenda 329 a x 1009 */
.cloud .home-grid { grid-template-columns: 326fr 326fr 329fr; column-gap: 62px; }
.cloud .home-folder { min-height: 409px; padding: 0 22px 12px 21px; }
.cloud .home-folder::before { clip-path: polygon(0 0, 141px 0, 162px 31px, 100% 31px, 100% 100%, 0 100%); }
.cloud .home-folder::after { clip-path: polygon(0 0, 139.6px 0, 160.2px 29.5px, 100% 29.5px, 100% 100%, 0 100%); }
.cloud .hf-title { font-family: var(--font-mono); font-weight: 700; font-size: 25px; margin: 9px 0 0; letter-spacing: -0.02em; }
.cloud .hf-label { font-size: 12.8px; margin-bottom: 26px; letter-spacing: -0.02em; }
.cloud .hf-list { gap: 0; }
.cloud .hf-list a { font-size: 13.9px; line-height: 29px; gap: 12px; letter-spacing: -0.02em; }
.cloud .hf-list svg { width: 14px; height: 13px; }
.cloud .hf-arrow svg { width: 35px; height: 30px; }

.cloud .ha-date { margin-bottom: 0; height: 69px; gap: 0; }
.cloud .ha-day { font-family: var(--font-mono); font-weight: 700; font-size: 77px; line-height: 56px; letter-spacing: -0.04em; }
.cloud .ha-dow { font-family: var(--font-mono); font-size: 16.7px; line-height: 1; text-transform: uppercase; margin-left: 6px; }
.cloud .ha-card { min-height: 412px; padding: 0 16px; }
.cloud .ha-item { padding: 44px 0 8px 6px; border-bottom-width: 1px; gap: 10px; }
.cloud .ha-when, .cloud .ha-what { font-size: 13.9px; line-height: 22px; letter-spacing: -0.02em; }
.cloud .ha-when { color: var(--ink); opacity: .5; }
.cloud .ha-ico { width: 25px; height: 29px; }
.cloud .ha-num { font-size: 12px; bottom: 3px; }
.cloud .ha-msg { margin: 44px 0 0 6px; font-size: 13.9px; }

/* Menu utente (tavola "Dashboard (Menù Utente)"): 330 px, dal bordo sinistro della ricerca
   al bordo destro dell'avatar; "Ciao …" Space Mono Bold 21 px arancio; voci 13,9 px ogni 40 px */
.cloud .user-menu { top: calc(100% + 4px); min-width: 330px; padding: 24px 0 22px; border-radius: 30px; }
.cloud .user-hello { font-size: 20.9px; padding: 0 29px 22px; letter-spacing: -0.02em; }
.cloud .user-menu .ctx-item { padding: 0 29px; height: 40px; font-size: 13.9px; gap: 12px; }
.cloud .user-menu .ctx-item svg { width: 19px; height: 19px; }

@media (max-width: 1100px) {
  .cloud .cloud-shell { padding: 40px 40px 24px; column-gap: 40px; }
  .cloud .cloud-main { padding-left: 0; }
  .cloud .home-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cloud .cloud-shell.is-home .storage-bar-wrap { max-width: none; }
}
@media (max-width: 860px) {
  .cloud .cloud-shell { padding: 20px; }
  .cloud .topbar > :not(.topbar-brand) { margin-top: 0; }
  .cloud .topbar-title { font-size: 48px; line-height: 40px; }
  .cloud .topbar { margin-bottom: 40px; }
  .cloud .user-menu-wrap { margin-left: auto; }
  .cloud .home-grid { grid-template-columns: 1fr; }
}

/* Il banner delle copie (#jobsBanner) è nascosto con l'attributo hidden, ma ".flashes" di
   style.css lo rimette in display:flex: restava un vuoto di 20 px in cima a ogni pagina. */
.cloud .flashes[hidden] { display: none; }
.cloud .hf-label { margin-bottom: 17px; }

/* Lista Cloud, seconda passata (misurata a 1440×1097 contro la tavola) */
/* Pulsanti della testata a larghezza fissa come nel layout: icona a +10, testo a +45 */
.cloud .topbar-brand { margin-right: 40px; }
.cloud .topbar .pill-btn { min-width: 188px; padding: 0 16px 0 10px; gap: 13px; justify-content: flex-start; }
.cloud .topbar #cloudUploadBtn { min-width: 169px; }
.cloud .topbar .pill-btn svg { width: 22px; height: 18px; }
/* Colonne a filo della tabella (nessun margine interno): i separatori cadono a
   x 623 / 844 / 1021 / 1190 come nel PSD */
.cloud .file-thead { padding: 0; margin-bottom: 12px; }
.cloud .file-thead > div { min-height: 54px; padding-bottom: 2px; }
.cloud .file-row { padding: 16px 0; }
.cloud .fr-menu-btn { height: 21px; }
.cloud .cloud-head .view-toggle { right: 39px; gap: 32px; }
/* Barra dello spazio sempre in fondo alla pagina (y 894 a 1440×1097), anche con pochi file */
.cloud .cloud-main { display: flex; flex-direction: column; }
.cloud .cloud-shell { padding-bottom: 76px; }
.cloud .cloud-footer { margin-top: 70px; }
.cloud .cloud-footer { margin-top: 51px; }
.cloud .cloud-shell { padding-bottom: 72px; }
.cloud .cloud-head .view-toggle { right: 19px; }
.cloud .file-row .fr-name-col { gap: 21px; }
/* Nella radice il layout non mostra la cartella aperta del percorso (c'è solo dentro le cartelle) */
.cloud .crumb-view.is-root::before { display: none; }

/* Icona delle testate di Condivisioni/Sicurezza/Cestino: senza misura usciva 300×150 */
.cloud .cloud-head > span > svg { width: 24px; height: 24px; flex-shrink: 0; }

/* Telefono (tavola "Dashboard (Smartphone)" da riprendere in dettaglio): una colonna sola */
@media (max-width: 860px) {
  .cloud .cloud-shell { grid-template-columns: 1fr; column-gap: 0; padding: 20px 20px 32px; }
  .cloud .topbar { gap: 12px; align-items: center; }
  .cloud .topbar-brand { width: 100%; margin-right: 0; }
  .cloud .topbar-logo { margin-bottom: 28px; }
  .cloud .topbar-title { font-size: 44px; line-height: 38px; }
  .cloud .search-wrap { flex: 1 1 auto; max-width: none; }
  .cloud .user-menu-wrap { margin-left: 0; }
  .cloud .user-menu { right: 0; min-width: 260px; }
  .cloud .sidebar { padding-top: 24px; }
  .cloud .cloud-shell.is-home .sidebar { padding-top: 24px; }
  .cloud .home-folder { min-height: 320px; }
}

/* =====================================================================
   Revisione del committente (screenshot del 27/10)
   ===================================================================== */
/* Barra laterale: 4 voci + campanella. Al passaggio del mouse ogni voce prende il suo
   colore (Cartella azzurro, Condivisioni rosa, Contatti verde, campanella crema); la voce
   attiva lo tiene. Anche le voci "in arrivo" reagiscono, come nel layout. */
.cloud .nav-btn:not(.is-disabled):not(.is-active):hover { background: transparent; }
.cloud .sidebar-nav > .nav-btn.nav-home.is-active,
.cloud .sidebar-nav > .nav-btn.nav-home:hover { background: var(--mustard); }
.cloud .sidebar-nav > .nav-btn.nav-files.is-active,
.cloud .sidebar-nav > .nav-btn.nav-files:hover { background: var(--blue); }
.cloud .sidebar-nav > .nav-btn.nav-shares.is-active,
.cloud .sidebar-nav > .nav-btn.nav-shares:hover { background: var(--pink); }
.cloud .sidebar-nav > .nav-btn.nav-contacts:hover { background: var(--olive); }
.cloud .sidebar-bell .nav-btn.nav-bell:hover { background: var(--cream); }
.cloud .nav-btn { transition: background .15s; }
.cloud .nav-btn.is-disabled { cursor: default; }

/* Cartelle della Home: le sagome disegnate dal committente (layout/box *.png) al posto
   della forma ricostruita in CSS */
.cloud .home-folder::before, .cloud .home-folder::after { content: none; }
.cloud .home-folder {
  aspect-ratio: 941 / 1178;
  min-height: 0;
  background: url("box-cloud.png") center / 100% 100% no-repeat;
}
.cloud .home-folder.is-share { background-image: url("box-share.png"); }

/* Freccia delle cartelle: "freccia box" del layout (tratto più spesso dell'icona FA) */
.cloud .hf-arrow-ico {
  display: block; width: 35px; height: 30px;
  background: currentColor;
  -webkit-mask: url("freccia-box.png") center / contain no-repeat;
          mask: url("freccia-box.png") center / contain no-repeat;
}

/* Avatar caricato dall'utente al posto delle iniziali */
.cloud .avatar-btn.has-img { padding: 0; overflow: hidden; background: var(--white); }
.cloud .avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; }
.cloud .avatar-preview { width: 56px; height: 56px; font-size: 18px; cursor: default; }

/* Home: la barra dello spazio va esattamente dal bordo sinistro del box Cloud al bordo
   destro del box Share, a qualunque larghezza. Stessa griglia della riga dei box, e la
   barra occupa le prime due colonne (azzurro = archivio, rosa = condivisi, arancio = somma). */
.cloud .cloud-shell.is-home .storage-bar-wrap {
  max-width: none;
  display: grid;
  grid-template-columns: 326fr 326fr 329fr;
  column-gap: 62px;
}
.cloud .cloud-shell.is-home .storage-bar-wrap > * { grid-column: 1 / 3; }
.cloud .storage-cap { padding-right: 12px; }

/* Avatar: anello bianco come nel layout (~5% del diametro) */
.cloud .avatar-btn.has-img { padding: 2.5px; background: var(--white); }
.cloud .avatar-preview.has-img { padding: 3px; }

@media (max-width: 1100px) {
  .cloud .cloud-shell.is-home .storage-bar-wrap { display: block; }
}

/* Icone del layout in PNG (share = due persone, link, nuvola di Carica), colorate con
   currentColor tramite maschera */
.cloud .ico {
  display: inline-block; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.cloud .ico-share  { --ico: url("icon-share.png");  width: 20px; height: 16px; }
.cloud .ico-upload { --ico: url("icon-upload.png"); width: 22px; height: 16px; }
.cloud .ico-link   { --ico: url("icon-link.png");   width: 19px; height: 10px; }
.cloud .pill-btn:disabled .ico { opacity: .45; }
/* Il link di un elemento condiviso sta sotto la prima icona della colonna Vista (x 1230),
   i tre puntini restano in fondo alla riga */
.cloud .file-row .fr-badges { margin-left: 0; padding-left: 37px; width: 100%; align-items: center; }
.cloud .file-row .fr-badges .fr-menu-btn { margin-left: auto; }
.cloud .fr-shared { color: var(--ink); }
.cloud .grid-badge .ico-link { width: 22px; height: 11px; }

/* Barra dello spazio: una parte vuota (es. nessun file condiviso) non deve mostrare
   nemmeno il bordino rosa del padding */
.cloud .storage-seg:empty { padding: 0; }
/* Il margine interno sta DENTRO la larghezza: altrimenti ogni parte risultava più lunga del suo
   peso e la linea arancio (somma esatta delle due) non arrivava alla fine della parte rosa */
.cloud .storage-seg { box-sizing: border-box; flex-shrink: 0; padding-left: 0; text-indent: 8px; }

/* =====================================================================
   Spazio Share: Condivisioni | Trasferimenti, campanella. Grafica provvisoria
   (in attesa del layout dedicato), costruita con i pezzi già esistenti.
   ===================================================================== */
.cloud .share-tabs { display: flex; gap: 10px; margin-bottom: 22px; }
.cloud .share-tab {
  height: 40px; padding: 0 20px; display: inline-flex; align-items: center;
  border-radius: var(--radius-pill); background: var(--white);
  font-weight: 700; font-size: 15px; text-decoration: none;
}
.cloud .share-tab.is-active { background: var(--pink); }
.cloud .tx-picked { list-style: none; margin: 0 0 18px; padding: 0; }
.cloud .tx-picked li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.cloud .tx-picked li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud .tx-picked li.is-total { display: block; border: none; font-weight: 700; }
.cloud .tx-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 22px; }
.cloud .tx-fields textarea { resize: vertical; }
.cloud .tx-new.is-uploading .tx-fields, .cloud .tx-new.is-uploading #txDrop { opacity: .5; pointer-events: none; }
.cloud .tx-progress { margin-top: 10px; }
.cloud .tx-bar { height: 14px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.cloud .tx-bar span { display: block; height: 100%; width: 0; background: var(--pink); transition: width .3s; }
.cloud .tx-stats { font-size: 13px; margin-top: 8px; }
.cloud .tx-done { margin-top: 16px; display: grid; gap: 10px; }
.cloud .tx-row { grid-template-columns: 2fr 1.2fr 1.2fr 1fr auto; gap: 16px; padding: 14px 0; }
.cloud .tx-row > * + * { padding-left: 0; }
.cloud .tx-state { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--cream); white-space: nowrap; }
.cloud .tx-state.is-active { background: #e3f3e9; color: #1e7a44; }
.cloud .tx-state.is-expiring { background: #fdf0dc; color: #9a6414; }
.cloud .tx-row.is-unread .fr-name { font-weight: 700; }
.cloud .nav-btn.nav-bell { position: relative; cursor: pointer; }
.cloud .sidebar-bell .nav-btn.nav-bell.is-active { background: var(--cream); }
.cloud .bell-dot {
  position: absolute; top: 7px; right: 8px; width: 9px; height: 9px;
  border-radius: 999px; background: var(--mustard); border: 2px solid var(--white);
}

/* Icone Vista / Colonne in alto a destra (layout "08/09 Cloud - Icone Opzioni"): al passaggio
   del mouse e finché il loro menu è aperto, gli spazi interni si riempiono di azzurro e il
   contorno resta nero. Il riempimento è un SVG sotto l'icona con gli stessi riquadri interni. */
.cloud .view-toggle-btn { position: relative; }
.cloud .view-toggle-btn:hover, .cloud .view-toggle-btn.is-open { color: var(--ink); background: transparent; }
.cloud .view-toggle-btn > svg:not(.vt-fill), .cloud .view-toggle-btn::before { position: relative; z-index: 1; }
.cloud .view-toggle-btn .vt-fill {
  position: absolute; left: 50%; top: 50%; width: 19px; height: 19px;
  transform: translate(-50%, -50%);
  fill: var(--blue); opacity: 0; transition: opacity .12s; z-index: 0;
}
.cloud .view-toggle-btn[data-opt-toggle="colOptMenu"] .vt-fill { display: block; }
.cloud .view-toggle-btn:hover .vt-fill, .cloud .view-toggle-btn.is-open .vt-fill { opacity: 1; }

/* =====================================================================
   Elenco file, revisione del committente:
   - icone di file e cartelle dello stesso spessore di Vista/Colonne: le FA "light" (tratto 32/512)
     vengono ispessite con un contorno dello stesso colore (+18 → ~50, come le "regular");
   - icona e cerchietto in testata si riempiono di azzurro al passaggio e quando selezionati
     (stesso sistema delle icone Vista/Colonne: un SVG .ic-fill sotto, con la forma interna);
   - la casella di selezione non si vede più: si seleziona cliccando icona o riga;
   - intestazioni cliccabili per ordinare, con il triangolino del verso.
   ===================================================================== */
.cloud .fr-icon svg:not(.ic-fill),
.cloud .grid-folder > svg {
  stroke: currentColor; stroke-width: 18px; paint-order: stroke; overflow: visible;
}
.cloud .view-list .fr-check, .cloud .view-grid .grid-check { display: none; }
.cloud .fr-icon { position: relative; cursor: pointer; }
.cloud .fr-icon svg:not(.ic-fill) { position: relative; z-index: 1; }
.cloud .ic-fill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: var(--blue); opacity: 0; transition: opacity .12s; z-index: 0;
}
.cloud .fr-icon:hover .ic-fill,
.cloud .file-row.is-selected .fr-icon .ic-fill { opacity: 1; }
.cloud .file-row.is-selected .fr-icon { color: var(--ink); }
.cloud .file-row { cursor: default; user-select: none; }
.cloud .file-row .fr-name { cursor: default; text-decoration: none; }

/* Cerchietto "seleziona tutto": si colora lo spazio fra il punto e il cerchio */
.cloud .sel-all {
  position: relative; display: inline-flex; width: 16px; height: 16px; padding: 0;
  border: none; background: none; color: var(--ink); cursor: pointer; flex-shrink: 0;
}
.cloud .sel-all svg { width: 16px !important; height: 16px !important; margin: 0 !important; }
.cloud .sel-all svg:not(.ic-fill) { position: relative; z-index: 1; fill: currentColor; }
.cloud .sel-all:hover .ic-fill, .cloud .sel-all.is-on .ic-fill { opacity: 1; }

/* Ordinamento: tutta l'etichetta è cliccabile, il triangolo sta in fondo alla colonna */
.cloud .file-thead > div { padding-right: 10px; }
.cloud .sort-btn {
  flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ink); text-align: left; min-width: 0;
}
.cloud .sort-tri {
  width: 0; height: 0; flex-shrink: 0; margin-bottom: 4px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid currentColor;
  transition: transform .15s;
}
.cloud .sort-btn.is-desc .sort-tri { transform: rotate(180deg); }
.cloud .sort-btn:hover { color: var(--blue-deep); }
/* Percorso e "N Elementi Selezionati" si alternano: lo style inline display:flex del
   percorso batteva l'attributo hidden e li mostrava insieme */
.cloud .cloud-head .crumb-view[hidden], .cloud .cloud-head .sel-view[hidden] { display: none !important; }

/* =====================================================================
   Pannello "Condividi Link" (layout del committente, misure scalate a 1440 px).
   Pagina sotto velata d'azzurro; scelte attive in rosa (è lo spazio Share).
   ===================================================================== */
.share-modal {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0; border: none; border-radius: 26px;
  background: #fff; color: #121212;
  box-shadow: 0 24px 60px rgba(16, 28, 169, 0.16);
  font-family: "Space Mono", ui-monospace, monospace;
}
.share-modal::backdrop { background: rgba(184, 202, 242, 0.72); }
.share-modal form { padding: 26px 22px 18px 26px; display: flex; flex-direction: column; }
.share-modal .sm-title {
  font-family: "Cabinet Grotesk", system-ui, sans-serif; font-weight: 700;
  font-size: 21px; line-height: 1.15; margin: 0; overflow-wrap: anywhere;
}
.share-modal .sm-sub { font-size: 12.5px; color: #a39e94; margin: 6px 0 0; }
.share-modal .sm-label { display: block; font-weight: 700; font-size: 13px; margin: 26px 0 10px; }
.share-modal .sm-slug { border-radius: 10px; height: 45px; }
.share-modal .sm-slug .slug-prefix { background: #faf8f3; align-self: stretch; display: flex; align-items: center; padding-right: 6px; font-size: 13px; }
.share-modal .sm-slug .slug-input { font-size: 13px; font-weight: 700; }
.share-modal .sm-chips { gap: 6px; }
.share-modal .sm-chips .chip { font-size: 10.5px; padding: 8px 12px; border-width: 1.2px; color: #6a6761; }
.share-modal .chip-radio:checked + .chip { background: #f6b8db; border-color: #f6b8db; color: #121212; }
.share-modal .sm-date-label { font-family: inherit; font-weight: 400; font-size: 11.5px; margin-top: 22px; }
.share-modal .sm-date { width: auto; font-size: 11.5px; padding: 8px 10px; margin: 0; }
.share-modal .sm-toggles { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.share-modal .sm-toggle { margin: 0; }
.share-modal .toggle-head { font-size: 13.5px; gap: 10px; }
.share-modal .toggle-head svg { flex-shrink: 0; }
.share-modal .toggle-cb:checked + .toggle-head .switch-visual { background: #f6b8db; }
.share-modal .toggle-body { margin-left: 48px; }
.share-modal .toggle-body .cloud-input { max-width: 260px; margin: 8px 0 0; }
.share-modal .sm-error { margin: 18px 0 0; }
.share-modal .sm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 40px; }
.share-modal .sm-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 20px;
  border-radius: 10px; border: 1.5px solid #e4dfcf; background: #fff; color: #a39e94;
  font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.share-modal .sm-btn svg { width: 15px; height: 15px; }
.share-modal .sm-create:not(:disabled) { background: #f6b8db; border-color: #f6b8db; color: #121212; }
.share-modal .sm-create:not(:disabled):hover { filter: brightness(0.97); }
.share-modal .sm-create:disabled { cursor: default; }
.share-modal .sm-btn#smCancel { border-color: #a39e94; color: #6a6761; }

/* Rondine, revisione del committente: resta SEMPRE blu; in caricamento si accendono a turno le
   stelline, in azzurro (il nostro celeste) e nello spazio Share in rosa. In errore stelline rosse. */
.cloud .swallow { --sw-accent: var(--blue); }
.cloud .cloud-shell.is-share .swallow { --sw-accent: var(--pink); }
.cloud .swallow.is-loading > span,
.cloud .swallow.is-error .sw-body { background: var(--blue-deep); }
.cloud .swallow.is-loading .sw-star { animation-name: sw-accent-blink; }
@keyframes sw-accent-blink {
  0%, 33% { background: var(--sw-accent); }
  34%, 100% { background: var(--blue-deep); }
}
/* Interruttori del pannello: icona "Toggle On" del committente (layout/Icone). Accesa = rosa con
   il pallino a destra; spenta = stessa forma specchiata (pallino a sinistra), grigia. */
.share-modal .sm-switch {
  width: 30px; height: 30px; flex-shrink: 0; background: #a39e94;
  -webkit-mask: url("icon-toggle.svg") center / contain no-repeat;
          mask: url("icon-toggle.svg") center / contain no-repeat;
  transform: scaleX(-1); transition: transform .15s, background .15s;
}
.share-modal .toggle-cb:checked + .toggle-head .sm-switch { transform: none; background: #f6b8db; }
.share-modal .toggle-cb:focus-visible + .toggle-head .sm-switch { outline: 2px solid #101ca9; outline-offset: 2px; border-radius: 999px; }
.share-modal .toggle-body { margin-left: 40px; }
.share-modal .sm-error[hidden] { display: none; }
.share-modal .sm-chips { flex-wrap: nowrap; gap: 5px; }
.share-modal .sm-chips .chip { padding: 8px 10px; font-size: 10px; white-space: nowrap; }
.share-modal .sm-date { display: inline-block; width: 160px; }
.share-modal .sm-switch { transition: background .15s; }

/* Le pagine lunghe (Share, Sicurezza…) hanno la barra di scorrimento e le corte no: la barra
   toglie ~15 px e il contenuto centrato si spostava di mezza barra fra una pagina e l'altra
   (rondine e titolo "saltavano"). Spazio della barra sempre riservato = posizione identica. */
html { scrollbar-gutter: stable; }

/* =====================================================================
   Visore anteprime (PSD, TIFF, immagini, PDF). Sfondo scuro: le tavole si giudicano meglio
   senza la carta crema intorno. Barra in alto con nome, frecce, Scarica, Condividi, chiudi.
   ===================================================================== */
.pv-modal {
  width: calc(100vw - 48px); height: calc(100vh - 48px); max-width: none; max-height: none;
  padding: 0; border: none; border-radius: 20px; overflow: hidden;
  background: #1c1c1c; color: #f4f1ea;
  font-family: "Space Mono", ui-monospace, monospace;
}
.pv-modal[open] { display: flex; flex-direction: column; }
.pv-modal::backdrop { background: rgba(18, 18, 18, 0.82); }
.pv-bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 12px 22px;
  border-bottom: 1px solid rgba(244, 241, 234, 0.12); flex-shrink: 0;
}
.pv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-meta { font-size: 12px; color: #a39e94; }
.pv-btn {
  height: 38px; min-width: 38px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; background: rgba(244, 241, 234, 0.08); color: #f4f1ea;
  font: inherit; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer;
}
.pv-btn svg { width: 18px; height: 18px; }
.pv-btn.pv-text { padding: 0 16px; }
.pv-btn:hover:not(:disabled) { background: #b8caf2; color: #121212; }
.pv-btn:disabled { opacity: .3; cursor: default; }
.pv-btn .ico { --ico: url("icon-link.png"); width: 17px; height: 9px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.pv-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 18px; }
.pv-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); background: #fff; }
.pv-pdf { width: 100%; height: 100%; border: none; border-radius: 8px; background: #fff; }
.pv-msg { color: #a39e94; font-size: 14px; text-align: center; max-width: 420px; }
.pv-img[hidden], .pv-pdf[hidden], .pv-msg[hidden] { display: none; }
@media (max-width: 860px) {
  .pv-modal { width: 100vw; height: 100vh; border-radius: 0; }
  .pv-btn.pv-text { padding: 0 10px; font-size: 0; gap: 0; }
  .pv-btn.pv-text svg, .pv-btn.pv-text .ico { margin: 0; }
}

/* Pannello "Condividi" (cartella con una persona): riusa .share-modal di "Crea Link" */
.share-modal .fs-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-modal .fs-who .cloud-input { margin: 0; font-size: 13px; height: 45px; border-radius: 10px; }
.share-modal .fs-note { font-size: 12px; color: #6a6761; margin: 6px 0 0; }
.share-modal .sm-create .ico-share { width: 18px; height: 14px; }
@media (max-width: 520px) { .share-modal .fs-who { grid-template-columns: 1fr; } }
/* badge: link sotto la prima icona Vista, "persone" sotto la seconda (layout "Lista Cloud") */
.cloud .file-row .fr-badges { gap: 31px; }
.cloud .fr-shared-gap { width: 19px; flex-shrink: 0; }
.cloud .fr-shared .ico-share { width: 19px; height: 15px; }
.cloud .fs-row .ico-share { width: 17px; height: 13px; }
.cloud .fs-row { grid-template-columns: 1.6fr 1fr 1fr 1.2fr auto; }

/* =====================================================================
   Finestre "Crea Link" e "Condividi", seconda versione dal layout del committente:
   - TUTTI i pulsanti (scelte di scadenza, Crea link/Condividi, Annulla) sono grigi a riposo e
     rosa al passaggio del mouse e quando sono selezionati;
   - "Personalizzata", se scelta, diventa il campo data dentro la stessa pillola;
   - interruttori a destra della riga, neri da accesi.
   ===================================================================== */
.share-modal form { min-height: 600px; }
.share-modal .sm-label { margin-top: 36px; }
.share-modal .sm-title + .sm-sub + .sm-label { margin-top: 34px; }
.share-modal .sm-slug .slug-input::placeholder { color: #b5b0a5; font-weight: 400; }

/* pillole della scadenza */
.share-modal .sm-chips { flex-wrap: nowrap; gap: 6px; align-items: center; }
.share-modal .sm-chips .chip {
  height: 30px; display: inline-flex; align-items: center; padding: 0 11px;
  font-size: 10.5px; font-weight: 700; color: #a39e94;
  background: #fff; border: 1.5px solid #ece8dd; border-radius: 999px;
  white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.share-modal .sm-chips .chip:hover,
.share-modal .chip-radio:checked + .chip { background: #f6b8db; border-color: #f6b8db; color: #121212; }
.share-modal .chip-radio:focus-visible + .chip { outline: 2px solid #101ca9; outline-offset: 2px; }
/* "Personalizzata" → campo data nella stessa pillola */
.share-modal .chip-date { display: none; font-family: inherit; color: #121212; width: 128px; }
.share-modal .chip-radio.is-custom:checked + .chip { display: none; }
.share-modal .chip-radio.is-custom:checked + .chip + .chip-date { display: inline-flex; background: #fff; border-color: #f6b8db; }
.share-modal .chip-date:focus { outline: none; border-color: #f6b8db; box-shadow: 0 0 0 2px #f6b8db66; }

/* interruttori a destra */
.share-modal .sm-toggles { margin-top: 56px; gap: 22px; }
.share-modal .toggle-head { width: 100%; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.share-modal .toggle-head .sm-switch { margin-left: auto; width: 34px; height: 34px; background: #d9d5cc; }
.share-modal .toggle-cb:checked + .toggle-head .sm-switch { background: #121212; }
.share-modal .toggle-body { margin: 10px 0 0 27px; }

/* pulsanti in fondo: grigi a riposo, rosa al passaggio */
.share-modal .sm-actions { margin-top: auto; padding-top: 40px; }
.share-modal .sm-btn,
.share-modal .sm-create:not(:disabled) {
  height: 42px; padding: 0 22px; border-radius: 12px;
  background: #fff; border: 1.5px solid #a39e94; color: #a39e94;
  transition: background .12s, border-color .12s, color .12s;
}
.share-modal .sm-btn:hover:not(:disabled),
.share-modal .sm-btn:focus-visible { background: #f6b8db; border-color: #f6b8db; color: #121212; outline: none; }
.share-modal .sm-btn:disabled { opacity: .55; cursor: default; }
.share-modal .sm-btn .ico-share { width: 18px; height: 14px; }
/* la regola generica delle pillole (.sm-chips .chip) era più specifica: qui si vince di nuovo */
.share-modal .sm-chips .chip.chip-date { display: none; }
.share-modal .sm-chips .chip-radio.is-custom:checked + .chip { display: none; }
.share-modal .sm-chips .chip-radio.is-custom:checked + .chip + .chip.chip-date {
  display: inline-flex; background: #fff; border-color: #f6b8db; color: #121212; cursor: text;
}
.share-modal { overflow-x: hidden; }
/* la riga della scadenza (con la data al posto di "Personalizzata") deve stare su una riga */
.share-modal { width: min(500px, calc(100vw - 32px)); }
.share-modal .sm-chips .chip { padding: 0 9px; font-size: 10px; }
.share-modal .sm-chips .chip.chip-date { width: 112px; padding: 0 6px 0 9px; }
@media (max-width: 520px) { .share-modal .sm-chips { flex-wrap: wrap; } }

/* =====================================================================
   Spazio Share: testata come quella del Cloud (tre pulsanti, ricerca, avatar).
   Scheda attiva in rosa, come "Carica" è azzurro nel Cloud.
   ===================================================================== */
.cloud .topbar .pill-btn.share-pill { min-width: 188px; }
.cloud .topbar .pill-btn.share-pill.is-on { background: var(--pink); }
.cloud .topbar .pill-btn.share-pill:not(.is-on):hover { background: var(--pink); filter: none; }

/* Elenchi dello spazio Share: al passaggio sulla riga l'icona si riempie d'azzurro */
.cloud .t-row:hover .fr-icon .ic-fill,
.cloud .fs-row:hover .fr-icon .ic-fill { opacity: 1; }
.cloud .t-row .fr-icon svg, .cloud .fs-row .fr-icon svg { width: 17px; height: 17px; }
/* I pulsanti partono sempre a x 360 (1440 px), qualunque sia il titolo (Cloud, Share…) */
@media (min-width: 861px) {
  .cloud .cloud-shell:not(.is-home) .topbar-brand { width: 230px; margin-right: 24px; }
  /* Share: pulsanti col testo più lungo; la ricerca si stringe invece di mandare l'avatar a capo */
  .cloud .cloud-shell.is-share .topbar { flex-wrap: nowrap; }
  .cloud .cloud-shell.is-share .topbar .pill-btn.share-pill { min-width: 0; flex-shrink: 0; }
  .cloud .cloud-shell.is-share .search-wrap { min-width: 120px; }
}
@media (min-width: 861px) {
  .cloud .cloud-shell:not(.is-home) .topbar-brand { flex-shrink: 0; }
}
/* stessa regola per il Cloud: su schermi più stretti si stringe la ricerca, l'avatar non va a capo */
@media (min-width: 861px) {
  .cloud .cloud-shell:not(.is-home) .topbar { flex-wrap: nowrap; }
  .cloud .cloud-shell:not(.is-home) .search-wrap { min-width: 120px; }
  .cloud .cloud-shell:not(.is-home) .topbar .pill-btn { flex-shrink: 0; }
}

/* Il contenuto parte sempre all'altezza dell'elenco del Cloud (y 360 a 1440 px, in linea con la
   barra laterale): dove manca la riga del percorso (.cloud-head, 32 px + 28 di margine) — Share,
   Trasferimenti, dettagli, Notifiche — si lascia lo stesso spazio. */
@media (min-width: 861px) {
  .cloud .cloud-shell:not(.is-home) .cloud-main:not(:has(> .cloud-head)) { padding-top: 60px; }
}

/* Elenco del Cloud: l'icona si riempie d'azzurro passando su TUTTA la riga (non solo sull'icona),
   come negli elenchi dello spazio Share; nella vista a icone si accende la sagoma della cartella. */
.cloud .view-list .file-row:hover .fr-icon .ic-fill { opacity: 1; }
.cloud .grid-item:hover .grid-folder::before { opacity: 1; }

/* Menu "…": "Elimina Condivisione" su una riga sola (il menu si allarga quanto serve) */
.cloud .ctx-menu .ctx-item { white-space: nowrap; }

/* Menu avatar come nel layout: Esci staccato dalle altre voci */
.cloud .user-menu form { margin-top: 24px; }

/* =====================================================================
   Home, layout del 28/10 (tavola "Dashboard (Desktop)", 1 px CSS = 2,871 px PSD).
   Niente più cartelle-scheda: titolo su un'etichetta colorata 126×30, filetto a 50 px,
   "LAST …" e l'elenco rientrati di 21 px, freccia in fondo alla colonna.
   Colonne 298 + 105 + 298 + 75 + agenda 329; le colonne finiscono 14 px sopra l'agenda.
   Testi 1,5 px più piccoli di prima (tranne i titoli grandi).
   ===================================================================== */
.cloud .home-folder {
  --fill: var(--blue);
  background: none; aspect-ratio: auto; isolation: auto;
  min-height: 392px; padding: 0; margin-bottom: 14px;
}
.cloud .home-folder.is-share { --fill: var(--pink); background: none; }
.cloud .hf-title {
  align-self: flex-start; box-sizing: border-box;
  width: 126px; height: 30px; padding-left: 21px; margin: 0;
  background: var(--fill); line-height: 31px;
}
.cloud .hf-body { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.cloud .hf-label { padding-left: 21px; font-size: 11.3px; line-height: 13px; margin-bottom: 15px; }
.cloud .hf-list { padding-left: 21px; }
.cloud .hf-list a { font-size: 12.4px; line-height: 29.5px; }
/* Cloud: nome e, sotto, il giorno di arrivo in grigio (voci ogni 60 px) */
.cloud .hf-list.is-dated { gap: 20px; margin-top: 3px; }
.cloud .hf-list.is-dated a { line-height: 20px; }
.cloud .hf-date { padding-left: 26px; font-size: 12.4px; line-height: 20px; letter-spacing: -0.02em; color: var(--ink); opacity: .5; }
.cloud .hf-empty { padding-left: 21px; font-size: 12.4px; }
.cloud .hf-arrow { margin-top: auto; }

.cloud .ha-when, .cloud .ha-what, .cloud .ha-msg { font-size: 12.4px; }
.cloud .ha-dow { font-size: 15.2px; }

/* Numero dei giorni centrato nella parte bianca del calendario (sotto la fascia in alto) */
.cloud .ha-num {
  top: 37.5%; bottom: 9%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
}
.cloud .ha-num.is-long { bottom: 9%; font-size: 8px; letter-spacing: -0.04em; }

@media (min-width: 1101px) {
  .cloud .home-grid { grid-template-columns: 298fr 105fr 298fr 75fr 329fr; column-gap: 0; }
  .cloud .home-folder.is-cloud { grid-column: 1; }
  .cloud .home-folder.is-share { grid-column: 3; }
  .cloud .home-agenda { grid-column: 5; }
  /* barra dello spazio: dal bordo sinistro di Cloud, lunga 728 come nel layout */
  .cloud .cloud-shell.is-home .storage-bar-wrap { grid-template-columns: 728fr 377fr; column-gap: 0; }
  .cloud .cloud-shell.is-home .storage-bar-wrap > * { grid-column: 1; }
}

/* Percorso: il nome della cartella poggia sulla base dell'icona (allineamento alla linea di
   base; il fondo del disegno è 1,5 px sopra il bordo del riquadro 27×24, da qui il margine) */
.cloud .crumb-view::before { margin-bottom: -1.5px; }

/* Stessa misura di testo della Home in tutti gli elenchi (File, Share, Cestino…): 12,4 px */
.cloud .file-thead, .cloud .file-row { font-size: 12.4px; }
.cloud .cloud-card .lede { font-size: 12.4px; }

/* Home: le icone degli elenchi come quelle dell'elenco File (tratto ispessito, riempimento
   azzurro passando sulla voce) */
.cloud .hf-list .fr-icon svg:not(.ic-fill) { width: 14px; height: 14px; }
.cloud .hf-list .fr-icon { cursor: inherit; }
.cloud .hf-list li:hover .fr-icon .ic-fill { opacity: 1; }
.cloud .hf-list a:hover span { text-decoration: none; }
.cloud .hf-list .fr-icon .ic-fill { fill: var(--blue); width: 100%; height: 100%; }

/* =====================================================================
   Barra laterale: cerchi "liquidi". Dietro le icone c'è uno strato con tre cerchi
   (quello dell'icona attiva, la goccia che segue il mouse e una gocciolina che la insegue
   in ritardo); il filtro SVG #navGoo sfoca e ritaglia lo strato, così i cerchi vicini si
   fondono come un liquido e la goccia "si stacca" dall'icona attiva. Lo accende cloud.js
   (classe has-goo): senza JS restano i cerchi pieni di prima.
   ===================================================================== */
.cloud .goo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cloud .nav-goo { display: none; }
.cloud .sidebar-nav.has-goo { position: relative; isolation: isolate; }
.cloud .sidebar-nav.has-goo > .nav-btn { position: relative; z-index: 1; background: transparent !important; }
.cloud .sidebar-nav.has-goo .nav-goo {
  display: block; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; filter: url(#navGoo);
}
.cloud .nav-goo > span {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1));
}
.cloud .nav-goo .goo-drop {
  transition: transform .45s cubic-bezier(.55, 0, .2, 1), background-color .45s ease;
}
.cloud .nav-goo .goo-tail {
  width: 16px; height: 16px;
  transition: transform .62s cubic-bezier(.6, 0, .25, 1), background-color .55s ease;
}
.cloud .nav-goo.is-still > span { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cloud .nav-goo > span { transition: none !important; }
}

/* Angoli dei box bianchi più netti (richiesta del 28/10): schede, menu, finestre e agenda
   a 8 px invece di 20–30. Le pillole (pulsanti, ricerca, barra laterale) restano tonde. */
.cloud { --radius-card: 8px; }
.cloud .user-menu, .share-modal, .pv-modal { border-radius: 8px; }
.cloud .ha-card { border-radius: 8px; }

/* Stelline del caricamento: arancioni dappertutto, tranne Cloud (azzurre) e Share (rosa) */
.cloud .swallow { --sw-accent: var(--mustard); }
.cloud .cloud-shell.is-files-tab .swallow { --sw-accent: var(--blue); }
.cloud .cloud-shell.is-share .swallow { --sw-accent: var(--pink); }