/* ═══════════════════════════════════════════════════════════════
   MONOCHROME — Pure Grayscale Theme
   Minimalist black/white with single cool-gray accent #b0b8c4
   Zero hue backgrounds · Unified accent · Clean HUD
   25 CSS variables · 6 layers · 24 semantic classes
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Semantic CSS Variables (25 vars, 6 layers) ── */
[data-theme="monochrome"] {
  /* Backgrounds */
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --bg-tertiary: #1e1e1e;
  --bg-hover: #2a2a2a;
  --bg-overlay: rgba(0, 0, 0, 0.7);

  /* Text */
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-muted: #606060;
  --text-inverse: #0a0a0a;

  /* Border */
  --border: #333333;
  --border-subtle: #252525;
  --border-focus: #b0b8c4;

  /* Accent — all unified to cool gray */
  --accent-blue: #b0b8c4;
  --accent-green: #b0b8c4;
  --accent-orange: #b0b8c4;
  --accent-red: #b0b8c4;
  --accent-purple: #b0b8c4;
  --accent-yellow: #b0b8c4;

  /* Interactive */
  --btn-primary: linear-gradient(180deg, #b0b8c4, #8a919c);
  --btn-primary-hover: linear-gradient(180deg, #c0c8d4, #b0b8c4);
  --btn-secondary: transparent;
  --link: #b0b8c4;

  /* Status — all unified to cool gray */
  --status-ok: #b0b8c4;
  --status-warn: #b0b8c4;
  --status-error: #b0b8c4;
}

/* ── 2. Semantic CSS Classes (24 utility classes) ── */
[data-theme="monochrome"] .text-primary { color: var(--text-primary); }
[data-theme="monochrome"] .text-secondary { color: var(--text-secondary); }
[data-theme="monochrome"] .text-muted { color: var(--text-muted); }
[data-theme="monochrome"] .text-inverse { color: var(--text-inverse); }
[data-theme="monochrome"] .text-link { color: var(--link); }

[data-theme="monochrome"] .bg-primary { background: var(--bg-primary); }
[data-theme="monochrome"] .bg-secondary { background: var(--bg-secondary); }
[data-theme="monochrome"] .bg-tertiary { background: var(--bg-tertiary); }
[data-theme="monochrome"] .bg-hover:hover { background: var(--bg-hover); }
[data-theme="monochrome"] .bg-overlay { background: var(--bg-overlay); }

[data-theme="monochrome"] .accent-blue { color: var(--accent-blue); }
[data-theme="monochrome"] .accent-green { color: var(--accent-green); }
[data-theme="monochrome"] .accent-orange { color: var(--accent-orange); }
[data-theme="monochrome"] .accent-red { color: var(--accent-red); }
[data-theme="monochrome"] .accent-purple { color: var(--accent-purple); }
[data-theme="monochrome"] .accent-yellow { color: var(--accent-yellow); }

[data-theme="monochrome"] .border { border-color: var(--border); }
[data-theme="monochrome"] .border-subtle { border-color: var(--border-subtle); }
[data-theme="monochrome"] .border-focus:focus { border-color: var(--border-focus); }

[data-theme="monochrome"] .btn-primary-bg { background: var(--btn-primary); }
[data-theme="monochrome"] .btn-secondary-bg { background: var(--btn-secondary); }

[data-theme="monochrome"] .status-ok { color: var(--status-ok); }
[data-theme="monochrome"] .status-warn { color: var(--status-warn); }
[data-theme="monochrome"] .status-error { color: var(--status-error); }

/* ── 2. Page Background ── */
[data-theme="monochrome"] body {
  background: #080808 !important;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

[data-theme="monochrome"] .canvas {
  background: #0a0a0a !important;
  border-color: #333333 !important;
}

[data-theme="monochrome"] .canvas-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;
}

/* ── 3. Monochrome Subtle Vignette ── */
[data-theme="monochrome"] body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 99998;
}

/* ── 4. Dash Card — Monochrome Panel ── */
[data-theme="monochrome"] .placed-widget .dash-card {
  background: linear-gradient(180deg, rgba(20,20,20,0.97), rgba(10,10,10,0.95)) !important;
  border: 1px solid #333333 !important;
  border-radius: 10px !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  backdrop-filter: none !important;
}

[data-theme="monochrome"] .placed-widget .dash-card-head {
  background: linear-gradient(90deg, rgba(176,184,196,0.06), rgba(176,184,196,0.02)) !important;
  border-bottom: 1px solid #333333 !important;
  padding: 10px 14px !important;
  backdrop-filter: none !important;
}

[data-theme="monochrome"] .placed-widget .dash-card-title {
  color: #b0b8c4 !important;
  font-family: 'Segoe UI', -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

[data-theme="monochrome"] .placed-widget .dash-card-badge {
  color: #a0a0a0 !important;
  background: rgba(176,184,196,0.1) !important;
  border: 1px solid rgba(176,184,196,0.2) !important;
  font-family: 'Segoe UI', sans-serif !important;
}

[data-theme="monochrome"] .placed-widget .dash-card-body {
  color: #a0a0a0 !important;
  font-family: 'Segoe UI', sans-serif !important;
}

/* ── 5. KPI Cards ── */
[data-theme="monochrome"] .placed-widget .kpi-card {
  background: linear-gradient(180deg, rgba(20,20,20,0.97), rgba(10,10,10,0.9)) !important;
  border: 1px solid #333333 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

[data-theme="monochrome"] .placed-widget .kpi-value {
  font-family: 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
}
[data-theme="monochrome"] .placed-widget .kpi-value.blue { color: #b0b8c4 !important; }
[data-theme="monochrome"] .placed-widget .kpi-value.green { color: #b0b8c4 !important; }
[data-theme="monochrome"] .placed-widget .kpi-value.orange { color: #b0b8c4 !important; }
[data-theme="monochrome"] .placed-widget .kpi-value.red { color: #b0b8c4 !important; }

[data-theme="monochrome"] .placed-widget .kpi-label {
  color: #a0a0a0 !important;
  font-family: 'Segoe UI', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

[data-theme="monochrome"] .placed-widget .kpi-indicator.green { background: #b0b8c4 !important; box-shadow: 0 0 6px rgba(176,184,196,0.3) !important; }
[data-theme="monochrome"] .placed-widget .kpi-indicator.yellow { background: #b0b8c4 !important; box-shadow: 0 0 6px rgba(176,184,196,0.3) !important; }
[data-theme="monochrome"] .placed-widget .kpi-indicator.red { background: #b0b8c4 !important; box-shadow: 0 0 6px rgba(176,184,196,0.3) !important; }

/* ── 6. KPI Ring ── */
[data-theme="monochrome"] .placed-widget .kpi-ring-label {
  color: #e0e0e0 !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
}

/* ── 7. System Stats ── */
[data-theme="monochrome"] .placed-widget .sys-row {
  color: #a0a0a0 !important;
  font-family: 'Segoe UI', sans-serif !important;
}
[data-theme="monochrome"] .placed-widget .sys-bar {
  background: #1e1e1e !important;
  border: 1px solid #333333 !important;
  border-radius: 3px !important;
}
[data-theme="monochrome"] .placed-widget .sys-bar-fill {
  border-radius: 2px !important;
}

/* ── 8. Lists & Rows ── */
[data-theme="monochrome"] .placed-widget .task-row,
[data-theme="monochrome"] .placed-widget .goal-row,
[data-theme="monochrome"] .placed-widget .goal-tree-node,
[data-theme="monochrome"] .placed-widget .net-row,
[data-theme="monochrome"] .placed-widget .docker-row,
[data-theme="monochrome"] .placed-widget .uptime-row {
  border-color: #252525 !important;
  font-family: 'Segoe UI', sans-serif !important;
}
[data-theme="monochrome"] .placed-widget .task-row:hover,
[data-theme="monochrome"] .placed-widget .goal-row:hover {
  background: rgba(176,184,196,0.05) !important;
}

/* ── 9. Checkboxes ── */
[data-theme="monochrome"] .placed-widget input[type="checkbox"] {
  accent-color: #b0b8c4 !important;
}

/* ── 10. Chart.js ── */
[data-theme="monochrome"] .placed-widget canvas {
  filter: brightness(0.9) contrast(1.05) !important;
}

/* ── 11. Clock ── */
[data-theme="monochrome"] .placed-widget .clock-time,
[data-theme="monochrome"] .placed-widget .topbar-time {
  color: #e0e0e0 !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 2px !important;
}
[data-theme="monochrome"] .placed-widget .clock-date,
[data-theme="monochrome"] .placed-widget .topbar-date {
  color: #a0a0a0 !important;
  font-family: 'Segoe UI', sans-serif !important;
}

/* ── 12. Scrollbars ── */
[data-theme="monochrome"] .placed-widget ::-webkit-scrollbar { width: 5px !important; }
[data-theme="monochrome"] .placed-widget ::-webkit-scrollbar-track { background: transparent !important; }
[data-theme="monochrome"] .placed-widget ::-webkit-scrollbar-thumb {
  background: #333333 !important;
  border-radius: 3px !important;
}
[data-theme="monochrome"] .placed-widget ::-webkit-scrollbar-thumb:hover {
  background: #b0b8c4 !important;
}

/* ── 13. Header ── */
[data-theme="monochrome"] .builder-header {
  background: #0a0a0a !important;
  border-bottom: 1px solid #333333 !important;
}
[data-theme="monochrome"] .builder-header .logo-img {
  filter: brightness(1.1) !important;
}
[data-theme="monochrome"] .header-nav .nav-link {
  color: #a0a0a0 !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-weight: 500 !important;
}
[data-theme="monochrome"] .header-nav .nav-link:hover {
  color: #b0b8c4 !important;
}

/* ── 14. Buttons ── */
[data-theme="monochrome"] .btn-primary {
  background: linear-gradient(180deg, #b0b8c4, #8a919c) !important;
  border: 1px solid #b0b8c4 !important;
  color: #fff !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-radius: 6px !important;
}
[data-theme="monochrome"] .btn-primary:hover {
  background: linear-gradient(180deg, #c0c8d4, #b0b8c4) !important;
  box-shadow: 0 0 16px rgba(176,184,196,0.3) !important;
}
[data-theme="monochrome"] .btn-secondary {
  background: transparent !important;
  border-color: #333333 !important;
  color: #a0a0a0 !important;
  font-family: 'Segoe UI', sans-serif !important;
  border-radius: 6px !important;
}
[data-theme="monochrome"] .btn-secondary:hover {
  border-color: #b0b8c4 !important;
  color: #b0b8c4 !important;
}

/* ── 15. Sidebar Panels ── */
[data-theme="monochrome"] .widget-panel {
  background: #0a0a0a !important;
  border-right: 1px solid #333333 !important;
}
[data-theme="monochrome"] .widget-panel h3,
[data-theme="monochrome"] .widget-panel h4 {
  color: #b0b8c4 !important;
  font-family: 'Segoe UI', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
}
[data-theme="monochrome"] .widget-item {
  background: rgba(176,184,196,0.03) !important;
  border: 1px solid #252525 !important;
  color: #a0a0a0 !important;
  font-family: 'Segoe UI', sans-serif !important;
  border-radius: 6px !important;
}
[data-theme="monochrome"] .widget-item:hover {
  border-color: #b0b8c4 !important;
  background: rgba(176,184,196,0.08) !important;
  color: #e0e0e0 !important;
}

[data-theme="monochrome"] .properties-panel {
  background: #0a0a0a !important;
  border-left: 1px solid #333333 !important;
}
[data-theme="monochrome"] .properties-panel h3 {
  color: #b0b8c4 !important;
  font-family: 'Segoe UI', sans-serif !important;
}
[data-theme="monochrome"] .properties-panel label {
  color: #a0a0a0 !important;
  font-family: 'Segoe UI', sans-serif !important;
}
[data-theme="monochrome"] .properties-panel input,
[data-theme="monochrome"] .properties-panel select {
  background: #141414 !important;
  border-color: #333333 !important;
  color: #e0e0e0 !important;
  font-family: 'Segoe UI', sans-serif !important;
  border-radius: 4px !important;
}

/* ── 16. Canvas Info ── */
[data-theme="monochrome"] .canvas-info {
  background: #0a0a0a !important;
  border-top: 1px solid #333333 !important;
  color: #a0a0a0 !important;
  font-family: 'Segoe UI', sans-serif !important;
}

/* ── 17. Edit Layout Button ── */
[data-theme="monochrome"] #btn-edit-layout {
  background: linear-gradient(180deg, #b0b8c4, #8a919c) !important;
  border-color: #b0b8c4 !important;
  color: #fff !important;
  border-radius: 6px !important;
  transition: opacity 2s ease !important;
  opacity: 1;
}
[data-theme="monochrome"] #btn-edit-layout.btn-edit-fade {
  opacity: 0.1;
}

/* ── 18. Empty Hint ── */
[data-theme="monochrome"] .view-empty-hint .hint-text {
  color: #a0a0a0 !important;
}

/* ── 19. Global Font ── */
[data-theme="monochrome"] .canvas, [data-theme="monochrome"] .canvas *,
[data-theme="monochrome"] .placed-widget, [data-theme="monochrome"] .placed-widget * {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── 21. Monochrome HUD Accent Lines ── */
[data-theme="monochrome"] .placed-widget .dash-card::before {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,184,196,0.3), transparent);
  z-index: 1;
}

/* ── 22. Selection State ── */
[data-theme="monochrome"] .placed-widget.selected .dash-card,
[data-theme="monochrome"] .placed-widget.selected .kpi-card {
  border-color: #b0b8c4 !important;
  box-shadow: 0 0 20px rgba(176,184,196,0.2), 0 4px 24px rgba(0,0,0,0.5) !important;
}

/* ── Monochrome Goal-Kanban Widget ── */
/* Outer container */
[data-theme="monochrome"] .placed-widget .sf-gk {
  background: linear-gradient(180deg, rgba(20,20,20,0.97), rgba(10,10,10,0.95)) !important;
  border: 1px solid #333333 !important;
  border-radius: 10px !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
/* Top accent line */
[data-theme="monochrome"] .placed-widget .sf-gk::before {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,184,196,0.3), transparent);
  z-index: 1;
  pointer-events: none;
}
[data-theme="monochrome"] .placed-widget .sf-gk::after {
  display: none !important;
}

/* Corner accents */
[data-theme="monochrome"] .placed-widget .sf-gk .cr.tl,
[data-theme="monochrome"] .placed-widget .sf-gk .cr.tr,
[data-theme="monochrome"] .placed-widget .sf-gk .cr.bl,
[data-theme="monochrome"] .placed-widget .sf-gk .cr.br {
  border-color: rgba(176,184,196,0.25) !important;
}

/* Inner header strip */
[data-theme="monochrome"] .placed-widget .sf-gk .hd {
  background: linear-gradient(90deg, rgba(176,184,196,0.06), rgba(176,184,196,0.02)) !important;
  border-bottom: 1px solid #333333 !important;
}
[data-theme="monochrome"] .placed-widget .sf-gk .hd-t {
  color: #b0b8c4 !important;
  text-shadow: none !important;
}

/* Tab bar */
[data-theme="monochrome"] .placed-widget .sf-gk .tbs {
  border-bottom: 1px solid #333333 !important;
  background: rgba(20,20,20,0.5) !important;
}
[data-theme="monochrome"] .placed-widget .sf-gk .tb:hover {
  color: #a0a0a0 !important;
  background: rgba(176,184,196,0.04) !important;
}
[data-theme="monochrome"] .placed-widget .sf-gk .tb.on {
  color: #b0b8c4 !important;
}
[data-theme="monochrome"] .placed-widget .sf-gk .tb.on::after {
  background: #b0b8c4 !important;
  box-shadow: 0 0 6px rgba(176,184,196,0.4) !important;
}

/* Section cards */
[data-theme="monochrome"] .placed-widget .sf-gk .sc {
  border-color: rgba(51,51,51,0.6) !important;
  background: rgba(30,30,30,0.4) !important;
}
[data-theme="monochrome"] .placed-widget .sf-gk .sc:hover {
  border-color: rgba(176,184,196,0.25) !important;
  box-shadow: 0 2px 16px rgba(176,184,196,0.06) !important;
}

/* Section headers */
[data-theme="monochrome"] .placed-widget .sf-gk .sc-h {
  color: #b0b8c4 !important;
  text-shadow: none !important;
  border-bottom: 1px solid #252525 !important;
  letter-spacing: 2px !important;
}
[data-theme="monochrome"] .placed-widget .sf-gk .sc-h svg {
  stroke: rgba(176,184,196,0.6) !important;
}

/* LIVE tag */
[data-theme="monochrome"] .placed-widget .sf-gk .sc-h .tg {
  color: #b0b8c4 !important;
  background: rgba(176,184,196,0.1) !important;
  border: 1px solid rgba(176,184,196,0.2) !important;
  box-shadow: none !important;
}
/* Interactive tag */
[data-theme="monochrome"] .placed-widget .sf-gk .sc-h .tg.or {
  color: #b0b8c4 !important;
  background: rgba(176,184,196,0.1) !important;
  border: 1px solid rgba(176,184,196,0.2) !important;
  box-shadow: none !important;
}

/* Energy bar border */
[data-theme="monochrome"] .placed-widget .sf-gk .eb,
[data-theme="monochrome"] .placed-widget .sf-gk .pb {
  border-color: rgba(51,51,51,0.5) !important;
}

/* Progress value text */
[data-theme="monochrome"] .placed-widget .sf-gk .pv {
  text-shadow: none !important;
}

/* Option hover states */
[data-theme="monochrome"] .placed-widget .sf-gk .go:hover {
  border-color: rgba(176,184,196,0.15) !important;
  background: rgba(176,184,196,0.03) !important;
}

/* Frog section */
[data-theme="monochrome"] .placed-widget .sf-gk .frog-section {
  border-color: rgba(176,184,196,0.2) !important;
}

/* Scrollbar */
[data-theme="monochrome"] .placed-widget .sf-gk .bd::-webkit-scrollbar-thumb {
  background: #333333 !important;
}
[data-theme="monochrome"] .placed-widget .sf-gk .bd::-webkit-scrollbar-thumb:hover {
  background: #444444 !important;
}

/* Two-column sub-cards border */
[data-theme="monochrome"] .placed-widget .sf-gk .gk-two-col .sc {
  border-color: rgba(51,51,51,0.5) !important;
}

/* Progress bar gradient — mute glow */
[data-theme="monochrome"] .placed-widget .sf-gk .pf {
  box-shadow: none !important;
}

/* ── Theme Switch Button — Monochrome ── */
[data-theme="monochrome"] .theme-switch-btn {
  background: rgba(176, 184, 196, 0.7) !important;
  border-color: #b0b8c4 !important;
}
[data-theme="monochrome"] .theme-switch-btn:hover {
  background: rgba(176, 184, 196, 0.9) !important;
}
[data-theme="monochrome"] .theme-popup {
  background: rgba(20, 20, 20, 0.95) !important;
  color: #e0e0e0 !important;
}
[data-theme="monochrome"] .theme-popup-item.active {
  color: #b0b8c4;
  font-weight: 600;
}