/* ═══════════════════════════════════════════════════════════════════════════
   THEME 1BIT — Monochrome pixel-art / dithering
   Noir · blanc · niveaux de gris simulés par trames CSS uniquement
   Aucune couleur. Aucun border-radius. Aucun japonais.
   version: 1.0.0
   Activé via : html[data-theme="1bit"]
═══════════════════════════════════════════════════════════════════════════ */

/* ── Font ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ── Variables ────────────────────────────────────────────────────────────── */
html[data-theme="1bit"] {
  --bg:       #f2f2f2;
  --bg2:      #f2f2f2;
  --bg3:      #e0e0e0;
  --surface:  #f2f2f2;
  --text:     #111111;
  --muted:    #555555;
  --border:   #111111;
  --accent:   #111111;
  --accent-bg:#f2f2f2;

  --card-base:   #f2f2f2;
  --shadow-hard: 5px 5px 0 #111111;
  --shadow-sm:   3px 3px 0 #111111;
  --shadow-xs:   2px 2px 0 #111111;

  --mono: 'Press Start 2P', monospace;
  --font-display: 'Press Start 2P', monospace;

  /* Trames — réutilisables via background-image */
  --d25-img:
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%),
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%);
  --d25-size: 4px 4px;
  --d25-pos:  0 0, 2px 2px;

  --d50-img:
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%),
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%);
  --d50-size: 2px 2px;
  --d50-pos:  0 0, 1px 1px;
}

/* ── Reset global dans ce thème ──────────────────────────────────────────── */
html[data-theme="1bit"] *,
html[data-theme="1bit"] *::before,
html[data-theme="1bit"] *::after {
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  line-height: 1.9 !important;
}

/* ── Page ────────────────────────────────────────────────────────────────── */
html[data-theme="1bit"] body {
  background-color: #f2f2f2;
  background-image: radial-gradient(circle, #cccccc 1px, transparent 1px);
  background-size: 8px 8px;
  background-attachment: fixed;
  color: #111111;
}

/* ── Barre de navigation ──────────────────────────────────────────────────── */
html[data-theme="1bit"] #mln-navbar {
  background: #f2f2f2 !important;
  border-bottom: 3px solid #111111 !important;
  box-shadow: 0 3px 0 #111111 !important;
}
html[data-theme="1bit"] #mln-navbar .mln-brand,
html[data-theme="1bit"] #mln-navbar .mln-title {
  color: #111111 !important;
}
html[data-theme="1bit"] #mln-navbar .mln-link {
  color: #555555 !important;
  background: transparent !important;
}
html[data-theme="1bit"] #mln-navbar .mln-link span {
  color: #555555 !important;
}
html[data-theme="1bit"] #mln-navbar .mln-link.mln-active,
html[data-theme="1bit"] #mln-navbar .mln-link:hover {
  background: #111111 !important;
  color: #f2f2f2 !important;
}
html[data-theme="1bit"] #mln-navbar .mln-link.mln-active span,
html[data-theme="1bit"] #mln-navbar .mln-link:hover span {
  color: #f2f2f2 !important;
}
html[data-theme="1bit"] #mln-navbar .mln-link .mln-icon {
  filter: brightness(0) !important;
}
html[data-theme="1bit"] #mln-navbar .mln-link.mln-active .mln-icon,
html[data-theme="1bit"] #mln-navbar .mln-link:hover .mln-icon {
  filter: brightness(0) invert(1) !important;
}
html[data-theme="1bit"] #mln-navbar .mln-sep {
  background: #111111 !important;
}
html[data-theme="1bit"] #mln-navbar .mln-nav-divider {
  background: #111111 !important;
}
html[data-theme="1bit"] #mln-navbar .mln-nav-logout {
  color: #555555 !important;
  border-color: #111111 !important;
}

/* ── Titre de page ───────────────────────────────────────────────────────── */
html[data-theme="1bit"] .mln-page-header {
  background: #e0e0e0 !important;
  border-bottom: 3px solid #111111 !important;
}
html[data-theme="1bit"] .mln-page-title {
  color: #111111 !important;
  font-size: 3.2rem !important;
  letter-spacing: 0.08em !important;
  text-shadow: 4px 4px 0 #cccccc !important;
  font-style: normal !important;
}
html[data-theme="1bit"] .mln-page-sub {
  color: #555555 !important;
  font-size: 0.5rem !important;
}

/* Masquer le titre japonais */
html[data-theme="1bit"] .mln-page-title-ja {
  display: none !important;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
html[data-theme="1bit"] .card,
html[data-theme="1bit"] .mln-card,
html[data-theme="1bit"] [class*="-card"] {
  background: #ffffff !important;
  border: 3px solid #111111 !important;
  box-shadow: var(--shadow-hard) !important;
  color: #111111 !important;
}

/* Card header / title */
html[data-theme="1bit"] .card h2,
html[data-theme="1bit"] .card-header,
html[data-theme="1bit"] [class*="card-title"] {
  color: #111111 !important;
  border-bottom: 2px solid #111111 !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.1em !important;
}

/* ── Sections / blocs ────────────────────────────────────────────────────── */
html[data-theme="1bit"] section,
html[data-theme="1bit"] .section,
html[data-theme="1bit"] .block {
  background: #f2f2f2 !important;
  border-color: #111111 !important;
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
html[data-theme="1bit"] button,
html[data-theme="1bit"] .btn,
html[data-theme="1bit"] [class*="btn"],
html[data-theme="1bit"] input[type="button"],
html[data-theme="1bit"] input[type="submit"] {
  background: #f2f2f2 !important;
  border: 3px solid #111111 !important;
  box-shadow: var(--shadow-sm) !important;
  color: #111111 !important;
  font-size: 0.48rem !important;
  transition: transform 0.05s, box-shadow 0.05s !important;
}
html[data-theme="1bit"] button:hover,
html[data-theme="1bit"] .btn:hover {
  background: #111111 !important;
  color: #f2f2f2 !important;
}
html[data-theme="1bit"] button:active,
html[data-theme="1bit"] .btn:active {
  transform: translate(3px, 3px) !important;
  box-shadow: none !important;
}

/* Bouton primaire / accent → solide noir */
html[data-theme="1bit"] .btn-primary,
html[data-theme="1bit"] button[class*="primary"],
html[data-theme="1bit"] .s-save-btn {
  background: #111111 !important;
  color: #f2f2f2 !important;
  box-shadow: 4px 4px 0 #555555 !important;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
html[data-theme="1bit"] input[type="text"],
html[data-theme="1bit"] input[type="email"],
html[data-theme="1bit"] input[type="number"],
html[data-theme="1bit"] input[type="search"],
html[data-theme="1bit"] input[type="password"],
html[data-theme="1bit"] textarea,
html[data-theme="1bit"] select {
  background: #ffffff !important;
  border: 3px solid #111111 !important;
  box-shadow: inset 3px 3px 0 #cccccc !important;
  color: #111111 !important;
  font-size: 0.5rem !important;
}
html[data-theme="1bit"] input:focus,
html[data-theme="1bit"] textarea:focus,
html[data-theme="1bit"] select:focus {
  outline: none !important;
  box-shadow: inset 3px 3px 0 #cccccc, 0 0 0 2px #555555 !important;
}

/* ── Badges de statut ────────────────────────────────────────────────────── */
html[data-theme="1bit"] [class*="badge"],
html[data-theme="1bit"] [class*="status"],
html[data-theme="1bit"] [class*="tag"] {
  border: 2px solid #111111 !important;
  box-shadow: var(--shadow-xs) !important;
  color: #111111 !important;
  font-size: 0.38rem !important;
  padding: 0.2rem 0.5rem !important;
}

/* EN RETARD — noir solide */
html[data-theme="1bit"] [class*="s-retard"],
html[data-theme="1bit"] [class*="retard"] {
  background: #111111 !important;
  color: #f2f2f2 !important;
}

/* EN COURS — diagonales */
html[data-theme="1bit"] [class*="s-encours"],
html[data-theme="1bit"] [class*="encours"] {
  background-color: #f2f2f2 !important;
  background-image: repeating-linear-gradient(45deg, #111 0, #111 1px, transparent 1px, transparent 4px) !important;
}

/* EXPÉDIÉ — lignes horizontales */
html[data-theme="1bit"] [class*="s-expedie"],
html[data-theme="1bit"] [class*="expedie"] {
  background-color: #f2f2f2 !important;
  background-image: repeating-linear-gradient(0deg, #111 0, #111 1px, transparent 1px, transparent 4px) !important;
}

/* EN TRANSIT — hachures croisées */
html[data-theme="1bit"] [class*="s-transit"],
html[data-theme="1bit"] [class*="transit"] {
  background-color: #f2f2f2 !important;
  background-image:
    repeating-linear-gradient(0deg,  #111 0, #111 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(90deg, #111 0, #111 1px, transparent 1px, transparent 5px) !important;
}

/* DÉDOUANÉ — diagonales inverses */
html[data-theme="1bit"] [class*="s-dedouane"],
html[data-theme="1bit"] [class*="dedouane"] {
  background-color: #f2f2f2 !important;
  background-image: repeating-linear-gradient(-45deg, #111 0, #111 1px, transparent 1px, transparent 4px) !important;
}

/* LIVRÉ — damier 25% */
html[data-theme="1bit"] [class*="s-livre"],
html[data-theme="1bit"] [class*="livre"] {
  background-color: #f2f2f2 !important;
  background-image:
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%),
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%) !important;
  background-size: 4px 4px !important;
  background-position: 0 0, 2px 2px !important;
}

/* ── Liens de tracking / pills ───────────────────────────────────────────── */
html[data-theme="1bit"] .pkg-track,
html[data-theme="1bit"] a[class*="track"] {
  background: #111111 !important;
  color: #f2f2f2 !important;
  border: 2px solid #111111 !important;
  box-shadow: var(--shadow-xs) !important;
  text-decoration: none !important;
}
html[data-theme="1bit"] .pkg-track:hover {
  background: #f2f2f2 !important;
  color: #111111 !important;
}

/* Bouton supprimer / archiver */
html[data-theme="1bit"] .pkg-del {
  color: #111111 !important;
  opacity: 0.3 !important;
}
html[data-theme="1bit"] .pkg-del:hover {
  opacity: 1 !important;
  background: #111111 !important;
  color: #f2f2f2 !important;
}

/* ── Séparateurs / dividers ──────────────────────────────────────────────── */
html[data-theme="1bit"] hr,
html[data-theme="1bit"] .divider {
  border: none !important;
  border-top: 2px solid #111111 !important;
  margin: 1rem 0 !important;
}

/* ── Tableaux ────────────────────────────────────────────────────────────── */
html[data-theme="1bit"] table { border-collapse: collapse !important; }
html[data-theme="1bit"] th, html[data-theme="1bit"] td {
  border: 2px solid #111111 !important;
  padding: 0.4rem 0.6rem !important;
}
html[data-theme="1bit"] th {
  background: #111111 !important;
  color: #f2f2f2 !important;
}
html[data-theme="1bit"] tr:nth-child(even) td {
  background-color: #f2f2f2 !important;
  background-image:
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%),
    linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%) !important;
  background-size: 4px 4px !important;
  background-position: 0 0, 2px 2px !important;
}

/* ── Progress bars ───────────────────────────────────────────────────────── */
html[data-theme="1bit"] progress,
html[data-theme="1bit"] [class*="progress"],
html[data-theme="1bit"] [class*="bar"] {
  background: #f2f2f2 !important;
  border: 2px solid #111111 !important;
  box-shadow: var(--shadow-xs) !important;
}
html[data-theme="1bit"] [class*="progress-fill"],
html[data-theme="1bit"] [class*="bar-fill"] {
  background: #111111 !important;
}

/* ── Modals / overlays ───────────────────────────────────────────────────── */
html[data-theme="1bit"] [class*="modal"],
html[data-theme="1bit"] [class*="dialog"],
html[data-theme="1bit"] [class*="popup"] {
  background: #f2f2f2 !important;
  border: 4px solid #111111 !important;
  box-shadow: 8px 8px 0 #111111 !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
html[data-theme="1bit"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-theme="1bit"] ::-webkit-scrollbar-track {
  background-color: #f2f2f2;
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%),
    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  border: 2px solid #111111;
}
html[data-theme="1bit"] ::-webkit-scrollbar-thumb {
  background: #111111;
  border: 2px solid #111111;
}

/* ── Maps Leaflet ────────────────────────────────────────────────────────── */
html[data-theme="1bit"] #m-map,
html[data-theme="1bit"] #portal-map,
html[data-theme="1bit"] [id*="map"] {
  background: #e0e0e0 !important;
}
html[data-theme="1bit"] .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.5) brightness(1.3) !important;
}

/* ── Login / Welcome page ────────────────────────────────────────────────── */
html[data-theme="1bit"] #mln-welcome {
  background: #f2f2f2 !important;
}
html[data-theme="1bit"] .mln-title {
  color: #111111 !important;
  font-size: 2.4rem !important;
  text-shadow: 4px 4px 0 #cccccc !important;
  font-style: normal !important;
}
html[data-theme="1bit"] .mln-title .last {
  color: #111111 !important;
}
html[data-theme="1bit"] .mln-title-ja {
  display: none !important;
}
html[data-theme="1bit"] .mln-tagline {
  color: #555555 !important;
}
html[data-theme="1bit"] .mln-divider {
  background: #111111 !important;
}
html[data-theme="1bit"] .mln-btn-primary {
  background: #111111 !important;
  color: #f2f2f2 !important;
  border: 3px solid #111111 !important;
  box-shadow: 4px 4px 0 #555555 !important;
}
html[data-theme="1bit"] .mln-btn-primary:hover {
  background: #333333 !important;
}
html[data-theme="1bit"] .mln-btn-secondary {
  background: #f2f2f2 !important;
  color: #111111 !important;
  border: 3px solid #111111 !important;
  box-shadow: 4px 4px 0 #555555 !important;
}
html[data-theme="1bit"] .mln-btn-secondary:hover {
  background: #e0e0e0 !important;
}
html[data-theme="1bit"] .mln-footer {
  color: #999999 !important;
}
html[data-theme="1bit"] .mln-auth-card {
  background: #ffffff !important;
  border: 3px solid #111111 !important;
  box-shadow: 6px 6px 0 #111111 !important;
}
html[data-theme="1bit"] .mln-auth-title {
  color: #111111 !important;
}
html[data-theme="1bit"] .mln-auth-sub {
  color: #555555 !important;
}

/* ── Navbar brand 1bit ───────────────────────────────────────────────────── */
html[data-theme="1bit"] #mln-navbar .mln-title {
  font-style: normal !important;
  color: #444444 !important;
}
html[data-theme="1bit"] #mln-navbar .mln-title-last {
  font-style: italic !important;
}
html[data-theme="1bit"] #mln-navbar .mln-logo {
  filter: grayscale(1) contrast(0.8) !important;
}

/* ── Selection ───────────────────────────────────────────────────────────── */
html[data-theme="1bit"] ::selection {
  background: #111111;
  color: #f2f2f2;
}

/* ── Settings — pills thème ──────────────────────────────────────────────── */
html[data-theme="1bit"] .s-theme-pill {
  background: #f2f2f2 !important;
  border: 2px solid #111111 !important;
  box-shadow: var(--shadow-xs) !important;
  color: #111111 !important;
}
html[data-theme="1bit"] .s-theme-pill.active {
  background: #111111 !important;
  color: #f2f2f2 !important;
  box-shadow: none !important;
  transform: translate(2px, 2px) !important;
}

/* ── Masquer les éléments non-pertinents en 1bit ─────────────────────────── */
/* Titre japonais */
html[data-theme="1bit"] .mln-page-title-ja { display: none !important; }
/* Animations / transitions globales supprimées pour le look statique */
html[data-theme="1bit"] * { transition-duration: 0s !important; animation-duration: 0s !important; }
/* Ombres colorées / glow → supprimées */
html[data-theme="1bit"] [style*="text-shadow"] { text-shadow: 2px 2px 0 #aaaaaa !important; }

/* ── Fix : cartes sur fond blanc tramé (dithered) ────────────────────────── */
html[data-theme="1bit"] .card,
html[data-theme="1bit"] .mln-card,
html[data-theme="1bit"] [class*="-card"] {
  background-color: #ffffff !important;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),
    linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%) !important;
  background-size: 4px 4px !important;
  background-position: 0 0, 2px 2px !important;
}

/* ── Fix : lune et soleil en format 1bit ─────────────────────────────────── */
/* Masquer les emojis couleur et afficher des formes géométriques monochromes */
html[data-theme="1bit"] .weather-icon--moon {
  font-size: 0 !important;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #111111;
  -webkit-mask: radial-gradient(circle at 8px 8px, transparent 8px, #000 8px) !important;
  mask: radial-gradient(circle at 8px 8px, transparent 8px, #000 8px) !important;
  border-radius: 0 !important;
  vertical-align: middle;
}
html[data-theme="1bit"] .weather-icon--sun {
  font-size: 0 !important;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #111111;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  ) !important;
  vertical-align: middle;
}