/* =============================================================
   Widget MATIF — Styles (vue détaillée)
   Toutes les valeurs éditables sont dans :root
   ============================================================= */

:root {
    /* --- Typographie ------------------------------------------ */
    --mw-font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
                    "Helvetica Neue", Arial, sans-serif;
    --mw-font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --mw-fs-title:   16px;
    --mw-fs-body:    13px;
    --mw-fs-price:   14px;
    --mw-fs-small:   12px;
    --mw-fs-tiny:    11px;

    /* --- Palette — thème clair (défaut) ----------------------- */
    --mw-bg:         #ffffff;
    --mw-surface:    #f7f8fa;
    --mw-surface-2:  #eef1f5;
    --mw-border:     #e4e7ec;
    --mw-border-strong: #cdd2da;
    --mw-text:       #101828;
    --mw-text-muted: #667085;
    --mw-text-soft:  #98a2b3;

    --mw-brand:          #14532d;  /* vert agricole profond */
    --mw-brand-contrast: #ffffff;

    --mw-up:      #027a48;
    --mw-up-bg:   #ecfdf3;
    --mw-down:    #b42318;
    --mw-down-bg: #fef3f2;
    --mw-flat:    #667085;
    --mw-flat-bg: #f2f4f7;

    /* --- Forme ----------------------------------------------- */
    --mw-radius:      12px;
    --mw-radius-sm:   8px;
    --mw-radius-pill: 999px;

    --mw-shadow:
        0 1px 2px rgba(16, 24, 40, 0.06),
        0 1px 3px rgba(16, 24, 40, 0.10);
    --mw-shadow-tab: 0 1px 2px rgba(16, 24, 40, 0.08);

    /* --- Espacement ------------------------------------------ */
    --mw-pad:    16px;
    --mw-pad-sm: 12px;
    --mw-gap:    10px;

    /* --- Dimensions ------------------------------------------ */
    --mw-w-standard: 720px;
    --mw-w-compact:  420px;

    /* Hauteur max de la zone scrollable (le tableau des échéances).
       Ajuste ici si tu veux voir plus/moins d'échéances sans scroll. */
    --mw-table-max-h: 340px;

    /* --- Transitions ----------------------------------------- */
    --mw-t-fast: 120ms ease;
    --mw-t-med:  200ms ease;
}

/* --- Thème sombre (auto via préférence système) --------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --mw-bg:            #0e1116;
        --mw-surface:       #171b22;
        --mw-surface-2:     #1f242d;
        --mw-border:        #262c36;
        --mw-border-strong: #3a4150;
        --mw-text:          #e6edf3;
        --mw-text-muted:    #9aa4b2;
        --mw-text-soft:     #6b7280;

        --mw-brand:          #22c55e;
        --mw-brand-contrast: #0b1a10;

        --mw-up:      #22c55e;
        --mw-up-bg:   rgba(34, 197, 94, 0.12);
        --mw-down:    #f87171;
        --mw-down-bg: rgba(248, 113, 113, 0.12);
        --mw-flat:    #9aa4b2;
        --mw-flat-bg: rgba(154, 164, 178, 0.10);

        --mw-shadow:
            0 1px 2px rgba(0, 0, 0, 0.4),
            0 1px 3px rgba(0, 0, 0, 0.3);
        --mw-shadow-tab: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
}

/* =============================================================
   Reset local & page d'aperçu
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* Le widget est pensé pour être embarqué en iframe : fond transparent
   et zéro padding, pour que rien ne "déborde" autour du rectangle. */
html, body {
    margin: 0;
    padding: 0;
    background: transparent;
    font-family: var(--mw-font-sans);
    color: var(--mw-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================
   Widget
   ============================================================= */

.matif-widget {
    width: 100%;
    max-width: var(--mw-w-standard);
    background: var(--mw-bg);
    color: var(--mw-text);
    border: 1px solid var(--mw-border);
    border-radius: var(--mw-radius);
    box-shadow: var(--mw-shadow);
    overflow: hidden;
    font-family: var(--mw-font-sans);
    line-height: 1.4;
}

/* --- Onglets ------------------------------------------------- */

.mw-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--mw-surface);
    border-bottom: 1px solid var(--mw-border);
}

.mw-tab {
    flex: 1;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--mw-text-muted);
    font: 500 var(--mw-fs-body)/1 var(--mw-font-sans);
    letter-spacing: 0.01em;
    border-radius: var(--mw-radius-sm);
    cursor: pointer;
    transition: background var(--mw-t-fast),
                color var(--mw-t-fast),
                box-shadow var(--mw-t-fast);
}
.mw-tab:hover { color: var(--mw-text); }
.mw-tab:focus-visible {
    outline: 2px solid var(--mw-brand);
    outline-offset: -2px;
}
.mw-tab.is-active {
    background: var(--mw-bg);
    color: var(--mw-brand);
    box-shadow: var(--mw-shadow-tab);
}

/* --- En-tête ------------------------------------------------- */

.mw-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mw-gap);
    padding: var(--mw-pad) var(--mw-pad) 10px;
}

.mw-head-main { min-width: 0; }

.mw-title {
    margin: 0 0 3px;
    font-size: var(--mw-fs-title);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mw-text);
}

.mw-updated {
    margin: 0;
    font-size: var(--mw-fs-small);
    color: var(--mw-text-soft);
}

.mw-trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: var(--mw-flat-bg);
    color: var(--mw-flat);
    border-radius: var(--mw-radius-pill);
    font-size: var(--mw-fs-small);
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--mw-t-med), color var(--mw-t-med);
}
.mw-trend.up   { background: var(--mw-up-bg);   color: var(--mw-up); }
.mw-trend.down { background: var(--mw-down-bg); color: var(--mw-down); }
.mw-trend-icon { font-size: 10px; line-height: 1; }

/* --- Table --------------------------------------------------- */

.mw-table-wrap {
    padding: 0 var(--mw-pad) 4px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: var(--mw-table-max-h);

    /* Scrollbar discrète (Firefox + Webkit) */
    scrollbar-width: thin;
    scrollbar-color: var(--mw-border-strong) transparent;
}
.mw-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.mw-table-wrap::-webkit-scrollbar-track { background: transparent; }
.mw-table-wrap::-webkit-scrollbar-thumb {
    background: var(--mw-border-strong);
    border-radius: 4px;
}
.mw-table-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--mw-text-soft);
}

/* En-tête de tableau collant pendant le scroll vertical */
.mw-table thead th {
    position: sticky;
    top: 0;
    background: var(--mw-bg);
    z-index: 1;
}

.mw-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.mw-table th,
.mw-table td {
    padding: 6px 8px;
    font-size: var(--mw-fs-body);
    text-align: left;
    vertical-align: middle;
}

.mw-table thead th {
    padding: 8px 8px 10px;
    font-size: var(--mw-fs-tiny);
    font-weight: 600;
    color: var(--mw-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--mw-border-strong);
    line-height: 1.3;
    white-space: nowrap;
}
.mw-table thead th .mw-h-top { display: block; }
.mw-table thead th .mw-h-bot {
    display: block;
    color: var(--mw-text-soft);
    opacity: 0.7;
    font-weight: 500;
    margin-top: 2px;
}

.mw-table .num { text-align: right; white-space: nowrap; }

/* --- Vue détaillée : 2 lignes par échéance ------------------ */

.mw-table-detailed tbody .mw-row-top td {
    padding-top: 8px;
    padding-bottom: 2px;
}
.mw-table-detailed tbody .mw-row-bot td {
    padding-top: 2px;
    padding-bottom: 8px;
    color: var(--mw-text-muted);
    font-size: var(--mw-fs-small);
    border-bottom: 1px solid var(--mw-border);
}
.mw-table-detailed tbody .mw-row-top td { border-bottom: 0; }
.mw-table-detailed tbody tr:last-child td { border-bottom: 0; }

/* Cellule "Échéance" fusionnée sur les 2 lignes */
.mw-cell-ech {
    vertical-align: middle !important;
    border-bottom: 1px solid var(--mw-border) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    white-space: nowrap;
}
.mw-ech {
    display: inline-block;
    font-weight: 600;
    color: var(--mw-text);
}
.mw-ech-mark {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: var(--mw-radius-sm);
    background: var(--mw-flat-bg);
    color: var(--mw-flat);
    vertical-align: middle;
}
.mw-ech-mark.up   { background: var(--mw-up-bg);   color: var(--mw-up); }
.mw-ech-mark.down { background: var(--mw-down-bg); color: var(--mw-down); }

/* Cellule "Vol. jour" fusionnée sur les 2 lignes */
.mw-vol {
    vertical-align: middle !important;
    color: var(--mw-text-muted);
    font-family: var(--mw-font-mono);
    font-size: var(--mw-fs-small);
    border-bottom: 1px solid var(--mw-border) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.mw-price {
    font-family: var(--mw-font-mono);
    font-weight: 600;
    font-size: var(--mw-fs-price);
    color: var(--mw-text);
}

.mw-time {
    font-family: var(--mw-font-mono);
    color: var(--mw-text-soft);
}

.mw-vol-val {
    font-family: var(--mw-font-mono);
}

/* Cellules "trade du jour" absent → tiret discret */
.mw-dash {
    color: var(--mw-text-soft);
    opacity: 0.5;
}

/* Lignes "stale" (échéance non tradée aujourd'hui) : légère atténuation */
.mw-table-detailed tbody tr.mw-stale.mw-row-top td.mw-cell-ech .mw-ech {
    font-weight: 500;
    color: var(--mw-text-muted);
}

.mw-up   { color: var(--mw-up); }
.mw-down { color: var(--mw-down); }
.mw-flat { color: var(--mw-flat); }

.mw-empty {
    text-align: center;
    padding: 32px 16px;
    font-size: var(--mw-fs-body);
    color: var(--mw-text-soft);
}
.mw-empty.is-error { color: var(--mw-down); }

/* Hover sur "groupe" échéance : on colorise les 2 lignes */
.mw-table-detailed tbody tr.mw-row-top:hover,
.mw-table-detailed tbody tr.mw-row-top:hover + tr.mw-row-bot,
.mw-table-detailed tbody tr.mw-row-bot:hover,
.mw-table-detailed tbody tr.mw-row-bot:hover ~ tr:first-of-type {
    background: var(--mw-surface);
}

/* --- Pied --------------------------------------------------- */

.mw-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--mw-gap);
    padding: 10px var(--mw-pad);
    background: var(--mw-surface);
    border-top: 1px solid var(--mw-border);
    font-size: var(--mw-fs-tiny);
    color: var(--mw-text-soft);
}

/* --- Variante compacte -------------------------------------- */

.matif-widget.is-compact {
    max-width: var(--mw-w-compact);
}
.matif-widget.is-compact .mw-table th,
.matif-widget.is-compact .mw-table td {
    padding: 4px 6px;
    font-size: var(--mw-fs-small);
}
.matif-widget.is-compact .mw-title { font-size: 15px; }

/* --- Responsive --------------------------------------------- */

@media (max-width: 480px) {
    body { padding: 12px; }
}

/* --- Animation d'apparition --------------------------------- */

@keyframes mw-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
}
.mw-body tr {
    animation: mw-fade-in 220ms ease both;
}
@media (prefers-reduced-motion: reduce) {
    .mw-body tr, .mw-trend, .mw-tab { animation: none; transition: none; }
}