:root {
  --bg: #18181b;
  --surface: #212125;
  --surface-2: #27272c;
  --surface-hover: #303036;
  --border: #38383f;
  --text: #ececee;
  --muted: #9a9aa5;
  --primary: #6ea8fe;
  --primary-dark: #4c8cf0;
  --accent: #f0883e;
  --accent-dark: #d96f28;
  --danger: #f87171;

  --dot-new: #60a5fa;
  --dot-in_progress: #a78bfa;
  --dot-waiting: #fbbf24;
  --dot-resolved: #34d399;
  --dot-closed: #9ca3af;

  --dot-low: #9ca3af;
  --dot-medium: #34d399;
  --dot-high: #f87171;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { font-weight: 700; font-size: 1.1rem; color: var(--text); }
.brand-accent { color: #fb923c; }
.topbar nav { display: flex; gap: 16px; flex: 1; }
.topbar nav a { color: var(--muted); font-weight: 500; font-size: 12px; }
.topbar nav a:hover { color: var(--text); text-decoration: none; }
.topbar nav a.active { color: var(--primary); }
.topbar-settings-link { color: var(--muted); font-weight: 500; font-size: 12px; }
.topbar-settings-link:hover { color: var(--text); text-decoration: none; }
.topbar-settings-link.active { color: var(--primary); }

.logout-form { margin-left: auto; }

.banner {
  padding: 10px 20px;
  text-align: center;
  font-size: 0.85rem;
}
.banner.warn {
  background: #3a2d1a;
  border-bottom: 1px solid #5a4626;
  color: #f0b866;
}
.banner.warn a { color: #ffd699; text-decoration: underline; }
.banner.ok, .banner.error {
  text-align: left;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.banner.ok { background: #16301f; border: 1px solid #1f5c33; color: #6fe39c; }
.banner.error { background: #3a1a1a; border: 1px solid #5c2626; color: #f5a3a3; }

.checkbox-row {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  color: var(--text) !important;
  font-weight: 400 !important;
  margin-bottom: 14px;
}
.checkbox-row input[type="checkbox"] { width: auto; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.settings-tabs a {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
}
.settings-tabs a:hover { color: var(--text); text-decoration: none; }
.settings-tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }

h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
h3 { font-size: 0.95rem; }
.muted { color: var(--muted); font-size: 0.9rem; }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.page-logo {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.page-logo img { display: block; height: 28px; width: auto; }
.page-head .button { font-size: 12px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.button {
  display: inline-block;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
}
.button:hover { background: var(--surface-hover); text-decoration: none; }
.button.primary { background: var(--primary); color: #0f1115; border-color: var(--primary); font-weight: 600; }
.button.primary:hover { background: var(--primary-dark); }
.button.accent { background: var(--accent); color: #1a0f04; border-color: var(--accent); font-weight: 600; }
.button.accent:hover { background: var(--accent-dark); }
.button.secondary { background: transparent; }
.button.danger { background: var(--danger); color: #2a0a0a; border-color: var(--danger); font-weight: 600; }
.button.danger:hover { background: #ef4444; }

button, input, select, textarea {
  font-family: inherit;
  font-size: 0.95rem;
}

input, select, textarea {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
}

/* Plain submit buttons opt in via class="button primary" - see .button / .button.primary above.
   Component-scoped buttons (.dropdown-menu button, .link-button, .reply-send) style themselves. */

.link-button {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
}
.link-button.danger { color: var(--danger); }

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 12px;
}

.filters {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filters input, .filters select { margin: 0; }
.filters select, .filters .search-input, .filters .search-submit {
  height: 25px;
  box-sizing: border-box;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 0.63rem;
}
.filters .search-input, .filters .search-submit {
  width: 160px;
}

.inline-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}
.inline-form label { margin: 0; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.table th, .table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.92rem;
}
.table th { background: var(--surface-2); font-weight: 600; color: var(--muted); }
.sortable-col { color: var(--muted); white-space: nowrap; }
.sortable-col:hover { color: var(--text); text-decoration: none; }
.table tr:last-child td { border-bottom: none; }
.table tfoot td, .table tfoot th { border-top: 2px solid var(--border); border-bottom: none; }
.empty { color: var(--muted); text-align: center; padding: 24px; }

/* Zoznam ticketov - Predmet/Stav/Aktualizovane o tretinu mensie */
.tickets-table th, .tickets-table td { font-size: 0.61rem; }
.tickets-table .status { font-size: 0.52rem; }
.trash-actions { display: flex; gap: 14px; }
.trash-actions form { margin: 0; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-new { background: var(--dot-new); }
.dot-in_progress { background: var(--dot-in_progress); }
.dot-waiting { background: var(--dot-waiting); }
.dot-resolved { background: var(--dot-resolved); }
.dot-closed { background: var(--dot-closed); }
.dot-low { background: var(--dot-low); }
.dot-medium { background: var(--dot-medium); }
.dot-high { background: var(--dot-high); }

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card { width: 320px; }
.login-card h1 { margin-bottom: 16px; font-size: 1.2rem; }
.error { color: var(--danger); font-size: 0.88rem; }

/* ---------- Ticket detail: two-column layout ---------- */

.ticket-actionbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.ticket-actionbar > a,
.ticket-actionbar > form > button,
.ticket-actionbar > details > summary {
  font-size: 0.67rem;
}

.dropdown { position: relative; }
.dropdown summary {
  list-style: none;
  cursor: pointer;
}
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown[open] summary { background: var(--surface-hover); }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-menu form { margin: 0; }
.dropdown-menu button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88rem;
}
.dropdown-menu button:hover { background: var(--surface-hover); }
.dropdown-menu button.danger { color: var(--danger); }

.ticket-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

/* Tickety - lavy sidebar s rychlymi filtrami stavu */
.tickets-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: start;
}
.status-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  position: sticky;
  top: 20px;
  margin-top: 41px;
}
.status-filter-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}
.status-filter-link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.status-filter-link.active { background: var(--surface-2); color: var(--text); font-weight: 600; }
.status-filter-item { font-size: 0.6rem; }
.status-sidebar-divider { height: 1px; background: var(--border); margin: 6px 4px; }

.checkbox-col { width: 36px; text-align: center; }
.ticket-subject-link { display: block; font-weight: 600; font-size: 0.81rem; }
.ticket-subject-meta { color: var(--muted); font-size: 0.53rem; margin-top: 2px; }
.checkbox-col input[type="checkbox"] { width: auto; margin: 0; }

.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.63rem;
}
.bulk-toolbar select { margin: 0; }
.bulk-toolbar[hidden] { display: none; }
.bulk-toolbar select, .bulk-toolbar button {
  height: 25px;
  box-sizing: border-box;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 0.63rem;
  white-space: nowrap;
}

.ticket-title { font-size: 1.5rem; margin-bottom: 4px; }

.thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.message {
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--dot-closed);
}
.message.inbound { border-left-color: var(--dot-new); }
.message.outbound { border-left-color: var(--dot-resolved); background: #1c2620; }
.message-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; font-size: 0.85rem; }
.message-head strong { color: var(--text); }
.message-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.message-edit-link { color: var(--primary); cursor: pointer; font-size: 0.75rem; text-decoration: none; }
.message-edit-link:hover { text-decoration: underline; }
.message-body { white-space: pre-wrap; font-size: 0.93rem; color: #d8d8dc; }
.message-edit-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.message-edit-form[hidden] { display: none; }
.message-edit-form textarea { width: 100%; resize: vertical; }

/* HTML telo emailu je autorsky napisane pre svetle pozadie (biely podklad, tmava farba textu),
   preto ho vykreslime "naslepo" v svetlom rezime a cely blok potom farebne prevratime
   (invert + hue-rotate) - beznou technikou pre tmavy rezim cudzieho HTML obsahu. Vysledkom je
   tmave pozadie ladiace s appkou, pricom povodne farby (napr. cervene zvyraznenie) ostanu
   priblizne zachovane, nielen jednotna siva. */
div.message-body-html {
  white-space: normal;
  background: #d0d0d0;
  color: #1a1a1a;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-x: auto;
  filter: invert(1) hue-rotate(180deg);
}
.message-body-html p { margin: 0 0 10px; }
.message-body-html p:last-child { margin-bottom: 0; }
.message-body-html a { color: #1a56db; }
.message-body-html ul, .message-body-html ol { margin: 0 0 10px; padding-left: 22px; }
.message-body-html blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid #9a9aa0;
  color: #555;
}
.message-body-html table { border-collapse: collapse; max-width: 100%; }
.message-body-html td, .message-body-html th { border: 1px solid #e2e2e5; padding: 6px 10px; }
.message-body-html pre, .message-body-html code {
  background: #f2f2f4;
  border-radius: 4px;
  padding: 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.message-body-html img {
  max-width: 100%;
  height: auto;
  /* Cely blok je farebne prevrateny kvoli tmavemu rezimu (viz vyssie) - rovnaky filter
     aplikovany druhykrat na obrazok jeho ucinok zrusi, takze fotky/logo ostanu v povodnych farbach. */
  filter: invert(1) hue-rotate(180deg);
}
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.attachment-image-link { display: block; line-height: 0; }
.attachment-image {
  max-width: 180px;
  max-height: 180px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
}
.attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: var(--text);
}
.attachment-file:hover { border-color: var(--primary); text-decoration: none; }

.reply-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 24px;
}
.reply-box > summary { list-style: none; cursor: pointer; }
.reply-box > summary::-webkit-details-marker { display: none; }
.reply-box[open] > summary { display: none; }
.reply-collapsed { display: flex; gap: 12px; align-items: center; }
.reply-collapsed-input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--muted);
}
.reply-expanded { display: flex; gap: 12px; align-items: flex-start; }
.reply-box form { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; }
.reply-close {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 4px;
}
.reply-close:hover { color: var(--text); }
.reply-box textarea { width: 100%; resize: vertical; }
.reply-box .reply-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.reply-box .to-field { display: flex; gap: 8px; align-items: center; }
.reply-box .to-field input {
  flex: 1;
  height: 22px;
  box-sizing: border-box;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 0.63rem;
}
.reply-box .to-field-label {
  margin: 0;
  flex: none;
  width: 56px;
  color: var(--muted);
  font-size: 0.57rem;
}
.attach-files-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.63rem;
  cursor: pointer;
}
.attach-files-label input[type="file"] {
  flex: 1;
  color: var(--muted);
  font-size: 0.6rem;
}
.reply-send {
  background: var(--primary);
  color: #0f1115;
  border: none;
  border-radius: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.reply-send:hover { background: var(--primary-dark); }

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  flex: none;
}
.avatar.agent { background: #23406e; border-color: #2e578e; color: #bcd4ff; }
.avatar.customer { background: #3a3a2e; border-color: #57573f; color: #e4dfa8; }

/* Sidebar */
.ticket-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  position: sticky;
  top: 20px;
}
.sidebar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-weight: 700;
  font-size: 10px;
}
.sidebar-head .status { font-size: 10px; }
.sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
}
.sidebar-row:last-child { border-bottom: none; }
.sidebar-row .field-label { color: var(--muted); flex: none; width: 110px; }
.sidebar-row .field-label-to-invoice { color: #3b82f6; font-weight: 600; }
.sidebar-row .field-label-invoiced { color: #fb923c; font-weight: 600; }
.sidebar-row .field-label-paid { color: #34d399; font-weight: 600; }
.amount-paid { color: #34d399; font-weight: 600; }
.amount-unpaid { color: #fb923c; font-weight: 600; }
.sidebar-row .field-value { flex: 1; text-align: right; }
.sidebar-row form { margin: 0; width: 100%; }
.checkbox-form { display: flex; justify-content: flex-end; }
.checkbox-form input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.sidebar-row select, .sidebar-row input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  text-align: right;
  padding: 3px 4px;
  font-size: inherit;
}
.sidebar-row select:hover, .sidebar-row input:hover { border-color: var(--border); }
.sidebar-row .tags-input { text-align: right; }
.sidebar-row .link-button { font-size: 10px; }
.sidebar-row select,
.sidebar-row input[type="date"] {
  height: 16px;
  box-sizing: border-box;
  padding: 0 2px;
}
/* Safari ignoruje text-align na natívnom <select> aj s appearance:none, preto ho radsej
   urobime neviditelny (ale funkcny, prekryva cely riadok) a hodnotu vykreslime vlastnym
   <span>-om, ktory sa uz spolahlivo zarovna k pravemu okraju vo vsetkych prehliadacoch. */
.custom-select { position: relative; width: 100%; height: 16px; cursor: pointer; }
.custom-select-value {
  display: block;
  width: 100%;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  color: var(--text);
}
.custom-select:hover .custom-select-value { color: var(--primary); }
.custom-select-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.sidebar-row textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: left;
  resize: none;
  font-family: inherit;
  font-size: inherit;
}

/* Priama editacia - klikni na hodnotu, priamo v tom istom mieste sa zmeni na pole s tlacidlami
   OK (ulozit) / X (zrusit). Bez explicitneho potvrdenia sa nic neulozi. */
.inline-edit { text-align: right; }
.inline-edit-display { cursor: pointer; }
.inline-edit-display[hidden] { display: none; }
.inline-edit-field-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.inline-edit-field-wrap[hidden] { display: none; }
.inline-edit-actions { display: flex; justify-content: flex-end; gap: 4px; }
.inline-edit-ok, .inline-edit-cancel {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.inline-edit-ok { color: #34d399; }
.inline-edit-ok:hover { background: #34d399; color: #0f1115; border-color: #34d399; }
.inline-edit-cancel { color: var(--danger); }
.inline-edit-cancel:hover { background: var(--danger); color: #0f1115; border-color: var(--danger); }

/* Sidebar quick-edit fields (click a value, type, save) */
.quick-edit { position: relative; width: 100%; text-align: right; }
.quick-edit summary { list-style: none; cursor: pointer; }
.quick-edit summary::-webkit-details-marker { display: none; }
.field-value-clickable {
  display: inline-block;
  color: var(--text);
  border-bottom: none;
}
.field-value-clickable:hover { color: var(--primary); }
.resolution-preview {
  display: block;
  max-width: 100%;
  white-space: pre-wrap;
  text-align: right;
  word-break: break-word;
}
.quick-edit[open] summary { color: var(--primary); }
.quick-edit-form {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.quick-edit-form input {
  flex: 1;
  text-align: left;
  border-color: var(--border);
}
.quick-edit-form textarea.auto-grow {
  resize: none;
  overflow: hidden;
}

/* Title edit (subject) - left aligned, wider popover */
.quick-edit.title-edit { text-align: left; display: inline-block; width: auto; max-width: 100%; }
.quick-edit.title-edit summary.field-value-clickable {
  font-size: 1.5rem;
  font-weight: 700;
  border-bottom: 1px dashed transparent;
}
.quick-edit.title-edit summary.field-value-clickable:hover { border-bottom-color: var(--primary); }
.quick-edit.title-edit summary.kb-article-title { display: inline-flex; align-items: center; gap: 6px; }
.quick-edit.title-edit .quick-edit-form { left: 0; right: auto; min-width: 420px; max-width: 100%; }

/* Activity timeline */
.activity-feed { margin-top: 8px; }
.activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-left: 2px solid var(--border);
  margin-left: 5px;
  padding-left: 18px;
  position: relative;
}
.activity-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  border: 2px solid var(--bg);
}
.activity-item:last-child { border-left-color: transparent; }
.activity-line { font-size: 0.57rem; }
.activity-time { color: var(--muted); margin-right: 8px; }
.activity-actor { font-weight: 600; margin-right: 6px; }
.tag-chip {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
}

.stat-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  font-size: 0.82rem;
}

/* Zakaznici - polia a tlacidla o tretinu mensie */
.customers-table th, .customers-table td { font-size: 0.63rem; }
.customers-table input[type="text"],
.customers-new-form input[type="text"] {
  height: 25px;
  box-sizing: border-box;
  padding: 2px 6px;
  font-size: 0.63rem;
}
.customers-table .button,
.customers-new-form .button {
  height: 25px;
  box-sizing: border-box;
  padding: 2px 10px;
  font-size: 0.63rem;
}
.customers-table .tag { font-size: 0.6rem; }
.customers-new-form label { font-size: 0.63rem; }

/* Pouzivatelia - polia a tlacidla o tretinu mensie */
.users-table th, .users-table td { font-size: 0.63rem; }
.users-table input,
.users-new-form input {
  height: 25px;
  box-sizing: border-box;
  padding: 2px 6px;
  font-size: 0.63rem;
}
.users-table .button,
.users-new-form .button {
  height: 25px;
  box-sizing: border-box;
  padding: 2px 10px;
  font-size: 0.63rem;
}
.users-table .link-button { font-size: 0.63rem; }
.users-new-form label { font-size: 0.63rem; }

/* Nastavenia mailu - rovnaka kompaktna skala ako Zakaznici/Pouzivatelia */
.mail-settings h2 { font-size: 0.8rem; }
.mail-settings .muted { font-size: 0.68rem; }
.mail-settings label { font-size: 0.63rem; }
.mail-settings input {
  height: 25px;
  box-sizing: border-box;
  padding: 2px 6px;
  font-size: 0.63rem;
}
.mail-settings .button {
  height: 25px;
  box-sizing: border-box;
  padding: 2px 10px;
  font-size: 0.63rem;
}
.mail-settings .status { font-size: 0.63rem; }
.mail-settings .banner { font-size: 0.7rem; padding: 8px 14px; }

@media (max-width: 900px) {
  .ticket-layout { grid-template-columns: 1fr; }
  .ticket-sidebar { position: static; }
  .tickets-layout { grid-template-columns: 1fr; }
  .status-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .kb-layout { grid-template-columns: 1fr; }
  .kb-tree { position: static; }
}

/* Knowledge Base */
.kb-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
}
.kb-tree {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  position: sticky;
  top: 20px;
  font-size: 0.7rem;
}
.kb-tree-search { margin: 0 0 8px; }
.kb-tree-search input {
  width: 100%;
  box-sizing: border-box;
  font-size: inherit;
  padding: 4px 6px;
}
.kb-new-root { margin: 0 0 8px; }
.kb-new-root input {
  width: 100%;
  box-sizing: border-box;
  font-size: inherit;
  padding: 4px 6px;
}
.kb-tree-list { list-style: none; margin: 0; padding-left: 14px; }
.kb-tree > .kb-tree-list { padding-left: 0; }
.kb-tree-list-root { margin-bottom: 6px; }
.kb-tree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: grab;
}
.kb-tree-row:hover { background: var(--surface-hover); }
.kb-tree-row.active { background: var(--surface-2); font-weight: 600; }
.kb-tree-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-folder-icon { flex: none; }
.kb-tree-toggle {
  flex: none;
  width: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0;
}
.kb-tree-toggle:hover { color: var(--text); }
.kb-tree-toggle-spacer { flex: none; width: 15px; }
.kb-tree-children[hidden] { display: none; }
.kb-tree-add { flex: none; }
.kb-tree-add summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
}
.kb-tree-add summary::-webkit-details-marker { display: none; }
.kb-tree-add-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  margin: 4px 0 8px 14px;
  background: var(--surface-2);
  border-radius: 6px;
}
.kb-tree-add-menu form { display: flex; gap: 4px; margin: 0; }
.kb-tree-add-menu input { flex: 1; font-size: inherit; padding: 2px 4px; min-width: 0; }
.kb-tree-add-menu button { font-size: inherit; padding: 2px 6px; white-space: nowrap; }

.kb-main { min-width: 0; }
.kb-breadcrumb { color: var(--muted); font-size: 0.85rem; margin: 0 0 16px; }
.kb-breadcrumb a { color: var(--muted); }
.kb-list { list-style: none; padding: 0; margin: 0 0 20px; }
.kb-list li { padding: 8px 0; border-bottom: 1px solid var(--border); cursor: grab; }
.kb-list a { color: var(--text); }
.kb-icon-link { display: inline-flex; align-items: center; gap: 6px; }
.kb-color-form { margin: 0; }
.kb-color-form input[type="color"] {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.kb-list li.kb-dragging, .kb-tree-node.kb-dragging { opacity: 0.4; }
.kb-new-article { display: flex; gap: 8px; margin-top: 16px; }
.kb-new-article input { flex: 1; }

.kb-search-form { display: flex; gap: 8px; margin-bottom: 20px; }
.kb-search-form input { flex: 1; max-width: 420px; }
.kb-search-results li { cursor: default; }
.kb-search-path { color: var(--muted); font-size: 0.7rem; margin-top: 2px; }
.kb-search-snippet { color: var(--muted); font-size: 0.82rem; margin-top: 4px; line-height: 1.4; }

.kb-article-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.kb-article-title { margin: 0; font-size: 1.4rem; }
.kb-article-actions { display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.kb-article-body { margin-top: 16px; line-height: 1.6; color: var(--text); }
.kb-article-body img { max-width: 100%; height: auto; }
.kb-article-body table { border-collapse: collapse; max-width: 100%; }
.kb-article-body td, .kb-article-body th { border: 1px solid var(--border); padding: 6px 10px; }
.kb-article-edit-form { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.kb-article-edit-form[hidden] { display: none; }
.kb-article-title-input { font-size: 1.15rem; padding: 6px 8px; }