/* ══════════════════════════════════════════════════════════════
   EXECUTIVE CARD SYSTEM — Shared Component Styles (Release 16.6)
   Theme-aware · Token-driven · Palette-aware · Responsive
   Design System: Microsoft/Atlassian/Monday.com-grade consistency
   
   Usage: var(--exec-card-bg), var(--exec-kpi-color), etc.
   ══════════════════════════════════════════════════════════════ */

/* ── Card Shell ── */
.exec-card {
  border-radius: var(--radius-lg, 16px);
  padding: var(--card-padding, 28px);
  transition: all var(--transition-normal, 0.25s) ease;
  background: var(--exec-card-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--exec-card-border, rgba(255,255,255,0.06));
}
.exec-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.4));
}
body.style-colorblind .exec-card {
  border-width: 2px;
  border-radius: 8px;
}

/* ── Card Size Variants ── */
.exec-card-sm {
  padding: var(--spacing-lg, 24px);
}
.exec-card-lg {
  padding: var(--card-padding-lg, 36px);
}

/* ── KPI Value ── */
.exec-kpi {
  font-size: var(--font-display-kpi, 48px);
  font-weight: var(--font-weight-extrabold, 800);
  line-height: var(--line-height-tight, 1);
  letter-spacing: var(--letter-spacing-tight, -0.03em);
}
.exec-kpi-medium {
  font-size: var(--font-page-title, 40px);
}
.exec-kpi-small {
  font-size: var(--font-section-title, 32px);
}

/* ── Card Icon Container ── */
.exec-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
body.style-colorblind .exec-icon {
  border: 2px solid;
}

/* ── Card Title / Label ── */
.exec-label {
  font-size: var(--font-supporting, 15px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, rgba(255,255,255,0.35));
}
.exec-title {
  font-size: var(--font-card-title, 22px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-primary, #ffffff);
}
.exec-subtitle {
  font-size: var(--font-body, 16px);
  color: var(--text-muted, rgba(255,255,255,0.35));
}

/* ── Card Body ── */
.exec-body {
  font-size: var(--font-body, 16px);
  color: var(--text-secondary, rgba(255,255,255,0.55));
  line-height: var(--line-height-relaxed, 1.7);
}
.exec-metric-label {
  font-size: var(--font-supporting, 15px);
  color: var(--text-muted, rgba(255,255,255,0.3));
  margin-bottom: 4px;
}
.exec-metric-value {
  font-size: var(--font-body, 16px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-primary, #ffffff);
}

/* ── Section Cell (inside cards) ── */
.exec-cell {
  padding: var(--spacing-md, 16px);
  border-radius: var(--radius-md, 12px);
  background: var(--surface-overlay, rgba(255,255,255,0.03));
}

/* ── Progress Bars ── */
.exec-bar {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-overlay, rgba(255,255,255,0.05));
}
.exec-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;
}

/* ── Grid Layouts ── */
.exec-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg, 24px);
}
.exec-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md, 16px);
}
@media (max-width: 768px) {
  .exec-grid-2, .exec-grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .exec-grid-4 { grid-template-columns: 1fr 1fr; }
}

/* ── Trend Indicators ── */
.exec-trend-up { color: var(--color-success, #34d399); }
.exec-trend-down { color: var(--color-danger, #f87171); }
.exec-trend-flat { color: var(--text-muted, #94a3b8); }

/* ── Status Badges ── */
.exec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-supporting, 15px);
  font-weight: var(--font-weight-semibold, 600);
}
body.style-colorblind .exec-badge {
  border: 2px solid;
}

/* ── Priority Badges ── */
.exec-priority-p1 { background: rgba(248,113,113,0.15); color: #f87171; }
.exec-priority-p2 { background: rgba(251,191,36,0.15); color: #fbbf24; }
.exec-priority-p3 { background: rgba(96,165,250,0.15); color: #60a5fa; }

/* ── Decision Section ── */
.exec-decision-cost { background: rgba(248,113,113,0.04); border: 1px solid rgba(248,113,113,0.1); }
.exec-decision-benefit { background: rgba(52,211,153,0.04); border: 1px solid rgba(52,211,153,0.1); }

/* ══════════════════════════════════════════════════════════════
   DESIGN SYSTEM COMPONENTS (Release 16.6)
   ══════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-height, 44px);
  padding: 8px 22px;
  border-radius: var(--radius-md, 12px);
  font-size: var(--font-body, 16px);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast, 0.15s) ease;
}
.ds-btn:hover {
  transform: translateY(-1px);
}
.ds-btn:active {
  transform: translateY(0);
}

.ds-btn-primary {
  background: var(--color-primary, #6366f1);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}
.ds-btn-primary:hover {
  background: var(--color-primary-hover, #4f46e5);
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}

.ds-btn-secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06));
  color: var(--text-primary, #fff);
}
.ds-btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--surface-border-hover, rgba(255,255,255,0.12));
}

.ds-btn-ghost {
  background: transparent;
  color: var(--text-secondary, rgba(255,255,255,0.5));
}
.ds-btn-ghost:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary, #fff);
}

.ds-btn-success {
  background: var(--color-success, #059669);
  color: #fff;
}
.ds-btn-success:hover {
  background: var(--color-success-hover, #047857);
}

.ds-btn-danger {
  background: var(--color-danger, #e11d48);
  color: #fff;
}
.ds-btn-danger:hover {
  background: var(--color-danger-hover, #be123c);
}

/* ── Button Size Variants ── */
.ds-btn-sm {
  min-height: 36px;
  padding: 6px 16px;
  font-size: var(--font-supporting, 15px);
}
.ds-btn-lg {
  min-height: 52px;
  padding: 12px 28px;
  font-size: var(--font-body, 16px);
  font-weight: var(--font-weight-bold, 700);
}

/* ── Inputs ── */
.ds-input {
  min-height: var(--input-height, 48px);
  padding: 10px 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06));
  background: var(--surface-card, rgba(255,255,255,0.02));
  color: var(--text-primary, #fff);
  font-size: var(--font-body, 16px);
  outline: none;
  transition: all var(--transition-fast, 0.15s) ease;
}
.ds-input:focus {
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.ds-input::placeholder {
  color: var(--text-muted, rgba(255,255,255,0.25));
}

.ds-select {
  min-height: var(--input-height, 48px);
  padding: 10px 40px 10px 16px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06));
  background: var(--surface-card, rgba(255,255,255,0.02));
  color: var(--text-primary, #fff);
  font-size: var(--font-body, 16px);
  font-weight: var(--font-weight-semibold, 600);
  outline: none;
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s) ease;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.ds-select:focus {
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

/* ── Section Spacing ── */
.ds-section {
  margin-bottom: var(--section-spacing, 64px);
}
.ds-section-lg {
  margin-bottom: var(--section-spacing-lg, 96px);
}

/* ── Typography Classes ── */
.ds-display-kpi {
  font-size: var(--font-display-kpi, 48px);
  font-weight: var(--font-weight-extrabold, 800);
  line-height: var(--line-height-tight, 1);
  letter-spacing: var(--letter-spacing-tight, -0.03em);
}
.ds-page-title {
  font-size: var(--font-page-title, 40px);
  font-weight: var(--font-weight-extrabold, 800);
  line-height: var(--line-height-tight, 1.1);
  letter-spacing: var(--letter-spacing-tight, -0.02em);
}
.ds-section-title {
  font-size: var(--font-section-title, 32px);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.15);
  letter-spacing: var(--letter-spacing-tight, -0.015em);
}
.ds-card-title {
  font-size: var(--font-card-title, 22px);
  font-weight: var(--font-weight-bold, 700);
}
.ds-subheading {
  font-size: var(--font-subheading, 18px);
  font-weight: var(--font-weight-semibold, 600);
}
.ds-body {
  font-size: var(--font-body, 16px);
  line-height: var(--line-height-relaxed, 1.7);
  color: var(--text-secondary, rgba(255,255,255,0.55));
}
.ds-supporting {
  font-size: var(--font-supporting, 15px);
  color: var(--text-muted, rgba(255,255,255,0.3));
}
.ds-caption {
  font-size: var(--font-caption, 13px);
  color: var(--text-muted, rgba(255,255,255,0.25));
}

/* ── Glassmorphism Card ── */
.ds-glass {
  background: rgba(15, 20, 40, 0.65) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: var(--radius-lg, 16px) !important;
}
body.theme-ai-futuristic .ds-glass {
  background: rgba(10, 14, 30, 0.7) !important;
  border-color: rgba(79, 124, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(79, 124, 255, 0.06) !important;
}
body.theme-ai-futuristic .ds-glass:hover {
  box-shadow: 0 8px 30px rgba(79, 124, 255, 0.12), 0 0 20px rgba(79, 124, 255, 0.1) !important;
}

/* ── KPI Card (standard pattern) ── */
.ds-kpi-card {
  border-radius: var(--radius-lg, 16px);
  padding: var(--card-padding, 28px);
  text-align: center;
  border: 1px solid var(--surface-border, rgba(255,255,255,0.06));
  background: var(--surface-card, rgba(255,255,255,0.02));
  transition: all var(--transition-normal, 0.25s) ease;
}
.ds-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--surface-border-hover, rgba(255,255,255,0.12));
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.3));
}
.ds-kpi-value {
  font-size: var(--font-display-kpi, 48px);
  font-weight: var(--font-weight-extrabold, 800);
  line-height: 1;
  letter-spacing: -0.03em;
}
.ds-kpi-label {
  font-size: var(--font-supporting, 15px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ds-kpi-subtext {
  font-size: var(--font-supporting, 15px);
  color: var(--text-muted, rgba(255,255,255,0.25));
  margin-top: 4px;
}

/* ── Small Badge (for validation / trust badges) ── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 18px;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-supporting, 15px);
  font-weight: var(--font-weight-semibold, 600);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55);
  transition: all var(--transition-fast, 0.15s) ease;
}
.ds-badge:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,0.2);
  background: rgba(99,102,241,0.04);
  color: #818cf8;
  box-shadow: 0 0 12px rgba(99,102,241,0.08);
}
.ds-badge i {
  font-size: 14px;
}

body.theme-ai-futuristic .ds-badge {
  background: rgba(79, 124, 255, 0.06) !important;
  border-color: rgba(79, 124, 255, 0.12) !important;
  backdrop-filter: blur(8px) !important;
}
body.theme-ai-futuristic .ds-badge:hover {
  background: rgba(79, 124, 255, 0.1) !important;
  border-color: rgba(79, 124, 255, 0.25) !important;
  box-shadow: 0 0 16px rgba(79, 124, 255, 0.15) !important;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .exec-card { padding: var(--spacing-lg, 24px); }
  .ds-kpi-card { padding: var(--spacing-lg, 24px); }
  .ds-display-kpi, .exec-kpi { font-size: 36px; }
  .ds-page-title { font-size: 28px; }
  .ds-section-title { font-size: 24px; }
  .ds-card-title { font-size: 18px; }
}