/* Axper Europe — css/theme.css
   Couleurs (thèmes clair et sombre), typographie, boutons, champs, pastilles.
   Charte « Floating » (îlots doux, grands rayons) aux couleurs d'Axper : bleu nuit et vert menthe. */

/* ============ Thème clair ============ */
:root {
  --font: "Instrument Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: var(--font);
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --hue: 268;   /* teinte du bleu nuit Axper (fonds, textes, ombres) */
  --mint: 165;  /* teinte du vert menthe Axper (accent) */
  --radius: 20px;
  --radius-lg: 22px;
  --gap: 14px;
  --side-w: 256px;

  --bg: oklch(0.967 0.006 var(--hue));
  --surface: #ffffff;
  --surface-2: oklch(0.962 0.008 var(--hue));
  --surface-3: oklch(0.915 0.012 var(--hue));
  --surface-hover: oklch(0.975 0.006 var(--hue));
  --line: oklch(0.28 0.035 var(--hue) / .1);
  --line-soft: oklch(0.28 0.035 var(--hue) / .06);
  --text: oklch(0.27 0.035 var(--hue));
  --muted: oklch(0.5 0.025 var(--hue));
  --faint: oklch(0.58 0.02 var(--hue));
  --input: #ffffff;

  /* Menu latéral : un îlot aux couleurs de la page */
  --side: #ffffff;
  --side-glow: oklch(0.85 0.13 var(--mint) / .22); /* lueur menthe qui monte du bas du menu */
  --side-2: oklch(0.8 0.16 var(--mint) / .16);
  --side-text: var(--text);

  /* Menthe : en fond (boutons, pastilles) avec un texte bleu nuit, comme le bouton « Contact » du site ;
     en texte, une version plus foncée (--accent-ink) pour rester lisible sur blanc. */
  --accent: oklch(0.84 0.16 var(--mint));
  --accent-soft: oklch(0.8 0.16 var(--mint) / .2);
  --accent-ink: oklch(0.5 0.11 var(--mint));
  --on-accent: oklch(0.27 0.035 var(--hue));
  --on-tone: #ffffff; /* texte posé sur une couleur d'état pleine */

  --ok: oklch(0.53 0.15 140);    --ok-bg: oklch(0.6 0.16 140 / .12); /* vert franc, distinct du menthe */
  --low: oklch(0.7 0.15 75);     --low-bg: oklch(0.75 0.14 80 / .18);  --low-ink: oklch(0.52 0.12 65);
  --empty: oklch(0.56 0.19 22);  --empty-bg: oklch(0.56 0.19 22 / .1); --empty-ink: oklch(0.52 0.19 22);
  --info: oklch(0.52 0.13 240);  --info-bg: oklch(0.52 0.13 240 / .1); --info-ink: oklch(0.48 0.13 240);
  --neutral-bg: oklch(0.3 0.03 var(--hue) / .06); --neutral-ink: oklch(0.45 0.02 var(--hue));
  --sav: oklch(0.55 0.18 305);   --sav-bg: oklch(0.55 0.18 305 / .1); --sav-ink: oklch(0.48 0.18 305);

  --primary: var(--accent); --primary-ink: var(--on-accent); --primary-hover: oklch(0.88 0.15 var(--mint));
  --shadow-sm: 0 1px 2px oklch(0.3 0.05 var(--hue) / .06), 0 6px 18px -10px oklch(0.3 0.05 var(--hue) / .12);
  --shadow-md: 0 1px 2px oklch(0.3 0.05 var(--hue) / .06), 0 10px 28px -10px oklch(0.3 0.05 var(--hue) / .16);
  --shadow-lg: 0 30px 80px -20px oklch(0.25 0.05 var(--hue) / .35);
  --scrim: oklch(0.2 0.03 var(--hue) / .45);
  color-scheme: light;
}

/* ============ Thème sombre ============ */
:root[data-theme="dark"] {
  /* Bleu nuit du site Axper (#262b3d) */
  --bg: oklch(0.2 0.028 var(--hue));
  --surface: oklch(0.255 0.032 var(--hue));
  --surface-2: oklch(0.3 0.034 var(--hue));
  --surface-3: oklch(0.35 0.036 var(--hue));
  --surface-hover: oklch(0.28 0.033 var(--hue));
  --line: oklch(1 0 0 / .075);
  --line-soft: oklch(1 0 0 / .05);
  --text: oklch(0.96 0.01 var(--hue));
  --muted: oklch(0.74 0.02 var(--hue));
  --faint: oklch(0.64 0.02 var(--hue));
  --input: oklch(0.22 0.03 var(--hue));

  --side: oklch(0.255 0.032 var(--hue));
  --side-glow: oklch(0.8 0.15 var(--mint) / .13);
  --side-2: oklch(0.86 0.17 var(--mint) / .13);
  --side-text: var(--text);

  --accent: oklch(0.86 0.17 var(--mint));
  --accent-soft: oklch(0.86 0.17 var(--mint) / .13);
  --accent-ink: oklch(0.88 0.15 var(--mint));
  --on-accent: oklch(0.22 0.03 var(--hue));
  --on-tone: oklch(0.2 0.02 var(--hue));

  --ok: oklch(0.8 0.17 138);     --ok-bg: oklch(0.8 0.17 138 / .14); /* vert franc, distinct du menthe */
  --low: oklch(0.84 0.13 80);    --low-bg: oklch(0.84 0.13 80 / .15);  --low-ink: oklch(0.86 0.12 80);
  --empty: oklch(0.74 0.15 22);  --empty-bg: oklch(0.74 0.15 22 / .15); --empty-ink: oklch(0.78 0.14 22);
  --info: oklch(0.78 0.1 240);   --info-bg: oklch(0.78 0.1 240 / .15); --info-ink: oklch(0.82 0.09 240);
  --neutral-bg: oklch(1 0 0 / .06); --neutral-ink: oklch(0.78 0.02 var(--hue));
  --sav: oklch(0.72 0.16 305);   --sav-bg: oklch(0.72 0.16 305 / .17); --sav-ink: oklch(0.82 0.12 305);

  --primary: var(--accent); --primary-ink: var(--on-accent); --primary-hover: oklch(0.9 0.15 var(--mint));
  --shadow-sm: 0 1px 2px #0005, 0 8px 22px -14px #0009;
  --shadow-md: 0 1px 2px #0005, 0 14px 34px -14px #000a;
  --shadow-lg: 0 30px 90px -20px rgba(0, 0, 0, .75);
  --scrim: oklch(0.1 0.02 var(--hue) / .6);
  color-scheme: dark;
}

/* ============ Base ============ */
* { box-sizing: border-box; }
html { font-family: var(--font); color: var(--text); background: var(--bg); font-size: 16px; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; transition: background-color .35s var(--ease); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
::selection { background: var(--accent); color: var(--on-accent); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; }
[hidden] { display: none !important; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }

.eyebrow { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 4px; }
.muted { color: var(--faint); }
.mono { font-family: var(--mono); font-size: 12.5px; color: var(--muted); letter-spacing: -.2px; }
.strong { font-weight: 700; }
.positive { color: var(--ok); }
.negative { color: var(--empty-ink); }
.warn-text { color: var(--low-ink); }
.small-text { font-size: 13px; }
.right { text-align: right !important; }
.center { text-align: center !important; }

/* ============ Boutons (pilules) ============ */
.primary, .secondary, .danger-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 999px; height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease), background-color .25s, filter .2s, color .25s;
}
.primary { position: relative; overflow: hidden; background: var(--primary); color: var(--primary-ink); border: 0; box-shadow: 0 8px 20px -8px var(--accent); padding-left: 14px; }
.primary:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-2px); }
.primary .ico { width: 19px; height: 19px; transition: transform .4s var(--spring); }
.primary:hover .ico { transform: rotate(-8deg) scale(1.1); }
.secondary { background: var(--surface); border: 0; color: var(--text); box-shadow: var(--shadow-md); padding-left: 16px; }
.secondary .ico { width: 19px; height: 19px; }
.secondary:hover:not(:disabled) { transform: translateY(-1px); color: var(--accent-ink); }
/* Dans une carte ou une fenêtre, le bouton secondaire prend le fond teinté (il ne se confond pas avec la carte) */
:is(.surface, .dash-card, .ship-card, dialog, .auth-card) :is(.secondary, .icon-button) { background: var(--surface-2); box-shadow: none; }
:is(.surface, .dash-card, .ship-card, dialog, .auth-card) :is(.secondary, .icon-button):hover:not(:disabled) { background: var(--surface-3); }
.danger-button { background: var(--empty); color: var(--on-tone); border: 0; box-shadow: 0 8px 20px -8px var(--empty); }
.danger-button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.primary:active, .secondary:active, .danger-button:active { transform: scale(.96); transition-duration: .08s; }
.primary.small, .secondary.small { height: 32px; padding: 0 13px; font-size: 12.5px; }
button:disabled { opacity: .5; cursor: not-allowed; }

.icon-button {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
  border: 0; background: var(--surface); color: var(--muted); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--spring), color .2s, background-color .2s;
}
.icon-button:hover:not(:disabled) { color: var(--text); background: var(--surface-2); transform: translateY(-1px); }
.icon-button:active:not(:disabled) { transform: scale(.9); }
.link-button {
  border: 0; background: none; padding: 4px 2px; color: var(--accent-ink); font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s var(--ease);
}
.link-button:hover { background-size: 100% 1px; }
.danger-link { border: 0; background: none; color: var(--empty-ink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; margin-right: auto; border-radius: 12px; }
.danger-link:hover { background: var(--empty-bg); }

/* ============ Champs ============ */
input, select, textarea { font-size: 14px; color: var(--text); }
select, .field input, .field select {
  border: 1px solid var(--line); border-radius: 12px; background: var(--input); padding: 9px 12px; transition: border-color .25s, box-shadow .25s;
}
select:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* Options des listes : couleurs de la page, même quand la liste est colorée (ex. état d'un colis) */
select option { background-color: var(--surface); color: var(--text); }
select:focus, textarea:focus, dialog input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ============ Pastilles ============ */
.pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; padding: 4px 9px 4px 8px;
  font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--ok-bg); color: var(--ok);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.low { background: var(--low-bg); color: var(--low-ink); }
.pill.empty { background: var(--empty-bg); color: var(--empty-ink); }
.pill.empty::before { animation: pulse 1.8s ease-out infinite; }
.pill.neutral { background: var(--neutral-bg); color: var(--neutral-ink); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--empty) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

/* Types d'intervention */
.type-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; padding: 4px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.type-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); flex-shrink: 0; }
.t-install { --tone: var(--ok); --tone-bg: var(--ok-bg); --tone-ink: var(--ok); }
.t-previsit { --tone: var(--info); --tone-bg: var(--info-bg); --tone-ink: var(--info-ink); }
.t-sav { --tone: var(--sav); --tone-bg: var(--sav-bg); --tone-ink: var(--sav-ink); }
.t-absence { --tone: var(--faint); --tone-bg: var(--neutral-bg); --tone-ink: var(--neutral-ink); }
.type-badge { background: var(--tone-bg); color: var(--tone-ink); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.dot.late { background: var(--empty); box-shadow: 0 0 0 4px var(--empty-bg); animation: pulse 1.8s ease-out infinite; }
.dot.due { background: var(--low); box-shadow: 0 0 0 4px var(--low-bg); }
.dot.planned { background: var(--info); box-shadow: 0 0 0 4px var(--info-bg); }
.dot.missing { background: var(--faint); box-shadow: 0 0 0 4px var(--neutral-bg); }

/* Mouvements réduits : on coupe les animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}