/* ============================================================
   IMPORTANT:
   Colors are NOT defined here. They live in colors.css and
   are referenced via CSS Custom Properties: var(--name).
   Make sure colors.css is loaded before this file in index.html.
   ============================================================ */


/* ============================================================
   GLOBAL RESET
   Removes default browser margins, paddings and sets
   a consistent box model for all elements
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* ============================================================
   BODY
   Base background and text color for the whole page
   ============================================================ */
body {
  background-color: var(--color-bg-page);
  color: var(--color-text);
}


/* ============================================================
   HEADER
   Top bar containing the main page title (h1)
   ============================================================ */
header {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  padding: 24px 32px;
  text-align: center;
}

header h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
}


/* ============================================================
   NAVIGATION BAR
   Row of buttons used to switch between screens.
   Sits directly below the header.
   ============================================================ */
nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 32px;
  background-color: var(--color-bg-surface);
  border-bottom: 2px solid var(--color-border-nav);
  flex-wrap: wrap;
}

/* ── Single nav button ── */
nav button {
  padding: 10px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  background-color: var(--color-bg-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

/* ── Button: hovered OR currently active screen ── */
nav button:hover,
nav button.active {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}


/* ============================================================
   MAIN CONTENT AREA
   Wrapper that centers and limits the width of page content
   ============================================================ */
main {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
}


/* ============================================================
   SCREEN SECTIONS
   Each screen (ekran1, ekran2...) is a <div class="screen">.
   Only the one with class "active" is visible at a time.
   Toggling is handled by script.js → switchScreen()
   ============================================================ */
.screen {
  display: none;
}

.screen.active {
  display: block;
}


/* ============================================================
   TABLE WRAPPER
   Container around each table — includes the section title (h2)
   and provides spacing between tables
   ============================================================ */
.table-wrapper {
  margin-bottom: 40px;
}

/* ── Section title above each table ── */
.table-wrapper h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
  border-left: 4px solid var(--color-primary);
  padding-left: 10px;
}


/* ============================================================
   TABLE — BASE STYLES
   Applies to both Table 1 (6 columns) and Table 2 (7 columns)
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-bg-surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden;
}


/* ============================================================
   TABLE HEADER — MAIN ROW
   Dark background for all <th> elements in <thead>
   ============================================================ */
thead tr th {
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
  padding: 12px 16px;
  text-align: center;
  font-size: 0.9rem;
  border: 1px solid var(--color-border-header);
}

/* ── Sub-header row (used in Table 2 for K3/K4 split) ── */
thead tr.subrow th {
  background-color: var(--color-header-mid);
  font-size: 0.85rem;
}

/* ── Merged header cell (colspan="2") ──
   Used in Table 2 to visually combine K3 and K4 columns.
   ============================================================ */
thead tr th.merged {
  /* Same as regular header — no special color */
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
}


/* ============================================================
   TABLE BODY — ROWS AND CELLS
   ============================================================ */
tbody tr td {
  padding: 10px 16px;
  text-align: center;
  border: 1px solid var(--color-border-cell);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ── Zebra striping — every even row gets a light background ── */
tbody tr:nth-child(even) {
  background-color: var(--color-bg-row-alt);
}

/* ── Row highlight on mouse hover ── */
tbody tr:hover {
  background-color: var(--color-primary-light);
}


/* ============================================================
   PLACEHOLDER TEXT
   Used inside empty screens (ekran2, ekran3, ekran4)
   to indicate content is not yet added
   ============================================================ */
.placeholder {
  color: var(--color-text-muted);
  text-align: center;
  padding: 60px 0;
  font-size: 1.1rem;
}


/* ============================================================
   SCHEDULE TABLE  (.schedule-table)
   A lightweight, calendar-like table with 7 columns.
   No outer box, no heavy borders — only thin row separators.

   Column roles:
     Col 1, 2          — left content group
     Col 3 .sep-dash   — visual separator: repeating dash characters
                         between col 2 and col 4
     Col 4, 5          — middle content group
     Col 6 .sep-pipe   — visual separator: pipe character "|"
                         between col 5 and col 7
     Col 7             — right content group
   ============================================================ */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background-color: transparent; /* Blends with page — no card look */
  box-shadow: none;              /* No shadow */
  border-radius: 0;
}

/* ── Regular data cell ── */
.schedule-table tbody tr td {
  padding: 10px 14px;
  border: none;                                       /* No cell borders */
  border-bottom: 1px solid var(--color-border-cell);  /* Only row separator */
  font-size: 0.9rem;
  color: var(--color-text-table);
  text-align: left;
  vertical-align: middle;
}

/* ── Last row — remove bottom border ── */
.schedule-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Row hover highlight ── */
.schedule-table tbody tr:hover td {
  background-color: var(--color-mouse-blue);
}

/* ── Col 3: dash separator ——————————
   Narrow column filled with em-dash characters.
   Muted color so it reads as a divider line, not content.
   ---------------------------------------------------------- */
.schedule-table td.sep-dash {
  text-align: center;
  color: var(--color-border-cell); /* Light grey — unobtrusive */
  letter-spacing: 3px;             /* Space out dashes evenly */
  font-size: 0.85rem;
  width: 90px;                     /* Keep separator narrow */
  user-select: none;               /* Block accidental text selection */
}

/* ── Col 6: pipe separator |
   Very narrow column, single pipe character centered.
   Same muted color as dash separator for visual consistency.
   ---------------------------------------------------------- */
.schedule-table td.sep-pipe {
  text-align: center;
  color: var(--color-border-cell); /* Light grey */
  font-size: 1.2rem;
  font-weight: 300;
  width: 24px;                     /* Minimal width */
  padding: 10px 4px;
  user-select: none;               /* Block accidental text selection */
}


/* ============================================================
   EKRAN 2 — CONTROL ROW
   Inline label + number spinner displayed side by side.
   ============================================================ */
.control-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

/* ── Static label text next to the input ── */
.control-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

/* ── Number spinner input field ── */
.number-input {
  width: 72px;
  padding: 6px 10px;
  font-size: 1rem;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  color: var(--color-text);
  background-color: var(--color-bg-surface);
  text-align: center;
  outline: none;
}

.number-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-mouse-blue);
}


/* ============================================================
   EKRAN 2 — SCHEDULE TABLE WITH HEADERS (.schedule-headed)
   Extends .schedule-table with lightweight bold column headers.
   No dark background — headers are plain bold text with a
   bottom border to separate them from data rows.
   ============================================================ */
.schedule-headed thead tr th {
  font-weight: 700;              /* Bold header text */
  font-size: 0.9rem;
  text-align: left;
  padding: 8px 14px;
  background-color: transparent; /* No filled background */
  color: var(--color-text);
  border: none;
  border-bottom: 2px solid var(--color-border-nav); /* Simple underline */
}

/* ── Merged header cell for K3/K4 in schedule-headed ── */
.schedule-headed thead th.sh-merged {
  /* Same as regular schedule headers */
  text-align: center;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border-nav);
}

/* ── Default dash content in columns 3 and 4 ── */
.dash-default {
  color: var(--color-border-cell); /* Muted, unobtrusive */
  text-align: center;
  font-size: 0.9rem;
}


/* ============================================================
   EKRAN 3 — SCROLLABLE TABLE (.scroll-table)
   Standard box-style table.
   The <thead> is fixed; <tbody> scrolls independently inside
   .scroll-body-wrapper with a defined max-height.
   Both <thead> and <tbody> use the same column widths via
   table-layout: fixed on the outer and inner tables.
   ============================================================ */

/* Shared column layout for both header and body tables */
.scroll-table {
  width: 100%;
  table-layout: fixed;    /* Equal column widths, prevents layout shift */
  border-collapse: collapse;
  background-color: var(--color-bg-surface);
}

/* Header table — sits above the scroll wrapper, no bottom radius */
.scroll-table thead tr th {
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
  padding: 12px 10px;
  text-align: center;
  font-size: 0.85rem;
  border: 1px solid var(--color-border-header);
}

.scroll-table thead tr.subrow th {
  background-color: var(--color-header-mid);
  font-size: 0.8rem;
  padding: 6px 10px;
}

.scroll-table thead th.merged {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

/* ── Scrollable wrapper — fixed height, shows ~15 rows ──
   Row height ~40px × 15 rows = 600px
   ---------------------------------------------------------- */
.scroll-body-wrapper {
  max-height: 600px;        /* Visible area — approx 15 rows */
  overflow-y: auto;         /* Vertical scrollbar when needed */
  border: 1px solid var(--color-border-header);
  border-top: none;         /* Header table already has bottom border */
}

/* ── Body table inside the scrollable wrapper ── */
.scroll-body tbody tr td {
  padding: 10px;
  text-align: center;
  border: 1px solid var(--color-border-cell);
  font-size: 0.875rem;
  color: var(--color-text-table);
}

.scroll-body tbody tr:nth-child(even) {
  background-color: var(--color-bg-row-alt);
}

.scroll-body tbody tr:hover td {
  background-color: var(--color-mouse-blue);
}

/* ── Info text below the scrollable table ── */
.scroll-info {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: right;
}


/* ============================================================
   ACTION BUTTONS  (.action-btn)
   Secondary buttons used inside screens (not in nav).
   Smaller than nav buttons, same color scheme.
   ============================================================ */
.action-btn {
  padding: 7px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  background-color: var(--color-bg-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.action-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

/* ── Active/pressed state — filled — toggled via JS ── */
.action-btn.active {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

/* ── Wider variant for standalone action rows below tables ── */
.action-btn--wide {
  padding: 9px 36px;
  font-size: 0.95rem;
}


/* ============================================================
   EKRAN 2 — EDITABLE CELLS

   .cell-k34   — column 3 & 4 cells, clickable when edit mode on.
                 Cycles through: -  →  0  →  1  →  -
                 When edit mode active, cursor changes to pointer
                 and a subtle highlight shows the cell is clickable.

   .cell-date  — last column (K6) cells.
                 When date edit mode is active, shows a text input
                 for entering a date in European notation DD.MM.YYYY.
   ============================================================ */

/* Editable K3/K4 cell — edit mode OFF (default) */
.cell-k34 {
  text-align: center;
  transition: background-color 0.15s;
}

/* Editable K3/K4 cell — edit mode ON (.edit-k34-active on <table>) */
#ekran2-table.edit-k34-active .cell-k34 {
  cursor: pointer;
  background-color: var(--color-mouse-blue); /* Soft highlight */
}

#ekran2-table.edit-k34-active .cell-k34:hover {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

/* Date cell — edit mode OFF */
.cell-date {
  text-align: center;
  min-width: 110px;
}

/* Date input field inside .cell-date when date edit mode is ON */
.cell-date input[type="text"] {
  width: 100px;
  padding: 4px 6px;
  font-size: 0.85rem;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  text-align: center;
  background-color: var(--color-bg-surface);
  color: var(--color-text);
  outline: none;
}

.cell-date input[type="text"]:focus {
  box-shadow: 0 0 0 2px var(--color-mouse-blue);
}


/* ============================================================
   EKRAN 4 — GENERATED TABLE  (.gen-table)
   Same visual style as standard box tables but generated
   dynamically by JS. Column 3 (.gen-sep) always shows "-".
   ============================================================ */
.gen-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-bg-surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.gen-table thead tr th {
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
  padding: 11px 14px;
  text-align: center;
  font-size: 0.88rem;
  border: 1px solid var(--color-border-header);
}

.gen-table tbody tr td {
  padding: 10px 14px;
  text-align: center;
  border: 1px solid var(--color-border-cell);
  font-size: 0.9rem;
  color: var(--color-text-table);
}

.gen-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-row-alt);
}

.gen-table tbody tr:hover td {
  background-color: var(--color-mouse-blue);
}

/* ── Column 3: separator column, muted dash ── */
.gen-table .gen-sep {
  color: var(--color-border-cell);
  font-size: 1rem;
  width: 48px;
}

/* ── Action row below the generated table ── */
#ekran4-action-row {
  margin-top: 20px;
}


/* ============================================================
   EKRAN 4 — GENERATED TABLE COLUMN WIDTHS

   The table uses <colgroup> with two classes:
     .gen-col-main — fixed equal width for K1, K2, K4, K5
     .gen-col-sep  — narrow fixed width for K3 (separator column)

   This ensures column widths never shift between re-generations.
   ============================================================ */

/* ── K1, K2, K4, K5 — equal, fixed width ── */
.gen-table .gen-col-main {
  width: 24%;  /* 4 × 24% = 96%, leaving 12% for K3 */
}

/* ── K3 — narrow separator column, centered ── */
.gen-table .gen-col-sep {
  width: 4%;
}

/* ── K3 header cell — centered, muted style ── */
.gen-table .gen-th-sep {
  text-align: center;
  color: var(--color-border-cell);
  font-size: 0.8rem;
  letter-spacing: 2px;
}

/* ── K3 body cell (gen-sep) — always centered ── */
.gen-table .gen-sep {
  text-align: center;
  color: var(--color-text-table);
  font-size: 1rem;
}


/* ============================================================
   EKRAN 1+2 — SHARED COLUMN WIDTHS (colgroup classes)
   Tabela 2 on Ekran 1 and the table on Ekran 2 use the same
   colgroup classes so their columns are always identical width.
   ============================================================ */
col.e2-col-main  { width: 17%; }   /* K1 K2 K5 K6 — wide equal */
col.e2-col-small { width: 7%;  }   /* K3 K4 — narrow editable  */
col.e2-col-date  { width: 13%; }   /* K7 — date column          */


/* ============================================================
   EKRAN 2 — SCHEDULE TABLE HEADERS: centered
   ============================================================ */
.schedule-headed thead tr th {
  text-align: center;
}

#ekran2-table tbody tr td {
  text-align: center;
}


/* ============================================================
   EKRAN 2 — EDITABLE CELLS
   ============================================================ */
.cell-k34 {
  text-align: center;
  transition: background-color 0.15s;
}

#ekran2-table.edit-k34-active .cell-k34 {
  cursor: pointer;
  background-color: var(--color-mouse-blue);
}

#ekran2-table.edit-k34-active .cell-k34:hover {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.cell-date {
  text-align: center;
  min-width: 100px;
}

.cell-date input[type="text"] {
  width: 96px;
  padding: 4px 6px;
  font-size: 0.85rem;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  text-align: center;
  background-color: var(--color-bg-surface);
  color: var(--color-text);
  outline: none;
}

.cell-date input[type="text"]:focus {
  box-shadow: 0 0 0 2px var(--color-mouse-blue);
}


/* ============================================================
   EKRAN 3 — SINGLE-TABLE SCROLL (.e3-scroll-container)

   THE FIX FOR COLUMN ALIGNMENT:
   We use ONE <table> with a sticky <thead> inside a scrollable
   <div>. Because it's a single table, the <colgroup> applies
   to both header and body rows — perfect alignment guaranteed.

   .e3-scroll-container  — fixed-height div, scrolls vertically
   .e3-sticky-head th    — sticky: stays at top while body scrolls
   ============================================================ */
.e3-scroll-container {
  max-height: 620px;          /* ~15 rows visible */
  overflow-y: auto;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Sticky header row — stays pinned to top of scroll container */
.e3-sticky-head th {
  position: sticky;
  top: 0;
  z-index: 2;                 /* Stays above body rows when scrolling */
}

/* ── Table inside the scroll container ── */
.e3-table {
  width: 100%;
  table-layout: fixed;        /* Enforces colgroup widths strictly */
  border-collapse: collapse;
  background-color: var(--color-bg-surface);
}

/* ── Header cells ── */
.e3-table thead tr th {
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
  padding: 12px 10px;
  text-align: center;
  font-size: 0.85rem;
  border: 1px solid var(--color-border-header);
}

.e3-table thead tr.subrow th {
  background-color: var(--color-header-mid);
  font-size: 0.8rem;
  padding: 6px 10px;
}

.e3-table thead th.merged {
  /* Same as regular header — no special color for merged columns */
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
}

/* ── Body cells ── */
.e3-table tbody tr td {
  padding: 10px;
  text-align: center;
  border: 1px solid var(--color-border-cell);
  font-size: 0.875rem;
  color: var(--color-text-table);
}

.e3-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-row-alt);
}

.e3-table tbody tr:hover td {
  background-color: var(--color-mouse-blue);
}

/* ── Column widths ──
   K1 K4 K5  — narrow
   K2 K3 K6 K7 — equal main
   K8         — slightly narrower
   ---------------------------------------------------------- */
.e3-table .e3-col-narrow { width: 6%;  }
.e3-table .e3-col-main   { width: 17%; }
.e3-table .e3-col-date   { width: 12%; }


/* ============================================================
   ACTION BUTTONS (.action-btn)
   ============================================================ */
.action-btn {
  padding: 7px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  background-color: var(--color-bg-surface);
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.action-btn:hover,
.action-btn.active {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.action-btn--wide {
  padding: 9px 36px;
  font-size: 0.95rem;
}


/* ============================================================
   EKRAN 4 — GENERATED TABLE (.gen-table)
   ============================================================ */
.gen-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: var(--color-bg-surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.gen-table thead tr th {
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
  padding: 11px 14px;
  text-align: center;
  font-size: 0.88rem;
  border: 1px solid var(--color-border-header);
}

.gen-table tbody tr td {
  padding: 10px 14px;
  text-align: center;
  border: 1px solid var(--color-border-cell);
  font-size: 0.9rem;
  color: var(--color-text-table);
}

.gen-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-row-alt);
}

.gen-table tbody tr:hover td {
  background-color: var(--color-mouse-blue);
}

.gen-table .gen-col-main { width: 22%; }
.gen-table .gen-col-sep  { width: 12%; }

.gen-table .gen-sep {
  text-align: center;
  color: var(--color-text-table);
  font-size: 1rem;
}

.gen-table .gen-th-sep {
  text-align: center;
  color: var(--color-border-cell);
  font-size: 0.8rem;
  letter-spacing: 2px;
}

#ekran4-action-row { margin-top: 20px; }

.scroll-info {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: right;
}


/* ============================================================
   EKRAN 4 — SLIDING CONFIG PANEL  (.config-panel)

   Collapsed by default (max-height: 0, overflow: hidden).
   Class .config-panel--open added by toggleConfigPanel() in JS
   slides it open with a smooth CSS transition.
   ============================================================ */
.config-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin-bottom 0.35s ease;
  background-color: var(--color-bg-surface);
  border-radius: 4px;
  margin-bottom: 0;
}

/* Panel fully open */
.config-panel--open {
  max-height: 400px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border-nav);
}

/* Dark header bar inside the panel */
.config-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 3px 3px 0 0;
}

/* ✕ close button inside panel header */
.config-panel__close {
  background: none;
  border: none;
  color: var(--color-text-on-dark);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.config-panel__close:hover { opacity: 1; }

/* Flex wrap area holding checkboxes */
.config-panel__body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px 16px;
}

/* Single checkbox + label row */
.config-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  min-width: 60px;
}
.config-item:hover { color: var(--color-primary); }

/* Checkbox tick uses primary color */
.config-checkbox {
  accent-color: var(--color-primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}


/* ============================================================
   EKRAN 4 — GENERATED TABLE SPECIAL ROWS

   .gen-row--pause  — odd label: K1 has label, K2 = "pauza"
   .gen-pause-cell  — italic muted style for "pauza" text
   .gen-row--empty  — no label available, all cells blank
   ============================================================ */

/* Pauza row — subtle muted background */
.gen-row--pause td {
  background-color: var(--color-bg-row-alt);
}

/* "pauza" text styling */
.gen-pause-cell {
  font-style: italic;
  color: var(--color-text-muted) !important;
  font-size: 0.85rem;
}

/* Empty row — very faint */
.gen-row--empty td {
  color: var(--color-border-cell);
}


/* ============================================================
   EKRAN 5 — MATRIX TABLE  (.e5-table)
   ============================================================ */
.e5-table {
  border-collapse: collapse;
  background-color: var(--color-bg-surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  table-layout: fixed;
}

.e5-corner {
  background-color: var(--color-header-dark);
  border: 1px solid var(--color-border-header);
  aspect-ratio: 1 / 1;
}

.e5-col-header {
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--color-border-header);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.e5-row-header {
  background-color: var(--color-header-dark);
  color: var(--color-text-on-dark);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid var(--color-border-header);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.e5-cell {
  text-align: center;
  border: 1px solid var(--color-border-cell);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Alternating row background */
.e5-table tbody tr:nth-child(even) .e5-cell,
.e5-table tbody tr:nth-child(even) .e5-diagonal {
  background-color: var(--color-bg-row-alt);
}

/* ── COLUMN highlight — JS adds .e5-col-highlight to every
      cell in the hovered column (thead + tbody rows).
      !important ensures it wins over zebra-stripe bg.       ── */
.e5-col-highlight {
  background-color: var(--color-mouse-blue) !important;
}

/* ── Diagonal cell ── */
.e5-diagonal {
  text-align: center;
  border: 1px solid var(--color-border-cell);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-border-cell);   /* Same as .dash-default on Ekran 2 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
}