/*
 * ════════════════════════════════════════════════════════════════
 *  CCIR DASHBOARD — Component Styles
 *  Climate Change Duties Platform · Argyll & Bute Council
 *
 *  Dashboard-specific components only. All shared tokens, shell,
 *  layout, and shared components (kpi-card, chart-card, pill,
 *  insight-banner, etc.) are in civic-swiss.css, loaded first.
 *
 *  v1.0 — April 2026
 * ════════════════════════════════════════════════════════════════
 */


/* ── WATCH LIST ────────────────────────────────────────────── */

/* Alert banner — coloured background; does not use .panel base */
.wl-intro {
  background: var(--red-s);
  border: 1px solid var(--red);
  border-radius: var(--tile-radius);
  padding: var(--sp4) var(--sp5);
  margin-bottom: var(--sp2);
  font-size: var(--text-xs);
  color: var(--text-m);
  line-height: 1.7;
}
.wl-intro strong { color: var(--red); }

.wl-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  padding: var(--sp4) var(--sp5) var(--sp4) calc(var(--sp5) + 8px);
  display: flex; align-items: flex-start; gap: var(--sp4);
  transition: border-color var(--trans);
}
.wl-card::before {
  content: '';
  position: absolute;
  left: 0; top: var(--sp3); bottom: var(--sp3);
  width: 3px; border-radius: var(--tile-radius);
  background: var(--red);
}
.wl-card:hover        { border-color: var(--red); }

.wl-meta              { flex-shrink: 0; min-width: 120px; }
.wl-date              { font-family: var(--font-mono); font-size: 11px; color: var(--text-m); margin-bottom: var(--sp2); }
.wl-comm-badge        { font-size: 10px; font-weight: 700; background: var(--primary-s); color: var(--primary); padding: 2px 7px; border-radius: var(--r-sm); display: inline-block; white-space: nowrap; }

.wl-body              { flex: 1; min-width: 0; }
.wl-num               { font-family: var(--font-mono); font-size: 11px; color: var(--text-f); margin-bottom: 3px; }
.wl-title             { font-size: var(--text-sm); font-weight: 600; color: var(--text); margin-bottom: var(--sp2); line-height: 1.4; }
.wl-duties            { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--sp2); }
.wl-multi-flag        { font-size: 10px; font-weight: 700; color: var(--red); }

.wl-pills             { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp2); flex-shrink: 0; }
.wl-list              { display: flex; flex-direction: column; gap: var(--card-gap); }
.wl-empty             { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--tile-radius); padding: var(--sp8) var(--sp6); text-align: center; color: var(--text-m); font-size: var(--text-sm); }


/* ── COMMITTEE SCOREBOARD ──────────────────────────────────── */

.comm-table {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  overflow: hidden;
  border-collapse: collapse;
}
.comm-table th {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-f);
  padding: var(--sp3) var(--sp4);
  border-bottom: 1px solid var(--divider);
  text-align: left;
  background: var(--surface2);
  white-space: nowrap;
}
.comm-table th:not(:first-child) { text-align: center; }
.comm-table td {
  padding: var(--sp3) var(--sp4);
  border-bottom: 1px solid var(--divider);
  font-size: var(--text-xs);
  vertical-align: middle;
  color: var(--text);
}
.comm-table tr:last-child td  { border-bottom: none; }
.comm-table tr:hover td       { background: var(--surface2); }

.comm-abbr-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  background: var(--primary-s); color: var(--primary);
  padding: 2px 6px; border-radius: var(--r-sm);
  white-space: nowrap; margin-right: 6px; flex-shrink: 0;
}
.comm-full-name { font-size: 11px; color: var(--text-m); }
.stale-warn     { font-size: 10px; font-weight: 700; color: var(--red); margin-left: 5px; }

.comm-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--sp4);
}
.comm-overview-card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  padding: var(--sp4);
  transition: transform var(--trans), box-shadow var(--trans);
  box-shadow: var(--shadow-tile);
}
.comm-overview-card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-tile-hover); }


/* Statutory duty card styles archived 8 Apr 2026 - see ARCHIVE_statutory_duties_section.md */


/* ── TRENDS TABLE ──────────────────────────────────────────── */

.trend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}
.trend-table th {
  text-align: left;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-f);
  padding: var(--sp2) var(--sp3);
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
}
.trend-table th:not(:first-child) { text-align: right; }
.trend-table td {
  padding: var(--sp2) var(--sp3);
  border-bottom: 1px solid var(--divider);
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.trend-table td:not(:first-child) { text-align: right; }
.trend-table tr:last-child td     { border-bottom: none; }
.trend-table tr:hover td          { background: var(--surface2); }
.td-date { color: var(--text-m); white-space: nowrap; font-family: var(--font-mono); font-size: 11px; }


/* ── REVIEW LOG ────────────────────────────────────────────── */

.review-list  { display: flex; flex-direction: column; gap: var(--card-gap); }

.review-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--tile-radius);
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
  box-shadow: var(--shadow-tile-mini);
}
.review-card::before {
  content: '';
  position: absolute;
  top: 0; left: var(--sp6); right: var(--sp6);
  height: 4px; border-radius: var(--tile-radius);
  background: var(--primary);
  z-index: 1;
}
.review-card:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-tile-mini-hover); border-color: var(--primary); }

.review-head {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--sp2);
  padding: calc(var(--sp4) + 4px) var(--sp5) var(--sp4);
  cursor: pointer; user-select: none;
  transition: background var(--trans);
}
.review-head:hover,
.review-card.open .review-head { background: var(--surface2); }

.review-head-top  { display: flex; justify-content: space-between; align-items: center; }
.review-date      { font-family: var(--font-mono); font-size: 11px; color: var(--text-m); white-space: nowrap; }
.review-committee { font-weight: 700; font-size: var(--text-sm); color: var(--text); line-height: 1.35; }
.review-pills     { display: flex; flex-wrap: wrap; gap: var(--sp2); }
.review-chevron   { color: var(--text-f); transition: transform .2s ease; flex-shrink: 0; }
.review-card.open .review-chevron { transform: rotate(180deg); }

.review-items             { display: none; border-top: 1px solid var(--divider); }
.review-card.open .review-items { display: block; }

.item-row {
  display: flex; align-items: flex-start; gap: var(--sp4);
  padding: var(--sp3) var(--sp5);
  border-bottom: 1px solid var(--divider);
  opacity: .6;
}
.item-row:last-child        { border-bottom: none; }
.item-row.has-red           { opacity: 1; background: var(--red-s); }
.item-num                   { font-family: var(--font-mono); font-size: 11px; color: var(--text-f); min-width: 44px; padding-top: 1px; flex-shrink: 0; }
.item-title                 { flex: 1; font-size: var(--text-xs); color: var(--text-m); line-height: 1.4; }
.item-row.has-red .item-title { color: var(--text); }
.item-duties                { display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; max-width: 220px; }
.item-pills                 { display: flex; gap: 4px; flex-shrink: 0; }

.item-obligation-pills      { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px var(--sp5) 0 var(--sp5); }
.obligation-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--trans);
}
.obligation-pill:hover { opacity: 0.85; }
.item-row.has-red .item-obligation-pills { padding-top: 0; }

.log-actions { display: flex; gap: var(--sp3); }


/* ── ABOUT PANEL ───────────────────────────────────────────── */
/*
 *  Dashboard version adds max-width constraint to the shared
 *  .about-panel definition in civic-swiss.css.
 */
.about-panel { max-width: 680px; }

.duty-def   { display: grid; grid-template-columns: auto 1fr; gap: var(--sp2) var(--sp4); font-size: var(--text-xs); margin-bottom: var(--sp4); }
.dd-key     { font-weight: 700; color: var(--text); font-family: var(--font-mono); padding: var(--sp1) 0; white-space: nowrap; }
.dd-val     { color: var(--text-m); padding: var(--sp1) 0; line-height: 1.5; }


/* ── RESPONSIVE (dashboard-specific additions) ─────────────── */

@media (max-width: 900px) {
  /* duty-cards-grid rule archived 8 Apr 2026 */
}


/* ── PRINT (dashboard-specific additions) ──────────────────── */

@media print {
  .review-items { display: block !important; }
}