/* dashboard/css/34-macchine.css — estratto da app.css (2026-07, split senza build). */
/* ===== Griglia macchine: switch colonne (mobile sempre 1, desktop 2/3) ===== */
.machines { display: grid; grid-template-columns: 1fr; }
.machines .section-title { grid-column: 1 / -1; }
.col-switch-row { display: none; }
.col-switch { display: inline-flex; gap: 2px; background: var(--bg); border-radius: 10px; padding: 3px; }
.col-switch .col-opt { display: inline-flex; align-items: center; gap: 3px; padding: 6px 11px; border-radius: 8px; color: var(--ink-3); background: transparent; cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.col-switch .col-opt span { width: 3px; height: 13px; border-radius: 1.5px; background: currentColor; opacity: 0.55; }
.col-switch .col-opt.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-card); }
.col-switch .col-opt.active span { opacity: 1; }
@media (min-width: 768px) {
  .col-switch-row { display: flex; justify-content: flex-end; padding: 12px var(--page-pad-x) 0; }
  .machines.cols-2, .machines.cols-3 { padding: 0 var(--page-pad-x); column-gap: 12px; }
  .machines.cols-2 { grid-template-columns: 1fr 1fr; }
  .machines.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .machines.cols-2 .machine-card, .machines.cols-3 .machine-card { margin-left: 0; margin-right: 0; }
  .machines.cols-2 .section-title, .machines.cols-3 .section-title { padding-left: 0; padding-right: 0; }
}

/* ===== Vista Macchine — info-first, gear icon per azioni ===== */
.machine-card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); margin: 10px var(--page-pad-x) 0; padding: 16px; position: relative; cursor: pointer; transition: box-shadow 120ms ease; }
.machine-card:hover { box-shadow: 0 2px 8px rgba(140,0,20,0.08), var(--shadow-card); }
.machine-card.alert { border: 1.5px solid #FCD3D3; background: #FFFBFB; }
.machine-card .gear-btn { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); color: var(--ink-2); display: flex; align-items: center; justify-content: center; transition: background .12s ease, color .12s ease, transform .08s ease; }
.machine-card .gear-btn:hover { background: var(--line); color: var(--ink); }
.machine-card .gear-btn:active { transform: scale(0.94); background: var(--line); }
.machine-card .top { display: flex; align-items: center; gap: 14px; padding-right: 44px; }
.machine-card .id-circle { width: 52px; height: 52px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.machine-card.alert .id-circle { background: #FCE4E4; color: var(--danger); }
.machine-card[data-mstatus="free"] .id-circle { background: #DCFCE7; color: var(--ok); }
.machine-card[data-mstatus="busy"] .id-circle { background: var(--brand-soft); color: var(--brand); }
.machine-card[data-mstatus="broken"] .id-circle { background: var(--bg); color: var(--ink-3); }
.machine-card[data-mstatus="booked"] .id-circle { background: #DBEAFE; color: var(--info); }
.machine-card .id-letter { position: absolute; bottom: -4px; right: -4px; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); display: flex; align-items: center; justify-content: center; }
.id-wrap { position: relative; }
.machine-card .info { flex: 1; min-width: 0; }
.machine-card .name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.machine-card .model-line { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.machine-card .status-row { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.machine-card .progress-bar { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.machine-card .progress-bar > div { height: 100%; border-radius: 3px; }
.machine-card .progress-bar.busy > div { background: var(--brand); }
.machine-card .progress-bar.broken > div { background: var(--ink-3); }
.machine-card .progress-bar.free > div { background: var(--ok); }
.machine-card .progress-bar.booked > div { background: var(--info); }
.machine-card .details { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.machine-card .details strong { color: var(--ink-2); font-weight: 600; }
.machine-card .alert-cta { margin-top: 14px; }
.machine-card .alert-cta button { width: 100%; padding: 13px; border-radius: 12px; background: var(--danger); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.free   { background: #E8F8EE; color: var(--ok); }
.status.busy   { background: #FEE2E2; color: var(--danger); }
.status.broken { background: var(--bg); color: var(--ink-3); }
.status.booked { background: #E5EAFE; color: var(--info); }

/* Primary action button — riservato a casi specifici (es. allarme) */
.btn-prim { padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: 0.02em; }
.btn-prim.go { background: var(--ok); color: #fff; }
.btn-prim.stop { background: var(--danger); color: #fff; }
.btn-prim.fix { background: var(--warn); color: #fff; }
.btn-prim.outline { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line); }

/* Conferma azione critica */
.confirm-row { margin-top: 12px; padding: 10px 12px; background: #FFFBED; border: 1px solid #F8DC8E; border-radius: 10px; font-size: 12px; color: #7A5C00; display: flex; align-items: flex-start; gap: 8px; }

/* Filter pills row — wrap su più righe (coerente con clienti/ticket), no scroll horizontale. */
.filter-row { padding: 12px var(--page-pad-x) 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-pill { padding: 7px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.filter-pill:hover:not(.active) { border-color: var(--brand); color: var(--ink); }
.filter-pill:active { transform: scale(0.96); }
.filter-pill.active { background: var(--surface); color: var(--brand); border-color: var(--brand); font-weight: 700; }
.filter-pill .count { opacity: 0.65; }
.filter-pill.active .count { opacity: 0.7; }