/* ============================================================
   COCKPIT MAINTENANCE — Design System (bento / dark)
   Le gros du style est en Tailwind CDN ; ici les tokens + custom.
   ============================================================ */

:root {
  --marine:      #1F3864;
  --marine-deep: #0f1629;
  --marine-2:    #16223f;
  --accent:      #4F7BFF;
  --success:     #00D4AA;
  --alert:       #FF6B6B;
  --ink:         #e8edf7;
  --ink-soft:    #9fb0cc;
  --card:        #16223f;
  --card-2:      #1b2a4d;
  --line:        rgba(255, 255, 255, 0.08);
  --radius:      16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--marine-deep);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display {
  font-family: "Syne", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* halos décoratifs */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(79, 123, 255, 0.12), transparent 60%),
    radial-gradient(50% 50% at 100% 100%, rgba(0, 212, 170, 0.08), transparent 60%);
  pointer-events: none;
}

/* ----- icônes Lucide ----- */
[data-lucide] { width: 1.25rem; height: 1.25rem; stroke-width: 2; vertical-align: middle; }
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: rgba(79, 123, 255, .14); color: var(--accent);
}
.icon-tile [data-lucide] { width: 1.4rem; height: 1.4rem; }
.nav-item [data-lucide] { color: var(--ink-soft); }
.nav-item.active [data-lucide] { color: var(--accent); }

/* ----- cartes bento ----- */
.bento {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bento:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 123, 255, 0.45);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5);
}

/* ----- badges statut ----- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.badge-up      { background: rgba(0, 212, 170, .15); color: var(--success); }
.badge-down    { background: rgba(255, 107, 107, .15); color: var(--alert); }
.badge-paused  { background: rgba(159, 176, 204, .15); color: var(--ink-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-up { background: var(--success); box-shadow: 0 0 0 4px rgba(0,212,170,.18); }
.dot-down { background: var(--alert); box-shadow: 0 0 0 4px rgba(255,107,107,.18); }

/* ----- sidebar ----- */
#sidebar { background: linear-gradient(180deg, var(--marine) 0%, var(--marine-2) 100%); transition: transform .3s ease; }
.nav-item { transition: all .2s ease; border-left: 3px solid transparent; }
.nav-item:hover { background: rgba(255,255,255,.05); }
.nav-item.active { background: rgba(79,123,255,.18); border-left-color: var(--accent); color: #fff; }

/* ----- boutons ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; border-radius: 12px; padding: .7rem 1.2rem; cursor: pointer; transition: all .2s ease; border: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #6b8fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-success { background: var(--success); color: #04211b; }

/* ----- modale ----- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(8,12,24,.7); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modal-card { background: var(--card-2); border: 1px solid var(--line); border-radius: 20px; max-width: 560px; width: 100%; animation: modalIn .25s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* ----- toast ----- */
#toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--card-2); border: 1px solid var(--line); color: var(--ink); padding: .8rem 1.2rem; border-radius: 12px; z-index: 200; transition: transform .3s ease; max-width: 90vw; }
#toast.show { transform: translateX(-50%) translateY(0); }

/* ----- splash ----- */
#splash { position: fixed; inset: 0; z-index: 9999; background: var(--marine-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; transition: opacity .4s ease, visibility .4s ease; }
#splash.hidden { opacity: 0; visibility: hidden; }
.splash-bar { width: 180px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.splash-bar > i { display: block; height: 100%; width: 0; background: var(--accent); animation: load 1s ease forwards; }
@keyframes load { to { width: 100%; } }

/* ----- utils ----- */
.eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; color: var(--accent); }
.muted { color: var(--ink-soft); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }