:root {
  color-scheme: light;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  line-height: 1.4;
  color: #111827;
  background: #f3f5f9;
  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --accent: #6366f1;
  --muted: #6b7280;
  --border: #e5e7eb;
  --si-blue: #2b61cc;
  --si-blue-dark: #183b8f;
  --si-blue-bg: #f4f8ff;
  --si-blue-border: #dbe7ff;
  --si-blue-glow: rgba(43, 97, 204, 0.18);
  --si-green: #148767;
  --si-green-dark: #0f5d49;
  --si-green-bg: #f2fbf7;
  --si-green-border: #d7f0e4;
  --si-green-glow: rgba(20, 135, 103, 0.18);
  --si-amber: #b7791f;
  --si-amber-dark: #8a5b16;
  --si-amber-bg: #fdf8ef;
  --si-amber-border: #f3e6c9;
  --si-amber-glow: rgba(183, 121, 31, 0.18);
  --si-danger: #b91c1c;
  --si-danger-soft: #fee2e2;
  --si-text: #111827;
  --si-text-soft: #6b7280;
  --todo-status-open-bg: #f4f8ff;
  --si-line-base: #cbd5e1;
  --si-surface: #ffffff;
  --si-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    0 3px 10px rgba(15, 23, 42, 0.04);
}

* { box-sizing: border-box; }
body { margin: 0; background: #f3f5f9; }

.container {
  max-width: 1480px;
  margin: 1.25rem auto;
  padding: 0 1rem 6.5rem;
  display: grid;
  gap: 1rem;
}

.card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  padding: 1rem;
}

.auth-shell {
  width: min(760px, 96vw);
  margin: 2.2rem auto;
  padding: 2rem;
  text-align: center;
}

.auth-subtitle {
  margin-top: .5rem;
  font-size: 1.2rem;
}

.auth-form {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

.auth-check {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: .55rem;
}

.auth-link, .link-btn {
  color: #4f46e5;
  text-decoration: none;
  font-weight: 600;
}

.link-btn {
  background: transparent;
  border: 0;
  padding: 0;
  min-height: auto;
  cursor: pointer;
}

.auth-submit {
  width: 100%;
  min-height: 54px;
}

.auth-switch {
  color: #64748b;
  font-size: 1.05rem;
  text-align: center;
}

h1, h2, h3, p { margin: 0; }

.grid {
  margin-top: 1rem;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.stack { display: grid; gap: .6rem; }
.mt { margin-top: .8rem; }

label {
  display: grid;
  gap: .4rem;
  font-size: .92rem;
}

input, button, select, textarea { font: inherit; }

input:not([type="checkbox"]), select, textarea {
  width: 100%;
  min-height: 46px;
  padding: .64rem .72rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: #111827;
}

select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px !important;
}

textarea { resize: vertical; }

.search-select {
  position: relative;
}

.search-select input {
  padding-right: 2.7rem;
}

.search-select-toggle {
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  color: #475569;
}

.search-select-toggle:hover {
  background: #eef2ff;
}

.search-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .35rem);
  background: #fff;
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
  padding: .35rem;
  z-index: 2200;
  max-height: 240px;
  overflow: auto;
}

.search-select-item {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  background: transparent !important;
  color: #0f172a !important;
  border-radius: 10px;
  min-height: 38px;
  padding: .45rem .55rem;
}

.search-select-item:hover {
  background: #eef2ff !important;
}

.search-select-empty {
  color: #64748b;
  padding: .45rem .55rem;
  font-size: .92rem;
}

/* === Role badges (admin panel + shared project markers) === */
.role-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .08rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: .02em;
  background: #eef2f8;
  color: #475569;
  vertical-align: middle;
}
.role-badge-self { background: var(--si-blue-bg); color: var(--si-blue-dark); }
.role-badge-admin { background: var(--si-amber-bg); color: var(--si-amber-dark); border: 1px solid var(--si-amber-border); }
.role-badge-edit { background: var(--si-green-bg); color: var(--si-green-dark); }
.role-badge-view { background: #f3f4f6; color: #475569; }

/* === Project share badge in CRM project rows === */
.project-share-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  color: var(--si-text-soft);
}
.project-share-badge i { font-size: .85em; }

/* === Project share modal list === */
.project-share-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.project-share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.project-share-row-main { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.project-share-row-actions { display: flex; align-items: center; gap: .35rem; }
.project-share-permission-select {
  min-height: 32px;
  padding: 0 .55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: .88rem;
  background: #fff;
  color: #0f172a;
}
.project-share-remove {
  min-height: 32px;
  padding: 0 .55rem;
  font-size: .9rem;
}

/* === Admin panel table === */
.admin-role-select,
.admin-plan-input {
  min-height: 32px;
  padding: 0 .55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: .9rem;
  background: #fff;
  color: #0f172a;
}
.admin-plan-input { width: 9rem; }
.admin-user-delete {
  min-height: 32px;
  padding: 0 .55rem;
}

/* === Clear button (input reset icon) === */
.input-clear-wrap {
  position: relative;
  display: inline-block;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.input-clear-wrap > input,
.input-clear-wrap > .flatpickr-input {
  width: 100%;
  padding-right: 2.6rem;
}

.input-clear-btn {
  position: absolute;
  top: 50%;
  right: .55rem;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent !important;
  color: #64748b !important;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.input-clear-btn:hover {
  background: rgba(15, 23, 42, .06) !important;
  color: #0f172a !important;
}

.input-clear-btn:focus-visible {
  outline: 2px solid var(--si-blue);
  outline-offset: -2px;
}

.input-clear-btn.is-visible {
  display: inline-flex;
}

.input-clear-btn i {
  pointer-events: none;
}

/* In .search-select the toggle button sits at right: .45rem (width 34px).
   Place the clear button just to its left and pad the input further. */
.search-select > .input-clear-btn {
  right: calc(.45rem + 34px + .25rem);
}

/* In a multi-select dropdown wrap the .select-like button has the caret on
   the right and a label sits above the button. Anchor the clear button to
   the BOTTOM of the wrap so it lines up with the 46px-tall button rather
   than floating between label and button. */
.summary-client-dropdown-wrap > .input-clear-btn {
  top: auto;
  transform: none;
  bottom: 9px;
  right: 2.4rem;
}

/* Adjust input/button right padding only when the clear button is visible.
   :has() ships in Chrome 105+, Safari 15.4+, Firefox 121+; older browsers
   keep the default padding (text may overlap the X but never crashes). */
@supports selector(:has(*)) {
  .search-select:has(.input-clear-btn.is-visible) input {
    padding-right: calc(2.7rem + 34px);
  }
  .summary-client-dropdown-wrap:has(.input-clear-btn.is-visible) .select-like {
    padding-right: 4.4rem;
  }
}

.side-timer-status.compact-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem .7rem;
}

.side-timer-status.compact-inline .small {
  margin: 0;
}

.side-timer-status.compact-inline strong {
  font-size: 1.1rem;
}


button {
  border: 0;
  border-radius: 12px;
  padding: .66rem 1rem;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: background .15s ease, transform .05s ease;
}

button:hover { background: var(--primary-hover); }
button:active { transform: translateY(1px); }
button.secondary { background: #6b7280; }
button.danger { background: #b91c1c; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* Visible focus ring for keyboard users on every interactive element. */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.tab-btn:focus-visible,
.todo-tag:focus-visible,
.search-select-item:focus-visible {
  outline: 2px solid var(--si-blue);
  outline-offset: 2px;
}

.small { color: var(--muted); font-size: .9rem; margin-top: .35rem; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-layout {
  display: grid;
  grid-template-columns: minmax(280px, 300px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 1rem;
  align-self: start;
  height: fit-content;
  padding: 1rem;
  transition: width .22s ease, padding .22s ease;
  overflow: hidden;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: .95rem;
  line-height: 1;
}

.brand .brand-mark {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  /* Hidden by default — the wordmark below already includes this icon,
     so showing both prints the logo twice. It comes back only when the
     sidebar is collapsed and there is no room for the wordmark. */
  display: none;
}

.brand .brand-logo {
  display: block;
  height: 26px;
  width: auto;
  flex: 0 0 auto;
}

.sidebar.collapsed .brand {
  justify-content: center;
  margin-bottom: .6rem;
}

.sidebar.collapsed .brand .brand-name {
  display: none;
}

.sidebar.collapsed .brand .brand-mark {
  display: inline-block;
}

.vertical-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}

.sidebar-collapse-toggle {
  margin-top: .7rem;
  margin-left: auto;
  margin-right: 0;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  background: transparent !important;
  color: #1f2937 !important;
}

.app-layout.sidebar-collapsed {
  grid-template-columns: 84px minmax(0, 1fr);
}

.sidebar.collapsed {
  width: 84px;
  padding: .8rem .55rem;
  overflow: visible;
}

.sidebar.collapsed .tab-btn span {
  display: none;
}

.sidebar.collapsed .tab-btn {
  justify-content: center;
  padding: .65rem .35rem;
}

.sidebar.collapsed .sidebar-collapse-toggle i {
  transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-collapse-toggle {
  margin-left: auto;
  margin-right: auto;
}

.sidebar.collapsed:hover {
  width: 290px;
  padding: 1rem;
  z-index: 1400;
}

.sidebar.collapsed:hover .brand,
.sidebar.collapsed:hover .tab-btn span {
  display: inline;
}

/* Hovering a collapsed sidebar expands it to full width, so the
   wordmark comes back and the bare mark steps aside — same swap the
   tab labels above already do. */
.sidebar.collapsed:hover .brand .brand-mark { display: none; }
.sidebar.collapsed:hover .brand .brand-logo { display: block; }

.sidebar.collapsed:hover .tab-btn {
  justify-content: flex-start;
  padding: .66rem 1rem;
}

.sidebar.collapsed:hover .sidebar-collapse-toggle {
  margin-left: auto;
  margin-right: 0;
}

.tab-btn {
  width: 100%;
  justify-content: flex-start;
  background: #eef2ff;
  color: #1f2937;
  border: 1px solid transparent;
}

.tab-btn i { font-size: 1rem; }

.tab-btn:hover {
  background: #dbeafe;
  color: #1e3a8a;
}

.tab-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

.content-area {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
}

.topbar-spacer { flex: 1; }

.profile-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  flex-wrap: wrap;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .45rem .75rem;
  color: #374151;
  background: #f9fafb;
  /* When rendered as <button> (so the pill opens the profile). The
     global button style would otherwise paint it blue and remove the
     border. */
  font: inherit;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
button.user-pill:hover {
  background: #fff;
  border-color: #cbd5e1;
  color: #111827;
}

.panels-wrap { display: grid; gap: 1rem; }
.tab-panel { display: none; gap: 1rem; }
.tab-panel.active { display: grid; }

.toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  gap: .6rem;
  align-items: center;
}

.crm-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

/* Jen textová pole. Bez té výjimky dostane 420 px i zaškrtávátko v
   toolbaru a text popisku se zalomí do dvou řádků vedle obřího boxu. */
.crm-table-toolbar input:not([type="checkbox"]):not([type="radio"]) {
  width: min(420px, 100%);
}

/* Popisek zaškrtávátka je krátký a nemá se co lámat — v toolbaru je
   vedle tlačítka, takže dostane přesně tolik místa, kolik zabere. */
.crm-table-toolbar .checkbox-item {
  flex: 0 0 auto;
  white-space: nowrap;
}

.timer-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.icon-btn {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.icon-btn:hover {
  background: #f3f4f6;
  color: #111827;
}

.mini-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .9rem;
  background: #fcfcfd;
}

.timer-box { margin-top: .9rem; display: grid; gap: .6rem; }
#timer-display { font-size: 2rem; letter-spacing: .02em; }

.form-actions {
  margin-top: .65rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.filters-grid {
  display: grid;
  gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: end;
}

.summary-filters-row {
  grid-template-columns: 1fr 1fr minmax(260px, 340px);
  align-items: end;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .55rem;
}

.summary-client-dropdown-wrap {
  position: relative;
  width: min(360px, 100%);
}

.select-like {
  margin-top: .4rem;
  width: 100%;
  min-height: 46px;
  justify-content: space-between;
  background: #fff;
  color: #111827;
  border: 1px solid var(--border);
}

.select-like:hover { background: #fff; color: #111827; }

.summary-client-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  width: 100%;
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
  z-index: 50;
  padding: .35rem;
}

.summary-client-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .55rem;
  padding: .45rem .5rem;
  border-radius: 8px;
  font-size: .98rem;
}

.summary-client-item input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.summary-client-item:hover { background: #f3f4f6; }

.summary-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.summary-insight-card {
  --card-bg: var(--si-blue-bg);
  --card-border: var(--si-blue-border);
  --card-accent: var(--si-blue);
  --card-accent-dark: var(--si-blue-dark);
  --card-glow: var(--si-blue-glow);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 24px 24px 20px;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--si-surface) 140%);
  box-shadow: var(--si-shadow);
  overflow: hidden;
  isolation: isolate;
}

.summary-insight-card > * {
  position: relative;
  z-index: 1;
}

.summary-insight-card::before {
  content: "";
  position: absolute;
  top: -32px;
  right: -28px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 68%);
  opacity: 0.65;
  z-index: 0;
}

.summary-insight-card::after {
  content: "";
  position: absolute;
  inset: auto -22px -28px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--card-glow) 0%, transparent 70%);
  z-index: 0;
}

.summary-insight-card:nth-child(2) {
  --card-bg: var(--si-green-bg);
  --card-border: var(--si-green-border);
  --card-accent: var(--si-green);
  --card-accent-dark: var(--si-green-dark);
  --card-glow: var(--si-green-glow);
}

.summary-insight-card:nth-child(3) {
  --card-bg: var(--si-amber-bg);
  --card-border: var(--si-amber-border);
  --card-accent: var(--si-amber);
  --card-accent-dark: var(--si-amber-dark);
  --card-glow: var(--si-amber-glow);
}

.summary-insight-label {
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--card-accent);
}

.summary-insight-value {
  display: block;
  margin: 0 0 10px;
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--card-accent-dark);
}

.summary-insight-compare {
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--si-text-soft);
}

.summary-insight-compare.is-up {
  color: var(--si-green);
  font-weight: 600;
}

.summary-insight-compare.is-down {
  color: var(--si-danger);
  font-weight: 600;
}

.summary-insight-chart {
  width: 100%;
  height: 88px;
  margin-top: auto;
  overflow: visible;
  display: block;
}

.summary-insight-baseline {
  fill: none;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.summary-insight-area {
  pointer-events: none;
}

.summary-insight-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 10px var(--card-glow));
}

.summary-insight-dot {
  fill: var(--card-accent);
  stroke: #ffffff;
  stroke-width: 2;
  opacity: 0.95;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    stroke-width 0.18s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.summary-insight-dot:hover,
.summary-insight-dot.is-active {
  opacity: 1;
  transform: scale(1.16);
}

.summary-insight-dot.is-current {
  stroke-width: 3;
  opacity: 1;
  filter: drop-shadow(0 2px 8px var(--card-glow));
}

.summary-insight-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.summary-insight-tooltip.hidden {
  opacity: 0;
  visibility: hidden;
}

.summary-insight-tooltip rect {
  fill: rgba(17, 24, 39, 0.96);
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.summary-insight-tooltip text {
  fill: #f9fafb;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 40px));
}

.toast {
  --toast-accent: var(--si-blue);
  --toast-accent-dark: var(--si-blue-dark);
  --toast-bg: var(--si-blue-bg);
  --toast-border: var(--si-blue-border);
  --toast-glow: var(--si-blue-glow);
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--toast-border);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--toast-bg) 0%, var(--si-surface) 140%);
  box-shadow: var(--si-shadow);
  min-width: 280px;
  animation: toast-in 0.22s ease-out;
  isolation: isolate;
  overflow: hidden;
}

.toast::before {
  content: "";
  position: absolute;
  inset: auto -28px -32px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--toast-glow) 0%, transparent 68%);
  z-index: -1;
}

.toast-success {
  --toast-accent: var(--si-green);
  --toast-accent-dark: var(--si-green-dark);
  --toast-bg: var(--si-green-bg);
  --toast-border: var(--si-green-border);
  --toast-glow: var(--si-green-glow);
}

.toast-warning {
  --toast-accent: var(--si-amber);
  --toast-accent-dark: var(--si-amber-dark);
  --toast-bg: var(--si-amber-bg);
  --toast-border: var(--si-amber-border);
  --toast-glow: var(--si-amber-glow);
}

.toast-error {
  --toast-accent: var(--si-danger);
  --toast-accent-dark: #7f1313;
  --toast-bg: var(--si-danger-soft);
  --toast-border: #fecaca;
  --toast-glow: rgba(185, 28, 28, 0.2);
}

.toast-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  color: var(--toast-accent);
  font-size: 15px;
  border: 1px solid var(--toast-border);
}

.toast-content {
  flex: 1 1 auto;
  min-width: 0;
}

.toast-title {
  margin: 0 0 2px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--toast-accent-dark);
}

.toast-message {
  margin: 0;
  font-size: 0.88rem;
  color: var(--si-text-soft);
  line-height: 1.42;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.toast-no-title .toast-message {
  color: var(--toast-accent-dark);
  font-weight: 600;
}

.toast-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  min-height: auto;
  padding: 0;
  background: transparent !important;
  border: none;
  color: var(--si-text-soft) !important;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
}

.toast-close:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--si-text) !important;
}

.toast-close:focus-visible {
  outline: 2px solid var(--toast-accent);
  outline-offset: 2px;
}

.toast.toast-leaving {
  animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(16px); }
}

@media (max-width: 520px) {
  .toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
  .toast { min-width: 0; }
}

.summary-insight-card:hover {
  transform: translateY(-2px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.1),
    0 6px 14px rgba(15, 23, 42, 0.05);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f8fafc;
  font-size: .86rem;
}

/* No z-index here on purpose. `position: relative` alone still lifts the
   wrapper above non-positioned content, but adding a z-index turns it
   into a STACKING CONTEXT — and a stacking context traps the row menu
   even though the menu is position:fixed with a huge z-index of its own.
   That is what let a later section paint over an open menu. */
.table-wrap {
  margin-top: .9rem;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

th, td {
  text-align: left;
  padding: .68rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
}

th:last-child,
td:last-child {
  text-align: right;
}

.text-link {
  text-decoration: none;
  color: var(--primary);
  font-weight: 400;
  cursor: pointer;
}

.text-link:hover {
  color: #1e40af;
  text-decoration: underline;
}

/* Detail page — unified shell for both project and client detail. */
.detail-shell {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.4rem 1.5rem 1.5rem;
  display: grid;
  gap: 1.1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.detail-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.detail-hero-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.detail-hero-meta { min-width: 0; }
.detail-hero-meta h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.detail-hero-meta .small {
  color: #64748b;
  margin: .15rem 0 0;
}
.detail-hero-right {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.detail-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: .85rem;
  font-weight: 600;
  border: 1px solid #a7f3d0;
  line-height: 1;
}
.detail-status .detail-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.detail-status[data-kind="archived"] {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}
.detail-status[data-kind="client"] {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}
.detail-hero-btn { padding: .45rem .85rem; }

/* "Sdílet" hero button — bílá s černým textem a tenkým rámečkem, dle náhledu. */
.detail-hero-share {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  background: #fff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.detail-hero-share:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.detail-hero-share i {
  font-size: .95rem;
  color: #475569;
}

/* Stat cards strip */
.detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0;
  background: #f8fafc;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  border: 1px solid #eef2f7;
}
.detail-stat {
  padding: 0 1rem;
  border-right: 1px solid #e2e8f0;
}
.detail-stat:last-child { border-right: 0; }
.detail-stat-label {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  font-size: .7rem;
  font-weight: 600;
  margin: 0 0 .25rem;
}
.detail-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  display: block;
  color: #0f172a;
}
.detail-stat-sub { margin: .3rem 0 0; color: #64748b; }
.detail-stat-bar {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-top: .5rem;
  overflow: hidden;
}
.detail-stat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .3s ease;
}
.detail-stat-bar.warn .detail-stat-bar-fill { background: linear-gradient(90deg, #f59e0b, #fb923c); }
.detail-stat-bar.over .detail-stat-bar-fill { background: linear-gradient(90deg, #dc2626, #ef4444); }

/* Tabs — text-only "underline" style. The global button:hover paints
   buttons blue, so we override every interactive state explicitly to
   keep this nav looking like a text nav. */
.detail-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 .1rem;
}
.detail-tab-btn,
.detail-tab-btn:hover,
.detail-tab-btn:focus,
.detail-tab-btn:active,
.detail-tab-btn.active {
  background: transparent !important;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  padding: .7rem 0;
  margin-bottom: -1px;
  color: #64748b;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
}
.detail-tab-btn:hover { color: #0f172a; }
.detail-tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.detail-content { display: grid; gap: 1rem; }

/* Overview grid (default tab) */
.detail-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.detail-overview-card {
  padding: 1rem 1.1rem;
}
.detail-overview-card h3 {
  margin: 0 0 .6rem;
  font-size: .95rem;
  color: #0f172a;
}
.detail-budget-headline {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}
.detail-mini-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}
.detail-mini-list li {
  padding: .35rem 0;
  border-bottom: 1px dashed #eef2f7;
}
.detail-mini-list li:last-child { border-bottom: 0; }

/* Sharing tab */
.detail-sharing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.detail-sharing-pane {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem 1.1rem;
}
.detail-sharing-pane-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .6rem;
  flex-wrap: wrap;
}
.detail-sharing-pane-head h3 {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.detail-sharing-pane-head .small { margin: .15rem 0 0; color: #64748b; }

.detail-client-sharing-list {
  display: grid;
  gap: .55rem;
}
.detail-client-sharing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.detail-client-sharing-status {
  margin: .25rem 0 0;
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}
.badge-info { background: #eef2ff; color: #3730a3; }
.badge-public { background: #ecfdf5; color: #047857; }

/* Per-project budget mini-bar inside Projekty tab */
.detail-project-budget {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 180px;
}
.detail-project-budget .detail-stat-bar { margin-top: 0; flex: 1; }

/* To-do list inside detail — visual parity with the main To-do panel. */
.detail-todo-shell {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.detail-todo-shell .todo-plan-section {
  padding: .9rem 1rem;
}
.detail-todo-shell .todo-plan-heading {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.detail-todo-shell .todo-plan-count {
  background: #eef2ff;
  color: #3730a3;
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .5rem;
  border-radius: 999px;
}
.detail-todo-shell .todo-plan-item-head {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.detail-todo-due {
  font-size: .8rem;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}
.detail-todo-due.overdue { color: #b91c1c; }
.detail-todo-due.done { color: #94a3b8; text-decoration: line-through; }
.detail-todo-children {
  display: grid;
  gap: .35rem;
  margin: .5rem 0 0 1.6rem;
  padding-left: .8rem;
  border-left: 2px solid #e2e8f0;
}
.detail-todo-children .todo-plan-item {
  background: #f8fafc;
}

/* Project budget fieldset in side-panel */
.project-budget-fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem .85rem;
  margin: 0;
}
.project-budget-fieldset legend {
  padding: 0 .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: #475569;
}
.project-budget-fieldset .hidden { display: none; }

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
/* background/color must be restated: the global `button:hover`
   (0,1,1) outranks `.link-button` (0,1,0), so without this the link
   picks up the solid blue pill on hover. */
.link-button:hover {
  background: none;
  color: var(--primary-hover);
  text-decoration: underline;
}

.menu-cell {
  position: relative;
  width: auto;
  display: flex;
  justify-content: flex-end;
}

.row-menu-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  background: #eef2ff;
  color: #1f2937;
}

.row-menu-toggle:hover { background: #dbeafe; }

.row-menu {
  position: absolute;
  right: 0;
  top: 42px;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
  padding: .35rem;
  z-index: 6000;
}

.row-menu button,
.row-menu button.danger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1f2937;
  padding: .52rem .55rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.row-menu button:hover,
.row-menu button.danger:hover {
  background: #f3f4f6;
  color: #111827;
}

.row-menu button.danger {
  color: #b91c1c;
}

/* Floating (fixed-positioned) row menu — used by createMenuController to
   anchor the menu to the toggle in viewport coords. This bypasses the
   ancestor table-wrap's overflow clipping so the menu shows in full even
   for the last row of a card. */
/* Below the toast container (9999) and above everything a panel can
   put on screen. The floating menu is anchored to the viewport, so a
   card rendered after it in the DOM must never paint over it. */
.row-menu.row-menu-floating {
  position: fixed;
  z-index: 9000;
  top: auto;
  right: auto;
  bottom: auto;
}

/* Sidebar section header (separator between main and "Sdílené" group) */
/* "Sdílet projekt" row on the Sdílené projekty tab: label + project
   picker + action button on one line, wrapping on narrow viewports.
   The select flexes so long "Klient / Projekt" labels stay readable. */
/* "Nastavit sdílení" action row on the Sdílené projekty tab. The
   project choice itself lives in the side panel, so this is just the
   button. */
.shared-share-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

/* Logout closes the sidebar nav. Separated by a hairline so it reads
   as an account action, not another destination, and tinted red on
   hover instead of the tab-btn blue. */
.sidebar-logout {
  margin-top: .5rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  background: transparent;
  color: #64748b;
}
.sidebar-logout:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.sidebar-section-head {
  margin: .75rem .25rem .25rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #64748b;
}

/* Project tasks ("Úkoly") — list-style visualization with checkbox, name,
   status pill, tracked time. Grouped per project, split into Rozpracované
   and Hotové sections. */
.tasks-list { display: grid; gap: .8rem; }
.task-project-group {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: .9rem 1.1rem;
}
.task-project-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.task-project-head h3 {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.task-section-head {
  display: flex;
  gap: .35rem;
  align-items: baseline;
  margin: .6rem 0 .25rem;
  color: #475569;
  font-size: .82rem;
}
.task-section-head strong { color: #0f172a; }
.task-rows { display: flex; flex-direction: column; }
.task-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 1rem;
  padding: .65rem .15rem;
  border-bottom: 1px solid #eef2f7;
}
.task-row:last-child { border-bottom: 0; }
.task-row-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  background: #fff;
  transition: background .15s, border-color .15s;
}
.task-row-check input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.task-row-check input[type="checkbox"]:checked::after {
  content: "";
  width: 12px;
  height: 6px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg) translate(1px, -1px);
}
.task-row-title {
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
}
.task-row-title:hover { text-decoration: underline; }
.task-row-done .task-row-title { color: #64748b; }
.task-row-time {
  color: #64748b;
  font-variant-numeric: tabular-nums;
  font-size: .92rem;
}
.task-row-menu .menu-cell { display: inline-flex; }
.task-row-title-cell { display: flex; flex-direction: column; gap: .15rem; }
.task-row-due { display: inline-flex; align-items: center; gap: .3rem; margin-top: 0; font-weight: 600; }
.entry-author {
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .2rem;
}
.entry-author .fi { font-size: .9em; }

/* Project share — public link section in the share modal */
.project-share-links-section h4 { margin: 0; }
.project-share-link-create {
  display: flex;
  align-items: end;
  gap: .5rem;
  margin-top: .5rem;
}
.project-share-link-create label { flex: 1 0 auto; }
.project-share-links { display: grid; gap: .55rem; margin-top: .6rem; }
.project-share-link-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .4rem;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}
.project-share-link-input {
  font-family: monospace;
  font-size: .85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .35rem .5rem;
  background: #fff;
  width: 100%;
}
.project-share-link-expiry {
  grid-column: 1 / -1;
  color: #64748b;
}

/* Public share page (share.php) — standalone read-only layout */
.share-page {
  background: #f1f5f9;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
}
.share-container {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
  display: grid;
  gap: 1rem;
}
.share-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #475569;
  margin: 0 0 .35rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 700;
}
.share-head h1 { margin: .15rem 0 .25rem; font-size: 1.4rem; }
.share-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.share-head-stats {
  display: flex;
  gap: 1.25rem;
}
.share-head-stats > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.share-head-stats strong { font-size: 1.15rem; }
.share-head-stats .small { color: #64748b; }
.share-expiry { color: #64748b; margin-top: .65rem; }
.share-error h1 { margin: 0; font-size: 1.1rem; }
.share-task-list { display: grid; gap: .5rem; }
.share-task {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .8rem;
  padding: .6rem .7rem;
  border-bottom: 1px solid #eef2f7;
}
.share-task:last-child { border-bottom: 0; }
.share-task-desc { color: #475569; margin: .2rem 0 0; }
.share-task-time { color: #64748b; font-variant-numeric: tabular-nums; }
.share-todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.share-todo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem;
  align-items: start;
  padding: .45rem 0;
  border-bottom: 1px solid #eef2f7;
}
.share-todo:last-child { border-bottom: 0; }
.share-todo-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid #cbd5e1;
  display: inline-grid;
  place-content: center;
  font-size: .82rem;
  color: #475569;
}
.share-todo-done .share-todo-check { background: var(--primary); color: #fff; border-color: var(--primary); }
.share-todo-done strong { color: #64748b; text-decoration: line-through; }
.share-footer {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: .45rem;
  color: #64748b;
  padding: 0;
}
.share-footer-logo { display: inline-flex; opacity: .85; transition: opacity .15s ease; }
.share-footer-logo:hover { opacity: 1; }
.share-footer-logo img { height: 22px; display: block; }

.task-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
}
.task-status-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  display: inline-block;
}
.task-status-pill-open        { background: #f1f5f9; color: #475569; }
.task-status-dot-open         { background: #94a3b8; }
.task-status-pill-in_progress { background: #e0e7ff; color: #3730a3; }
.task-status-dot-in_progress  { background: #4f46e5; }
.task-status-pill-waiting     { background: #f1f5f9; color: #475569; }
.task-status-dot-waiting      { background: #94a3b8; }
.task-status-pill-in_review   { background: #fef3c7; color: #92400e; }
.task-status-dot-in_review    { background: #d97706; }
.task-status-pill-done        { background: #dcfce7; color: #166534; }
.task-status-dot-done         { background: #16a34a; }

/* Reporting sub-tab switcher (Nevyfakturované / Vyfakturované) */
/* Shares the visual language of .todo-view-switch (soft tray + blue
   active pill). The explicit :hover matters: without it the global
   button:hover paints the inactive tab solid blue. */
.reporting-sub-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .55rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: .3rem;
}
.reporting-sub-tab {
  background: transparent;
  color: #334155;
  min-height: 40px;
  border-radius: 10px;
  padding: .48rem .9rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}
.reporting-sub-tab:hover {
  background: #e2e8f0;
  color: #334155;
}
.reporting-sub-tab.active,
.reporting-sub-tab.active:hover {
  background: #dbeafe;
  color: #1e3a8a;
  box-shadow: none;
}

.text-muted { color: #64748b; }

.client-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.client-detail-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: .65rem .75rem;
}

.client-detail-item.full {
  grid-column: 1 / -1;
}

.client-detail-item strong {
  font-size: .82rem;
  color: #64748b;
  display: block;
  margin-bottom: .25rem;
}

.client-detail-item p {
  margin: 0;
  color: #0f172a;
  word-break: break-word;
}

.client-detail-subheading {
  background: transparent;
  border: 0;
  padding: .1rem 0 0;
}

.client-detail-subheading strong {
  margin: 0;
  font-size: .95rem;
  color: #475569;
}

.section-heading {
  margin: .2rem 0 0;
  font-weight: 600;
}

.contact-person-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.checkbox-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .7rem;
  display: grid;
  gap: .45rem;
}

.checkbox-group legend {
  padding: 0 .35rem;
  font-size: .9rem;
  color: #475569;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.todo-status {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
}

.todo-status.open {
  background: var(--todo-status-open-bg);
  color: #2b61cc;
  padding: .66rem 1rem;
}

.todo-status.done {
  background: #dcfce7;
  color: #166534;
}

.todo-view-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .55rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: .3rem;
}

.todo-view-btn {
  background: transparent;
  color: #334155;
  min-height: 40px;
  border-radius: 10px;
  padding: .48rem .9rem;
}

.todo-view-btn:hover {
  background: #e2e8f0;
}

.todo-view-btn.active {
  background: #dbeafe;
  color: #1e3a8a;
}

.todo-plan-view {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

.todo-plan-section {
  padding: .95rem 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.todo-plan-section:last-child {
  border-bottom: 0;
}

.todo-plan-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .55rem;
}

.todo-plan-list {
  display: grid;
  gap: .5rem;
}

.todo-plan-item {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: .58rem .7rem;
  background: #fff;
}

.todo-plan-item-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .55rem;
}

.todo-level-1,
.todo-level-2,
.todo-level-3 {
  margin-left: 1.1rem;
}

.todo-toggle-btn {
  background: transparent !important;
  min-height: auto;
  padding: 0;
}

.todo-plan-item-title {
  display: grid;
  gap: .15rem;
}

.todo-desc {
  color: #475569;
  font-size: .84rem;
}

.todo-title.done {
  text-decoration: line-through;
  color: #64748b;
}

.todo-meta {
  color: #64748b;
  font-size: .83rem;
}

.todo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.todo-tag {
  min-height: auto;
  padding: .16rem .5rem;
  border-radius: 999px;
  background: #eef2ff !important;
  color: #3730a3 !important;
  font-size: .78rem;
}

.todo-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  font-size: .85rem;
}

.todo-check.done {
  background: #94a3b8;
  border-color: #94a3b8;
  color: #fff;
}

.todo-children {
  display: grid;
  gap: .45rem;
}

.todo-subtask-btn {
  background: transparent !important;
  color: var(--primary) !important;
  justify-content: flex-start;
  min-height: auto;
  padding: .2rem .1rem .45rem;
}

.todo-subtask-btn:hover {
  background: transparent !important;
  color: var(--primary-hover) !important;
  text-decoration: underline;
}

.todo-subtask-form {
  display: flex;
  gap: .45rem;
  margin: .2rem 0 .35rem 1.1rem;
}

.todo-subtask-form input {
  min-height: 38px;
}

.todo-subtask-form .todo-subtask-due-new {
  width: 165px;
  min-width: 140px;
}

.todo-subtask-form button {
  min-height: 38px;
  width: 40px;
  padding: 0;
}

.todo-subtasks-wrap {
  border-top: 1px solid #e2e8f0;
  margin: .2rem 0 .6rem;
  padding-top: .35rem;
}

.todo-subtasks-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
}

.todo-subtasks-toggle,
.todo-subtasks-hide {
  background: transparent !important;
  color: #475569 !important;
  min-height: auto;
  padding: .15rem 0;
}

.todo-subtasks-toggle {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

.todo-subtask-list {
  display: grid;
  gap: .2rem;
  margin-top: .25rem;
}

.todo-subtasks-progress {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin: 0 .35rem;
  vertical-align: middle;
  line-height: 0;
}

.todo-subtasks-progress.empty {
  border-radius: 50%;
  background: #eef2f8;
}

.todo-subtasks-progress-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.todo-subtasks-progress-arc {
  fill: none;
  stroke-width: 18;
  stroke-linecap: butt;
  stroke: #d9e2f2;
}

.todo-subtasks-progress-arc[data-state="done"] {
  stroke: var(--si-blue);
}

.todo-subtask-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-bottom: 1px solid #e2e8f0;
  padding: .42rem 0;
}

.todo-subtask-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.todo-subtask-main .todo-tags {
  margin-top: .05rem;
}

.todo-subtask-title {
  color: #0f172a;
  cursor: text;
}

.todo-subtask-edit-input {
  min-height: 34px !important;
  padding: .2rem .45rem !important;
  flex: 1;
}

.todo-subtask-row.done .todo-subtask-title {
  text-decoration: line-through;
  color: #64748b;
}

.todo-subtask-due-input {
  width: 120px;
  min-height: 34px;
  padding: .2rem .55rem;
  font-size: .82rem;
  text-align: center;
  border-radius: 999px;
}

.todo-subtask-due-input.open,
.todo-subtask-due-alt.open {
  background: #fef3c7;
  color: #9a3412;
  border-color: #fde68a;
}

.todo-subtask-due-input.done,
.todo-subtask-due-alt.done {
  background: #e2e8f0;
  color: #475569;
  border-color: #cbd5e1;
}

.todo-subtask-due-alt,
.todo-subtask-new-due-alt,
.todo-draft-subtask-due-alt {
  width: 120px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  padding: .2rem .55rem !important;
  text-align: center;
  font-size: .82rem;
  border: 1px solid transparent !important;
}

.todo-subtask-new-due-alt,
.todo-draft-subtask-due-alt {
  width: 160px !important;
  min-width: 140px;
}

.todo-subtask-due-alt.todo-status {
  min-height: auto !important;
  padding: .28rem .95rem !important;
  font-weight: 700;
  letter-spacing: .2px;
  width: 120px !important;
  border: 0 !important;
  box-shadow: none !important;
}

.todo-subtask-due-alt.todo-status.open {
  background: var(--todo-status-open-bg) !important;
  color: #2b61cc !important;
}

.todo-subtask-due-alt.todo-status.done {
  background: #e2e8f0 !important;
  color: #475569 !important;
}

.todo-subtask-form .todo-subtask-cancel,
.todo-draft-subtask-row [data-draft-subtask-remove] {
  background: transparent !important;
  color: var(--si-text-soft) !important;
}

.todo-subtask-form .todo-subtask-cancel:hover,
.todo-draft-subtask-row [data-draft-subtask-remove]:hover {
  background: transparent !important;
  color: var(--si-text-soft) !important;
}

.todo-create-subtasks {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: .6rem;
  background: #f8fafc;
}

.todo-create-subtasks-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.todo-draft-subtasks-list {
  display: grid;
  gap: .45rem;
}

.todo-draft-subtask-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 38px 38px;
  gap: .4rem;
  align-items: center;
}

.todo-draft-subtask-row button {
  width: 38px;
  min-height: 38px;
  padding: 0;
}

.todo-draft-subtask-due-label {
  min-height: 38px;
  min-width: 94px;
  padding: .45rem .6rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.todo-draft-subtask-due-label.empty {
  color: #64748b;
}

.todo-draft-subtask-calendar {
  color: var(--si-text-soft) !important;
  background: transparent !important;
}

#todo-add-draft-subtask {
  background: transparent !important;
  color: var(--primary) !important;
  justify-content: flex-start;
  min-height: auto;
  padding: .25rem .1rem .15rem;
}

#todo-add-draft-subtask:hover {
  background: transparent !important;
  color: var(--primary-hover) !important;
  text-decoration: underline;
}

.todo-subtask-delete {
  background: transparent !important;
  color: var(--si-text-soft) !important;
  min-height: 32px;
  width: 32px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.todo-subtask-row:hover .todo-subtask-delete,
.todo-subtask-row:focus-within .todo-subtask-delete {
  opacity: 1;
  pointer-events: auto;
}

.todo-subtask-delete:hover {
  color: #b91c1c !important;
}

.todo-board-view {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.todo-board-col {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  padding: .65rem;
  min-height: 240px;
}

.todo-board-title {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: .5rem;
}

.todo-board-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .5rem;
}

.todo-board-title-row .todo-board-title {
  margin: 0;
  cursor: grab;
}

.todo-board-actions {
  display: flex;
  gap: .25rem;
}

.todo-board-actions button {
  min-height: 28px;
  padding: .2rem .35rem;
  background: transparent !important;
  color: var(--si-text-soft) !important;
}

.todo-board-actions button:hover {
  background: transparent !important;
  color: var(--si-text-soft) !important;
}

.todo-board-list {
  display: grid;
  gap: .55rem;
}

.todo-board-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: .58rem;
  display: grid;
  gap: .45rem;
}

.todo-board-card.dragging {
  opacity: .55;
}

.todo-board-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .4rem;
}

.todo-empty {
  color: #64748b;
  font-size: .9rem;
  padding: .35rem .1rem;
}

@media (max-width: 1080px) {
  .todo-board-view {
    grid-template-columns: 1fr;
  }

  .todo-plan-item-head {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.maintenance-frequency-row {
  display: grid;
  grid-template-columns: 1fr minmax(170px, 220px);
  gap: .6rem;
}

.floating-timer {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(520px, calc(100vw - 1.5rem));
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #dbe4ff;
  border-radius: 18px;
  padding: .85rem;
  box-shadow: 0 20px 44px rgba(15, 23, 42, .24);
  backdrop-filter: blur(8px);
  z-index: 1200;
  transition:
    width .42s cubic-bezier(0.22, 0.61, 0.36, 1),
    padding .42s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-radius .42s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow .42s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform .42s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: width, transform;
}

.floating-layout {
  display: grid;
  gap: .55rem;
}

.floating-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.floating-left {
  flex: 0 0 auto;
}

.floating-info {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.floating-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.floating-info-inline {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.floating-inline-meta {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floating-inline-meta.small {
  margin-top: 0;
}

.floating-collapse-btn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  background: #eef2ff;
  color: #1f2937;
}

.floating-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf0ff;
  color: #1e3a8a;
}

.floating-title { font-weight: 700; color: #111827; }
.floating-clock { font-size: 1.2rem; font-weight: 700; color: #1e3a8a; }

.floating-meta {
  padding: .45rem .55rem;
  border-radius: 12px;
  background: #f8faff;
  border: 1px solid transparent;
  color: inherit;
  text-align: left;
  width: 100%;
}

button.floating-meta {
  cursor: pointer;
  display: grid;
  place-items: start;
  justify-content: start;
  text-align: left;
  gap: .2rem;
}

button.floating-meta:hover {
  border-color: #dbe4ff;
  background: #f1f5ff;
}

.floating-meta .small { margin-top: .15rem; }

.floating-actions {
  display: flex;
  gap: .45rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

.floating-actions button {
  min-height: 42px;
}

.floating-timer.compact {
  width: min(520px, calc(100vw - 1.5rem));
  border-radius: 14px;
  padding: .62rem .68rem;
  transform: scale(0.985);
}

.floating-timer.auto-compact {
  box-shadow: 0 14px 30px rgba(15, 23, 42, .2);
}

.entries-export-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
}

.entries-export-btn {
  background: #0B994F !important;
}

.entries-export-btn:hover {
  background: #087d40 !important;
}

button[data-action="maintenance"][data-entity="website"] {
  background: #0B994F !important;
}

button[data-action="maintenance"][data-entity="website"]:hover {
  background: #087d40 !important;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.ares-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  align-items: end;
}

.ares-row > button {
  width: 100%;
  min-height: 50px;
}

#entries-export-form {
  gap: 1rem;
}

#entries-export-form label.inline-check {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  padding: .6rem .7rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  gap: .55rem;
}

#entries-export-form .inline-check input {
  margin: 0;
  flex: 0 0 auto;
}

#entries-export-form .inline-check {
  justify-content: flex-start;
  cursor: pointer;
}

.export-format-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #e2e8f0;
}

.export-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.export-period-inputs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#entries-export-form h4 {
  margin: .25rem 0;
  font-size: 1.25rem;
}

#entries-export-form .table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#entries-export-form input[type="radio"],
#entries-export-form input[type="checkbox"] {
  width: 13px;
  height: 13px;
  min-height: 13px;
}

#entries-export-preview-head th {
  font-weight: 700;
}

.flatpickr-current-month {
  padding: 0;
}

@media (max-width: 760px) {
  .ares-row,
  .export-options-grid,
  .export-format-row {
    grid-template-columns: 1fr;
  }
}

.floating-timer.compact .floating-layout {
  gap: 0;
}

.floating-timer.compact .floating-row {
  align-items: center;
  flex-wrap: nowrap;
  gap: .45rem;
  overflow: hidden;
}

.floating-timer.compact .floating-info {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.floating-timer.compact .floating-title,
.floating-timer.compact .floating-clock,
.floating-timer.compact .floating-inline-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.floating-timer.compact .floating-title {
  font-size: .92rem;
  font-weight: 600;
  color: #334155;
  max-width: 160px;
}

.floating-timer.compact .floating-clock {
  font-size: 1rem;
}

.floating-timer.compact #floating-inline-meta {
  display: block !important;
  max-width: 180px;
}

.floating-timer.compact .floating-meta {
  display: none;
}

.floating-timer.compact .floating-right {
  margin-left: auto;
  gap: .35rem;
}

.floating-timer.compact .floating-actions {
  margin-top: 0;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.floating-timer.compact #floating-toggle-btn,
.floating-timer.compact #floating-finish-btn,
.floating-timer.compact #floating-collapse-btn {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.floating-timer.compact #floating-main-btn {
  white-space: nowrap;
  min-width: 156px;
}

.app-dialog {
  border: 0;
  border-radius: 16px;
  width: min(560px, calc(100vw - 1.5rem));
  padding: 1rem;
  box-shadow: 0 22px 36px rgba(15, 23, 42, .35);
}

.side-panel {
  position: fixed;
  inset: 0;
  z-index: 1800;
}

.side-panel.hidden {
  display: block !important;
  visibility: hidden;
}

.side-panel:not(.hidden) {
  visibility: visible;
}

.side-panel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  opacity: 1;
  transition: opacity .2s ease;
}

.side-panel-content {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(520px, 95vw);
  border-radius: 0;
  overflow: auto;
  padding: 1rem;
  box-shadow: -14px 0 36px rgba(15, 23, 42, .22);
  transform: translateX(0%);
  transition: transform .24s ease;
}

.side-panel.hidden .side-panel-overlay { opacity: 0; pointer-events: none; }
.side-panel.hidden .side-panel-content { transform: translateX(100%); pointer-events: none; }

/* The primary action stays on screen no matter how long the form is.
   .side-panel-content is the scroll container, so a sticky footer here
   works for every form in the panel at once — which is the point: one
   rule instead of each form discovering the problem separately, the way
   "Nová cenová nabídka" did when its buttons ended up below the fold.
   On a short form nothing scrolls and this simply renders in place. */
.side-panel-content .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: .35rem 0 0;
  padding: .75rem 0 .15rem;
  background: #fff;
  border-top: 1px solid var(--border);
}

.side-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

#side-panel-close {
  background: transparent;
  border: 0;
  color: #6b7280;
}

#side-panel-close:hover {
  background: #f3f4f6;
  color: #111827;
}

.side-timer-status strong {
  color: #1e3a8a;
  font-size: 1.35rem;
}

.app-dialog::backdrop { background: rgba(15, 23, 42, .45); }

.app-dialog.compact { width: min(620px, calc(100vw - 1.5rem)); }

.validation {
  padding: .55rem .65rem;
  border-radius: 10px;
  color: #991b1b;
  border: 1px solid #fecaca;
  background: #fee2e2;
}

@media (max-width: 1100px) {
  .summary-insights {
    grid-template-columns: 1fr;
  }

  .summary-insight-card {
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  .summary-insight-card {
    padding: 20px 18px 18px;
    border-radius: 20px;
  }

  .summary-insight-label {
    font-size: 0.92rem;
  }

  .summary-insight-value {
    font-size: 2rem;
  }

  .summary-insight-compare {
    font-size: 0.9rem;
  }

  .summary-insight-chart {
    height: 76px;
  }
}

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .app-layout.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .sidebar.collapsed {
    width: auto;
    padding: 1rem;
  }
  .sidebar.collapsed .tab-btn span {
    display: inline;
  }
  .sidebar.collapsed .brand .brand-name {
    display: block;
  }
  .sidebar.collapsed .brand .brand-mark {
    display: none;
  }
  .sidebar.collapsed .tab-btn {
    justify-content: flex-start;
    padding: .66rem 1rem;
  }
  .vertical-tabs {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .5rem;
  }
  .toolbar { grid-template-columns: 1fr; }
  .auth-shell { padding: 1.2rem; margin: 1rem auto; }
  .auth-row { flex-direction: column; align-items: flex-start; }
  .timer-card-head { flex-direction: column; align-items: stretch; }
  .timer-card-head button { width: 100%; }
  .crm-table-toolbar { flex-direction: column; align-items: stretch; }
  .crm-table-toolbar input:not([type="checkbox"]):not([type="radio"]),
  .crm-table-toolbar button { width: 100%; }
  .summary-filters-row { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .container { padding-bottom: 8rem; }
  .floating-timer {
    right: .75rem;
    left: .75rem;
    width: auto;
    bottom: .75rem;
    padding: .75rem;
  }

  .floating-actions button {
    flex: 1 1 auto;
    min-width: 46%;
  }

  .floating-timer.compact .floating-actions button {
    flex: 0 0 auto;
  }

  .floating-timer.compact #floating-toggle-btn,
  .floating-timer.compact #floating-finish-btn,
  .floating-timer.compact #floating-collapse-btn {
    min-width: 40px;
  }

  .floating-timer.compact #floating-main-btn {
    min-width: 136px;
  }
}

.side-panel-content select,
.side-panel-content input:not([type="checkbox"]),
.side-panel-content textarea {
  min-height: 50px;
  height: 50px;
  border-radius: 12px !important;
}

.side-panel-content textarea {
  min-height: 80px;
  height: auto;
}

#timer-description,
#manual-description,
#timer-setup-description {
  min-height: 80px;
  height: auto;
}


/* === Module gating === */
.module-disabled { display: none !important; }

/* === Profile panel === */
.profile-shell {
  display: grid;
  gap: 1rem;
}
.profile-head {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.profile-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #475569;
  font-weight: 700;
  font-size: .72rem;
  margin: 0 0 .4rem;
}
.profile-head h2 { margin: 0; font-size: 1.4rem; }
.profile-head .small { margin: .25rem 0 0; color: #64748b; }

.profile-card { padding: 1.2rem 1.4rem; }
.profile-card h3 {
  margin: 0 0 .35rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.05rem;
}
.profile-card > .small { margin: 0 0 1rem; color: #64748b; }
/* Groups inside a single card (Vzhled holds both colours and the
   floating-timer switches). The top margin is collapsed away for the
   first subhead so it doesn't double up with the card intro. */
.profile-subhead {
  margin: 1.6rem 0 .35rem;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #64748b;
}
.profile-card > .small + .profile-subhead { margin-top: 0; }

.profile-modules {
  display: grid;
  gap: .6rem;
}
.profile-module {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.profile-module:hover { border-color: #cbd5e1; }
/* A setting that only applies while the row above it is on — indented
   so the dependency reads visually, not just from the greyed state it
   gets from :has(input:disabled). */
.profile-module-dependent {
  margin-left: 1.5rem;
  border-left: 3px solid var(--border);
}
.profile-module input[type="checkbox"]:disabled ~ * { opacity: .9; }
.profile-module:has(input:disabled) {
  background: #f8fafc;
  cursor: default;
}
.profile-module-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eef2ff;
  color: var(--primary);
  display: grid;
  place-content: center;
  font-size: 1.05rem;
  flex: 0 0 auto;
}
.profile-module-meta { min-width: 0; }
.profile-module-meta strong { display: block; }
.profile-module-meta .small { margin: .15rem 0 0; color: #64748b; }

/* Switch-style checkbox */
.profile-module input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
  margin: 0;
  flex: 0 0 auto;
}
.profile-module input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  transition: transform .15s ease;
}
.profile-module input[type="checkbox"]:checked { background: var(--primary); }
.profile-module input[type="checkbox"]:checked::after { transform: translateX(20px); }
.profile-module input[type="checkbox"]:disabled {
  background: #e2e8f0;
  cursor: not-allowed;
}
.profile-module input[type="checkbox"]:disabled:checked { background: #94a3b8; }

/* Color pickers */
.profile-theme {
  display: grid;
  gap: .6rem;
  margin-bottom: 1rem;
}
.profile-color {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
/* Stejná karta jako u barev, jen s <select> místo barevného pole. */
.profile-rows-per-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-weight: 600;
}
.profile-rows-per-page select { width: auto; min-width: 6rem; }

.profile-color strong { display: block; }
.profile-color .small { color: #64748b; margin: .15rem 0 0; }
.profile-color input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 56px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.profile-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 4px; }
.profile-color input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}

/* === Profile: custom logo === */
.profile-logo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.profile-logo-preview {
  width: 180px;
  height: 90px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #f8fafc;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: .4rem;
}
.profile-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.profile-logo-empty {
  color: #94a3b8;
  font-size: .85rem;
}
.profile-logo-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 180px;
}
/* The hidden <input type=file> still needs to look like a button via the
   <label>. We mimic the .secondary look so it sits next to the remove
   action without visual drift. */
.profile-logo-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.profile-logo-upload:hover {
  border-color: var(--primary);
  background: #f8fafc;
}

/* === Share view logo === */
.share-logo-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: .8rem;
}
.share-logo {
  max-height: 64px;
  max-width: 240px;
  object-fit: contain;
}

/* === Share view tabs + insights (share.php) === */
.share-tabs-card { display: grid; gap: 1rem; }
.share-tab-btn { display: inline-flex; align-items: center; gap: .45rem; }
.share-tab-btn i { font-size: 1rem; line-height: 1; }

/* Insight cards reuse the app's summary-insight look but without
   sparkline charts, so the fixed 240px min-height would leave a
   hole — compact variant instead. */
.share-insights {
  margin-bottom: .35rem;
}
.share-insights .summary-insight-card {
  min-height: auto;
  padding: 18px 20px 16px;
  border-radius: 18px;
}
.share-insights .summary-insight-value {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.share-insights .summary-insight-compare { margin-bottom: 0; }

.share-months {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 16px;
}
.share-month-chip {
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.share-month-chip:hover { border-color: var(--primary); color: var(--primary); }
.share-month-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.share-billed-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.share-billed-yes { background: var(--si-green-bg); color: var(--si-green-dark); border: 1px solid var(--si-green-border); }
.share-billed-no { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

.share-entries-total td {
  border-top: 2px solid #e2e8f0;
  padding-top: .6rem;
}
.share-entries-total .small { color: #64748b; }
.share-empty { color: #64748b; margin: .25rem 0 0; }

/* The global th:last-child/td:last-child right-align (made for the
   app's actions column) doesn't fit the share table — Fakturace
   pills read better left-aligned with the rest. */
.share-tab-panel th:last-child,
.share-tab-panel td:last-child {
  text-align: left;
}
.share-entry-date { white-space: nowrap; }
.share-entry-date .small { color: #64748b; }

/* The app-wide 1100px query stacks .summary-insights to one column,
   but the share container is only 960px wide and its cards are
   compact — keep three-up until truly narrow viewports. */
@media (max-width: 1100px) {
  .share-insights.summary-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .share-insights.summary-insights { grid-template-columns: 1fr; }
}

/* Pagination strip under the unbilled entries table. Aligned right
   so it doesn't fight the toolbar above, and the status text + the
   two buttons sit on a single row that wraps gracefully on narrow
   viewports. */
.entries-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  justify-content: flex-end;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.entries-pagination .small {
  margin-right: auto;
  color: var(--muted);
}

/* --- Cenové nabídky ------------------------------------------------
   Panel + editor. The client-facing document has its OWN stylesheet
   (assets/css/offer.css) shared with the PDF — nothing here affects
   what the client sees. */

.offer-status-pill {
  display: inline-flex;
  align-items: center;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
}
.offer-status-draft    { background: #f1f5f9; color: #475569; }
.offer-status-sent     { background: #e0e7ff; color: #3730a3; }
.offer-status-accepted { background: #dcfce7; color: #166534; }
.offer-status-rejected { background: #fee2e2; color: #991b1b; }
.offer-status-expired  { background: #fef3c7; color: #92400e; }

/* Marks a row as still being in the pipeline rather than a real
   client/project — the whole point of the lead/inquiry split. */
.offer-tag {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 6px;
  background: var(--si-amber-bg);
  border: 1px solid var(--si-amber-border);
  color: var(--si-amber-dark);
  font-size: .72rem;
  font-weight: 600;
}
.offer-tag-done {
  background: var(--si-green-bg);
  border-color: var(--si-green-border);
  color: var(--si-green-dark);
}

/* Card headings: title + supporting line on the left, actions right. */
.offers-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.offers-head h2,
.offers-head h3 { margin: 0 0 .25rem; }
.offers-head p { margin: 0; }
.offers-head-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* The old toolbar used space-between with a 420px search box, which
   squeezed the status select down to a sliver of its own label. */
.offers-filters {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.offers-filters input[type="search"] {
  flex: 1 1 18rem;
  min-width: 0;
}
.offers-filters select {
  flex: 0 0 auto;
  width: auto;
  min-width: 11rem;
}

.offer-card-title { margin: 0 0 .8rem; }

.offer-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .6rem;
}

.offer-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
.offer-editor-head-main {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.offer-editor-meta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: .8rem;
  align-items: end;
}
.offer-editor-meta .offer-meta-title { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .offer-editor-meta { grid-template-columns: minmax(0, 2fr) 10rem 12rem; }
  .offer-editor-meta .offer-meta-title { grid-column: auto; }
}

.offer-checkbox {
  display: flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.offer-checkbox input { width: auto; }

.offer-section-block {
  margin-top: 1rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* One separator per row and nothing else. The global `th, td` rule puts
   a border under every cell, which on a row whose cells differ in
   height reads as several unaligned lines. */
.offer-items-table td { border-bottom: 0; }
.offer-items-table tbody tr + tr td { border-top: 1px solid var(--border); }
.offer-items-table td { padding-top: .8rem; padding-bottom: .8rem; }
.offer-items-table tfoot td {
  border-top: 2px solid var(--border);
  font-weight: 600;
}
.offer-items-table thead th { border-bottom: 1px solid var(--border); }

.offer-section-head-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.offer-section-head-row .offer-section-title {
  font-weight: 600;
}

.offer-name-cell { min-width: 16rem; }

.offer-items-table textarea {
  margin-top: .35rem;
  min-height: 2.4rem;
  resize: vertical;
}

.offer-desc-toggle {
  margin-top: .2rem;
  font-size: .8rem;
}

/* The flex container is an inner div, never the <td> itself: a table
   cell with display:flex drops out of table layout, stops stretching to
   the row height and draws its bottom border at its own content height
   — which is where the ragged half-width lines between item rows came
   from. */
/* One line, always. The range toggle used to wrap onto a second row,
   which read as an unrelated control floating under the field. */
.offer-range {
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  flex-wrap: nowrap;
}
/* Both the hours and the price pair use the same field width — the two
   columns sit next to each other and different widths read as an
   accident. */
.offer-hours-cell .offer-range input { width: 4rem; }
.offer-price-cell .offer-range input { width: 5rem; }

/* Price fields keep type="number" (numeric keypad on mobile, numeric
   parsing) but lose the browser's spinner arrows. Stepping a price by a
   fixed amount is meaningless, and the arrows ate a third of a field
   that is only 5rem wide. Hours keep theirs — half-hour steps are
   exactly what the arrows are good for. */
input.no-spinner {
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
}
input.no-spinner::-webkit-outer-spin-button,
input.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* The figure and its unit never break apart; only the toggle wraps. */
.offer-range-fields {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.offer-range-dash { color: var(--muted); }
.offer-range-unit { color: var(--muted); font-size: .85rem; }
/* Sits immediately after the unit, tight to the field group it belongs
   to. NOT overlaid inside the input: that is where the browser draws
   its own number spinners, which have to stay clickable. */
.offer-range-toggle {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border-radius: 6px;
  font-size: .8rem;
  line-height: 1;
  color: var(--muted);
}
.offer-range-toggle:hover {
  background: var(--si-blue-bg);
  color: var(--primary);
}

.offer-hours-col { width: 12rem; }
.offer-price-col { width: 15rem; }
.offer-hours-cell,
.offer-price-cell { vertical-align: top; }

.offer-editor-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

/* The editor runs several screens long, so the primary actions follow
   the viewport instead of sitting a scroll away from the row being
   edited. */
.offer-editor-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: .8rem;
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  box-shadow: 0 -6px 18px rgba(15, 23, 42, .08);
}

.offer-totals-table {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  border-collapse: collapse;
}
.offer-totals-table td {
  padding: .35rem .5rem;
  border-top: 1px solid var(--border);
}
.offer-totals-table .num { text-align: right; }

.offer-link-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.offer-link-row input {
  flex: 1 1 22rem;
  font-size: .85rem;
}

.offer-convert-card {
  padding: 1rem;
  border: 1px solid var(--si-green-border);
  border-radius: 12px;
  background: var(--si-green-bg);
}
.offer-convert-card h3 { margin-top: 0; }

/* --- Profil: firemní údaje + DPH ---------------------------------
   Laid out as three bands (ARES lookup, identity, VAT) instead of one
   wide four-column row: the old grid stretched DIČ across a third of
   the screen and left the VAT fieldset as a large empty box. */

.company-ares {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  max-width: 640px;
  margin-bottom: .9rem;
}
.company-ares label { flex: 1 1 auto; }
.company-ares button { white-space: nowrap; }

#company-ares-results-wrap {
  display: block;
  max-width: 640px;
  margin-bottom: .9rem;
}

/* Name and address earn a full row; the two short identifiers share
   one, so neither is stretched to a third of the card. */
.company-identity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem 1rem;
  max-width: 640px;
}
.company-identity .company-span { grid-column: 1 / -1; }

.company-vat,
.company-tax {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* The seat, asked for in the parts the tax return needs. Three columns
   because ulice / č. p. / č. or. and obec / PSČ / stát each read as one
   line of an address. */
.company-address-grid,
.company-tax-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem 1rem;
  max-width: 640px;
  /* Several of these carry a hint underneath; without this the inputs in
     one row sit at whatever height the tallest cell dictates. */
  align-items: start;
}
.company-address-grid > label,
.company-tax-grid > label {
  grid-auto-rows: min-content;
}
.company-address-grid .company-span,
.company-tax-grid .company-span {
  grid-column: 1 / -1;
}
.company-tax-grid { margin-top: .6rem; }
/* "Sídlo" introduces the address grid straight after the identity one.
   Without this the two blocks read as a single run of fields. */
.company-identity + .company-field-label { margin-top: 1.1rem; }

/* Jméno / Příjmení / Titul sit on one row of the identity grid rather
   than pairing off with IČO and DIČ. */
.company-name-parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem 1rem;
  align-items: start;
}
.company-name-parts > label { grid-auto-rows: min-content; }

/* Where "doplňte v Firemní údaje a DPH" lands. Long enough to notice
   after a smooth scroll, short enough not to nag. */
.profile-card.is-flagged {
  animation: card-flag 2s ease-out;
}
@keyframes card-flag {
  0%, 60% { box-shadow: 0 0 0 3px var(--si-amber); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-card.is-flagged { animation: none; box-shadow: 0 0 0 3px var(--si-amber); }
}

.company-field-label {
  margin: 0 0 .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}

/* Two mutually exclusive answers read better as one control than as a
   stack of radios in a box. */
.segmented {
  display: inline-flex;
  padding: .2rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
  gap: .2rem;
}

.segmented-option {
  display: inline-flex;
  margin: 0;
}
.segmented-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.segmented-option span {
  display: inline-block;
  padding: .4rem .9rem;
  border-radius: 8px;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--muted);
}
.segmented-option input:checked + span {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.segmented-option input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.company-vat-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding-left: .9rem;
  border-left: 3px solid var(--si-blue-border);
}

.company-rate-input {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.company-rate-input input { width: 5.5rem; }
.company-rate-unit { color: var(--muted); }

@media (max-width: 720px) {
  .offer-editor-meta { grid-template-columns: 1fr; }
  .offer-hours-cell .offer-range input { width: 3.4rem; }
  .offer-price-cell .offer-range input { width: 4.2rem; }
}

/* Template item editor, inside the side panel. Stacked rows rather
   than a table: the panel is ~500px wide and six numeric columns there
   are unreadable. */
.offer-tpl-heading {
  margin: .4rem 0 0;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.offer-tpl-items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
}

.offer-tpl-item {
  display: grid;
  gap: .4rem;
  padding: .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.offer-tpl-item-head {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.offer-tpl-item-head .tpl-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.offer-tpl-item-head .offer-row-btn { flex: 0 0 auto; }

.offer-tpl-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem .6rem;
}

.offer-tpl-item-grid label {
  display: grid;
  gap: .15rem;
  font-size: .8rem;
  color: var(--muted);
}

.offer-tpl-item-grid input { width: 100%; }

/* Every form in the offers panel is single-column. The side panel is
   520px wide and a two-up grid there gives two cramped fields instead
   of one comfortable one; a single column is also faster to fill in,
   because the eye follows one track top to bottom. */
#offer-form-panel .offer-form-grid,
#offer-catalog-panel .offer-form-grid {
  grid-template-columns: 1fr;
}

/* Zájemce preview in the side panel. The clients panel has its own
   detail view, but it reads the clients cache — which a lead is not in
   — so the pipeline brings its own. */
.offer-lead-detail h4 {
  margin: 0 0 .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.offer-lead-detail h5 {
  margin: 1.2rem 0 .5rem;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.offer-lead-facts {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.offer-lead-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}

.offer-lead-facts dt {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
}

.offer-lead-facts dd {
  margin: 0;
  text-align: right;
  word-break: break-word;
}

.offer-lead-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-lead-list li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--border);
}

.offer-lead-list li strong { display: block; }
.offer-lead-list li .small { color: var(--muted); }

/* Two entry points into the side panel instead of two lists printed
   into the page — the catalog grows without bound and pushed everything
   below it off the screen. */
.offer-library-buttons {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.offer-library-count {
  margin-left: .45rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  background: var(--si-blue-bg);
  color: var(--si-blue-dark);
  font-size: .78rem;
  font-weight: 600;
}

.offer-library-toolbar {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.offer-library-toolbar .offer-library-search { flex: 1 1 auto; min-width: 0; }
.offer-library-toolbar button { white-space: nowrap; }

.offer-library-form {
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfcfe;
}
.offer-library-form h4 { margin: 0; }

.offer-library-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.offer-library-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
}

/* Name over the figure, so a long item name can wrap without pushing
   the options menu off the panel. */
.offer-library-row {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

/* --- Editor: rychlé vkládání položek + odvozené ceny -------------- */

.offer-price-derived {
  display: block;
  font-weight: 600;
}

.offer-quick-add {
  position: relative;
  margin-top: .6rem;
}
.offer-quick-input { width: 100%; }

.offer-suggest-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

/* `background: none` alone was not enough — the app's base button rule
   also sets a white colour, so the suggestion text was white on white. */
.offer-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: #111827;
  font-size: .92rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.offer-suggest-item .small { color: var(--muted); }
.offer-suggest-item:hover,
.offer-suggest-item:focus-visible,
.offer-suggest-item.is-active {
  background: var(--si-blue-bg);
}

/* The mode switch is the same segmented control as the profile's VAT
   toggle — two mutually exclusive answers, one control. */
.offer-mode-switch { margin-bottom: .4rem; }

.offer-new-form .offer-form-grid { align-items: end; }

@media (max-width: 720px) {
  .company-identity,
  .company-address-grid,
  .company-tax-grid,
  .company-name-parts { grid-template-columns: 1fr; }
  .company-ares { flex-direction: column; align-items: stretch; }
  .segmented { display: flex; }
}

/* --- Editor: pořadí položek a pevné ceny -------------------------- */

.offer-drag-col { width: 2.2rem; }

.offer-drag-cell {
  padding-right: 0 !important;
  vertical-align: middle;
}

/* Six dots, the conventional "grab me" affordance. Only the handle is
   draggable — a permanently draggable row swallows text selection
   inside its own inputs. */
.offer-drag-handle {
  display: block;
  width: 1.1rem;
  height: 1.4rem;
  cursor: grab;
  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
  background-size: 5px 5px;
  background-position: 1px 3px;
  background-repeat: repeat;
  color: #b6bdc9;
}
.offer-drag-handle:hover { color: var(--primary); }
.offer-drag-handle:active { cursor: grabbing; }

.offer-item-row.is-dragging { opacity: .45; }

/* Lives off-screen just long enough for the browser to snapshot it as
   the drag image. Shared by the offer editor and the to-do lists. */
.drag-ghost {
  position: fixed;
  top: -1000px;
  left: -1000px;
  max-width: 22rem;
  padding: .45rem .8rem;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Insert marker: a line on the edge the row would land against. */
.offer-item-row.drop-before td { box-shadow: inset 0 2px 0 0 var(--primary); }
.offer-item-row.drop-after td { box-shadow: inset 0 -2px 0 0 var(--primary); }

.offer-row-actions { white-space: nowrap; }

.offer-row-btn {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}
.offer-row-btn:hover {
  background: var(--si-blue-bg);
  border-color: var(--primary);
  color: var(--primary);
}
.offer-row-btn-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
  color: #dc2626;
}

/* Buttons rather than drag-and-drop: each row holds several inputs, and
   a drag surface over them fights with selecting text inside a field. */
.offer-move-btn {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
/* The background has to be restated here. The generic `button:hover`
   sets var(--primary-hover) at specificity (0,1,1); these rules only
   beat it on the properties they actually name, so leaving `background`
   out let every one of these small square buttons turn solid dark blue
   on hover with a grey glyph sitting on it. Same trap the .link-button
   rules above already document. */
.offer-move-btn:hover:not(:disabled) {
  background: var(--si-blue-bg);
  border-color: var(--primary);
  color: var(--primary);
}
.offer-move-btn:disabled {
  opacity: .35;
  cursor: default;
}

/* A fixed-price row has no hours, so the cell shows a muted dash where
   the inputs would be instead of leaving a hole in the column. */
.offer-hours-na {
  color: var(--muted);
}

.offer-section-head-row .offer-section-title {
  flex: 1 1 auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Přiznání k DPH
   ------------------------------------------------------------------ */

/* A sub-panel is one grid child of .tab-panel, so the gap that panel
   provides applies to the wrapper, not to the cards inside it — which is
   why the DPH cards sat flush against each other. Reporting has the same
   shape and gets the same rule, even though it currently holds one card
   per sub-panel and looks unaffected. */
.vat-sub-panel,
.reporting-sub-panel {
  display: grid;
  gap: 1rem;
}
/* Same pill row as Reporting's sub-tabs — listed separately rather than
   merged into that selector so a change to one section can't silently
   restyle the other. */
.vat-sub-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .55rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: .3rem;
}
.vat-sub-tab {
  background: transparent;
  color: #334155;
  min-height: 40px;
  border-radius: 10px;
  padding: .48rem .9rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
}
.vat-sub-tab:hover {
  background: #e2e8f0;
  color: #334155;
}
.vat-sub-tab.active,
.vat-sub-tab.active:hover {
  background: #dbeafe;
  color: #1e3a8a;
  box-shadow: none;
}

.vat-period-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
}
.vat-period-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Every money column in this module is right-aligned and tabular: the
   whole point of the summary is comparing korunas down a column. */
.tab-panel[data-panel="vat"] th.num,
.tab-panel[data-panel="vat"] td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A form line with nothing on it still gets a row — the four lines of
   section C are a fixed checklist, and a missing one reads as "did I
   forget something?" rather than "there was nothing". */
.vat-line-empty {
  color: var(--muted);
}

.vat-summary-table tfoot td {
  border-top: 2px solid var(--border);
  padding-top: .6rem;
}

.vat-export-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.vat-setup-warning {
  border-left: 4px solid var(--si-amber);
  background: var(--si-amber-bg);
}

.vat-status-warn {
  color: var(--si-danger);
  font-weight: 600;
}

.vat-row-btn {
  padding: .3rem .55rem;
  min-height: 32px;
}

/* --- Termíny ---------------------------------------------------------
   Naléhavost nese barva, ne pořadí v seznamu: web tři měsíce po termínu
   a web splatný za rok byly do téhle chvíle vizuálně tentýž řádek.
   Odstíny jdou přes proměnné, protože stejné třídy sedí jednou na <li>
   v seznamu termínů a podruhé na <tr> v tabulce údržby — a <tr> se
   rámečkem ani zaoblením obarvit nedá. */
.deadline-row-overdue { --deadline-tint: #fff5f5; --deadline-edge: var(--si-danger); }
.deadline-row-today   { --deadline-tint: var(--si-amber-bg); --deadline-edge: var(--si-amber); }
.deadline-row-soon    { --deadline-tint: var(--si-blue-bg); --deadline-edge: var(--si-blue); }
.deadline-row-later   { --deadline-tint: #fff; --deadline-edge: var(--border); }

/* Tabulka údržby: <tr> se rámečkem ani zaoblením obarvit nedá, takže
   tint jde na buňky a levá hrana je inset stín první z nich. */
tr.deadline-row-overdue > td,
tr.deadline-row-today > td { background: var(--deadline-tint); }
tr.deadline-row-overdue > td:first-child,
tr.deadline-row-today > td:first-child { box-shadow: inset 3px 0 0 var(--deadline-edge); }

/* Filtry termínů jedou na .filters-grid; zaškrtávátko v ní ale nesmí
   zabrat celý sloupec jako <select>, patří na spodní hranu k nim. */
.deadline-filters .checkbox-item { align-self: end; padding-bottom: .55rem; }

.deadlines { display: grid; gap: .9rem; }

.deadline-group { display: grid; gap: .4rem; }

.deadline-group-head {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .45rem;
}

.deadline-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #1f2937;
  font-size: .72rem;
}

.deadline-group-overdue .deadline-group-count { background: var(--si-danger-soft); color: var(--si-danger); }

.deadline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }

.deadline-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .65rem;
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--deadline-edge, var(--border));
  border-radius: 12px;
  background: var(--deadline-tint, #fff);
}

.deadline-row-done { opacity: .55; }
.deadline-row-done .deadline-title { text-decoration: line-through; }

.deadline-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--border);
  color: var(--muted);
}

.deadline-main { display: grid; min-width: 0; justify-items: start; }
.deadline-title { font-weight: 600; overflow-wrap: anywhere; text-align: left; }

/* Název termínu je proklik. Vzhled odkazu obstará .link-button —
   včetně toho, že po sobě musí zopakovat background, protože globální
   `button:hover` je specifičtější a jinak se z odkazu při najetí stane
   modrý blok. Tady zbývá jen to, čím se název liší: zděděné inline-flex
   by dlouhý název roztáhlo místo zalomení. */
.deadline-title-link { display: inline-block; }

.deadline-row-done .deadline-title-link { color: var(--muted); }
.deadline-subtitle { margin-top: .1rem; }

.deadline-when { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.deadline-when-overdue { color: var(--si-danger); }
.deadline-when-today { color: var(--si-amber-dark); }
.deadline-when-soon { color: var(--si-blue-dark); }
.deadline-when-later { color: var(--muted); }

.deadline-actions { display: flex; gap: .35rem; align-items: center; }
.deadline-action { padding: .34rem .6rem; font-size: .82rem; }
.deadline-empty, .deadline-more { margin: 0; }

.reminder-row-inactive { opacity: .6; }

.calendar-feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .5rem;
  align-items: center;
}
.calendar-feed input { min-width: 0; }

/* Odznak s počtem termínů, které vyžadují pozornost. Ve sbaleném menu
   se z něj stává tečka v rohu ikony — jinak by ho schovalo pravidlo,
   které v tom režimu skrývá všechny <span> v tlačítku, a signál by
   zmizel právě tam, kde na něj není jiné místo. */
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-left: auto;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--si-danger);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}

.tab-btn.active .tab-badge { background: #fff; color: var(--si-danger); }

.sidebar.collapsed .tab-btn { position: relative; }

.sidebar.collapsed .tab-btn .tab-badge {
  display: inline-flex;
  position: absolute;
  top: .18rem;
  right: .18rem;
  min-width: .95rem;
  height: .95rem;
  padding: 0 .18rem;
  margin-left: 0;
  font-size: .62rem;
}

.sidebar.collapsed:hover .tab-btn .tab-badge {
  /* Musí zopakovat display: pravidlo, které při rozbalení vrací
     ostatní <span> na `inline`, je specifičtější než základní styl
     odznaku a jinak by ho zploštilo. */
  display: inline-flex;
  position: static;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  margin-left: auto;
  font-size: .72rem;
}

@media (max-width: 640px) {
  .deadline-row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: .4rem;
  }
  .deadline-when, .deadline-actions { grid-column: 2; justify-self: start; }
  .calendar-feed { grid-template-columns: 1fr; }
}