* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: #f3f4f8; color: #1f2937; }

header { background: #1e1b4b; color: #fff; padding: 14px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
header h1 { margin: 0; font-size: 22px; }
nav { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { background: transparent; color: #c7d2fe; border: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.tab:hover { background: #312e81; }
.tab.active { background: #4f46e5; color: #fff; }
.badge { background: #ef4444; color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 12px; margin-left: 4px; }
.hidden { display: none !important; }

main { max-width: 1150px; margin: 24px auto; padding: 0 16px; }
.page { display: none; }
.page.active { display: block; }
h2 { font-size: 18px; margin: 24px 0 10px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.card { background: #fff; border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card span { display: block; color: #6b7280; font-size: 14px; }
.card strong { font-size: 26px; }
.card.warn strong { color: #dc2626; }

table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef0f4; font-size: 14px; }
th { background: #f9fafb; color: #6b7280; font-weight: 600; }
td.num { text-align: right; }
tr.low td { background: #fef2f2; }
.empty { text-align: center; color: #9ca3af; padding: 24px; }

.tag { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.tag.entree { background: #dcfce7; color: #166534; }
.tag.sortie { background: #fee2e2; color: #991b1b; }

.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input { flex: 1; min-width: 220px; }

input, select { width: 100%; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; margin-top: 4px; }
label { display: block; font-size: 13px; color: #4b5563; margin-bottom: 10px; }
button, .btn { padding: 9px 16px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; cursor: pointer; font-size: 14px; text-decoration: none; color: inherit; }
button.primary { background: #4f46e5; color: #fff; border-color: #4f46e5; }
button.primary:hover { background: #4338ca; }
button.small { padding: 4px 10px; font-size: 13px; }
button.danger { color: #dc2626; }

.box { background: #fff; padding: 16px 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.box h2 { margin-top: 0; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.row label { flex: 1; min-width: 140px; }
.row .grow { flex: 2; }
.row > button { margin-bottom: 10px; }

dialog { border: none; border-radius: 14px; padding: 24px; width: min(520px, 95vw); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog h2 { margin-top: 0; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

#toast { position: fixed; bottom: 20px; right: 20px; padding: 12px 18px; border-radius: 10px; color: #fff; background: #16a34a; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.show { opacity: 1; }
#toast.error { background: #dc2626; }

/* Barre utilisateur */
.user-bar { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #c7d2fe; font-size: 14px; }
.user-bar button { background: #312e81; color: #fff; border-color: #4338ca; }
body:not(.is-admin) .admin-only { display: none !important; }

/* Page de connexion */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #1e1b4b; padding: 16px; }
.login-box { background: #fff; padding: 32px; border-radius: 16px; width: min(380px, 100%); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.login-box h1 { margin: 0 0 6px; font-size: 24px; }
.login-box p { color: #6b7280; margin: 0 0 18px; font-size: 14px; }
.login-box button { width: 100%; padding: 12px; font-size: 16px; }
.erreur { color: #dc2626 !important; min-height: 18px; }

/* Fenêtre de confirmation */
#dlg-confirm { width: min(460px, 95vw); }
.recap { box-shadow: none; border: 1px solid #e5e7eb; margin-bottom: 8px; }
.recap th { width: 42%; background: #f9fafb; }
.recap td { font-weight: 600; }
.conf-info { font-size: 14px; color: #4b5563; margin: 8px 0; }
.conf-info.warn { color: #b45309; }
#dlg-confirm.danger #conf-oui { background: #dc2626; border-color: #dc2626; }

/* Basculer de compte */
.switch { display: flex; align-items: center; gap: 6px; margin: 0; color: #c7d2fe; font-size: 13px; }
.switch select { width: auto; margin: 0; padding: 5px 8px; background: #312e81; color: #fff; border-color: #4338ca; }
.bandeau { background: #fef3c7; color: #92400e; padding: 10px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; border-bottom: 1px solid #fcd34d; }
.bandeau button { background: #92400e; color: #fff; border-color: #92400e; }

/* Factures */
dialog.large { width: min(1000px, 96vw); }
textarea { width: 100%; padding: 9px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; margin-top: 4px; font-family: inherit; resize: vertical; }
h3 { font-size: 15px; margin: 14px 0 8px; }
.lignes { box-shadow: none; border: 1px solid #e5e7eb; margin-bottom: 8px; }
.lignes td { padding: 4px; }
.lignes input { margin: 0; padding: 6px 8px; }
.lignes td.num, .lignes th.num { text-align: right; white-space: nowrap; }
.lignes tfoot th { background: #f3f4f6; color: #111827; }
.lettres { font-style: italic; color: #374151; font-size: 14px; }
.hint { font-size: 13px; color: #6b7280; margin: 4px 0 8px; }
.non-autorise { display: none !important; }
button.pdf { background: #dc2626; color: #fff; border-color: #dc2626; }
button.pdf:hover { background: #b91c1c; }

/* Journal */
label.inline { display: flex; align-items: center; gap: 8px; margin: 0; }
label.inline select { width: auto; margin: 0; }
.act { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #e0e7ff; color: #3730a3; }
.act.Création { background: #dcfce7; color: #166534; }
.act.Modification { background: #fef3c7; color: #92400e; }
.act.Suppression { background: #fee2e2; color: #991b1b; }
.diff { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.diff li { margin: 2px 0; }
.diff .k { color: #6b7280; }
.diff .av { color: #b91c1c; text-decoration: line-through; }
.diff .ap { color: #166534; font-weight: 600; }
td.quoi small { color: #6b7280; display: block; }

/* Clients dans la facture */
.client-box { flex: 1; min-width: 260px; margin-bottom: 10px; }
.client-box .lbl { display: block; font-size: 13px; color: #4b5563; }
.sel-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.sel-row select { margin: 0; flex: 1; }
.sel-row button { white-space: nowrap; }
textarea[readonly] { background: #f9fafb; color: #374151; }
textarea.bloque { background: #f3f4f6; color: #6b7280; cursor: not-allowed; }
td.adr { white-space: pre-line; font-size: 13px; color: #4b5563; }
.lignes select { margin: 0; padding: 6px 8px; min-width: 170px; }
.lignes .sel-row { margin: 0; gap: 4px; }
.lignes .sel-row button { padding: 5px 8px; }

/* Dossier de documents */
.depot { border: 2px dashed #c7d2fe; border-radius: 12px; padding: 16px; text-align: center; margin-bottom: 14px; background: #f8fafc; }
.depot.survol { background: #eef2ff; border-color: #4f46e5; }
.depot p { margin: 4px 0; }
.primary-btn { display: inline-block; background: #4f46e5; color: #fff; border-color: #4f46e5; margin: 6px 0; cursor: pointer; }
.nb-docs { background: #e0e7ff; color: #3730a3; border-radius: 10px; padding: 0 7px; font-size: 12px; margin-left: 3px; }
td.doc-nom a { color: #1d4ed8; font-weight: 600; text-decoration: none; word-break: break-all; }

/* Lien Internet (admin) */
.lien-bar { background: #ecfdf5; color: #065f46; padding: 8px 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; border-bottom: 1px solid #a7f3d0; }
.lien-bar a { color: #047857; font-weight: 700; word-break: break-all; }

/* Rapatriement : orange = dans une lettre, bleu = validé */
tr.rap-encours td { background: #ffedd5; }
tr.rap-valide td { background: #dbeafe; }
.rap-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
tr.rap-encours .rap-tag { background: #f97316; color: #fff; }
tr.rap-valide .rap-tag { background: #2563eb; color: #fff; }
button.valider { background: #2563eb; color: #fff; border-color: #2563eb; }
.legende { font-size: 13px; color: #4b5563; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pastille { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-left: 10px; }
.pastille.encours { background: #fdba74; } .pastille.valide { background: #93c5fd; }
.act.Validation { background: #dbeafe; color: #1e40af; }
button.dispatch { background: #0d9488; color: #fff; border-color: #0d9488; }
.disp-fait { display: block; color: #0f766e; font-size: 11px; margin-top: 2px; }
.act.Dispatch { background: #ccfbf1; color: #115e59; }
.roles-choix { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.roles-choix input, .roles-liste input { width: auto; margin: 0; }
.roles-liste { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.role-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: #e5e7eb; }
.role-tag.admin { background: #1e1b4b; color: #fff; } .role-tag.vendeur { background: #dcfce7; color: #166534; } .role-tag.facturation { background: #dbeafe; color: #1e40af; }
.role-tag.rapatriement { background: #ffedd5; color: #9a3412; }