/* status.css */
/* Unified status vocabulary and affordance rules for Waroenk Kito.
   Layers after app.css to enforce canonical colors and interactive vs static states. */

/* ---- 1. Canonical Status Vocabulary (Data-State Driven) ----------------- */
/* Overrides existing .pill and .chip to ensure 100% color consistency.
   States: belum (red), tinjau (blue), ulang (amber), diterima (green), terlambat (crit). */

.pill, .chip, .count-chip, .task-card, .chat-row {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-state="belum"]     { --st-bg: var(--bad-bg);  --st-fg: var(--bad);  --st-ic: #c8321e; }
[data-state="tinjau"]    { --st-bg: var(--info-bg); --st-fg: var(--info); --st-ic: #2d6e9e; }
[data-state="ulang"]     { --st-bg: var(--warn-bg); --st-fg: var(--warn); --st-ic: #e48421; }
[data-state="diterima"]  { --st-bg: var(--good-bg); --st-fg: var(--good); --st-ic: #3f8f4a; }
[data-state="terlambat"] { --st-bg: var(--crit-bg); --st-fg: var(--crit); --st-ic: #8a1c12; }

.pill, .chip {
  background-color: var(--st-bg) !important;
  color: var(--st-fg) !important;
}

.pill .ic, .chip .ic {
  color: var(--st-ic);
}

/* ---- 2. Affordance Rules: Static vs Interactive ------------------------- */

/* PILL = Static. No hover, no pointer. Used for status labels. */
.pill {
  cursor: default;
  pointer-events: none;
  border: 1px solid rgba(0,0,0,0.05);
}

/* CHIP = Interactive. Has hover/active states. Used for filters/actions. */
.chip {
  cursor: pointer;
  pointer-events: auto;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.chip:active {
  filter: brightness(0.95);
  transform: translateY(1px);
}

/* ---- 3. Task Card & Row Integration ------------------------------------ */

/* Apply the canonical left-border to all task-related containers */
.task-card, .card-task, .card-cycle {
  border-left: 4px solid var(--st-fg, var(--line)) !important;
}

/* Overdue (terlambat) cards get a warm warning tint across the whole surface */
[data-state="terlambat"].task-card,
[data-state="terlambat"].card-task,
[data-state="terlambat"].card-cycle {
  background-color: var(--crit-bg) !important;
}

/* ---- 4. Scannability at Scale (Reviewer Worklist) ----------------------- */

/* Task Avatar tints in the worklist */
.task-avatar[data-top] {
  background-color: var(--st-bg) !important;
  color: var(--st-fg) !important;
  border: 2px solid var(--st-fg);
}

/* Count chips (the small numeric indicators) */
.count-chip {
  background-color: var(--st-bg) !important;
  color: var(--st-fg) !important;
  border: 1px solid var(--st-fg);
}

/* ---- 5. Participant Context Fixes --------------------------------------- */

/* Ensure the "needs-me" highlight uses the accent color but respects status */
.needs-me {
  box-shadow: 0 0 0 2px var(--accent) !important;
}

/* Legend strip polish: ensure it's always readable in the drawer or feed */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  padding: var(--pad-md);
  background: var(--panel2);
  border-radius: var(--r-md);
  margin: var(--pad-md) 0;
}

/* ---- 6. Admin/Owner Scannability ---------------------------------------- */
/* Apply chips to raw database IDs or status strings in admin tables */
.admin-body td .pill, 
.admin-body td .chip {
  font-size: var(--sz-xs);
  padding: 2px 8px;
}

/* Ensure the "Remove Batch" or destructive actions are distinct from status */
.btn-ghost.danger {
  background-color: var(--bad-bg);
  color: var(--bad);
  border-color: var(--bad);
}