/* ─────────────────────────────────────────────────────────────────────────────
   (#327) Impostazioni → Skill & Tool — elenco denso + drawer di modifica.

   Perché un file dedicato e non il blocco <style> di Settings.razor: quello è
   oltre 5.000 righe. Stessa scelta già fatta per plugins-panel.css.

   Struttura: light canonico, override dark ADDITIVI in coda. Prefisso .sk-.

   (#362) Il GUSCIO del drawer (scrim, animazione, testata, corpo, piede, focus
   trap) è stato estratto in drawer.css quando il pannello dei tool SQL ha chiesto
   lo stesso comportamento. Qui resta ciò che è delle skill: l'elenco, la toolbar,
   la textarea del markdown e la larghezza del pannello.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Toolbar: ricerca + filtro + azioni primarie ──────────────────────────────
   Sticky perché con 26 righe la ricerca deve restare a portata mentre si scorre.
   Le azioni primarie stanno QUI e non in fondo: prima erano dopo tutte le card,
   quindi invisibili senza scrollare fino alla fine. */
.sk-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .65rem .1rem .75rem;
    background: #fff;
    border-bottom: 1px solid #e8ecf3;
    margin-bottom: .25rem;
}

.sk-search {
    flex: 1 1 220px;
    min-width: 180px;
    padding: .42rem .7rem;
    border: 1px solid #d7dde8;
    border-radius: 7px;
    font-size: .87rem;
    color: #1f2937;
    background: #fff;
}
.sk-search:focus { outline: 2px solid #4c8dff; outline-offset: 1px; border-color: #4c8dff; }

.sk-seg { display: inline-flex; border: 1px solid #d7dde8; border-radius: 7px; overflow: hidden; }
.sk-seg-btn {
    border: 0;
    background: #fff;
    padding: .42rem .75rem;
    font-size: .82rem;
    color: #48566b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.sk-seg-btn + .sk-seg-btn { border-left: 1px solid #e8ecf3; }
.sk-seg-btn:hover { background: #f4f7fb; }
.sk-seg-btn.is-on { background: #eef4ff; color: #1b4977; font-weight: 600; }
.sk-seg-count { font-variant-numeric: tabular-nums; opacity: .7; font-size: .78rem; }

.sk-toolbar-spacer { flex: 0 0 auto; margin-left: auto; display: flex; gap: .5rem; }

/* ── Elenco: righe dense, altezza uniforme ────────────────────────────────────
   Da card multi-riga a riga singola: 26 skill entrano quasi tutte in una
   schermata invece delle 5-6 di prima. Il ritmo verticale regolare è ciò che
   permette di scandire con l'occhio invece di leggere. */
.sk-list { display: flex; flex-direction: column; }

.sk-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .6rem;
    border-bottom: 1px solid #eef1f6;
    cursor: pointer;
    background: transparent;
    text-align: left;
    width: 100%;
    border-left: 0; border-right: 0; border-top: 0;
}
.sk-row:hover { background: #f7f9fc; }
.sk-row:focus-visible { outline: 2px solid #4c8dff; outline-offset: -2px; }
.sk-row.is-selected { background: #eef4ff; }

/* Stato: un pallino, non una tinta di sfondo. Con quasi tutte le skill attive,
   colorare l'intera riga non distingue niente — colora la pagina e basta. */
.sk-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #c3cad6; }
.sk-dot.is-on { background: #37c871; }

.sk-name { font-weight: 600; color: #1f2937; white-space: nowrap; }
.sk-slug {
    font-family: ui-monospace, Menlo, monospace;
    font-size: .78rem;
    color: #6b7787;
    white-space: nowrap;
}
/* Disattiva: si abbassa il colore del testo, NON l'opacità della riga — l'opacità
   porterebbe sotto soglia di contrasto anche ciò che deve restare leggibile. */
.sk-row.is-off .sk-name { color: #6b7787; font-weight: 500; }

/* La descrizione serve a RICONOSCERE la skill, non a leggerla: la lettura
   avviene nel drawer. Una riga sola, così tutte le righe hanno la stessa altezza. */
.sk-desc {
    flex: 1 1 auto;
    min-width: 0;
    color: #6b7787;
    font-size: .84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sk-desc.is-missing { font-style: italic; color: #a0a8b4; }

.sk-num { flex: 0 0 auto; color: #8a93a2; font-size: .78rem; font-variant-numeric: tabular-nums; }

.sk-row-actions { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }
/* opacity e non display:none — display:none toglie il bottone dal tab order e lo
   rende irraggiungibile da tastiera. */
.sk-row-actions .sk-del { opacity: 0; transition: opacity .12s; }
.sk-row:hover .sk-del,
.sk-row:focus-within .sk-del,
.sk-row-actions .sk-del:focus-visible { opacity: 1; }

.sk-empty { padding: 2rem 1rem; text-align: center; color: #8a93a2; }

/* ── Drawer di modifica ───────────────────────────────────────────────────────
   Guscio e comportamento: drawer.css (.cw-drawer). Qui solo ciò che cambia per
   le skill. Il markdown è a colonna singola, quindi la larghezza di default del
   guscio va bene così com'è. */

/* La textarea prende l'altezza residua invece di un numero fisso di righe:
   il contenuto medio è di 12.000 caratteri. */
.sk-md-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 220px; }
.sk-md {
    flex: 1 1 auto;
    width: 100%;
    resize: none;
    font-family: ui-monospace, Menlo, monospace;
    font-size: .8rem;
    line-height: 1.5;
    padding: .6rem .7rem;
    border: 1px solid #d7dde8;
    border-radius: 7px;
}
.sk-md:focus { outline: 2px solid #4c8dff; outline-offset: 1px; border-color: #4c8dff; }

@media (max-width: 900px) {
    .sk-toolbar-spacer { margin-left: 0; width: 100%; }
    .sk-slug, .sk-num { display: none; }
}

/* ── Dark mode: solo gli scostamenti ───────────────────────────────────────── */
body.dark-mode .sk-toolbar { background: #171f2a; border-bottom-color: #2a3645; }
body.dark-mode .sk-search,
body.dark-mode .sk-seg,
body.dark-mode .sk-seg-btn { background: #1d2734; color: #cbd5e1; border-color: #2a3645; }
body.dark-mode .sk-seg-btn.is-on { background: #223049; color: #cfe0ff; }
body.dark-mode .sk-row { border-bottom-color: #232e3c; }
body.dark-mode .sk-row:hover { background: #1d2734; }
body.dark-mode .sk-row.is-selected { background: #223049; }
body.dark-mode .sk-name { color: #e6edf3; }
body.dark-mode .sk-slug,
body.dark-mode .sk-desc,
body.dark-mode .sk-num { color: #94a3b8; }
body.dark-mode .sk-md { background: #0f1419; color: #e6edf3; border-color: #2a3645; }