/* JNCQ portal components — built on jncq.tokens.css */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

body { display: flex; flex-direction: column; min-height: 100vh; }

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

/* ── Topbar ─────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-5);
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
}
/* (legacy `.topbar nav` rules removed — superseded by the `.topnav` class rules
   below; they were more specific than the responsive overrides and broke the
   mobile menu spacing.) */
.topbar-user { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

/* theme toggle (topbar icon, next to the profile) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: var(--radius-btn);
  color: var(--color-muted);
  cursor: pointer;
  line-height: 0;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-hover-bg); }
.user-name { color: var(--color-muted); font-size: 13px; }

/* ── Layout ─────────────────────────────────────────── */
.page {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  flex: 1;
}
.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.footer {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

h1 { font-size: 22px; font-weight: 600; margin-bottom: var(--space-5); }
h2 { font-size: 16px; font-weight: 600; margin-bottom: var(--space-3); }

/* ── Cards ──────────────────────────────────────────── */
.card {
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.card .muted { color: var(--color-muted); }

/* ── Login screen ───────────────────────────────────── */
.login-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  max-width: 360px;
  width: 100%;
}
.login-box h1 {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.login-box .tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn-google:hover { background: var(--color-hover-bg); color: var(--color-text); box-shadow: var(--shadow-pop); }

/* ── Buttons ────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-hover); color: #fff; }
.btn-ghost { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }
.btn-ghost:hover { background: var(--color-hover-bg); color: var(--color-text); }
.btn-danger { background: transparent; color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.btn-danger:hover { background: var(--color-danger-bg); }
.btn-sm { padding: 3px 10px; font-size: 12px; }

/* ── Icon action buttons (compact table rows) ────────── */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.row-actions form { margin: 0; display: inline-flex; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.icon-btn:hover { background: var(--color-hover-bg); color: var(--color-text); border-color: var(--color-border-input); }
.icon-btn-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.perm-badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Flash messages ─────────────────────────────────── */
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-5);
  font-size: 14px;
}
.flash-error   { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.flash-success { background: var(--color-ok-bg); color: var(--color-ok); border: 1px solid var(--color-ok-border); }

/* ── Tables ─────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }

/* ── Badges ─────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-chip);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.badge-admin    { background: var(--color-accent-tint); color: var(--color-accent); }
.badge-user     { background: var(--color-hover-bg); color: var(--color-muted); }
.badge-active   { background: var(--color-ok-bg); color: var(--color-ok); }
.badge-inactive { background: var(--color-danger-bg); color: var(--color-danger); }

/* ── Forms ──────────────────────────────────────────── */
.form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-faint);
}
/* Every text-like control shares one look. Keep this list exhaustive: a type
   that falls through (search/date did, until 2026-08-04) renders in raw UA
   chrome — white-on-dark and a size of its own. */
input[type="text"], input[type="email"], input[type="search"], input[type="date"],
input[type="number"], input[type="url"], input[type="tel"], select {
  padding: var(--space-2) var(--space-3);
  background: var(--color-input-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 14px;
}
/* Safari paints a rounded inset "capsule" on search and its own date field
   metrics; normalise both to the shared box (height comes from padding). */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="date"] { -webkit-appearance: none; appearance: none; line-height: 1.2; }
input:focus, select:focus { outline: 2px solid var(--color-accent-line); border-color: var(--color-accent); }

.inline-form { display: inline; }

/* ── Documents (rendered markdown) ──────────────────── */
.doc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.doc-toolbar h1 { margin-bottom: 0; }
.doc-actions { display: flex; gap: var(--space-3); }

.doc { font-size: 14.5px; line-height: 1.65; }
.doc h1 { font-size: 20px; margin: 0 0 var(--space-4); }
.doc h2 {
  font-size: 16px;
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.doc h3 { font-size: 14px; margin: var(--space-5) 0 var(--space-2); color: var(--color-accent); }
.doc p { margin-bottom: var(--space-3); }
.doc ul { margin: 0 0 var(--space-3) var(--space-5); }
.doc li { margin-bottom: var(--space-1); }
.doc table { margin: var(--space-3) 0 var(--space-4); }
.doc td, .doc th { padding: var(--space-2) var(--space-3); }
.doc hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }
.doc code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-chip);
  padding: 1px 5px;
}
.doc em { color: var(--color-muted); }

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: var(--space-3); }
  .page { padding: var(--space-5) var(--space-4); }
  td, th { padding: var(--space-2); }
}

/* ── Wealth (Přehled / Majetek) ─────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.card.kpi { display: flex; flex-direction: column; gap: var(--space-2); }
.kpi-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.kpi-value { font-size: 22px; font-weight: 600; white-space: nowrap; }
.kpi-value.accent { color: var(--color-accent); }
.kpi-value.muted { color: var(--color-muted); }

th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--font-mono); font-size: 12.5px; }
tr.total-row td { font-weight: 600; border-top: 2px solid var(--color-border); }
tr.overdue td:first-child { color: var(--color-danger); font-weight: 600; }
tr.muted-row td { color: var(--color-faint); }
.inst-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  margin: var(--space-4) 0 var(--space-2);
}

/* ── Topnav v2 (sections-driven, responsive) ────────── */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  color: var(--color-muted);
  padding: 6px 8px;
  cursor: pointer;
  line-height: 0;
}
.topnav { display: flex; gap: var(--space-4); flex: 1; flex-wrap: wrap; }
.topnav a {
  color: var(--color-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-btn);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.topnav a:hover { color: var(--color-text); background: var(--color-hover-bg); }
.topnav a.active { color: var(--color-accent); font-weight: 500; }

/* Unread count pill on a nav item (Novinky). */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  margin-left: 1px;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  white-space: nowrap;
}
.admin-badge:hover, .admin-badge.active { background: var(--color-accent-dim); color: var(--color-accent); }

/* user dropdown */
.user-drop-wrap { position: relative; }
.user-drop-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-btn);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 13px;
}
.user-drop-btn:hover { background: var(--color-hover-bg); color: var(--color-text); }
.nav-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-drop-caret { font-size: 10px; }
.user-drop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  padding: var(--space-2) 0;
  z-index: 50;
}
.user-drop.open { display: block; }
.user-drop-header { padding: var(--space-2) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2); }
.user-drop-header .name { font-weight: 600; font-size: 13.5px; }
.user-drop-header .mail { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-faint); }
.user-drop-form { margin: 0; }
.user-drop-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 13.5px;
  cursor: pointer;
}
.user-drop-item:hover { background: var(--color-hover-bg); color: var(--color-text); }
.user-drop-item.danger { color: var(--color-danger); }

/* admin sub-bar */
.admin-subbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}
.admin-subbar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint);
  margin-right: var(--space-3);
  white-space: nowrap;
}
.admin-tab {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 13px;
  color: var(--color-muted);
  white-space: nowrap;
}
.admin-tab:hover { background: var(--color-hover-bg); color: var(--color-text); }
.admin-tab.active { background: var(--color-accent-tint); color: var(--color-accent); font-weight: 500; }

/* ── Homepage section cards ─────────────────────────── */
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.section-grid .card { display: flex; flex-direction: column; }
.section-grid .card .muted { flex: 1; }
.section-grid .card .card-actions { margin-top: var(--space-4); }

/* ── Profile ────────────────────────────────────────── */
.prof-wrap { max-width: 560px; margin: 0 auto; }
.prof-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
  margin-bottom: var(--space-3);
}
.prof-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  overflow: hidden;
  position: relative;
}
.prof-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.prof-avatar-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  border-radius: 50%;
}
.prof-avatar:hover .prof-avatar-overlay { opacity: 1; }
.link-subtle {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--color-faint); text-decoration: underline;
}

.theme-tiles { display: flex; gap: var(--space-2); }
.theme-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 12px;
}
.theme-tile .tile-icon { font-size: 18px; line-height: 1; }
.theme-tile.active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-tint);
}

/* sections manager (profile) */
.sekce-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-2);
  background: var(--color-card);
  cursor: grab;
}
.sekce-item.dragging { opacity: 0.5; }
.sekce-item .sekce-name { font-size: 13.5px; font-weight: 500; }
.sekce-item .sekce-path {
  font-family: var(--font-mono); font-size: 10px; color: var(--color-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sekce-remove-btn {
  background: none; border: none; cursor: pointer;
  color: var(--color-faint); padding: 4px; border-radius: var(--radius-icon);
  line-height: 0;
}
.sekce-remove-btn:hover { color: var(--color-danger); background: var(--color-danger-bg); }

/* permissions checkboxes (admin) */
.perm-list { display: flex; flex-direction: column; gap: var(--space-1); }
.perm-list label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 12.5px; color: var(--color-muted); cursor: pointer;
}
.perm-list input { accent-color: var(--color-accent); }

/* ── Responsive / mobile ────────────────────────────── */
.table-scroll { overflow-x: auto; }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .topnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-pop);
    padding: var(--space-2);
    z-index: 60;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .topnav.open { display: flex; }
  .topnav a { width: 100%; padding: var(--space-3); border-radius: var(--radius-btn); }
  .topbar { position: relative; flex-wrap: nowrap; gap: var(--space-3); }
  .user-drop-name, .user-drop-caret { display: none; }
  .admin-badge span { display: none; }
  .admin-badge { padding: 6px; }
  .kpi-value { font-size: 18px; }
  .card { padding: var(--space-4); }
  .card table { display: block; overflow-x: auto; }
  .doc-actions { width: 100%; }
}

/* ── Nav icons & group dropdowns ────────────────────── */
.topnav a, .nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topnav a svg, .nav-group-btn svg { flex-shrink: 0; opacity: 0.75; }
.topnav a.active svg, .nav-group-btn.active svg { opacity: 1; }
.nav-group { position: relative; }
.nav-group-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 15px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-btn);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-group-btn:hover { color: var(--color-text); background: var(--color-hover-bg); }
.nav-group-btn.active { color: var(--color-accent); font-weight: 500; }
.nav-caret { font-size: 9px; opacity: 0.6; }
.nav-sub {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 210px;
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  padding: var(--space-2) 0;
  z-index: 45;
}
.nav-group.open .nav-sub { display: block; }
.nav-sub a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2) var(--space-4);
  border-radius: 0;
}
.section-grid .card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-grid .card h2 svg { color: var(--color-accent); flex-shrink: 0; }

@media (max-width: 720px) {
  .nav-group { position: static; }
  .nav-group-btn { width: 100%; padding: var(--space-3); }
  .nav-sub,
  .nav-group.open .nav-sub {
    display: block;
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 var(--space-6);
    min-width: 0;
  }
  .nav-caret { display: none; }
}

/* ============================================================================
 * Přehled majetku — Direction A (Účetní kokpit) — dashboard components
 * All .dash-* classes for login/prehled.php. Tokens only (--color-*); the 5
 * donut/chart segment hexes and pillar-A #5E7360 are inline literals in PHP.
 * ========================================================================== */

/* The dashboard is wider than a document page — let it breathe past 960px. */
.page:has(.dash) { max-width: 1180px; }

/* — Root wrapper (transparent stack; header + boxes share the same width) — */
.dash {
  color: var(--color-text);
  font-family: var(--font-sans);
}

/* — Header bar: a card, same width as the boxes below — */
.dash-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(21, 19, 15, 0.05);
}
.dash-head-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.dash-head-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--color-faint);
  margin-top: 2px;
}
.dash-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--color-border-input);
  border-radius: 6px;
  background: var(--color-card);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dash-btn:hover {
  background: var(--color-hover-bg);
  color: var(--color-text);
}
.dash-btn.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.dash-btn svg { flex-shrink: 0; }
/* Fond / Celý majetek scope toggle — segmented pair of dash-btn links */
.dash-scope { display: inline-flex; gap: 6px; }
.dash-scope .dash-btn { text-decoration: none; }

/* Date snapshot selector (Přehled header + Majetek toolbar share the visual). */
.dash-datum, .mj-datum { display: inline-flex; align-items: center; gap: 7px; }
.dash-datum-label, .mj-datum-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.dash-datum select, .mj-datum select {
  padding: 6px 9px;
  font-size: 12.5px;
  border-radius: 6px;
  cursor: pointer;
}
/* Historic (non-latest) snapshot: accent the control so it's obvious the page
   is not showing current values. */
.dash-datum.is-historic select, .mj-datum.is-historic select {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-tint);
}

/* — Body wrapper: vertical gap only, so content boxes match the header width — */
.dash-body { padding: 16px 0 0; }

/* — Hero KPI row — */
.dash-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dash-kpi {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(21, 19, 15, 0.05);
  padding: 18px 20px;
}
.dash-kpi-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.dash-kpi-value {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 8px;
  white-space: nowrap;
}
.dash-kpi-value .unit {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-muted);
}
.dash-kpi-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 6px;
  color: var(--color-muted);
}
.dash-kpi-delta.is-ok { color: var(--color-ok); }
.dash-kpi-delta.is-muted { color: var(--color-muted); }

/* — Secondary metric strip — */
.dash-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 16px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(21, 19, 15, 0.05);
  overflow: hidden;
}
.dash-strip-cell {
  padding: 14px 18px;
  border-right: 1px solid var(--color-border);
}
.dash-strip-cell:last-child { border-right: none; }
.dash-strip-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.dash-strip-value {
  font-size: 17px;
  font-weight: 600;
  margin-top: 4px;
  color: var(--color-text);
}
.dash-strip-value.is-danger { color: var(--color-danger); }

/* — Main grid: left column + right rail — */
.dash-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
.dash-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* — Card base — */
.dash-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(21, 19, 15, 0.05);
  padding: 18px 20px;
}
.dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.dash-card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dash-card-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-faint);
}

/* — Allocation: donut + drill list — */
.dash-alloc {
  display: flex;
  gap: 24px;
  align-items: center;
}
.dash-donut {
  position: relative;
  flex-shrink: 0;
}
.dash-donut svg {
  width: 148px;
  height: 148px;
  flex-shrink: 0;
}
.dash-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dash-donut-val {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.dash-donut-unit {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--color-faint);
}

/* — Drill list (shared by allocation + institutions) — */
.dash-drill-list {
  flex: 1;
  min-width: 0;
}
.dash-drill {
  border-bottom: 1px solid var(--color-border);
}
.dash-drill:last-child { border-bottom: none; }
.dash-drill-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.dash-drill-row:hover { background: var(--color-hover-bg); }
.dash-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dash-drill-name {
  flex: 1;
  font-size: 13.5px;
}
.dash-drill-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dash-drill-pct {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-muted);
  width: 48px;
  text-align: right;
}
.dash-caret {
  display: inline-block;
  color: var(--color-faint);
  font-size: 10px;
  width: 12px;
  text-align: center;
  transition: transform var(--t-fast) var(--ease);
}

/* Drill sub-items: hidden by default, shown per-row (.open) or globally (.details-on) */
.dash-sub {
  display: none;
  padding: 2px 4px 10px 23px;
  animation: dashFadeIn 0.18s var(--ease);
}
.dash-drill.open .dash-sub,
.dash.details-on .dash-sub { display: block; }
.dash-drill.open .dash-caret,
.dash.details-on .dash-caret { transform: rotate(90deg); }
.dash-sub-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
}
.dash-sub-name {
  flex: 1;
  font-size: 12.5px;
  color: var(--color-muted);
}
.dash-sub-name .dash-sub-detail {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-faint);
  margin-left: 8px;
}
.dash-sub-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

@keyframes dashFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Institutions variant — tighter sizing */
.dash-drill-list.is-inst .dash-drill-row {
  gap: 8px;
  padding: 7px 4px;
}
.dash-drill-list.is-inst .dash-drill-name { font-size: 13px; }
.dash-drill-list.is-inst .dash-drill-val { font-size: 11.5px; }
.dash-drill-list.is-inst .dash-drill-pct { width: 36px; }
.dash-drill-list.is-inst .dash-sub { padding: 2px 4px 9px 14px; }
.dash-drill-list.is-inst .dash-sub-row { padding: 3px 0; }
.dash-drill-list.is-inst .dash-sub-name { font-size: 12px; }
.dash-drill-list.is-inst .dash-sub-val { font-size: 11px; }

/* — Net-worth chart — */
.dash-chart-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.dash-chart {
  display: block;
  width: 100%;
  height: 138px;
}
.dash-chart-x {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-faint);
  margin-top: 4px;
}

/* — SAA (Pilíř B alokace) — */
.dash-saa-legend {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-faint);
  margin-bottom: 14px;
}
.dash-saa-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dash-saa-leg-band {
  width: 14px;
  height: 6px;
  background: var(--color-accent-tint);
  display: inline-block;
}
.dash-saa-leg-target {
  width: 2px;
  height: 11px;
  background: var(--color-text);
  display: inline-block;
}
.dash-saa-leg-actual {
  width: 14px;
  height: 6px;
  background: var(--color-accent);
  display: inline-block;
}
.dash-saa-row { margin-bottom: 12px; }
.dash-saa-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.dash-saa-name { font-size: 12.5px; }
.dash-saa-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
}
.dash-bar {
  position: relative;
  height: 12px;
  background: var(--color-bg-alt);
  border-radius: 3px;
  overflow: hidden;
}
.dash-bar-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--color-accent-tint);
}
.dash-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  opacity: 0.85;
  border-radius: 3px;
}
.dash-bar-tick {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--color-text);
}

/* — Pillars — */
.dash-pillar { margin-bottom: 14px; }
.dash-pillar:last-child { margin-bottom: 0; }
.dash-pillar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.dash-pillar-name { font-size: 13px; }
.dash-pillar-val {
  font-family: var(--font-mono);
  font-size: 12px;
}
.dash-pillar-bar {
  position: relative;
  height: 10px;
  background: var(--color-bg-alt);
  border-radius: 3px;
  overflow: hidden;
}
.dash-pillar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
}
.dash-pillar-floor {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--color-danger);
}
.dash-pillar-cap {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--color-faint);
  margin-top: 5px;
}

/* — IPS checks — */
.dash-ips-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
}
.dash-ips-row:last-child { border-bottom: none; }
.dash-ips-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.dash-ips-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-muted);
}

/* — Report link — */
.dash-report {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.dash-report:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-tint);
}
.dash-report-body { flex: 1; }
.dash-report-title {
  font-size: 13.5px;
  font-weight: 500;
  display: block;
}
.dash-report-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-faint);
}
.dash-report-arrow { color: var(--color-accent); }
.dash-report-empty {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-faint);
  padding: 11px 12px;
}

/* — Zprávy (advisor note) — */
.dash-zpravy {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.dash-zpravy-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
  margin-bottom: 6px;
}
.dash-zpravy-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
}
.dash-zpravy-author { color: var(--color-text); }

/* — Footer — */
.dash-foot {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--color-faint);
  text-align: center;
}

/* — Responsive — */
@media (max-width: 720px) {
  .dash-head { flex-wrap: wrap; }
  .dash-body { padding: 14px 0 0; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-hero { grid-template-columns: 1fr 1fr; }
  .dash-strip { grid-template-columns: repeat(2, 1fr); }
  /* In a 2-col strip every cell gets a bottom hairline; clear it on the bottom row. */
  .dash-strip-cell { border-bottom: 1px solid var(--color-border); }
  .dash-strip-cell:nth-child(2n) { border-right: none; }
  .dash-strip-cell:nth-last-child(-n + 2) { border-bottom: none; }
}

@media (max-width: 480px) {
  .dash-hero { grid-template-columns: 1fr; }
  .dash-card { border-radius: 12px; }
  .dash-btn { padding: 7px 9px; }
  .dash-btn-label { display: none; }
  .dash-donut svg { width: 128px; height: 128px; }
  .dash-alloc { gap: 16px; }
  /* Single-column strip: only right borders to clear, bottom hairlines remain. */
  .dash-strip { grid-template-columns: 1fr; }
  .dash-strip-cell { border-right: none; }
  .dash-strip-cell:last-child { border-bottom: none; }
}

/* ==========================================================================
 * Přehled majetku — interactivity (tooltips, hover, chart crosshair, motion)
 * ========================================================================== */

/* Shared tooltip (positioned by portal.js; fixed to the viewport) */
.dash-tip {
  position: fixed;
  z-index: 200;
  max-width: 260px;
  padding: 8px 11px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-pop);
  pointer-events: none;
  font-family: var(--font-sans);
}
.dash-tip[hidden] { display: none; }
.dash-tip-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.dash-tip-body {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-muted);
}

/* affordance: things with an explanatory tooltip */
.dash-kpi[data-tip], .dash-strip-cell[data-tip],
.dash-bar[data-tip], .dash-pillar-bar[data-tip] { cursor: help; }

/* count-up numbers shouldn't reflow while animating */
.dash-num { font-variant-numeric: tabular-nums; }

/* Donut: hoverable segments + cross-highlight with the list */
.dash-donut-center { pointer-events: none; }
.dash-seg {
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke-width var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.dash-seg.is-hi  { stroke-width: 5.6; }
.dash-seg.is-dim { opacity: 0.32; }
.dash-drill-row.is-hi { background: var(--color-hover-bg); }

/* Net-worth chart crosshair */
.dash-chart-hit { fill: transparent; pointer-events: all; cursor: crosshair; }
.dash-chart-cursor {
  stroke: var(--color-faint);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.dash-chart-cursor-dot {
  fill: var(--color-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.dash-chart.is-cursor .dash-chart-cursor     { opacity: 0.7; }
.dash-chart.is-cursor .dash-chart-cursor-dot { opacity: 1; }

/* click-to-drill flash on the linked allocation row */
.dash-drill.flash { animation: dashFlash 0.6s var(--ease); }
@keyframes dashFlash {
  0%   { background: var(--color-accent-tint); }
  100% { background: transparent; }
}

/* Entrance motion — bars sweep in, donut eases in. Off for reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .dash-bar-fill, .dash-pillar-fill {
    transform-origin: left center;
    animation: dashGrowX 0.6s var(--ease) both;
  }
  @keyframes dashGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  .dash-donut svg {
    transform-origin: center;
    animation: dashDonutIn 0.6s var(--ease) both;
  }
  @keyframes dashDonutIn {
    from { opacity: 0; transform: rotate(-10deg) scale(0.95); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Documents module ───────────────────────────────── */
/* Chips, pills, status dots, filter/search toolbar, sortable tables, news feed,
   mobile cards, document detail + admin form. All classes are self-contained
   (they do not rely on the base .badge). Bound behaviour lives in portal.js. */

/* eyebrow + breadcrumb */
.eb { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-faint); }
.crumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--color-faint); }
.crumb a { color: var(--color-faint); }
.crumb a:hover { color: var(--color-accent); }

/* record-count / sort hint */
.doc-count { font-family: var(--font-mono); font-size: 11px; color: var(--color-faint); }

/* filter pills */
.pill-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.pill {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 99px;
  font-size: 13px;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pill:hover { background: var(--color-hover-bg); color: var(--color-text); }
.pill.active { background: var(--color-accent-tint); color: var(--color-accent); border-color: var(--color-accent-line); font-weight: 500; }
.pill-sm { padding: 4px 11px; }

/* search box */
.search {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-btn);
}
.search svg { color: var(--color-faint); flex-shrink: 0; }
.search input {
  border: none; outline: none; background: transparent; padding: 0;
  font-family: var(--font-sans); font-size: 13px; color: var(--color-text); width: 100%;
}
.search input::placeholder { color: var(--color-faint); }

/* table extras: right-align + sortable headers */
td.num, th.num { text-align: right; }
.mono { font-family: var(--font-mono); }
th[data-sortable] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sortable]:hover { color: var(--color-muted); }
th.sort-active { color: var(--color-accent); }
th[data-sortable] .caret { opacity: 0; }
th.sort-active .caret { opacity: 1; }

/* type + file chips (self-contained) */
.b-report, .b-msg, .b-doc, .b-other, .b-pdf, .b-html, .b-md, .b-xls, .b-word {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-chip);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; white-space: nowrap;
}
.b-report { background: var(--color-accent-tint); color: var(--color-accent); }
.b-msg    { background: var(--color-chip-doc-bg); color: var(--color-chip-doc-fg); }
.b-doc    { background: var(--color-chip-xls-bg); color: var(--color-chip-xls-fg); }
.b-other  { background: var(--color-hover-bg);    color: var(--color-muted); }
.b-pdf    { background: var(--color-chip-pdf-bg); color: var(--color-chip-pdf-fg); }
.b-html   { background: var(--color-chip-doc-bg); color: var(--color-chip-doc-fg); }
.b-md     { background: var(--color-chip-zip-bg); color: var(--color-chip-zip-fg); }
.b-xls    { background: var(--color-chip-xls-bg); color: var(--color-chip-xls-fg); }
.b-word   { background: var(--color-chip-doc-bg); color: var(--color-chip-doc-fg); }

/* tags */
.tag-row { display: flex; gap: 5px; flex-wrap: wrap; }
.tag {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 6px;
  border-radius: 4px; background: var(--color-bg-alt); color: var(--color-muted);
  border: 1px solid var(--color-border);
}

/* status dot + label */
.stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
.stat .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.st-ok   { color: var(--color-ok); }   .st-ok .dot   { background: var(--color-ok-dot); }
.st-warn { color: var(--color-warn); } .st-warn .dot { background: var(--color-warn-dot); }
.st-old  { color: var(--color-faint); } .st-old .dot { background: var(--color-faint); }

/* icon buttons */
.ib {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-icon); border: none; background: transparent; color: var(--color-faint); cursor: pointer;
}
.ib:hover { background: var(--color-hover-bg); color: var(--color-text); }
.ib.dg { color: var(--color-danger); }
.ib.dg:hover { background: var(--color-danger-bg); }

/* list table cells */
.doc-cell { display: flex; flex-direction: column; gap: 3px; }
.doc-cell-title { font-weight: 400; font-size: 14px; }
.doc-cell-desc  { font-size: 12.5px; color: var(--color-muted); }
.doc-cell.old .doc-cell-title { color: var(--color-faint); }
.cell-muted { font-size: 13px; color: var(--color-muted); }
.cell-mono  { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.cell-faint { color: var(--color-faint); }
.row-act { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.row-open { font-size: 12.5px; font-weight: 500; }
tr.selected { background: var(--color-accent-tint); }
tr[data-row-href] { cursor: pointer; }
tr[data-row-href]:hover { background: var(--color-hover-bg); }
input[type="checkbox"].doc-cbx { accent-color: var(--color-accent); width: 15px; height: 15px; cursor: pointer; }

/* bulk-action bar (admin) */
.bulk-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px 14px; background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-line); border-radius: var(--radius-card);
  animation: docFadeIn 0.18s var(--ease);
}
.bulk-bar[hidden] { display: none; }
.bulk-count { font-family: var(--font-mono); font-size: 11px; color: var(--color-accent); font-weight: 500; }
.bulk-sep { width: 1px; height: 16px; background: var(--color-accent-line); }
.bulk-cancel { margin-left: auto; font-size: 12px; color: var(--color-accent); cursor: pointer; background: none; border: none; }
@keyframes docFadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* news feed */
.news { display: flex; flex-direction: column; }
.news-item { padding: 16px 20px; border-bottom: 1px solid var(--color-border); display: block; }
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--color-hover-bg); }
.news-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.news-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-faint); }
.news-title { font-size: 15px; font-weight: 400; margin-bottom: 4px; color: var(--color-text); }
.news-body { font-size: 13px; color: var(--color-muted); line-height: 1.55; }
.news-author { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-faint); margin-top: 8px; letter-spacing: 0.04em; }
/* Unread news: accent rail + solid title, cleared once opened. */
.news-item.unread { border-left: 2px solid var(--color-accent); padding-left: 18px; }
.news-item.unread .news-title { color: var(--color-text); font-weight: 600; }

/* "Nový" chip — flags an unread (finální, not-yet-opened) document. Shared by
   the Novinky feed, the homepage feed and the Dokumenty list. */
.new-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
/* Unread emphasis in the Dokumenty views (table row + mobile card). */
.doc-cell.new .doc-cell-title { font-weight: 600; }
.mcard.new .mcard-title { font-weight: 600; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.card-head-title { display: flex; align-items: center; gap: 9px; }
.card-head-title svg { color: var(--color-accent); }
.card-head h2 { font-size: 15px; font-weight: 600; margin: 0; }

/* mobile cards (list view on phones) */
.doc-cards { display: none; }
.mcard {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: 14px 15px; background: var(--color-card);
  border-radius: 10px; box-shadow: var(--shadow-card);
}
.mcard-top { display: flex; align-items: center; gap: var(--space-2); }
.mcard-title { font-size: 15px; font-weight: 400; }
.mcard-desc { font-size: 12.5px; color: var(--color-muted); line-height: 1.5; }
.mcard-meta { display: flex; align-items: center; gap: var(--space-2); }

/* document detail */
.doc-detail-head { padding: 22px 24px; border-bottom: 1px solid var(--color-border); }
.doc-detail-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0; line-height: 1.25; }
.doc-detail-desc { font-size: 14px; color: var(--color-muted); line-height: 1.6; margin: 12px 0 0; }
.doc-meta-grid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 13px; padding: 7px 20px; border-bottom: 1px solid var(--color-border); }
.doc-meta-cell { padding: 0; border: none; display: flex; align-items: baseline; gap: 5px; font-size: 11px; line-height: 1.35; }
.doc-meta-cell + .doc-meta-cell { padding-left: 13px; border-left: 1px solid var(--color-border); }
.doc-meta-cell .flb { margin: 0; font-size: 9px; letter-spacing: 0.04em; }
.flb { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-faint); margin: 0 0 6px; }
.doc-actionbar { display: flex; align-items: center; gap: var(--space-3); padding: 18px 24px; background: var(--color-bg-alt); flex-wrap: wrap; }
.btn svg { vertical-align: -2px; margin-right: 6px; }

/* ── Log (audit) viewer ─────────────────────────────── */
/* Auto-fit grid instead of .form-row: the eight filters wrapped into ragged
   rows on a flex layout, leaving "Od" stranded beside the search box. */
.log-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: var(--space-3);
  align-items: end;
}
.log-filters .form-field { min-width: 0; }
.log-filters input, .log-filters select { width: 100%; }
.log-search { grid-column: span 2; }
.log-check {
  flex-direction: row; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--color-muted); padding-bottom: 9px;
}
.log-check input { width: auto; accent-color: var(--color-accent); }
.log-filter-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.log-time { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-muted); white-space: nowrap; }
.log-user { font-family: var(--font-mono); font-size: 11px; }
.log-popis { font-size: 12.5px; }
.log-ref { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-faint); }
.log-ip { font-family: var(--font-mono); font-size: 11px; color: var(--color-faint); white-space: nowrap; }
.log-pager { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }

/* admin document form */
.doc-form { display: flex; flex-direction: column; gap: 17px; padding: 22px 24px; }
.doc-form .form-2col { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.doc-form .form-2col > div { flex: 1; min-width: 200px; }
.doc-form input[type="text"], .doc-form input[type="date"], .doc-form select, .doc-form textarea {
  width: 100%; padding: 9px 12px; background: var(--color-input-bg); color: var(--color-text);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-btn);
  font-family: var(--font-sans); font-size: 14px;
}
.doc-form textarea { min-height: 62px; resize: vertical; line-height: 1.5; }
.dropzone {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px 14px; border: 1px dashed var(--color-border-input); border-radius: 8px;
}
.dropzone-info { flex: 1; min-width: 0; }
.dropzone-name { font-size: 13px; font-weight: 500; }
.dropzone-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-faint); }
.access-list { border: 1px solid var(--color-border); border-radius: 7px; overflow: hidden; }
.access-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.access-row + .access-row { border-top: 1px solid var(--color-border); }
.access-role { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--color-faint); }
.access-name { font-size: 13px; }
.form-foot { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.form-foot .spacer { margin-left: auto; display: flex; gap: var(--space-3); }
.nav-avatar-sm { width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent-dim); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 600; flex-shrink: 0; }

/* responsive: swap wide table for mobile cards ≤720px */
@media (max-width: 720px) {
  .doc-table-wrap { display: none; }
  .doc-cards { display: flex; flex-direction: column; gap: 10px; }
  .doc-meta-grid { flex-direction: column; gap: 5px; }
  .doc-meta-cell + .doc-meta-cell { padding-left: 0; border-left: none; }
  .doc-actionbar { flex-direction: column; align-items: stretch; }
  .doc-actionbar .btn { justify-content: center; text-align: center; }
}

/* ==========================================================================
 * Majetek — full asset register (login/majetek.php).
 * Search / sort / scope / owner / zero-toggle filter widget lives in
 * portal.js ([data-majetek-root]); column sort reuses table[data-doc-table].
 * Reuses .dash-strip (KPI), .badge* (chips), table + .num/.mono. Bound by
 * data-attributes only (CSP: script-src 'self').
 * ========================================================================== */
.page:has(.majetek) { max-width: 1180px; }
.majetek { color: var(--color-text); font-family: var(--font-sans); }

/* — Title row — */
.mj-title { margin-bottom: 20px; }
.mj-title h1 { margin-bottom: 5px; }
.mj-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-faint);
}

/* — KPI summary strip (reuses .dash-strip frame, adds swatch + count) — */
.mj-kpi { margin-top: 0; }
.mj-kpi-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.mj-kpi-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.mj-kpi-value { font-size: 17px; font-weight: 600; margin-top: 4px; color: var(--color-text); }
.mj-kpi-value.is-accent { font-size: 19px; color: var(--color-accent); }
.mj-kpi-count { font-family: var(--font-mono); font-size: 10px; color: var(--color-muted); margin-top: 2px; }

/* — Toolbar (sticky) — */
.mj-toolbar {
  position: sticky;
  top: 54px;
  z-index: 40;
  background: var(--color-bg);
  padding: 14px 0 12px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}
.mj-search { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.mj-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-faint);
  pointer-events: none;
}
.mj-search input { width: 100%; padding: 8px 12px 8px 33px; font-size: 13.5px; }

.mj-zero {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 12.5px;
  cursor: pointer;
  border: 1px solid var(--color-border-input);
  background: transparent;
  color: var(--color-muted);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mj-zero:hover { border-color: var(--color-accent-line); }
.mj-zero.is-on { border-color: var(--color-accent); background: var(--color-accent-tint); color: var(--color-accent); }

.mj-scope {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 7px;
}
.mj-scope button {
  padding: 6px 12px;
  border: none;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  cursor: pointer;
  background: transparent;
  color: var(--color-muted);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mj-scope button.is-active { background: var(--color-accent); color: #fff; }

.mj-tools-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mj-result { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
.mj-reset[hidden], .mj-reset-cols[hidden] { display: none; }

/* — Sections — */
.mj-section { margin-top: 26px; }
.mj-section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.mj-section-head h2 { margin: 0; }
.mj-section-meta { font-family: var(--font-mono); font-size: 11px; color: var(--color-faint); }

.mj-table-wrap {
  background: var(--color-card);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.mj-table-wrap table { font-size: 14px; }
.mj-table-wrap thead { background: var(--color-bg-alt); }
.mj-table-wrap th { padding: 9px 12px; border-bottom: none; white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; }
.mj-table-wrap td { padding: 11px 12px; border-bottom: none; border-top: 1px solid var(--color-border); }
.mj-table-wrap tbody tr:hover { background: var(--color-hover-bg); }
.mj-table-wrap .caret { color: var(--color-accent); margin-left: 4px; }
.mj-c-name { font-weight: 500; }
.mj-c-mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-muted); }
.mj-c-isin { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-muted); }
.mj-c-muted { color: var(--color-muted); }
.mj-c-sub { font-size: 12px; color: var(--color-muted); }

/* — Mobile card list (revealed ≤720px) — */
.mj-cards { display: none; margin-top: 12px; }
.mj-card {
  background: var(--color-card);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 13px 15px;
  margin-bottom: 8px;
}
.mj-card-top { display: flex; justify-content: space-between; gap: 12px; }
.mj-card-head { min-width: 0; }
.mj-card-title { font-weight: 500; }
.mj-card-ids { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-faint); margin-top: 2px; }
.mj-card-val { text-align: right; flex-shrink: 0; }
.mj-card-czk { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.mj-card-val .badge { margin-top: 4px; }
.mj-card-meta {
  display: flex;
  gap: 14px;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-muted);
  flex-wrap: wrap;
  align-items: center;
}

/* — Empty states — */
.mj-empty {
  background: var(--color-card);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 22px;
  text-align: center;
  font-size: 13.5px;
  color: var(--color-muted);
}
.mj-empty[hidden], .mj-section[hidden], .mj-allempty[hidden] { display: none; }
.mj-allempty { margin-top: 40px; text-align: center; color: var(--color-muted); }
.mj-allempty-title { font-size: 15px; font-weight: 500; }
.mj-allempty-sub { font-size: 13px; margin-top: 6px; }

/* hidden filtered rows/cards */
.mj-table-wrap tr[hidden], .mj-card[hidden] { display: none; }

/* — User-resizable columns (drag the divider at a header's right edge) — */
.mj-col-grip {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}
.mj-col-grip::after {
  content: "";
  position: absolute;
  top: 22%;
  right: 3px;
  height: 56%;
  width: 2px;
  border-radius: 2px;
  background: var(--color-border-input);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mj-table-wrap th:hover .mj-col-grip::after,
.mj-col-grip:hover::after { opacity: 1; }
.mj-col-grip:hover::after { background: var(--color-accent); }
body.mj-col-resizing { cursor: col-resize; user-select: none; }
body.mj-col-resizing .mj-col-grip::after { opacity: 1; background: var(--color-accent); }

/* — Row / card expand-to-detail — */
.mj-table-wrap tbody tr.mj-row { cursor: pointer; }
.mj-table-wrap tbody tr.mj-open { background: var(--color-hover-bg); }
.mj-card { cursor: pointer; }
.mj-row-caret {
  display: inline-block;
  margin-right: 7px;
  color: var(--color-faint);
  font-size: 12px;
  transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
tr.mj-open .mj-row-caret, .mj-card.mj-open .mj-row-caret { transform: rotate(90deg); color: var(--color-accent); }

.mj-detail > td { padding: 0; border-top: 1px solid var(--color-border); background: var(--color-bg-alt); }
.mj-detail[hidden], .mj-card-detail[hidden] { display: none; }
.mj-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 11px 22px;
  padding: 14px 16px;
}
.mj-detail-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mj-detail-k {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.mj-detail-v { font-size: 13px; color: var(--color-text); word-break: break-word; }
.mj-detail-v.mono { font-family: var(--font-mono); font-size: 12.5px; }

.mj-card-detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.mj-card-detail .mj-detail-grid { grid-template-columns: 1fr 1fr; padding: 0; gap: 10px 16px; }

@media (max-width: 720px) {
  .mj-toolbar { top: 0; }
  .mj-table-wrap { display: none; }
  .mj-cards { display: block; }
}