/* ═══ BADGES ═══ */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;border-radius:20px;font-weight:500;white-space:nowrap}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.badge-emerald{background:var(--em-bg);color:var(--emerald);border:1px solid rgba(16,160,106,.25)}.badge-emerald::before{background:var(--emerald)}
.badge-ruby{background:var(--ru-bg);color:var(--ruby);border:1px solid rgba(214,59,59,.25)}.badge-ruby::before{background:var(--ruby)}
.badge-amber{background:var(--am-bg);color:var(--amber);border:1px solid rgba(217,119,6,.25)}.badge-amber::before{background:var(--amber)}
.badge-azure{background:var(--az-bg);color:var(--azure);border:1px solid rgba(37,99,235,.25)}.badge-azure::before{background:var(--azure)}
.badge-gold{background:var(--gold-bg);color:#92700E;border:1px solid rgba(212,168,67,.3)}.badge-gold::before{background:var(--gold)}
/* Budget state badges */
.badge-draft{background:#F1F5F9;color:#64748B;border:1px solid #CBD5E1}.badge-draft::before{background:#94A3B8}
.badge-preliminary{background:var(--sk-bg);color:var(--sky);border:1px solid rgba(14,165,233,.25)}.badge-preliminary::before{background:var(--sky)}
.badge-allocated{background:var(--az-bg);color:var(--azure);border:1px solid rgba(37,99,235,.25)}.badge-allocated::before{background:var(--azure)}
.badge-committed{background:var(--vi-bg);color:var(--violet);border:1px solid rgba(124,58,237,.25)}.badge-committed::before{background:var(--violet)}
.badge-pending{background:var(--am-bg);color:var(--amber);border:1px solid rgba(217,119,6,.25)}.badge-pending::before{background:var(--amber)}
.badge-approved{background:var(--em-bg);color:var(--emerald);border:1px solid rgba(16,160,106,.25)}.badge-approved::before{background:var(--emerald)}
.badge-rejected{background:var(--ru-bg);color:var(--ruby);border:1px solid rgba(214,59,59,.25)}.badge-rejected::before{background:var(--ruby)}
.badge-overspend{background:var(--ru-bg);color:var(--ruby);border:1px solid rgba(214,59,59,.4);font-weight:700}.badge-overspend::before{background:var(--ruby)}

/* ═══ PROGRESS BARS ═══ */
.prog-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-top:6px}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:3px;transition:width .5s}
.prog-fill.danger{background:linear-gradient(90deg,var(--ruby),#ef4444)}
.prog-fill.success{background:linear-gradient(90deg,var(--emerald),#34d399)}
.prog-fill.amber{background:linear-gradient(90deg,var(--amber),#fbbf24)}
.prog-track{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;border:1px solid var(--border)}
.prog-track.slim{height:4px}
.prog-track .prog-fill{border-radius:4px}
.prog-fill.gold{background:linear-gradient(90deg,var(--gold),var(--gold2))}
.prog-fill.emerald{background:linear-gradient(90deg,#059669,#34d399)}
.prog-fill.ruby{background:linear-gradient(90deg,#dc2626,#f87171)}
.prog-fill.violet{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.prog-fill.azure{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.stacked-bar{height:14px;border-radius:7px;overflow:hidden;display:flex;background:var(--bg);border:1px solid var(--border)}
.stacked-seg{height:100%;transition:width .6s ease}

/* ═══ KANBAN ═══ */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kanban-col{background:var(--bg);border-radius:var(--radius);padding:14px;min-height:200px}
.kanban-col-head{font-size:13px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.kanban-col-count{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1px 7px;font-size:11px;color:var(--muted);font-weight:500}
.task-card{background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border);padding:12px;margin-bottom:8px;cursor:pointer;transition:all .15s;box-shadow:var(--shadow)}
.task-blocked{border-color:rgba(214,59,59,.3);background:#FFFAFA;opacity:.85}
.task-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.task-card-name{font-size:13px;font-weight:500;color:var(--ink);line-height:1.4;flex:1}
.task-card-name.done-text{text-decoration:line-through;color:var(--muted)}
.task-card-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;align-items:center}
.task-check{width:14px;height:14px;cursor:pointer;accent-color:var(--emerald);flex-shrink:0;margin-top:2px}
.task-priority{font-size:10px;padding:2px 7px;border-radius:10px;font-weight:600}
.task-priority.p-high{background:var(--ru-bg);color:var(--ruby)}
.task-priority.p-med{background:var(--am-bg);color:var(--amber)}
.task-priority.p-low{background:var(--az-bg);color:var(--azure)}
.task-due{font-size:10px;color:var(--muted)}.task-due.overdue{color:var(--ruby);font-weight:600}

/* ═══ EVENTS GRID ═══ */
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.event-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:all .2s}
.event-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.event-card-banner{height:80px;display:flex;align-items:flex-end;padding:12px 16px}
.event-card-type{font-size:11px;background:rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:3px 10px;font-weight:500;backdrop-filter:blur(4px)}
.event-card-body{padding:16px}
.event-card-name{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--ink);margin-bottom:6px}
.event-card-date{font-size:12px;color:var(--muted);margin-bottom:10px}
.event-card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.meta-pill{font-size:11px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:3px 10px;color:var(--slate)}
.meta-pill.status-planning{background:var(--am-bg);color:var(--amber);border-color:rgba(217,119,6,.2)}
.meta-pill.status-active{background:var(--em-bg);color:var(--emerald);border-color:rgba(16,160,106,.2)}
.meta-pill.status-complete{background:var(--az-bg);color:var(--azure);border-color:rgba(37,99,235,.2)}
.event-progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:6px}
.event-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:2px;transition:width .5s}
.event-card-footer{padding:12px 16px;background:var(--bg);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}

/* ═══ TIMELINE ═══ */
.timeline-list{display:flex;flex-direction:column;gap:0}
.tl-row{display:grid;grid-template-columns:120px 24px 1fr;gap:0 12px;margin-bottom:0}
.tl-date-cell{text-align:right;padding-top:1px;font-size:12px;color:var(--muted)}
.tl-spine{display:flex;flex-direction:column;align-items:center}
.tl-node{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:2px;z-index:1}
.tl-vline{flex:1;width:2px;background:var(--border);min-height:24px}
.done-node{background:var(--emerald);box-shadow:0 0 0 3px var(--em-bg)}
.current-node{background:var(--gold);box-shadow:0 0 0 3px var(--gold-bg);animation:blink2 1.5s infinite}
.future-node{background:var(--border2)}
@keyframes blink2{0%,100%{box-shadow:0 0 0 3px var(--gold-bg)}50%{box-shadow:0 0 0 6px rgba(212,168,67,.1)}}
.tl-content-cell{padding-bottom:20px}
.tl-ms-title{font-size:14px;font-weight:600;color:var(--ink)}
.tl-ms-sub{font-size:12px;color:var(--muted);margin-top:2px}
.tl-ms-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.tl-ms-tag{font-size:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:2px 8px;color:var(--slate)}

/* ═══ VENDORS ═══ */
.vendor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.vendor-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);padding:16px;box-shadow:var(--shadow);transition:all .2s}
.vendor-card:hover{box-shadow:var(--shadow-lg)}
.vc-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.vc-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.vc-name{font-size:14px;font-weight:600;color:var(--ink)}
.vc-cat{font-size:11px;color:var(--muted)}
.vc-details{display:flex;flex-direction:column;gap:4px}
.vc-detail{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.vc-detail .v{color:var(--ink);font-weight:500}

/* ═══ BUDGET (SIMPLE) ═══ */
.budget-row{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1.5fr;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);align-items:center}
.budget-row.header-row{background:var(--bg);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.budget-cell{font-size:13px}
.bpbar{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;position:relative}
.bpfill{height:100%;border-radius:3px;transition:width .5s}
.bpfill.danger{background:var(--ruby)}
.bpfill.warn{background:var(--amber)}
.bpfill-committed{position:absolute;top:0;height:100%;border-radius:3px;opacity:.35;pointer-events:none}


/* ═══ WBS — Work Breakdown Structure ═══ */
.wbs-tree{display:flex;flex-direction:column;gap:2px}
.wbs-row{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:9px 12px 9px 0;
  transition:background .15s,border-color .15s;
  min-height:44px;
}
.wbs-row:hover{background:var(--bg);border-color:var(--border2)}
.wbs-row-actions{opacity:0;transition:opacity .15s}
.wbs-row:hover .wbs-row-actions{opacity:1}
.wbs-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;cursor:pointer}

/* ── Task notes button & inline drawer ──────────────────────────────────── */
.task-notes-btn{
  background:none;border:none;cursor:pointer;
  font-size:11px;color:var(--muted);padding:1px 4px;border-radius:4px;
  margin-left:auto;flex-shrink:0;line-height:1;
  transition:background .15s,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.task-notes-btn:hover{ background:var(--bg); color:var(--ink); }
.task-notes-btn.has-note{ color:var(--azure); font-weight:600; }

.task-notes-drawer{
  margin-top:8px;
  border-top:1px solid var(--border);
  padding-top:8px;
  animation:notesSlideDown .15s ease;
  /* Prevent parent draggable from blocking interaction with child elements */
  touch-action:auto;
  user-select:text;
  -webkit-user-select:text;
}
@keyframes notesSlideDown{
  from{ opacity:0; transform:translateY(-4px); }
  to{   opacity:1; transform:translateY(0);    }
}
.task-notes-input{
  width:100%;
  font-size:12px;
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 10px;
  resize:vertical;
  min-height:60px;
  font-family:inherit;
  line-height:1.5;
  box-sizing:border-box;
  outline:none;
  transition:border-color .15s;
  /* Ensure text remains selectable/editable inside a draggable card */
  user-select:text;
  -webkit-user-select:text;
  touch-action:auto;
  cursor:text;
}
.task-notes-input:focus{ border-color:var(--azure); }
.task-notes-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
  gap:8px;
}
.task-notes-meta{
  font-size:10px;
  color:var(--muted);
  font-style:italic;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ── Bulk task select mode ──────────────────────────────────── */
.task-card.task-selected {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  opacity: .95;
}

#task-bulk-bar {
  position: sticky;
  bottom: 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  z-index: 200;
  margin: 16px 0 0;
  flex-wrap: wrap;
}
/* ── Optimistic UI — pending state indicator ──────────────────── */
.task-card.task-pending {
  opacity: 0.72;
  position: relative;
  pointer-events: none; /* prevent double-click during sync */
}
.task-card.task-pending::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber, #D97706);
  animation: ef-pulse 1s ease-in-out infinite;
}
@keyframes ef-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.3; transform: scale(0.7); }
}