/* v2 styles: reporting pages (owner W2-REP).
   Covers portfolio/reports.html, portfolio/competitor_reports.html and data_export/page.html
   (static/css/data_export/page.css and preview.css stay as they are; the overrides are here).
   Loaded only when DP_NEW_STYLE is on; every rule is scoped under .dp-v2. */

/* ---------- All reports (portfolio/reports.html) ---------- */

/* Flat cards: the page's <style> block lifts the card on hover with a shadow. */
.dp-v2 .report-card {
  box-shadow: none !important;
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius);
  background: var(--dp-card);
  transition: border-color .15s ease, background-color .15s ease;
}

.dp-v2 .report-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--bs-primary);
  background: var(--dp-accent);
}

.dp-v2 .report-card-wrapper {
  margin-bottom: 1rem;
}

.dp-v2 .report-card .card-body {
  padding: .5rem;
  font-size: var(--dp-font-size);
}

.dp-v2 .report-card .badge.bg-light {
  background: var(--dp-muted) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius-pill);
  padding: .2rem .6rem !important;
  font-size: 11px;
  font-weight: 500;
  color: var(--dp-accent-fg) !important;
}

.dp-v2 .report-card a:hover {
  text-decoration: none;
  color: var(--dp-accent-fg);
}

/* Company and year group headings */
.dp-v2 .dp-plain-container h4.text-primary,
.dp-v2 .dp-plain-container h5.text-secondary {
  font-size: 14px;
  font-weight: 600;
}

.dp-v2 .dp-plain-container h4.text-primary {
  color: var(--dp-accent-fg) !important;
}

.dp-v2 .dp-plain-container h5.text-secondary {
  font-size: 12px;
  color: var(--dp-muted-fg) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Empty state alert on the reports page */
.dp-v2 .dp-plain-container .alert.alert-warning.text-center {
  background: var(--dp-warning-bg);
  border: 1px solid var(--dp-warning-border);
  color: var(--dp-warning-fg);
}

/* ---------- Competitor reports (portfolio/competitor_reports.html) ---------- */

.dp-v2 .card.border-0.shadow-sm {
  border: 1px solid var(--dp-border) !important;
  box-shadow: none !important;
  border-radius: var(--dp-radius);
}

.dp-v2 .card.border-0.bg-light {
  background: var(--dp-muted) !important;
  border: 1px solid var(--dp-border) !important;
  border-radius: var(--dp-radius);
}

.dp-v2 .card.border-0 .card-title a:hover {
  color: var(--dp-accent-fg);
}

.dp-v2 .alert.alert-info > h5.text-primary {
  color: var(--dp-accent-fg) !important;
  font-size: 14px;
  font-weight: 600;
}

.dp-v2 .list-group-flush > .list-group-item {
  border-color: var(--dp-border);
}

/* SDG icons and badges in the initiatives table */
.dp-v2 #initiatives-table td .badge {
  border-radius: var(--dp-radius-pill);
  font-size: 11px;
  font-weight: 500;
}

.dp-v2 #initiatives-table td .badge.bg-secondary {
  background: var(--dp-muted) !important;
  color: var(--dp-muted-fg) !important;
  border: 1px solid var(--dp-border);
}

.dp-v2 #initiatives-table td .badge.bg-success {
  background: var(--dp-growth-tint) !important;
  color: var(--dp-growth) !important;
}

.dp-v2 #initiatives-table thead.table-light {
  --bs-table-bg: var(--dp-muted);
  --bs-table-color: var(--dp-muted-fg);
}

/* ---------- Data export (data_export/page.html) ---------- */

/* page.css defines its own palette on .dx; map it onto the platform tokens. */
.dp-v2 .dx {
  --dx-teal: var(--bs-primary);
  --dx-teal-dk: var(--dp-accent-fg);
  --dx-teal-tint: var(--dp-accent);
  --dx-ink: var(--dp-fg);
  --dx-muted: var(--dp-muted-fg);
  --dx-faint: var(--dp-muted-fg);
  --dx-line: var(--dp-border);
  --dx-bg: var(--dp-muted);
  --dx-grey: var(--dp-border);
  --dx-r-card: var(--dp-radius);
  --dx-r-ctl: var(--dp-radius-ctl);
  --dx-font: var(--dp-font);
  font-family: var(--dp-font);
  font-size: var(--dp-font-size);
}

.dp-v2 .dx-sh,
.dp-v2 .dx-gw {
  --teal-dk: var(--dp-accent-fg);
  --teal-3: var(--dp-accent);
  --ink: var(--dp-fg);
  --muted: var(--dp-muted-fg);
  --faint: var(--dp-muted-fg);
  --line: var(--dp-border);
}

/* Page header: same look as .dp-page-header / .dp-page-title */
.dp-v2 .dx-head {
  align-items: center;
  margin-bottom: 1rem;
}

.dp-v2 .dx-head p {
  font-size: var(--dp-font-size);
  color: var(--dp-muted-fg);
}

/* Download buttons follow .btn / .btn-outline-primary */
.dp-v2 .dx-btn,
.dp-v2 .dx-btn-g {
  height: 36px;
  padding: 0 1rem;
  border-radius: var(--dp-radius);
  font-size: var(--dp-font-size);
  font-weight: 500;
}

.dp-v2 .dx-btn-g {
  border-color: var(--bs-primary);
  background: transparent;
  color: var(--dp-accent-fg);
}

.dp-v2 .dx-btn,
.dp-v2 .dx-btn-g {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* The buttons are built by static/js/data_export/page.js, so the download icon
   (the same lucide glyph icon('fas fa-download') renders) is drawn here. */
.dp-v2 .dx-btn::before,
.dp-v2 .dx-btn-g::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url(/static/icons/lucide/download.svg) center / contain no-repeat;
  mask: url(/static/icons/lucide/download.svg) center / contain no-repeat;
}

.dp-v2 .dx-dl-error {
  font-size: 12px;
  color: var(--dp-destructive);
}

/* Settings are not boxed: a bold caption above the controls, no card (prototype) */
.dp-v2 .dx-group {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

.dp-v2 .dx-gh {
  padding: 0 0 6px;
  background: none;
  border-bottom: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--dp-fg);
}

.dp-v2 .dx-gb {
  padding: 0;
}

.dp-v2 .dx-pill {
  font-size: 11px;
  font-weight: 500;
  background: var(--dp-muted);
  border: 1px solid var(--dp-border);
}

/* Segmented control: an outlined pill, the active segment a filled pill */
.dp-v2 .dx-seg {
  padding: 2px;
  gap: 2px;
  background: var(--dp-card);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-pill);
}

.dp-v2 .dx-seg button {
  padding: 5px 4px;
  border-radius: var(--dp-radius-pill);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
}

.dp-v2 .dx-seg button.on {
  background: var(--dp-muted);
  color: var(--dp-fg);
  font-weight: 600;
  box-shadow: none;
}

/* Fields */
.dp-v2 .dx-fld label {
  font-size: 12px;
  font-weight: 500;
  color: var(--dp-fg);
}

.dp-v2 .dx-fld select,
.dp-v2 .dx-dir {
  height: 32px;
  padding: 0 .5rem;
  border-radius: var(--dp-radius-ctl);
  font-size: var(--dp-font-size);
  border-color: var(--dp-input-border);
}

.dp-v2 .dx-fld select:focus-visible {
  outline: 2px solid var(--dp-ring);
  outline-offset: 0;
}

.dp-v2 .dx-info {
  display: inline-block;
  vertical-align: middle;
}

.dp-v2 .dx-lnk {
  color: var(--dp-accent-fg);
}

/* Switch: 32 x 18 like the platform .form-switch */
.dp-v2 .dx-sw {
  width: 32px;
  height: 18px;
}

.dp-v2 .dx-tk::before {
  width: 14px;
  height: 14px;
}

.dp-v2 .dx-sw input:checked + .dx-tk::before {
  left: 16px;
}

.dp-v2 .dx-sw input:focus-visible + .dx-tk {
  outline: 2px solid var(--dp-ring);
}

.dp-v2 .dx-trow .dx-val,
.dp-v2 .dx-trow .dx-pc {
  font-family: var(--dp-font);
}

/* Preview grid: no vertical borders, muted header, soft hover */
.dp-v2 .dx-gw table {
  font-size: var(--dp-font-size);
}

.dp-v2 .dx-gw th,
.dp-v2 .dx-gw td {
  border-right: 0;
  border-bottom: 1px solid var(--dp-border);
}

.dp-v2 .dx-gw thead th,
.dp-v2 .dx-gw .rn,
.dp-v2 .dx-gw thead .rn,
.dp-v2 .dx-gw thead .c1,
.dp-v2 .dx-gw thead .c2,
.dp-v2 .dx-gw thead .id,
.dp-v2 .dx-gw thead .yr {
  background: var(--dp-muted);
}

.dp-v2 .dx-gw thead tr.g th {
  background: var(--dp-accent);
}

.dp-v2 .dx-gw tr.sec td {
  background: var(--dp-muted);
  color: var(--dp-accent-fg);
}

.dp-v2 .dx-gw tr.sec.l0 td {
  background: var(--dp-accent);
}

.dp-v2 .dx-gw .c1,
.dp-v2 .dx-gw .c2,
.dp-v2 .dx-gw .id,
.dp-v2 .dx-gw .yr {
  font-family: var(--dp-font);
  background: var(--dp-card);
}

.dp-v2 .dx-gw th .k {
  font-family: var(--dp-font);
}

.dp-v2 .dx-gw tbody tr:hover td {
  background: rgba(0, 0, 0, .03);
}

.dp-v2 .dx-sh .file {
  font-family: var(--dp-font);
}

.dp-v2 .dx-sh .srch {
  border-radius: var(--dp-radius-pill);
}

.dp-v2 .dx-empty {
  font-size: var(--dp-font-size);
  color: var(--dp-muted-fg);
}