/* Pagina di login personalizzabile */
.portal-page {
  min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background-color: var(--page-bg); background-size: cover; background-position: center;
}
.portal-page.layout-left { justify-content: flex-start; padding-left: max(16px, 8vw); }
.portal-page.layout-right { justify-content: flex-end; padding-right: max(16px, 8vw); }
.login-wrap { width: min(400px, 100%); display: flex; flex-direction: column; gap: 12px; }
.login-card {
  background: var(--card-bg); color: var(--card-ink); border-radius: 14px; padding: 28px 28px 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25); backdrop-filter: blur(6px);
}
.login-logo { display: block; max-width: 100%; object-fit: contain; margin: 0 auto 14px; }
.login-title { text-align: center; font-size: 22px; margin: 0 0 4px; color: var(--card-ink); }
.login-subtitle { text-align: center; opacity: .75; margin-bottom: 10px; }
.login-welcome { text-align: center; margin: 4px 0 16px; opacity: .9; }
.login-card label.field > span { color: var(--card-ink); opacity: .85; }
.login-card input { background: rgba(255,255,255,.9); color: #111827; border-color: rgba(0,0,0,.15); }
.login-card input:focus { outline-color: var(--brand); }
.login-btn { width: 100%; margin-top: 4px; min-height: 40px; font-size: 15px; background: var(--brand) !important; border-color: var(--brand) !important; }
/* Tema scuro (theme.js): la scheda di login passa alla superficie scura; restano colore del marchio, sfondo e logo.
   L'anteprima dell'editor nella console mostra sempre i colori configurati. */
:root[data-mode="dark"] .portal-page:not(.preview) .login-card { --card-bg: rgba(23, 29, 38, .96); --card-ink: #e5e7eb; }
:root[data-mode="dark"] .portal-page:not(.preview) .login-card input { background: #0f141b; color: #e5e7eb; border-color: #2a3340; }
:root[data-mode="dark"] .portal-page:not(.preview) .login-msg.err { background: #3b1515; color: #fca5a5; }
:root[data-mode="dark"] .portal-page:not(.preview) .login-msg.ok { background: #11301e; color: #86efac; }
:root[data-mode="dark"] .portal-page:not(.preview) .login-msg.info { background: #172a4a; color: #93c5fd; }
.login-msg { padding: 8px 10px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; }
.login-msg.err { background: #fee2e2; color: #991b1b; }
.login-msg.ok { background: #dcfce7; color: #166534; }
.login-msg.info { background: #dbeafe; color: #1e40af; }
.login-info { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(127,127,127,.25); font-size: 13px; opacity: .9; }
.login-info a { color: var(--brand); }
.login-footer { display: flex; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.75); font-size: 12px; padding: 0 4px; }
.login-footer .powered { margin-left: auto; opacity: .7; }
.login-footer .login-download { color: inherit; text-decoration: underline; }
.login-link { background: none; border: none; color: var(--brand); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.qr { display: block; margin: 8px auto; width: 200px; height: 200px; image-rendering: pixelated; background: #fff; padding: 6px; border-radius: 8px; }
.code-input { text-align: center; font-size: 22px !important; letter-spacing: .3em; font-family: Consolas, monospace; }
.portal-page.preview { min-height: 520px; border-radius: 10px; }

/* Elenco workstation */
.app-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--brand, var(--primary)); color: #fff; }
.app-head img { height: 32px; }
.app-head .title { font-weight: 600; font-size: 16px; }
.app-head .btn { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.25); }
.app-head .btn:hover { background: rgba(255,255,255,.25); }
/* Tutta la larghezza della finestra; con il pannello dei dettagli aperto il contenuto gli lascia spazio */
.app-main { padding: 24px 32px; transition: padding-right .15s; }
body.ws-drawer-open .app-main { padding-right: 432px; }

/* Schede compatte: bordo sinistro = stato (verde libera, ambra in uso, grigio spenta) */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ws-tile {
  display: flex; flex-direction: column; gap: 3px; min-height: 86px; min-width: 0; padding: 10px 12px 12px 12px;
  border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.ws-tile.free { border-left-color: var(--ok); }
.ws-tile.busy { border-left-color: var(--warn); }
.ws-tile:hover { background: var(--surface-2); }
.ws-tile.sel { box-shadow: 0 0 0 2px var(--brand, var(--primary)); }
.ws-tile:focus-visible { outline: 2px solid var(--brand, var(--primary)); outline-offset: 2px; }
.ws-tile-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ws-tile-top .dot, .ws-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.ws-tile.free .dot, .ws-pill.free .dot { background: var(--ok); }
.ws-tile.busy .dot, .ws-pill.busy .dot { background: var(--warn); }
.ws-tile.free .ws-tile-state { color: var(--ok); }
.ws-tile.busy .ws-tile-state { color: var(--warn); }
.ws-tile-state { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-tile-title {
  font-weight: 600; font-size: 15px; line-height: 1.3; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-tile.off .ws-tile-title { color: var(--ink-2); font-weight: 500; }
.ws-tile-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-mark { color: #d4a017; margin-left: auto; }

/* Pannello dei dettagli */
.ws-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(400px, 100vw); overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 24px;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0,0,0,.08);
}
.ws-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ws-pill { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; color: var(--muted); }
.ws-pill.free { color: var(--ok); }
.ws-pill.busy { color: var(--warn); }
.ws-drawer-title { font-size: 20px; margin: 6px 0 0; overflow-wrap: anywhere; }
.ws-drawer-actions { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.ws-drawer-actions .btn { width: 100%; min-height: 40px; font-size: 15px; }
.ws-drawer-actions .btn.primary { background: var(--brand, var(--primary)); border-color: var(--brand, var(--primary)); }
.ws-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 8px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.ws-facts dt { color: var(--muted); }
.ws-facts dd { margin: 0; overflow-wrap: anywhere; }
.ws-fav-toggle { align-self: flex-start; margin-top: auto; }
@media (max-width: 999px) { body.ws-drawer-open .app-main { padding-right: 32px; } }
@media (max-width: 600px) {
  .app-main { padding: 16px 12px; }
  body.ws-drawer-open .app-main { padding-right: 12px; }
  .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ws-tile { min-height: 78px; padding: 8px 10px 10px; }
  .ws-tile-title { font-size: 14px; }
  .ws-code-form { width: 100%; }
  .ws-code-form input { flex: 1; width: auto; min-width: 0; }
  .ws-drawer { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) { .app-main { transition: none; } }

/* Barra dell'elenco: ricerca, filtri, vista; recenti e codice */
.ws-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ws-top h1 { margin: 0; }
.ws-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ws-search {
  flex: 1 1 260px; min-width: 0; min-height: 38px; padding: 8px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.ws-search:focus { outline: 2px solid var(--brand, var(--primary)); outline-offset: 1px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  border: 0; background: none; color: var(--ink-2); font: inherit; cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn:hover { background: var(--surface-2); }
.seg-btn[aria-pressed="true"] { background: var(--brand, var(--primary)); color: #fff; }
.seg-btn:focus-visible { outline: 2px solid var(--brand, var(--primary)); outline-offset: -3px; }
.seg-btn .n { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.ws-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; min-height: 32px; }
.ws-recent { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.ws-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer;
}
.ws-chip:hover:not(:disabled) { border-color: var(--brand, var(--primary)); }
.ws-chip:disabled { opacity: .55; cursor: default; }
.ws-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.ws-chip.free .dot { background: var(--ok); }
.ws-chip.busy .dot { background: var(--warn); }
.ws-code-form { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.ws-code-form input { width: 128px; min-height: 30px; padding: 4px 8px; }

/* Gruppi richiudibili */
.ws-section { margin-bottom: 20px; }
.ws-section-head {
  display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 4px 2px 8px; margin-bottom: 8px;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit;
  text-align: left; cursor: pointer;
}
.ws-section-head .chev { display: inline-block; width: 12px; color: var(--muted); transition: transform .15s; }
.ws-section-head[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.ws-section-head .gname { font-weight: 600; font-size: 15px; }
.ws-section-head .gcount { color: var(--muted); font-size: 12.5px; }
.ws-section-head:focus-visible { outline: 2px solid var(--brand, var(--primary)); outline-offset: 2px; border-radius: 4px; }

/* Elenco compatto: la barra a sinistra dice lo stato (verde libera, ambra in uso, grigia spenta) */
.ws-list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ws-row {
  display: grid; grid-template-columns: 5px minmax(0, 2.2fr) minmax(0, 1.6fr) 100px minmax(150px, auto) 32px;
  align-items: center; gap: 14px; padding: 8px 10px 8px 0; border-top: 1px solid var(--line);
}
.ws-row:first-child { border-top: 0; }
.ws-row { cursor: pointer; }
.ws-row:hover, .ws-row.sel { background: var(--surface-2); }
.ws-row.sel .ws-name { color: var(--brand, var(--primary)); }
.ws-row:focus-visible { outline: 2px solid var(--brand, var(--primary)); outline-offset: -2px; }
.ws-rail { align-self: stretch; margin: -8px 0; background: var(--line); }
.ws-row.free .ws-rail { background: var(--ok); }
.ws-row.busy .ws-rail { background: var(--warn); }
.ws-row .ws-name { font-weight: 600; }
.ws-row.off .ws-name { color: var(--ink-2); font-weight: 500; }
.ws-main, .ws-who { min-width: 0; display: flex; flex-direction: column; }
.ws-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-state { font-weight: 500; color: var(--muted); }
.ws-row.free .ws-state { color: var(--ok); }
.ws-row.busy .ws-state { color: var(--warn); }
.ws-actions { display: flex; gap: 6px; justify-content: flex-end; }
.ws-actions .btn.primary { background: var(--brand, var(--primary)); border-color: var(--brand, var(--primary)); }
.star {
  border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; padding: 4px 6px;
  border-radius: 6px; cursor: pointer;
}
.star:hover { color: var(--ink); }
.star[aria-pressed="true"] { color: #d4a017; }
.star:focus-visible { outline: 2px solid var(--brand, var(--primary)); }
@media (max-width: 760px) {
  .ws-row {
    grid-template-columns: 5px minmax(0, 1fr) auto;
    grid-template-areas: "rail main star" "rail who who" "rail act act";
    row-gap: 6px; padding: 10px 8px 10px 0;
  }
  .ws-rail { grid-area: rail; margin: -10px 0; }
  .ws-main { grid-area: main; }
  .ws-who { grid-area: who; flex-direction: row; gap: 8px; }
  .ws-row .ws-code { display: none; }
  .ws-actions { grid-area: act; justify-content: flex-start; }
  .ws-row .star { grid-area: star; }
  .ws-code-form { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .ws-section-head .chev { transition: none; } }
.empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); min-width: 220px; padding: 6px; z-index: 50; }
.menu-list button, .menu-list a { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 10px; border-radius: 6px; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.menu-list button:hover, .menu-list a:hover { background: var(--surface-2); }
@media (max-width: 520px) {
  .login-card { padding: 22px 18px 18px; }
  .app-head { padding: 10px 12px; }
}

/* Segnaposto dei campi del codice: tutti zeri, molto chiaro (dalla 0.1.61, come l'app di connessione) */
.code-input::placeholder { color: #d1d5db; opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .code-input::placeholder { color: #3a4452; } }
:root[data-theme="dark"] .code-input::placeholder { color: #3a4452; }