/* Catalog: solo quello che il kit omnIA non ha già. Solo token del kit, nessun colore scritto qui (GUIDA §6).
   Il colore di ogni box arriva dai dati come --tile-bg / --tile-ink (attributo style, calcolato in PHP). */

/* ---------- generali ---------- */
.flashes,.stack{display:flex;flex-direction:column;gap:8px;min-width:0}
.stack{gap:20px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.hint{font-size:12.5px;color:var(--ink-3)}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
.empty-ic{width:28px;height:28px}
.empty-title{color:var(--ink)}
.check input[type=radio]{border-radius:var(--radius-pill)}
.check input[type=radio]::before{width:8px;height:8px;border-radius:var(--radius-pill);clip-path:none}

/* conferma nella pagina (al posto di confirm()): <details class="confirm"> */
.confirm{position:relative}
.confirm > summary{list-style:none;width:max-content}
.confirm > summary::-webkit-details-marker{display:none}
.confirm__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:10px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink)}
.confirm--pop .confirm__body{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:280px;margin:0;background:var(--surface);box-shadow:var(--pop-shadow)}

/* ---------- box di lancio (home, catalogo, anteprima) ---------- */
.tile{position:relative;display:flex;min-width:0;height:100%;min-height:152px;border-radius:var(--radius);background:var(--tile-bg);color:var(--tile-ink);box-shadow:var(--shadow);text-decoration:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;transition:transform .15s ease,box-shadow .15s ease}
.tile__link,a.tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-width:0;padding:16px;color:inherit;text-decoration:none}
a.tile{color:var(--tile-ink)}
.tile__link{border-radius:inherit}
a.tile:hover,.tile:has(> a.tile__link:hover){transform:translateY(-2px);box-shadow:var(--pop-shadow)}
a.tile:focus-visible,.tile__link:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.tile__logo{display:grid;place-items:center;width:48px;height:48px;margin-bottom:auto;flex:none}
.tile__logo img{display:block;width:48px;height:48px;object-fit:contain;border-radius:10px}
.tile__nologo{width:36px;height:36px;opacity:.7}
.tile__name{max-width:100%;margin-top:12px;font-size:15px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile__desc{max-width:100%;font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tile.is-off{background:var(--muted-soft);color:var(--ink-2);box-shadow:none}
.tile.is-off .tile__logo img{filter:grayscale(1);opacity:.55}
.tile__off{position:absolute;top:29px;left:76px}

/* pulsanti sul box: maniglia per spostare e × per togliere */
.tile__remove{position:absolute;top:8px;right:8px;margin:0}
.tile__grip{position:absolute;top:8px;right:44px;touch-action:none;cursor:grab}
.tile__btn{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--tile-ink) 14%,transparent);color:inherit;cursor:pointer;opacity:0;transition:opacity .15s,background .15s}
.tile__btn .ic{width:16px;height:16px}
.tile__btn:hover{background:color-mix(in srgb,var(--tile-ink) 26%,transparent)}
.tile__btn:focus-visible{opacity:1;outline:2px solid var(--focus);outline-offset:2px}
.tile:hover .tile__btn,.tile:focus-within .tile__btn{opacity:1}
@media (hover:none){.tile__btn{opacity:1}}
.tile.is-off .tile__btn{background:color-mix(in srgb,var(--ink) 10%,transparent)}

/* griglia della home: 20 box, 5 colonne su schermo largo, poi 4, 3 e 2 (l'ordine dei box non cambia) */
.launch__grid{display:grid;grid-template-columns:repeat(var(--launch-cols,5),minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.slot{position:relative;min-width:0;min-height:152px;border-radius:var(--radius)}
.slot__empty{display:grid;place-items:center;height:100%;min-height:152px;border:1.5px dashed var(--line-strong);border-radius:var(--radius);color:var(--ink-3);text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.slot__empty .ic{width:22px;height:22px}
.slot__empty:hover{color:var(--brand-ink);border-color:var(--brand-ink);background:var(--brand-soft)}
.slot.is-target{outline:2px dashed var(--focus);outline-offset:4px}
.slot.is-target .slot__empty{border-color:var(--brand-ink);background:var(--brand-soft)}
.slot.is-target .tile{transform:scale(.96)}
.tile.is-dragging{opacity:.35;box-shadow:none}
.tile.is-pressing{transform:scale(.97)}
.tile-ghost{position:fixed;left:0;top:0;z-index:60;margin:0;pointer-events:none;box-shadow:var(--pop-shadow);transform-origin:center;opacity:.95}
.tile-ghost .tile__btn{display:none}
.tile.is-moved{animation:tile-moved .5s ease}
@keyframes tile-moved{0%{transform:scale(.94)}60%{transform:scale(1.02)}100%{transform:none}}
body.is-dragging-tile{cursor:grabbing;user-select:none;-webkit-user-select:none}
@media (max-width:1180px){.launch{--launch-cols:4}}
@media (max-width:900px){.launch{--launch-cols:3}}
@media (max-width:600px){.launch{--launch-cols:2}.launch__grid{gap:12px}.tile,.slot,.slot__empty{min-height:136px}.tile__link{padding:14px}}

/* ---------- catalogo ---------- */
.catalog-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin:0;padding:0;list-style:none}
.card{display:flex;flex-direction:column;gap:10px;min-width:0}
.card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.card__foot form{margin:0}

/* ---------- amministrazione ---------- */
.app-cell{display:flex;align-items:center;gap:12px;min-width:0}
.app-cell__logo{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--tile-bg)}
.app-cell__logo img{display:block;width:28px;height:28px;object-fit:contain;border-radius:6px}
.app-cell__url{max-width:340px;overflow:hidden;text-overflow:ellipsis}
.applist{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.applist li{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.applist .app-cell__logo{width:30px;height:30px;border-radius:8px}
.applist .app-cell__logo img{width:22px;height:22px}

.editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.editor__preview{position:sticky;top:20px}
.tile--preview{max-width:260px;min-height:160px;user-select:auto;-webkit-user-select:auto}
.color-field{display:flex;align-items:center;gap:8px}
.color-field__swatch{width:46px;height:38px;flex:none;padding:3px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.input--file{height:auto;padding:7px 10px}
.textcolor{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;margin:0;padding:0;border:0}
.textcolor > legend{margin-bottom:6px;padding:0;font-weight:600;font-size:13px}
.textcolor__options{display:flex;flex-wrap:wrap;gap:8px 20px}
.textcolor__check{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:13px}
.visibility{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;margin:0;padding:0;border:0}
.visibility > legend{margin-bottom:6px;padding:0;font-weight:600;font-size:13px}
.userpick{display:flex;flex-direction:column;gap:12px;align-self:stretch;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.userpick .search{flex:none;max-width:none}
.userpick__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 16px;max-height:320px;margin:0;padding:0;overflow:auto;list-style:none}
.userpick__list .check{align-items:flex-start}
.userpick__list small{display:block}

/* ---------- finestra modale (<dialog>): conferma di "Ricordami su questo dispositivo" ---------- */
.modal{width:min(520px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);box-shadow:var(--pop-shadow);overflow:auto;overscroll-behavior:contain}
.modal::backdrop{background:color-mix(in srgb,var(--band) 55%,transparent)}
.modal__box{display:flex;flex-direction:column;gap:16px;margin:0;padding:20px 22px}
.modal__head{display:flex;align-items:center;gap:12px}
.modal__ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink)}
.modal__ic .ic{width:22px;height:22px}
.modal__title{flex:1;min-width:0;margin:0;font-size:18px;font-weight:700;line-height:1.3}
.modal__close{align-self:flex-start}
.modal__body{display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.modal__body p,.modal__body ul{margin:0}
.modal__body ul{display:flex;flex-direction:column;gap:6px;padding-left:20px}
.modal__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.modal kbd,.alert kbd{display:inline-block;padding:0 6px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface-2);font:600 12px/1.6 var(--font-mono);color:var(--ink)}
@media (max-width:600px){.modal__box{padding:18px 16px}.modal__foot .btn{flex:1 1 auto}}

/* ---------- dispositivi di fiducia (profilo e gestione utenti) ---------- */
.devices{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.device{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line)}
.device:first-child{padding-top:0;border-top:0}
.device__ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:var(--surface-2);color:var(--ink-2)}
.device__ic .ic{width:18px;height:18px}
.device__body{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0}
.device__name{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--ink)}
.device__meta{font-size:12.5px;line-height:1.45;color:var(--ink-3);overflow-wrap:anywhere}
.device > .confirm{margin-left:auto}
.device-count{display:inline-flex;align-items:center;gap:6px}
.device-count .ic{width:16px;height:16px;color:var(--ok)}

/* ---------- mailbox ---------- */
.mail-view{overflow:hidden}
.mail-frame{display:block;width:100%;height:640px;border:0;border-radius:var(--radius);background:var(--surface)}
.mail-text summary{padding:16px 20px;font-weight:600;cursor:pointer}
.mail-text .mail{margin:0 20px 20px}
.mail{margin:0;padding:12px 14px;border-radius:var(--radius-sm);background:var(--surface-2);font-family:var(--font-mono);font-size:12.5px;line-height:1.5}
.mail a{color:var(--link)}

@media (max-width:1180px){.editor{grid-template-columns:minmax(0,1fr)}.editor__preview{position:static}}
@media (max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.app-cell__url{max-width:200px}.confirm--pop .confirm__body{right:auto;left:0}
  .device > .confirm{margin-left:48px}.device .confirm--pop .confirm__body{width:min(280px,calc(100vw - 120px))}}