/* app.css — feuille de styles du panneau ops.
   Servie en statique depuis /assets (CSP : style-src 'self'). */

:root {
  --bg:#0f172a; --card:#1e293b; --line:#334155; --txt:#e2e8f0; --muted:#94a3b8;
  --green:#4ade80; --red:#f87171; --accent:#38bdf8;
}
* { box-sizing:border-box; }
body { font-family:system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--txt);
       margin:0; min-height:100vh; }
a { color:var(--accent); }

.wrap { max-width:860px; margin:0 auto; padding:2rem 1.25rem; }

/* Cartes */
.card { background:var(--card); border:1px solid var(--line); border-radius:16px;
        padding:1.75rem; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.login-card { max-width:380px; margin:8vh auto 0; }

h1 { font-size:1.25rem; margin:0 0 1rem; }
h2 { font-size:1rem; color:var(--muted); margin:2rem 0 .75rem; font-weight:600; }

/* Formulaires */
label { display:block; font-size:.85rem; color:var(--muted); margin:.75rem 0 .25rem; }
input[type=text], input[type=password] { width:100%; padding:.7rem .8rem; border-radius:10px;
        border:1px solid var(--line); background:#0f172a; color:var(--txt); font-size:1rem; }
button { cursor:pointer; border:none; border-radius:10px; font-size:1rem; font-weight:600; padding:.8rem 1.2rem; }
.btn-primary { background:var(--accent); color:#06283d; width:100%; margin-top:1.2rem; }
.btn-success { background:var(--green); color:#053321; }
/* Variante largeur automatique (boutons d'action dans une barre, modale) */
.auto { width:auto; margin-top:0; }
.btn-danger  { background:var(--red); color:#3b0a0a; }
.btn-cancel  { background:transparent; color:var(--txt); border:1px solid var(--line); }

/* "Déconnexion" : un bouton stylé comme un lien (form POST + CSRF) */
.inline-form { display:inline; }
.linklike { background:none; border:none; color:var(--accent); cursor:pointer; font-size:inherit;
            padding:0; font-weight:400; text-decoration:underline; }

/* Messages flash */
.flash { padding:.7rem 1rem; border-radius:10px; margin-bottom:1rem; font-size:.9rem; }
.flash.error   { background:#3f1d1d; color:#fecaca; border:1px solid #7f1d1d; }
.flash.success { background:#0f2e1d; color:#bbf7d0; border:1px solid #166534; }

/* En-tête du dashboard */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.topbar h1 { margin:0; }
.muted { color:var(--muted); font-size:.85rem; }
.small { font-size:.78rem; }
.footer { text-align:center; margin-top:1.5rem; }

/* Tableau d'historique */
table { width:100%; border-collapse:collapse; font-size:.85rem; }
th, td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:600; }
.ok { color:var(--green); } .ko { color:var(--red); }

.restart-box { display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
               background:#0f172a; border:1px solid var(--line); border-radius:12px; padding:1.1rem; }
code { background:#0f172a; border:1px solid var(--line); padding:1px 6px; border-radius:6px; }

/* Modale de confirmation */
.modal-overlay { position:fixed; inset:0; background:rgba(2,6,23,.7); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:1rem; }
.modal-overlay.show { display:flex; animation:fade .15s ease; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.modal { background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:1.6rem 1.75rem; max-width:440px; width:100%; box-shadow:0 25px 70px rgba(0,0,0,.55); }
.modal h3 { margin:0 0 .6rem; font-size:1.15rem; }
.modal p { color:var(--muted); font-size:.9rem; line-height:1.5; margin:0 0 1.5rem; }
.modal-actions { display:flex; gap:.75rem; justify-content:flex-end; flex-wrap:wrap; }
.modal-actions button { padding:.65rem 1.3rem; }

/* Overlay de chargement */
.loading-overlay { position:fixed; inset:0; background:rgba(2,6,23,.82); backdrop-filter:blur(4px);
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:1.3rem; z-index:200; }
.loading-overlay.show { display:flex; }
.spinner { width:56px; height:56px; border:5px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-overlay p { color:var(--txt); font-size:1.05rem; margin:0; font-weight:600; }