/*!
 * dotHello Dashboard Addon — v2.5.0
 * Addon CSS for dothello-dashboard.js
 * Load AFTER dothello.css
 * (c) helloDJT — MIT License
 */

/* ============================================
   Dashboard Tokens
   ============================================ */

:root {
  /* Core brand references — inherit from dotHello semantic tokens */
  --dh-dash-primary:          var(--dh-color-primary, #00e5a0);
  --dh-dash-on-primary:       var(--dh-color-on-primary, #000000);
  --dh-dash-bg:               var(--dh-color-bg, #ffffff);
  --dh-dash-surface:          var(--dh-color-surface, #f2f4f8);
  --dh-dash-surface-raised:   var(--dh-color-surface-raised, #ffffff);
  --dh-dash-border:           var(--dh-color-border, rgba(0,0,0,0.1));
  --dh-dash-text:             var(--dh-color-text, #1a1a2e);
  --dh-dash-text-muted:       var(--dh-color-text-muted, #4b5563);
  --dh-dash-focus-ring:       var(--dh-focus-ring-color, var(--dh-color-primary, #00e5a0));

  --dh-dash-sidebar-w:        240px;
  --dh-dash-sidebar-w-sm:     64px;
  --dh-dash-topbar-h:         60px;
  --dh-dash-card-gap:         var(--dh-space-6);

  /* Chart colours (12-step cycle) */
  --dh-chart-0: var(--dh-brand-primary,  #6C63FF);
  --dh-chart-1: #38BDF8;
  --dh-chart-2: #34D399;
  --dh-chart-3: #FBBF24;
  --dh-chart-4: #F87171;
  --dh-chart-5: #A78BFA;
  --dh-chart-6: #FB923C;
  --dh-chart-7: #4ADE80;
  --dh-chart-8: #60A5FA;
  --dh-chart-9: #F472B6;
  --dh-chart-10:#818CF8;
  --dh-chart-11:#2DD4BF;

  /* Trend badge colours */
  --dh-trend-up-bg:   rgba(52,211,153,0.12);
  --dh-trend-up-fg:   #34D399;
  --dh-trend-down-bg: rgba(248,113,113,0.12);
  --dh-trend-down-fg: #F87171;
  --dh-trend-flat-bg: rgba(156,163,175,0.12);
  --dh-trend-flat-fg: #9CA3AF;
}

/* ============================================
   Dashboard Grid Layout
   ============================================ */

.dh-dashboard {
  display: flex;
  min-height: 100vh;
  background: var(--dh-color-bg);
}

.dh-dashboard__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--dh-dash-card-gap);
}

.dh-dashboard-grid {
  display: grid;
  gap: var(--dh-dash-card-gap);
  grid-template-columns: repeat(12, 1fr);
}

/* Column span helpers */

.dh-col-1  { grid-column: span 1; }

.dh-col-2  { grid-column: span 2; }

.dh-col-3  { grid-column: span 3; }

.dh-col-4  { grid-column: span 4; }

.dh-col-5  { grid-column: span 5; }

.dh-col-6  { grid-column: span 6; }

.dh-col-7  { grid-column: span 7; }

.dh-col-8  { grid-column: span 8; }

.dh-col-9  { grid-column: span 9; }

.dh-col-10 { grid-column: span 10; }

.dh-col-11 { grid-column: span 11; }

.dh-col-12 { grid-column: span 12; }

@media (max-width: 1024px) {
  .dh-col-3, .dh-col-4 { grid-column: span 6; }
  .dh-col-7, .dh-col-8 { grid-column: span 12; }
}

@media (max-width: 640px) {
  .dh-dashboard-grid { grid-template-columns: 1fr; }
  [class*="dh-col-"] { grid-column: span 1; }
}

/* ============================================
   Dashboard Topbar
   ============================================ */

.dh-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--dh-dash-topbar-h);
  padding: 0 var(--dh-dash-card-gap);
  background: var(--dh-color-surface);
  border-bottom: 1px solid var(--dh-color-border-light);
  flex-shrink: 0;
}

.dh-topbar__title {
  font-family: var(--dh-font-display);
  font-weight: var(--dh-weight-bold);
  font-size: var(--dh-text-xl);
  color: var(--dh-color-text);
}

.dh-topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--dh-space-3);
}

/* ============================================
   Chart Area
   ============================================ */

.dh-chart-area {
  background: var(--dh-color-surface);
  border: 1px solid var(--dh-color-border-light);
  border-radius: var(--dh-radius-xl);
  padding: var(--dh-space-6);
  position: relative;
  overflow: hidden;
}

.dh-chart-area__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--dh-space-6);
}

.dh-chart-area__title {
  font-size: var(--dh-text-base);
  font-weight: var(--dh-weight-semibold);
  color: var(--dh-color-text);
}

.dh-chart-area__subtitle {
  font-size: var(--dh-text-sm);
  color: var(--dh-color-text-muted);
  margin-top: var(--dh-space-1);
}

.dh-chart-area__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dh-space-4);
  margin-top: var(--dh-space-4);
}

.dh-chart-area__legend-item {
  display: flex;
  align-items: center;
  gap: var(--dh-space-2);
  font-size: var(--dh-text-sm);
  color: var(--dh-color-text-muted);
}

.dh-chart-area__legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================
   SVG Chart Wrapper
   ============================================ */

.dh-chart {
  display: block;
  width: 100%;
  overflow: visible;
}

.dh-chart__grid-line {
  stroke: var(--dh-color-border-light);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.dh-chart__axis-label {
  fill: var(--dh-color-text-muted);
  font-family: var(--dh-font-sans);
  font-size: 11px;
}

.dh-chart__line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dh-chart__area {
  opacity: 0.12;
}

.dh-chart__bar {
  rx: 4;
  ry: 4;
  opacity: 0.85;
  transition: opacity var(--dh-duration-fast) var(--dh-ease-out);
}

.dh-chart__bar:hover { opacity: 1; }

.dh-chart__donut-bg {
  fill: none;
  stroke: var(--dh-color-border-light);
  stroke-width: 24;
}

.dh-chart__donut-segment {
  fill: none;
  stroke-width: 24;
  stroke-linecap: butt;
  transition: stroke-dashoffset var(--dh-duration-slow) var(--dh-ease-out);
}

/* Tooltip */

.dh-chart-tooltip {
  position: absolute;
  background: var(--dh-color-dark-soft);
  border: 1px solid var(--dh-color-border-light);
  border-radius: var(--dh-radius-md);
  padding: var(--dh-space-2) var(--dh-space-4);
  font-size: var(--dh-text-sm);
  color: var(--dh-color-white);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dh-duration-fast) var(--dh-ease-out), transform var(--dh-duration-fast) var(--dh-ease-out);
  z-index: var(--dh-z-tooltip);
}

.dh-chart-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dh-chart-tooltip__label {
  color: rgba(255,255,255,0.5);
  font-size: var(--dh-text-xs);
  margin-bottom: var(--dh-space-1);
}

/* ============================================
   Dashboard Table
   ============================================ */

.dh-table-wrap {
  background: var(--dh-color-surface);
  border: 1px solid var(--dh-color-border-light);
  border-radius: var(--dh-radius-xl);
  overflow: hidden;
}

.dh-table-wrap__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--dh-space-5) var(--dh-space-6);
  border-bottom: 1px solid var(--dh-color-border-light);
}

.dh-table-wrap__title {
  font-size: var(--dh-text-base);
  font-weight: var(--dh-weight-semibold);
  color: var(--dh-color-text);
}

.dh-table {
  width: 100%;
  border-collapse: collapse;
}

.dh-table th {
  padding: var(--dh-space-3) var(--dh-space-6);
  text-align: left;
  font-size: var(--dh-text-xs);
  font-weight: var(--dh-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dh-color-text-muted);
  background: var(--dh-color-bg);
  border-bottom: 1px solid var(--dh-color-border-light);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
}

.dh-table th[data-dh-sort] { cursor: pointer; }

.dh-table th[data-dh-sort]:hover { color: var(--dh-color-text); }

.dh-table th[data-dh-sort]::after {
  content: ' ↕';
  opacity: 0.4;
}

.dh-table th[aria-sort="ascending"]::after  { content: ' ↑'; opacity: 1; }

.dh-table th[aria-sort="descending"]::after { content: ' ↓'; opacity: 1; }

.dh-table td {
  padding: var(--dh-space-4) var(--dh-space-6);
  font-size: var(--dh-text-sm);
  color: var(--dh-color-text);
  border-bottom: 1px solid var(--dh-color-border-light);
  vertical-align: middle;
}

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

.dh-table tr:hover td {
  background: rgba(255,255,255,0.025);
}

.dh-table__filter {
  display: flex;
  align-items: center;
  gap: var(--dh-space-2);
  padding: var(--dh-space-3) var(--dh-space-6);
  border-bottom: 1px solid var(--dh-color-border-light);
  background: var(--dh-color-bg);
}

.dh-table__search {
  flex: 1;
  background: var(--dh-color-surface);
  border: 1px solid var(--dh-color-border-light);
  border-radius: var(--dh-radius-md);
  padding: var(--dh-space-2) var(--dh-space-4);
  font-size: var(--dh-text-sm);
  color: var(--dh-color-text);
  outline: none;
}

.dh-table__search:focus {
  border-color: var(--dh-brand-primary);
}

/* ============================================
   Trend Badge
   ============================================ */

.dh-badge--trend {
  display: inline-flex;
  align-items: center;
  gap: var(--dh-space-1);
  padding: 2px var(--dh-space-2);
  border-radius: var(--dh-radius-full);
  font-size: var(--dh-text-xs);
  font-weight: var(--dh-weight-semibold);
}

.dh-badge--trend-up   { background: var(--dh-trend-up-bg);   color: var(--dh-trend-up-fg); }

.dh-badge--trend-down { background: var(--dh-trend-down-bg); color: var(--dh-trend-down-fg); }

.dh-badge--trend-flat { background: var(--dh-trend-flat-bg); color: var(--dh-trend-flat-fg); }

/* ============================================
   Stat Trend (extends dh-stat)
   ============================================ */

.dh-stat__trend {
  display: flex;
  align-items: center;
  gap: var(--dh-space-2);
  margin-top: var(--dh-space-2);
  font-size: var(--dh-text-sm);
}

.dh-stat__trend-value { font-weight: var(--dh-weight-semibold); }

.dh-stat__trend-label { color: var(--dh-color-text-muted); }

.dh-stat__trend--up   .dh-stat__trend-value { color: var(--dh-trend-up-fg); }

.dh-stat__trend--down .dh-stat__trend-value { color: var(--dh-trend-down-fg); }

.dh-stat__trend--flat .dh-stat__trend-value { color: var(--dh-trend-flat-fg); }

/* ============================================
   Empty State
   ============================================ */

.dh-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--dh-space-16) var(--dh-space-8);
  text-align: center;
  color: var(--dh-color-text-muted);
  gap: var(--dh-space-4);
}

.dh-empty-state__icon {
  width: 48px; height: 48px;
  opacity: 0.35;
}

.dh-empty-state__title {
  font-size: var(--dh-text-lg);
  font-weight: var(--dh-weight-semibold);
  color: var(--dh-color-text);
}

.dh-empty-state__body {
  font-size: var(--dh-text-sm);
  max-width: 320px;
}

/* ============================================
   Date Range Picker (lightweight)
   ============================================ */

.dh-daterange {
  display: inline-flex;
  align-items: center;
  gap: var(--dh-space-2);
  background: var(--dh-color-surface);
  border: 1px solid var(--dh-color-border-light);
  border-radius: var(--dh-radius-md);
  padding: var(--dh-space-2) var(--dh-space-3);
  font-size: var(--dh-text-sm);
  color: var(--dh-color-text);
  cursor: pointer;
  transition: border-color var(--dh-duration-fast) var(--dh-ease-out);
}

.dh-daterange:hover { border-color: var(--dh-brand-primary); }

.dh-daterange__sep  { color: var(--dh-color-text-muted); }