/*
 * SDÍLENÁ PALETA („Paleta konstrukce“) – stejné barvy pozadí, textů, rámečků a tlačítek ve všech
 * appkách, v denním i nočním režimu. Přebíjí stejnojmenné proměnné z style.css appky (načítá se po něm).
 * Kontrasty (WCAG): text na ploše ≥ 9:1, tlumený text ≥ 4.5:1, akcent na ploše ≥ 4.5:1 v obou režimech.
 */
:root {
  --paper: #f2f2f0;          /* Fog – pozadí stránky */
  --surface: #ffffff;        /* karty, tabulky, formuláře */
  --surface-2: #f7f7f5;      /* hlavičky tabulek, sekundární plochy */
  --surface-3: #ececea;
  --border: #dcdcd8;         /* Cement */
  --border-strong: #b4b9c1;  /* rámečky inputů a tlačítek */
  --text: #2c3038;           /* Slate */
  --text-muted: #5f646c;
  --heading: #141619;        /* Ink */
  --accent: #3e6c9b;         /* Blue Gray 600 */
  --accent-soft: rgba(62, 108, 155, 0.12);
  --accent-ink: #ffffff;
  --danger: #b3261e;
  --success: #2e7d4f;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141619;        /* Ink */
    --surface: #1f2328;
    --surface-2: #272b31;
    --surface-3: #2f343b;
    --border: #353b44;
    --border-strong: #4d5560;
    --text: #c9ced6;
    --text-muted: #9aa3b0;   /* Mist */
    --heading: #f2f2f0;      /* Fog */
    --accent: #79a9db;       /* Blue Gray 400 */
    --accent-soft: rgba(121, 169, 219, 0.16);
    --accent-ink: #141619;
    --danger: #e5675f;
    --success: #62c98a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #141619;
  --surface: #1f2328;
  --surface-2: #272b31;
  --surface-3: #2f343b;
  --border: #353b44;
  --border-strong: #4d5560;
  --text: #c9ced6;
  --text-muted: #9aa3b0;
  --heading: #f2f2f0;
  --accent: #79a9db;
  --accent-soft: rgba(121, 169, 219, 0.16);
  --accent-ink: #141619;
  --danger: #e5675f;
  --success: #62c98a;
  color-scheme: dark;
}

/*
 * SDÍLENÁ HLAVIČKA appek TallGuys – vzhled (páruje se s js/tg-topbar.js). Stejný soubor ve všech
 * appkách, KOPÍRUJE SE BEZE ZMĚNY a načítá se AŽ PO style.css appky (přebíjí starý .topbar).
 * Barvy = „Paleta konstrukce“: den = světle šedá lišta (ne černá), noc = tlumená antracitová.
 */
:root {
  --tgt-bg: #e8e8e5;
  --tgt-border: #d6d6d1;
  --tgt-text: #2c3038;
  --tgt-strong: #141619;
  --tgt-muted: #5f646c;
  --tgt-hover: rgba(20, 22, 25, 0.07);
  --tgt-active: rgba(62, 108, 155, 0.14);
  --tgt-accent: #3e6c9b;
  --tgt-mark-bg: #141619;
  --tgt-mark-fg: #f2f2f0;
  --tgt-pop-bg: #ffffff;
  --tgt-pop-border: #dcdcd8;
  --tgt-pop-shadow: 0 12px 32px rgba(20, 22, 25, 0.16), 0 2px 6px rgba(20, 22, 25, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tgt-bg: #1c1f24;
    --tgt-border: #2c3038;
    --tgt-text: #c9ced6;
    --tgt-strong: #f2f2f0;
    --tgt-muted: #9aa3b0;
    --tgt-hover: rgba(255, 255, 255, 0.07);
    --tgt-active: rgba(121, 169, 219, 0.18);
    --tgt-accent: #79a9db;
    --tgt-mark-bg: #f2f2f0;
    --tgt-mark-fg: #141619;
    --tgt-pop-bg: #24282e;
    --tgt-pop-border: #353a43;
    --tgt-pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --tgt-bg: #1c1f24;
  --tgt-border: #2c3038;
  --tgt-text: #c9ced6;
  --tgt-strong: #f2f2f0;
  --tgt-muted: #9aa3b0;
  --tgt-hover: rgba(255, 255, 255, 0.07);
  --tgt-active: rgba(121, 169, 219, 0.18);
  --tgt-accent: #79a9db;
  --tgt-mark-bg: #f2f2f0;
  --tgt-mark-fg: #141619;
  --tgt-pop-bg: #24282e;
  --tgt-pop-border: #353a43;
  --tgt-pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

header.tg-topbar, nav.tg-topbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  min-height: 56px; padding: 0 16px; margin: 0;
  background: var(--tgt-bg); color: var(--tgt-text);
  border-bottom: 1px solid var(--tgt-border); box-shadow: none;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: sticky; top: 0; z-index: 400;
}

/* Logo */
.tg-topbar a.tgt-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tgt-strong);
  margin-right: 14px; flex-shrink: 0; padding: 0; background: none; border: 0; }
.tg-topbar a.tgt-brand:hover { background: none; opacity: 0.85; }
.tgt-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 3px;
  background: var(--tgt-mark-bg); color: var(--tgt-mark-fg); font-weight: 800; font-size: 13px; letter-spacing: 0.02em; }
.tgt-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.tgt-brand-text strong { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: var(--tgt-strong); }
.tgt-brand-text span { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tgt-muted); margin-top: 2px; }

/* Pravá část */
.tgt-right { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.tgt-wrap { position: relative; }
.tg-topbar .tgt-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; border-radius: 3px;
  border: 1px solid transparent; background: transparent; color: var(--tgt-text); font: 600 13px/1 "Montserrat", sans-serif;
  text-decoration: none; cursor: pointer; white-space: nowrap; }
.tg-topbar .tgt-btn:hover, .tg-topbar .tgt-btn[aria-expanded="true"] { background: var(--tgt-hover); color: var(--tgt-strong); }
.tg-topbar .tgt-btn.active { background: var(--tgt-active); color: var(--tgt-accent); }
.tg-topbar .tgt-btn:focus-visible, .tgt-item:focus-visible { outline: 2px solid var(--tgt-accent); outline-offset: 1px; }
.tg-topbar .tgt-icon { width: 36px; padding: 0; justify-content: center; }
.tgt-btn svg, .tgt-ico svg, .tgt-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tgt-ico { display: inline-flex; }
.tgt-chev svg { width: 15px; height: 15px; }
.tgt-chev { display: inline-flex; color: var(--tgt-muted); transition: transform 0.15s; }
.tgt-btn[aria-expanded="true"] .tgt-chev { transform: rotate(180deg); }

/* Uživatel */
.tgt-user { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--tgt-border); }
.tg-topbar .tgt-user-btn { border-color: var(--tgt-border); padding: 0 10px 0 5px; }
.tgt-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 3px;
  background: var(--tgt-accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; }
:root[data-theme="dark"] .tgt-avatar { color: #141619; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tgt-avatar { color: #141619; } }
.tgt-user-name { font-weight: 700; color: var(--tgt-strong); }

/* Rozbalovací menu */
.tgt-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; z-index: 450; padding: 6px 0;
  background: var(--tgt-pop-bg); border: 1px solid var(--tgt-pop-border); border-radius: 3px; box-shadow: var(--tgt-pop-shadow); }
.tgt-pop[hidden] { display: none; }
.tgt-pop-head { padding: 8px 16px 10px; border-bottom: 1px solid var(--tgt-pop-border); margin-bottom: 6px; display: flex; flex-direction: column; gap: 3px; }
.tgt-pop-head strong { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgt-muted); }
.tgt-pop-head span { font-size: 12px; color: var(--tgt-muted); }
.tg-topbar .tgt-item, .tgt-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 16px; border: 0; background: none;
  color: var(--tgt-text); font: 500 14px/1.2 "Montserrat", sans-serif; text-decoration: none; text-align: left; cursor: pointer; border-radius: 0; }
.tg-topbar .tgt-item:hover { background: var(--tgt-hover); color: var(--tgt-strong); }
.tgt-item .tgt-ico { color: var(--tgt-muted); }
.tgt-item:hover .tgt-ico { color: var(--tgt-strong); }
.tgt-sep { height: 1px; background: var(--tgt-pop-border); margin: 6px 0; }
.tgt-empty { padding: 14px 16px; color: var(--tgt-muted); font-size: 13px; }
.tgt-pop-bell { min-width: 260px; }

/* Zvoneček appky, který si appka přinesla (např. Marketingový plán) – ať vypadá jako ostatní ikony */
.tg-topbar .tgt-bell-own { position: relative; }
.tg-topbar .tgt-bell-own > button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; background: transparent; color: var(--tgt-text); border-radius: 3px; cursor: pointer; }
.tg-topbar .tgt-bell-own > button:hover { background: var(--tgt-hover); }

/* Menu appky vlevo – sjednocený vzhled položek (tlačítka/odkazy s třídou tgt-nav) */
.tg-topbar .tgt-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tg-topbar .tgt-nav > a, .tg-topbar .tgt-nav > button { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 3px;
  border: 0; background: transparent; color: var(--tgt-text); font: 600 13px/1 "Montserrat", sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.tg-topbar .tgt-nav > a:hover, .tg-topbar .tgt-nav > button:hover { background: var(--tgt-hover); color: var(--tgt-strong); }
.tg-topbar .tgt-nav > .active { background: var(--tgt-active); color: var(--tgt-accent); }

/* Hamburger pro menu appky (js/tg-topbar.js → setupNav). Třídu .tgt-collapsed dává JS jen do 1024 px
   (≤ 640 vždy, 641–1024 jen když se menu nevejde) – desktop se nemění. Panel = tytéž položky .tgt-nav pod lištou. */
.tg-topbar .tgt-burger { display: none; min-width: 0; max-width: 46vw; flex-shrink: 1; }
.tgt-burger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tg-topbar.tgt-collapsed .tgt-burger:not([hidden]) { display: inline-flex; }
.tg-topbar.tgt-collapsed .tgt-nav { display: none; }
.tg-topbar.tgt-collapsed.tgt-nav-open .tgt-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; z-index: 440;
  flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0; overflow-x: hidden; overflow-y: auto; max-height: calc(100dvh - 64px);
  overscroll-behavior: contain; background: var(--tgt-pop-bg); border-bottom: 1px solid var(--tgt-pop-border); box-shadow: var(--tgt-pop-shadow); }
.tg-topbar.tgt-collapsed.tgt-nav-open .tgt-nav > a, .tg-topbar.tgt-collapsed.tgt-nav-open .tgt-nav > button {
  height: auto; min-height: 46px; padding: 0 20px; border-radius: 0; font-size: 15px; justify-content: flex-start; white-space: normal; text-align: left; }
.tg-topbar.tgt-collapsed.tgt-nav-open .tgt-nav > .active { box-shadow: inset 3px 0 0 var(--tgt-accent); }
.tg-topbar.tgt-collapsed.tgt-nav-open .tgt-nav > [hidden] { display: none; }

@media (max-width: 760px) {
  header.tg-topbar, nav.tg-topbar { padding: 0 10px; gap: 4px; }
  .tgt-brand-text, .tg-topbar .tgt-label { display: none; }
  .tgt-user { margin-left: 2px; padding-left: 4px; }
  .tg-topbar a.tgt-brand { margin-right: 6px; }
  /* Panely (zvoneček, uživatel, Nastavení, přítomnost) na úzké obrazovce: přichycené k pravému okraji okna, nikdy mimo obrazovku. */
  .tgt-pop { position: fixed; top: 60px; right: 8px; left: auto; width: min(360px, calc(100vw - 16px)); min-width: 0; max-height: calc(100dvh - 72px); overflow-y: auto; }
}
@media (max-width: 1024px) {
  .tg-topbar .tgt-user-name { display: none; } /* tablet: jen avatar, ať se vejde menu appky */
}
.tgt-pop-user .tgt-item.tgt-theme-item { display: none; } /* položka Vzhled v menu uživatele – jen telefon */
@media (max-width: 640px) {
  /* Telefon: přítomnost zkráceně (1. avatar + počet online), přepínač motivu z lišty pryč – je v menu uživatele (fáze 3, 2026-11-02). */
  .tg-topbar:not(:has(.tgt-theme-item)) .tgt-presence { display: none; } /* starší kopie tg-topbar.js (Péče, Time): přítomnost se vedle motivu nevejde */
  .tg-topbar .tgt-presence-btn { margin-right: 0; }
  .tg-topbar .tgt-presence-btn .tgt-pavatar:not(:first-child) { display: none; }
  .tg-topbar .tgt-presence-btn[data-n]::after { content: attr(data-n); margin-left: 5px; font: 700 12px/1 "Montserrat", sans-serif; color: var(--tgt-muted); }
  .tg-topbar:has(.tgt-theme-item) .tgt-theme { display: none; } /* jen s novým tg-topbar.js (má položku v menu); starší kopie appek tlačítko nechají */
  .tgt-pop-user .tgt-item.tgt-theme-item { display: flex; }
}
/* Dotyk: tlačítka lišty aspoň 40 px (MOBILE_STANDARDS.md). */
@media (pointer: coarse) {
  .tg-topbar .tgt-btn, .tg-topbar .tgt-nav > a, .tg-topbar .tgt-nav > button, .tg-topbar .tgt-bell-own > button { height: 40px; }
  .tg-topbar .tgt-icon, .tg-topbar .tgt-bell-own > button { width: 40px; }
  .tg-topbar .tgt-item { padding-top: 12px; padding-bottom: 12px; }
  .tg-topbar .tgt-presence-btn { min-height: 40px; }
}

/* Další tlačítka appek v liště (Sdílet odkaz, Aktualizovat data, …) – stejný vzhled jako ostatní */
.tg-topbar .topbar-btn, .tg-topbar .refresh-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border: 1px solid var(--tgt-border); border-radius: 3px; background: transparent; color: var(--tgt-text);
  font: 600 13px/1 "Montserrat", sans-serif; cursor: pointer; white-space: nowrap; text-decoration: none; }
.tg-topbar .topbar-btn:hover, .tg-topbar .refresh-btn:hover { background: var(--tgt-hover); color: var(--tgt-strong); border-color: var(--tgt-border); }
/* Tablet a mobil: „Aktualizovat data“ (a podobná tlačítka s .refresh-label) jen jako ikona, ať se lišta vejde na 1 řádek. */
@media (max-width: 1024px) {
  .tg-topbar .refresh-btn .refresh-label { display: none; }
  .tg-topbar .refresh-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
}
.tg-topbar .topbar-spacer { flex: 1; }
.tg-topbar .bell-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #d9534f; color: #fff; font: 700 10px/16px "Montserrat", sans-serif; text-align: center; }

/* Společný zvoneček – seznam upozornění */
.tg-topbar .tgt-btn.tgt-icon { position: relative; }
.tgt-pop-bell { min-width: min(360px, calc(100vw - 16px)); max-width: min(400px, calc(100vw - 16px)); max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain; padding-top: 0; padding-bottom: 0; }
/* Hlavička a patička panelu drží na místě, seznam notifikací mezi nimi scrolluje. */
.tgt-pop-bell .tgt-bell-head { position: sticky; top: 0; z-index: 2; background: var(--tgt-pop-bg); padding-top: 14px; }
.tgt-nfoot { position: sticky; bottom: 0; z-index: 2; background: var(--tgt-pop-bg); padding-bottom: 6px; }
.tgt-bell-head { flex-direction: row !important; align-items: center; justify-content: space-between; }
.tg-topbar .tgt-link { border: 0; background: none; color: var(--tgt-accent); font: 600 12px "Montserrat", sans-serif; cursor: pointer; padding: 0; }
.tg-topbar .tgt-notif { display: flex; gap: 12px; padding: 10px 16px; text-decoration: none; color: var(--tgt-text); border-left: 3px solid var(--tgt-accent); }
.tg-topbar .tgt-notif + .tgt-notif { border-top: 1px solid var(--tgt-pop-border); }
.tg-topbar .tgt-notif:hover { background: var(--tgt-hover); }
.tg-topbar .tgt-notif.read { border-left-color: transparent; opacity: 0.7; }
.tgt-notif-icon { font-size: 18px; line-height: 1.2; }
.tgt-notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tgt-notif-body strong { font-size: 13.5px; color: var(--tgt-strong); font-weight: 700; }
.tgt-notif-body span { font-size: 12.5px; color: var(--tgt-muted); line-height: 1.4; }
.tg-topbar .tgt-notif .tgt-notif-body { flex: 1 1 auto; }
/* Kdy notifikace dorazila – dnes čas, jinak den (vpravo nahoře, jako v inboxu Notionu). */
.tgt-notif-time { flex: 0 0 auto; align-self: flex-start; margin-left: auto; font-size: 11.5px; color: var(--tgt-muted); white-space: nowrap; line-height: 1.5; padding-top: 1px; font-variant-numeric: tabular-nums; }
/* Obecné styly tlačítek appky (např. Finance: button { background: accent; box-shadow … }) do lišty nepouštět */
.tg-topbar button, .tg-topbar button:hover, .tg-topbar button:active { box-shadow: none; filter: none; }
.tg-topbar .tgt-btn:not(:hover):not([aria-expanded="true"]):not(.active) { background: transparent; }
.tg-topbar .tgt-btn:not(.tgt-user-btn) { border-color: transparent; }

/* Přítomnost – kdo je právě online (plná barva = ve stejné appce, vybledlé = jinde) */
.tgt-presence[hidden] { display: none; }
.tg-topbar .tgt-presence-btn { display: inline-flex; align-items: center; padding: 3px 4px; margin-right: 4px; border: 0; background: none; cursor: pointer; border-radius: 3px; }
.tg-topbar .tgt-presence-btn:hover, .tg-topbar .tgt-presence-btn[aria-expanded="true"] { background: var(--tgt-hover); }
.tgt-pavatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 3px;
  background: hsl(var(--p-hue, 0) 55% 42%); color: #fff; font: 800 10.5px/1 "Montserrat", sans-serif; letter-spacing: 0.03em;
  box-shadow: 0 0 0 2px var(--tgt-bg, #fff); opacity: 0.45; }
.tgt-presence-btn .tgt-pavatar + .tgt-pavatar { margin-left: 5px; }
.tgt-pavatar.here { opacity: 1; }
.tgt-pavatar.here::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; border-radius: 50%; background: #2fb36b; box-shadow: 0 0 0 2px var(--tgt-bg, #fff); }
.tgt-pavatar.tgt-pmore { background: var(--tgt-hover); color: var(--tgt-strong); opacity: 1; }
.tgt-pop-presence { min-width: min(280px, calc(100vw - 16px)); max-width: min(340px, calc(100vw - 16px)); }
.tgt-psec { padding: 8px 16px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tgt-muted); }
.tg-topbar .tgt-pperson { display: flex; align-items: center; gap: 12px; padding: 8px 16px; text-decoration: none; color: var(--tgt-text); }
.tg-topbar a.tgt-pperson:hover { background: var(--tgt-hover); }
.tgt-pperson .tgt-pavatar { box-shadow: none; }
.tgt-pbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tgt-pbody strong { font-size: 13.5px; font-weight: 700; color: var(--tgt-strong); }
.tgt-pbody span { font-size: 12px; color: var(--tgt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Kurzory ostatních na stránce (jako ve Figmě, zatím je vidí jen Admin) – vrstva přes celé okno, na myš nereaguje. */
.tgt-cursors { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; pointer-events: none; }
.tgt-cursor { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; --c: hsl(var(--p-hue, 0) 62% 42%);
  transition: transform 0.5s linear, opacity 0.3s; will-change: transform; }
.tgt-cursor svg { flex: 0 0 auto; width: 18px; height: 18px; margin: -1px 0 0 -1px; fill: var(--c); stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.tgt-cursor span { margin: 15px 0 0 -3px; padding: 3px 8px; border-radius: 3px; background: var(--c); color: #fff; font: 700 11.5px/1.3 "Montserrat", sans-serif; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.tgt-cursor.idle { opacity: 0.45; }
/* Kurzor mimo obrazovku: jen štítek u horního/dolního kraje, kliknutím se k němu odroluje. */
.tgt-cursor.off-up svg, .tgt-cursor.off-down svg { display: none; }
.tgt-cursor.off-up span, .tgt-cursor.off-down span { margin: 0; pointer-events: auto; cursor: pointer; }
.tgt-cursor.off-up span::before { content: "↑ "; }
.tgt-cursor.off-down span::before { content: "↓ "; }

/* Akce u notifikace (připomenout později, přečtené/nepřečtené, archivovat) – ukážou se po najetí myší. */
.tg-topbar .tgt-notif { position: relative; }
/* Lišta plave NAD řádkem (přes jeho horní hranu, jako ve Slacku) – text notifikace neuskočí ani se nepřekryje (owner 2026-10-22). */
.tgt-nacts { position: absolute; top: -17px; right: 10px; z-index: 3; display: none; align-items: center; gap: 2px; padding: 3px;
  background: var(--tgt-pop-bg, #fff); border: 1px solid var(--tgt-pop-border); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); }
.tg-topbar .tgt-notif:hover .tgt-nacts, .tgt-nacts.choosing, .tgt-nacts:focus-within { display: inline-flex; }
.tgt-nact { position: relative; width: 28px; height: 28px; border: none; background: transparent; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--tgt-muted); padding: 0; }
.tgt-nact:hover { background: var(--tgt-hover); color: var(--tgt-strong); }
.tgt-nact svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Tmavý popisek nad tlačítkem (jako v ukázce) */
.tgt-nact[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); right: -4px; white-space: nowrap;
  background: #1f2227; color: #fff; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 6px; pointer-events: none; z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.tgt-nchoice { border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--tgt-strong); padding: 5px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.tgt-nchoice:hover { background: var(--tgt-hover); }
.tgt-nlater { padding: 8px 16px; font-size: 12px; color: var(--tgt-muted); }
.tg-topbar .tgt-notif .tgt-notif-body { padding-right: 4px; }
@media (hover: none) { .tgt-nacts { display: inline-flex; position: static; margin-left: auto; align-self: flex-start; } .tgt-notif-time { display: none; } }

.tgt-nchoice.tgt-nclose { padding: 5px 7px; font-size: 15px; line-height: 1; color: var(--tgt-muted, #888); }

/* =====================================================================================================
 * SDÍLENÉ RESPONZIVNÍ UTILITY (nastroje-mobil, 2026-11-02) – pravidla a použití viz
 * „Projects - Claude/nastroje-mobil/MOBILE_STANDARDS.md“. Breakpointy: mobil ≤ 640 px, tablet ≤ 1024 px.
 * Na desktopu (> 1024 px) nedělají nic kromě .rs-scroll (ten je neviditelný, dokud se obsah vejde).
 * ===================================================================================================== */
/* Obal tabulky / širokého obsahu: vodorovně scrolluje JEN on, nikdy celá stránka. */
.rs-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
/* Ve scrollující tabulce drží první sloupec na místě (přidej na <table> uvnitř .rs-scroll). */
.rs-sticky-col tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface, #fff); }
@media (max-width: 640px) {
  /* Tabulka → karty: <table class="rs-cards">, každé <td data-label="Název sloupce">; td.rs-card-title = nadpis karty. */
  table.rs-cards, table.rs-cards tbody, table.rs-cards tr, table.rs-cards tr > td { display: block; width: 100%; }
  table.rs-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.rs-cards tr { margin: 0 0 10px; padding: 6px 12px; border: 1px solid var(--border, #dcdcd8); border-radius: var(--radius, 3px); background: var(--surface, #fff); }
  table.rs-cards tr > td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  table.rs-cards tr > td + td { border-top: 1px solid var(--border, #dcdcd8); }
  table.rs-cards tr > td[data-label]::before { content: attr(data-label); flex: 0 0 40%; text-align: left; font-weight: 600; color: var(--text-muted, #5f646c); }
  table.rs-cards tr > td.rs-card-title { justify-content: flex-start; text-align: left; font-weight: 700; font-size: 1.05em; }
  table.rs-cards tr > td.rs-card-title::before { content: none; }
  /* Modal / <dialog> / panel na celou obrazovku (přidej na samotné okno, ne na pozadí). */
  .rs-sheet { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0;
    overflow-y: auto; overscroll-behavior: contain; transform: none; }
  /* Formulář / mřížka / řada polí do jednoho sloupce. */
  .rs-stack { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; }
  .rs-stack > * { width: 100%; max-width: 100%; min-width: 0; }
  .rs-hide-m { display: none !important; }
  .rs-wrap { flex-wrap: wrap; }
}
@media (min-width: 641px) { .rs-only-m { display: none !important; } }
@media (max-width: 1024px) {
  .rs-stack-t { display: flex; flex-direction: column; align-items: stretch; grid-template-columns: none; }
  .rs-stack-t > * { width: 100%; max-width: 100%; min-width: 0; }
  .rs-hide-t { display: none !important; }
}
/* Dotyk: cíl aspoň 40 × 40 px; .rs-hover-only se na dotyku ukáže natrvalo (náhrada akcí jen na hover). */
@media (pointer: coarse) { .rs-touch { min-height: 40px; min-width: 40px; } }
@media (hover: none) { .rs-hover-only { opacity: 1 !important; visibility: visible !important; } }