/**
 * Base Theme — Shared CSS custom properties for SpeVi apps
 * 
 * Extracted from specviber.css to enable consistent theming
 * across the origin app and satellite apps (kanban, etc.).
 * 
 * Uses the Tailwind Slate palette as foundation.
 * 
 * @version 1.0
 * @since 2026-03-04
 */

:root {
  /* ─── Backgrounds ──────────────────────────────────────── */
  --dm-bg:             #f5f7fb;
  --dm-bg-secondary:   #f8fafc;
  --dm-bg-hover:       #f1f5f9;
  --dm-card:           #ffffff;
  --dm-surface:        #f8fafc;
  --dm-bg-surface:     #ffffff;

  /* ─── Text ─────────────────────────────────────────────── */
  --dm-text:           #1e293b;
  --dm-text-secondary: #334155;
  --dm-text-strong:    #111827;
  --dm-text-muted:     #64748b;
  --dm-text-dim:       #94a3b8;

  /* ─── Accent / Brand ───────────────────────────────────── */
  --dm-primary:        #667eea;
  --dm-primary-hover:  #5a6fd6;
  --dm-primary-rgb:    102, 126, 234;  /* for rgba() usage */

  /* ─── Borders ──────────────────────────────────────────── */
  --dm-border:         #e2e8f0;
  --dm-border-light:   #f1f5f9;
  --dm-border-strong:  #cbd5e1;

  /* ─── Semantic ─────────────────────────────────────────── */
  --dm-success:        #10b981;
  --dm-warning:        #f59e0b;
  --dm-danger:         #ef4444;
  --dm-info:           #3b82f6;

  /* ─── Layout ───────────────────────────────────────────── */
  --dm-radius:         8px;
  --dm-radius-sm:      4px;
  --dm-radius-lg:      12px;
  --dm-shadow:         0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --dm-shadow-lg:      0 4px 12px rgba(0,0,0,0.1);
  --dm-shadow-popup:   0 4px 16px rgba(0,0,0,0.12);

  /* ─── Typography ───────────────────────────────────────── */
  --dm-font:           'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --dm-font-mono:      'Consolas', 'Fira Code', monospace;
  --dm-font-size:      14px;
  --dm-font-size-sm:   12px;
  --dm-font-size-xs:   11px;

  /* ─── Priority colors ──────────────────────────────────── */
  --priority-critical:     #e74c3c;
  --priority-critical-bg:  #fee2e2;
  --priority-critical-text:#991b1b;
  --priority-high:         #e67e22;
  --priority-high-bg:      #fef3c7;
  --priority-high-text:    #92400e;
  --priority-medium:       #f1c40f;
  --priority-medium-bg:    #dbeafe;
  --priority-medium-text:  #1e40af;
  --priority-low:          #2ecc71;
  --priority-low-bg:       #f1f5f9;
  --priority-low-text:     #475569;

  /* ─── Task status chip colors ──────────────────────────── */
  --status-backlog-bg:        #e0e7ff;
  --status-backlog-text:      #3730a3;
  --status-todo-bg:           #fef3c7;
  --status-todo-text:         #92400e;
  --status-in_progress-bg:    #dbeafe;
  --status-in_progress-text:  #1e40af;
  --status-waiting-bg:        #fed7aa;
  --status-waiting-text:      #9a3412;
  --status-done-bg:           #d1fae5;
  --status-done-text:         #065f46;
  --status-cancelled-bg:      #f1f5f9;
  --status-cancelled-text:    #475569;
}

/* ─── Dark theme overrides ───────────────────────────────── */
[data-theme="dark"] {
  --dm-bg:             #0f172a;
  --dm-bg-secondary:   #1e293b;
  --dm-bg-hover:       #334155;
  --dm-card:           #1e293b;
  --dm-surface:        #1e293b;
  --dm-bg-surface:     #1e293b;

  --dm-text:           #e2e8f0;
  --dm-text-secondary: #cbd5e1;
  --dm-text-strong:    #f1f5f9;
  --dm-text-muted:     #94a3b8;
  --dm-text-dim:       #64748b;

  --dm-border:         #334155;
  --dm-border-light:   #1e293b;
  --dm-border-strong:  #475569;
  --dm-bg-code:        #1a2d46;

  --dm-shadow:         0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --dm-shadow-lg:      0 4px 12px rgba(0,0,0,0.3);
  --dm-shadow-popup:   0 4px 16px rgba(0,0,0,0.4);

  /* Status chips - dimmer in dark mode */
  --status-backlog-bg:        #312e81;
  --status-backlog-text:      #a5b4fc;
  --status-todo-bg:           #422006;
  --status-todo-text:         #fbbf24;
  --status-in_progress-bg:    #1e3a5f;
  --status-in_progress-text:  #93c5fd;
  --status-waiting-bg:        #451a03;
  --status-waiting-text:      #fdba74;
  --status-done-bg:           #052e16;
  --status-done-text:         #6ee7b7;
  --status-cancelled-bg:      #1e293b;
  --status-cancelled-text:    #94a3b8;

  /* Priority chips */
  --priority-critical-bg:  #450a0a;
  --priority-critical-text:#fca5a5;
  --priority-high-bg:      #451a03;
  --priority-high-text:    #fbbf24;
  --priority-medium-bg:    #1e3a5f;
  --priority-medium-text:  #93c5fd;
  --priority-low-bg:       #1e293b;
  --priority-low-text:     #94a3b8;
}

/* ─── Multi-state checkbox icons (shared) ─────────────── */
.cb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 3px;
  font-size: 1em;
  font-weight: 700;
  margin-right: 6px;
  user-select: none;
  vertical-align: text-bottom;
  transition: background-color 0.15s;
}
.cb-todo      { color: var(--dm-text-muted, #9ca3af); border: 2px solid currentColor; }
.cb-progress  { color: #f59e0b; background: #fef3c7; border: 2px solid currentColor; }
.cb-done      { color: #10b981; background: #d1fae5; border: 2px solid currentColor; }
.cb-dropped   { color: #6b7280; background: #e5e7eb; border: 2px solid currentColor; }
.cb-blocked   { color: #ef4444; background: #fee2e2; border: 2px solid currentColor; }
.cb-research  { color: #3b82f6; background: #dbeafe; border: 2px solid currentColor; }
.cb-popover {
  position: absolute;
  background: var(--dm-card, #fff);
  border: 1px solid var(--dm-border, #e5e7eb);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
}
.cb-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.cb-popover-item:hover { background: var(--dm-bg-hover, #f3f4f6); }
.cb-popover-item .cb-icon { margin-right: 0; }
.cb-popover-item.suggested { font-weight: 600; }

/* ─── Unified md-task action menu ("⋯") ─── */
.sp-mdtask-menu { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; gap: 2px; }
.sp-mdtask-comment-badge { font-size: 12px; line-height: 1; display: none; }
.sp-mdtask-comment-badge:not(:empty) { display: inline-block; }
.sp-mdtask-trigger {
    background: var(--dm-bg-hover, #f1f5f9); border: 1px solid var(--dm-border, #e2e8f0); cursor: pointer; font-size: 14px;
    color: var(--dm-text-muted, #64748b); padding: 0 5px; border-radius: 4px;
    opacity: 0; transition: opacity 0.15s, background 0.15s;
    line-height: 1.2; font-weight: 700; letter-spacing: 1px;
}

.dm-md-cb-row:hover .sp-mdtask-trigger,
.dm-checklist-item:hover .sp-mdtask-trigger,
.kb-sp-cl-item:hover .sp-mdtask-trigger { opacity: 1; }
.sp-mdtask-trigger:hover { background: var(--dm-border, #e2e8f0); border-color: var(--dm-border-strong, #cbd5e1); color: var(--dm-text-strong); }
.sp-mdtask-popover {
    position: fixed;
    background: var(--dm-bg-surface, #fff); border: 1px solid var(--dm-border, #e5e7eb);
    border-radius: 8px; padding: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); z-index: 10000;
    min-width: 210px; white-space: nowrap;
}
.sp-mdtask-popover hr { border: none; border-top: 1px solid var(--dm-border, #e5e7eb); margin: 4px 0; }
.sp-mdtask-popover-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px;
    color: var(--dm-text-strong);
}
.sp-mdtask-popover-item:hover { background: var(--dm-bg-hover, #f3f4f6); }
.sp-mdtask-popover-item.danger { color: #dc2626; }
.sp-mdtask-popover-item.danger:hover { background: #fef2f2; }
.sp-mdtask-popover-item.disabled { color: var(--dm-text-light); cursor: default; font-size: 12px; }
.sp-mdtask-popover-item.disabled:hover { background: transparent; }
.sp-mdtask-icon { width: 20px; text-align: center; flex-shrink: 0; }
.sp-mdtask-badge { background: #b45309; color: white; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px; margin-left: 4px; }

/* Dark theme popover overrides (for kanban [data-theme="dark"]) */
[data-theme="dark"] .sp-mdtask-popover {
    background: var(--dm-bg-surface); border-color: var(--dm-border-strong);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
[data-theme="dark"] .sp-mdtask-popover-item:hover { background: var(--dm-bg-hover); }
[data-theme="dark"] .sp-mdtask-popover-item.danger:hover { background: rgba(220,38,38,0.15); }
[data-theme="dark"] .sp-mdtask-trigger { background: var(--dm-bg-hover); border-color: var(--dm-border-strong); color: var(--dm-text-muted); }
[data-theme="dark"] .sp-mdtask-trigger:hover { background: var(--dm-border-strong); color: var(--dm-text-strong); }

/* ─── .md link popup & clickable code refs ───────────── */
.dm-md-ref { cursor: pointer; border-bottom: 1px dotted var(--dm-primary, #667eea); }
.dm-md-ref:hover { opacity: 0.8; }
.dm-link-popup { position: fixed; z-index: 1000; background: var(--dm-card, #fff); border: 1px solid var(--dm-border, #e5e7eb); border-radius: 8px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.14); min-width: 200px; max-width: 400px; }
.dm-link-popup-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; color: var(--dm-text, #1f2937); transition: background .12s; white-space: nowrap; }
.dm-link-popup-item:hover { background: rgba(102,126,234,0.1); }
.dm-link-popup-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.dm-link-popup-doc-choice { white-space: normal; }
@media print { .dm-link-popup { display: none !important; } }

/* ─── Entity ref hover (#T123 / #D456) ───────────────── */
.dm-entity-ref { cursor: pointer; color: var(--dm-primary, #667eea); font-weight: 600; border-bottom: 1px dotted currentColor; transition: opacity .15s; }
.dm-entity-ref:hover { opacity: 0.75; }
.dm-entity-popup { position: fixed; z-index: 1001; background: var(--dm-card, #fff); border: 1px solid var(--dm-border, #e5e7eb); border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.16); min-width: 220px; max-width: 360px; font-size: 13px; color: var(--dm-text, #1f2937); }
.dm-entity-popup-header { font-size: 12px; color: var(--dm-text-muted, #6b7280); margin-bottom: 4px; }
.dm-entity-popup-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; line-height: 1.3; }
.dm-entity-popup-meta { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 4px; background: rgba(102,126,234,.12); color: var(--dm-primary, #667eea); margin-bottom: 6px; }
.dm-entity-popup-desc { font-size: 12px; color: var(--dm-text-muted, #6b7280); line-height: 1.45; margin-bottom: 8px; max-height: 120px; overflow: hidden; }
.dm-entity-popup-actions { display: flex; gap: 6px; border-top: 1px solid var(--dm-border, #e5e7eb); padding-top: 8px; }
.dm-entity-popup-action { font-size: 12px; padding: 4px 10px; border-radius: 5px; background: rgba(102,126,234,.08); color: var(--dm-primary, #667eea); text-decoration: none; transition: background .12s; }
.dm-entity-popup-action:hover { background: rgba(102,126,234,.18); }
@media print { .dm-entity-popup { display: none !important; } }

/* ─── Highlight / ==text== rendering ─────────────────── */
mark {
  background: rgba(255, 230, 0, 0.35);
  border-radius: 2px;
  padding: 0 2px;
}
[data-theme="dark"] mark {
  background: rgba(255, 210, 0, 0.25);
}