/* Shared styles for docs/examples/components pages - DARK MODE ONLY */

:root {
  /* Colors */
  --black: #1a1a1a;
  --white: #ffffff;
  --gray: #6b6b6b;
  --gray-light: #e8e3db;
  --cream: #f5f0e8;
  --purple: #a78bfa;
  --purple-light: #c4b5fd;
  --mustard: #e8b830;
  --mustard-light: #f5d060;
  --bordeaux: #d45d79;
  --bordeaux-light: #e87d95;
  
  /* Semantic colors */
  --shadow: 6px 6px 0 #333;
  --shadow-sm: 3px 3px 0 #333;
  --bg-color: #0a0a0a;
  --text-color: #f0eee8;
  --text-strong: #f0eee8;
  --text-muted: #b0b0b0;
  --text-muted-on-light: #6b6b6b;
}

body {
  background: var(--bg-color);
  color: var(--text-strong);
}

h1 { color: var(--purple); }
.subtitle { color: var(--text-muted); }

.demo-container,
.app-card,
.demo-box,
.info-box,
.users-panel,
.activity-panel,
.code-block {
  background: var(--white);
  color: var(--black);
}

.users-panel-header,
.activity-header,
.version-badge { color: var(--black); }

.code-section,
pre {
  background: #0f0f0f;
  color: var(--text-strong);
}

code {
  background: #202020;
  color: var(--text-strong);
  border-color: #3a3a3a;
}

a { color: var(--purple-light); }
a:hover { color: var(--mustard-light); }

.demo-container a,
.app-card a,
.demo-box a,
.info-box a {
  color: #4a2c8a;
}

.demo-container a:hover,
.app-card a:hover,
.demo-box a:hover,
.info-box a:hover {
  color: #6b1d3a;
}

.info-box strong,
.demo-box strong {
  color: #4a2c8a;
}

.examples-nav {
  margin-top: 60px; padding: 30px; border-top: 5px solid var(--black);
  background: #161616; text-align: center;
}
.examples-nav p { margin-bottom: 15px; font-weight: 800; text-transform: uppercase; font-size: 0.875rem; color: var(--text-muted); }
.examples-nav a {
  display: inline-block; width: 40px; height: 40px; line-height: 40px;
  text-align: center; margin: 5px; border: 2px solid var(--black);
  background: #0f0f0f; color: var(--purple-light); text-decoration: none;
  font-weight: 800; transition: transform 0.1s, box-shadow 0.1s;
}
.examples-nav a:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }
.examples-nav a.current { background: var(--purple); color: #0a0a0a; }
.examples-nav-links { margin-bottom: 20px; }

.examples-nav-home { margin-top: 15px; }
.examples-nav-home a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 2px solid var(--black);
  background: #0f0f0f; color: var(--purple-light); text-decoration: none;
  font-weight: 800; text-transform: uppercase; font-size: 0.75rem;
  transition: transform 0.1s, box-shadow 0.1s;
  width: auto;
}
.examples-nav-home a:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }

.examples-top-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center; margin-bottom: 18px;
}
.examples-top-nav-link {
  display: inline-block; padding: 8px 12px; border: 2px solid var(--black);
  background: #0f0f0f; color: var(--purple-light); text-decoration: none;
  font-weight: 800; text-transform: uppercase; font-size: 0.75rem;
  transition: transform 0.1s, box-shadow 0.1s;
}
.examples-top-nav-link:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }
.examples-top-nav-link.left { justify-self: start; }
.examples-top-nav-link.center { justify-self: center; }
.examples-top-nav-link.right { justify-self: end; }

.examples-nav-mobile { display: none; max-width: 360px; margin: 0 auto 16px; text-align: left; }
.examples-nav-mobile label { display: block; margin-bottom: 8px; font-weight: 800; text-transform: uppercase; font-size: 0.75rem; color: var(--text-muted); }
.examples-nav-mobile select { width: 100%; padding: 10px 12px; border: 2px solid var(--black); background: #0f0f0f; color: var(--text-strong); font-weight: 700; font-family: inherit; }

.user-status,
.log-time,
.worker-indicator,
.selected-user-label {
  color: var(--text-muted-on-light) !important;
}

.meta-slot {
  color: var(--text-muted-on-light) !important;
}

.user-name,
.log-text,
.status,
.name-slot {
  color: var(--black);
}

/* Keep high contrast for the worker pool stats ribbon */
.stats-bar {
  background: #161616 !important;
  color: var(--text-strong) !important;
}

.stats-bar .stat-label {
  color: var(--text-muted) !important;
}

.stats-bar .stat-value { color: var(--mustard) !important; }

/* Modal readability safeguards when dark theme stylesheet is loaded */
modal-dialog::part(modal) {
  background: #ffffff;
  color: #1a1a1a;
}

modal-dialog::part(overlay) {
  background: rgba(0, 0, 0, 0.55);
}

/* Compatibility layer for legacy inline styles still present in some examples */
[style*="background: white"],
[style*="background:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: #ffffff"],
[style*="background:#ffffff"] {
  background: var(--white) !important;
}

[style*="background: #f5f0e8"],
[style*="background:#f5f0e8"] {
  background: var(--cream) !important;
}

ul, ol { padding-left: 1.25rem; margin: 20px 0; }
li { margin-bottom: 0.5rem; overflow-wrap: anywhere; }
p, code, pre { overflow-wrap: anywhere; }

@media (max-width: 680px) {
  body { padding: 24px 14px; }
  .examples-theme-switcher { top: 0.75rem; right: 0.75rem; }
  h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
  .demo-container, .app-card, .demo-box, .info-box, .code-section { padding: 20px 16px; margin: 15px 0 ;}
  .examples-nav { padding: 20px 12px; margin-top: 40px; }
  .examples-nav-links { display: none; }
  .examples-nav-mobile { display: block; }
  .examples-top-nav { grid-template-columns: 1fr; gap: 8px; }
  .examples-top-nav-link.left,
  .examples-top-nav-link.center,
  .examples-top-nav-link.right { justify-self: stretch; text-align: center; }
  .back-link { font-size: 0.75rem; }
  .code-section, pre { overflow-x: auto; white-space: pre-wrap; }
}