/* ─── Color design tokens ────────────────────────────────────────────────────── */
:root {
  --c-sidebar:      #111111;
  --c-surface:      #181818;
  --c-surface-2:    #212121;
  --c-border:       #2e2e2e;
  --c-text:         #f0f0f0;
  --c-text-muted:   #888888;
  --c-accent:       #7c3aed;
}

/* ─── Force the correct dark background on every container ───────────────────── */
/* These classes are used inside x-html strings and won't be JIT-scanned by
   Tailwind CDN, so we define them directly in CSS instead.                      */
html, body                        { background: var(--c-surface); color: var(--c-text); }
.bg-sidebar                       { background-color: var(--c-sidebar)  !important; }
.bg-surface                       { background-color: var(--c-surface)  !important; }
.bg-surface-2                     { background-color: var(--c-surface-2) !important; }
.border-border                    { border-color: var(--c-border) !important; }
.text-text-muted                  { color: var(--c-text-muted) !important; }
.hover\:bg-sidebar-hover:hover    { background-color: #222222 !important; }
.hover\:bg-surface-2:hover        { background-color: var(--c-surface-2) !important; }
.hover\:bg-surface:hover          { background-color: var(--c-surface) !important; }
.hover\:bg-border:hover           { background-color: var(--c-border) !important; }
.divide-border > * + *            { border-color: var(--c-border); }

/* ─── Alpine.js cloak ────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ─── Base font smoothing ────────────────────────────────────────────────────── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* ─── Custom Scrollbars ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #444444; }

/* ─── Flatpickr Dark Theme ───────────────────────────────────────────────────── */
.flatpickr-calendar {
  background: #212121 !important;
  border: 1px solid #2e2e2e !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
  color: #e8e8e8 !important;
}
.flatpickr-day { color: #e8e8e8 !important; }
.flatpickr-day:hover { background: #2e2e2e !important; border-color: transparent !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}
.flatpickr-day.today { border-color: #7c3aed !important; }
.flatpickr-day.flatpickr-disabled { color: #4a4a4a !important; }
.flatpickr-months { color: #e8e8e8 !important; background: #212121 !important; border-radius: 8px 8px 0 0; }
.flatpickr-month, .flatpickr-current-month { color: #e8e8e8 !important; fill: #e8e8e8 !important; }
.flatpickr-weekday { color: #888888 !important; background: #212121 !important; }
.flatpickr-weekdays { background: #212121 !important; }
.flatpickr-innerContainer { background: #212121 !important; }
.flatpickr-rContainer { background: #212121 !important; }
.flatpickr-prev-month, .flatpickr-next-month { color: #e8e8e8 !important; fill: #e8e8e8 !important; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { background: #2e2e2e !important; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: #e8e8e8 !important; }
.numInputWrapper span.arrowUp:after { border-bottom-color: #e8e8e8 !important; }
.numInputWrapper span.arrowDown:after { border-top-color: #e8e8e8 !important; }
.flatpickr-current-month input.cur-year { color: #e8e8e8 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #212121 !important; color: #e8e8e8 !important;
}

/* ─── Priority Colors ────────────────────────────────────────────────────────── */
.priority-urgent { color: #f87171; }  /* red-400  */
.priority-high   { color: #fb923c; }  /* orange-400 */
.priority-normal { color: #60a5fa; }  /* blue-400 */
.priority-low    { color: #6b7280; }  /* gray-500 */

/* ─── Drag & Drop ────────────────────────────────────────────────────────────── */
.sortable-ghost {
  opacity: 0.3;
  background: rgba(124,58,237,0.12) !important;
  border: 2px dashed #7c3aed !important;
  border-radius: 6px;
}
.sortable-drag { opacity: 0.9; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }

/* ─── Task Row ───────────────────────────────────────────────────────────────── */
.task-row { transition: background 0.1s; }
.task-row:hover { background: #252525; }

/* ─── Inline Edit ────────────────────────────────────────────────────────────── */
[contenteditable]:focus { outline: none; }
[contenteditable]:empty:before {
  content: attr(data-placeholder);
  color: #666666;
  pointer-events: none;
}

/* ─── Completion Ring ────────────────────────────────────────────────────────── */
.completion-ring {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #333333;
  background: conic-gradient(#7c3aed var(--pct), #2a2a2a var(--pct));
  transition: background 0.3s;
}

/* ─── Status Badge ───────────────────────────────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
}

/* ─── Modal Transitions ──────────────────────────────────────────────────────── */
.modal-backdrop { animation: fadeIn 0.15s ease-out; }
.modal-panel    { animation: slideIn 0.2s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ─── Sidebar Tree ───────────────────────────────────────────────────────────── */
.sidebar-list-item { transition: background 0.1s, color 0.1s; }
.sidebar-list-item.active {
  background: rgba(124,58,237,0.18);
  color: #a78bfa;
}
.sidebar-list-item:hover:not(.active) { background: #222222; }

/* ─── Tooltip ────────────────────────────────────────────────────────────────── */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #0a0a0a; color: #e8e8e8;
  border: 1px solid #2e2e2e;
  font-size: 11px; padding: 4px 8px; border-radius: 4px;
  white-space: nowrap; z-index: 200; pointer-events: none;
}

/* ─── Form controls ──────────────────────────────────────────────────────────── */
input[type="range"]  { accent-color: #7c3aed; }
input[type="color"]  { cursor: pointer; border-radius: 4px; padding: 0; border: none; background: none; }

/* Select element dark styling */
select {
  color-scheme: dark;
}

/* ─── Subtask Indent ─────────────────────────────────────────────────────────── */
.subtask-row { border-left: 2px solid #2e2e2e; }
.subtask-row:hover { background: #252525; }

/* ─── Text contrast helpers ──────────────────────────────────────────────────── */
/* Ensures all plain text has strong contrast against dark background */
.text-body    { color: #e8e8e8; }
.text-dim     { color: #aaaaaa; }
.text-faint   { color: #666666; }