/* ============================================================================
   cw-components.css — Componenti condivisi del design system Mago Cowork.
   (Phase 2, docs/ui-design-system-plan.md)

   Canonici promossi da Settings.razor (cw-page / cw-card) + nuovi (cw-badge,
   btn-icon). Ogni pagina admin DEVE usare questi invece di ridefinire un proprio
   namespace (apk-*, ws-*, sjl-*, rpl-*, …). Caricato dopo app.css, prima di
   mago-tokens.css. Tutto token-driven: NIENTE hex brand hardcodati qui sotto
   (eccetto i fallback var(--x, #hex) per robustezza se i token mancassero).
   ============================================================================ */

/* ── Page surface ───────────────────────────────────────────────────────── */
/* Larghezza contenuto UNIFORME: colonna 1024px centrata, ottenuta col PADDING della pagina
   (non con margin:auto sui figli: quello centrerebbe anche gli elementi shrink-to-fit come
   le strip di tab, che invece devono allinearsi a sinistra nella colonna). La pagina resta
   full-width come scroll container → la rotella scrolla ovunque (nota "zone morte"), e gli
   overlay position:fixed (modali/backdrop) non sono toccati. */
.cw-page {
    height: 100%;
    overflow-y: auto;
    padding: 28px max(32px, calc((100% - 1024px) / 2)) 40px;
    box-sizing: border-box;
}
@media (max-width: 768px)  { .cw-page { padding: 20px 16px 32px; } }

.cw-page-head { margin-bottom: 24px; }
.cw-page-head h1 {
    font-family: var(--mw-font-serif, Georgia, serif);
    font-size: 1.9rem; font-weight: 400;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    color: var(--mw-ink-900, #1A2A3D);
    display: flex; align-items: center; gap: 10px;
    text-wrap: balance;
}
.cw-page-head h1 i { color: var(--accent, #92B539); font-size: 1.5rem; }
.cw-page-sub { color: var(--text-secondary, #7A8593); font-size: 0.95rem; margin: 0; max-width: 920px; }
.cw-accent { color: var(--accent, #92B539); }

/* ── Card ───────────────────────────────────────────────────────────────── */
.cw-card {
    background: var(--mw-surface, #fff);
    border: 1px solid var(--mw-border, #E3E7EC);
    border-radius: var(--mw-r-md, 6px);
    overflow: hidden;
    box-shadow: var(--mw-shadow-1);
}
.cw-card-soon { opacity: 0.6; }
.cw-card-head {
    padding: 16px 20px 14px;
    background: var(--mw-surface, #fff);
    border-bottom: 1px solid var(--mw-border, #E3E7EC);
}
.cw-card-head h2 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    color: var(--mw-ink-900, #1A2A3D);
    display: flex; align-items: center; gap: 8px;
    line-height: 1.35;
}
.cw-card-head h2 i { color: var(--accent, #92B539); font-size: 14px; }
.cw-card-head h2 small { font-weight: 500; color: var(--mw-ink-500, #7A8593) !important; font-size: 12px; }
.cw-card-head p { color: var(--mw-ink-500, #7A8593); font-size: 13px; margin: 0; line-height: 1.5; }
.cw-card-head p strong { color: var(--mw-ink-700, #4A5868); }
.cw-card-head p code {
    font-family: var(--mw-font-mono, monospace); font-size: 12px;
    background: var(--mw-surface-2, #FAFBFC); border: 1px solid var(--mw-border, #E3E7EC);
    padding: 1px 5px; border-radius: var(--mw-r-xs, 3px); color: var(--mw-ink-800, #2C3E55);
}
.cw-card-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.cw-card-editor { border-color: var(--mw-info, #2D7FE0) !important; box-shadow: 0 4px 20px rgba(45, 127, 224, 0.10) !important; }

/* ── Status badge (sostituisce emoji ✅/❌/⚠️ e i bg-* Bootstrap) ─────────
   Uso: <span class="cw-badge cw-badge-success">Attivo</span>
   Sempre TESTO + colore (mai solo glifo); theme-aware via token severity. */
.cw-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: var(--mw-r-pill, 999px);
    font-size: 0.74rem; font-weight: 600; line-height: 1.6;
    letter-spacing: 0.01em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.cw-badge i { font-size: 0.72rem; }
.cw-badge-success  { color: var(--mw-success, #2BA66B);  background: var(--mw-success-bg, #E3F4EB); }
.cw-badge-warning  { color: #B27013;                      background: var(--mw-warning-bg, #FEF5E0); }
.cw-badge-critical { color: var(--mw-critical, #E64545); background: var(--mw-critical-bg, #FDECEC); }
.cw-badge-info     { color: var(--mw-info, #2D7FE0);     background: var(--mw-info-bg, #E6F0FB); }
.cw-badge-neutral  { color: var(--mw-ink-500, #7A8593);  background: var(--mw-divider, #F0F2F5); }

/* ── Icon button (aria-label OBBLIGATORIA nel markup) ───────────────────── */
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid var(--mw-border, #E3E7EC); border-radius: var(--mw-r-sm, 4px);
    background: var(--mw-surface, #fff); color: var(--mw-ink-500, #7A8593);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn-icon:hover { background: var(--mw-surface-2, #FAFBFC); color: var(--mw-ink-800, #2C3E55); border-color: var(--mw-ink-300, #B8BFC9); }
.btn-icon:focus-visible { outline: 2px solid var(--accent, #92B539); outline-offset: 1px; }
.btn-icon.btn-icon-danger:hover { color: var(--mw-critical, #E64545); border-color: var(--mw-critical, #E64545); background: var(--mw-critical-bg, #FDECEC); }

/* ── Empty state ────────────────────────────────────────────────────────── */
.cw-empty {
    text-align: center; padding: 36px 16px;
    color: var(--mw-ink-500, #7A8593); font-size: 0.9rem;
}
.cw-empty i { display: block; font-size: 1.8rem; margin-bottom: 8px; color: var(--accent, #92B539); opacity: 0.75; }

/* ── Dark mode ──────────────────────────────────────────────────────────── */
/* cw-card / cw-badge / btn-icon ereditano il flip automaticamente: usano SOLO
   token --mw-* che body.dark-mode ridefinisce in mago-tokens.css. */
body.dark-mode .cw-page-head h1 { color: var(--mw-ink-900); }
body.dark-mode .cw-badge-warning { color: var(--mw-warning); }