/* ===========================
   Keolis Maritime — UI (responsive, glass, print)
   =========================== */

/* Brand & theme tokens */
:root{
  --brand-1: #6c63ff;   /* indigo */
  --brand-2: #7dd3fc;   /* azure */
  --accent:  #40df9f;   /* green accent */

  --bg: #0f1224;
  --surface: rgba(20, 26, 47, 0.85);
  --surface-2: rgba(23, 30, 57, 0.55);
  --text: #eaf0ff;
  --muted: #9aa5c1;
  --border: rgba(255,255,255,.10);
  --shadow: 0 20px 50px rgba(0,0,0,.35);
  --radius: 18px;
  --radius-sm: 12px;
  --focus: 0 0 0 3px rgba(108, 99, 255, .35);
  --maxw: 1200px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f7fb;
    --surface: rgba(255,255,255,0.9);
    --surface-2: rgba(255,255,255,0.6);
    --text: #111827;
    --muted: #56627a;
    --border: rgba(17,24,39,.12);
    --shadow: 0 20px 50px rgba(17,24,39,.10);
  }
}

/* Base */
*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);

  /* gradient + halos façon app mobile */
  background:
    radial-gradient(700px 420px at 15% 0%, color-mix(in oklab, var(--brand-1) 35%, transparent), transparent) no-repeat,
    radial-gradient(650px 420px at 90% 20%, color-mix(in oklab, var(--brand-2) 40%, transparent), transparent) no-repeat,
    linear-gradient(160deg, #0a0f22, #0f1224 40%, #121838);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header (commun pages internes) */
.header{
  position: sticky; top:0; z-index: 30;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 18px;
  backdrop-filter: saturate(140%) blur(10px);
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border-bottom: 1px solid var(--border);
}
.header h1{ margin:0; font-size: 20px; font-weight: 700; letter-spacing:.2px; }
.header .brand{ height:28px; display:block; }
.header .btn{ margin-left:8px; }

/* Layout */
.container{ max-width: var(--maxw); margin: 28px auto; padding: 0 16px; }
.grid{ display:grid; gap:16px; }
.cols-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns: repeat(4,minmax(0,1fr)); }
@media (max-width: 980px){ .cols-4{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 860px){ .cols-3{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){ .cols-2,.cols-3,.cols-4{ grid-template-columns: 1fr; } }

/* Cards (glass) */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card h3{ margin: 2px 0 12px; font-size: 18px; }
.card + .card{ margin-top:10px; }

/* Buttons */
.btn{
  --btn-bg: linear-gradient(180deg, color-mix(in oklab, #fff 6%, var(--surface)), var(--surface));
  --btn-color: var(--text);
  --btn-border: var(--border);

  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-color);
  text-decoration:none;
  transition: transform .06s ease, box-shadow .15s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.20); }
.btn:active{ transform: translateY(0);  box-shadow: 0 6px 16px rgba(0,0,0,.16); }
.btn.primary{
  --btn-bg: linear-gradient(180deg, color-mix(in oklab, var(--brand-1) 92%, white 8%), var(--brand-1));
  --btn-border: transparent; --btn-color: #fff;
}
.btn.ghost{ --btn-bg: transparent; }
.btn.danger{ --btn-bg: #ef476f; --btn-color:#fff; --btn-border: transparent; }

/* Inputs */
.input, select, textarea{
  width:100%; padding: 12px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--text); outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background .2s ease;
}
.input:focus, select:focus, textarea:focus{ box-shadow: var(--focus); border-color: color-mix(in oklab, var(--brand-1) 55%, white 45%); }
label{ display:grid; gap:8px; font-weight:600; color:var(--muted); margin-bottom: 12px; }

/* Badges & alerts */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px;
  font-size:12px; font-weight:700; background: color-mix(in oklab, var(--brand-1) 18%, var(--surface) 82%); border:1px solid var(--border);
}
.alert{ padding:10px 12px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklab, #ff6584 30%, var(--border) 70%);
  background: color-mix(in oklab, #ff6584 10%, var(--surface) 90%);
}

/* Tables */
.table{ width:100%; border-collapse: collapse; background:var(--surface); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; }
.table thead th{
  text-align:left; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  background: color-mix(in oklab, var(--surface-2) 80%, var(--surface) 20%); border-bottom:1px solid var(--border); padding:10px 12px;
}
.table tbody td{ padding:12px; border-bottom:1px dashed var(--border); }
.table tbody tr:hover{ background: color-mix(in oklab, var(--surface-2) 60%, transparent); }
@media (max-width: 760px){ .table{ display:block; overflow-x:auto; white-space:nowrap; } }

/* Auth (login centré) */
.auth{
  min-height: 100svh; display: grid; place-items: center; padding: 24px;
}
.auth-card{
  width: 100%; max-width: 420px;
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--brand-1) 14%, transparent), transparent) no-repeat,
              radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--brand-2) 12%, transparent), transparent) no-repeat,
              var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 26px 22px;
}
.brand-logo{ display:block; margin: 8px auto 16px; width: 220px; height:auto; filter: drop-shadow(0 4px 20px rgba(108,99,255,.25)); }
.auth h1{ margin: 4px 0 18px; font-size: 18px; text-align:center; color: var(--muted); }
.auth .actions{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top: 10px; }

/* Utilities */
.text-muted{ color: var(--muted); }
.no-print{}

/* Print (manifeste) */
@media print{
  :root{ --bg:#fff; --surface:#fff; --text:#000; --border:#ddd; }
  body{ background:#fff; }
  .header, .no-print, .btn{ display: none !important; }
  .container{ max-width: 100%; padding:0; margin:0; }
  .card{ box-shadow:none; border:1px solid #ddd; border-radius:8px; padding:12px; margin-bottom:10px; }
  .table{ border:1px solid #ddd; }
  .table thead th{ background:#f2f4f8; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}