/* === Unified Site Header (shared across all pages) === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
/* Párování: rozdělení indikátoru a textu + box vpravo */
#zakladni-udaje .grid-2pairs #clientPairDot { text-align: left; }
#zakladni-udaje .grid-2pairs #clientPairStatus { text-align: left; }
#zakladni-udaje .grid-2pairs #clientPairStatus .status-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
#zakladni-udaje .grid-2pairs #pairedFirmBox { grid-column: 3 / span 2; justify-self: start; text-align: left; width: 100%; margin: 0 0 6px 0; }
.paired-firm-box { display:flex; align-items:center; gap:10px; margin:4px 0 10px 0; }
.paired-firm-box .name { font-weight:700; line-height:1.2; }
.paired-firm-box .muted { font-size:12px; color:#374151; }
.site-header .header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
}  
.site-header .brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-header .brand .logo { height: 120px; }
.site-nav { margin-left: 16px; display: flex; gap: 14px; align-items: center; }
.site-nav .nav-links { display: flex; gap: 14px; align-items: center; }
.site-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  color: #111827;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent;
  transition: .15s background-color ease, .15s border-color ease;
}
.site-nav .nav-link:hover { background: #f3f4f6; border-color: #e5e7eb; }
.site-nav .nav-link.active { background: #e8f0ff; border-color: #cfe0ff; }
.site-nav .nav-link img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 0.85;
}
.site-nav .nav-link:hover img {
  opacity: 1;
}
@media (max-width: 768px) {
  .site-header .header-inner { padding: 8px 12px; align-items: stretch; flex-direction: column; gap: 8px; }
  .site-header .brand .logo { height: 44px; }
  /* Collapse main nav by default on small screens */
  .site-nav { display: none; flex-direction: column; gap: 10px; width: 100%; margin-left: 0; }
  .site-header.open .site-nav { display: flex; }
  .site-nav .nav-links { flex-direction: column; gap: 8px; width: 100%; }
  .site-nav .nav-link { padding: 10px 12px; gap: 6px; font-size: 1em; display:block; width:100%; border:1px solid #e5e7eb; background:#fff; border-radius:8px; }
  .site-nav .nav-link img { width: 16px; height: 16px; }
  /* Make the toggle span full width */
  .menu-toggle { width: 100%; justify-content: flex-start; }
  /* Hide icons in mobile nav for simpler look */
  .site-nav svg, .site-nav .nav-link svg, .site-nav .menu-title svg { display: none !important; }
  /* Indent submenu items */
  .site-nav .dropdown-menu a { padding-left: 16px; }
  /* Dropdowns inline under their parent; expand when menu is open */
  .site-nav .menu-wrapper { margin-left: 0 !important; width: 100%; }
  .site-nav .menu-wrapper .dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    padding: 0;                 /* no padding when collapsed */
    margin-top: 0;
    border: 0;                  /* hide border when collapsed */
    border-radius: 8px;
    background: #fff;
    display: block;             /* participate in layout */
    overflow: hidden;           /* animate height */
    max-height: 0;              /* collapsed by default */
    transition: max-height .25s ease, padding .2s ease;
  }
  /* Only expand submenu when its own parent is open */
  /* And keep toggle support when tapping the section title */
  .site-nav .menu-item.open > .dropdown-menu {
    max-height: 800px;
    padding: 6px 8px;           /* add back padding when open */
    border: 1px solid #e5e7eb;  /* add back border when open */
  }
  /* Indentation for nested submenu levels */
  .site-nav .dropdown-menu a { padding-left: 16px; }
  .site-nav .dropdown-menu .dropdown-menu a { padding-left: 24px; }
  /* Place user box inside the expanded menu as a stacked block */
  .site-nav .user-box { margin: 0 !important; width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
  .site-nav .user-box .user-chip,
  .site-nav .user-box .logout-link { width: 100%; text-align: center; }
}
/* Menu */
.menu-wrapper {
  position: relative;
}
.menu-bar {
  display: flex;
  background-color: #e6f0fa;
  border-radius: 8px;
  padding: 8px 12px;
}
.menu-item {
  position: relative;
}
.menu-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background-color: #b3cce6;
}
.menu-title {
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
  font-weight: 600;
  padding: 8px 16px;
  transition: background-color 0.3s ease;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 80%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px;
  border-radius: 8px;
  text-align: left;
  width: min(320px, 90vw);
  z-index: 1100; /* above sticky header on iOS */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Ensure JS toggle works on touch devices regardless of @media conditions */
.menu-item.open > .dropdown-menu { display: block; }
@media (hover: hover) and (pointer: fine) {
  .menu-item:hover .menu-title {
    background-color: #99c2ff;
    border-radius: 6px;
  }
  .menu-item:hover .dropdown-menu {
    display: block;
  }
}
/* Safari workaround: sometimes :hover stays "stuck" after click.
   JS toggles body.menu-force-close briefly to ensure dropdowns close. */
body.menu-force-close .menu-item:hover .dropdown-menu { display: none !important; }
body.menu-force-close .menu-item:hover .menu-title { background-color: transparent !important; }
.dropdown-menu a {
  display: block;
  padding: 8px 12px;
  color: #374151;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.dropdown-menu a:hover {
  background-color: #f3f4f6;
}

/* Small unread counter next to top-level menu items */
.menu-badge {
  display: none;
  margin-left: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  background: #eef2ff;
  color: #1e3a8a;
  border: 1px solid #c7d2fe;
}
.menu-badge.is-visible { display: inline-block; }
/* User chip + logout in menu */
.user-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px; border-radius: 999px;
  background: #eef2ff; color:#1e3a8a; text-decoration:none;
  border: 1px solid #c7d2fe; font-weight:600;
  line-height: 1.2; -webkit-font-smoothing: antialiased;
  white-space: nowrap;       /* Zabrání zalomení textu */
}
.user-chip:hover { background:#e0e7ff; }
.logout-link {
  display:inline-block; padding:6px 12px; border-radius:8px;
  background:#fee2e2; color:#991b1b; text-decoration:none; border:1px solid #fecaca;
}
.logout-link:hover { background:#fecaca; }

/* Unpair cross buttons (Ă—) next to paired items */
.linklike.unpair-btn,
.linklike.unpair2-btn {
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:1px solid #ef4444;
      background:#fee2e2;
      color:#b91c1c;
      border-radius:9999px;
      padding:4px 12px;
      font-size:.65em;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:.02em;
      cursor:pointer;
      user-select:none;
  white-space: nowrap;
      box-shadow:0 2px 6px rgba(239,68,68,.25);
      transition:box-shadow .15s ease, transform .15s ease;
}
.linklike.unpair-btn:hover,
.linklike.unpair2-btn:hover {
      box-shadow:0 4px 12px rgba(239,68,68,.4);
}
.linklike.unpair-btn:focus,
.linklike.unpair2-btn:focus {
  outline: 2px solid rgba(59, 130, 246, 0.65); /* blue focus */
  outline-offset: 1px;
}
.linklike.unpair-btn:active,
.linklike.unpair2-btn:active {
  transform: scale(0.96);
}
.paired-company-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
}

/* Tento box se v modalu renderuje zároveň jako .paired-firm-box.
   .paired-firm-box historicky centruje obsah, což rozbije zarovnání textu/akcí. */
.paired-company-block.paired-firm-box {
  align-items: stretch;
}
.paired-company-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.paired-company-head .paired-company-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  color: #111827;
}
.paired-company-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  flex: 0 0 auto;
}
.paired-company-address {
  font-weight: 500;
  color: #374151;
  display: block;
  overflow-wrap: anywhere;
}
.clients-pairing-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.clients-pairing-row {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-top-width: 0;
  background: #ffffff;
}
.clients-pairing-list > .clients-pairing-row:first-child,
.clients-pairing-list > .paired-company-list:first-child > .clients-pairing-row:first-child {
  border-top-width: 1px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.clients-pairing-list > .clients-pairing-row:last-child,
.clients-pairing-list > .paired-company-list:last-child > .clients-pairing-row:last-child,
.clients-pairing-input-row:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.clients-pairing-list > .clients-pairing-row:nth-child(even),
.clients-pairing-list > .paired-company-list:nth-child(even) > .clients-pairing-row,
.clients-pairing-list > .paired-company-list:nth-child(odd) > .clients-pairing-row:nth-child(even) {
  background: #f8fafc;
}
.clients-pairing-list > .clients-pairing-row:nth-child(odd),
.clients-pairing-list > .paired-company-list:nth-child(odd) > .clients-pairing-row:nth-child(odd),
.clients-pairing-list > .paired-company-list:nth-child(even) > .clients-pairing-row {
  background: #ffffff;
}
.paired-company-list {
  display: flex;
  flex-direction: column;
}
.clients-pairing-input-row {
  margin-top: 0;
}
.clients-pairing-input-row .pair2-input {
  flex: 1 1 320px;
}
.clients-pairing-input-row .btn.btn-small {
  min-height: 32px;
}
@media (max-width: 900px) {
  .clients-pairing-input-row > div {
    flex-direction: column;
    align-items: stretch !important;
  }
  .clients-pairing-input-row .pair2-input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .clients-pairing-input-row .btn.btn-small {
    width: 100%;
  }
}
.client-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pair-status-indicator {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0 !important;
  line-height: 1;
  text-align: center;
  color: transparent;
  overflow: hidden;
  --pair-indicator-icon-size: 0.75rem;
}
.pair-status-indicator::after {
  content: '?';
  font-size: var(--pair-indicator-icon-size, 0.75rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pair-status-indicator--paired {
  background: #16a34a;
  box-shadow: 0 0 0 1px #15803d inset;
}
.pair-status-indicator--unpaired {
  background: #dc2626;
  box-shadow: 0 0 0 1px #b91c1c inset;
}
.pair-status-indicator--paired::after {
  content: '\2713';
}
.pair-status-indicator--unpaired::after {
  content: '!';
}
.pair-legend .pair-status-indicator {
  width: 16px;
  height: 16px;
  --pair-indicator-icon-size: 0.55rem;
}
/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* === Unified Form Layout (clients/firm edit) === */
.filter-form {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.filter-form fieldset {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px 18px;
}
.form-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  color: #334155;
}
.form-control {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  font-family: inherit;
  font-size: 1rem;
  color: #111827;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  outline: 2px solid rgba(59,130,246,.35);
  outline-offset: 1px;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.filter-form legend {
  padding: 0 6px;
  font-weight: 700;
  color: #1f2937; /* slate-800 */
}
.filter-form label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-weight: 600;
  color: #334155; /* slate-700 */
}
.filter-form label > input,
.filter-form label > textarea,
.filter-form label > select {
  width: 100%;
  max-width: 100%;
}
/* allow full-row span inside grid containers */
.filter-form .fld--span2 { grid-column: 1 / -1; }

/* Desktop layout for month filter forms (Ukoly/VPD) */
@media (min-width: 901px) {
  /* Desktop: 3 páry (label + vstup) na řádek pomocí CSS Grid */
  #monthForm {
    display: grid !important;
    /* JednotnĂ˝ UX: label nad polem, vĂ­ce filtrĹŻ vedle sebe */
    grid-template-columns: repeat(3, minmax(220px, 320px));
    align-items: start !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
    justify-content: center !important;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }
  #monthForm label { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; margin:0; font-weight:600; text-align:center; }
  /* Inputs vyplní šířku filtru */
  #monthForm select,
  #monthForm input[type="text"],
  #monthForm input[type="number"],
  #monthForm input[type="search"] { width:100%; min-width:0; max-width:320px; }
  /* Akce (např. Zrušit filtr) dej na vlastní řádek */
  #monthForm a.btn { grid-column: 1 / -1; justify-self: center; }
  /* Checkbox a tlačítka zarovnej na střed řádku */
  #monthForm input[type="checkbox"],
  #monthForm .edit-btn,
  #monthForm button { justify-self: start; align-self: center; }
  /* PomocnĂ˝ zalomovacĂ­ prvek neukazuj na desktopu */
  #monthForm .force-break { display: none !important; grid-column: 1 / -1; height: 0; }
  /* Allow optional forced wrap after time filters when form has .mf-break */
  #monthForm.mf-break .force-break { display:block !important; grid-column:1 / -1; width:0; height:0; padding:0; margin:0; border:0; }
  /* Center the second row group on VPD (7 cols total, 5 used) */
  #monthForm.mf-break .force-break + label { grid-column: 2; }
}
/* Default: do not render the helper break element */
#monthForm .force-break { display: none; }
/* Override: two-row layout for tasks page */
@media (min-width: 901px) {
  #monthForm.mf-one-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(170px, 240px)) auto;
    align-items: start !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    justify-content: center !important;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }

  #monthForm.mf-one-row label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    text-align: center;
  }

  #monthForm.mf-one-row select,
  #monthForm.mf-one-row input[type="text"],
  #monthForm.mf-one-row input[type="number"],
  #monthForm.mf-one-row input[type="search"] {
    width: 100%;
    min-width: 0;
    max-width: 240px;
  }

  /* Keep reset action in the same row as filters for dochazka */
  #monthForm.mf-one-row a.btn {
    grid-column: auto;
    justify-self: start;
    align-self: end;
    margin-bottom: 1px;
  }

  #monthForm.mf-one-row .force-break {
    display: none !important;
  }

  #monthForm.mf-two-rows {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(220px, 320px));
    align-items: start !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
    justify-content: center !important;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }
  #monthForm.mf-three-rows {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(220px, 320px));
    align-items: start !important;
    column-gap: 16px !important;
    row-gap: 10px !important;
    justify-content: center !important;
  }
  #monthForm.mf-two-rows label,
  #monthForm.mf-three-rows label { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; margin:0; font-weight:600; text-align:center; }
  #monthForm.mf-two-rows select,
  #monthForm.mf-two-rows input[type="text"],
  #monthForm.mf-two-rows input[type="number"],
  #monthForm.mf-two-rows input[type="search"],
  #monthForm.mf-three-rows select,
  #monthForm.mf-three-rows input[type="text"],
  #monthForm.mf-three-rows input[type="number"],
  #monthForm.mf-three-rows input[type="search"] { width:100%; min-width:0; max-width:320px; }
  #monthForm.mf-two-rows input[type="checkbox"],
  #monthForm.mf-two-rows .edit-btn,
  #monthForm.mf-two-rows button { justify-self: start; align-self: center; }
  #monthForm.mf-two-rows a.btn,
  #monthForm.mf-three-rows a.btn { grid-column: 1 / -1; justify-self: center; }
  #monthForm.mf-two-rows .force-break { display:block !important; grid-column:1 / -1; width:0; height:0; padding:0; margin:0; border:0; }
}

/* VPD: keep worker on the same row on large screens */
@media (min-width: 901px) {
  #monthForm.mf-vpd-one-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(170px, 240px));
    align-items: start !important;
    column-gap: 14px !important;
    row-gap: 10px !important;
    justify-content: center !important;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }
  #monthForm.mf-vpd-one-row label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    text-align: center;
  }
}
/* Rows inside fieldsets (the wrappers around groups of labels) */
.filter-form fieldset > div {
  display: grid !important; /* override older inline flex */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 16px;
  align-items: start;
}
/* Consistent inputs */
.filter-form input[type="text"],
.filter-form input[type="email"],
.filter-form input[type="number"],
.filter-form input[type="url"],
.filter-form textarea,
.filter-form select {
  display: block;
  padding: 10px 12px;
  min-height: 40px;
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.filter-form input:focus,
.filter-form textarea:focus,
.filter-form select:focus {
  outline: 2px solid rgba(59,130,246,0.4); /* blue focus */
  outline-offset: 1px;
  border-color: #93c5fd; /* blue-300 */
}
/* Actions row */
.filter-form .actions,
.filter-form > .actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
/* Responsive tightening on small screens */
@media (max-width: 640px) {
  .filter-form fieldset { padding: 12px; }
  .filter-form legend { font-size: 1.05rem; }
}

/* Responsive layout rules for firm edit forms
   - Desktop: FakturaÄŤnĂ­ Ăşdaje (1. fieldset) stacked; Kontakty (2. fieldset) side-by-side
   - Mobile: everything stacked (handled by base grid auto-fit + narrow width) */
@media (max-width: 900px) {
  .filter-form fieldset > div { grid-template-columns: 1fr; }
}
@media (min-width: 901px) {
  /* First fieldset (FakturaÄŤnĂ­ Ăşdaje): two columns, specific rows spanned full width */
  .filter-form fieldset:nth-of-type(1) > div { grid-template-columns: repeat(2, minmax(260px, 1fr)) !important; }
  /* Second fieldset (Kontakty): all fields side-by-side, centered */
  .filter-form fieldset:nth-of-type(2) > div {
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    justify-content: center;
    align-items: start; /* keep inputs aligned from top for consistent row */
  }
  /* Ensure consistent spacing between caption and input so they align */
  .filter-form fieldset:nth-of-type(2) label > input,
  .filter-form fieldset:nth-of-type(2) label > select,
  .filter-form fieldset:nth-of-type(2) label > textarea { margin-top: 8px; }
}
.firm-modal-form {
  display: block;
  width: 100%;
  max-width: 100%;
}
.firm-modal-form fieldset {
    display: block;
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 1rem;
    border: 1px solid #ccc;
}
.firm-modal-form fieldset:first-of-type {
  margin-top: 16px;
}
.firm-modal-form fieldset:last-of-type {
  margin-bottom: 16px;
}
/* ========================================
   UNIFIED LAYOUT SYSTEM
   Single source of truth for all page layouts
   ======================================== */

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  color: #333;
  line-height: 1.4;
  font-size: 0.9em;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Main app container - flex column for header + content */
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: transparent !important;
}

/* Page content area - takes remaining space after header */
.page-content {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: transparent !important;
}

/* Full-width content (no padding) */
.page-content.full-width {
  padding: 0;
}

/* Legacy .wrap class - map to standard layout */
.wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Legacy .main-content class - map to standard layout */
.main-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Content-only pages sometimes render only <main class="main-content"> into an iframe.
   Give them the same outer padding as shell pages, but only when main-content is
   a direct child of body (so we don't double-pad inside .page-content). */
body > .main-content {
  padding: 20px;
  box-sizing: border-box;
}
.page-content .main-content {
  padding: 0;
}

/* Consistent content padding
   - Shell/SPA pages already have padding on `.page-content`
   - Content-only/iframe pages often render only `.wrap.main-content`
   To keep headings and first blocks consistently offset from the top, we add
   padding to `.wrap.main-content` and disable it when nested in `.page-content`. */
.wrap.main-content {
  padding: 20px;
  box-sizing: border-box;
}
.page-content .wrap.main-content {
  padding: 0;
}

/* Container for centered content with max-width */
.content-max-width {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Allow max-width centering without adding extra padding (useful when the outer wrapper already pads). */
.content-max-width.content-max-width--no-padding {
  padding: 0;
}

/* Grid for calendar-like pages */
.grid {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  position: relative;
  background: #fff;
}

@media (max-width: 768px) {
  .page-content {
    padding: 12px;
  }
  .wrap.main-content {
    padding: 12px;
  }
  .page-content .wrap.main-content {
    padding: 0;
  }
}

/* Global fieldset styling */
fieldset {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Calendar page uses fieldsets as simple containers */
body.calendar-page fieldset {
  display: block !important;
}
legend {
  font-size: 1.2em;
  font-weight: bold;
  color: #2c3e50;
  padding: 0 10px;
}
/* Form elements */
label {
    font-size: 1em;
    color: #34495e;
    margin-right: 2px;
    display: inline-block;
    text-align: left;
    min-width: 80px;
    font-weight: bold;
    margin-left: 2px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
input, select, button, input[type="submit"] {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1em;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
/* Restore native look for checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  width: auto;
  height: auto;
  padding: 0;           /* avoid padding from generic input rules */
  border: initial;      /* revert any custom border */
  box-shadow: none;     /* keep native rendering clean */
}
input[type="text"] {
  /* Keep consistent with the global input/select styling to avoid layout jumps */
  padding: 10px 15px;
  margin: 0;
  font-size: 1em;
  box-sizing: border-box;
}
/* Stylování selectu */
select {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1em;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  width: 200px; /* Pevná šířka pro konzistenci */
  max-width: 100%;
  transition: border-color 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* Změna barvy rámečku při focusu */
select:focus {
  border-color: #3498db;
  outline: none;
}
/* Stylování položek v rozbalené nabídce */
select option {
  padding: 8px; /* Funguje jen částečně, závisí na prohlížeči */
  font-size: 14px;
  color: #2c3e50; /* Tmavší barva textu */
  background-color: #fff; /* Bílé pozadí */
}
/* Střídavé barvy pro lepší čitelnost */
select option:nth-child(odd) {
  background-color: #f5f6fa; /* Světle šedá pro liché položky */
}
select option:nth-child(even) {
  background-color: #ffffff; /* Bílá pro sudé položky */
}
/* Barva při najetí myší (funguje v některých prohlížečích, např. Firefox) */
select option:hover {
  background-color: #e9ecef; /* Šedá při najetí */
  color: #000;
}
/* Styl pro vybranou poloĹľku */
select option:checked {
  background-color: #3498db; /* Modrá pro vybranou položku */
  color: #fff; /* BĂ­lĂ˝ text pro kontrast */
  font-weight: bold;
}
.search-input {
  flex-grow: 1;
  max-width: 800px; /* nebo 600px, podle toho, jak dlouhé pole potřebuješ */
  min-width: 250px; /* můžeš přidat, aby se na mobilu úplně nezmenšilo */
  min-height: 40px;
}
button, input[type="submit"] {
  background-color: var(--btn-positive-bg, #16a34a);
  color: var(--btn-positive-fg, #fff);
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  font-weight: 600;
}
button:hover, input[type="submit"]:hover {
  background-color: var(--btn-positive-bg-hover, #15803d);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
button:active, input[type="submit"]:active {
  background-color: var(--btn-positive-bg-active, #166534);
  transform: translateY(2px);
}
button:disabled, input[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}
img {
  padding: 5px 5px;
}
img:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    background-color: #D6D6D6;
}
img:active {
  transform: translateY(2px);
}
/* Form containers */
.filter-form, .search-form, .record-limit-form, .worker-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}
.firm-modal-form.filter-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 16px;
}
.filter-form label {
  display: block;
  text-align: left;
  margin-bottom: 6px;
  font-weight: 600;
}
.filter-form select {
  width: 200px;
}
.search-container {
  display: flex;
  gap: 10px;
  align-items: center;
}
.record-limit-form {
  gap: 8px;
}
.worker-inline {
  margin: 0 0 12px 50px;
  text-align: left;
  flex-direction: column;
  gap: 12px;
}
/* Table styling */
table {
  width: 100%;
  margin: 0 auto 24px;
  border-collapse: collapse;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}
th, td {
  padding: 6px 8px;
  text-align: center;
  border: 1px solid #e5e7eb;
  /* Prevent long tokens/URLs from forcing horizontal scroll */
  overflow-wrap: anywhere;
  word-break: break-word;
}
th {
  background-color: #f9d1d2;
  color: #374151;
  font-weight: 600;
}
td:nth-child(8) {
  text-align: left;
}
tr:nth-child(even) {
  background-color: #f9fafb;
}
tr:nth-child(odd) {
  background-color: #ffffff;
}
tr:hover {
  background-color: #ecf0f1;
}
table a {
  color: #374151;
  text-decoration: none;
}
table a:visited {
  color: #6b7280;
}
table a:hover {
  color: #ff6b6b;
}
table a:active {
  color: #e65b5b;
}

/* Admin lists: mobile tile layout */
@media (max-width: 720px) {
  /* Turn generic tables inside .table-wrap into card tiles */
  .table-wrap { background: transparent; box-shadow: none; border: 0; overflow: visible !important; }
  /* Remove desktop table constraints that cause overflow/gaps on phones */
  .table-wrap > table { background: transparent; box-shadow: none; border: 0; min-width: 0 !important; width: 100% !important; table-layout: auto !important; }
  .table-wrap > table thead { display: none; }
  .table-wrap > table tbody { display: block; }
  .table-wrap > table tbody tr {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 10px;        /* slightly tighter on mobile */
    margin: 10px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  /* VPD: E-maily správcům – Úseky ještě kompaktnější i v mobilním/tile layoutu */
  .table-wrap > table.vpd-table-useky tbody tr { padding: 4px 8px; margin: 6px 0; }

  .table-wrap > table tbody tr td {
    display: block;
    width: 100%;
    border: 0 !important;
    padding: 6px 0;
    text-align: left !important;
  }

  .table-wrap > table.vpd-table-useky tbody tr td { padding: 3px 0; line-height: 1.15; }
  /* Normalize nowrap cells so content wraps on small screens */
  .table-wrap > table .nowrap { white-space: normal !important; }
  /* Action column: stack buttons under each other, full width */
  .table-wrap > table tbody tr td:last-child {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    align-items: stretch;      /* stretch controls to the right edge */
  }
  .table-wrap > table tbody tr td:last-child .btn,
  .table-wrap > table tbody tr td:last-child button,
  .table-wrap > table tbody tr td:last-child a.button,
  .table-wrap > table tbody tr td:last-child input[type="submit"],
  .table-wrap > table tbody tr td:last-child input[type="button"] {
    display: block;
    width: 100%;              /* full width to the right edge */
    max-width: none;
    margin: 0;                /* flush left/right inside card */
  }
  /* Remove any decorative wrappers around buttons on mobile */
  .table-wrap > table tbody tr td .button-wrapper,
  .table-wrap > table tbody tr td .btn-wrap,
  .table-wrap > table tbody tr td .actions-wrap {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Filters and selects: keep them compact on mobile */
  fieldset label { min-width: 0; }
  .filter-form select,
  fieldset select {
    width: 100%;
    max-width: 280px;     /* prevent overly wide selects */
  }

  /* Docházka: na mobilu NEpřepínej na kartičky, potřebujeme vidět záhlaví dnů */
  .table-wrap.attendance-wrap{ overflow: auto !important; -webkit-overflow-scrolling: touch; }
  .table-wrap.attendance-wrap > table.attendance-table{
    width: max-content !important;
    min-width: max-content !important;
    table-layout: fixed !important;
  }
  .table-wrap.attendance-wrap > table.attendance-table thead{ display: table-header-group !important; }
  .table-wrap.attendance-wrap > table.attendance-table tbody{ display: table-row-group !important; }
  .table-wrap.attendance-wrap > table.attendance-table tbody tr{
    display: table-row !important;
  }
  .table-wrap.attendance-wrap > table.attendance-table thead th,
  .table-wrap.attendance-wrap > table.attendance-table tbody tr td{
    display: table-cell !important;
    width: auto !important;
    border: 1px solid var(--ring) !important;
  }

  /* Přepiš mobile “admin tables” !important padding/text-align na kompaktní docházkové hodnoty */
  .table-wrap.attendance-wrap > table.attendance-table th.att-day,
  .table-wrap.attendance-wrap > table.attendance-table td.att-cell{
    text-align: center !important;
    padding: 2px 4px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    line-height: 1 !important;
  }
  .table-wrap.attendance-wrap > table.attendance-table th.att-day{ font-size: 11px !important; width: 26px !important; }
  .table-wrap.attendance-wrap > table.attendance-table td.att-cell{ width: 26px !important; padding: 0 !important; }

  .table-wrap.attendance-wrap > table.attendance-table th.att-worker,
  .table-wrap.attendance-wrap > table.attendance-table td.att-worker{
    text-align: left !important;
    width: 140px !important;
    max-width: 140px !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .table-wrap.attendance-wrap > table.attendance-table th.att-holiday,
  .table-wrap.attendance-wrap > table.attendance-table td.att-holiday{
    text-align: center !important;
    width: 74px !important;
    padding: 2px 6px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    font-size: 11px !important;
  }
  .table-wrap.attendance-wrap > table.attendance-table th.att-total,
  .table-wrap.attendance-wrap > table.attendance-table td.att-total{
    text-align: center !important;
    font-weight: 700 !important;
    width: 72px !important;
    padding: 2px 6px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
    font-size: 13px !important;
  }
}

/* Cars list utilities */
.table-toolbar{ display:flex; gap:8px; justify-content:flex-start; margin:0 0 8px 0; }
.color-dot{ display:inline-block; width:16px; height:16px; border-radius:50%; border:1px solid #e5e7eb; vertical-align:middle; }
.nowrap{ white-space: nowrap; }
.notice{ margin-top:8px; color:#6b7280; }
.table.table-xs th, .table.table-xs td{ padding:6px 8px; }

/* VPD: E-maily správcům – tabulka Úseky (nižší řádky na desktopu) */
.table.table-xs.vpd-table-useky th,
.table.table-xs.vpd-table-useky td{
  padding: 2px 8px;
  line-height: 1.2;
}

/* Cars modal */
#carModal .modal{ width:min(820px, 96vw); margin: 20px auto; }
#carModal header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.color-picker{ display:flex; align-items:center; gap:8px; }
.color-picker input[type="color"]{ width:44px; height:36px; padding:0; border:1px solid #cbd5e1; border-radius:6px; background:#fff; }
.color-picker .hex{ width:110px; height:32px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
#carModal input.invalid{ border-color:#ef4444 !important; outline:1px solid #ef4444; }
/* Center the AktivnĂ­ checkbox block in the modal row */
#carModal .row > div:last-child{ display:flex; align-items:center; justify-content:center; gap:8px; }
#carModal .row > div:last-child label{ margin:0; }
/* Workers status dot */
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.status-active{background:#22c55e}
.status-inactive{background:#ef4444}
.status-warning{background:#f97316}
/* Pagination */
/* record-container is used by pagination_universal and a few list pages */
.record-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  margin-bottom: 12px;
  margin-right: 0;
}
.record-container > * {
  min-width: 0; /* allow children to shrink/wrap instead of overflowing */
}

/* Explicit stacked layout for pages where blocks must be under each other (e.g. /ukoly). */
.record-container.record-container--stack{
  flex-direction: column;
  align-items: center;
}
.record-container.record-container--stack > *{
  max-width: 100%;
}

.pagination {
  display: flex;
  flex-direction: row; /* Změna na řádkové zobrazení */
  flex-wrap: wrap; /* Zalamování na další řádek */
  gap: 6px; /* Mezera mezi ÄŤĂ­sly */
  align-items: center;
}

/* Abecední filtr (clients_names): nechceme fieldset přes celou šířku stránky */
fieldset.alphabet-filter{
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 12px;
}
fieldset.alphabet-filter .pagination{
  justify-content: center;
}

.pagination a, .pagination strong, .pagination span {
  padding: 4px 8px;
  text-decoration: none;
  color: #333;
}

.pagination a:hover {
  background-color: #f0f0f0;
}

.pagination strong {
  font-weight: bold;
  background-color: #e0e0e0; /* Aktuální stránka zvýrazněna */
  border-radius: 4px;
}

.pagination span {
  color: #999; /* TeÄŤky "..." */
}
.record-count {
  font-size: 14px;
  color: #6b7280;
  text-align: left;
  margin-left: 0;
  margin-bottom: 0px;
}
/* Popup */
.popup, .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
.popup-content, .popup-window {
  background-color: #fff;
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.popup-content {
  margin: 10% auto;
  width: 400px;
  border: 1px solid #d1d5db;
}
.popup-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  overflow: auto;
}
.popup-content h2 {
  margin-top: 0;
  font-size: 20px;
}
.popup-content input, .popup-content textarea {
  display: block;
  width: 100%;
  margin: 12px 0;
  padding: 0 12px;
  font-size: 16px;
}
.close {
  color: #6b7280;
  float: right;
  font-size: 24px;
  font-weight: 700;
}
.close:hover, .close:focus {
  color: #1f2937;
  cursor: pointer;
}
/* Notification */
.notification-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 28px;
  background-color: #1f2937;
  color: #fff;
  border-radius: 8px;
  font-size: 16px;
  z-index: 20000;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  display: none;
}
.notification-popup.success {
  background-color: #22c55e;
}
.notification-popup.error {
  background-color: #ef4444;
}
.notification-popup.false {
  background-color: #ef4444;
}
.notification-popup.show {
  display: block;
  opacity: 1;
}
/* Checkbox and misc */
.cleared {
  background-color: #f5f5f5 !important;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0,0,0,0.03) 0,
    rgba(0,0,0,0.03) 6px,
    transparent 6px,
    transparent 12px
  );
  transition: background-color 0.25s ease-out, background-image 0.25s ease-out;
}

th a[title*="Řadit"] {
  margin-left: 4px;
  text-decoration: none;
  font-size: 12px;
  color: #333;
}
th a[title*="Řadit"]:hover { color: #000; }
.checkbox-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 16px;
}
.checkbox-column {
  flex: 1;
  min-width: 200px;
}
.checkbox-item {
  margin-bottom: 12px;
}
.no-params {
  color: #6b7280;
  text-align: center;
  padding: 24px;
}
.edit-btn, .save-btn, .delete-btn, .preview-btn, .print-btn, .pdf-btn, .mail-btn, .ares-btn {
  margin: 1px 2px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 8px 16px;
  border: none;
  min-height: 34px;
  line-height: 1.2;
}
.preview-btn, .print-btn, .pdf-btn, .ares-btn {
  background-color: var(--btn-secondary-bg, #e5e7eb);
  color: var(--btn-secondary-fg, #111827);
  border: 1px solid var(--btn-secondary-border, #d1d5db);
}
.edit-btn, .save-btn, .mail-btn {
  background-color: var(--btn-positive-bg, #16a34a);
  color: var(--btn-positive-fg, #fff);
}
.delete-btn {
  background-color: var(--btn-negative-bg, #dc2626);
  color: var(--btn-negative-fg, #fff);
}
.edit-btn:visited, .save-btn:visited, .delete-btn:visited, .preview-btn:visited, .print-btn:visited, .pdf-btn:visited, .mail-btn:visited, .ares-btn:visited {
  color: inherit;
}
.edit-btn:hover, .save-btn:hover, .delete-btn:hover, .preview-btn:hover, .print-btn:hover, .pdf-btn:hover, .mail-btn:hover, .ares-btn:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  color: inherit;
}
.preview-btn:hover, .print-btn:hover, .pdf-btn:hover, .ares-btn:hover {
  background-color: var(--btn-secondary-bg-hover, #d1d5db);
  color: var(--btn-secondary-fg, #111827);
}
.edit-btn:hover, .save-btn:hover, .mail-btn:hover {
  background-color: var(--btn-positive-bg-hover, #15803d);
  color: var(--btn-positive-fg, #fff);
}
.delete-btn:hover {
  background-color: var(--btn-negative-bg-hover, #b91c1c);
  color: var(--btn-negative-fg, #fff);
}

/* Add-record buttons (legacy pages) */
.btn-add-record {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  color: var(--btn-positive-fg, #fff);
  background: var(--btn-positive-bg, #16a34a);
  text-decoration: none;
  min-height: 38px;
  transition: background 0.2s ease;
}
.btn-add-record:hover {
  background: var(--btn-positive-bg-hover, #15803d);
  color: var(--btn-positive-fg, #fff);
}
.btn-add-record.btn-secondary {
  background: var(--btn-secondary-bg, #e5e7eb);
  color: var(--btn-secondary-fg, #111827);
  border: 1px solid var(--btn-secondary-border, #d1d5db);
}
.btn-add-record.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover, #d1d5db);
  color: var(--btn-secondary-fg, #111827);
}
.btn-add-record.btn-cancel {
  background: var(--btn-negative-bg, #dc2626);
  color: var(--btn-negative-fg, #fff);
  border: none;
}
.btn-add-record.btn-cancel:hover {
  background: var(--btn-negative-bg-hover, #b91c1c);
  color: var(--btn-negative-fg, #fff);
}

/* Action cells: keep link-buttons consistent */
td.row-actions a.btn,
td.row-actions button.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
td.row-actions {
  white-space: nowrap;
}
td.row-actions form {
  display: inline-block;
  vertical-align: middle;
}
td.row-actions form + form {
  margin-left: 8px;
}
textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
  padding: 5px;
  min-width: 150px;
  font-size: 0.9em;
}
h1, h2, h3 {
  color: #000000;
  text-align: center;
}

/* Standard page title row: consistent spacing under the main heading */
.headline-row {
  margin: 0 0 16px 0;
}
.headline-row > h1,
.headline-row > h2 {
  margin: 0;
}

/* Avoid double spacing: headline-row already provides the gap */
.headline-row + fieldset {
  margin-top: 0;
}
.headline-row + .filters-block > fieldset:first-child {
  margin-top: 0;
}

.note {
    color: #7A7A7A;
    font-style: italic;
    font-size: 0.8em;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    input, select, textarea, button {
  margin: 0;
  /* padding zachováno z hlavních stylů kvůli tap zónám */
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
  /* Do not suppress native controls for checkboxes/radios on mobile */
  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
  }
  fieldset, .filter-form, .search-form, .record-container, .worker-inline {
    flex-direction: column;
    align-items: stretch;
  }
  label {
    text-align: left;
  }
  table, th, td {
    font-size: 0.9em;
  }
  .pagination {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
    input, select, textarea, button {
  margin: 0;
  /* padding zachováno z hlavních stylů kvůli tap zónám */
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
  /* Do not suppress native controls for checkboxes/radios on small phones */
  input[type="checkbox"],
  input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
  }
  .logo {
    font-size: 22px;
  }
  .menu-title {
    font-size: 12px;
    padding: 6px 12px;
  }
  .dropdown-menu {
    width: 100%;
  }
  .record-count {
    font-size: 12px;
    margin-left: 20px;
  }
  .pagination {
    flex-direction: column;
    gap: 6px;
	flex-wrap: wrap;
  }
  .search-container {
    flex-direction: column;
    align-items: stretch;
  }
  .search-label {
    margin-bottom: 8px;
  }
  .search-input, .search-button {
    width: 100%;
  }
}
.select-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.select-row {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}
.select-item {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 10px;
}
.material-group {
  margin-bottom: 15px;
}
 .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    justify-content: flex-start; /* Zarovnání vlevo */
	margin-bottom: 10px;
	margin-top: 10px;
  }

.popup-content button {
    margin-right: 10px; /* Mezera mezi tlaÄŤĂ­tky */
}

.popup-content button:last-child {
    margin-right: 0; /* Žádná mezera za posledním tlačítkem */
}
.popup-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Mezera mezi všemi prvky */
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}

.popup-window {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    display: none;
    min-width: 300px;
}

.popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.popup-content h2 {
    margin-bottom: 20px;
}

.popup-content input,
.popup-content select {
    margin-bottom: 10px;
    width: 100%;
    max-width: 250px;
}

.popup-content button {
    margin-bottom: 10px; /* Mezera pod tlačítkem Přidat kontakt */
}

/* Nový kontejner pro tlačítka Uložit a Zavřít */
.button-container {
    display: flex;
    justify-content: center; /* Horizontální centrování tlačítek */
    gap: 10px; /* Mezera mezi tlaÄŤĂ­tky */
    margin-top: 10px; /* Mezera nad tlaÄŤĂ­tky */
}

.button-container button {
    margin: 0; /* Odebrání marginu z jednotlivých tlačítek */
    padding: 5px 15px; /* Volitelné: Větší plocha tlačítek */
}
hr {
    border: 1px solid #000000;
}
.material-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 5px;
    width: 100%;
}

.radio-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin: 0;
    white-space: nowrap;
}

.radio-label input[type="radio"] {
    margin: 0 8px 0 0;
    flex-shrink: 0;
}
.stanicky-group
{
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
}
.material-popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-width: 500px;
    width: 90%;
}

.material-checkbox-group {
    margin-bottom: 15px;
}

.material-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.material-quantity {
    margin-left: 10px;
}

.material-save-button, .material-close-button {
    padding: 8px 16px;
    margin: 5px;
    cursor: pointer;
}

.material-close-button {
    background: #ccc;
}

.material-save-button {
    background: #28a745;
    color: white;
    border: none;
}
@media print {
    .filter-form, .search-form, .worker-inline, #actionForm button, #selectAll { display: none; }
    table { width: 100%; font-size: 10pt; }  /* Přizpůsob tabulku pro tisk */
}
/* Page-specific overrides */
@import url('css/klient_kontakty.css?v=20251112');
/*final.php*/
.custom-multiselect {
    position: relative;
    width: 100%;
    max-width: 300px;
}
.multiselect-options {
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding: 5px;
    background-color: #fff;
}
.option-item {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
}
.option-item:hover {
    background-color: #f0f0f0;
}
.option-item input[type="checkbox"] {
    margin-right: 5px;
}
.option-item span {
    flex-grow: 1;
}
.multiselect-controls {
    margin-bottom: 5px;
}
.multiselect-controls button {
    margin-right: 5px;
    padding: 5px 10px;
    cursor: pointer;
}
.kontakt-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    gap: 8px;
}

.kontakt-input {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-width: 350px;
}

.kontakt-type {
    color: #666;
    font-size: 0.9em;
    white-space: nowrap;
}


/* Scoped only to this page's insert form */
#insert_dum_form fieldset.center {
    display: block !important; /* each fieldset behaves as a normal block */
}
#insert_dum_form .form-row {
    display: flex;              /* label + input on one line */
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;        /* space between rows */
    width: 100%;
    justify-content: center;
}

#insert_dum_form .form-row input[type="text"],
#insert_dum_form .form-row select,
#insert_dum_form .form-row textarea {
    margin-left: auto;
    margin-right: auto;
}
#insert_dum_form .form-row input[type="text"],
#insert_dum_form .form-row select {
    flex: 1 1 320px;            /* control fills remaining line */
    max-width: 700px;
}
#insert_dum_form .form-row textarea {
    flex: 1 1 420px;
    min-height: 110px;
    max-width: 900px;
}
#insert_dum_form button[type="submit"]{
    margin-top: 8px;
}

#insert_dum_form .form-row label {
    flex: 0 0 180px;            /* fixed label width */
    min-width: 180px;
    text-align: left;
    white-space: nowrap;
}
#insert_dum_form button[type="submit"] {
    display: block;
    margin: 20px auto; /* centrování a mezery nad/pod */
}
.summary td { border-top: 2px solid #000; font-weight: 700; }

/* === Responsive Menu === */
.menu-toggle { display: none; }
.menu-burger { font-size: 20px; line-height: 1; }

@media (max-width: 768px) {
  /* Show toggle, collapse bar by default */
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #e6f0fa;
    border: 1px solid #b3cce6;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    color: #1f2937;
    font-weight: 600;
    margin: 8px 0;
  }
  .menu-bar {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
  }
  .menu-wrapper.open .menu-bar { display: flex; }

  /* Make items full-width, disable separators, increase tap targets */
  .menu-item { width: 100%; }
  .menu-item:not(:last-child)::after { display: none; }
  .menu-title { padding: 12px 10px; min-height: 44px; display: block; }

  /* Dropdowns become inline sections */
  .dropdown-menu {
    position: static;
    width: 100%;
    box-shadow: none;
    padding: 8px 10px;
    margin-top: -4px;
    display: none; /* collapsed by default on mobile */
  }
  .menu-item.open > .dropdown-menu { display: block; }
}

@media (pointer: coarse) {
  /* Bigger targets on touch devices */
  .menu-title { min-height: 44px; }
  /* Tweak header density on tablets (iPad Safari/Chrome) */
  .site-header .brand .logo { height: 64px; }
  .site-header .header-inner { padding: 8px 12px; }
}
@media (max-width: 768px) {
  .menu-wrapper { position: relative; }
 .menu-wrapper .menu-bar {
  position: absolute;
  left: 8px; right: 8px; top: 100%;
  z-index: 999;
  flex-direction: column;
  background: #f8fbff;
  border: 1px solid #b3cce6;
  border-radius: 8px;
  padding: 10px 12px;
  width: calc(90vw - 16px);
  max-height: 80vh;
  overflow-y: auto;
}
  .menu-wrapper .menu-item { width: 100%; }
  .menu-wrapper .menu-title { display: block; padding: 10px; }
}
.date-inline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 14px 0;
  font-weight: 700;
  padding: 0;           /* remove label’s default padding */
  margin-left: 0;       /* neutralize any global label left margin */
}
.date-inline input[type="date"] {
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid #b3cce6;
  border-radius: 8px;
  background: #fff;
  font-size: 1.05rem;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.04);
}
/* iOS drobnost – sjednocení výšky vnitřku */
.date-inline input[type="date"]::-webkit-date-and-time-value { min-height: 22px; }

@media (max-width: 768px) {
  .date-inline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    padding: 0;        /* remove inner padding on mobile */
    margin-left: 0;    /* align with container edge */
  }
  .date-inline input[type="date"] {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .menu-bar { display: none !important; }
  .menu-wrapper.open .menu-bar { display: flex !important; }
  .menu-toggle { display: inline-flex !important; }
}

/* Plná šířka filtrů na mobilech */
@media (max-width: 768px) {
  .filter-form,
  .search-form,
  .worker-inline { width: 100%; }

  .filter-form label { width: 100%; }

  .filter-form select,
  .filter-form input[type="text"],
  .filter-form input[type="number"],
  .filter-form input[type="date"],
  .filter-form .search-input {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Keep fieldset compact and left-aligned on mobile */
  fieldset { display: block !important; padding: 10px; }
  /* Labels inside fieldset should be compact on mobile */
  fieldset label { padding: 0 !important; margin: 0 0 6px 0 !important; }
  fieldset > .table-wrap { margin-top: 0 !important; }
}
/* --- Mobile fix: zarovnej tlačítko Nastavit všem vlevo --- */
@media (max-width: 768px) {
  .worker-inline .submit,
  .date-inline .submit {
    margin-left: 0 !important;   /* zruší inherited offset pro desktopové labely */
  }
  .date-inline { 
    margin-left: 0 !important;   /* jistota i pro wrapper */
  }
  .date-label { 
    margin-left: 0 !important;   /* jistota i pro popisek */
  }
}
/* --- Final alignment fix for Nastavit datum bar --- */
.date-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.date-inline label, .date-label {
  margin: 0;
  padding: 0;
}
.date-inline input[type="date"],
.date-inline .submit {
  margin: 0 !important;
  align-self: center;
}
.date-inline .submit {
  display: inline-block;
  width: auto;
}
@media (max-width: 768px) {
  .date-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .date-inline input[type="date"],
  .date-inline .submit {
    width: 100%;
  }
}
/* --- Mobile: neutralize desktop left offsets for date bar container --- */
@media (max-width: 768px) {
  .worker-inline { margin: 0 0 12px 0 !important; }
}
/* --- Desktop layout: actions on one line --- */
@media (min-width: 769px) {
  .worker-inline {
    flex-direction: row;
    justify-content: center;  /* center the whole block */
    align-items: center;
    gap: 12px;
    margin: 0 0 12px 0;       /* remove desktop left offset */
    width: 100%;              /* so centering uses full row */
  }
  /* date bar nesmí zabírat 100 %, drž se přirozené šířky */
  .date-inline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
  }
  .date-inline input[type="date"],
  .date-inline .submit {
    width: auto; /* neprotahovat na desktopu */
  }
}
/* --- Controls row: actions and search on one line --- */
.controls-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  width:100%;
  margin: 0 0 10px 0;
}
.controls-row .actions{ display:flex; gap:10px; align-items:center; }
.controls-row .search-form{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.controls-row .search-form .search-input{ width:300px; max-width:100%; }

/* Clients names: filtry ve fieldsetu + akce nad tabulkou */
fieldset.clients-names-filters{
  max-width: 1000px;
  margin: 12px auto;
  padding: 12px;
}
fieldset.clients-names-filters .controls-row{ margin: 0; }
fieldset.clients-names-filters .search-form{ margin-left: 0; justify-content: center; width: 100%; }

.clients-names-table-actions{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap: 8px;
  margin: 0 0 8px 0;
}
/* Calendar search results (DB-wide) */
.calendar-page .search-results{ display:block; margin: 8px 0 12px; padding:8px; background:#fff; border:1px solid var(--ring); border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.calendar-page .search-results.hidden{ display:none; }
.calendar-page .search-results .sr-header{ font-size:12px; color:var(--muted); margin:0 0 6px; }
.calendar-page .search-results .sr-item{ padding:6px 8px; border-bottom:1px solid #eee; cursor:pointer; display:flex; gap:8px; align-items:center; }
.calendar-page .search-results .sr-item:hover{ background:#f9fafb; }
.calendar-page .search-results .sr-item:last-child{ border-bottom:none; }
.calendar-page .search-results .sr-date{ font-weight:600; min-width:86px; color:#374151; }
.calendar-page .search-results .sr-subj{ flex:1 1 auto; color:#111827; }
.calendar-page .search-results .sr-meta{ color:#6b7280; font-size:12px; }
/* Row of primary actions ("Nový úkol" + "Export do PDF") — side by side, no wrap */
/* Actions in controls row (left side) */
.actions,
.controls-row .actions,
.controls-row .button-pair{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Remove extra margins so buttons sit flush next to each other */
.actions a.button,
.actions button,
.controls-row .actions a.button,
.controls-row .actions button {
  margin: 0;
}

/* If any button is inside a <form>, keep the form inline so it doesn't break the row */
.actions form,
.controls-row .actions form {
  display: inline;
  margin: 0;
  padding: 0;
}

/* Keep button labels on one line */
.actions a.button,
.actions button,
.controls-row .actions a.button,
.controls-row .actions button {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .actions,
  .controls-row .actions,
  .controls-row .button-pair {
    width: auto;              /* don't force full-width block */
    justify-content: flex-start;
    flex-wrap: nowrap;        /* keep side by side on mobile too */
  }
}
/* Ensure the period filter stays centered */
.filters-block{
  display: flex;
  justify-content: center;
  /* Desktop: shrink to the width of visible filter controls */
  width: fit-content;
  max-width: 100%;
  margin: 25px auto 0;
}
.filters-block fieldset{
  display: block;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto 10px;
  text-align: center;
}

/* Filter bars: normalize label/input alignment and remove global label padding */
.filters-block .filter-form {
  justify-content: center;
  flex-direction: row;
  /* Don't inherit the generic filter-form max-width/auto-stretch in filter bars */
  max-width: none;
  margin: 0;
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.filters-block .filter-form label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 600;
  min-width: 0;
  text-align: center;
}
.filters-block .filter-form label > select,
.filters-block .filter-form label > input,
.filters-block .filter-form label > textarea {
  width: 200px;
  max-width: 100%;
}
.filters-block .filter-form label > input[type="checkbox"] {
  width: auto;
}
.filters-block .filter-form input,
.filters-block .filter-form select,
.filters-block .filter-form textarea {
  margin: 0 !important;
}
/* Mobile: let the period filter stretch full width */
@media (max-width: 768px) {
  .filters-block { width: 100%; max-width: 100%; margin-top: 12px; }
  .filters-block fieldset { width: 100% !important; margin: 10px 0; text-align: left; }
  .search-form { text-align: left !important; margin-left: 0 !important; }
  /* Reduce label footprint inside filter rows */
  .filter-form label { min-width: 0; padding-left: 0; padding-right: 0; }
  /* Remove leftover wide margins */
  .worker-inline { margin-left: 0 !important; }
  .record-container { margin-right: 0 !important; }
  /* Stack controls row and stretch search */
  .controls-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .controls-row .search-form { width: 100%; }
  .controls-row .search-form .search-input { width: 100%; max-width: 100%; }
  /* Stack action buttons under search; make them full-width */
  .controls-row .search-form { order: 1; }
  .controls-row .actions { order: 2; flex-wrap: nowrap !important; flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
  .controls-row .actions .button,
  .controls-row .actions button,
  .controls-row .actions #exportPdfBtn,
  .controls-row .actions .new-task-btn { width: 100%; display: block; }
  /* Also stack any generic button rows */
  .button-row { flex-direction: column; align-items: stretch; }
  .button-row > * { width: 100%; }
  /* In case actions are grouped with the utility class */
  .actions.button-pair { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
  .actions.button-pair > * { width: 100%; }
  /* Make the container stack cleanly */
  .record-container { flex-direction: column; align-items: stretch; gap: 8px; }
  .record-count { margin-left: 0 !important; }
}

/* Calendar: mobile-friendly buttons and inputs */
@media (max-width: 768px) {
  /* Make toolbar controls visually lighter */
  .calendar-page .toolbar .btn {
    background: #ffffff;
    color: #111827;
    border: 1px solid #e5e7eb;
    box-shadow: none;
    padding: 10px 12px;
    font-size: 15px;
    border-radius: 8px;
  }
  /* Stack key buttons full width */
  #btnPrev, #btnToday, #btnNext,
  #btnExport, #btnExportPng,
  #btnApplyRange { display: block; width: 100%; }
  /* Keep exports + apply neutral */
  #btnApplyRange, #btnExport, #btnExportPng { background: #ffffff; color:#111827; border: 1px solid #e5e7eb; }
  /* Make search full-width on small screens */
  #searchBox { min-width: 0 !important; width: 100% !important; }
}

/* Calendar toolbar: layout only (do not change button look) */
.calendar-page .toolbar{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.calendar-page .toolbar-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content: center;
}
.calendar-page .toolbar-group{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.calendar-page .toolbar-row--top .toolbar-range{
  flex: 0 1 auto;
  min-width: 0;
}
.calendar-page .toolbar-row--search{ justify-content: center; }
.calendar-page .toolbar-row--search #searchBox{ width: min(420px, 90vw); }
.calendar-page .toolbar-row--top #rangeLbl{
  margin: 0;
  align-self: center;
}
.calendar-page .toolbar-row--view{
  align-items:center;
}
.calendar-page .toolbar-row--google{
  margin-top: 2px;
}

/* Calendar: keep form controls on consistent widths without special styling */
.calendar-page #searchBox{ min-width: 220px; }
.calendar-page #monthPicker{ min-width: 140px; width: auto; }
.calendar-page #customStart,
.calendar-page #customEnd{ min-width: 140px; width: auto; }
.calendar-page #googleSyncWorker{ min-width: 200px; }
.calendar-page #workerFilter{ min-width: 180px; }
.calendar-page #abs_remind_sel{ min-width: 180px; }
@media (max-width: 480px) {
  .controls-row { gap: 8px; }
  .controls-row .actions .button,
  .controls-row .actions button { padding: 10px 12px; }
}

/* Subtle styling for notes in the task cell */
.task-note{
  display:block;
  font-size:0.9em;
  opacity:0.75;
  margin-top:2px;
}
/* Narrower + left-indented task column */
table.task-list { width:100%; border-collapse:collapse; text-align: center; }
table.task-list th, table.task-list td { padding:6px 8px; }

table.task-list thead th.col-task { width: 450px;}
table.task-list tbody td.col-task { width: 36ch; max-width: 40%; text-align:left; padding-left: 12px; }
table.task-list tbody td.col-task { vertical-align: middle; }

/* Wrap table to enable horizontal scroll on small screens */
.table-wrap { width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) {
  .table-wrap { border-radius: 8px; }
  table.task-list { min-width: 720px; }
  /* Generic admin tables: allow horizontal scroll when narrow */
  .table-wrap > table { min-width: 640px; }
  table.task-list thead th.col-task { width: auto !important; }
}

/* Tighter mobile table layout (admin pages) */
@media (max-width: 768px) {
  .table-wrap > table th,
  .table-wrap > table td {
    padding: 4px 8px !important;
    line-height: 1.1;
    text-align: left;         /* reduce wasted space */
  }

  /* VPD: E-maily správcům – Úseky (přebít i toto !important pravidlo) */
  .table-wrap > table.vpd-table-useky th,
  .table-wrap > table.vpd-table-useky td {
    padding: 2px 6px !important;
    line-height: 1.15 !important;
  }
  .table-wrap > table { table-layout: fixed; width: 100%; }
  .table-wrap > table th, .table-wrap > table td { white-space: normal; word-break: break-word; }
  .table-wrap > table td.actions,
  .table-wrap > table td:last-child { white-space: nowrap; }
}

/* Shrink admin tables to content instead of full width (esp. work_types) */
.table-wrap > table.table-xs {
  table-layout: auto !important;
  width: max-content !important;    /* shrink to content width */
}
@supports (width: fit-content) {
  .table-wrap > table.table-xs { width: fit-content !important; }
}
@media (max-width: 768px) {
  .table-wrap > table.table-xs { min-width: 0 !important; width: 100% !important; table-layout: fixed !important; }
}

/* Mobile column balance for compact admin tables (id | name | actions) */
@media (max-width: 768px) {
  /* Narrow ID column */
  .table-wrap > table.table-xs th:nth-child(1),
  .table-wrap > table.table-xs td:nth-child(1) { width: 56px; text-align: center; white-space: nowrap; }
  /* Actions column gets a sane fixed width */
  .table-wrap > table.table-xs th:nth-child(3),
  .table-wrap > table.table-xs td:nth-child(3) { width: 180px; min-width: 160px; }
  .table-wrap > table.table-xs td:nth-child(3) {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
  }
  .table-wrap > table.table-xs td:nth-child(3) .btn,
  .table-wrap > table.table-xs td:nth-child(3) button {
    padding: 6px 10px; font-size: 14px; border-radius: 8px;
  }
  /* If very tight, let each action take half width */
  @media (max-width: 480px) {
    .table-wrap > table.table-xs td:nth-child(3) .btn,
    .table-wrap > table.table-xs td:nth-child(3) button { flex: 1 1 48%; }
  }
}

/* Row action buttons on one line */
td.row-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  /* hide inner borders so the actions cell doesn't draw its own box */
  border: none !important;
  border-color: transparent !important;
  background-clip: padding-box;
}
td.row-actions form.inline-delete-form{
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
td.row-actions .edit-btn,
td.row-actions .delete-btn{
  margin: 0;
}

/* Make worker select in task list table fill the cell and reduce extra padding */
table.task-list td select.worker-select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  margin: 0;
}

/* Make client select in task list match worker select */
table.task-list td select.client-select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  margin: 0;
}

/* Light red highlight for unassigned (Nevybráno) */
table.task-list td select.client-select.is-unset,
table.task-list td select.worker-select.is-unset {
  background-color: #fdbaba;   /* light red */
  border-color: #ff6060;
}


/* --- Provedeno: icon-only toggle (no button chrome) --- */
button.done-toggle,
.done-toggle {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  box-shadow: none !important;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;           /* slightly larger for readability */
  width: auto;
  height: auto;
  color: #444;               /* default (for âś—) */
}
.done-toggle:hover { filter: brightness(0.9); }
.done-toggle:active { transform: none; }
.done-toggle.done { color: #22c55e; }   /* green check âś” */
.done-toggle.todo { color: #666; }      /* neutral cross âś— */
/* keep table hover backgrounds but not on the icon itself */
td button.done-toggle:hover { background: none !important; }

/* Kalendář: .done-toggle je zde skutečný checkbox v dlaždici – nech nativní vzhled */
.calendar-page .tile input.done-toggle{
  background: initial !important;
  border: initial !important;
  padding: initial !important;
  box-shadow: initial !important;
  font-size: initial !important;
  line-height: normal !important;
  width: 14px;
  height: 14px;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: checkbox;
}
.calendar-page .tile label.done-toggle-label{ color: inherit; }
.calendar-page .tile .tile-done-toggle{
  pointer-events: auto;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  padding: 1px 4px;
  backdrop-filter: blur(2px);
}
.calendar-page .tile .tile-done-toggle .done-toggle-label{
  margin: 0;
  font-size: 12px;
  line-height: 1.1;
  gap: 6px;
}
.calendar-page .tile .tile-done-toggle .done-toggle-text{ display:inline; }
/* Perfectly center the checkbox inside the Provedeno cell */
td.prov-cell {
  vertical-align: middle;
  text-align: center;
  padding: 4px 0;
}

.prov-cell .prov-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.prov-cell input.done-toggle {
  margin: 0 auto;
  transform: scale(1.6); /* enlarge checkbox */
  vertical-align: middle;
}

.prov-cell .done-at {
  display: block;
  font-size: 0.85em;
  opacity: 0.8;
  margin-top: 3px;
  text-align: center;
}
/* === Modal (NovĂ˝ Ăşkol / Editace) === */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: none;              /* toggled to flex by JS */
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

/* Task modal: keep same size, add a bit more room on the right
   (visually shifts the window slightly left and prevents edge kissing). */
#taskModal.modal-overlay{
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 48px;
}
.modal-window{
  background: #fff;
  width: min(900px, 92vw);
  max-height: 88vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 20px auto;
}

/* Ensure task modal never overflows the padded overlay. */
#taskModal .modal-window{
  width: min(900px, calc(100vw - 80px));
  max-width: calc(100vw - 80px);
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  background: #f9d1d2;
}
.modal-header h2{
  margin:0;
  font-size: 1.2rem;
}
.modal-header #modalCloseBtn{
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color:#333;
  padding: 4px 8px;
}
.modal-body{
  padding: 16px;
  overflow: auto;
}
.modal-body fieldset{
  margin: 8px 0;
}
/* Workers modal form layout */
.modal-body.form-rows,
.modal-body .form-rows{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; width:100%; max-width:640px; margin:0 auto; }
.modal-body .form-row{ display:flex; align-items:center; gap:12px; justify-content:flex-start; width:100%; }
.modal-body .form-row label{ min-width:120px; text-align:left; }
/* Unified input sizing for text/email/select in modal/profile forms */
.modal-body .form-row input[type='text'],
.modal-body .form-row input[type='email'],
.modal-body .form-row select{
  min-height: 36px;
  min-width: 240px;
}
.modal-body .form-row.form-row-column{
  flex-direction: column;
  align-items: flex-start;
}
.modal-body .form-row.split{
  flex-wrap: wrap;
  gap: 10px 16px;
}
.modal-body .form-row.split > label{
  min-width: 80px;
}
.modal-body .form-row.split > input{
  flex: 1 1 200px;
  min-width: 160px;
}
.modal-body textarea{
  min-height: 110px;
}
.modal-body .button-row{
  display:flex;
  width:100%;
  justify-content:center;
  margin-top:12px;
}
.modal-window .button-row{
  display:flex;
  gap:8px;
  justify-content:center;
  padding:12px 16px;
}
.form-status{
  width: 100%;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.9rem;
  background: #eef2ff;
  color: #1d4ed8;
}
.form-status[data-type="error"]{
  background:#fee2e2;
  color:#b91c1c;
}
.form-status[data-type="success"]{
  background:#dcfce7;
  color:#15803d;
}

/* === Client modal: picker měsíců (clients_names) === */
#clientModal #client_months_row{
  flex-direction: column;
  align-items: center;
}

#clientModal #client_months_row > label{
  min-width: 0;
  width: 100%;
  text-align: center;
}

#clientModal .client-months-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  padding: 0;
  border: none;
  border-radius: 0;
}

#clientModal .client-months-hint{
  color: var(--muted);
  font-size: 0.92rem;
}

#clientModal .client-months-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:start;
  justify-items: center;
}

#clientModal .client-months-grid > div{
  width: 100%;
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 10px 10px 8px;
}

@media (max-width: 560px){
  #clientModal .client-months-grid{ grid-template-columns: 1fr; }
}

#clientModal .client-months-season-title{
  font-weight:700;
  margin-bottom:6px;
  text-align: center;
  width: 100%;
}

#clientModal .client-months-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content: center;
}

/* Chip-like checkbox */
#clientModal .client-months-pill{
  position: relative;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

#clientModal .client-months-pill > input.client-month{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

#clientModal .client-months-pill > span{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  cursor: pointer;
  user-select: none;
}

#clientModal .client-months-pill:hover > span{
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border);
}

#clientModal .client-months-pill > input.client-month:focus-visible + span{
  outline: 2px solid var(--btn-secondary-border);
  outline-offset: 2px;
}

#clientModal .client-months-pill > input.client-month:checked + span{
  border-color: var(--btn-positive-bg);
  background: var(--btn-secondary-bg-hover);
  font-weight: 600;
}

#clientModal .client-months-pill > input.client-month:disabled + span{
  opacity: 0.55;
  cursor: not-allowed;
}

#clientModal .client-months-status{
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  min-height: 1.1em;
  text-align: center;
}

/* Profil: zvýraznění zůstatku dovolené (používá existující .form-status box) */

.profile-page{
  --profile-block-w: min(760px, 100%);
  --profile-label-w: 160px;
  --profile-control-w: min(360px, 100%);
}

.profile-page .wrap.main-content{
  display: flex;
  justify-content: center;
}

.profile-page .profile-block{
  width: var(--profile-block-w);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-page .profile-block > fieldset{
  width: 100%;
  margin: 0;
}

.profile-page .profile-block .modal-body.form-rows,
.profile-page .profile-block .modal-body .form-rows{
  max-width: 100%;
  margin: 0;
}

/* Sjednocení zarovnání řádků: label vlevo, ovládací prvek v pevném sloupci */
.profile-page .profile-block .form-row{
  align-items: flex-start;
}
.profile-page .profile-block .form-row > label{
  flex: 0 0 var(--profile-label-w);
  min-width: var(--profile-label-w);
  padding: 0;
  margin: 0;
}
.profile-page .profile-block .profile-control{
  flex: 0 0 var(--profile-control-w);
  max-width: 100%;
  box-sizing: border-box;
}

.profile-page .profile-block .profile-control input[type='text'],
.profile-page .profile-block .profile-control input[type='email'],
.profile-page .profile-block .profile-control select{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 720px){
  .profile-page .profile-block .form-row{
    flex-wrap: wrap;
  }
  .profile-page .profile-block .form-row > label{
    flex: 0 0 100%;
    min-width: 0;
  }
  .profile-page .profile-block .profile-control{
    flex: 0 0 100%;
  }
}

/* Barva: picker + hex do jedné šířky */
.profile-page .profile-block .profile-color-controls{
  width: 100%;
  box-sizing: border-box;
}
.profile-page .profile-block .profile-color-controls #pfColorPick{
  flex: 0 0 auto;
}
.profile-page .profile-block .profile-color-controls #pfColor{
  flex: 1 1 auto;
  min-width: 0;
}

.profile-page .profile-holiday-box{
  width: 100%;
  box-sizing: border-box;
}
.profile-holiday-row{
  align-items: flex-start;
}
.profile-holiday-box .profile-holiday-lines{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-holiday-box .att-holiday-old,
.profile-holiday-box .att-holiday-new{
  font-weight: 700;
  line-height: 1.2;
}
.firm-modal-pairing{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}
.firm-modal-pairinfo strong{
  font-size:1rem;
  color:#111827;
}
.firm-modal-pairinfo small{
  color:#4b5563;
}
.firm-modal-pairactions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.firm-modal-actions{
  justify-content:flex-end;
  flex-wrap:wrap;
}
body.modal-standalone{
  background:#f3f4f6;
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:16px;
}
.modal-standalone-info{
  margin:12px 0;
  color:#6b7280;
  font-size:0.95rem;
  text-align:center;
}
body.modal-open{
  overflow:hidden;
}

/* --- Protokoly list & action buttons --- */
.proto-table-wrap {
  background: transparent;
  overflow: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.proto-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

/* Protokoly: hlavičky tabulky nezalamovat */
.proto-table thead th {
  white-space: nowrap;
}

/* Protokoly: sloupec "Provedl" držet užší, ať nezalamuje ostatní sloupce */
.proto-table th:nth-child(6),
.proto-table td:nth-child(6) {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 1200px) {
  .proto-table th:nth-child(6),
  .proto-table td:nth-child(6) {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
  }
}

@media (max-width: 900px) {
  .proto-table th:nth-child(6),
  .proto-table td:nth-child(6) {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
  }
}

.proto-table tbody td {
  padding: 10px 6px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.proto-table tbody tr:last-child td {
  border-bottom: 0;
}

.proto-table tbody tr:hover td {
  background: #fff6f6;
}

.proto-table th:last-child,
.proto-table td.proto-actions-cell { min-width: 320px; }

.proto-actions-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
  align-items: stretch;
  min-width: 320px;
}

.proto-action-btn {
  background: var(--btn-positive-bg);
  color: #fff;
  border: none;
  border-radius: 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 40px;
  min-height: 44px;
  padding: 5px 6px;
  font-size: 8px;
  cursor: pointer;
}

/* Anchor variant: keep white text even after visit (tables have a global a:visited color) */
.proto-action-btn:visited {
  color: var(--btn-positive-fg, #fff);
}

.proto-action-btn i,
.proto-action-btn .material-icons {
  font-size: 18px;
  line-height: 1;
  color: inherit;
}

.proto-action-btn .panel_font {
  display: block;
  line-height: 1.1;
}

.proto-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 8px rgba(219, 52, 52, 0.32);
  background: var(--btn-positive-bg-hover);
}

.proto-action-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.65);
  outline-offset: -1px;
}

@media (max-width: 1100px) {
  .proto-actions-cell {
    justify-content: flex-start;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .proto-table-wrap table tbody tr td.proto-actions-cell {
    flex-direction: column;
    gap: 10px;
  }
  .proto-table-wrap table tbody tr td.proto-actions-cell .proto-action-btn {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 600px){
  .modal-window{ width: 96vw; max-height: 92vh; }
  .modal-body textarea{ min-height: 90px; }
}
/* Counter placed under the "NovĂ˝ Ăşkol" button */
.controls-row .left-col .record-count { margin-top: 6px; }
/* Anchor buttons unified look */
a.button {
  display: inline-block;
  background-color: var(--btn-positive-bg, #16a34a);
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 10px 20px;
  font-size: 1em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: background-color 0.3s ease, box-shadow 0.2s ease, transform 0.05s ease;
}
a.button:hover {
  background-color: var(--btn-positive-bg-hover, #15803d);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
a.button:active {
  background-color: var(--btn-positive-bg-active, #166534);
  transform: translateY(2px);
}
/* =====================
   Calendar page styles
   (moved from inline <style> in calendar.php)
   ===================== */
:root {
  --grid-left: 100px;
  --grid-left-wn: 64px;
  --cell-min: 180px;
  --ring: #e5e7eb;
  --muted: #6b7280;

  /* Buttons (central palette) */
  /* Positive = light red */
  --btn-positive-bg: #DB3434;
  --btn-positive-bg-hover: #c92c2c;
  --btn-positive-bg-active: #b91c1c;
  --btn-positive-fg: #ffffff;

  /* Negative = dark red */
  --btn-negative-bg: #7a1f1f;
  --btn-negative-bg-hover: #651717;
  --btn-negative-bg-active: #4c1111;
  --btn-negative-fg: #ffffff;

  --btn-secondary-bg: #e5e7eb;
  --btn-secondary-bg-hover: #d1d5db;
  --btn-secondary-fg: #111827;
  --btn-secondary-border: #d1d5db;
}
body.calendar-page { font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; }
/* Calendar page - transparent container to show blue background */
body.calendar-page .page-content { padding: 0; }
/* Calendar wrap - normal block with padding */
body.calendar-page .wrap.main-content {
  padding: 16px;
}
body.calendar-page .calendar-fieldsets{
  display: grid;
  grid-template-columns: minmax(0, max-content);
  row-gap: 12px;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

@media (max-width: 899px) {
  body.calendar-page .calendar-fieldsets{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
body.calendar-page .calendar-fieldsets .calendar-fieldset--settings{
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
}
body.calendar-page .calendar-fieldsets fieldset{
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  margin: 0;
  padding: 16px;
}

/* VPD: controls layout (same idea as /calendar) */
.vpd-page .vpd-fieldsets{
  display: grid;
  grid-template-columns: minmax(0, max-content);
  row-gap: 12px;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.vpd-page .vpd-fieldsets .vpd-pagination{
  grid-column: 1 / -1;
  justify-self: stretch;
}
.vpd-page .vpd-fieldsets .vpd-pagination .record-container{
  width: max-content;
  justify-content: center;
}
.vpd-page .vpd-fieldsets .vpd-pagination .record-container.record-container--stack{
  width: max-content;
}
.vpd-page .vpd-fieldsets .vpd-fieldset--filters{
  grid-column: 1 / -1;
  justify-self: stretch;
}
.vpd-page .vpd-fieldsets fieldset{
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  margin: 0;
  padding: 16px;
}

@media (max-width: 899px) {
  .vpd-page .vpd-fieldsets{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 900px) {
  .vpd-page .vpd-fieldsets{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    justify-content: stretch;
  }
}

/* Ukoly: controls layout (same idea as /calendar and /vpd) */
.ukoly-page .ukoly-fieldsets{
  display: grid;
  grid-template-columns: minmax(0, max-content);
  row-gap: 12px;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.ukoly-page .ukoly-fieldsets .ukoly-pagination{
  grid-column: 1 / -1;
  justify-self: stretch;
}
.ukoly-page .ukoly-fieldsets .ukoly-fieldset--filters{
  grid-column: 1 / -1;
  justify-self: stretch;
}
.ukoly-page .ukoly-fieldsets fieldset{
  width: 100%;
  max-width: 100%;
  justify-self: stretch;
  margin: 0;
  padding: 16px;
}

@media (max-width: 899px) {
  .ukoly-page .ukoly-fieldsets{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 900px) {
  .ukoly-page .ukoly-fieldsets{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    justify-content: stretch;
  }
}

/* Calendar: place Synchronizace + Hledání side by side on desktop */
@media (min-width: 900px) {
  body.calendar-page .calendar-fieldsets{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    justify-content: stretch;
  }
  body.calendar-page .calendar-fieldsets .calendar-fieldset--settings{
    grid-column: 1 / -1;
  }
}
body.calendar-page fieldset {
  display: block !important;
}
/* Sticky header outside the scrollable grid (page keeps scrolling normally) */
body.calendar-page .grid-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f9fafb;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Hide header scrollbar (grid below remains scrollable) */
body.calendar-page .grid-header{ scrollbar-width: none; }
body.calendar-page .grid-header::-webkit-scrollbar{ height: 0; }
/* Header is rendered into .grid-header, so disable the old in-grid sticky helpers */
body.calendar-page #grid.grid::before{ display: none; }
body.calendar-page .grid-header .hdr{ position: relative; top: auto; z-index: 1; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; flex-wrap: wrap; }
.btn { padding:10px 14px; border-radius:12px; border:none; cursor:pointer; font-weight:600; }
/* a.btn se používá jako tlačítko (např. odkazy v tabulkách) */
a.btn { text-decoration: none; display: inline-block; text-align: center; }
a.btn:visited { color: var(--btn-positive-fg); }
button.btn,
a.btn,
input[type="submit"].btn,
input[type="button"].btn {
  background: var(--btn-positive-bg);
  color: var(--btn-positive-fg);
}
button.btn:hover,
a.btn:hover,
input[type="submit"].btn:hover,
input[type="button"].btn:hover {
  background: var(--btn-positive-bg-hover);
  color: var(--btn-positive-fg);
}
button.btn:active,
a.btn:active,
input[type="submit"].btn:active,
input[type="button"].btn:active {
  background: var(--btn-positive-bg-active);
  color: var(--btn-positive-fg);
}
button.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn.primary { background: var(--btn-positive-bg); color: var(--btn-positive-fg); border:none; }
.btn.secondary,
.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border: 1px solid var(--btn-secondary-border);
}
.btn.secondary:hover,
.btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-fg);
}
.btn.danger,
.btn.btn-cancel,
.btn.btn-danger,
.btn.del-firm-btn,
.btn-delete,
.btn-cancel {
  background: var(--btn-negative-bg);
  color: var(--btn-negative-fg);
  border: none;
}
.btn.danger:hover,
.btn.btn-cancel:hover,
.btn.btn-danger:hover,
.btn.del-firm-btn:hover,
.btn-delete:hover,
.btn-cancel:hover {
  background: var(--btn-negative-bg-hover);
  color: var(--btn-negative-fg);
}
.btn.success { background:#dcfce7; color:#15803d; border:1px solid #15803d; }
.btn.success:hover { background:#dcfce7; }
.btn.btn-ghost{
  background:#fff;
  color:#374151;
  border:1px solid #e5e7eb;
}
button.btn.btn-ghost:hover,
a.btn.btn-ghost:hover{
  background:#f3f4f6;
}
.range { color: var(--muted); font-size: 14px; min-width:0; flex:1 1 auto; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.calendar-page .toolbar input[type="date"],
body.calendar-page .toolbar input[type="month"]{ min-width:140px; width:auto; }
.toolbar .range-label{ color:var(--muted); font-size:13px; margin:0 4px; align-self:center; }
.grid { overflow:auto; -webkit-overflow-scrolling: touch; background:#fff; width: 100%; position: relative; }
/* Calendar grid - full width without decorations */
body.calendar-page .grid { 
  flex: 1; 
  min-height: 0; 
  border-radius: 0; 
  box-shadow: none; 
  border: none;
}
.grid::before{
  content: "";
  position: sticky;
  top: 0;
  left: 0;
  display: block;
  height: var(--hdr-h, 56px);
  margin-bottom: calc(-1 * var(--hdr-h, 56px));
  background: #f9fafb;
  z-index: 3; /* below .hdr (z-index:5), above rows */
  pointer-events: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
/* Full-width bottom border for sticky header */
/* Header bottom line is now rendered per header cell; disable the old single pseudo-line */
.grid::after{ display:none; }
/* Avoid double border: header itself has no bottom border; the ::after line above serves it */
.calendar-page .hdr{ border-bottom: none; }
.calendar-page .hdr, .calendar-page .row { display:grid; min-width:720px; }
.calendar-page .hdr { position: sticky; top:0; z-index: 5; background:#f9fafb; border-top-left-radius:16px; border-top-right-radius:16px; }
.calendar-page .hdr > div { border-bottom: 1px solid var(--ring); }
.hdr > div { padding: 12px; font-weight: 600; color:#374151; text-align:center; }
.hdr > div:first-child { text-align:center; }
.calendar-page .row { /* per-cell borders below ensure full-width lines when scrolled */ }
/* Draw horizontal separators per cell so they span scrollable content */
.calendar-page .row > div { border-bottom: 1px solid var(--ring); }
.calendar-page .hdr > div + div, .calendar-page .row > div + div { border-left: 1px solid var(--ring); }
/* Remove bottom border on the last data row */
.calendar-page .row:last-child > div { border-bottom: none; }
.datecell { position: sticky; left: 0; background:#fff; padding: 12px 14px; z-index: 4; border-right:1px solid var(--ring); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.3; }
.weekcell { position: sticky; left: 0; background:#fff; padding: 14px 12px; z-index: 6; border-right:1px solid var(--ring); text-align:center; font-weight:600; min-width: var(--grid-left-wn); display:flex; align-items:center; justify-content:center; }
.hdr .weekcell { background:#f9fafb; display:flex; align-items:center; justify-content:center; }
.datecell { left: 0; }
.datecell .dayname{ font-weight:700; font-size:14px; text-transform:none; }
.datecell .daydate{ font-size:13px; color: var(--muted); }
.datecell.is-today { background: #fff7ed; }
.datecell { cursor: pointer; }
.cell { position: relative; padding: 12px; min-height: 96px; display:flex; align-items: stretch; }
.cell.cell--empty{ cursor: pointer; }
.tiles { display:flex; flex-direction: column; gap: 8px; align-items: stretch; flex:1; position: relative; z-index: 2; }
.tiles .timeline{
  position: relative;
  height: var(--timeline-h, 160px);
  border-radius: 10px;
  overflow: visible;
}
.tiles .timeline-spacer{ height: var(--timeline-h, 160px); pointer-events: none; }
.tiles .timeline .timeline-span{
  pointer-events: none;
  border: 1px dashed var(--ring);
  background: rgba(0, 0, 0, .04);
  border-radius: 8px;
}
.tiles .tile.tile--timed{
  box-sizing: border-box;
  border-radius: 8px;
  min-height: 48px;
}
.tiles.tiles--single .tile{ height:auto; display:block; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.tile { padding: 8px 12px; border-radius: 6px; background: linear-gradient(#fcfcfd, #ffffff); border:2px solid var(--ring); box-shadow: 0 1px 1px rgba(0,0,0,.03); font-size: 14px; width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; line-height: 1.25; text-align: center; position: relative; }
/* All-day: if it's the only tile in the cell, stretch it to fill the whole day box */
.calendar-page .tiles.tiles--allday-fill{ flex: 1; }
.calendar-page .tile.tile--allday-fill{ flex: 1 1 auto; display:flex; flex-direction:column; justify-content:center; }
/* ensure calendar tiles expand to fit any extra lines (e.g., Provedeno: ...) */
.calendar-page .tile { height: auto; min-height: 0; }
.calendar-page .tile .done-at { display: block; }
.calendar-page .tile.done{
  background-color: #e5e7eb;
  border-color: #d1d5db;
  color: #374151;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.08) 0 6px, rgba(0,0,0,0) 6px 12px);
}
.tile .remove { position:absolute; top:6px; right:6px; font-weight:700; cursor:pointer; font-size:16px; width:24px; height:24px; line-height:1; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(0,0,0,.2); background: rgba(255,255,255,.6); backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition: opacity .12s ease; }
.tile:hover .remove, .tile:focus-within .remove { opacity:1; pointer-events:auto; }
.tile .remove:hover{ background: rgba(0,0,0,.08); }
.tile .remove:focus{ outline:2px solid rgba(0,0,0,.35); outline-offset:2px; }
.tile .time { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.tile .subj { display: block; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.tile .notes { font-style: italic; color: inherit; margin-top: 2px; }
.empty { color:#9ca3af; font-size: 12px; user-select: none; }
.legend { margin-top: 10px; color: var(--muted); font-size: 12px; }
.no-results{ color:#9ca3af; font-size:12px; text-align:center; }
.alert { margin: 12px 0; padding: 10px 12px; border:1px dashed #fbbf24; background:#fffbeb; border-radius: 10px; color:#92400e; font-size: 13px; }
/* Cars UI */
.carbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin: 10px 0 12px; }
.carpill { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--ring); background:#fff; user-select:none; box-shadow:0 1px 1px rgba(0,0,0,.04); }
.carpill .swatch { width:12px; height:12px; border-radius:50%; border:1px solid rgba(0,0,0,.2); }
.carpill .label { font-weight:600; font-size:13px; }
.carpill .desc { font-size:12px; color: var(--muted); }
.carpill .count { font-size:12px; margin-left:4px; color:#111; }
.carpill[draggable="true"] { cursor:grab; }
.carpill[draggable="true"]:active { cursor:grabbing; }
.car-bubble { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; border:1px solid var(--ring); background:transparent; font-size:12px; box-shadow:0 1px 1px rgba(0,0,0,.04); margin-bottom:6px; align-self:center; }
.car-bubble .swatch { width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.2); }
.car-bubble .label { font-weight:600; }
.car-bubble .text { display:flex; flex-direction:column; line-height:1.15; }
.car-bubble .desc { font-size:12px; color: inherit; font-weight:600; }
.car-bubble .remove { margin-left:6px; font-weight:700; cursor:pointer; font-size:16px; width:24px; height:24px; line-height:1; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(0,0,0,.2); }
.car-bubble .remove:hover{ background: rgba(0,0,0,.08); }
.car-bubble .remove:focus{ outline:2px solid rgba(0,0,0,.35); outline-offset:2px; }
/* Mobile: ensure car pill inside cells wraps and doesn't overflow */
@media (max-width: 768px) {
  .calendar-page .tiles .car-bubble{
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    align-self: stretch;
    border-radius: 10px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    padding: 6px 8px;
  }
  .calendar-page .tiles .car-bubble .label,
  .calendar-page .tiles .car-bubble .desc{
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
  .calendar-page .tiles .car-bubble .remove{ margin-left: auto; }
}

.calendar-page .column-visibility-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 2000;
}
.calendar-page .column-panel {
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  margin-top: 8px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.12);
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(320px, 90vw);
  z-index: 2100;
}
.calendar-page .column-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.calendar-page .column-panel-list {
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  padding: 4px 0;
}
.calendar-page .column-panel-list .column-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #f9fafb;
  border: 1px solid transparent;
}
.calendar-page .column-panel-list .column-option input {
  margin: 0;
}
.calendar-page .column-panel-list .column-option:hover {
  border-color: var(--ring);
  background: #fff;
}
.calendar-page .column-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.calendar-page .column-panel-empty {
  font-size: 13px;
  color: var(--muted);
}

/* Mobile: improve drag usability of car pills in the top bar */
@media (max-width: 768px) {
  .carbar { gap: 10px; }
  .carpill {
    padding: 12px 14px;
    min-height: 44px;             /* larger tap target */
    border-radius: 14px;
    font-size: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    touch-action: none;            /* smoother drag on touch */
  }
  .carpill .swatch { width: 14px; height: 14px; }
  .carpill .label { font-size: 15px; }
  .carpill .desc, .carpill .count { font-size: 13px; }
  .carpill[draggable="true"]:active { transform: scale(1.02); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
}
.add-btn{ position:absolute; bottom:6px; right:8px; background:var(--btn-positive-bg); color:var(--btn-positive-fg); border:none; border-radius:10px; font-size:12px; padding:2px 8px; line-height:1.4; cursor:pointer; opacity:0; transition:opacity .15s ease; z-index:5; }
.cell:hover .add-btn{ opacity:1; }
.add-btn:focus{ outline:2px solid rgba(219,52,52,.35); outline-offset:2px; }
/* Modal (edit event) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:50}
.modal{width:min(820px,96vw);max-width:96vw;background:#fff;border:1px solid var(--ring);border-radius:14px;box-shadow: 0 10px 30px rgba(0,0,0,.18);overflow:hidden}
.modal *{box-sizing:border-box}
.modal header{padding:14px 16px;border-bottom:1px solid var(--ring);font-weight:700}
.modal .body{padding:16px}
.modal .body{max-height:70vh;overflow:auto;overflow-x:hidden}
.modal .row{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.modal .row > *{min-width:0}
.modal .row > div{flex:1 1 280px}
.modal footer .btn{ min-height: 42px; }
.modal label{display:block;font-size:12px;color:#6b7280;margin-bottom:6px}
.modal input[type="text"], .modal input[type="time"], .modal input[type="number"], .modal textarea{width:100%;max-width:100%;border:1px solid var(--ring);border-radius:10px;padding:10px 12px;display:block;}
.modal input[type="time"] {
  min-width: 120px;
}
.modal label[for="edit_misto_id"],
.modal label[for="misto_id"] {
  text-align: center;
  width: 100%;
}
.modal select#edit_misto_id,
#taskModal select#misto_id {
  display: block;
  margin: 0 auto;
  min-width: 220px;
}
.modal footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--ring)}
/* Drag & drop highlight */
.cell.drop-target{outline:2px dashed #60a5fa; outline-offset:-6px; background:rgba(96,165,250,.06)}
.cell.car-action-pending::before{
  content:'';
  position:absolute;
  inset:8px;
  border-radius:12px;
  background:rgba(255,255,255,.6);
  z-index:6;
  pointer-events:none;
}
.cell.car-action-pending::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:22px;
  margin:-11px 0 0 -11px;
  border-radius:50%;
  border:3px solid rgba(37,99,235,.18);
  border-top-color:#2563eb;
  animation:calendar-cell-spin .7s linear infinite;
  z-index:7;
  pointer-events:none;
}
.cell.car-action-pending .tiles,
.cell.car-action-pending .holiday-name,
.cell.car-action-pending .add-btn{
  opacity:.45;
}
.cell.car-action-flash{
  animation:calendar-cell-success 900ms ease;
}
.cell.car-action-flash--assign{
  --calendar-cell-flash-color: rgba(16,185,129,.18);
}
.cell.car-action-flash--move-target{
  --calendar-cell-flash-color: rgba(37,99,235,.18);
}
.cell.car-action-flash--move-origin{
  --calendar-cell-flash-color: rgba(14,165,233,.16);
}
.cell.car-action-flash--unassign{
  --calendar-cell-flash-color: rgba(244,63,94,.16);
}
.cell.car-action-flash--replace{
  --calendar-cell-flash-color: rgba(245,158,11,.2);
}
@keyframes calendar-cell-spin {
  to { transform: rotate(360deg); }
}
@keyframes calendar-cell-success {
  0% {
    box-shadow: inset 0 0 0 999px var(--calendar-cell-flash-color, rgba(16,185,129,.18));
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(16,185,129,0);
  }
}
/* --- Calendar: draggable worker headers --- */
.hdr .hdr-name {
  user-select: none;
  cursor: grab;
  transition: background 0.15s ease, outline-color 0.15s ease;
}
.hdr .hdr-name:active { cursor: grabbing; }
.hdr .hdr-name.drag-over {
  outline: 2px dashed #2563eb;  /* modrý přerušovaný rámeček na cíli */
  outline-offset: -4px;
  background: rgba(37, 99, 235, 0.06);
}

/* Backlog drawer (slide-out from the left) */
.backlog-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(420px, 92vw);
  height: 100vh;
  background: #ffffff;
  border-right: 1px solid var(--ring);
  box-shadow: 2px 0 12px rgba(0,0,0,.08);
  transform: translateX(-100%);
  transition: transform .2s ease-in-out;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.backlog-drawer.open { transform: translateX(0); }
.backlog-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding: 12px 14px; border-bottom:1px solid var(--ring); background:#f9fafb; }
.backlog-filters { display:flex; align-items:center; gap:8px; padding: 8px 12px; border-bottom:1px solid var(--ring); background:#ffffff; }
.backlog-filters .btn { padding:6px 10px; }
.btn.btn-small { padding:6px 10px; font-size: 12px; }
.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; }
.backlog-list { flex:1; overflow:auto; padding: 10px 12px; display:flex; flex-direction:column; gap:8px; }
.backlog-footer { padding: 10px 14px; border-top:1px solid var(--ring); color: var(--muted); background:#fff; }
.backlog-item { border:1px solid var(--ring); border-radius: 10px; padding: 10px 12px; cursor: grab; background: #f8fafc; }
.backlog-item.done { background-color: #e5e7eb; border-color: #d1d5db; }
.backlog-item .b-done { display:block; }
.backlog-item .b-notes { font-style: italic; color: #6b7280; margin-top: 2px; }
.backlog-item:active { cursor: grabbing; }
.backlog-item .b-subj { font-weight: 600; }
.backlog-item .b-range { font-size: 12px; color: #6b7280; margin-top: 2px; }
.backlog-item .b-worker { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; border:1px solid var(--ring); font-size: 12px; font-weight: 600; }
.backlog-empty { color: #6b7280; text-align: center; padding: 20px 0; }

/* Sticky left tab to open drawer */
.backlog-tab {
  position: fixed;
  top: 40vh;
  left: 0;
  transform: translateX(-8%) rotate(-90deg);
  transform-origin: left top;
  background: #0f172a;
  color: #ffffff;
  border: none;
  padding: 10px 14px;
  border-top-left-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  cursor: pointer;
  z-index: 60;
  opacity: .92;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .3px;
  user-select: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.backlog-tab:hover{ opacity: 1; }
.backlog-tab:focus{ outline: 2px solid #60a5fa; outline-offset: 2px; }

/* When backlog is open, shift grid and cars to the right so columns remain accessible */
body.calendar-page.backlog-open #carBar { margin-left: var(--drawer-w, 360px); transition: margin-left .2s ease-in-out; }
body.calendar-page.backlog-open #gridHeader { margin-left: var(--drawer-w, 360px); transition: margin-left .2s ease-in-out; }
body.calendar-page.backlog-open #grid { margin-left: var(--drawer-w, 360px); transition: margin-left .2s ease-in-out; }
body.calendar-page.backlog-open .legend { margin-left: var(--drawer-w, 360px); transition: margin-left .2s ease-in-out; }
/* === Responsive (iPad & iPhone) === */
@media (max-width: 1024px){
  :root { --grid-left: 96px; --grid-left-wn: 44px; --cell-min: 150px; }
  .hdr > div { padding: 10px; font-size: 14px; }
  .cell { padding: 10px; min-height: 84px; }
  .tile { font-size: 13px; border-radius: 6px; }
  .weekcell { padding: 12px 10px; min-width: var(--grid-left-wn); }
  .datecell { padding: 10px 12px; }
  .modal{ width: min(720px, 96vw); }
}
@media (max-width: 768px){
  :root { --grid-left: 84px; --grid-left-wn: 38px; --cell-min: 120px; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar .btn { padding: 12px 14px; font-size: 16px; border-radius: 0; }
  .btn { padding: 12px 14px; font-size: 16px; border-radius: 0; }
  .range { white-space: normal; }
  .calendar-page .hdr, .calendar-page .row { min-width: 620px; }
  .hdr > div { padding: 8px; font-size: 13px; }
  .weekcell { padding: 10px 8px; }
  .datecell { padding: 8px 10px; }
  .datecell .dayname { font-size: 13px; }
  .datecell .daydate { font-size: 12px; }
  .cell { padding: 8px; min-height: 72px; }
  .tile { font-size: 12.5px; padding: 8px 10px; border-radius: 6px; }
  .modal{ width: 96vw; max-width: 96vw; border-radius: 12px; }
  .modal .row{ gap: 8px; }
  .modal .row > div{ flex: 1 1 100%; }
  .modal footer{ flex-wrap: wrap; }
  .toolbar > div { width: 100%; }
  .toolbar > div:nth-child(2){ display:flex; flex-wrap:wrap; gap:8px; }
  .toolbar .range-label{ display:block; width:100%; margin:2px 0 0; text-align:left; }
  #customStart, #customEnd { flex: 1 1 100%; width:100%; }
  #modeSel, #monthPicker, #customStart, #customEnd { flex: 1 1 48%; min-width: 0; }
  #btnApplyRange { flex: 1 1 100%; }
  .hdr > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdr .weekcell, .hdr > div:nth-child(2) { font-size: 12px; }
}
/* Ensure the New Task button is visible */
#openCreateBtn { display: inline-block; }
.actions.button-pair { display: flex; gap: 8px; align-items: center; }
#openCreateBtn, .new-task-btn { display: inline-block; }
/* =====================
   Landing page (index.php)
   ===================== */
body.landing {
  background: #f5f6f9;
  color: #111827;
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
}
.landing .header-light {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.landing .logo { height: 120px; }
.landing .landing-wrap,
.landing .wrap {
  max-width: 1400px;
  margin: 0 auto;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.landing .lead { color: #6b7280; margin-top: 4px; }
.landing .grid {
  /* override calendar .grid card look */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  /* center tiles in a responsive row */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  margin: 40px auto 0;

  /* make the area tall enough so tiles „plavou“ uprostřed */
  min-height: 40vh;
}
.landing .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: white;
  border-radius: 14px;
  width: 240px;
  height: 200px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: #111827;
  text-decoration: none;
  border: none;
}
.landing .tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.landing .tile h2 { font-size: 18px; margin: 12px 0 6px; }
.landing .tile p { margin: 0; color: #6b7280; font-size: 14px; }
.landing .icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1f3a8a, #1d4ed8);
  display: flex; align-items: center; justify-content: center;
}
.landing .icon svg { width: 24px; height: 24px; fill: #fff; }
.landing footer { margin-top: 30px; color: #9ca3af; font-size: 12px; }
.landing .row { display: flex; gap: 8px; align-items: center; }
.landing .btn {
  appearance: none;
  border: 1px solid rgba(17,24,39,.15);
  background: transparent;
  color: #111827;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.landing .btn:hover { border-color: #60a5fa; }
/* ===== Global header & app navigation (shared across pages) ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}
.site-header .header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-header .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.site-header .brand .logo { height: 80px; }
.site-nav { margin-left: 16px; gap: 10px; }
.site-nav .nav-link {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  color: #111827;
  text-decoration: none;
  border: 1px solid transparent;
  transition: .15s background-color ease, .15s border-color ease;
}
.site-nav .nav-link:hover { background: #f3f4f6; border-color: #e5e7eb; }
.site-nav .nav-link.active { background: #e8f0ff; border-color: #cfe0ff; }
@media (max-width: 768px) {
  .site-header .header-inner { padding: 8px 12px; }
  .site-header .brand .logo { height: 40px; }
  .site-nav .nav-link { padding: 8px 10px; }
}
/* =====================
   Home tiles (moved from inline styles in home.php)
   ===================== */
/* --- Home tiles layout (standalone) --- */
.tiles-standalone{
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent !important; /* no white panel */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.tiles-standalone .tiles-grid{
  display: grid;
  /* Malé dlaždice: vejdou se vedle sebe i v iframe. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: min(1400px, 100%);
}

/* If the viewport is short, don't vertically center — allow natural top flow + scroll. */
@media (max-height: 720px) {
  .tiles-standalone{
    align-items: stretch;
    justify-content: flex-start;
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .tiles-standalone { padding: 18px 12px; }
  .tiles-standalone .tiles-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .tiles-standalone .tile { padding: 14px 12px; border-radius: 14px; }
  .tiles-standalone .tile h2 { font-size: 16px; }
  .tiles-standalone .tile p { font-size: 12px; }
  .tiles-standalone .tile .icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; }
  .tiles-standalone .tile .icon svg { width: 22px; height: 22px; }
}
.tiles-standalone .tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: auto; /* override generic .tile{width:100%} used elsewhere (calendar) */
  padding: 16px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
  text-decoration: none;
  color: #111;
}
.tiles-standalone .tile:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(15,23,42,.1),0 24px 48px -24px rgba(15,23,42,.18);
}
.tiles-standalone .tile .icon{
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(180deg,#2f4bff,#2342c9);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:10px;
}
.tiles-standalone .tile .icon svg{ width:24px; height:24px; fill:#fff; }
.tiles-standalone .tile h2{ font-size: 18px; margin: 8px 0 6px; }
.tiles-standalone .tile p{ font-size: 13px; color:#6b7280; line-height:1.35; }
/* --- Due labels (overview of completion terms) --- */
.due-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1.1;
  border-radius: 6px;
  background: #eef2ff;
  color: #1e3a8a;
  border: 1px solid #c7d2fe;
}
.due-badge.is-deadline {
  background: #fff1f2;
  color: #991b1b;
  border-color: #fecaca;
}
.due-badge.is-window {
  background: #ecfeff;
  color: #164e63;
  border-color: #a5f3fc;
}
.due-badge.is-exact {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
/* hint text v modalu pod datem */
.due-hint {
  margin: 6px 0 2px 0;
  font-size: 12px;
  color: #6b7280;
}
/* === Holidays (CZ) — full-cell tint + name at top === */
.row .cell.holiday{
  background: #fff1f2;               /* light red */
}
.datecell.is-holiday-date{
  background: #fff1f2;               /* match date column with the row */
}
/* CZ svátky – název v buňce: zarovnání a zalamování */
.cell .holiday-name{
  position: absolute;
  top: 4px;
  left: 8px;
  right: 8px;            /* přes celou šířku buňky */
  transform: none;       /* už necentrujeme přes 50% */
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  color: #b91c1c;
  text-align: center;
  pointer-events: none;

  /* povol zalamování */
  white-space: normal;
  overflow-wrap: anywhere;  /* zlom i dlouhá slova při nedostatku místa */
  word-break: break-word;
}

/* V buňkách se svátkem dej víc místa nad dlaždice, aby název nepřekrýval obsah */
.cell.holiday .tiles { padding-top: 40px; }

/* Ostatní buňky nech s výchozím odsazením */
.cell:not(.holiday) .tiles { padding-top: 8px; }
/* Ensure tiles don't overlap the holiday label */
.cell .tiles{ padding-top: 8px; }

/* === Docházka (attendance) — tabulka s dny v měsíci === */
.attendance-table{ table-layout: fixed; }
.attendance-table th.att-day,
.attendance-table td.att-cell{
  text-align: center;
  padding: 2px 4px;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1;
}
.attendance-table th.att-day{ font-size: 11px; width: 26px; }
.attendance-table td.att-cell{ width: 26px; }

/* Docházka: navigace měsíců uvnitř fieldsetu (kvůli mobilu) */
.att-month-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.att-month-nav .btn,
.att-month-nav .att-month-label{ flex: 0 0 auto; }
.att-month-nav .att-month-label{
  font-weight: 700;
}

/* Docházka: zebrování pro lepší orientaci (řádky + sloupce dnů)
   - Vertikálně: barvíme přímo buňky, aby to fungovalo i na mobilu (kde se jinak přebíjí styly řádků)
   - Horizontálně: na sudé dny přidáme jemný overlay (kombinuje se s řádkovým pozadím) */
.attendance-table tbody tr:nth-child(odd) td:not(.is-holiday){ background-color: #ffffff; }
.attendance-table tbody tr:nth-child(even) td:not(.is-holiday){ background-color: #f9fafb; }
.attendance-table thead th.att-day:nth-child(even):not(.is-holiday),
.attendance-table tbody td.att-cell:nth-child(even):not(.is-holiday){
  background-image: linear-gradient(rgba(0,0,0,0.03), rgba(0,0,0,0.03));
}

/* Denní buňky: centrování a žádné přetékání */
.attendance-table td.att-cell{
  padding: 0;
  font-size: 0; /* zruší vliv whitespace v HTML */
  display: table-cell; /* explicitně, ať se nemění layout */
  cursor: pointer;
}
.attendance-table td.att-cell > .att-absence,
.attendance-table td.att-cell > .att-slash{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  max-width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

/* Víkendy/svátky: neklikatelné, kurzor default */
.attendance-table td.att-cell.is-holiday,
.attendance-table td.att-cell.is-holiday > .att-absence,
.attendance-table td.att-cell.is-holiday > .att-slash{
  cursor: default;
}
.attendance-table th.att-worker,
.attendance-table td.att-worker{
  text-align: left;
  width: 140px;
  max-width: 140px;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attendance-table th.att-holiday,
.attendance-table td.att-holiday{
  text-align: center;
  width: 74px;
  padding: 2px 6px;
  white-space: normal;
  line-height: 1.15;
  font-size: 11px;
}
.attendance-table td.att-holiday{ cursor: pointer; }
.attendance-table th.att-total,
.attendance-table td.att-total{
  text-align: center;
  font-weight: 700;
  width: 72px;
  padding: 2px 6px;
  white-space: normal;
  line-height: 1.15;
  font-size: 13px;
}
.attendance-table th.is-holiday,
.attendance-table td.is-holiday{
  background: #fff1f2;               /* match existing holiday tint */
}
.attendance-table .att-absence,
.att-absence{
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: #ffe5e8;              /* reuse absence tile background */
  color: #b91c1c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

/* Badge ve sloupcích dnů: vejde se do 26px a neuteče do sousedních buněk */
.attendance-table td.att-cell > .att-absence{
  min-width: 0;
  padding: 0 2px;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attendance-table td.att-cell > .att-slash{
  font-size: 11px;
  line-height: 1;
}
.attendance-table .att-absence.att-absence-oldrd,
.att-absence.att-absence-oldrd{
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

/* Docházka: ŘD rozdělené mezi starou/novou dovolenou v jednom dni (např. 2h+2h)
   - `--rd-old-pct` určuje podíl staré části (0..100)
   - `--rd-new-bg` je barva běžného ŘD (z absence_types) */
.attendance-table .att-absence.att-absence-splitrd,
.att-absence.att-absence-splitrd{
  background:
    linear-gradient(
      90deg,
      #dcfce7 0%,
      #dcfce7 var(--rd-old-pct, 50%),
      var(--rd-new-bg, #ffe5e8) var(--rd-old-pct, 50%),
      var(--rd-new-bg, #ffe5e8) 100%
    );
}
.attendance-table .att-slash,
.att-slash{ color: #6b7280; font-weight: 700; }

/* Absence modal: reuse ukoly modal look via form grid */
#absenceForm {
  display: grid;
  grid-template-columns:
    max-content minmax(220px, 1fr)
    max-content minmax(220px, 1fr);
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
}

/* Absence modal: inline potvrzení mazání (spolehlivé i na mobilu) */
.absence-delete-confirm{ margin-top: 10px; }
.absence-delete-confirm .absence-delete-text{ font-weight: 600; }
.absence-delete-confirm .absence-delete-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 8px;
}
#absenceForm label {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}
#absenceForm input[type="text"],
#absenceForm input[type="number"],
#absenceForm input[type="date"],
#absenceForm input[type="time"],
#absenceForm input[type="email"],
#absenceForm input[type="tel"],
#absenceForm input[type="search"],
#absenceForm select,
#absenceForm textarea {
  width: 100%;
  margin: 0;
  min-height: 34px;
  padding: 6px 8px;
  font: inherit;
}
@media (max-width: 720px) {
  #absenceForm { grid-template-columns: max-content 1fr; }
}

/* === Absence (Volno / Dovolená) — dlaždice nahoře + volitelný celobuněčný tint === */
.cell .absence-fill{
  position: absolute;
  inset: 0;
  background: #ffe5e8; /* light red */
  pointer-events: none;
  z-index: 1;
}

.tiles .absence-tile{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--ring);
  background: #ffe5e8;
  cursor: pointer;
  align-self: flex-start;
  max-width: 100%;
}
.tiles .absence-tile .code{
  background: #c81e1e;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.tiles .absence-tile .text{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: #b91c1c;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}


/* Center M�sto select in both modals */
.modal label[for="edit_misto_id"],
.modal label[for="misto_id"]{
  text-align: center;
  width: 100%;
}
.modal select#edit_misto_id,
#taskModal select#misto_id{
  display: block;
  margin: 0 auto;
  min-width: 260px;
  max-width: 520px;
}
/* Align 'M�sto' label with centered select width */
.modal label[for="misto_id"],
.modal label[for="edit_misto_id"]{
  width: auto;
  min-width: 260px;
  max-width: 520px;
  margin: 0 auto 6px auto; /* center block above select */
  text-align: left;        /* left text inside the centered block */
}
.modal select#edit_misto_id,
#taskModal select#misto_id{
  min-width: 260px;
  max-width: 520px;
}

/* Ensure 'MĂ­sto' label sits centered above the centered select */
#taskModal label[for="misto_id"],
.modal label[for="edit_misto_id"]{
  display:block;
  width: fit-content;
  margin: 0 auto 6px auto;
  text-align: center;
}
#taskModal select#misto_id,
.modal select#edit_misto_id{
  display:block;
  margin: 0 auto;
  min-width: 260px;
  max-width: 520px;
}/* Inline layout for 'MĂ­sto' in task modal */
#taskModal .place-inline label[for="misto_id"]{ margin:0; width:auto; text-align:left; }
#taskModal .place-inline select#misto_id{ margin:0; }
/* Center label with its input in the due-exact row (Den / Začátek / Konec) */
#taskModal .due-exact label{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#taskModal .due-exact label > input{
  margin-top: 0; /* label text is above input */
}

/* Force date/time rows under the radio switches in task modal */
#taskModal .due-kind-block > .due-switches,
#taskModal .due-kind-block > .due-exact,
#taskModal .due-kind-block > .due-window{
  flex-basis: 100%;
  width: 100%;
}
/* Layout for exact-date row: center columns; label text below input */
#taskModal .due-exact{ justify-content: center; gap: 20px; }
/* Grid layout to keep Den/Začátek/Konec in one centered row */
#taskModal .due-exact{
  display: grid;
  grid-template-columns: repeat(3, 260px);
  justify-content: center;
  gap: 20px;
}
/* When switching to 'window', center the single month field */
#taskModal .due-window{
  display: flex;              /* will be hidden via inline display:none; JS clears it */
  justify-content: center;
}
#taskModal .due-exact label{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#taskModal .due-exact label{ flex: 0 0 220px; max-width: 240px; }
#taskModal .due-exact input[type="date"],
#taskModal .due-exact input[type="time"]{ width: 100%; }
#taskModal .due-exact .label-under{
  display: block;
  margin: 0 0 6px 0; /* space under the label above the input */
  font-weight: 700;
  color: #374151;
}
/* Styl pouze pro fieldset #zakladni-udaje (Základní údaje) */

#zakladni-udaje,
#zakladni-udaje * {
  box-sizing: border-box;
}

#zakladni-udaje {
  padding: 20px;
  padding-bottom: 25px;
  margin: 8px 0 16px 0;
}

#zakladni-udaje > legend {
  font-weight: 700;
  margin-bottom: 10px;
}

/* Grid pro pole od „Klient“ dál */
#zakladni-udaje .grid-2pairs {
  display: grid;
  grid-template-columns:
    max-content minmax(220px, 1fr)
    max-content minmax(220px, 1fr);
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
}

/* Párování klienta – ucelený blok (status vlevo, firma + akce vpravo) */
#zakladni-udaje .grid-2pairs .pairing-block {
  grid-column: 3 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-self: start;
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 12px 14px 10px 14px;
  margin: 0 2px;
}
#taskModal #zakladni-udaje .grid-2pairs .pairing-block {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
#taskModal #zakladni-udaje .grid-2pairs .pairing-block .pairing-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
#taskModal #zakladni-udaje .grid-2pairs .pairing-block .pairing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}
#taskModal #zakladni-udaje .grid-2pairs .pairing-block .paired-company-head {
  flex-wrap: wrap;
}
#taskModal #zakladni-udaje .grid-2pairs .pairing-block .linklike.unpair2-btn {
  white-space: normal;
  overflow-wrap: anywhere;
}
#zakladni-udaje .grid-2pairs .pairing-block > legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
}

/* Uvnitř boxu nechceme další "kartu" s vlastním marginem. */
#zakladni-udaje .grid-2pairs .pairing-block .paired-firm-box {
  margin: 0;
}
#zakladni-udaje .grid-2pairs .pairing-block .pairing-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 1.2em;
  flex: 0 0 auto;
}
#zakladni-udaje .grid-2pairs .pairing-block #clientPairDot {
  display: none;
}
#zakladni-udaje .grid-2pairs .pairing-block #clientPairStatus {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  justify-self: auto;
  text-align: left;
}
#zakladni-udaje .grid-2pairs .pairing-block #pairedFirmBox {
  min-height: 1.2em;
  flex: 1 1 auto;
  min-width: 0;
}
#taskModal #zakladni-udaje .grid-2pairs .pairing-block #pairedFirmBox {
  flex: 0 0 auto;
  width: 100%;
}

/* Podnik (checkbox) je vpravo jako jeden blok – musí zabrat oba pravé sloupce,
   jinak se rozbije automatické skládání dalších řádků gridu. */
#zakladni-udaje .grid-2pairs .podnik-field {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 34px;
}
#zakladni-udaje .grid-2pairs .podnik-field > label {
  margin: 0;
  font-weight: 600;
}
#zakladni-udaje .grid-2pairs .podnik-field .checkbox-inline {
  margin: 0;
}

/* Klient hledání: široký input + akce pod ním. */
#zakladni-udaje .grid-2pairs .client-select-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
#zakladni-udaje .grid-2pairs .client-select-stack #client_search {
  width: 100%;
  min-width: 0;
}
#zakladni-udaje .grid-2pairs .client-select-stack select {
  width: 100%;
  min-width: 0;
}
#zakladni-udaje .grid-2pairs .client-select-stack .client-select-actions {
  display: flex;
  justify-content: flex-start;
}
#zakladni-udaje .grid-2pairs .client-select-stack #taskClientModalBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Vzhled popiskĹŻ a prvkĹŻ */
#zakladni-udaje .grid-2pairs label {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

#zakladni-udaje .grid-2pairs input[type="text"],
#zakladni-udaje .grid-2pairs input[type="number"],
#zakladni-udaje .grid-2pairs input[type="date"],
#zakladni-udaje .grid-2pairs input[type="time"],
#zakladni-udaje .grid-2pairs input[type="email"],
#zakladni-udaje .grid-2pairs input[type="tel"],
#zakladni-udaje .grid-2pairs input[type="search"],
#zakladni-udaje .grid-2pairs select,
#zakladni-udaje .grid-2pairs textarea {
  width: 100%;
  margin: 0;
  min-height: 34px;
  padding: 6px 8px;
  font: inherit;
}

/* Responsivní zobrazení – na úzkých displejích 1 pár na řádek */
@media (max-width: 720px) {
  #zakladni-udaje .grid-2pairs {
    grid-template-columns: max-content 1fr;
  }

  #zakladni-udaje .grid-2pairs .pairing-block {
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
  }

  #zakladni-udaje .grid-2pairs .podnik-field { grid-column: 1 / -1; }

  #zakladni-udaje .grid-2pairs .client-select-stack {
    flex-direction: column;
    align-items: stretch;
  }
  #zakladni-udaje .grid-2pairs .client-select-stack #client_search {
    min-width: 0;
  }
  #zakladni-udaje .grid-2pairs .client-select-stack #taskClientModalBtn {
    width: 100%;
  }
}

/* Oddělení části „Typ úkolu“ od gridu */
#zakladni-udaje .pre-grid-spacer {
  margin: 8px 0 4px 0;
}
#clientPairStatus {
  justify-self: center;
  text-align: center;
  margin: 0 auto; /* vodorovné vystředění ve flexboxu */
}
#zakladni-udaje .grid-2pairs #clientPairDot { display: none; }
  #zakladni-udaje .grid-2pairs #clientPairStatus { grid-column: 2; justify-self: start; text-align: left; margin: 0; }
  #zakladni-udaje .grid-2pairs #clientPairStatus .status-dot { display: inline-block !important; margin-right: 6px; vertical-align: middle; }

/* Párování: držet výšku řádku stabilní, ať se ne"třepí" grid. */
#zakladni-udaje .grid-2pairs #clientPairStatus {
  min-height: 1.2em;
  display: flex;
  align-items: center;
  gap: 6px;
}
#zakladni-udaje .grid-2pairs #pairedFirmBox {
  min-height: 1.2em;
}

/* --- Protokol preview modal --- */
body.proto-preview-open {
  overflow: hidden;
}
.proto-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1400;
}
.proto-preview-modal[hidden] {
  display: none;
}
.proto-preview-dialog {
  width: min(1200px, 95vw);
  max-height: 95vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
}
@media (min-width: 1600px) {
  .proto-preview-dialog {
    width: min(1400px, 92vw);
  }
  .proto-preview-body,
  .proto-preview-frame {
    min-height: 70vh;
  }
}
.proto-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.proto-preview-head h3 {
  margin: 0;
  font-size: 1.1rem;
}
.proto-preview-close {
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: #475569;
}
.proto-preview-body {
  position: relative;
  flex: 1;
  min-height: 55vh;
  background: #fff;
  border-radius: 14px;
  overflow: auto;
}
.proto-preview-frame {
  width: 100%;
  height: auto;
  min-height: 55vh;
  border: 0;
  background: #fff;
  display: block;
}
.proto-preview-frame[hidden] {
  display: none;
}
.proto-preview-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 600;
  color: #0f172a;
  background: rgba(248, 250, 252, 0.92);
}
.proto-preview-loader[hidden] {
  display: none;
}
.proto-preview-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  animation: proto-preview-spin 0.8s linear infinite;
}
@keyframes proto-preview-spin {
  to { transform: rotate(360deg); }
}
.proto-preview-actions {
  display: flex;
  justify-content: flex-end;
}
button.preview-btn {
  background-color: #1e945b;
  color: #fff;
}
button.preview-btn:hover {
  background-color: #176b42;
}
button.preview-btn .material-icons,
button.preview-btn i {
  color: inherit;
}
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* dvÄ› vedle sebe */
  gap: 16px;
}

.contacts-grid label {
  display: block;
  width: 100%;
}
.client-select-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.client-select-inline select {
  flex: 1;
}
.client-select-inline input.client-autocomplete {
  flex: 1;
  min-width: 160px;
}
#zakladni-udaje .grid-2pairs #clientPairStatus .pair-status-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  vertical-align: middle;
}