/* -------------------------------------------------------------------
   Stage 105.0A CLEAN — UI v2 Readiness / Frontend Stability Foundation
   Frontend-only UI v2 foundation layer for ISP Forge.

   Purpose:
   - Provide safe UI v2 design tokens and reusable helper classes.
   - Prepare the live platform for the full UI v2 conversion.
   - Avoid changing route ownership, popup behaviour, API calls, or business logic.

   This file intentionally avoids broad overrides of existing v1 page layouts.
   Future UI v2 stages can opt into these variables/classes page-by-page.
------------------------------------------------------------------- */

:root {
  --ui-v2-stage: "105.0A CLEAN";
  --ui-v2-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ui-v2-bg: #f5f7fb;
  --ui-v2-surface: #ffffff;
  --ui-v2-surface-soft: #f8fafc;
  --ui-v2-surface-muted: #eef2f7;
  --ui-v2-border: rgba(15, 23, 42, 0.10);
  --ui-v2-border-strong: rgba(15, 23, 42, 0.18);
  --ui-v2-text: #0f172a;
  --ui-v2-muted: #64748b;
  --ui-v2-heading: #07111f;

  --ui-v2-primary: #1d4ed8;
  --ui-v2-primary-soft: rgba(29, 78, 216, 0.10);
  --ui-v2-success: #15803d;
  --ui-v2-warning: #b45309;
  --ui-v2-danger: #b91c1c;
  --ui-v2-info: #0369a1;

  --ui-v2-radius-sm: 8px;
  --ui-v2-radius-md: 12px;
  --ui-v2-radius-lg: 16px;
  --ui-v2-radius-xl: 22px;

  --ui-v2-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --ui-v2-shadow-md: 0 14px 35px rgba(15, 23, 42, 0.10);
  --ui-v2-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.16);

  --ui-v2-space-1: 4px;
  --ui-v2-space-2: 8px;
  --ui-v2-space-3: 12px;
  --ui-v2-space-4: 16px;
  --ui-v2-space-5: 20px;
  --ui-v2-space-6: 24px;
  --ui-v2-space-8: 32px;
}

[data-theme="dark"],
html.dark,
body.dark,
body.theme-dark {
  --ui-v2-bg: #07111f;
  --ui-v2-surface: #0f172a;
  --ui-v2-surface-soft: #111c2f;
  --ui-v2-surface-muted: #172238;
  --ui-v2-border: rgba(226, 232, 240, 0.14);
  --ui-v2-border-strong: rgba(226, 232, 240, 0.22);
  --ui-v2-text: #e5eefb;
  --ui-v2-muted: #9fb0c8;
  --ui-v2-heading: #f8fafc;
  --ui-v2-primary-soft: rgba(96, 165, 250, 0.16);
  --ui-v2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --ui-v2-shadow-md: 0 14px 35px rgba(0, 0, 0, 0.35);
  --ui-v2-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.42);
}

html[data-ispforge-ui-v2="readiness"] {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Opt-in helpers for upcoming UI v2 page conversions. These classes do not
   affect existing v1 pages unless a future stage explicitly applies them. */
.ui-v2-page-shell {
  display: grid;
  gap: var(--ui-v2-space-5);
}

.ui-v2-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ui-v2-space-4);
}

.ui-v2-card {
  background: var(--ui-v2-surface);
  border: 1px solid var(--ui-v2-border);
  border-radius: var(--ui-v2-radius-lg);
  box-shadow: var(--ui-v2-shadow-sm);
  color: var(--ui-v2-text);
  padding: var(--ui-v2-space-5);
}

.ui-v2-card-header {
  align-items: flex-start;
  display: flex;
  gap: var(--ui-v2-space-4);
  justify-content: space-between;
  margin-bottom: var(--ui-v2-space-4);
}

.ui-v2-card-title {
  color: var(--ui-v2-heading);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.25;
  margin: 0;
}

.ui-v2-card-subtitle {
  color: var(--ui-v2-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  margin: var(--ui-v2-space-1) 0 0;
}

.ui-v2-kpi-row {
  display: grid;
  gap: var(--ui-v2-space-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ui-v2-kpi-card {
  background: linear-gradient(180deg, var(--ui-v2-surface), var(--ui-v2-surface-soft));
  border: 1px solid var(--ui-v2-border);
  border-radius: var(--ui-v2-radius-lg);
  box-shadow: var(--ui-v2-shadow-sm);
  padding: var(--ui-v2-space-4);
}

.ui-v2-kpi-label {
  color: var(--ui-v2-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-v2-kpi-value {
  color: var(--ui-v2-heading);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  margin-top: var(--ui-v2-space-2);
}

.ui-v2-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-v2-space-3);
  justify-content: space-between;
}

.ui-v2-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-v2-space-2);
}

.ui-v2-table-wrap {
  background: var(--ui-v2-surface);
  border: 1px solid var(--ui-v2-border);
  border-radius: var(--ui-v2-radius-lg);
  box-shadow: var(--ui-v2-shadow-sm);
  overflow: auto;
}

.ui-v2-badge {
  align-items: center;
  border: 1px solid var(--ui-v2-border);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 750;
  gap: 6px;
  line-height: 1;
  padding: 6px 10px;
  white-space: nowrap;
}

.ui-v2-badge-success { background: rgba(21, 128, 61, 0.10); color: var(--ui-v2-success); }
.ui-v2-badge-warning { background: rgba(180, 83, 9, 0.10); color: var(--ui-v2-warning); }
.ui-v2-badge-danger { background: rgba(185, 28, 28, 0.10); color: var(--ui-v2-danger); }
.ui-v2-badge-info { background: rgba(3, 105, 161, 0.10); color: var(--ui-v2-info); }

.ui-v2-empty-state {
  align-items: center;
  color: var(--ui-v2-muted);
  display: grid;
  gap: var(--ui-v2-space-2);
  justify-items: center;
  padding: var(--ui-v2-space-8);
  text-align: center;
}

@media (max-width: 780px) {
  .ui-v2-card-header,
  .ui-v2-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}