/* Officina35mm — Pannello Presidente › Badge. Stesso linguaggio della scheda persona e della Cassa:
   sempre scuro, palette tenue a RGB, elenco a griglia a sinistra e scheda di modifica a destra.
   Su telefono: elenco a tutto schermo, il dettaglio si apre sopra con «Tutti i badge» per tornare. */
#modal-editor-badge.badm {
    --b-sheet: #2c3648; --b-line: rgba(248, 250, 252, 0.12); --b-soft: rgba(248, 250, 252, 0.07); --b-tile: rgba(248, 250, 252, 0.035);
    --b-text: #f8fafc; --b-text-2: #e2e8f0; --b-muted: #a3afc2; --b-faint: #8592a8;
    --b-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --rgb-blue: 125, 211, 252; --rgb-green: 134, 239, 172; --rgb-amber: 253, 230, 138; --rgb-purple: 196, 181, 253; --rgb-slate: 203, 213, 225;
    z-index: 35000; padding: 16px; align-items: center; justify-content: center;
    background: rgba(10, 14, 22, 0.62) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-family: var(--shell-font, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
    color: var(--b-text-2);
}
.badm .t-blue { --t: var(--rgb-blue); } .badm .t-green { --t: var(--rgb-green); } .badm .t-amber { --t: var(--rgb-amber); }
.badm .t-purple { --t: var(--rgb-purple); } .badm .t-slate { --t: var(--rgb-slate); }
.badm :is(h3, h4) { margin: 0; border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }

.badm-box { width: min(1240px, 100%); height: min(92vh, 960px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--b-sheet); border: 1px solid var(--b-line); border-radius: 26px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.4); overflow: hidden; animation: badm-in .3s var(--b-ease); }
@keyframes badm-in { from { opacity: 0; transform: translateY(12px) scale(.99); } }

/* Intestazione */
.badm-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--b-soft); }
.badm-head__ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 21px; color: rgb(var(--rgb-amber)); background: rgba(var(--rgb-amber), .12); border: 1px solid rgba(var(--rgb-amber), .22); }
.badm-head h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--b-text) !important; }
.badm-head p { margin: 2px 0 0; font-size: 13px; color: var(--b-muted); }
.badm-kpis { display: flex; gap: 8px; }
.badm-kpi { display: grid; justify-items: center; min-width: 74px; padding: 6px 10px; border-radius: 14px; background: rgba(var(--t), .08); border: 1px solid rgba(var(--t), .16); }
.badm-kpi b { font-size: 17px; font-weight: 800; color: rgba(var(--t), 1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.badm-kpi small { font-size: 11px; font-weight: 700; color: var(--b-muted); }
.badm-x { width: 40px; height: 40px; border-radius: 13px; border: 1px solid var(--b-line); background: var(--b-tile); color: var(--b-text-2); display: grid; place-items: center; font-size: 17px; cursor: pointer; transition: background-color .2s var(--b-ease), transform .2s var(--b-ease); }
.badm-x:hover { background: rgba(253, 164, 175, .14); }
.badm-x:active { transform: scale(.96); }

/* Corpo */
.badm-body { display: grid; grid-template-columns: minmax(330px, 420px) minmax(0, 1fr); min-height: 0; }
.badm-side { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; padding: 14px 14px 0; border-right: 1px solid var(--b-soft); background: rgba(15, 23, 42, 0.18); min-height: 0; }
.badm-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 13px; border: 1px solid var(--b-line); background: rgba(15, 23, 42, .35); color: var(--b-muted); }
.badm-search:focus-within { border-color: rgba(var(--rgb-blue), .5); }
#modal-editor-badge .badm-search input { flex: 1; min-width: 0; height: 40px; border: 0 !important; background: none !important; outline: none; color: var(--b-text) !important; font: 600 14px/1 inherit; font-family: inherit; padding: 0; margin: 0; box-shadow: none !important; }
.badm-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.badm-filters::-webkit-scrollbar { display: none; }
.badm-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--b-line); background: var(--b-tile); color: var(--b-muted); font: 700 12.5px/1 inherit; font-family: inherit; cursor: pointer; transition: background-color .2s var(--b-ease), color .2s var(--b-ease), border-color .2s var(--b-ease); }
.badm-chip em { font-style: normal; font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; display: inline-grid; place-items: center; background: rgba(248, 250, 252, .08); color: var(--b-text-2); }
.badm-chip[aria-selected="true"] { background: rgba(var(--rgb-blue), .16); border-color: rgba(var(--rgb-blue), .4); color: var(--b-text); }
.badm-chip[aria-selected="true"] em { background: rgba(var(--rgb-blue), .3); }
@media (hover: hover) and (pointer: fine) { .badm-chip:hover:not([aria-selected="true"]) { color: var(--b-text-2); background: rgba(248, 250, 252, .06); } }

.badm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 16px 0; scrollbar-width: thin; scrollbar-color: rgba(248, 250, 252, .18) transparent; }
.badm-tile { all: unset; box-sizing: border-box; position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 8px 9px; border-radius: 16px; border: 1px solid var(--b-soft); background: var(--b-tile); cursor: pointer; text-align: center; transition: background-color .2s var(--b-ease), border-color .2s var(--b-ease), transform .2s var(--b-ease); }
.badm-tile:focus-visible { outline: 2px solid rgba(var(--rgb-blue), .7); outline-offset: 2px; }
.badm-tile:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .badm-tile:hover { background: rgba(248, 250, 252, .06); border-color: var(--b-line); } }
.badm-tile.is-sel { background: rgba(var(--rgb-blue), .12); border-color: rgba(var(--rgb-blue), .5); }
.badm-tile__img { width: 72px; height: 72px; display: block; }
.badm-tile__img img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.badm-tile__n { font-size: 11px; font-weight: 800; color: var(--b-faint); letter-spacing: .02em; }
.badm-tile__t { font-size: 12.5px; font-weight: 750; line-height: 1.25; color: var(--b-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.badm-tile.is-raw .badm-tile__t { color: var(--b-faint); font-weight: 600; font-style: italic; }
.badm-tile__meta { display: flex; gap: 5px; align-items: center; justify-content: center; min-height: 18px; flex-wrap: wrap; }
.badm-tile__meta:empty { display: none; }
.badm-tile__meta em { font-style: normal; display: inline-flex; gap: 3px; align-items: center; font-size: 11px; font-weight: 800; color: rgb(var(--rgb-green)); background: rgba(var(--rgb-green), .1); border-radius: 99px; padding: 1px 6px; }
.badm-ic-uniq { color: rgb(var(--rgb-amber)); font-size: 13px; }
.badm-ic-auto { color: rgb(var(--rgb-blue)); font-size: 13px; }
.badm-pips { display: inline-flex; gap: 3px; align-items: center; }
.badm-pips i { width: 6px; height: 6px; border-radius: 99px; background: rgba(248, 250, 252, .18); }
.badm-pips i.on { background: rgb(var(--rgb-green)); box-shadow: 0 0 6px rgba(var(--rgb-green), .55); }
.badm-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 6px 2px 0; font-size: 12.5px; font-weight: 800; color: rgb(var(--rgb-purple)); text-transform: capitalize; }
.badm-group:first-child { margin-top: 0; }
.badm-group em { font-style: normal; font-weight: 600; color: var(--b-faint); text-transform: none; }
.badm-none { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 40px 10px; color: var(--b-faint); font-weight: 600; }
.badm-none i { font-size: 26px; }

/* Dettaglio */
.badm-main { min-width: 0; min-height: 0; display: grid; }
.badm-detail { overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; display: grid; gap: 12px; align-content: start; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(248, 250, 252, .18) transparent; }
.badm-empty { display: grid; justify-items: center; gap: 6px; padding: 18vh 20px 0; text-align: center; color: var(--b-muted); }
.badm-empty i { font-size: 46px; color: rgba(var(--rgb-amber), .7); }
.badm-empty b { font-size: 17px; color: var(--b-text); }
.badm-back { display: none; }
.badm-hero { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; align-items: start; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(var(--rgb-amber), .07), rgba(var(--rgb-blue), .04)); border: 1px solid var(--b-line); }
.badm-hero__img { width: 148px; height: 148px; display: grid; place-items: center; border-radius: 22px; background: radial-gradient(closest-side, rgba(var(--rgb-amber), .14), transparent); }
.badm-hero__img img { width: 136px; height: 136px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.badm-hero__f { display: grid; gap: 6px; min-width: 0; }
.badm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.badm-tag { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: rgba(var(--t), .12); color: rgba(var(--t), .98); border: 1px solid rgba(var(--t), .2); }
.badm-lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--b-faint); margin-top: 4px; }
#modal-editor-badge .badm-in { width: 100%; margin: 0; border-radius: 12px; border: 1px solid var(--b-line) !important; background: rgba(15, 23, 42, .35) !important; color: var(--b-text) !important; font-family: inherit; padding: 10px 12px; }
#modal-editor-badge .badm-in:focus { border-color: rgba(var(--rgb-blue), .55) !important; outline: none; box-shadow: 0 0 0 3px rgba(var(--rgb-blue), .14) !important; }
#modal-editor-badge .badm-in--title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
#modal-editor-badge textarea.badm-in { min-height: 76px; resize: vertical; line-height: 1.45; }

.badm-card { padding: 14px 16px 16px; border-radius: 20px; background: var(--b-tile); border: 1px solid var(--b-soft); min-width: 0; }
.badm-card__h { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.badm-card__h > i { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; flex: none; color: rgba(var(--t), 1); background: rgba(var(--t), .12); border: 1px solid rgba(var(--t), .2); }
.badm-card__h h4 { font-size: 15px; font-weight: 800; color: var(--b-text) !important; }
.badm-card__h p { margin: 1px 0 0; font-size: 12.5px; color: var(--b-muted); }
/* il vecchio blocco «Progressione livelli» dentro la card */
.badm .badge-admin-prog { margin-top: 6px; padding-top: 0; border-top: 0; }
.badm .badge-admin-prog__hdr { display: none; }
.badm .badge-admin-prog__row { padding: 9px 12px; margin-top: 6px; border-radius: 12px; background: rgba(15, 23, 42, .22); border: 1px solid var(--b-soft); color: var(--b-text-2); }
.badm .badge-admin-prog__row b { color: var(--b-text); }
.badm .badge-admin-prog__grid { padding: 12px; border-radius: 14px; background: rgba(15, 23, 42, .22); border: 1px solid var(--b-soft); }
.badm .badge-admin-prog__lbl { color: var(--b-faint); }
.badm input[type="checkbox"] { accent-color: rgb(var(--rgb-blue)); width: 16px; height: 16px; flex: none; }
.badm .badge-prog-chip { background: rgba(248, 250, 252, .05); border: 1px solid var(--b-line); color: var(--b-text-2); }
.badm .badge-prog-chip.is-on { background: rgba(var(--rgb-purple), .16); border-color: rgba(var(--rgb-purple), .45); color: var(--b-text); }
.badm code { background: rgba(248, 250, 252, .08); padding: 1px 5px; border-radius: 6px; color: var(--b-text-2); }

/* Serie di livelli */
.badm-serie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px; margin: 4px 0 6px; border-radius: 14px; background: rgba(var(--rgb-purple), .06); border: 1px solid rgba(var(--rgb-purple), .16); }
.badm-serie__it { all: unset; box-sizing: border-box; display: grid; justify-items: center; gap: 2px; padding: 6px 8px 5px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; transition: background-color .2s var(--b-ease); }
.badm-serie__it img { width: 46px; height: 46px; object-fit: contain; }
.badm-serie__it span { font-size: 11px; font-weight: 800; color: var(--b-muted); }
.badm-serie__it.is-on { background: rgba(var(--rgb-purple), .16); border-color: rgba(var(--rgb-purple), .4); }
.badm-serie__it.is-on span { color: var(--b-text); }
@media (hover: hover) and (pointer: fine) { .badm-serie__it:not(.is-on):hover { background: rgba(248, 250, 252, .05); } }
.badm-serie__sep { color: var(--b-faint); font-size: 12px; }

/* Assegnatari */
.badm-holders { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.badm-person { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px 0 4px; border-radius: 999px; background: rgba(var(--rgb-green), .08); border: 1px solid rgba(var(--rgb-green), .18); font-size: 12.5px; font-weight: 700; color: var(--b-text-2); }
.badm-person__av { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #0f172a; background: #bbf7d0; }
.badm-holders__none { font-size: 13px; color: var(--b-faint); }

/* Piede */
.badm-foot { display: flex; gap: 10px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--b-soft); background: rgba(15, 23, 42, 0.18); }
.badm-fb { flex: 1; min-width: 0; margin: 0; font-size: 13px; font-weight: 600; color: var(--b-muted); }
.badm-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 13px; font: 800 14px/1 inherit; font-family: inherit; cursor: pointer; border: 1px solid transparent; transition: background-color .2s var(--b-ease), transform .2s var(--b-ease); }
.badm-btn:active { transform: scale(.97); }
.badm-btn--ghost { background: var(--b-tile); border-color: var(--b-line); color: var(--b-text-2); }
@media (hover: hover) and (pointer: fine) { .badm-btn--ghost:hover { background: rgba(248, 250, 252, .07); } }
.badm-btn--primary { background: #22c55e; color: #052e16; }
@media (hover: hover) and (pointer: fine) { .badm-btn--primary:hover { background: #4ade80; } }

/* Tablet */
@media (max-width: 1000px) {
    .badm-kpi:nth-child(n+3) { display: none; }
}
/* Telefono: elenco a tutto schermo, dettaglio che si apre sopra */
@media (max-width: 760px) {
    #modal-editor-badge.badm { padding: 0; }
    .badm-box { width: 100%; height: 100dvh; border-radius: 0; border: 0; }
    .badm-head { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 14px; }
    .badm-kpis { display: none; }
    .badm-body { grid-template-columns: minmax(0, 1fr); position: relative; }
    .badm-side { border-right: 0; padding: 12px 12px 0; }
    .badm-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .badm-main { position: absolute; inset: 0; background: var(--b-sheet); transform: translateX(100%); transition: transform .32s var(--b-ease); visibility: hidden; }
    .badm.is-detail .badm-main { transform: none; visibility: visible; }
    .badm-detail { padding: 12px 14px 20px; }
    .badm-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; height: 34px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--b-line); background: var(--b-tile); color: var(--b-text-2); font: 700 13px/1 inherit; font-family: inherit; cursor: pointer; }
    .badm-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .badm-hero__f { width: 100%; }
    .badm .badge-admin-prog__grid { grid-template-columns: 1fr 1fr; }
    .badm-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
    .badm-fb { flex-basis: 100%; }
    .badm-btn { flex: 1; justify-content: center; }
    .badm-btn--ghost span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .badm-box, .badm-main { animation: none; transition: none; }
}
.badge-elenco-uniq--sp { color: #c4b5fd !important; }

/* Interruttore acceso/spento, aggiungi/togli persone, suggerimento regola */
.badm-onoff { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: rgba(15, 23, 42, .3); border: 1px solid var(--b-line); cursor: pointer; margin-bottom: 6px; }
.badm-onoff input { appearance: none; -webkit-appearance: none; flex: none; width: 42px !important; height: 24px !important; border-radius: 99px; background: rgba(248, 250, 252, .18) !important; position: relative; cursor: pointer; transition: background-color .2s var(--b-ease); border: 0 !important; margin: 0; }
.badm-onoff input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 99px; background: #f8fafc; transition: transform .25s var(--b-ease); }
.badm-onoff input:checked { background: #22c55e !important; }
.badm-onoff input:checked::after { transform: translateX(18px); }
.badm-onoff__t { display: grid; line-height: 1.25; }
.badm-onoff__t b { color: var(--b-text); font-size: 14px; }
.badm-onoff__t small { color: var(--b-muted); font-size: 12px; }
.badm-tile.is-off { opacity: .45; }
.badm-tile.is-off .badm-tile__img img { filter: grayscale(1); }
.badm-add { display: flex; gap: 8px; align-items: center; margin: 6px 0 10px; padding: 0 0 0 12px; border-radius: 13px; border: 1px solid var(--b-line); background: rgba(15, 23, 42, .3); color: var(--b-muted); }
#modal-editor-badge .badm-add input { flex: 1; min-width: 0; height: 40px; border: 0 !important; background: none !important; color: var(--b-text) !important; font: 600 13.5px/1 inherit; font-family: inherit; outline: none; padding: 0; margin: 0; box-shadow: none !important; }
.badm-add .badm-btn { height: 40px; border-radius: 0 12px 12px 0; border-width: 0 0 0 1px; }
.badm-person__x { all: unset; box-sizing: border-box; width: 22px; height: 22px; margin-right: -6px; border-radius: 99px; display: grid; place-items: center; cursor: pointer; color: var(--b-muted); font-size: 12px; transition: background-color .2s var(--b-ease), color .2s var(--b-ease); }
.badm-person__x:hover { background: rgba(253, 164, 175, .2); color: #fecdd3; }
.badm-person.is-out { background: rgba(248, 250, 252, .04); border-color: var(--b-line); color: var(--b-faint); text-decoration: line-through; }
.badm-person.is-out .badm-person__x { text-decoration: none; }
.badm-person.is-out .badm-person__x:hover { background: rgba(134, 239, 172, .2); color: #bbf7d0; }
.badm-esclusi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--b-line); }
.badm-esclusi small { flex-basis: 100%; color: var(--b-faint); font-weight: 700; }
.badm-rule-hint { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: rgba(125, 211, 252, .07); border: 1px solid rgba(125, 211, 252, .18); font-size: 13px; color: var(--b-text-2); }
.badm-rule-hint b { color: var(--b-text); }
.badm-rule-hint i { color: rgb(125, 211, 252); }