/* ==========================================================================
   dashboard_kit · component base styles
   --------------------------------------------------------------------------
   All styles read tokens from tokens.css. Themes override tokens; never
   override component styles directly. Components use `.dk-*` namespace.
   ==========================================================================
*/

/* ---------- Reset baseline (scoped) ---------- */

.dk-root,
.dk-root * {
  box-sizing: border-box;
}

.dk-root {
  font-family: var(--dk-font-sans);
  font-size: var(--dk-fs-body);
  line-height: var(--dk-lh-normal);
  color: var(--dk-text);
  background: var(--dk-bg);
}

/* ---------- Layout: dashboard grid ---------- */

.dk-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dk-space-5);
  padding: var(--dk-space-6);
}

.dk-dashboard--with-rail {
  grid-template-columns: minmax(0, 1fr) 320px;
}

@media (max-width: 1024px) {
  .dk-dashboard--with-rail {
    grid-template-columns: 1fr;
  }
}

.dk-section {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-4);
}

.dk-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dk-space-4);
}

.dk-section__title {
  font-size: var(--dk-fs-h2);
  font-weight: var(--dk-fw-semibold);
  letter-spacing: var(--dk-tracking-tight);
  color: var(--dk-text);
  margin: 0;
}

.dk-section__subtitle {
  font-size: var(--dk-fs-label);
  color: var(--dk-text-muted);
  margin: 0;
}

/* ---------- KPI grid (responsive 4/3/2/1) ---------- */

.dk-kpi-grid {
  display: grid;
  gap: var(--dk-grid-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  .dk-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 880px) {
  .dk-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .dk-kpi-grid { grid-template-columns: 1fr; }
}

/* ---------- Card surface ---------- */

.dk-card {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-lg);
  padding: var(--dk-card-pad-y) var(--dk-card-pad-x);
  box-shadow: var(--dk-shadow-sm);
  transition: box-shadow var(--dk-dur-base) var(--dk-easing);
}

.dk-card--raised  { box-shadow: var(--dk-shadow-md); }
.dk-card--inset   { background: var(--dk-surface-inset); box-shadow: none; border-color: transparent; }
.dk-card--flat    { box-shadow: none; }
.dk-card--glass   { background: var(--dk-surface-glass); backdrop-filter: blur(12px); }

.dk-card:hover {
  box-shadow: var(--dk-shadow-md);
}

/* ---------- Hero metric tile (the big green card) ---------- */

.dk-tile-hero {
  background: var(--dk-surface-hero);
  color: var(--dk-text-on-hero);
  border-radius: var(--dk-radius-lg);
  padding: var(--dk-space-6) var(--dk-space-7);
  box-shadow: var(--dk-shadow-hero);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--dk-space-6);
  align-items: end;
}

.dk-tile-hero__label {
  font-size: var(--dk-fs-caption);
  letter-spacing: var(--dk-tracking-wide);
  text-transform: uppercase;
  color: var(--dk-text-on-hero-soft);
  margin: 0 0 var(--dk-space-2) 0;
  font-weight: var(--dk-fw-medium);
}

.dk-tile-hero__value {
  font-size: var(--dk-fs-display);
  font-weight: var(--dk-fw-bold);
  letter-spacing: var(--dk-tracking-tight);
  color: var(--dk-text-on-hero);
  line-height: 1;
  margin: 0;
}

.dk-tile-hero__sub {
  display: flex;
  gap: var(--dk-space-6);
  margin-top: var(--dk-space-5);
  flex-wrap: wrap;
}

.dk-tile-hero__sub-item {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-1);
}

.dk-tile-hero__sub-label {
  font-size: var(--dk-fs-caption);
  letter-spacing: var(--dk-tracking-wide);
  text-transform: uppercase;
  color: var(--dk-text-on-hero-soft);
}

.dk-tile-hero__sub-value {
  font-size: var(--dk-fs-h2);
  font-weight: var(--dk-fw-semibold);
  color: var(--dk-text-on-hero);
}

.dk-tile-hero__chart {
  align-self: stretch;
  width: 240px;
  opacity: 0.55;
}

/* ---------- KPI tile (compact) ---------- */

.dk-tile {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-md);
  padding: var(--dk-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-2);
  min-height: 120px;
  transition: border-color var(--dk-dur-fast) var(--dk-easing);
}

.dk-tile:hover {
  border-color: var(--dk-border-strong);
}

.dk-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dk-space-3);
}

.dk-tile__label {
  font-size: var(--dk-fs-caption);
  letter-spacing: var(--dk-tracking-wide);
  text-transform: uppercase;
  color: var(--dk-text-muted);
  font-weight: var(--dk-fw-medium);
  margin: 0;
}

.dk-tile__value {
  font-size: var(--dk-fs-hero);
  font-weight: var(--dk-fw-bold);
  letter-spacing: var(--dk-tracking-tight);
  color: var(--dk-text);
  line-height: 1.1;
}

.dk-tile__foot {
  display: flex;
  align-items: center;
  gap: var(--dk-space-2);
  font-size: var(--dk-fs-caption);
  color: var(--dk-text-muted);
}

/* ---------- Status pill ---------- */

.dk-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-1);
  padding: 2px var(--dk-space-2);
  border-radius: var(--dk-radius-pill);
  font-size: var(--dk-fs-caption);
  font-weight: var(--dk-fw-medium);
  line-height: 1.4;
  letter-spacing: var(--dk-tracking-normal);
}

.dk-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.dk-pill--optimal   { color: var(--dk-status-optimal);   background: color-mix(in srgb, var(--dk-status-optimal) 12%, transparent); }
.dk-pill--healthy   { color: var(--dk-status-healthy);   background: color-mix(in srgb, var(--dk-status-healthy) 12%, transparent); }
.dk-pill--normal    { color: var(--dk-status-normal);    background: color-mix(in srgb, var(--dk-status-normal) 14%, transparent); }
.dk-pill--attention { color: var(--dk-status-attention); background: color-mix(in srgb, var(--dk-status-attention) 14%, transparent); }
.dk-pill--critical  { color: var(--dk-status-critical);  background: color-mix(in srgb, var(--dk-status-critical) 14%, transparent); }

/* ---------- Delta badge (% change with arrow) ---------- */

.dk-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-1);
  padding: 1px var(--dk-space-2);
  border-radius: var(--dk-radius-pill);
  font-size: var(--dk-fs-caption);
  font-weight: var(--dk-fw-semibold);
  font-variant-numeric: tabular-nums;
}

.dk-delta--up   { color: var(--dk-status-healthy);   background: color-mix(in srgb, var(--dk-status-healthy) 12%, transparent); }
.dk-delta--down { color: var(--dk-status-critical);  background: color-mix(in srgb, var(--dk-status-critical) 12%, transparent); }
.dk-delta--flat { color: var(--dk-text-muted);       background: var(--dk-surface-inset); }

.dk-delta__arrow {
  display: inline-block;
  width: 0; height: 0;
}

.dk-delta--up   .dk-delta__arrow { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid currentColor; }
.dk-delta--down .dk-delta__arrow { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top:    6px solid currentColor; }
.dk-delta--flat .dk-delta__arrow { width: 6px; height: 2px; background: currentColor; }

/* ---------- Filter bar (top of dashboard) ---------- */

.dk-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dk-space-3);
  padding: var(--dk-space-4) var(--dk-space-6);
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-md);
  align-items: center;
}

.dk-filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-1);
}

.dk-filter-bar__label {
  font-size: var(--dk-fs-caption);
  color: var(--dk-text-muted);
  letter-spacing: var(--dk-tracking-wide);
  text-transform: uppercase;
}

.dk-filter-bar__select {
  background: var(--dk-surface-inset);
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-sm);
  padding: var(--dk-space-2) var(--dk-space-3);
  font-size: var(--dk-fs-label);
  color: var(--dk-text);
  font-family: inherit;
  min-width: 160px;
}

.dk-filter-bar__select:focus {
  outline: 2px solid var(--dk-focus-ring);
  outline-offset: 1px;
}

/* ---------- Right-rail summary card ---------- */

.dk-rail {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-4);
}

.dk-rail__section {
  background: var(--dk-surface);
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius-md);
  padding: var(--dk-space-5);
}

.dk-rail__title {
  font-size: var(--dk-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--dk-tracking-wide);
  color: var(--dk-text-muted);
  margin: 0 0 var(--dk-space-3) 0;
}

/* ---------- Activity feed ---------- */

.dk-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-3);
}

.dk-feed__item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--dk-space-3);
  align-items: start;
}

.dk-feed__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--dk-radius-pill);
  background: var(--dk-surface-inset);
  display: grid;
  place-items: center;
  font-size: var(--dk-fs-caption);
  color: var(--dk-text-muted);
  flex-shrink: 0;
}

.dk-feed__title {
  font-size: var(--dk-fs-body);
  color: var(--dk-text);
  margin: 0;
  line-height: 1.4;
}

.dk-feed__sub {
  font-size: var(--dk-fs-caption);
  color: var(--dk-text-faint);
  margin: 2px 0 0 0;
}

.dk-feed__time {
  font-size: var(--dk-fs-caption);
  color: var(--dk-text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Top-N list (ranked items with bar) ---------- */

.dk-top-n {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-2);
}

.dk-top-n__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--dk-space-3);
  padding: var(--dk-space-2) 0;
  border-bottom: 1px solid var(--dk-divider);
}

.dk-top-n__label {
  font-size: var(--dk-fs-body);
  color: var(--dk-text);
}

.dk-top-n__sub {
  font-size: var(--dk-fs-caption);
  color: var(--dk-text-faint);
}

.dk-top-n__value {
  font-size: var(--dk-fs-body);
  font-weight: var(--dk-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--dk-text);
}

.dk-top-n__bar {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: var(--dk-radius-pill);
  background: var(--dk-surface-inset);
  overflow: hidden;
  margin-top: var(--dk-space-1);
}

.dk-top-n__bar-fill {
  height: 100%;
  background: var(--dk-primary);
  border-radius: inherit;
  transition: width var(--dk-dur-base) var(--dk-easing-out);
}

/* ---------- Detail table ---------- */

.dk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dk-fs-label);
}

.dk-table th {
  text-align: left;
  padding: var(--dk-space-2) var(--dk-space-3);
  font-weight: var(--dk-fw-semibold);
  color: var(--dk-text-muted);
  letter-spacing: var(--dk-tracking-wide);
  text-transform: uppercase;
  font-size: var(--dk-fs-caption);
  border-bottom: 1px solid var(--dk-border);
}

.dk-table td {
  padding: var(--dk-space-3);
  border-bottom: 1px solid var(--dk-divider);
  color: var(--dk-text);
}

.dk-table tr:last-child td { border-bottom: none; }

.dk-table--dense td { padding: var(--dk-space-2) var(--dk-space-3); }

/* ---------- Loading skeleton ---------- */

.dk-skel {
  background: linear-gradient(
    90deg,
    var(--dk-surface-inset) 0%,
    var(--dk-divider) 50%,
    var(--dk-surface-inset) 100%
  );
  background-size: 200% 100%;
  animation: dk-skel-shimmer 1.4s linear infinite;
  border-radius: var(--dk-radius-sm);
}

@keyframes dk-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Live data indicator ---------- */

.dk-live {
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-1);
  font-size: var(--dk-fs-caption);
  color: var(--dk-status-optimal);
  letter-spacing: var(--dk-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--dk-fw-medium);
}

.dk-live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: dk-pulse 2s var(--dk-easing) infinite;
}

@keyframes dk-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Empty state ---------- */

.dk-empty {
  text-align: center;
  padding: var(--dk-space-7) var(--dk-space-4);
  color: var(--dk-text-faint);
}

.dk-empty__title {
  font-size: var(--dk-fs-body);
  color: var(--dk-text-muted);
  margin: 0 0 var(--dk-space-1) 0;
}

.dk-empty__sub {
  font-size: var(--dk-fs-caption);
  margin: 0;
}

/* ---------- Print ---------- */

@media print {
  .dk-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .dk-tile-hero { background: white !important; color: black !important; box-shadow: none; border: 1px solid #ccc; }
  .dk-pill, .dk-delta { background: none !important; border: 1px solid currentColor; }
}