/* ============================================================
   PrairieOps — boards.css
   Task cards, priority colours, timers, urgent banner
   ============================================================ */

/* ── Urgent Banner ──────────────────────────────────────────── */
.urgent-banner {
  background: var(--urgent-bg);
  border: 1px solid var(--urgent-border);
  border-left: 3px solid var(--urgent);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--urgent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.urgent-banner .urgent-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--urgent);
  flex-shrink: 0;
  animation: pulse 1.4s ease-in-out infinite;
}

/* ── Priority Section Headers ───────────────────────────────── */
.priority-section { margin-bottom: var(--sp-4); }

.priority-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}

.priority-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.priority-label.urgent   { color: var(--urgent); }
.priority-label.deadline { color: var(--deadline); }
.priority-label.eod      { color: var(--eod); }
.priority-label.eow      { color: var(--eow); }
.priority-label.backlog  { color: var(--backlog); }

.priority-count {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}

/* ── Collapsible Priority Sections ─────────────────────────── */
.priority-header.priority-toggle {
  cursor: pointer;
  user-select: none;
}
.priority-header.priority-toggle:hover { opacity: 0.85; }

.priority-chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  line-height: 1;
}
.priority-section.collapsed .priority-chevron {
  transform: rotate(-90deg);
}
.priority-section.collapsed .task-grid {
  display: none;
}

/* ── Task Card List ─────────────────────────────────────────── */
.task-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Task Card — compact row layout ────────────────────────── */
/* Phase 4 (2026-05-24): swapped bg to var(--bg-surface) to match approval */
/* queue cards. Improves outdoor readability + visual consistency.         */
.task-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  overflow: hidden;
}
.task-card:hover  { background: var(--bg-elevated); }
.task-card:active { background: var(--bg-hover); }

/* Left stripe disabled — priority expressed via full-card border only */
.task-card::before { display: none; }

/* Priority border — full outline.                                        */
/* Opacities bumped +25% total from pre-Phase-4. Outline now reads boldly  */
/* against the lighter gray card bg even in bright outdoor conditions.    */
.task-card.urgent   { background: var(--bg-surface); border-color: rgba(224, 53, 53, 0.65); }
.task-card.deadline { border-color: rgba(192, 120, 56, 0.60); }
.task-card.eod      { border-color: rgba(196, 144, 96, 0.55); }
.task-card.eow      { border-color: rgba(91, 141, 217, 0.55); }

/* Scoped: lift muted text inside cards now that bg is lighter.           */
/* --text-muted (#8b949e) loses contrast on --bg-surface (#1c1c1c).       */
/* Bump ALL muted-text descendants to --text-secondary (#cdd5de).         */
.task-card .card-footer,
.task-card .card-meta-row,
.task-card .meta-icon,
.task-card .meta-label,
.task-card .card-cutoff,
.task-card .card-submitted-by,
.task-card .card-status-indicator {
  color: var(--text-secondary);
}
/* Icons keep a slight de-emphasis but no longer below readability floor. */
.task-card .meta-icon { opacity: 0.85; }

/* Value text (the answer after "Assigned:" / "Equipment:" / "Location:"  */
/* / "By …") rendered in --text-primary (near-white) for max readability. */
.task-card .meta-value,
.task-card .card-submitted-by span {
  color: var(--text-primary);
  font-weight: 600;
}

/* Urgent hover — lift without red fill */
.task-card.urgent:hover {
  background: var(--bg-elevated);
  box-shadow: 0 4px 16px rgba(0,0,0,0.55), 0 0 0 1px rgba(224,53,53,0.18);
}

/* Overdue / near-deadline */
.task-card.overdue       { border-color: rgba(224, 53, 53, 0.50); }
.task-card.near-deadline { border-color: rgba(192, 112, 56, 0.48); }

/* Claimed / in-progress — status border (lower priority than explicit priority rules) */
.task-card.claimed     { border-color: rgba(91, 141, 217, 0.28); }
.task-card.in-progress { border-color: rgba(192, 112, 56, 0.32); }

/* Priority always wins — explicit overrides for priority + status combos */
.task-card.urgent.claimed,
.task-card.urgent.in-progress   { border-color: rgba(224, 53, 53, 0.40); }
.task-card.deadline.claimed,
.task-card.deadline.in-progress { border-color: rgba(192, 120, 56, 0.35); }
.task-card.eod.claimed,
.task-card.eod.in-progress      { border-color: rgba(196, 144, 96, 0.30); }
.task-card.eow.claimed,
.task-card.eow.in-progress      { border-color: rgba(91, 141, 217, 0.28); }

/* Mine — subtle bronze outer ring layered over existing shadow */
.task-card.mine { box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 0 0 1px rgba(196,144,96,0.28); }

/* ── Card top row: title + priority badge ───────────────────── */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.card-title {
  font-size: 16px;          /* Phase 4 (2026-05-24): 14 → 15 → 16 — title now stands out clearly */
  font-weight: 700;         /* heavier than value text (600) so hierarchy reads at a glance */
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1;
  letter-spacing: -0.01em;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-priority-badge { flex-shrink: 0; }

/* "YOU" pill removed Phase 4 (2026-05-24).                              */
/* Replaced by "Claimed: me" indicator in the card footer (see below).  */

/* ── Card bottom row: meta inline ───────────────────────────── */
.card-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.card-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.meta-icon {
  color: var(--text-muted);
  flex-shrink: 0;
  opacity: 0.7;
}
.meta-value { color: var(--text-secondary); font-weight: 500; }
.meta-label { color: var(--text-muted); }

/* ── Timer — compact inline ─────────────────────────────────── */
.card-timer {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--deadline);
  letter-spacing: 0.02em;
}
.card-timer.near    { color: var(--urgent); animation: pulse 1.2s ease-in-out infinite; }
.card-timer.expired { color: var(--urgent); }

.card-cutoff {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Weather flag — minimal */
.weather-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--eow);
  letter-spacing: 0.02em;
}

.card-boards { display: none; } /* hidden on feed, shown in detail */

/* ── Card Actions — compact, no divider ─────────────────────── */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── Card Footer ─────────────────────────────────────────────── */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 2px;
}
.card-submitted-by {
  font-size: 13px;
  color: var(--text-muted);
}
.card-submitted-by span { color: var(--text-secondary); font-weight: 500; }

/* Phase 4: footer right group — claim indicator + status pill.            */
.card-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.card-claimed {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
.card-claimed span {
  color: var(--text-primary);
  font-weight: 600;
}

/* ── Status dot ──────────────────────────────────────────────── */
.card-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.live     { background: var(--green-300); }
.status-dot.claimed  { background: var(--eow); }
.status-dot.progress { background: var(--deadline); }
.status-dot.signoff  { background: var(--eod); }

/* ── Queue Cards (Approval Queues) ──────────────────────────── */
.queue-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--transition-fast);
}
.queue-card:hover { border-color: var(--text-muted); }

.queue-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.queue-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.queue-card-meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.queue-card-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ── History Log Rows ───────────────────────────────────────── */
.history-table {
  width: 100%;
  border-collapse: collapse;
}
.history-table th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.history-table td {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.history-table tr:hover td { background: var(--bg-elevated); }
.history-table .task-name { color: var(--text-primary); font-weight: var(--weight-medium); }

@media (max-width: 640px) {
  .history-table thead { display: none; }
  .history-table td {
    display: block;
    padding: var(--sp-1) var(--sp-2);
    border: none;
  }
  .history-table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2);
    background: var(--bg-surface);
  }
}

/* ── Login Screen ───────────────────────────────────────────── */
#login-screen {
  min-height: 100vh;
  background: var(--bg-app);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}

.login-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}

.login-logo {
  text-align: center;
  margin-bottom: var(--sp-3);
}
.login-logo .logo-mark {
  font-size: 40px;
  margin-bottom: 0px;
}
.login-logo h1 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}
.login-logo p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Name picker grid */
.name-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.name-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--sp-3) var(--sp-2);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
}
.name-btn:hover { background: var(--bg-hover); border-color: var(--border-focus); }
.name-btn.selected {
  background: var(--bronze-100);
  border-color: var(--brand);
  color: var(--brand-light);
  font-weight: var(--weight-semibold);
}
.name-btn .name-role {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: capitalize;
}
.name-btn.selected .name-role { color: var(--brand); }

.login-step { animation: fadeIn 0.15s ease; }

.pin-label {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.pin-label strong { color: var(--text-primary); }

.pin-error {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--urgent);
  margin-top: var(--sp-3);
  min-height: 20px;
  font-weight: var(--weight-medium);
}

.login-back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: var(--sp-4) auto 0;
  font-family: var(--font-sans);
  transition: color var(--transition-fast);
}
.login-back-btn:hover { color: var(--text-primary); }