/* Thème des pages Missions : repris du viewer « Plan du bâtiment »
   fond bleu nuit, champs fins arrondis, petit carré rouge devant le titre */

:root {
  --bg: #0a1120;
  --surface: #0f1a2e;
  --surface-2: #15223b;
  --field: #0c1527;
  --line: #1e2d47;
  --line-2: #2a3c5c;
  --txt: #e8edf7;
  --mut: #8b99b5;
  --steel: #9db4e0;
  --accent: #4f8cff;
  --red: #f0463c;
  --green: #22c55e;
  --amber: #f59e0b;
  --btn-blue: #1d4ed8;
  --btn-green: #15803d;
  --btn-red: #b91c1c;
  --radius: 12px;
  --font: Inter, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--txt); font-family: var(--font); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; line-height: 1.4; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hidden { display: none !important; }

/* Icônes (SVG en trait) */
.ic { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Barre du haut */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.title { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.title h1 { margin: 0; font-size: 1.1em; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.marker { width: 10px; height: 10px; border-radius: 2px; background: var(--red); flex: none; }
.title .sub { color: var(--mut); font-size: .85em; }
.tools { display: flex; align-items: center; gap: 12px; flex: none; }
.conn { display: flex; align-items: center; gap: 7px; color: var(--mut); font-size: .8em; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #64748b; }
.dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.dot.off { background: var(--red); box-shadow: 0 0 0 3px rgba(240, 70, 60, .22); }
.iconbtn { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
           display: grid; place-items: center; color: var(--steel); box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.iconbtn .ic { width: 20px; height: 20px; }

/* Panneaux et champs */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
         padding: 16px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
.field { display: block; margin-top: 14px; }
.field:first-child { margin-top: 0; }
.field > span { display: block; color: var(--mut); font-size: .82em; margin-bottom: 6px; }
.input { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line-2);
         background: var(--field); color: var(--txt); font: inherit; font-size: 1.1em; }
.input::placeholder { color: #5b6b88; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 140, 255, .2); }
.err { color: #ff8a80; font-weight: 600; margin-top: 10px; min-height: 1.2em; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px;
       padding: 12px 16px; font-weight: 700; background: var(--btn-blue); color: #fff; }
.btn:disabled { opacity: .5; }
.btn.block { width: 100%; }
.btn.big { font-size: 1.1em; padding: 15px 16px; margin-top: 16px; }
.btn.sm { padding: 9px 13px; font-size: .9em; font-weight: 600; }
.btn.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--txt); }
.btn.danger { background: var(--btn-red); }

/* Cartes de mission : la couleur de la tranche à gauche dit où en est la mission */
.mission { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--c);
           border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .3); }
.s-envoyee { --c: var(--amber); --cbg: rgba(245, 158, 11, .15); }
.s-prise { --c: var(--accent); --cbg: rgba(79, 140, 255, .16); }
.s-validee { --c: var(--green); --cbg: rgba(34, 197, 94, .15); }
.s-absent { --c: var(--red); --cbg: rgba(240, 70, 60, .16); }
.s-annulee { --c: #64748b; --cbg: rgba(100, 116, 139, .18); }
.mission.s-validee, .mission.s-annulee { opacity: .6; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px;
        font-weight: 600; font-size: .85em; color: var(--c); background: var(--cbg); }
.mission .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--mut); }

/* États vides et message temporaire */
.empty { text-align: center; color: var(--mut); padding: 44px 12px; }
.empty strong { display: block; color: var(--txt); font-size: 1.15em; margin-bottom: 6px; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--surface-2);
         border: 1px solid var(--line-2); color: var(--txt); padding: 12px 18px; border-radius: 12px; opacity: 0;
         pointer-events: none; transition: opacity .2s; max-width: 90%; text-align: center;
         box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
#toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}