/*
 * POUŽÍVATELIA A ROLE — vzhľad prevzatý z Výroby (3. 10. 2026).
 *
 * Zoltán: „pozri sa vo výrobnom softvéri, aké máme užívateľské nastavenia,
 * užívateľské role, aby to bolo úplne jednotné vizuálne aj v tomto programe —
 * prečítaj a vizuálne kopíruj."
 *
 * Predloha: Výroba frontend/src/pages/Uzivatelia.tsx (hlavička + záložky),
 * components/RoleAccessPanel.tsx (dlaždice rolí, „Rolu má…", matica s krúžkami
 * nevidí / len prezerá / aj zapisuje) a components/UserRolesPanel.tsx (karta
 * s červeným pásom vľavo, tabuľka ľudí). Farby a písmo sú tokeny z jej
 * tailwind.config.js — primary #B91C1C, border #E7E5E4, stone škála,
 * Fraunces / Manrope / JetBrains Mono.
 *
 * Všetko je pod #settingsPaneUsers, aby sa nič nerozlialo do zvyšku IRIS-u.
 * Tlačidlá nesú `plain-btn` — globálne pravidlá `button:not(...)` v admin.html
 * by im inak dali červené pozadie a 100 % šírku.
 */
#settingsPaneUsers {
  --vr-primary: #B91C1C;
  --vr-primary-hover: #991B1B;
  --vr-primary-5: rgba(185, 28, 28, 0.05);
  --vr-border: #E7E5E4;
  --vr-card: #FFFFFF;
  --vr-stone-900: #1C1917;
  --vr-stone-800: #292524;
  --vr-stone-700: #44403C;
  --vr-stone-600: #57534E;
  --vr-stone-500: #78716C;
  --vr-stone-400: #A8A29E;
  --vr-stone-200: #E7E5E4;
  --vr-stone-100: #F5F5F4;
  --vr-stone-50: #FAFAF9;
  --vr-display: 'Fraunces', Georgia, serif;
  --vr-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vr-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --vr-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
  font-family: var(--vr-sans);
  color: var(--vr-stone-900);
}

/* Nastavenia držia panely na 920 px — Výroba má túto stranu na celú šírku
   a tabuľka ľudí (8 stĺpcov) sa do 920 px nezmestí bez lámania akcií. */
body.loyalty-ui-v2 #settingsSection #settingsPaneUsers.settings-page-pane,
#settingsSection #settingsPaneUsers.settings-page-pane { max-width: none; }

#settingsSection #settingsPaneUsers .vr-strana { display: flex; flex-direction: column; padding: 4px 0 24px; min-width: 0; }

/* ── hlavička strany (PageHeader) ──────────────────────────────────────── */
#settingsSection #settingsPaneUsers .vr-hlavicka { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; margin-bottom: 12px; }
#settingsSection #settingsPaneUsers .vr-hlavicka h1 {
  font-family: var(--vr-display); font-weight: 700; font-size: 24px; line-height: 32px;
  color: var(--vr-stone-900); margin: 0; letter-spacing: 0; text-wrap: balance;
}
#settingsSection #settingsPaneUsers .vr-hlavicka p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--vr-stone-500); }

/* ── záložky (segmentový pás ako vo Výrobe) ────────────────────────────── */
#settingsSection #settingsPaneUsers .vr-zalozky {
  display: flex; flex-wrap: wrap; overflow: hidden;
  border: 1px solid var(--vr-border); border-radius: 8px; margin-bottom: 12px;
}
#settingsSection #settingsPaneUsers .vr-zalozky button.vr-zalozka {
  width: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; margin: 0; border: 0; border-radius: 0;
  font: 500 14px/20px var(--vr-sans); color: var(--vr-stone-700);
  background: #fff; cursor: pointer; box-shadow: none; transition: background-color .15s ease, color .15s ease;
}
#settingsSection #settingsPaneUsers .vr-zalozky button.vr-zalozka:hover { background: var(--vr-stone-50); transform: none; box-shadow: none; }
#settingsSection #settingsPaneUsers .vr-zalozky button.vr-zalozka.ds-tab-active,
#settingsSection #settingsPaneUsers .vr-zalozky button.vr-zalozka.je-aktivna { background: var(--vr-primary); color: #fff; }
#settingsSection #settingsPaneUsers .vr-zalozky button.vr-zalozka svg { width: 15px; height: 15px; flex: none; }
#settingsSection #settingsPaneUsers .vr-zalozky--male { display: inline-flex; margin-bottom: 0; }
#settingsSection #settingsPaneUsers .vr-zalozky--male button.vr-zalozka { padding: 4px 12px; font-size: 12px; line-height: 18px; }
#settingsSection #settingsPaneUsers .vr-zalozky--male button.vr-zalozka svg { width: 13px; height: 13px; }
#settingsSection #settingsPaneUsers .vr-popis { margin: 0 0 12px; font-size: 12px; line-height: 16px; color: var(--vr-stone-500); }

/* ── karta ─────────────────────────────────────────────────────────────── */
#settingsSection #settingsPaneUsers .vr-karta {
  background: var(--vr-card); border: 1px solid var(--vr-border); border-radius: 16px;
  box-shadow: var(--vr-shadow-card); padding: 16px; min-width: 0;
}
#settingsSection #settingsPaneUsers .vr-karta--pas { border-left: 4px solid var(--vr-primary); }
#settingsSection #settingsPaneUsers .vr-karta-hlava { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
#settingsSection #settingsPaneUsers .vr-karta-hlava h3 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--vr-display); font-weight: 600; font-size: 16px; line-height: 24px; color: var(--vr-stone-800);
}
#settingsSection #settingsPaneUsers .vr-karta-hlava h3 svg { width: 16px; height: 16px; color: var(--vr-stone-400); flex: none; }
#settingsSection #settingsPaneUsers .vr-karta-hlava h3 svg.vr-ikona-cervena { color: var(--vr-primary); }
#settingsSection #settingsPaneUsers .vr-karta-hlava .vr-karta-popis { font-size: 11px; line-height: 16px; color: var(--vr-stone-500); }
#settingsSection #settingsPaneUsers .vr-karta-hlava .vr-vpravo { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#settingsSection #settingsPaneUsers .vr-text { margin: 0 0 16px; font-size: 12px; line-height: 18px; color: var(--vr-stone-500); max-width: 1100px; }
#settingsSection #settingsPaneUsers .vr-text strong { color: var(--vr-stone-700); font-weight: 600; }

/* ── tlačidlá ──────────────────────────────────────────────────────────── */
#settingsSection #settingsPaneUsers button.vr-btn {
  width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  margin: 0; padding: 6px 12px; border: 1px solid var(--vr-primary); border-radius: 8px;
  background: var(--vr-primary); color: #fff; font: 500 14px/20px var(--vr-sans);
  cursor: pointer; box-shadow: none; transition: background-color .15s ease, opacity .15s ease; white-space: nowrap;
}
#settingsSection #settingsPaneUsers button.vr-btn:hover { background: var(--vr-primary-hover); border-color: var(--vr-primary-hover); transform: none; box-shadow: none; }
#settingsSection #settingsPaneUsers button.vr-btn:disabled { opacity: .4; cursor: not-allowed; background: var(--vr-primary); }
#settingsSection #settingsPaneUsers button.vr-btn--sek { background: #fff; color: var(--vr-stone-600); border-color: var(--vr-border); }
#settingsSection #settingsPaneUsers button.vr-btn--sek:hover { background: var(--vr-stone-50); border-color: var(--vr-border); }
#settingsSection #settingsPaneUsers button.vr-btn--sek:disabled { background: #fff; }
#settingsSection #settingsPaneUsers button.vr-btn--zmaz:hover { background: #FEF2F2; color: #B91C1C; }
#settingsSection #settingsPaneUsers button.vr-btn--mini { padding: 4px 10px; font-size: 12px; line-height: 16px; color: var(--vr-stone-700); }
#settingsSection #settingsPaneUsers button.vr-btn svg { width: 13px; height: 13px; flex: none; }
#settingsSection #settingsPaneUsers button.vr-btn--mini svg { width: 12px; height: 12px; }
#settingsSection #settingsPaneUsers button.vr-btn:focus-visible,
#settingsSection #settingsPaneUsers button.vr-zalozka:focus-visible,
#settingsSection #settingsPaneUsers button.vr-rola:focus-visible,
#settingsSection #settingsPaneUsers button.vr-odkaz:focus-visible { outline: 2px solid rgba(185, 28, 28, .45); outline-offset: 2px; }

/* textové odkazy v riadku tabuľky (Upraviť · ✉ Nové heslo · Pozastaviť) */
#settingsSection #settingsPaneUsers button.vr-odkaz {
  width: auto; display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 4px 8px;
  border: 0; border-radius: 4px; background: transparent; box-shadow: none;
  font: 500 12px/16px var(--vr-sans); color: var(--vr-primary); cursor: pointer; white-space: nowrap;
}
#settingsSection #settingsPaneUsers button.vr-odkaz:hover { text-decoration: underline; background: transparent; transform: none; box-shadow: none; }
#settingsSection #settingsPaneUsers button.vr-odkaz svg { width: 12px; height: 12px; }
#settingsSection #settingsPaneUsers button.vr-odkaz--fialovy { color: #6D28D9; }
#settingsSection #settingsPaneUsers button.vr-odkaz--sivy { color: var(--vr-stone-600); }
#settingsSection #settingsPaneUsers button.vr-odkaz--zelany { color: #047857; }

/* ── vstupy ────────────────────────────────────────────────────────────── */
#settingsSection #settingsPaneUsers .vr-input,
#settingsSection #settingsPaneUsers input.vr-input,
#settingsSection #settingsPaneUsers select.vr-input {
  width: 100%; border: 1px solid var(--vr-border); border-radius: 8px; background: #fff;
  padding: 6px 12px; font: 400 14px/20px var(--vr-sans); color: var(--vr-stone-900); box-shadow: none; min-height: 0;
}
#settingsSection #settingsPaneUsers .vr-input:focus { outline: none; border-color: var(--vr-border); box-shadow: 0 0 0 2px rgba(185, 28, 28, .3); }
#settingsSection #settingsPaneUsers .vr-input:disabled { background: var(--vr-stone-50); color: var(--vr-stone-500); }
#settingsSection #settingsPaneUsers .vr-stitok { display: block; margin: 0 0 4px; font-size: 11px; line-height: 16px; color: var(--vr-stone-500); }
#settingsSection #settingsPaneUsers input.vr-input.vr-hladaj { width: 320px; max-width: 100%; }
#settingsSection #settingsPaneUsers select.vr-input.vr-input--auto { width: auto; }

/* ── dlaždice rolí ─────────────────────────────────────────────────────── */
#settingsSection #settingsPaneUsers .vr-roly { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#settingsSection #settingsPaneUsers button.vr-rola {
  width: auto; display: inline-flex; align-items: baseline; margin: 0; padding: 6px 12px;
  border: 1px solid var(--vr-border); border-radius: 4px; background: #fff; color: var(--vr-stone-600);
  font: 400 14px/20px var(--vr-sans); cursor: pointer; box-shadow: none; text-align: left;
}
#settingsSection #settingsPaneUsers button.vr-rola:hover { background: var(--vr-stone-50); transform: none; box-shadow: none; }
#settingsSection #settingsPaneUsers button.vr-rola.je-aktivna { border-color: var(--vr-primary); background: var(--vr-primary); color: #fff; }
#settingsSection #settingsPaneUsers .vr-rola-kod { font-family: var(--vr-mono); }
#settingsSection #settingsPaneUsers .vr-rola-nazov { margin-left: 8px; font-size: 12px; opacity: .8; }
#settingsSection #settingsPaneUsers .vr-rola-pocet { margin-left: 8px; display: inline-flex; align-items: center; gap: 2px; font-size: 10px; opacity: .7; }
#settingsSection #settingsPaneUsers .vr-rola-pocet svg { width: 9px; height: 9px; }

/* „Rolu má N ľudí:" — kto rolu má, ešte pred maticou */
#settingsSection #settingsPaneUsers .vr-komu { margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--vr-border); border-radius: 8px; background: rgba(250, 250, 249, .7); }
#settingsSection #settingsPaneUsers .vr-komu-riadok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#settingsSection #settingsPaneUsers .vr-komu-riadok > svg { width: 13px; height: 13px; color: var(--vr-stone-400); }
#settingsSection #settingsPaneUsers .vr-komu-text { font-size: 11px; font-weight: 500; color: var(--vr-stone-600); }
#settingsSection #settingsPaneUsers .vr-clovek {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--vr-border);
  border-radius: 4px; background: #fff; font-size: 11px; line-height: 16px; color: var(--vr-stone-700);
}
#settingsSection #settingsPaneUsers .vr-clovek--vlastne { border-color: #FCD34D; background: #FFFBEB; color: #92400E; }
#settingsSection #settingsPaneUsers .vr-clovek--vlastne b { font-weight: 600; }
#settingsSection #settingsPaneUsers .vr-clovek--predajna { color: var(--vr-stone-500); }
#settingsSection #settingsPaneUsers .vr-komu-pozn { margin-top: 4px; font-size: 11px; color: #B45309; }

/* riadok formulára roly (názov + tlačidlá) */
#settingsSection #settingsPaneUsers .vr-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
#settingsSection #settingsPaneUsers .vr-formular .vr-pole { min-width: 220px; }
#settingsSection #settingsPaneUsers .vr-formular .vr-pole .vr-input { padding-top: 4px; padding-bottom: 4px; }
#settingsSection #settingsPaneUsers .vr-formular .vr-suhrn { flex: 1; min-width: 200px; font-size: 12px; line-height: 18px; color: var(--vr-stone-600); padding-bottom: 6px; }
#settingsSection #settingsPaneUsers .vr-suhrn .vr-z { color: #15803D; font-weight: 600; }
#settingsSection #settingsPaneUsers .vr-suhrn .vr-c { color: #1D4ED8; font-weight: 600; }
#settingsSection #settingsPaneUsers .vr-suhrn .vr-n { color: var(--vr-stone-500); font-weight: 600; }
#settingsSection #settingsPaneUsers .vr-sprava { margin: 0 0 8px; font-size: 11px; color: #047857; }
#settingsSection #settingsPaneUsers .vr-sprava--pozor { color: #B45309; font-weight: 600; }
#settingsSection #settingsPaneUsers .vr-varovanie { margin: 0 0 8px; padding: 4px 8px; border: 1px solid #FDE68A; border-radius: 4px; background: #FFFBEB; font-size: 11px; color: #78350F; }
#settingsSection #settingsPaneUsers .vr-nadpis-maly { margin: 16px 0 4px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--vr-stone-500); }

/* ── matica (sekcia / nevidí / len prezerá / aj zapisuje) ──────────────── */
#settingsSection #settingsPaneUsers .vr-obal-tabulky { overflow-x: auto; }
#settingsSection #settingsPaneUsers table.vr-matica { min-width: 100%; border-collapse: collapse; font-size: 12px; line-height: 16px; }
#settingsSection #settingsPaneUsers table.vr-matica thead { background: var(--vr-stone-50); color: var(--vr-stone-600); }
#settingsSection #settingsPaneUsers table.vr-matica th { padding: 6px 8px; font-weight: 700; text-align: center; white-space: nowrap; }
#settingsSection #settingsPaneUsers table.vr-matica th:first-child { text-align: left; }
#settingsSection #settingsPaneUsers table.vr-matica th.vr-st-n { width: 96px; }
#settingsSection #settingsPaneUsers table.vr-matica th.vr-st-c { width: 112px; }
#settingsSection #settingsPaneUsers table.vr-matica th.vr-st-p { width: 128px; }
#settingsSection #settingsPaneUsers table.vr-matica th.vr-st-d { width: 96px; }
#settingsSection #settingsPaneUsers table.vr-matica tbody tr { border-top: 1px solid var(--vr-border); }
#settingsSection #settingsPaneUsers table.vr-matica tbody tr.vr-vidi { background: var(--vr-primary-5); }
#settingsSection #settingsPaneUsers table.vr-matica td { padding: 4px 8px; vertical-align: middle; }
#settingsSection #settingsPaneUsers table.vr-matica td.vr-krk { text-align: center; }
#settingsSection #settingsPaneUsers table.vr-matica td.vr-dedi { text-align: right; white-space: nowrap; font-size: 10px; color: var(--vr-stone-400); }
#settingsSection #settingsPaneUsers .vr-meno { color: var(--vr-stone-700); }
#settingsSection #settingsPaneUsers tr.vr-uzol--sekcia .vr-meno { font-weight: 700; color: var(--vr-stone-800); }
#settingsSection #settingsPaneUsers tr.vr-uzol--obrazovka td:first-child { padding-left: 24px; }
#settingsSection #settingsPaneUsers tr.vr-uzol--funkcia td:first-child { padding-left: 40px; }
#settingsSection #settingsPaneUsers tr.vr-uzol--funkcia .vr-meno::before { content: '↳ '; color: var(--vr-stone-400); }
#settingsSection #settingsPaneUsers .vr-hint { display: block; font-size: 10px; line-height: 14px; color: var(--vr-stone-400); }
#settingsSection #settingsPaneUsers table.vr-matica input[type="radio"] { width: auto; margin: 0; cursor: pointer; vertical-align: middle; }
#settingsSection #settingsPaneUsers table.vr-matica input[type="radio"].vr-zdedene { opacity: .45; }
#settingsSection #settingsPaneUsers table.vr-matica input[type="radio"]:disabled { cursor: not-allowed; }
#settingsSection #settingsPaneUsers button.vr-zrus {
  width: auto; display: inline; margin: 0 0 0 4px; padding: 0 4px; border: 0; background: none; box-shadow: none;
  font: 500 11px/16px var(--vr-sans); color: var(--vr-stone-400); cursor: pointer;
}
#settingsSection #settingsPaneUsers button.vr-zrus:hover { color: var(--vr-primary); background: none; transform: none; box-shadow: none; }
#settingsSection #settingsPaneUsers .vr-vlastna { font-size: 10px; color: var(--vr-stone-600); font-weight: 600; }
#settingsSection #settingsPaneUsers .vr-vlastna--vyn { color: #B45309; }

/* istermeat-ui.css dáva všetkým th v Nastaveniach uppercase — Výroba ich má normálne */
#settingsSection #settingsPaneUsers table.vr-tabulka > thead > tr > th,
#settingsSection #settingsPaneUsers table.vr-matica th { text-transform: none; letter-spacing: 0; }

/* ── tabuľka ľudí / auditu ─────────────────────────────────────────────── */
#settingsSection #settingsPaneUsers table.vr-tabulka { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
#settingsSection #settingsPaneUsers table.vr-tabulka > thead { background: var(--vr-stone-50); border-bottom: 1px solid var(--vr-border); }
#settingsSection #settingsPaneUsers table.vr-tabulka > thead > tr > th {
  padding: 8px 12px; text-align: left; font-weight: 500; color: var(--vr-stone-600);
  text-transform: none; letter-spacing: 0; font-size: 14px; white-space: nowrap;
}
#settingsSection #settingsPaneUsers table.vr-tabulka > thead > tr > th.vr-vpravo-t, #settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr > td.vr-vpravo-t { text-align: right; }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr { border-top: 1px solid var(--vr-border); }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr:first-child { border-top: 0; }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr:hover { background: var(--vr-stone-50); }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr > td { padding: 8px 12px; vertical-align: middle; font-size: 12px; line-height: 16px; color: var(--vr-stone-600); }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr > td.vr-mail { font-family: var(--vr-mono); color: var(--vr-stone-700); white-space: nowrap; }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr > td.vr-meno-t { color: var(--vr-stone-800); font-size: 13px; font-weight: 500; white-space: nowrap; }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr > td.vr-meno-t small { display: block; font-size: 11px; font-weight: 400; color: var(--vr-stone-400); }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr > td.vr-cas { font-family: var(--vr-mono); white-space: nowrap; color: var(--vr-stone-500); }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr > td.vr-detail { font-family: var(--vr-mono); font-size: 11px; color: var(--vr-stone-500); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#settingsSection #settingsPaneUsers table.vr-tabulka .vr-akcie { display: flex; justify-content: flex-end; flex-wrap: nowrap; gap: 2px; }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr.je-otvoreny > td { background: #FEF2F2; }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr.vr-detail-riadok > td { padding: 0; background: #fff; }
#settingsSection #settingsPaneUsers table.vr-tabulka > tbody > tr.vr-detail-riadok:hover { background: transparent; }
#settingsSection #settingsPaneUsers .vr-prazdne { padding: 24px 12px; text-align: center; font-size: 14px; color: var(--vr-stone-400); }

/* rola ako mono znak (ROLE_BADGE vo Výrobe) */
#settingsSection #settingsPaneUsers .vr-znak { display: inline-block; border-radius: 4px; padding: 2px 8px; font: 700 12px/16px var(--vr-mono); white-space: nowrap; }
#settingsSection #settingsPaneUsers .vr-znak--super_admin { background: #EDE9FE; color: #5B21B6; }
#settingsSection #settingsPaneUsers .vr-znak--admin { background: #FEE2E2; color: #991B1B; }
#settingsSection #settingsPaneUsers .vr-znak--super_manager { background: #FFEDD5; color: #7C2D12; }
#settingsSection #settingsPaneUsers .vr-znak--manager { background: #DBEAFE; color: #1E40AF; }
#settingsSection #settingsPaneUsers .vr-znak--cashier { background: #D1FAE5; color: #064E3B; }
#settingsSection #settingsPaneUsers .vr-znak--viewer { background: var(--vr-stone-200); color: var(--vr-stone-700); }
#settingsSection #settingsPaneUsers .vr-znak--ine { background: transparent; color: var(--vr-stone-800); padding-left: 0; }
#settingsSection #settingsPaneUsers .vr-roly-matice { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* stavové štítky (badge-ok / -warn / -danger) */
#settingsSection #settingsPaneUsers .vr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
#settingsSection #settingsPaneUsers .vr-badge--ok { background: #DCFCE7; color: #166534; }
#settingsSection #settingsPaneUsers .vr-badge--warn { background: #FEF9C3; color: #854D0E; }
#settingsSection #settingsPaneUsers .vr-badge--danger { background: #FEE2E2; color: #991B1B; }
#settingsSection #settingsPaneUsers .vr-badge--info { background: #DBEAFE; color: #1E40AF; }
#settingsSection #settingsPaneUsers .vr-badge--neutral { background: var(--vr-stone-100); color: var(--vr-stone-700); }
#settingsSection #settingsPaneUsers .vr-pod { display: block; margin-top: 2px; font-size: 11px; color: var(--vr-stone-400); white-space: nowrap; }

/* detail človeka (osobné výnimky) — ako karta používateľa vo Výrobe */
#settingsSection #settingsPaneUsers .vr-clovek-detail { padding: 12px 16px 16px; border-left: 4px solid var(--vr-primary); background: var(--vr-stone-50); }
#settingsSection #settingsPaneUsers .vr-clovek-detail .vr-nadpis-maly { margin-top: 0; }
#settingsSection #settingsPaneUsers .vr-rola-volba { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 2px 0; font-size: 12px; color: var(--vr-stone-700); }
#settingsSection #settingsPaneUsers .vr-rola-volba label { display: inline-flex; align-items: center; gap: 6px; min-width: 220px; cursor: pointer; }
#settingsSection #settingsPaneUsers .vr-rola-volba input[type="checkbox"] { width: auto; margin: 0; }
#settingsSection #settingsPaneUsers .vr-rola-volba select.vr-input { width: auto; max-width: 240px; padding: 2px 8px; font-size: 12px; }

@media (max-width: 760px) {
  #settingsSection #settingsPaneUsers .vr-hint, #settingsSection #settingsPaneUsers table.vr-matica td.vr-dedi, #settingsSection #settingsPaneUsers table.vr-matica th.vr-st-d { display: none; }
  #settingsSection #settingsPaneUsers table.vr-matica th.vr-st-n, #settingsSection #settingsPaneUsers table.vr-matica th.vr-st-c, #settingsSection #settingsPaneUsers table.vr-matica th.vr-st-p { width: auto; }
  #settingsSection #settingsPaneUsers .vr-zalozky button.vr-zalozka { padding: 8px 12px; }
}