/* =====================================================================
   Tuenti — gestione account (Frutiger Aero, no backdrop-filter/blur:
   solo transform/opacity per le animazioni)
   ===================================================================== */

/* ---------- shared account-picture / password UI ---------------------
   Usata da Tuenti (qui) e dalla scheda Account di Impostazioni
   (js/apps/settings.js, il cui file .css è fuori dai file che posso
   toccare in questo task): tenuta qui perché tuenti.css è comunque
   caricato su ogni pagina di LentilsOS.
   ----------------------------------------------------------------- */
.pwf-label { display: block; margin: 10px 0 4px; font-size: 0.85rem; font-weight: 600; color: #0b3a80; }
.pwf-label:first-child { margin-top: 0; }
.pwf-row { position: relative; display: flex; }
.pwf-row .app-input { padding-right: 42px; }
.pwf-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(120, 190, 255, 0.25); font-size: 0.95rem; line-height: 1;
  display: grid; place-items: center; transition: background 0.15s ease;
}
.pwf-eye:hover { background: rgba(120, 190, 255, 0.45); }
.pwf-eye.on { background: linear-gradient(180deg, #9fe0ff, #3aa0ff); }
.pwf-meter { height: 6px; border-radius: 999px; margin: 8px 0 2px; background: rgba(0, 60, 150, 0.15); overflow: hidden; }
.pwf-meter span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 0.2s ease, background 0.2s ease; background: #d0d0d0; }
.pwf-meter.lvl0 span { background: linear-gradient(90deg, #ff8a6a, #e0432a); }
.pwf-meter.lvl1 span { background: linear-gradient(90deg, #ffc36a, #f09609); }
.pwf-meter.lvl2 span { background: linear-gradient(90deg, #ffe86a, #d8c022); }
.pwf-meter.lvl3 span { background: linear-gradient(90deg, #c8ff8a, #7fd83c); }
.pwf-meter.lvl4 span { background: linear-gradient(90deg, #8affc6, #2fb15a); }
.pwf-err { min-height: 1.1em; margin: 6px 0 0; font-size: 0.8rem; font-weight: 600; color: #c2321c; }
.pwf-err[hidden] { display: none; }

.acc-avatar-wrap { position: relative; width: 64px; height: 64px; flex: none; }
.acc-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 3px 8px rgba(0,40,120,0.35); }
.acc-avatar-edit {
  position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.85); cursor: pointer; font-size: 0.8rem; padding: 0;
  background: linear-gradient(180deg, #9fe0ff, #1e90ff); box-shadow: 0 2px 5px rgba(0,30,110,0.4);
  display: grid; place-items: center;
}
.acc-avatar-edit:hover { filter: brightness(1.1); }
.acc-role-badge { display: inline-block; margin-top: 4px; }

/* ---------- Tuenti app ---------- */
.app.tuenti { background: linear-gradient(180deg, rgba(235,248,255,0.5), rgba(210,238,255,0.35)); }
.app.tuenti .tuenti-head {
  flex: none; display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(205,232,255,0.55));
  border-bottom: 1px solid rgba(0,60,150,0.2);
}
.app.tuenti .tuenti-head > img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,20,80,0.35)); }
.app.tuenti .tuenti-title h2 { margin: 0; font: 700 1.25rem var(--font-display); }
.app.tuenti .tuenti-title p { margin: 1px 0 0; font-size: 0.82rem; opacity: 0.75; }
.app.tuenti .tuenti-new { margin-left: auto; }
.app.tuenti .tuenti-content { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px; }
.app.tuenti .tuenti-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-content: start; }
.app.tuenti .tuenti-grid.solo { grid-template-columns: minmax(240px, 360px); justify-content: center; }
.app.tuenti .tuenti-foot { flex: none; padding: 8px 18px; font-size: 0.76rem; opacity: 0.7; border-top: 1px solid rgba(0,60,150,0.15); background: rgba(255,255,255,0.4); }

.app.tuenti .tuenti-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.app.tuenti .tuenti-card.self { outline: 2px solid rgba(120,210,255,0.9); }
.app.tuenti .tc-top { display: flex; align-items: center; gap: 12px; }
.app.tuenti .tc-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none; padding: 2px;
  background: linear-gradient(180deg, #ffffff, #bfe9ff 50%, #4fb3ff 51%, #cfefff);
  box-shadow: 0 3px 8px rgba(0,40,120,0.35);
}
.app.tuenti .tc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.app.tuenti .tc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app.tuenti .tc-info b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app.tuenti .tc-you { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; background: rgba(0,60,150,0.15); }
.app.tuenti .tc-meta { margin: 0; font-size: 0.76rem; opacity: 0.7; }
.app.tuenti .tc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.app.tuenti .tc-actions .app-btn { height: 27px; padding: 0 10px; font-size: 0.74rem; }
.app.tuenti .tc-actions .app-btn.danger { background: linear-gradient(180deg, #ffd0c6 0%, #ff7a5c 45%, #e0432a 50%, #c2321c 100%); border-color: #8f2312; color: #fff; text-shadow: 0 -1px 0 rgba(120,0,0,0.4); }

/* ---------- dialogs ---------- */
.tuenti-dlg .dlg-body { max-height: min(60vh, 480px); overflow-y: auto; padding-right: 6px; }

/* ---------- dialogs: nuovo account foto ---------- */
.tn-photo-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.tn-photo-preview { width: 52px; height: 52px; border-radius: 50%; flex: none; overflow: hidden; box-shadow: 0 3px 8px rgba(0,40,120,0.35); }
.tn-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-photo-input { flex: 1; height: auto; padding: 6px 8px; }

/* =====================================================================
   Mobile: single-column cards, bigger tap targets on card actions and
   the shared password/photo dialog fields (used here and by Impostazioni).
   Dialogs already become bottom sheets via mobile.css.
   ===================================================================== */
html.mobile .pwf-eye { width: 44px; height: 44px; }
html.mobile .app.tuenti .tuenti-head { padding: 10px 14px; gap: 10px; }
html.mobile .app.tuenti .tuenti-head > img { width: 38px; height: 38px; }
html.mobile .app.tuenti .tuenti-title h2 { font-size: 1.1rem; }
html.mobile .app.tuenti .tuenti-new { min-height: 44px; }
html.mobile .app.tuenti .tuenti-content { padding: 12px 14px; -webkit-overflow-scrolling: touch; }
html.mobile .app.tuenti .tuenti-grid,
html.mobile .app.tuenti .tuenti-grid.solo { grid-template-columns: 1fr; }
html.mobile .app.tuenti .tuenti-card { padding: 16px; }
html.mobile .app.tuenti .tc-avatar { width: 60px; height: 60px; }
html.mobile .app.tuenti .tc-actions .app-btn { min-height: 44px; padding: 0 14px; font-size: 0.85rem; flex: 1 1 auto; }
html.mobile .tuenti-dlg .dlg-body { max-height: 55vh; -webkit-overflow-scrolling: touch; }
html.mobile .tn-photo-row { flex-wrap: wrap; }
html.mobile .tn-photo-input { min-height: 44px; }