/* Mika-Inject: retheming-Layer fuer Subpages mit eigenen Tokens (durcharbeiten, ember-watcher, ai-monitor, dashboard). */
@import url('https://fonts.bunny.net/css?family=jetbrains-mono:400,500,600,700&display=swap');

:root {
  --bg: #1a1d26 !important; --card: #232630 !important; --border: rgba(255,255,255,0.06) !important;
  --text: #eef1f6 !important; --muted: #7a8191 !important; --accent: #7aa2ff !important;
  --green: #4ade80 !important; --yellow: #ffd166 !important; --red: #ff6b6b !important;
  /* Dashboard-Akzent: Aurora */
  --dash-accent: #00e4ff;
}

body, body * { font-family: "JetBrains Mono", ui-monospace, SF Mono, Menlo, monospace !important; }

body {
  background:
    radial-gradient(ellipse 80% 60% at 70% -10%, #232736 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 10% 110%, rgba(122,162,255,0.07) 0%, transparent 60%),
    #1a1d26 !important;
  background-attachment: fixed !important;
  position: relative;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.065) 0.45px, transparent 0.85px);
  background-size: 6px 6px;
}
body > * { position: relative; z-index: 1; }

/* Chamfer auf Cards + Inputs + Buttons */
.card, .session, button:not(.view-tab), input[type=text], input[type=search], input[type=password], textarea, select,
.trigger, .comment, .reply-input, pre, .log-entry, .summary,
.item, .highlight-box, .handoff-banner, .collapsible, .notes-sidebar, .cost-table, code.cmd,
.modal-box, .folder-card, .subtitle {
  border-radius: 0 !important;
  border-left-width: 1px !important;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015)) !important;
  border: 1px solid transparent !important; /* border-box verhaeltnis, Kontur uebernimmt SVG */
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-sizing: border-box !important;
  position: relative;
  isolation: isolate;
}

/* Spacing fuer Pitch-Bloecke */
.item { padding: 1.1rem 1.3rem !important; margin-bottom: 0.8rem !important; }
.highlight-box { padding: 0.9rem 1.1rem !important; margin: 1rem 0 !important; }
.handoff-banner { padding: 1rem 1.3rem !important; margin: 1.5rem 0 !important; }
.collapsible { padding: 0 !important; margin-bottom: 0.6rem !important; }
.collapsible-header { padding: 0.8rem 1.1rem !important; }
.collapsible-body { padding: 0 1.1rem 1rem !important; }
.notes-sidebar { padding: 1.1rem 1.2rem !important; }

/* Checkbox als kleines Chamfer-Quadrat */
input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid rgba(122,162,255,0.4) !important;
  background: rgba(35,38,48,0.42) !important;
  clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 6px) !important;
  cursor: pointer;
  margin: 0 !important;
  vertical-align: middle;
  position: relative;
  transition: background 160ms;
}
input[type="checkbox"]:checked {
  background: #7aa2ff !important;
  border-color: #7aa2ff !important;
  box-shadow: 0 0 8px rgba(122,162,255,0.6);
}
input[type="checkbox"]:checked::after {
  content: "\2713" !important;
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #1a1d26;
  font-size: 11px;
  font-weight: 700;
}

/* Highlight-Box + Handoff-Banner kriegen Akzent-Tint statt linkem Balken */
.highlight-box {
  background: rgba(122,162,255,0.06) !important;
  border-color: rgba(122,162,255,0.18) !important;
}
.handoff-banner {
  background: linear-gradient(135deg, rgba(122,162,255,0.12), rgba(168,236,255,0.06)) !important;
  border-color: rgba(122,162,255,0.3) !important;
  color: #7aa2ff !important;
  text-shadow: 0 0 12px rgba(122,162,255,0.4);
  box-shadow: 0 0 36px rgba(122,162,255,0.15);
}

/* Hover-Glow auf Cards/Items */
.card:hover, .item:hover, .folder-card:hover, .collapsible:hover {
  border-color: rgba(122,162,255,0.35) !important;
  box-shadow: 0 0 28px rgba(122,162,255,0.15);
}

button { cursor: pointer; color: #eef1f6 !important; transition: color 180ms, border-color 180ms, background 180ms; }
button:hover { color: #7aa2ff !important; border-color: rgba(122,162,255,0.4) !important; }

/* Primaere Buttons: Akzent-Farbe */
.show-btn, .copy-btn, .notes-btn, button.primary, .btn-primary {
  background: rgba(122,162,255,0.14) !important;
  color: #7aa2ff !important;
  border: 1px solid rgba(122,162,255,0.3) !important;
  text-shadow: 0 0 8px rgba(122,162,255,0.4);
  padding: 0.55rem 1rem !important;
  font-weight: 500;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 14px) !important;
}
.show-btn:hover, .copy-btn:hover, .notes-btn:hover, button.primary:hover, .btn-primary:hover {
  background: rgba(122,162,255,0.22) !important;
  color: #7aa2ff !important;
  box-shadow: 0 0 20px rgba(122,162,255,0.25);
}

/* Sekundaere Tab-Links: glass + Akzent-Rand */
.tab-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.9rem !important; font-size: 0.8rem !important;
  background: rgba(35,38,48,0.42) !important;
  color: #b4bac5 !important; text-decoration: none !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 14px) !important;
  border-radius: 0 !important;
  transition: color 180ms, border-color 180ms;
}
.tab-btn:hover {
  color: #7aa2ff !important;
  border-color: rgba(122,162,255,0.4) !important;
}

input, textarea, select { color: #eef1f6 !important; }
input::placeholder, textarea::placeholder { color: #4d5260 !important; }

/* Copy-Button auf Code-Bloecken */
code.cmd, pre { padding-right: 5rem !important; position: relative; }
.mika-copy {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  padding: 3px 10px !important;
  font-size: 0.65rem !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  background: rgba(122,162,255,0.12) !important;
  color: #7aa2ff !important;
  border: 1px solid rgba(122,162,255,0.25) !important;
  clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 6px) !important;
  cursor: pointer !important;
  opacity: 0;
  transition: opacity 200ms, background 180ms;
  z-index: 2;
}
code.cmd:hover .mika-copy,
pre:hover .mika-copy { opacity: 1; }
.mika-copy:hover {
  background: rgba(122,162,255,0.22) !important;
  color: #7aa2ff !important;
}

/* Pill-Buttons (Tags/Badges) */
.session-status, .badge, .tag, .pill {
  border-radius: 0 !important;
  clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}

#drift-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; display: block; }

/* Runner-SVG */
.runner-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: visible; }
.runner-svg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.runner-outline-glow { stroke: rgba(122,162,255,0.08); stroke-width: 2.5; filter: blur(2px); }
.runner-outline      { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.runner-trail-4      { stroke: rgba(122,162,255,0.14); stroke-width: 3; filter: blur(3px); }
.runner-trail-3      { stroke: rgba(122,162,255,0.22); stroke-width: 1.2; }
.runner-trail-2      { stroke: rgba(122,162,255,0.32); stroke-width: 1.4; }
.runner-trail-1      { stroke: rgba(122,162,255,0.55); stroke-width: 1.6; }
.runner-trail-0      { stroke: rgba(122,162,255,0.75); stroke-width: 1.8; filter: blur(1px); }

@media (hover: none) and (pointer: coarse), (prefers-reduced-motion: reduce) {
  #drift-canvas { display: none; }
}