/*  ================================================================
    TaskTactics — Tailwind Design Tokens & Component Classes
    Extracted from plansmith-B-v2.html reference template.
    Single source of truth for all Django templates.
    ================================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --paper-2: #f7f7f5;
  --paper-3: #f0f0ec;
  --line: #e8e7e3;
  --line-2: #d6d4cf;
  --muted: #6b7280;
  --muted-soft: #9ca3af;

  --accent: #0f766e;
  --accent-soft: #f0fdfa;
  --accent-fg: #ffffff;

  --ring: rgba(15,23,42,0.04);
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
}
.dark {
  --ink: #fafaf9;
  --paper: #0e0e0c;
  --paper-2: #161613;
  --paper-3: #1f1f1c;
  --line: #2a2a26;
  --line-2: #3a3a35;
  --muted: #a1a1aa;
  --muted-soft: #71717a;

  --accent: #2dd4bf;
  --accent-soft: #042f2e;
  --accent-fg: #042f2e;

  --ring: rgba(255,255,255,0.04);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { background: var(--paper-2); }
body {
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  letter-spacing: -0.005em;
  font-size: 0.9rem;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.mono { font-family:'JetBrains Mono',monospace; font-size:0.78rem; font-feature-settings:'tnum'; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Lucide icon sizing ---------- */
[data-lucide] { width:16px; height:16px; stroke-width:1.75; flex-shrink:0; }
.ic-sm [data-lucide] { width:13px; height:13px; }
.ic-lg [data-lucide] { width:20px; height:20px; }
.ic-xl [data-lucide] { width:32px; height:32px; }

/* ---------- App shell ---------- */
.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
@media (min-width: 1024px) {
  .app-grid { grid-template-columns: 240px 1fr; }
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 40;
}
@media (max-width: 1023.98px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 30px rgba(0,0,0,0.15);
  }
  .sidebar.open { transform: translateX(0); }
}

.backdrop {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(10,10,10,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.backdrop.open { opacity: 1; pointer-events: auto; }

.brand-row { display:flex; align-items:center; gap:10px; padding:6px 8px 4px; }
.brand-mark {
  width: 30px; height: 30px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.92rem;
}
.brand-name { font-weight:600; letter-spacing:-0.015em; }
.brand-tag { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color: var(--muted-soft); }

.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 0.88rem; color: var(--muted); cursor: pointer;
  background: transparent; border: 0; width: 100%; text-align: left;
  transition: background-color .12s, color .12s;
  font-weight: 500;
  text-decoration: none;
}
.nav-link:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; }
.nav-link.active { background: var(--ink); color: var(--paper); }
.nav-link.active [data-lucide] { stroke: var(--paper); }
.nav-section { font-family:'JetBrains Mono',monospace; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.14em; color: var(--muted-soft); padding:18px 10px 8px; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
@media (min-width: 1024px) { .topbar { padding: 10px 24px; } }
.topbar-crumb { flex: 1; font-family:'JetBrains Mono',monospace; font-size:0.72rem; color: var(--muted); }

/* ---------- Page header ---------- */
.page-h1 { font-size:1.75rem; line-height:1.05; letter-spacing:-0.025em; font-weight:600; }
@media (min-width: 768px) { .page-h1 { font-size:2.2rem; line-height:1; letter-spacing:-0.03em; } }
.crumb { font-family:'JetBrains Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); margin-bottom:8px; }
.lede { color: var(--muted); font-size:0.92rem; margin-top:8px; max-width:60ch; line-height:1.5; }

/* ---------- Cards ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px var(--ring);
}

/* ---------- Stat cards ---------- */
.stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  position: relative;
  transition: border-color .15s;
}
.stat-card:hover { border-color: var(--line-2); }
.stat-card .label { font-family:'JetBrains Mono',monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); display:flex; align-items:center; gap:6px; }
.stat-card .num { font-size:2rem; line-height:1; margin-top:10px; font-weight:600; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:4px; }
.stat-card .num small { font-size:0.85rem; color: var(--muted); font-weight:500; }
.stat-card .delta { font-size:0.74rem; color: var(--muted); margin-top:6px; font-family:'JetBrains Mono',monospace; }
.stat-card .delta.up { color: #16a34a; }
.stat-card .delta.dn { color: #dc2626; }
.stat-card .delta.up::before { content:'↗ '; }
.stat-card .delta.dn::before { content:'↘ '; }
.stat-card.featured {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.stat-card.featured .label,
.stat-card.featured .delta { color: rgba(255,255,255,0.85); }

/* ---------- State badges ---------- */
.state {
  display:inline-flex; align-items:center; gap:5px;
  font-family:'JetBrains Mono',monospace; font-size:0.66rem;
  text-transform:uppercase; letter-spacing:0.06em;
  padding:3px 8px; border-radius:999px; white-space:nowrap;
  font-weight:500;
  border: 1px solid;
}
.state-todo     { background: var(--paper-2); color: var(--muted); border-color: var(--line); }
.state-progress { background: rgba(29,78,216,0.07); color: #1d4ed8; border-color: rgba(29,78,216,0.20); }
.state-review   { background: rgba(217,119,6,0.07); color: #b45309; border-color: rgba(217,119,6,0.20); }
.state-blocked  { background: rgba(220,38,38,0.07); color: #b91c1c; border-color: rgba(220,38,38,0.22); }
.state-done     { background: rgba(15,118,110,0.07); color: var(--accent); border-color: rgba(15,118,110,0.22); }

.priority { font-family:'JetBrains Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:500; }
.priority-low { color: var(--muted); }
.priority-medium { color: #d97706; }
.priority-high { color: #dc2626; }
.priority-urgent { color: #be123c; }

/* ---------- Progress bar ---------- */
.pbar { position:relative; height:5px; background: var(--paper-3); overflow:hidden; min-width:70px; border-radius:999px; }
.pbar > span { display:block; height:100%; background: var(--ink); border-radius:999px; transition: width .25s; }
.pbar.delayed > span { background: #dc2626; }
.pbar.ok > span { background: var(--accent); }
.bar-line { display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--muted); }
.bar-line .pct { min-width:32px; text-align:right; color: var(--ink); font-feature-settings:'tnum'; }

/* ---------- Delta pill ---------- */
.delta-pill { display:inline-flex; align-items:center; font-family:'JetBrains Mono',monospace; font-size:0.7rem; padding:2px 8px; border-radius:999px; font-weight:500; border:1px solid; }
.delta-pill.behind  { color:#b91c1c; border-color: rgba(220,38,38,0.22); background: rgba(220,38,38,0.06); }
.delta-pill.ahead   { color: var(--accent); border-color: rgba(15,118,110,0.22); background: rgba(15,118,110,0.06); }
.delta-pill.ontrack { color: var(--muted); border-color: var(--line); background: var(--paper-2); }
.offset-cell { display:flex; flex-direction:column; gap:3px; }
.offset-cell .lbl { font-size:0.66rem; color: var(--muted-soft); font-family:'JetBrains Mono',monospace; }

/* ---------- Filter chips ---------- */
.fchip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:0.72rem; background: var(--paper); color: var(--ink); border:1px solid var(--line); cursor:pointer; transition: all .12s; font-weight:500; text-decoration:none; }
.fchip:hover { border-color: var(--line-2); text-decoration:none; }
.fchip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fchip .opacity-60 { opacity: 0.6; }

/* ---------- Tables ---------- */
.t-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t { width:100%; border-collapse:separate; border-spacing:0; font-size:0.86rem; }
.t thead th { font-family:'JetBrains Mono',monospace; font-weight:500; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--muted); padding:10px 16px; background: var(--paper-2); border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.t tbody td { padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.t tbody tr:last-child td { border-bottom:0; }
.t tbody tr:hover { background: var(--paper-2); }
.t tbody tr.cursor-pointer { cursor: pointer; }
@media (max-width: 767.98px) {
  .t .hide-mobile { display: none; }
  .t thead th, .t tbody td { padding: 10px 12px; }
}

/* ---------- Forms ---------- */
.field-label { font-family:'JetBrains Mono',monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--muted); margin-bottom:5px; display:block; font-weight:500; }
.form-section { font-family:'JetBrains Mono',monospace; font-size:0.66rem; text-transform:uppercase; letter-spacing:0.12em; color: var(--muted); margin-top:20px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--line); font-weight:500; }
.form-section.first { margin-top:0; }

.fb-input {
  width:100%;
  background: var(--paper);
  border:1px solid var(--line-2);
  color: var(--ink);
  font-size:0.88rem;
  border-radius: var(--r-sm);
  padding:7px 12px;
  font-family:inherit;
  transition: border-color .12s, box-shadow .12s;
}
.fb-input:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,118,110,0.10); }
.fb-input::placeholder { color: var(--muted-soft); }
.fb-textarea { min-height:80px; resize: vertical; }

select.fb-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius: var(--r-sm); font-size:0.85rem; font-weight:500; cursor:pointer; border:1px solid transparent; transition: all .12s; line-height:1.4; white-space: nowrap; text-decoration:none; }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); text-decoration:none; }
.btn-outline { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink); text-decoration:none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: transparent; }
.btn-ghost:hover { background: var(--paper-2); }
.btn-danger { background: rgba(220,38,38,0.07); color: #b91c1c; border-color: rgba(220,38,38,0.22); }
.btn-danger:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-icon { display:inline-grid; place-items:center; width:34px; height:34px; border-radius: var(--r-sm); color: var(--muted); background:transparent; border:0; cursor:pointer; position: relative; }
.btn-icon:hover { background: var(--paper-2); color: var(--ink); }

/* ---------- Subscriber / member tags ---------- */
.sub-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  background: var(--paper-2); border:1px solid var(--line); color: var(--ink);
}
.sub-tag .x { cursor:pointer; opacity:0.5; padding: 0 2px; }
.sub-tag .x:hover { opacity:1; color:#dc2626; }

/* ---------- Tree expand ---------- */
.expand-btn { display:inline-grid; place-items:center; width:20px; height:20px; color: var(--muted); background:transparent; border:0; cursor:pointer; transition:transform .12s, color .12s; flex-shrink:0; margin-right:6px; border-radius:4px; }
.expand-btn:hover { color: var(--ink); background: var(--paper-2); }
.expand-btn.open { transform:rotate(90deg); color: var(--ink); }
.has-sub-indicator {
  display:inline-flex; align-items:center; gap:4px;
  font-family:'JetBrains Mono',monospace; font-size:0.62rem;
  color: var(--accent); margin-left:8px;
  padding:1px 7px; border:1px solid rgba(15,118,110,0.25);
  border-radius:999px; text-transform:uppercase; letter-spacing:0.05em;
  background: var(--accent-soft);
  font-weight: 500;
}

/* ---------- Tabs ---------- */
.tab-btn { padding:9px 16px; font-size:0.86rem; font-weight:500; border-bottom:2px solid transparent; color: var(--muted); cursor:pointer; background:transparent; border-left:0; border-right:0; border-top:0; text-decoration:none; }
.tab-btn:hover { color: var(--ink); text-decoration:none; }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--accent); }
.tab-count { margin-left:6px; padding:1px 7px; border-radius:999px; font-size:0.7rem; background: var(--paper-2); border:1px solid var(--line); font-family:'JetBrains Mono',monospace; }

/* ---------- Comments / timeline ---------- */
.comment { display:flex; gap:12px; padding:14px 0; border-bottom:1px dashed var(--line); }
.comment:last-child { border-bottom:0; }
.comment.reply { margin-left:36px; }
.av { display:inline-grid; place-items:center; border-radius:50%; color:white; font-weight:600; flex-shrink:0; font-family:'JetBrains Mono',monospace; }
.av-md { width:30px; height:30px; font-size:0.7rem; }
.av-xl { width:88px; height:88px; font-size:1.5rem; }
.av-bw { background: var(--ink); color: var(--paper); }
.av-accent { background: var(--accent); color: var(--accent-fg); }

.tl { padding:4px 0; position:relative; }
.tl::before { content:''; position:absolute; left:11px; top:8px; bottom:8px; width:1px; background: var(--line-2); }
.tl-item { display:flex; gap:14px; padding:8px 0; position:relative; }
.tl-item .dot { width:22px; height:22px; border-radius:6px; background: var(--paper); border:1px solid var(--line); display:grid; place-items:center; flex-shrink:0; z-index:1; color: var(--muted); }

/* ---------- Attachments / dropzone ---------- */
.att { display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius: var(--r-sm); font-size:0.85rem; background: var(--paper); }
.dropzone { border:1.5px dashed var(--line-2); border-radius: var(--r-md); padding:28px; text-align:center; color: var(--muted); background: var(--paper-2); cursor:pointer; transition: border-color .12s, color .12s; }
.dropzone:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Notifications ---------- */
.notif { display:flex; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; align-items:flex-start; transition: background .12s; }
.notif:hover { background: var(--paper-2); }
.notif .ico { width:32px; height:32px; border-radius: var(--r-sm); background: var(--paper-2); display:grid; place-items:center; flex-shrink:0; color: var(--muted); border:1px solid var(--line); }
.notif.unread .ico { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.notif .udot { width:6px; height:6px; border-radius:50%; background: var(--accent); margin-top:14px; opacity:0; flex-shrink:0; }
.notif.unread .udot { opacity:1; }

/* ---------- Toggle ---------- */
.toggle { position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle .slider { position:absolute; cursor:pointer; inset:0; background: var(--line-2); border-radius:999px; transition:0.2s; }
.toggle .slider::before { content:''; position:absolute; height:16px; width:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.toggle input:checked + .slider { background: var(--accent); }
.toggle input:checked + .slider::before { transform:translateX(16px); }

/* ---------- Pagination ---------- */
.fb-pag { display:inline-flex; }
.fb-pag button { padding:5px 12px; border:1px solid var(--line); background: var(--paper); color: var(--ink); font-size:0.8rem; cursor:pointer; font-family:'JetBrains Mono',monospace; }
.fb-pag button:first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.fb-pag button:last-child { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.fb-pag button + button { border-left:0; }
.fb-pag button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fb-pag button:disabled { opacity:0.4; cursor:not-allowed; }

/* ---------- Profile head ---------- */
.profile-head {
  background: var(--paper);
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  padding:24px;
  display:flex; gap:20px; align-items:center;
  margin-bottom:18px;
  flex-wrap: wrap;
}

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

/* ---------- Frappe Gantt theme ---------- */
.gantt .bar { fill: var(--ink) !important; }
.gantt .bar-progress { fill: var(--accent) !important; }
.dark .gantt .grid-row { fill: #161613; }
.dark .gantt .grid-row:nth-child(even) { fill: #1f1f1c; }
.dark .gantt .row-line, .dark .gantt .tick { stroke: #2a2a26; }
.dark .gantt-container .upper-text, .dark .gantt-container .lower-text { fill: var(--muted); }

/* ---------- Mobile ---------- */
@media (max-width: 767.98px) {
  .hide-mobile { display: none !important; }
  .stat-card { padding: 12px 14px; }
  .stat-card .num { font-size: 1.7rem; }
}