/* ============================================================
   OpenBots — Design system partagé (style « dashboard »)
   Préfixe .dsx- pour éviter toute collision avec l'existant.
   ============================================================ */

/* Densité compacte (préférence de compte) : réduit l'échelle rem globale. */
html[data-density="compact"] { font-size: 14.5px; }

:root {
    /* Surfaces (palette Discord-dark du dashboard) */
    --dsx-bg:var(--sw-bg);
    --dsx-bg-deep:var(--sw-surface);
    --dsx-surface:var(--sw-surface);
    --dsx-surface-2:var(--sw-bg);
    --dsx-inset:var(--sw-surface);

    /* Lignes / bordures */
    --dsx-line:var(--sw-line-2, rgba(255,255,255,.24));
    --dsx-line-strong:var(--sw-line-2, rgba(255,255,255,.35));

    /* Texte */
    --dsx-text:var(--sw-white);
    --dsx-text-mut:var(--sw-white);
    --dsx-text-dim:var(--sw-raised-2);

    /* Accents */
    --dsx-accent:var(--sw-blue);
    --dsx-accent-hover:var(--sw-blue);
    --dsx-accent-soft:color-mix(in srgb, var(--sw-blue-ink) 15%, transparent);
    --dsx-ok:var(--sw-green);
    --dsx-warn:var(--sw-yellow);
    --dsx-danger:var(--sw-red);

    /* Formes */
    --dsx-radius:    14px;
    --dsx-radius-sm: 9px;
    --dsx-shadow:0 4px 14px rgba(0,0,0,.28);
    --dsx-shadow-lg:0 8px 24px rgba(0,0,0,.45);
    --dsx-font: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---- Base (pour pages autonomes) ---- */
.dsx-body {
    margin: 0;
    background: var(--dsx-bg);
    color: var(--dsx-text);
    font-family: var(--dsx-font);
    -webkit-font-smoothing: antialiased;
}
.dsx-wrap { max-width: none; margin: 0 auto; padding: 26px clamp(16px, 4vw, 64px) 80px; }

/* ---- En-tête de page ---- */
.dsx-pagehead { margin-bottom: 22px; }
.dsx-pagehead h1 { font-size: 1.4rem; font-weight: 800; margin: 0 0 4px; }
.dsx-pagehead p  { color: var(--dsx-text-mut); margin: 0; font-size: .92rem; }

/* ---- Carte / section (équivalent dash-section) ---- */
.dsx-card {
    background: var(--dsx-surface);
    border: 1px solid var(--dsx-line);
    border-radius: var(--dsx-radius);
    overflow: hidden;
    margin-bottom: 16px;
}
.dsx-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--dsx-line);
}
.dsx-card-title { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1rem; }
.dsx-card-title i { color: var(--sw-blue-ink); }
.dsx-card-body { padding: 16px 18px; }
.dsx-card.dsx-pad { padding: 18px 20px; }
.dsx-sub { color: var(--dsx-text-mut); font-size: .85rem; margin: 0 0 14px; }

/* ---- Grille de cartes ---- */
.dsx-grid { display: grid; gap: 16px; }
.dsx-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.dsx-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dsx-grid.auto   { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 720px) { .dsx-grid.cols-2, .dsx-grid.cols-3 { grid-template-columns: 1fr; } }

/* ---- Boutons ---- */
.dsx-btn {
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    border: none; cursor: pointer; border-radius: var(--dsx-radius-sm);
    padding: 9px 16px; font-weight: 700; font-size: .86rem; font-family: inherit;
    text-decoration: none; transition: background .12s, color .12s, opacity .12s;
}
.dsx-btn-primary { background: var(--dsx-accent); color:var(--sw-on); }
.dsx-btn-primary:hover { background: var(--dsx-accent-hover); color:var(--sw-on); }
.dsx-btn-ghost { background:color-mix(in srgb, var(--sw-raised-2) 40%, transparent); color:var(--sw-ink); }
.dsx-btn-ghost:hover { background:color-mix(in srgb, var(--sw-raised-2) 60%, transparent); }
.dsx-btn-danger { background: var(--sw-red); color:var(--sw-on); }
.dsx-btn-sm { padding: 6px 11px; font-size: .8rem; }

/* ---- Badges ---- */
.dsx-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.dsx-badge.ok { background:color-mix(in srgb, var(--sw-green-ink) 15%, transparent); color: var(--dsx-ok); }
.dsx-badge.ko { background:color-mix(in srgb, var(--sw-red-ink) 15%, transparent); color: var(--dsx-danger); }
.dsx-badge.warn { background:color-mix(in srgb, var(--sw-yellow-ink) 15%, transparent); color: var(--dsx-warn); }

/* ---- Champs ---- */
.dsx-label { display: block; font-size: .74rem; color: var(--dsx-text-mut); margin: 0 0 5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.dsx-input, .dsx-select, .dsx-textarea {
    width: 100%; background: var(--dsx-inset); border: 1px solid var(--dsx-line);
    color: var(--dsx-text); border-radius: var(--dsx-radius-sm); padding: 9px 11px;
    font-size: .9rem; font-family: inherit;
}
.dsx-input:focus, .dsx-select:focus, .dsx-textarea:focus { outline: none; border-color: var(--dsx-accent); }

/* ---- Tuile cliquable (serveur / bot) ---- */
.dsx-tile {
    display: flex; align-items: center; gap: 13px; padding: 14px 16px;
    background: var(--dsx-surface); border: 1px solid var(--dsx-line);
    border-radius: var(--dsx-radius-sm); cursor: pointer; text-decoration: none;
    color: var(--dsx-text); transition: background .12s, border-color .12s, transform .12s;
}
.dsx-tile:hover { background: var(--dsx-surface-2); border-color:color-mix(in srgb, var(--sw-blue-ink) 35%, transparent); transform: translateY(-1px); }
.dsx-tile .ic { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; object-fit: cover;
    background: var(--dsx-accent-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.dsx-tile .ic img { width: 100%; height: 100%; object-fit: cover; }
.dsx-tile .nm { font-weight: 800; line-height: 1.15; }
.dsx-tile .meta { color: var(--dsx-text-mut); font-size: .8rem; }

/* ---- État vide ---- */
.dsx-empty { color: var(--dsx-text-mut); font-size: .85rem; padding: 8px 0; text-align: center; }

/* ---- Toast ---- */
.dsx-toast {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #181b28; color: #fff; padding: 12px 20px; border-radius: 12px;
    font-size: .88rem; font-weight: 700; opacity: 0; pointer-events: none; transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease, transform .25s ease, box-shadow .25s ease;
    z-index: 4000; border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 25px rgba(0,0,0,.45);
    display: inline-flex; align-items: center; max-width: min(90vw, 560px);
    line-height: 1.4;
}
.dsx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dsx-toast.err {
    background: #1f1418;
    color: #fecdd3;
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);
}