/* ═══════════════════════════════════════════════════════════════════════════
   THEME VINYLE — MyLastNight (Light)
   Inspiré Braun × Hipgnosis : fond chaud, surfaces glass, burnt orange
   version: 2.0.0
   Activé via : html[data-theme="vinyle"]
═══════════════════════════════════════════════════════════════════════════ */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=cabinet-grotesk@500,700,800&display=swap');

/* ── Variables système ─────────────────────────────────────────────────── */
html[data-theme="vinyle"] {
  --bg:      #f4f0e8;
  --bg2:     rgba(255,255,255,0.52);
  --bg3:     rgba(239,233,224,0.82);
  --surface: rgba(255,255,255,0.48);
  --card-base: rgba(255,255,255,0.52);

  --accent:  #c24f2c;
  --accent2: #c87e0a;
  --accent-rgb: 194,79,44;
  --text:    #1a1e22;
  --muted:   #666c72;
  --soft:    #94989d;
  --green:   #3a7a3a;
  --success: #3a7a3a;
  --danger:  #c24f2c;
  --red:     #c24f2c;
  --orange:  #c87e0a;
  --warning: #c87e0a;

  --border:        rgba(26,30,34,0.12);
  --border2:       rgba(26,30,34,0.20);
  --border-subtle: rgba(26,30,34,0.08);
  --shadow-deep:   0 18px 48px rgba(18,20,24,0.09);

  --mono:         'General Sans', Inter, -apple-system, sans-serif;
  --font-display: 'Cabinet Grotesk', 'General Sans', sans-serif;
  --font-jp:      'General Sans', sans-serif;

  --body-bg: #f4f0e8;
  --navbar-h: 52px;
  --radius:   24px;
}

/* ── Base body ─────────────────────────────────────────────────────────── */
html[data-theme="vinyle"] body {
  background:
    radial-gradient(circle at 12% 12%, rgba(194,79,44,0.10), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(26,30,34,0.07), transparent 22%),
    linear-gradient(180deg, #f7f3ec, #efe8df) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
}

/* Fine grid overlay */
html[data-theme="vinyle"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.45;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* ── Page header ──────────────────────────────────────────────────────── */
html[data-theme="vinyle"] .mln-page-header {
  background: transparent !important;
  border-bottom: none !important;
}

html[data-theme="vinyle"] .mln-page-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}

html[data-theme="vinyle"] .mln-page-title-ja {
  color: var(--muted) !important;
}

html[data-theme="vinyle"] .mln-page-sub {
  color: var(--muted) !important;
}

/* Watermark */
html[data-theme="vinyle"] .mln-page-header::after {
  content: attr(data-zh);
  position: absolute;
  right: 1.5rem;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(26,30,34,0.04);
  letter-spacing: 0.1em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */
html[data-theme="vinyle"] .mln-navbar {
  background: rgba(248,244,239,0.78) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 24px rgba(18,20,24,0.06) !important;
}

html[data-theme="vinyle"] .mln-nav-link,
html[data-theme="vinyle"] .mln-brand {
  color: var(--text) !important;
}

html[data-theme="vinyle"] .mln-nav-link:hover,
html[data-theme="vinyle"] .mln-nav-link.active {
  color: var(--accent) !important;
}

html[data-theme="vinyle"] .mln-nav-icon {
  filter: brightness(0.2) !important;
}

html[data-theme="vinyle"] .mln-nav-link.active .mln-nav-icon {
  filter: none !important;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
html[data-theme="vinyle"] .card,
html[data-theme="vinyle"] .mln-card,
html[data-theme="vinyle"] [class*="-card"] {
  background: var(--card-base) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-deep) !important;
  color: var(--text) !important;
}

html[data-theme="vinyle"] .card::before {
  display: none !important;
}

/* ── Labels / badges / chips ──────────────────────────────────────────── */
html[data-theme="vinyle"] .mln-card-label,
html[data-theme="vinyle"] .card-title,
html[data-theme="vinyle"] [class*="card-label"] {
  color: var(--muted) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
}

/* ── Texte général ────────────────────────────────────────────────────── */
html[data-theme="vinyle"] h1,
html[data-theme="vinyle"] h2,
html[data-theme="vinyle"] h3 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em !important;
  color: var(--text) !important;
}

html[data-theme="vinyle"] p,
html[data-theme="vinyle"] span,
html[data-theme="vinyle"] div {
  color: inherit;
}

/* ── Inputs / forms ────────────────────────────────────────────────────── */
html[data-theme="vinyle"] input,
html[data-theme="vinyle"] select,
html[data-theme="vinyle"] textarea {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
}

html[data-theme="vinyle"] input:focus,
html[data-theme="vinyle"] select:focus,
html[data-theme="vinyle"] textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(194,79,44,0.12) !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
html[data-theme="vinyle"] button,
html[data-theme="vinyle"] .btn {
  font-family: var(--mono) !important;
}

html[data-theme="vinyle"] .btn-primary,
html[data-theme="vinyle"] [class*="btn--primary"] {
  background: var(--accent) !important;
  color: #fff7f2 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
html[data-theme="vinyle"] ::-webkit-scrollbar {
  width: 6px;
}
html[data-theme="vinyle"] ::-webkit-scrollbar-track {
  background: transparent;
}
html[data-theme="vinyle"] ::-webkit-scrollbar-thumb {
  background: rgba(26,30,34,0.15) !important;
  border-radius: 3px;
}
html[data-theme="vinyle"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(26,30,34,0.3) !important;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
html[data-theme="vinyle"] table th {
  color: var(--soft) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="vinyle"] table td {
  color: var(--muted) !important;
  border-bottom-color: var(--border-subtle) !important;
}

/* ── Ticker / incidents bar ───────────────────────────────────────────── */
html[data-theme="vinyle"] .mln-ticker {
  background: rgba(248,244,239,0.9) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

html[data-theme="vinyle"] .mln-ticker-item {
  color: var(--muted) !important;
}

/* ── Leaflet maps ─────────────────────────────────────────────────────── */
html[data-theme="vinyle"] .leaflet-tile-pane {
  filter: saturate(0.9) brightness(1.0) contrast(1.02) !important;
}
html[data-theme="vinyle"] .leaflet-container {
  background: #efe8df !important;
}

/* ── Dashboard specific ───────────────────────────────────────────────── */
html[data-theme="vinyle"] .event-time {
  color: var(--accent) !important;
}

html[data-theme="vinyle"] .status-ok {
  color: var(--green) !important;
}

html[data-theme="vinyle"] .status-error {
  color: var(--danger) !important;
}

/* ── Accent color overrides for common patterns ───────────────────────── */
html[data-theme="vinyle"] [style*="color:var(--accent)"],
html[data-theme="vinyle"] .active {
  color: var(--accent) !important;
}

/* ── Code blocks ──────────────────────────────────────────────────────── */
html[data-theme="vinyle"] pre,
html[data-theme="vinyle"] code {
  background: rgba(26,30,34,0.04) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Modals / overlays ────────────────────────────────────────────────── */
html[data-theme="vinyle"] .mln-modal,
html[data-theme="vinyle"] [class*="modal"] {
  background: rgba(244,240,232,0.98) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

html[data-theme="vinyle"] [class*="modal-overlay"] {
  background: rgba(26,30,34,0.3) !important;
}

/* ── Settings page pills ──────────────────────────────────────────────── */
html[data-theme="vinyle"] .s-theme-pill {
  background: rgba(255,255,255,0.6) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

html[data-theme="vinyle"] .s-theme-pill:hover {
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

html[data-theme="vinyle"] .s-theme-pill.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ── Bus tiles ────────────────────────────────────────────────────────── */
html[data-theme="vinyle"] .bus-tile,
html[data-theme="vinyle"] [class*="bus-tile"] {
  background: rgba(255,255,255,0.5) !important;
  border: 1px solid var(--border) !important;
}

/* ── Analytics ────────────────────────────────────────────────────────── */
html[data-theme="vinyle"] .a-bar-views {
  background: var(--accent) !important;
}
html[data-theme="vinyle"] .a-bar-uniq {
  background: var(--accent2) !important;
}
html[data-theme="vinyle"] .a-list-bar-fill {
  background: var(--accent) !important;
}

/* ── Knowledge app ────────────────────────────────────────────────────── */
html[data-theme="vinyle"] .knw-lang-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
}