/* Varial — Card component variants */

/* ── Base card refinements ──────────────────────────────────── */
.card {
  background-color: var(--varial-card-bg, #fff);
  border: 1px solid var(--varial-card-border, var(--varial-border, #E8E4D8));
  border-radius: var(--varial-radius-md, 0.375rem);
  box-shadow: var(--varial-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.07));
}

/* Base card-body padding. Variant overrides below (.card-compact, .card-flush,
   .card-metric) use identical specificity and must follow this rule to win on
   source order. To tune card interior density globally, edit
   --varial-card-body-padding in branding.css. */
.card > .card-body {
  padding: var(--varial-card-body-padding, 1rem);
}

/* ── Card header / footer — subtle tint so headers read as a distinct band ── */
.card-header,
.card-footer {
  background-color: var(--varial-gray-50, #F8F7F5);
  border-color: var(--varial-border, #E8E4D8);
  padding: var(--varial-card-header-padding, 0.625rem 1rem);
  font-family: var(--varial-font-heading);
  font-weight: 600;
}

/* Card title uses heading font for stronger hierarchy */
.card-title {
  font-family: var(--varial-font-heading);
  font-weight: 600;
}
.card-header > .card-title,
.card-header h5,
.card-header h6 {
  font-family: var(--varial-font-heading);
  font-weight: 600;
}

/* ── Compact card — tighter padding for data-dense layouts ───── */
.card-compact > .card-body {
  padding: var(--varial-card-body-padding-compact, 0.625rem 0.75rem);
}

.card-compact > .card-header,
.card-compact > .card-footer {
  padding: var(--varial-card-header-padding-compact, 0.375rem 0.75rem);
  font-size: var(--text-sm, 0.875rem);
}

/* ── Flush card — no body padding, full-bleed content ───────── */
.card-flush > .card-body {
  padding: 0;
}

.card-flush > .card-header {
  padding: var(--varial-card-header-padding-flush, 0.5rem 1rem);
}

/* ── Metric card — single KPI value + label (hex.tech pattern) ── */
.card-metric > .card-body {
  padding: var(--varial-card-body-padding-metric, 0.875rem 1rem);
}

.metric-value {
  font-size: var(--text-3xl, 1.875rem);
  font-weight: 700;
  font-family: var(--varial-font-heading);
  color: var(--varial-gray-900, #131210);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metric-label {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--varial-gray-500, #6B6763);
  margin-top: 0.375rem;
}

.metric-delta {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.metric-delta.positive { color: var(--varial-green, #16A34A); }
.metric-delta.negative { color: var(--varial-danger, #DC2626); }
.metric-delta.neutral  { color: var(--varial-gray-500, #6B6763); }

/* NOTE: `.card-panel` (blue top-accent "panel" treatment) was RETIRED 2026-06-10
   (ui-audit 3B.9 — docs/ui-audit/findings/W4-card-panel-rubric.md). One card
   treatment app-wide: plain `.card`. Do not reintroduce. Tabulator/Plotly/map
   wrappers are plain cards with `card-body p-0` (+ Bootstrap `overflow-hidden`
   when square-cornered content must respect the card radius). */

/* ── Status border — colored top-border accent for state cards ── */
/* Double-class specificity needed to beat Falcon/Bootstrap .card border rules */
.card.card-status-primary { border-top: 2px solid var(--varial-primary, #1B3AA0); }
.card.card-status-success { border-top: 2px solid var(--varial-green, #16A34A); }
.card.card-status-muted   { border-top: 2px solid var(--varial-gray-300, #D1CFC9); }
.card.card-accent-left    { border-left: 3px solid var(--varial-amber, #F59E0B); }

/* ── Drag-drop folder highlight ── */
.droppable-folder.drag-over {
  outline: 2px dashed var(--varial-primary, #1B3AA0);
  outline-offset: -2px;
  background-color: rgba(27, 58, 160, 0.03);
}
.draggable-forecast { cursor: grab; }
.draggable-forecast.opacity-50 { opacity: 0.5; }

/* ── Section label — tiny uppercase heading inside a card ───── */
.card-section-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--varial-gray-500, #6B6763);
}

/* ── Summary tables — compact, data-dense review tables ───── */
.vrl-summary-table {
  font-size: var(--text-sm, 0.8125rem);
}

.vrl-summary-table thead th {
  font-size: var(--text-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--varial-gray-600, #5A5550);
}

.vrl-summary-table tbody td {
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.3;
}

.vrl-summary-change {
  display: inline-block;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 700;
  min-width: 0.75rem;
  text-align: center;
}

/* ── Intro / hero card — shared accent used on all app home pages ── */
.card-intro {
  border-left: 4px solid var(--varial-amber, #F59E0B);
}

/* ── Dark mode ────────────────────────────────────── */
[data-bs-theme="dark"] .card {
  background-color: var(--varial-card-bg, #1E293B);
  border-color: var(--varial-card-border, #334155);
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
  /* 0.03 was almost imperceptible on navy — lift it so the header/footer
     reads as a distinct band from the card body. */
  background-color: rgba(255,255,255,0.06);
  border-color: var(--varial-border, #334155);
}

/* The dark-navy drag-over tint disappears on the dark page — lift it to the
   accent blue so the drop target still reads. */
[data-bs-theme="dark"] .droppable-folder.drag-over {
  background-color: rgba(96, 165, 250, 0.10);
}