/* =========================
   Design tokens
   ========================= */
:root {
    /* Couleurs */
    --bg: #0f1115;
    --surface: #0b0e14;
    --card: #151923;
    --fg: #e7e9ee;
    --muted: #aab1c5;
    --border: #232838;
    --shadow: rgba(0, 0, 0, .25);

    --accent: #6ee7b7;
    --accent2: #60a5fa;
    --danger: #ff6b6b;

    /* Rayons, espacements, tailles */
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 14px;
    --r-xl: 16px;

    --sp-1: 6px;
    --sp-2: 8px;
    --sp-3: 10px;
    --sp-4: 12px;
    --sp-5: 14px;
    --sp-6: 16px;
    --sp-7: 18px;
    --sp-8: 20px;

    --fs-12: 12px;
    --fs-13: 13px;
    --fs-15: 15px;
    --fs-18: 18px;
    --fs-26: 26px;

    /* Layout */
    --wrap-max: 1400px;
    --sidebar-w: 420px;
    --chart-min: 720px;
}

/* =========================
   Base
   ========================= */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    color: var(--fg);
    background: var(--bg);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* =========================
   Layout généraux
   ========================= */
.wrap {
    max-width: var(--wrap-max);
    margin: 32px auto;
    padding: 0 var(--sp-4);
}

.card {
    background: var(--card);
    border-radius: var(--r-xl);
    padding: var(--sp-8);
    box-shadow: 0 10px 30px var(--shadow);
}

/* Titres & textes */
h1 {
    font-size: var(--fs-26);
    letter-spacing: .3px;
    margin: 0 0 var(--sp-3);
}

h2 {
    font-size: var(--fs-18);
    margin: 0 0 var(--sp-2);
}

p.hint {
    color: var(--muted);
    margin: var(--sp-1) 0 0;
}

.muted {
    color: var(--muted);
}

/* Grille simple */
.row {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
}

/* =========================
   Inputs & Boutons (factorisés)
   ========================= */
input,
button {
    font-family: inherit;
}

input {
    width: 100%;
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-15);
    outline: none;
}

input:focus {
    outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.btn {
    background: #1d2334;
    color: var(--fg);
    border: 1px solid #2a3148;
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
}

.btn:hover {
    filter: brightness(1.08);
}

/* Surfaces de résultat / panneaux */
.result {
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-4) var(--sp-5);
    min-height: 56px;
}

/* Barres d’outils & légende */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    margin: var(--sp-5) 0;
    align-items: center;
}

.legend {
    display: flex;
    gap: var(--sp-6);
    align-items: center;
    flex-wrap: wrap;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: var(--sp-2);
    border: 1px solid #0005;
}

/* =========================
   Dashboard & zones
   ========================= */
.dashboard {
    display: grid;
    gap: var(--sp-6);
}

.modChart {
    grid-area: modChart;
}

.modList {
    grid-area: modList;
}

/* Layout: graphe à gauche */
@media (min-width: 1100px) {
    :root[data-layout="graph-left"] .dashboard {
        grid-template-columns: minmax(700px, 1fr) 430px;
        grid-template-areas: "modChart modList";
        align-items: start;
    }
}

@media (max-width: 1099px) {
    :root[data-layout="graph-left"] .dashboard {
        grid-template-columns: 1fr;
        grid-template-areas: "modChart" "modList";
    }
}

/* Layout inversé: machines à gauche, graphe à droite */
@media (min-width: 1100px) {
    :root[data-layout="graph-right"] .dashboard {
        grid-template-columns: var(--sidebar-w) minmax(var(--chart-min), 1fr);
        grid-template-areas: "modList modChart";
        align-items: stretch;
    }
}

@media (max-width: 1099px) {
    :root[data-layout="graph-right"] .dashboard {
        grid-template-columns: 1fr;
        grid-template-areas: "modList" "modChart";
    }
}

/* Sidebar collante */
:root[data-layout="graph-right"] .modList {
    position: sticky;
    top: var(--sp-4);
    align-self: start;
    max-height: calc(100vh - var(--sp-8)*1.2);
    overflow: auto;
}

/* Plein écran */
:root[data-fullscreen="1"] .wrap {
    max-width: none;
    margin: 0;
    padding: var(--sp-4);
}

:root[data-fullscreen="1"] .dashboard {
    min-height: calc(100vh - var(--sp-4)*2);
}

/* Canvas responsive (hauteur contrainte) */
.modChart canvas {
    width: 100%;
    height: clamp(420px, 82vh, 900px);
    display: block;
}

/* =========================
   Machines / cartes
   ========================= */
.machines-header {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}

.machines-container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-height: calc(100vh - 220px);
    overflow: auto;
    padding-right: 4px;
}

.machine-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
}

.machine-header {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-3);
}

.machine-header input.name {
    flex: 1;
}

.color-chip {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #0006;
}

.delete {
    background: #2a1d21;
    border-color: #512a30;
}

.delete:hover {
    filter: brightness(1.1);
}

/* =========================
   Segmented control
   ========================= */
.seg {
    display: inline-flex;
    border: 1px solid #2a3148;
    background: var(--surface);
    border-radius: var(--r-md);
    overflow: hidden;
}

.seg button {
    appearance: none;
    background: transparent;
    color: var(--muted);
    border: 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-13);
    cursor: pointer;
}

.seg button+button {
    border-left: 1px solid #2a3148;
}

.seg button.active {
    color: var(--fg);
    background: #1d2334;
}

/* =========================
   Grilles compactes
   ========================= */
.inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

.inline-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-3);
}

.small {
    font-size: var(--fs-12);
    color: var(--muted);
}

/* =========================
   Table compacte (panneau)
   ========================= */
.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-13);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.mini-table thead th {
    text-align: left;
    padding: var(--sp-2) var(--sp-3);
    background: #141a28;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.mini-table tbody td {
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px dashed var(--border);
}

.mini-table tbody tr:first-child td {
    border-top: 0;
}

.mini-table .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: var(--sp-2);
    border: 1px solid #0005;
}

/* =========================
   Responsive — Tablette
   ========================= */
@media (max-width: 900px) {
    :root {
        --wrap-max: 100%;
        --sidebar-w: 100%;
        --chart-min: 0px;
        /* pas de min rigide sur petit écran */
    }

    .wrap {
        margin: 16px auto;
        padding: 0 var(--sp-4);
    }

    /* Dashboard en pile */
    .dashboard {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "modChart"
            "modList";
        gap: var(--sp-4);
    }

    /* Pas de sticky en mobile/tablette */
    .modList {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Canvas moins haut pour éviter le scroll infernal */
    .modChart canvas {
        height: clamp(360px, 55vh, 640px);
    }

    /* Légende compacte */
    .legend {
        gap: var(--sp-3);
    }

    .legend .dot {
        width: 10px;
        height: 10px;
    }

    /* Grilles qui se replient */
    .inline {
        grid-template-columns: 1fr;
    }

    .inline-3 {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================
   Responsive — Téléphone
   ========================= */
@media (max-width: 600px) {
    :root {
        /* un peu plus gros sur mobile */
        --fs-12: 13px;
        --fs-13: 14px;
        --fs-15: 16px;
        --fs-18: 18px;
        --fs-26: 22px;

        --sp-2: 8px;
        --sp-3: 10px;
        --sp-4: 12px;
        --sp-5: 14px;
        --sp-6: 16px;
    }

    h1 {
        font-size: var(--fs-26);
    }

    /* Inputs et boutons: plus faciles à toucher */
    input {
        padding: 12px 14px;
        font-size: var(--fs-15);
    }

    .btn {
        padding: 12px 14px;
    }

    /* Segmented control: tuiles plus larges, wrap autorisé */
    .seg {
        width: 100%;
        flex-wrap: wrap;
    }

    .seg button {
        flex: 1 1 33%;
        padding: 10px 12px;
        min-width: 0;
        /* éviter overflow texte long */
    }

    /* Cartes machines : marges resserrées */
    .machines-container {
        max-height: none;
        gap: var(--sp-3);
    }

    .machine-card {
        padding: var(--sp-4);
    }

    /* Titre + actions sur une ligne qui wrap */
    .machines-header {
        flex-wrap: wrap;
        gap: var(--sp-3);
    }

    /* Canvas encore plus raisonnable sur très petits écrans */
    .modChart canvas {
        height: clamp(320px, 48vh, 560px);
    }

    /* Tableau d’info compact, scrollable si besoin */
    .mini-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mini-table thead th,
    .mini-table tbody td {
        padding: 8px 10px;
    }
}

/* =========================
   Very small phones
   ========================= */
@media (max-width: 380px) {
    .seg button {
        flex: 1 1 50%;
    }

    /* 2 par ligne */
    .legend {
        gap: var(--sp-2);
    }

    .modChart canvas {
        height: 46vh;
    }

    /* limite haute encore */
}