/* eGov Tisza — Presentation Stylesheet
   Theme: Tisza Blue dark (default) + light option
   Font: Inter (Google Fonts) — replaces Segoe UI
   Version: v2.0 | Unified with vc-design-system tokens */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap&subset=latin-ext');

/* ===== DESIGN SYSTEM TOKENS ===== */
:root {
  /* Tisza Blue palette */
  --color-primary-900: #080c21;
  --color-primary-800: #0e163d;
  --color-primary-700: #161a32;
  --color-primary-600: #172364;
  --color-primary-500: #253ba3;
  --color-primary-400: #334ed1;
  --color-primary-300: #425199;
  --color-primary-200: #6674bd;
  --color-primary-100: #cdd4f4;
  --color-primary-10:  #f4f5fa;
  --color-primary-25:  #e6e9f9;
  --color-neutral-0:   #ffffff;

  /* Semantic status colors */
  --color-success-300: #3bd892;
  --color-success-500: #24b573;
  --color-danger-300:  #f16a73;
  --color-danger-500:  #df1623;
  --color-warning-400: #fea92a;
  --color-warning-500: #f18f01;
  --color-info-300:    #38d7ff;
  --color-info-500:    #00bceb;

  /* Typography */
  --font-family:          'Inter', system-ui, sans-serif;
  --font-mono:            'Source Code Pro', ui-monospace, monospace;
  --font-size-xs:         12px;
  --font-size-nav:        13px;
  --font-size-sm:         14px;
  --font-size-base:       16px;
  --font-size-lg:         20px;
  --font-size-xl:         24px;
  --font-size-2xl:        30px;
  --font-size-3xl:        36px;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:    1.25;
  --line-height-normal:   1.5;
  --line-height-loose:    1.75;

  /* Spacing (8px grid) */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Elevation */
  --shadow-color: 8, 12, 33;
  --shadow-xs: 0 1px 2px rgba(var(--shadow-color), 0.04);
  --shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.06);
  --shadow-md: 0 2px 8px rgba(var(--shadow-color), 0.10);

  --transition-fast: 0.15s ease;

  /* Diagram level colors */
  --l0: #818cf8; --l1: #60a5fa; --l2: #34d399;
  --l3: var(--color-warning-400); --l4: #fb923c;
  --l5: #f87171; --l6: #a78bfa; --l7: var(--color-info-300); --l8: #2dd4bf;
}

/* ===== DARK THEME (default — presentations) ===== */
:root, [data-theme="dark"] {
  --bg-page:          var(--color-primary-900);
  --bg-card:          var(--color-primary-800);
  --bg-surface:       var(--color-primary-700);
  --bg-nav:           rgba(8, 12, 33, 0.95);
  --text-primary:     var(--color-neutral-0);
  --text-secondary:   var(--color-primary-100);
  --text-muted:       var(--color-primary-200);
  --accent:           var(--color-primary-400);
  --accent-dim:       rgba(51, 78, 209, 0.18);
  --accent-amber:     var(--color-warning-400);
  --accent-amber-dim: rgba(254, 169, 42, 0.15);
  --accent-success:   var(--color-success-300);
  --accent-danger:    var(--color-danger-300);
  --border-card:      rgba(51, 78, 209, 0.25);
  --border-subtle:    rgba(255, 255, 255, 0.06);
}

/* ===== LIGHT THEME (background material, print) ===== */
[data-theme="light"] {
  --bg-page:          var(--color-neutral-0);
  --bg-card:          var(--color-primary-10);
  --bg-surface:       var(--color-primary-25);
  --bg-nav:           rgba(244, 245, 250, 0.95);
  --text-primary:     var(--color-primary-900);
  --text-secondary:   var(--color-primary-600);
  --text-muted:       var(--color-primary-300);
  --accent:           var(--color-primary-500);
  --accent-dim:       rgba(37, 59, 163, 0.10);
  --accent-amber:     var(--color-warning-500);
  --accent-amber-dim: rgba(241, 143, 1, 0.12);
  --accent-success:   var(--color-success-500);
  --accent-danger:    var(--color-danger-500);
  --border-card:      rgba(37, 59, 163, 0.18);
  --border-subtle:    rgba(0, 0, 0, 0.06);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}

/* ===== NAVIGATION ===== */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg-nav);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-card);
  padding: 0 var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  overflow-x: auto;
  white-space: nowrap;
}

nav::-webkit-scrollbar { height: 3px; }
nav::-webkit-scrollbar-thumb { background: var(--border-card); border-radius: 2px; }

.nav-brand {
  color: var(--accent);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  text-decoration: none;
  margin-right: var(--spacing-md);
  flex-shrink: 0;
}

nav a.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--font-size-nav);
  padding: var(--spacing-sm) var(--spacing-sm);
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

nav a.nav-link:hover,
nav a.nav-link.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

/* ===== SLIDE LAYOUT ===== */
.page-wrap {
  max-width: 1400px;
  margin: 0 auto;
  max-height: calc(100vh - 50px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg) var(--spacing-2xl);
}

/* ===== TYPOGRAPHY ===== */
.page-header { margin-bottom: var(--spacing-md); }

h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--accent);
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-tight);
}

h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: var(--spacing-md) 0 var(--spacing-sm);
}

strong { color: var(--accent-amber); }
p { margin-bottom: var(--spacing-md); }
a { color: var(--accent); }

/* ===== SLIDE MESSAGE (one-liner) ===== */
/* 20px — was 28px; semibold, centered, subtle bottom border */
.slide-message {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  text-align: center;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  line-height: var(--line-height-tight);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-card);
}

/* ===== SVG SLIDE AREA ===== */
.slide-svg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}
.slide-svg svg { width: 100%; max-height: 65vh; }

/* ===== DIAGRAM WRAP ===== */
.diagram-wrap {
  margin: var(--spacing-lg) 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.diagram-wrap svg { display: block; max-width: 100%; height: auto; }

/* ===== SUMMARY BOX ===== */
/* 15px body — was 18px; amber left border, dark card bg */
.summary-box {
  background: var(--bg-card);
  border-left: 4px solid var(--accent-amber);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  margin-top: auto;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: var(--line-height-loose);
  box-shadow: var(--shadow-sm);
}

.summary-box h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--accent-amber);
  margin: 0 0 var(--spacing-sm);
}

.summary-box p {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: var(--line-height-loose);
  margin-bottom: var(--spacing-sm);
}
.summary-box p:last-child { margin-bottom: 0; }

/* ===== PAGE FOOTER ===== */
.page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--border-card);
  font-size: var(--font-size-sm);
}

.page-footer a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
  transition: all var(--transition-fast);
}

.page-footer a:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: var(--shadow-xs);
}

.page-info {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
}

/* ===== DATA TABLE ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  margin: var(--spacing-md) 0;
}

.data-table th {
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border-bottom: 2px solid var(--border-card);
}

.data-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--text-primary);
}

.data-table tr:hover td { background: var(--accent-dim); }

/* ===== HIGHLIGHT BOX ===== */
.highlight-box {
  background: var(--accent-dim);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  margin: var(--spacing-md) 0;
  box-shadow: var(--shadow-xs);
}

/* ===== TAG PILL ===== */
.tag-pill {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px var(--spacing-sm);
  border-radius: 20px;
  margin: 2px;
}

/* Status icons */
.ok::before      { content: '✅ '; }
.miss::before    { content: '❌ '; }
.partial::before { content: '⚠️ '; }

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-card), transparent);
  margin: var(--spacing-xl) 0;
}

/* ===== STAT CARD ===== */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

@media (max-width: 720px) { .stats-bar { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}
.stat-card:hover { box-shadow: var(--shadow-md); }

.stat-card .num {
  font-size: var(--font-size-3xl);
  font-weight: 800;
  display: block;
  line-height: 1.1;
  color: var(--accent);
}

.stat-card .lbl {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--spacing-xs);
  display: block;
}

/* ===== SLIDE CHAPTER LINKS ===== */
/* Horizontal list of sub-chapter links at bottom of summary slide */
.slide-chapter-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--border-card);
}

.slide-chapter-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-card);
  transition: all var(--transition-fast);
}

.slide-chapter-links a:hover,
.slide-chapter-links a.active {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ===== SLIDE KPI GRID ===== */
/* 2x2 or 3-column grid of KPI cards */
.slide-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

/* ===== SLIDE KPI CARD ===== */
.slide-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.slide-kpi-card .kpi-value {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  color: var(--accent);
  margin-bottom: var(--spacing-xs);
}

.slide-kpi-card .kpi-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xs);
}

.slide-kpi-card .kpi-status {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 2px var(--spacing-sm);
  border-radius: 20px;
}

/* KPI status modifier variants */
.slide-kpi-card.kpi-success { border-top-color: var(--accent-success); }
.slide-kpi-card.kpi-success .kpi-value { color: var(--accent-success); }

.slide-kpi-card.kpi-warning { border-top-color: var(--accent-amber); }
.slide-kpi-card.kpi-warning .kpi-value { color: var(--accent-amber); }

.slide-kpi-card.kpi-danger { border-top-color: var(--accent-danger); }
.slide-kpi-card.kpi-danger .kpi-value { color: var(--accent-danger); }

/* ===== PRINT: A4 Landscape ===== */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  nav { display: none; }
  .page-wrap { padding: 0; max-height: none; overflow: visible; }
  body { background: var(--color-neutral-0) !important; color: var(--color-primary-900) !important; font-size: 11pt; }
  h1 { color: var(--color-primary-600) !important; }
  .summary-box { border-color: var(--color-primary-200) !important; background: var(--color-primary-10) !important; }
  .data-table th { background: var(--color-primary-25) !important; color: var(--color-primary-700) !important; }
  .stat-card, .slide-kpi-card, .highlight-box {
    background: var(--color-primary-10) !important;
    border-color: var(--color-primary-100) !important;
    box-shadow: none !important;
  }
  .page-footer a { border-color: var(--color-primary-100) !important; color: var(--color-primary-700) !important; }
  a { color: var(--color-primary-900) !important; }
  tr { page-break-inside: avoid; }
}