body { font-family: sans-serif; max-width: 900px; margin: 0 auto; padding: 0 20px 60px; color: #1a1a1a; }
a { color: #2563eb; }

nav.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 30px;
}
nav.topnav .links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
nav.topnav a { text-decoration: none; color: #333; font-size: 0.95em; }
nav.topnav a.brand { font-weight: bold; color: #111; font-size: 1.1em; }
nav.topnav .user { display: flex; align-items: center; gap: 8px; font-size: 0.9em; color: #555; }
nav.topnav .user img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

h1 { margin-top: 0; }
label { display: block; margin-top: 15px; font-weight: bold; }
input, select, textarea { width: 100%; padding: 8px; margin-top: 5px; box-sizing: border-box; font: inherit; }
input[type=color] { padding: 2px; height: 42px; }
input[type=radio], input[type=checkbox] { width: auto; }
button, a.button, input[type=submit] {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 18px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.95em;
}
button.secondary, a.button.secondary { background: #f0f0f0; color: #222; }

table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid #ddd; vertical-align: middle; }
img.thumb { width: 60px; height: 60px; object-fit: contain; }

.hint { font-weight: normal; font-size: 0.85em; color: #666; }
.result { background: #f0f8ff; padding: 15px; border-radius: 8px; margin-top: 20px; }
.error { background: #fff0f0; padding: 15px; border-radius: 8px; margin-top: 20px; color: #900; }
.warning { background: #fff8e6; padding: 15px; border-radius: 8px; margin-top: 20px; color: #7a5c00; }
.empty { color: #666; margin-top: 20px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75em; background: #eee; }
.badge.serie { background: #e0e7ff; color: #3730a3; }
.badge.qrcode { background: #dcfce7; color: #166534; }
.badge.offline { background: #fee2e2; color: #991b1b; }
code { background: #f4f4f4; padding: 2px 6px; border-radius: 4px; }

/* Boutons d'action icône seule (tableau de bord). <a> et <button> ont des styles
   natifs différents (police, ligne de base, apparence système) : on les neutralise
   tous pour que les deux types d'éléments soient visuellement indiscernables,
   même si l'un est un lien de navigation (GET) et l'autre un bouton de formulaire
   (POST, nécessaire pour les actions qui modifient des données : bascule, suppression).
   flex-wrap: nowrap volontairement : les lignes n'ont pas toutes le même nombre
   d'actions (une série en a plus qu'un QR seul) — les laisser passer à la ligne
   indépendamment créait un décalage visuel de la bordure basse entre les lignes. */
.icon-actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: 0; padding: 0;
    box-sizing: border-box;
    border-radius: 6px; border: 1px solid #ddd; background: #fff; color: #444;
    cursor: pointer; text-decoration: none;
    font: inherit; line-height: 1;
    appearance: none; -webkit-appearance: none;
}
.icon-btn:hover { background: #f3f4f6; border-color: #ccc; }
.icon-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
.icon-btn.danger { color: #dc2626; background: #fff; }
.icon-btn.danger:hover { background: #fee2e2; border-color: #fca5a5; }
.icon-btn.active-power { color: #16a34a; }
.icon-btn.inactive-power { color: #999; }
form.inline-icon { display: inline-flex; align-items: center; margin: 0; padding: 0; }

/* Menu d'export sur les miniatures (dashboard, détail de série) */
.thumb-wrap { position: relative; display: inline-block; }
.thumb-trigger {
    padding: 0; margin: 0; border: none; background: none; cursor: pointer;
    display: block; border-radius: 6px; overflow: hidden;
}
.thumb-trigger:hover img.thumb { opacity: 0.8; }
.thumb-trigger:focus-visible { outline: 2px solid #2563eb; }
.thumb-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
    background: #fff; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); min-width: 190px; padding: 6px;
}
.thumb-menu.open { display: block; }
.thumb-menu a, .thumb-menu button {
    display: block; width: 100%; text-align: left; margin: 0; padding: 8px 10px;
    border: none; background: none; border-radius: 5px; color: #222; font-size: 0.9em;
    text-decoration: none; cursor: pointer; font: inherit;
}
.thumb-menu a:hover, .thumb-menu button:hover { background: #f3f4f6; }
.thumb-menu .menu-label { font-size: 0.75em; color: #999; padding: 6px 10px 2px; text-transform: uppercase; }

/* Mise en page de la page d'édition : formulaire à onglets + aperçu toujours visible */
.qr-edit-layout { display: flex; gap: 30px; align-items: flex-start; margin-top: 20px; }
.qr-edit-layout .form-col { flex: 1; min-width: 280px; }
.qr-edit-layout .preview-col { flex: 0 0 300px; position: sticky; top: 20px; text-align: center; }
@media (max-width: 750px) {
    .qr-edit-layout { flex-direction: column; }
    .qr-edit-layout .preview-col { position: static; width: 100%; order: -1; }
}

.tabs { display: flex; gap: 5px; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
.tabs button.tab-btn {
    background: none; border: none; margin-top: 0; color: #666;
    padding: 10px 14px; cursor: pointer; font-size: 0.95em;
    border-bottom: 2px solid transparent; border-radius: 0;
}
.tabs button.tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: bold; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.type-fields { display: none; }
.type-fields.active { display: block; }

/* Glissière de choix du mode de création (QR simple / série) */
.mode-switch {
    position: relative;
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 20px;
}
.mode-switch input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.mode-switch label {
    position: relative; z-index: 1;
    padding: 8px 20px; margin: 0;
    border-radius: 999px; cursor: pointer; font-weight: normal;
    color: #555; transition: color 0.2s;
}
.mode-switch input[type=radio]:checked + label { color: #fff; }
.mode-switch .slider {
    position: absolute; top: 4px; bottom: 4px; left: 4px;
    width: calc(50% - 4px);
    background: #2563eb; border-radius: 999px;
    transition: transform 0.2s ease; z-index: 0;
}
#mode_series:checked ~ .slider { transform: translateX(100%); }
.mode-only { display: none; }
.mode-only.active { display: block; }