/* dashboard-customization.css
 * Dashboard-scoped density and KPI tile styles — Phase 1
 *
 * SCOPE: ALL selector rules in this file start with .fi-page-dashboard to prevent
 * blast radius to other Filament admin pages. Global token definitions go in theme.css.
 *
 * KPI tile icon approach (Filament 4):
 * Filament 4 StatsOverview renders the icon as a bare .fi-icon SVG inside the stat wrapper
 * (fi-wi-stats-overview-stat). There is no separate icon-container element in the DOM.
 * We apply a unique kpi-stat-* class via Stat::extraAttributes() to the stat wrapper, then
 * target .kpi-stat-* .fi-icon to apply background + color + sizing, creating the 40×40
 * colored icon container effect from the UI-SPEC.
 *
 * Dead code removed in Phase 1 Plan 06:
 *   - .drag-handle (dash-arrange Sortable.js utility — D-10 removed personalization UI)
 *   - .dash-arrange-handle (same)
 *   - #sortable-config-container (same)
 *   - #sortable-container (same)
 *   - .available-widgets-section / .available-widgets-title (no longer rendered)
 *   - .fi-wi-stats-overview-stat-icon.fi-color-* (class does not exist in Filament 4 DOM — replaced below)
 */

/* -------------------------------------------------------------------------
 * KPI Tile Icon Container — compact sizing per UI-SPEC (40px × 40px)
 * Applies to .fi-icon SVG inside each kpi-stat-* wrapper.
 * Scoped to dashboard page only.
 * -------------------------------------------------------------------------
 */
.fi-page-dashboard [class*="kpi-stat-"] .fi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;      /* 40px */
  height: 2.5rem;     /* 40px */
  padding: 0.5rem;    /* 8px inner padding — icon ~24px inside 40px box */
  border-radius: 0.5rem;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * KPI Tile Semantic Colors — scoped to dashboard page.
 * Each rule targets the .fi-icon inside a metric-specific stat wrapper.
 * Colors use CSS custom property tokens defined in theme.css :root block.
 * Both light and dark modes supported via the dark: variants.
 *
 * Color table (UI-SPEC "Semantic KPI tile colors"):
 *   Отправлено  → var(--kpi-sent)          amber/primary
 *   Доставлено  → var(--kpi-delivered)     success/green
 *   Принято     → var(--kpi-accepted)      teal (custom: oklch(70% 0.15 185))
 *   Отложено    → var(--kpi-deferred)      orange (custom: oklch(72% 0.18 50))
 *   Открыто     → var(--kpi-opened)        blue/info
 *   Клики       → var(--kpi-clicked)       purple (custom: oklch(65% 0.22 295))
 *   Отписка     → var(--kpi-unsubscribed)  slate/gray
 *   Жалобы      → var(--kpi-complained)    danger/red
 * -------------------------------------------------------------------------
 */

/* Отправлено — Sent (amber/primary) */
.fi-page-dashboard .kpi-stat-sent .fi-icon {
  background: color-mix(in oklch, var(--kpi-sent) 15%, transparent);
  color: var(--kpi-sent);
}

/* Доставлено — Delivered (success/green) */
.fi-page-dashboard .kpi-stat-delivered .fi-icon {
  background: color-mix(in oklch, var(--kpi-delivered) 15%, transparent);
  color: var(--kpi-delivered);
}

/* Принято — Accepted (teal — custom, no standard Filament name) */
.fi-page-dashboard .kpi-stat-accepted .fi-icon {
  background: color-mix(in oklch, var(--kpi-accepted) 15%, transparent);
  color: var(--kpi-accepted);
}

/* Отложено — Deferred (orange — custom warm orange) */
.fi-page-dashboard .kpi-stat-deferred .fi-icon {
  background: color-mix(in oklch, var(--kpi-deferred) 15%, transparent);
  color: var(--kpi-deferred);
}

/* Открыто — Opened (blue/info) */
.fi-page-dashboard .kpi-stat-opened .fi-icon {
  background: color-mix(in oklch, var(--kpi-opened) 15%, transparent);
  color: var(--kpi-opened);
}

/* Клики — Clicks (purple — custom, no standard Filament name) */
.fi-page-dashboard .kpi-stat-clicked .fi-icon {
  background: color-mix(in oklch, var(--kpi-clicked) 15%, transparent);
  color: var(--kpi-clicked);
}

/* Отписка — Unsubscribed (slate/gray) */
.fi-page-dashboard .kpi-stat-unsubscribed .fi-icon {
  background: color-mix(in oklch, var(--kpi-unsubscribed) 15%, transparent);
  color: var(--kpi-unsubscribed);
}

/* Жалобы — Complaints (danger/red) */
.fi-page-dashboard .kpi-stat-complained .fi-icon {
  background: color-mix(in oklch, var(--kpi-complained) 15%, transparent);
  color: var(--kpi-complained);
}

/* -------------------------------------------------------------------------
 * KPI Tile Typography — per UI-SPEC
 * Value: 24px/600, Label: 12px/600, Body: 14px
 * Scoped to dashboard page only.
 * -------------------------------------------------------------------------
 */

/* KPI value: Display — 24px/600 (UI-SPEC: KPI tile primary value) */
.fi-page-dashboard .fi-wi-stats-overview-stat-value {
  font-size: 1.5rem;    /* 24px */
  font-weight: 600;
  line-height: 1.2;
}

/* KPI label: Label — 12px/600 (UI-SPEC: KPI tile sub-label) */
.fi-page-dashboard .fi-wi-stats-overview-stat-label {
  font-size: 0.75rem;   /* 12px */
  font-weight: 600;
  line-height: 1.4;
}

/* Widget headings: Heading — 16px/600 (UI-SPEC: widget heading, section titles) */
.fi-page-dashboard .fi-wi-stats-overview-heading,
.fi-page-dashboard .fi-wi-chart-heading,
.fi-page-dashboard .fi-wi-table-header-heading {
  font-size: 1rem;      /* 16px */
  font-weight: 600;
  line-height: 1.3;
}

/* -------------------------------------------------------------------------
 * Compact card padding — UI-SPEC md=16px default card body padding
 * -------------------------------------------------------------------------
 */
.fi-page-dashboard .fi-wi-stats-overview-stat {
  padding: 1rem;   /* 16px — compact vs Filament default 1.5rem */
}

/* -------------------------------------------------------------------------
 * Empty state — per UI-SPEC States table
 * "Нет данных за выбранный период" / "Попробуйте изменить диапазон дат или фильтры."
 * Applied to Filament table widget empty states and ApexCharts noData text.
 * -------------------------------------------------------------------------
 */
.fi-page-dashboard .fi-ta-empty-state-heading {
  content: 'Нет данных за выбранный период';
}

/* Empty state heading override via CSS for table widgets */
.fi-page-dashboard .fi-ta-empty-state-heading {
  font-size: 0.875rem;  /* 14px — body size */
  font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Dashboard header utility — keep the dashboard header margin
 * -------------------------------------------------------------------------
 */
.fi-page-dashboard .dashboard-header {
  margin-bottom: 1rem;
}