/* Checklist WhatsApp (Amministrazione ▸ Checklist WhatsApp): elenco dei passi
   con numero/spunta a sinistra, stato e istruzioni. Niente build Tailwind →
   layout e colori di stato qui, come classi .jo-sc-*. Caricato da
   JoornaTheme::headEndHtml(). Il dark si aggancia a `.dark` con override
   scoped, mai ai token globali. */

.jo-sc { display: flex; flex-direction: column; gap: 1.25rem; }

.jo-sc-summary { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 1024px) {
    .jo-sc-summary { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 2rem; }
}
.jo-sc-inline-badge { margin-left: 0.5rem; vertical-align: middle; }
.jo-sc-legend { display: flex; flex-direction: column; gap: 0.25rem; max-width: 26rem; }

.jo-sc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.jo-sc-step {
    display: flex;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid #e5e7eb;         /* gray-200 */
    border-left-width: 4px;
    border-radius: 0.75rem;
    background: #ffffff;
}
.dark .jo-sc-step { background: rgb(17 24 39 / 0.6); border-color: rgb(255 255 255 / 0.1); }

.jo-sc-step--done    { border-left-color: #16a34a; }   /* green-600 */
.jo-sc-step--todo    { border-left-color: #f59e0b; }   /* amber-500 */
.jo-sc-step--check   { border-left-color: #3b82f6; }   /* blue-500 */
.jo-sc-step--waiting { border-left-color: #d1d5db; opacity: 0.85; }

.jo-sc-num {
    flex: none;
    width: 1.75rem; height: 1.75rem;
    border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    background: #f3f4f6; color: #374151;
}
.dark .jo-sc-num { background: rgb(255 255 255 / 0.08); color: #d1d5db; }
.jo-sc-step--done .jo-sc-num { background: #16a34a; color: #fff; }
.jo-sc-step--todo .jo-sc-num { background: #f59e0b; color: #fff; }
.jo-sc-step--check .jo-sc-num { background: #3b82f6; color: #fff; }

.jo-sc-body { flex: 1; min-width: 0; }
.jo-sc-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.jo-sc-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.jo-sc-who { font-size: 0.75rem; color: #6b7280; }
.dark .jo-sc-who { color: #9ca3af; }
.jo-sc-state { margin-top: 0.35rem; }

.jo-sc-howto { margin: 0.6rem 0 0; padding-left: 1.25rem; list-style: decimal; display: flex; flex-direction: column; gap: 0.3rem; }
.jo-sc-details { margin-top: 0.5rem; }
.jo-sc-details summary { cursor: pointer; font-size: 0.8rem; }