/* Voice Log Analyzer — bespoke styles on top of KODYS tokens */
/* ==========================================================================
   KODYS Design System — Colors, Type, Spacing
   Sourced from: minimanual-kodys-loga.pdf + kodys.cz observation
   ========================================================================== */

:root {
  /* ---- Brand colors (mini-manual) --------------------------------------- */
  --kodys-blue: #002D62;        /* Pantone 282 — primary */
  --kodys-grey: #55565A;        /* Cool Grey 11 — secondary */
  --kodys-yellow: #FFC40C;      /* Pantone 123 — accent */

  /* ---- Extended palette (derived) --------------------------------------- */
  --kodys-blue-hover: #001F47;  /* -8% lightness */
  --kodys-blue-press: #001636;
  --kodys-blue-tint: #E6EAF0;   /* pale tint for panels */
  --kodys-yellow-hover: #E5AE0A;

  --white: #FFFFFF;
  --grey-50: #F8F9FA;
  --grey-100: #F4F5F7;          /* section background */
  --grey-200: #E3E5E8;          /* hairline border */
  --grey-300: #C9CCD1;
  --grey-500: #8A8C91;          /* muted text */
  --grey-700: #55565A;          /* = kodys-grey */
  --grey-900: #1B1C1E;

  /* ---- Semantic color roles -------------------------------------------- */
  --color-bg: var(--white);
  --color-bg-alt: var(--grey-100);
  --color-bg-inverse: var(--kodys-blue);

  --color-fg: var(--kodys-blue);        /* headings, strong text */
  --color-fg-body: var(--kodys-grey);   /* body copy */
  --color-fg-muted: var(--grey-500);
  --color-fg-inverse: var(--white);

  --color-border: var(--grey-200);
  --color-border-strong: var(--grey-300);

  --color-accent: var(--kodys-yellow);
  --color-focus: var(--kodys-yellow);

  /* Status (derived — not in brand manual) */
  --color-success: #1E8E3E;
  --color-warning: #E5AE0A;
  --color-danger:  #C5221F;

  /* ---- Typography ------------------------------------------------------- */
  --font-family-base: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-family-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-family-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Weights — Arial ships Regular / Bold / Black */
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;

  /* Scale (web) */
  --fs-xs:    13px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   32px;
  --fs-4xl:   40px;
  --fs-5xl:   48px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---- Radii ---------------------------------------------------------- */
  --r-sm: 2px;
  --r-md: 4px;      /* buttons, inputs */
  --r-lg: 8px;      /* cards */
  --r-xl: 12px;
  --r-pill: 999px;

  /* ---- Shadows (tinted with KODYS Blue) -------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 45, 98, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 45, 98, 0.08);   /* cards at rest */
  --shadow-lg: 0 6px 20px rgba(0, 45, 98, 0.12);  /* hover */
  --shadow-xl: 0 12px 32px rgba(0, 45, 98, 0.18);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 840px;
  --header-height: 72px;
}

/* ==========================================================================
   Base typography — semantic element styles
   ========================================================================== */

body {
  font-family: var(--font-family-base);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-fg-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-family-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  color: var(--color-fg);
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-family-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--color-fg);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}

h3, .h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-fg);
  margin: 0 0 var(--sp-3);
}

h4, .h4 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--color-fg);
  margin: 0 0 var(--sp-3);
}

p {
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--color-fg-muted);
  line-height: var(--lh-snug);
}

a {
  color: var(--kodys-blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

code, kbd, samp {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
  background: var(--grey-100);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
}

/* Utility typography classes */
.text-blue   { color: var(--kodys-blue); }
.text-grey   { color: var(--kodys-grey); }
.text-yellow { color: var(--kodys-yellow); }
.text-muted  { color: var(--color-fg-muted); }
.text-white  { color: var(--white); }

.bg-blue   { background: var(--kodys-blue); color: var(--white); }
.bg-grey   { background: var(--grey-100); }
.bg-yellow { background: var(--kodys-yellow); color: var(--kodys-blue); }


*, *::before, *::after { box-sizing: border-box; }
html, body, #app { margin: 0; padding: 0; }
html { height: 100%; }
body {
  /* sticky footer: obsah roste, .footer drzi dole i na kratkych strankach */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  color: var(--color-fg-body);
  background: var(--grey-100);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

/* ============ Topbar ============ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--kodys-blue);
  color: var(--white);
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.05);
}
.topbar__brand {
  display: flex; align-items: center; gap: 14px;
  color: var(--white); text-decoration: none;
}
.topbar__brand-logo {
  height: 22px; width: auto; display: block; opacity: 0.95;
}
.topbar__brand-sep {
  width: 1px; height: 18px; background: rgba(255,255,255,0.22);
}
.topbar__title {
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
}
.topbar__nav {
  display: flex; align-items: center; gap: 4px;
}
.topbar__link {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.78);
  padding: 8px 12px; border-radius: var(--r-md);
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.topbar__link:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.topbar__link--active { color: var(--white); background: rgba(255,255,255,0.10); }

/* ---- Language switcher (topbar) ----------------------------------------- */
.lang-switch { position: relative; margin-left: 4px; }
.lang-switch__btn {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.78);
  padding: 8px 10px; border-radius: var(--r-md);
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.lang-switch__btn:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.lang-switch__flag { display: inline-flex; align-items: center; }
.lang-switch__flag svg, .lang-switch__opt-flag svg { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.lang-switch__chevron { opacity: 0.7; }
.lang-switch__menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--white); border-radius: var(--r-md);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.18));
  padding: 4px; min-width: 150px; list-style: none;
  z-index: 60;
}
.lang-switch__opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; color: var(--kodys-blue);
  cursor: pointer;
}
.lang-switch__opt:hover { background: var(--grey-100); }
.lang-switch__opt--active { background: var(--kodys-blue-tint); }

/* ============ Page layout ============ */
.page {
  flex: 1 0 auto;            /* vyplni vysku mezi topbarem a patickou */
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 28px 80px;
}

/* ============ Footer ============ */
.footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--white);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-fg-muted);
}
.footer__company {
  color: var(--kodys-blue);
  font-weight: 700;
  text-decoration: none;
}
.footer__company:hover { text-decoration: underline; }
.footer__sep {
  width: 1px; height: 12px;
  background: var(--color-border-strong);
}
.footer__version {
  font-variant-numeric: tabular-nums;
}

/* ============ Drop zone ============ */
.dropzone {
  background: var(--white);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--r-lg);
  padding: 28px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: border-color var(--dur-base), background var(--dur-base);
}
.dropzone--drag { border-color: var(--kodys-blue); background: var(--kodys-blue-tint); }
.dropzone__left { display: flex; align-items: center; gap: 20px; }
.dropzone__icon {
  width: 48px; height: 48px; border-radius: var(--r-lg);
  background: var(--kodys-blue-tint); color: var(--kodys-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dropzone__title {
  font-size: 16px; font-weight: 700; color: var(--kodys-blue); margin: 0 0 4px;
}
.dropzone__hint {
  font-size: 13px; color: var(--color-fg-muted); margin: 0;
}

.dropzone--loaded {
  padding: 16px 24px;
  border-style: solid;
  border-color: var(--color-border);
  background: var(--white);
}
.dropzone__file {
  display: flex; align-items: center; gap: 14px;
}
.dropzone__file-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--kodys-blue-tint); color: var(--kodys-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dropzone__file-name { font-size: 14px; font-weight: 700; color: var(--kodys-blue); }
.dropzone__file-meta { font-size: 12px; color: var(--color-fg-muted); margin-top: 2px; }
/* Upozorneni, ze se vysledek nevejde do sessionStorage (neobnovi se po navigaci).
   Neni to chyba analyzy — jen vyrazne, ne tise zalogovane. */
.dropzone__file-warn { font-size: 12px; color: #8E1815; margin-top: 4px; max-width: 60ch; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: var(--r-md);
  border: 0; cursor: pointer; line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn--primary { background: var(--kodys-blue); color: var(--white); }
.btn--primary:hover { background: var(--kodys-blue-hover); }
.btn--secondary {
  background: var(--white); color: var(--kodys-blue);
  border: 1px solid var(--color-border-strong);
}
.btn--secondary:hover { border-color: var(--kodys-blue); }
.btn--ghost {
  background: transparent; color: var(--kodys-blue);
  padding: 8px 12px;
}
.btn--ghost:hover { background: var(--kodys-blue-tint); }
.btn--sm { font-size: 13px; padding: 8px 14px; }

/* ============ Card ============ */
.card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
}

/* ============ Context bar ============ */
.contextbar {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  padding: 14px 22px 26px;
  margin-top: 16px;
  gap: 0;
}
.context-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 22px;
  border-right: 1px solid var(--color-border);
  position: relative;
}
.context-item:last-child { border-right: 0; }
.context-item__label {
  font-size: 11px; font-weight: 700; color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.context-item__value { font-size: 14px; font-weight: 700; color: var(--kodys-blue); }
.context-item__value--mono { font-family: var(--font-family-mono); }
.context-item__note {
  /* Absolutne ve spodnim paddingu baru — nezvetsuje vysku ani nerozhazuje
     zarovnani ostatnich (bezpoznamkovych) polozek. Pas vysky == spodni padding
     baru, text svisle na stredu -> presne uprostred mezery pod hodnotou. */
  position: absolute; top: 100%; left: 22px;
  height: 26px; display: flex; align-items: center;
  white-space: nowrap;
  font-size: 10px; font-style: italic; color: var(--color-warn, #B26A00);
}

/* ============ Operator tabs ============ */
.op-tabs {
  margin-top: 18px;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto;
}
.op-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  font-size: 14px; font-weight: 700;
  color: var(--color-fg-muted);
  background: transparent; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.op-tab:hover { color: var(--kodys-blue); background: var(--white); }
.op-tab--active {
  color: var(--kodys-blue);
  border-bottom-color: var(--kodys-yellow);
  background: var(--white);
}

.op-badge {
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-pill);
  min-width: 28px; text-align: center;
  letter-spacing: 0.01em;
}
.op-badge--ok      { background: #E2F3E7; color: #186A2E; }
.op-badge--warn    { background: #FFF4D6; color: #8B6500; }
.op-badge--danger  { background: #FBE2E1; color: #8E1815; }

/* ============ Operator info row ============ */
.op-info {
  background: var(--white);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--color-border);
}
.op-info__left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* vetsi mezera mezi prepinacem Statistiky/Dialog a informacemi o session */
.op-info__left .seg { margin-right: 18px; }
.op-info__name { font-size: 14px; font-weight: 700; color: var(--kodys-blue); }
.op-info__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-border-strong); }
.op-info__meta { font-size: 13px; color: var(--color-fg-body); }

/* Segmented control (statistiky/dialog) */
.seg {
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
}
.seg__btn {
  font-size: 12px; font-weight: 700; color: var(--kodys-grey);
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 14px;
  border-right: 1px solid var(--color-border);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.seg__btn:last-child { border-right: 0; }
.seg__btn--active { background: var(--kodys-blue); color: var(--white); }
.seg__btn:not(.seg__btn--active):hover { background: var(--kodys-blue-tint); color: var(--kodys-blue); }

/* ============ KPI cards ============ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.kpi {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--kodys-blue);
}
.kpi--ok::before     { background: var(--color-success); }
.kpi--warn::before   { background: var(--color-warning); }
.kpi--danger::before { background: var(--color-danger); }

.kpi__label {
  font-size: 12px; font-weight: 700; color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.kpi__value {
  font-size: 32px; font-weight: 700; color: var(--kodys-blue);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi__value--ok     { color: var(--color-success); }
.kpi__value--warn   { color: #B8860A; }
.kpi__value--danger { color: var(--color-danger); }
.kpi__sub { font-size: 12px; color: var(--color-fg-muted); margin-top: 6px; }

/* ============ Section card ============ */
.panel {
  margin-top: 18px;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
}
.panel__head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.panel__title {
  font-size: 14px; font-weight: 700; color: var(--kodys-blue);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0;
}
.panel__sub { font-size: 12px; color: var(--color-fg-muted); }

/* ============ Word table ============ */
.tbl-wrap { overflow-x: auto; }
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl thead th {
  text-align: left;
  font-size: 11px; font-weight: 700; color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--grey-50);
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
}
.tbl thead th:hover { color: var(--kodys-blue); background: var(--kodys-blue-tint); }
.tbl thead th .sort {
  display: inline-block; margin-left: 4px; opacity: 0.4;
}
.tbl thead th.sorted .sort { opacity: 1; color: var(--kodys-blue); }

.tbl tbody td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--kodys-blue);
  font-weight: 400;
  vertical-align: middle;
  white-space: nowrap;
}
.tbl tbody tr {
  cursor: pointer;
  transition: background var(--dur-fast);
}
.tbl tbody tr:hover { background: var(--grey-50); }
.tbl tbody tr.selected { background: var(--kodys-blue-tint); }
.tbl tbody tr.selected td { color: var(--kodys-blue); }
.tbl tbody tr.row--problem td { color: #B4322F; }
.tbl tbody tr.row--problem.selected td { color: #8E1815; }

.tbl tbody td.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tbl tbody td.num--warn   { color: var(--color-warning); font-weight: 700; }
.tbl tbody td.num--danger { color: var(--color-danger);  font-weight: 700; }

.word-chip {
  display: inline-block;
  font-family: var(--font-family-mono);
  font-size: 12px; font-weight: 700;
  padding: 3px 10px;
  background: var(--grey-100);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  color: var(--kodys-blue);
  letter-spacing: 0.02em;
}
.selected .word-chip { background: var(--white); border-color: var(--kodys-blue); }
.row--problem .word-chip { background: #FBE2E1; border-color: #F5C0BD; color: #8E1815; }

/* Stability bar */
.stab {
  display: inline-flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.stab__bar {
  position: relative;
  width: 80px; height: 6px;
  background: var(--grey-200); border-radius: var(--r-pill);
  overflow: hidden;
}
.stab__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: var(--r-pill);
}
.stab__fill--ok      { background: var(--color-success); }
.stab__fill--warn    { background: var(--color-warning); }
.stab__fill--danger  { background: var(--color-danger); }
.stab__pct { font-size: 12px; color: var(--color-fg-body); min-width: 30px; text-align: right; }

/* Status badge */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}
.status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
}
.status--ok       { background: #E2F3E7; color: #186A2E; }
.status--ok::before     { background: #2EA34A; }
.status--watch    { background: #FFF4D6; color: #8B6500; }
.status--watch::before  { background: #E5AE0A; }
.status--problem  { background: #FBE2E1; color: #8E1815; }
.status--problem::before { background: #D2342F; }

/* ============ Charts row ============ */
.charts-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 18px;
}
.chart-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  min-height: 360px;
}
.chart-card__head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.chart-card__body { padding: 18px 22px; flex: 1; display: flex; flex-direction: column; }
.chart-card__foot {
  padding: 14px 22px;
  border-top: 1px solid var(--color-border);
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--grey-50);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.chart-card__pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--kodys-blue-tint); color: var(--kodys-blue);
}
.chart-card__verdict {
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.chart-card__verdict--safe    { background: #E2F3E7; color: #186A2E; }
.chart-card__verdict--watch   { background: #FFF4D6; color: #8B6500; }
.chart-card__verdict--risk    { background: #FBE2E1; color: #8E1815; }
.chart-card__verdict-text { font-size: 12px; color: var(--kodys-grey); flex: 1; line-height: 1.5; }

/* Rozpad anomalii pod grafem distribuce (odmitnuto nad prahem / prijato pod prahem) */
.chart-anomalies {
  padding: 12px 22px 16px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
}
.chart-anomalies__title {
  font-weight: 700; color: var(--kodys-blue, #002D62);
  margin: 8px 0 4px;
}
.chart-anomalies__title:first-child { margin-top: 0; }
.chart-anomalies__list {
  margin: 0 0 4px; padding-left: 18px;
  color: var(--kodys-grey); line-height: 1.6;
}
.chart-anomalies__help {
  margin: 2px 0 10px; padding: 8px 10px;
  background: var(--grey-50, #f4f6f9); border-radius: var(--r-sm, 6px);
  color: var(--kodys-grey); font-size: 11px; line-height: 1.5;
}

/* Distribution chart */
.dist-chart {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  padding-top: 8px;
}
.dist-chart__plot { position: relative; flex: 1; min-height: 220px; }
.dist-chart__bar {
  position: absolute;
  border-radius: 2px 2px 0 0;
  transition: opacity var(--dur-fast);
}
.dist-chart__bar--pos { background: var(--color-success); }
.dist-chart__bar--neg { background: var(--color-danger); border-radius: 0 0 2px 2px; }
.dist-chart__threshold {
  position: absolute; left: 0; right: 0;
  height: 1px; background: var(--kodys-blue);
  z-index: 2;
}
.dist-chart__threshold-label {
  position: absolute; right: 0;
  font-size: 10px; font-weight: 700; color: var(--kodys-blue);
  background: var(--white); padding: 0 6px;
  transform: translateY(-50%);
  letter-spacing: 0.04em;
}
.dist-chart__axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--color-fg-muted);
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.dist-chart__legend {
  display: flex; gap: 16px; padding-top: 12px; font-size: 11px;
  color: var(--color-fg-muted);
}
.dist-chart__legend-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px;
  vertical-align: middle;
}

/* Time chart */
.time-chart {
  flex: 1;
  display: flex; flex-direction: column;
}
.time-chart__plot {
  flex: 1; min-height: 220px;
  display: flex; align-items: flex-end; gap: 6px;
  padding-bottom: 0;
}
.time-chart__bar-wrap {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.time-chart__bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: var(--color-danger);
  position: relative;
  transition: background var(--dur-fast);
}
.time-chart__count {
  font-size: 11px; font-weight: 700; color: var(--kodys-blue);
  font-variant-numeric: tabular-nums;
}
.time-chart__count--zero { color: var(--color-fg-muted); font-weight: 400; }
.time-chart__axis {
  display: flex; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  font-size: 10px; color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
}
.time-chart__axis-label {
  flex: 1; text-align: center;
}

/* ============ Settings page ============ */
.settings-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--kodys-blue);
  text-decoration: none;
  margin-bottom: 14px; background: transparent; border: 0;
  padding: 0; cursor: pointer; font-weight: 700;
}
.settings-back:hover { text-decoration: underline; }

.settings-h {
  font-size: 28px; font-weight: 700; color: var(--kodys-blue);
  margin: 0 0 6px;
}
.settings-lead {
  font-size: 14px; color: var(--color-fg-body);
  max-width: 720px; margin: 0 0 24px;
}


.settings-card {
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin-bottom: 14px;
}
.settings-card__head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px;
}
.settings-card__num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--kodys-blue-tint); color: var(--kodys-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.settings-card__title { font-size: 16px; font-weight: 700; color: var(--kodys-blue); margin: 0 0 4px; }
.settings-card__desc { font-size: 13px; color: var(--color-fg-body); margin: 0; line-height: 1.5; }

.settings-row {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 200px;
}
.field__label { font-size: 12px; font-weight: 700; color: var(--kodys-blue); }
.field__input {
  padding: 8px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--r-md);
  font-family: inherit; font-size: 14px;
  color: var(--kodys-blue); background: var(--white);
  width: 140px;
  font-variant-numeric: tabular-nums;
}
.field__input:focus {
  outline: none; border-color: var(--kodys-blue);
  box-shadow: 0 0 0 2px var(--kodys-yellow);
}
.field__hint { font-size: 11px; color: var(--color-fg-muted); }

/* Stability preview bar */
.preview-bar {
  margin-top: 16px;
  background: var(--grey-100);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.preview-bar__label {
  font-size: 11px; font-weight: 700; color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.preview-bar__track {
  position: relative;
  height: 28px;
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.preview-bar__zone {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--white);
  letter-spacing: 0.04em;
}
.preview-bar__zone--risk  { background: var(--color-danger); }
.preview-bar__zone--watch { background: var(--color-warning); }
.preview-bar__zone--ok    { background: var(--color-success); }
.preview-bar__scale {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--color-fg-muted);
  margin-top: 6px; font-variant-numeric: tabular-nums;
}

.settings-actions {
  display: flex; gap: 10px; margin-top: 18px;
}

/* ============ Misc ============ */
.muted { color: var(--color-fg-muted); }
.flex-grow { flex: 1; }
.hidden { display: none; }

/* ============================================================================
   Stranka-specificke styly (drive inline v Pages/Index.cshtml a Settings.cshtml)
   ============================================================================ */

/* ---- Dropzone states ---------------------------------------------------- */
.dz-state { display: none; }
.dz-state--active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.dropzone__file { flex: 1; min-width: 0; }
.dropzone__file-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.progress {
  height: 6px; background: var(--grey-200); border-radius: var(--r-pill);
  overflow: hidden; margin-top: 8px;
}
.progress__fill {
  height: 100%; background: var(--kodys-blue);
  width: 0%; transition: width 0.2s var(--ease-out);
  border-radius: var(--r-pill);
  background-image: linear-gradient(90deg, var(--kodys-blue), var(--kodys-yellow));
}
.dropzone--error { border-color: var(--color-danger); background: #FBE2E1; }
.dz-error-msg { color: #8E1815; font-size: 13px; font-weight: 700; margin-top: 6px; }
.empty-note {
  padding: 22px; text-align: center;
  color: var(--color-fg-muted); font-size: 13px;
}

/* ---- Rozsireny panel (ticho/sum + restarty) ----------------------------- */
.extended-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px;
}
.extended-card { padding: 18px 22px; }
.extended-card h3 { margin-bottom: 12px; }
.extended-card dl {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  font-size: 13px; margin: 0;
}
.extended-card dt { color: var(--color-fg-muted); }
.extended-card dd { margin: 0; color: var(--kodys-blue); font-weight: 700;
                   font-variant-numeric: tabular-nums; text-align: right; }
.extended-card__note {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 12px; color: var(--color-fg-body); line-height: 1.5;
}
.extended-card table { width: 100%; font-size: 13px; border-collapse: collapse; }
.extended-card table th, .extended-card table td {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--color-border);
}
.extended-card table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-fg-muted); font-weight: 700;
}

/* ---- Chart canvases ----------------------------------------------------- */
.chart-canvas-wrap { position: relative; flex: 1; min-height: 260px; }
.chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

/* ---- Toast (settings) --------------------------------------------------- */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  background: var(--color-success); color: var(--white);
  padding: 10px 18px; border-radius: var(--r-md);
  font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,45,98,0.25);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast--show { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Dialog — rekonstruovany rozhovor (casova osa)
   Port z mockupu DialogView.html (varianta "Casova osa"), zasazeny do
   stavajici stranky (ohranicena vyska scroll oblasti misto full-screen shellu).
   ========================================================================== */
#dialogView { margin-top: 18px; }

.dlg-panel {
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

/* ---- timeline mini-map (hustota odmitnuti + scrubber) ------------------- */
.tl { padding: 14px 22px 12px; border-bottom: 1px solid var(--color-border);
  flex-shrink: 0; background: var(--grey-50); }
.tl__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.tl__meta-label { font-size: 10px; font-weight: 700; color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: 0.07em; }
/* legenda prijato/odmitnuto v hlavicce osy (misto poctu odmitnuti) */
.tl__legend { display: inline-flex; align-items: center; gap: 14px; }
.tl__legend-item { display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--color-fg-muted); }
.tl__legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.tl__track {
  position: relative; height: 58px;
  background: var(--white); border: 1px solid var(--color-border);
  border-radius: var(--r-md); cursor: pointer; overflow: hidden; touch-action: none;
}
.tl__grid { position: absolute; inset: 0; pointer-events: none; }
.tl__hour { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
/* vyhlazena (analogova) krivka hustoty odmitnuti — SVG area pres celou sirku */
.tl__spark { position: absolute; inset: 0; width: 100%; height: 100%; }
.tl__spark-fill {
  fill: rgba(197, 34, 31, 0.16);
  stroke: var(--color-danger); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
/* svisla cara u kazdeho odmitnuti */
.tl__rej {
  stroke: var(--color-danger); stroke-width: 1; opacity: 0.45;
  vector-effect: non-scaling-stroke;
}
.tl__window {
  position: absolute; top: -1px; bottom: -1px;
  background: rgba(0, 45, 98, 0.13); border: 1.5px solid var(--kodys-blue);
  border-radius: 3px; cursor: grab;
  box-shadow: 0 0 0 100vmax rgba(255,255,255,0.45); clip-path: inset(-2px 0 -2px 0);
}
.tl__window:active { cursor: grabbing; }
.tl__axis { display: flex; justify-content: space-between; margin-top: 5px; }
.tl__axis span { font-size: 10px; color: var(--color-fg-muted); font-family: var(--font-family-mono); }

/* ---- controls bar ------------------------------------------------------- */
.dlg-ctrl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 22px; border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--kodys-grey);
  background: var(--white); border: 1px solid var(--color-border-strong);
  border-radius: var(--r-pill); padding: 5px 12px; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip-btn:hover { border-color: var(--kodys-blue); color: var(--kodys-blue); }
.chip-btn--active { background: var(--kodys-blue); border-color: var(--kodys-blue); color: #fff; }
.chip-btn__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-danger); }
.chip-btn--active .chip-btn__dot { background: #fff; }
.dlg-ctrl__spacer { flex: 1; }
.dlg-ctrl__count { font-size: 11px; color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
/* zaskrtavaci pole "Servisní informace" / "Šum a ticho" */
.dlg-checks {
  display: inline-flex; align-items: center; gap: 16px;
  margin-left: 16px;  /* odsazeni od tlacitka "Další problém" */
}
.dlg-check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--kodys-grey);
  cursor: pointer; user-select: none;
}
.dlg-check__box { width: 15px; height: 15px; cursor: pointer; accent-color: var(--kodys-blue); }

/* ---- scroll area + casova osa (spine) ----------------------------------- */
.dlg-scroll { min-height: 0; overflow-y: auto; overflow-x: hidden;
  height: clamp(456px, 72vh, 912px); }
.dlg-scroll::-webkit-scrollbar { width: 10px; }
.dlg-scroll::-webkit-scrollbar-thumb { background: var(--grey-300); border-radius: 6px; border: 2px solid var(--white); }
.dlg-scroll::-webkit-scrollbar-track { background: transparent; }

.dlg-empty { padding: 40px 24px; text-align: center; color: var(--color-fg-muted); font-size: 13px; }

.cx-spine { position: relative; max-width: 760px; margin: 0 auto; padding: 18px 24px 48px; }
.cx-spine::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(24px + 88px);
  width: 2px; background: var(--color-border);
}

.cx-pause {
  padding-left: 104px; margin: 4px 0;
  font-size: 10px; color: var(--grey-500); font-family: var(--font-family-mono);
  display: flex; align-items: center; gap: 6px;
}
.cx-pause::before { content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--grey-300); margin-left: -2px; }

.cx-row { position: relative; padding-left: 104px; }
/* plne datum + cas u kazde interakce (dd.MM.yy nad HH:mm:ss), vedle tecky na ose */
.cx-tick {
  position: absolute; left: 0; top: 0; width: 80px; text-align: right;
  font-family: var(--font-family-mono); color: var(--grey-500);
  font-variant-numeric: tabular-nums; line-height: 1.2;
  display: flex; flex-direction: column; align-items: flex-end;
}
.cx-tick__date { font-size: 9.5px; color: var(--grey-500); }
.cx-tick__time { font-size: 11px; font-weight: 700; color: var(--grey-700); }
.cx-node {
  position: absolute; left: 88px; top: 7px; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--grey-300); border: 2px solid var(--white); z-index: 1;
}
.cx-node--ok { background: var(--kodys-blue); }
.cx-node--rej { background: var(--color-danger); width: 12px; height: 12px; box-shadow: 0 0 0 3px #FCEBEA; }
.cx-node--ign { background: var(--grey-300); }

.cx-content { display: flex; }
.cx-row--o .cx-content { justify-content: flex-end; }

.cx-bubble { max-width: 80%; }
.cx-bubble--t {
  background: var(--grey-100); color: var(--grey-900);
  font-size: 14px; line-height: 1.45; padding: 9px 14px;
  border-radius: 4px 14px 14px 14px;
}
.cx-bubble--t.is-repeat {
  background: var(--white); border: 1px dashed var(--color-border-strong); color: var(--grey-700);
}
/* servisni informace terminalu (pipnuti, zvednuti/spusteni mikrofonu) */
.cx-bubble--t.cx-bubble--svc {
  background: #FFF7E0; border: 1px solid #F1E3B0; color: var(--grey-700);
  font-style: italic; font-size: 13px;
}
.cx-bubble--o {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  background: var(--kodys-blue); color: #fff;
  padding: 7px 14px 6px; border-radius: 14px 4px 14px 14px; min-width: 64px;
}
.cx-bubble--o.cx-bubble--rej { background: #FCEBEA; border: 1.5px solid #F3B6B2; }
/* ignorovane slovo (zahozeno terminalem, napr. ztlumeny mikrofon) — tlumeny stav */
.cx-bubble--o.cx-bubble--ign {
  background: var(--grey-100); border: 1px dashed var(--color-border-strong);
}
.cx-bubble--ign .cx-word { color: var(--grey-500); }
.cx-word {
  font-family: var(--font-family-mono); font-weight: 700; font-size: 15px;
  letter-spacing: 0.02em; color: #fff; line-height: 1.2;
}
.cx-bubble--rej .cx-word { color: var(--color-danger); }

.cx-done {
  text-align: center; margin: 26px 0 0; padding-left: 104px;
  font-size: 12px; font-weight: 700; color: var(--color-success);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* zvyrazneni pri skoku na turn */
.is-flash { animation: dlgflash 1.1s var(--ease-out); }
@keyframes dlgflash {
  0%, 30% { background: var(--kodys-yellow); }
  100% { background: transparent; }
}

/* =====================================================================
   Zalozka "Sit" — sila signalu v case + roaming timeline.
   Prevzato z navrhu samples/Network.html (network.css), napojeno na
   stavajici KODYS tokeny. Vykresluje render-network.js.
   ===================================================================== */

/* shrnujici radek pod nadpisem panelu */
.net-sub {
  font-size: 13px; color: var(--color-fg-muted);
  margin: 2px 0 0; font-variant-numeric: tabular-nums;
}
.net-sub strong { color: var(--kodys-blue); font-weight: 700; }

/* KPI grid: tato stranka pouziva take 5 karet */
.net-kpis { grid-template-columns: repeat(5, 1fr); }

/* SSID / Pasmo v info radku operatora (modry oddelovac odlisi sitovou cast) */
.net-meta strong { color: var(--kodys-blue); font-weight: 700; }
.op-info__dot--net { background: var(--kodys-blue); opacity: 0.55; }

/* hlavicka panelu s inline legendou */
.panel__head--net { flex-wrap: wrap; row-gap: 8px; }
.panel__head-left { display: flex; flex-direction: column; gap: 2px; }
.net-legend {
  display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.net-legend__item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--color-fg-body); white-space: nowrap;
}
.net-legend__sw {
  width: 14px; height: 10px; border-radius: 2px; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.08);
}

/* ---- signalovy graf (SVG) ---- */
.sig { padding: 20px 22px 14px; }
.sig__plot { position: relative; width: 100%; }
.sig__svg { display: block; width: 100%; height: auto; }
.sig-point__hit { cursor: pointer; fill: transparent; }

/* ---- roaming timeline ---- */
.roam { padding: 8px 0 4px; }
.roam__scroll { overflow-x: auto; }
.roam__grid { position: relative; min-width: 760px; }

/* leva gutter drzi MAC popisky, plot vyplni zbytek */
.roam__row {
  display: grid;
  grid-template-columns: var(--roam-gutter, 168px) 1fr;
  align-items: stretch;
  height: 26px;
}
.roam__row:nth-child(odd) .roam__lane { background: var(--grey-50); }
.roam__row:hover .roam__lane { background: var(--kodys-blue-tint); }

.roam__mac {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 14px;
  font-family: var(--font-family-mono);
  font-size: 11px; color: var(--kodys-grey);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  white-space: nowrap;
  border-right: 1px solid var(--color-border);
}
.roam__row:hover .roam__mac { color: var(--kodys-blue); }

.roam__lane { position: relative; transition: background var(--dur-fast); }
.roam__seg {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 13px; border-radius: 3px;
  min-width: 3px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,45,98,0.18);
  transition: filter var(--dur-fast), outline-color var(--dur-fast);
  outline: 2px solid transparent; outline-offset: 1px;
}
.roam__seg:hover { filter: brightness(1.06); outline-color: rgba(0,45,98,0.55); }

/* vertikalni gridlines + disconnect znacky v overlayich */
.roam__overlay {
  position: absolute; top: 0; bottom: 0;
  left: var(--roam-gutter, 168px); right: 0;
  pointer-events: none;
}
.roam__overlay--back { z-index: 0; }
.roam__overlay--front { z-index: 2; }
.roam__lane { z-index: 1; }
.roam__gline {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--color-border); opacity: 0.7;
}
.roam__disc {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1.5px dashed var(--color-danger);
}
.roam__disc-tag {
  position: absolute; top: 0;
  left: 0; transform: translateX(-50%) translateY(-2px);
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--color-danger); white-space: nowrap;
}

/* spodni casova osa, zarovnana k plotu (preskoci gutter) */
.roam__axis {
  display: grid;
  grid-template-columns: var(--roam-gutter, 168px) 1fr;
  margin-top: 4px;
}
.roam__axis-track { position: relative; height: 20px; }
.roam__tick {
  position: absolute; top: 4px; transform: translateX(-50%);
  font-size: 10px; color: var(--color-fg-muted);
  font-family: var(--font-family-mono); font-variant-numeric: tabular-nums;
}
.roam__axis-title {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 14px;
  font-size: 10px; font-weight: 700; color: var(--color-fg-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* ---- sdileny hover tooltip ---- */
.net-tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--kodys-blue); color: #fff;
  border-radius: var(--r-md); padding: 8px 11px;
  box-shadow: 0 6px 20px rgba(0,45,98,0.28);
  font-size: 12px; line-height: 1.4;
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
}
.net-tip::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; background: var(--kodys-blue);
  transform: translateX(-50%) rotate(45deg);
}
.net-tip__row { display: flex; align-items: center; gap: 8px; }
.net-tip__mac {
  font-family: var(--font-family-mono); font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px;
}
.net-tip__dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.net-tip__big { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.net-tip__sub { color: rgba(255,255,255,0.78); font-variant-numeric: tabular-nums; }
.net-tip__lvl { font-weight: 800; }
.net-tip__lvl--good { color: #8FE3A8; }
.net-tip__lvl--mid  { color: #FFD873; }
.net-tip__lvl--weak { color: #FF9A93; }