/* ════════════════════════════════════════════════════════════
   Style du site : « Linux Mint » (Cinnamon, thème Mint-Y), sombre et clair.
   Chargé après app.css : remplace ses couleurs et ses formes (structure des pages dans app.css).
   ════════════════════════════════════════════════════════════ */

/* ── Mint-Y sombre (défaut) ── */
:root {
    --bg: #1c1c1c;
    --surface: #2d2d2d;
    --surface-2: #383838;
    --line: #3e3e3e;
    --line-strong: #4f4f4f;
    --text: #e8e8e8;
    --text-2: #a8a8a8;
    --accent: #35a854;          /* vert menthe Mint-Y */
    --accent-strong: #57c16f;
    --accent-soft: rgba(53, 168, 84, .18);
    --on-accent: #ffffff;
    --ok: #57c16f;   --ok-soft: rgba(53, 168, 84, .16);
    --warn: #e5a50a; --warn-soft: rgba(229, 165, 10, .16);
    --bad: #f0515a;  --bad-soft: rgba(224, 27, 36, .16);
    --radius: 8px;
    --radius-sm: 5px;
    --font: "Ubuntu", "Noto Sans", "Cantarell", "Segoe UI", system-ui, sans-serif;
    /* Panneau Cinnamon : toujours sombre, même en thème clair */
    --panel: #1a1a1a;
    --panel-ink: #e6e6e6;
    --panel-hover: rgba(255, 255, 255, .09);
    --desk-glow: rgba(53, 168, 84, .14);
}

/* ── Mint-Y clair ── */
:root[data-theme="light"] {
    --bg: #dfe3dd;
    --surface: #ffffff;
    --surface-2: #f2f2f2;
    --line: #d9d9d9;
    --line-strong: #c4c4c4;
    --text: #2e3436;
    --text-2: #6a6a6a;
    --accent: #35a854;
    --accent-strong: #2f974b;
    --accent-soft: rgba(53, 168, 84, .13);
    --on-accent: #ffffff;
    --ok: #2f974b;   --ok-soft: rgba(53, 168, 84, .14);
    --warn: #b37f00; --warn-soft: rgba(229, 165, 10, .16);
    --bad: #d01b24;  --bad-soft: rgba(224, 27, 36, .11);
    --desk-glow: rgba(53, 168, 84, .18);
}

/* Fond « bureau » : léger halo vert comme le fond d'écran Mint */
:root body {
    background-color: var(--bg);
    background-image: radial-gradient(1100px 600px at 90% 110%, var(--desk-glow), transparent 60%),
                      radial-gradient(800px 480px at -5% -10%, var(--desk-glow), transparent 60%);
    background-attachment: fixed;
    font-size: 14.5px;
}
:root h1, :root h2, :root h3 { font-weight: 500; }

/* ── Barre du haut = panneau Cinnamon ── */
:root .topbar {
    height: 44px;
    background: var(--panel); color: var(--panel-ink);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
:root .topbar__brand { color: var(--panel-ink); font-weight: 600; letter-spacing: 0; }
:root .topbar__brand img { width: 26px; height: 26px; border-radius: 6px; }
:root .topbar .icon-btn { color: var(--panel-ink); width: 36px; height: 36px; border-radius: 5px; }
:root .topbar .icon-btn:hover { background: var(--panel-hover); color: #fff; }
:root .topbar .chip { background: rgba(53, 168, 84, .22); color: #8fdca2; border-radius: 5px; }
@media (min-width: 900px) {
    :root .sidebar { top: 44px; height: calc(100vh - 44px); }
}

/* ── Menu de gauche = menu Cinnamon ── */
:root .sidebar {
    background: rgba(30, 30, 30, .96); border-right: 1px solid rgba(255, 255, 255, .06);
    padding: 12px 10px;
}
:root[data-theme="light"] .sidebar { background: rgba(250, 250, 250, .97); border-right-color: var(--line); }
:root .side-title { color: var(--text-2); letter-spacing: .4px; font-weight: 600; }
:root .side-link { border-radius: 5px; font-weight: 500; padding: 8px 10px; }
:root .side-link .icon { color: var(--accent); }
:root .side-link:hover { background: var(--accent-soft); color: var(--text); }
:root .side-link.is-active { background: var(--accent); color: #fff; }
:root .side-link.is-active .icon { color: #fff; }

/* ── Fenêtres (cartes) : coins Mint-Y, ombre douce ── */
:root .card,
:root .quick__item,
:root .stock-item,
:root .guest__card,
:root .dialog {
    border-color: var(--line);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .quick__item,
:root[data-theme="light"] .stock-item { box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
:root .dialog { border-radius: 10px; }

/* ── Boutons, champs, onglets : style GTK Mint-Y ── */
:root .btn { font-weight: 500; border-radius: 5px; }
:root .btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
:root input[type=text], :root input[type=password], :root input[type=number],
:root input[type=email], :root input[type=search], :root select, :root textarea {
    border-radius: 5px; background: var(--surface);
}
:root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] input[type=number], :root[data-theme="dark"] input[type=email],
:root[data-theme="dark"] input[type=search], :root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: #242424; }
:root .pill { border-radius: 5px; font-weight: 500; }
:root .pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
:root .scan-cta { border-radius: 10px; }
:root .scan-cta:hover { background: var(--accent-strong); }
:root .quick__item:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ── Barre d'onglets du téléphone = panneau du bas Cinnamon ── */
:root .tabbar { background: var(--panel); border-top: 1px solid rgba(255, 255, 255, .06); }
:root .tab { color: #b5b5b5; font-weight: 500; }
:root .tab.is-active { color: #6fd188; box-shadow: inset 0 3px 0 var(--accent); }