/**

 * Styly specifické pro aplikaci Stavební deník (header, stránky).

 * Design tokeny a typografie jsou v packages/design-system.

 */



/* Header ukotvený nahoře – zůstává viditelný při rolování */

:root {

  --header-height: 3.5rem;

  --app-sidebar-width: 15.5rem;

  /* Rozestupy stránky – jeden parametr pro hromadné ladění */

  --page-content-padding-top: var(--space-s);       /* mezera od headru k začátku stránky (menší = nadpis výš) */

  --page-header-gap-title-buttons: var(--space-m);   /* mezera mezi nadpisem h1 a řádkem tlačítek */

  --page-section-gap: var(--space-l);               /* mezera mezi sekcemi (filtry ↔ seznam, atd.) */

}



.app-header {

  grid-column: 1;

  grid-row: 1 / -1;

  position: sticky;

  top: 0;

  align-self: stretch;

  z-index: 100;

  background: var(--bg-surface);

  box-shadow: var(--shadow-header, 0 1px 0 var(--border-subtle));

  border-right: 1px solid var(--border-subtle);

  min-height: 100vh;

  min-width: 0;

  overflow-x: hidden;

}



body {

  margin: 0;

  display: grid;

  grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);

  grid-template-rows: 1fr auto;

  min-height: 100vh;

}



/* Přihlašovací stránka: bez headru, obsah vycentrovaný jako „okno v okně“ */

body.body--login-page {

  display: block;

  min-height: 100vh;

}



/* Menší obrazovky: header jako horní lišta s hamburgerem, obsah pod ní */

@media (max-width: 768px) {

  body:not(.body--login-page) {

    display: block;

  }

  .app-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    min-height: var(--header-height);

    border-right: none;

    grid-column: unset;

    grid-row: unset;

    overflow-x: visible;

  }

  #main-content {

    margin-top: var(--header-height);

    grid-column: unset;

    grid-row: unset;

    max-width: none;

    justify-self: stretch;

  }

  footer {

    grid-column: unset;

    grid-row: unset;

    max-width: none;

  }



  .header-inner {

    max-width: none;

    margin: 0;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    min-height: var(--header-height);

    width: 100%;

  }



  .header-brand {

    padding-bottom: 0;

    border-bottom: none;

  }



  .header-menu {

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

  }



  .header-nav-list {

    flex-direction: column;

  }



  .header-user {

    flex-direction: column;

    margin-top: 0;

    padding-top: 0;

    border-top: none;

  }

}



#main-content.main--login {

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;

  padding: var(--space-l);

  box-sizing: border-box;

}



.page-login {

  width: 100%;

  max-width: 22rem;

  padding: var(--space-xl);

  background: var(--surface-primary);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-m);

  box-shadow: var(--shadow-surface), 0 4px 20px rgba(0, 0, 0, 0.06);

  box-sizing: border-box;

}



.page-login header {

  margin: 0 0 var(--space-l);

  padding: 0;

}



.page-login header h1 {

  margin: 0;

  font-size: 1.25rem;

  font-weight: 600;

  text-align: center;

}



.page-login .login-message {

  margin: 0 0 var(--space-m);

  padding: var(--space-s) var(--space-m);

  border-radius: var(--radius-s);

  font-size: 0.9375rem;

}



.page-login .login-message--timeout {

  background: var(--surface-alt, #f5f5f5);

  border: 1px solid var(--border-subtle);

}



.page-login .login-message--error {

  background: #fef2f2;

  border: 1px solid #fecaca;

  color: #991b1b;

}



.page-login .login-message--info {

  background: var(--surface-alt, #f5f5f5);

  border: 1px solid var(--border-subtle);

}



.page-login .login-forgot {

  margin: var(--space-m) 0 0;

  text-align: center;

  font-size: 0.9375rem;

}



.page-login .login-forgot a {

  color: var(--text-secondary);

  text-decoration: none;

}



.page-login .login-forgot a:hover {

  text-decoration: underline;

}



.page-forgot-password .forgot-password-back {

  margin: var(--space-xl) 0 0;

}



.page-change-password {

  max-width: 22rem;

}



.page-login .login-form .form-group {

  margin-bottom: var(--space-m);

}



.page-login .login-form .form-group:last-of-type {

  margin-bottom: var(--space-l);

}



.page-login .login-form .form-group input {

  max-width: none;

}



.page-login .form-actions {

  margin-top: var(--space-m);

  margin-bottom: 0;

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-l);

  max-width: var(--page-max-width, min(100%, 92rem));

  margin: 0 auto;

  padding: var(--space-m) var(--space-l);

  min-height: var(--header-height);

  box-sizing: border-box;

}



/* Desktop: sidebar vlevo – žádné „centrování“ přes celou šířku okna, svislé menu */

@media (min-width: 769px) {

  .header-inner {

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    gap: var(--space-l);

    max-width: none;

    margin: 0;

    width: 100%;

    min-height: 100vh;

    padding: var(--space-l) var(--space-m);

  }



  .header-brand {

    flex-shrink: 0;

    padding-bottom: var(--space-m);

    border-bottom: 1px solid var(--border-subtle);

  }



  .header-brand-name {

    display: block;

    font-size: 1.0625rem;

    line-height: 1.3;

  }



  .header-menu {

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

    gap: var(--space-xl);

    flex: 1;

    min-height: 0;

  }



  .header-nav {

    display: block;

  }



  .header-nav-list {

    flex-direction: column;

    align-items: stretch;

    gap: var(--space-2xs, 2px);

  }



  /* Horizontální odsazení jen z .header-inner – texty jsou v jedné ose s názvem aplikace */

  .header-nav-list a {

    display: block;

    padding: var(--space-s) 0;

    border-radius: var(--radius-s);

    line-height: 1.35;

  }



  .header-nav-list a:hover {

    background: var(--surface-alt, #f5f5f5);

    text-decoration: none;

  }



  .header-nav-list a[aria-current="page"] {

    background: var(--surface-alt, #f5f5f5);

    font-weight: 600;

  }



  .header-user {

    flex-direction: column;

    align-items: stretch;

    gap: var(--space-xs);

    margin-top: auto;

    padding-top: var(--space-l);

    border-top: 1px solid var(--border-subtle);

  }



  .header-user .user-name {

    font-size: 0.9375rem;

    padding: var(--space-xs) 0;

    word-break: break-word;

  }



  .header-settings-link,

  .header-logout-form button {

    display: block;

    padding: var(--space-s) 0;

    text-align: left;

    border-radius: var(--radius-s);

  }



  .header-settings-link:hover,

  .header-logout-form button:hover {

    background: var(--surface-alt, #f5f5f5);

  }



  .header-logout-form {

    display: block;

  }

}



.header-brand-name {

  font-weight: 600;

  color: var(--text-primary);

  text-decoration: none;

}



.header-nav-list {

  display: flex;

  align-items: center;

  gap: var(--space-l);

  list-style: none;

  margin: 0;

  padding: 0;

}



.header-nav {

  display: flex;

}



.header-nav a {

  color: var(--text-secondary);

  text-decoration: none;

}



.header-nav a[aria-current="page"] {

  color: var(--text-primary);

  font-weight: 500;

}



.header-user {

  display: flex;

  align-items: center;

  gap: var(--space-s);

}



.header-user .user-name {

  color: var(--text-secondary);

}



.header-settings-link {

  color: var(--text-secondary);

  text-decoration: none;

  font: inherit;

}



.header-settings-link:hover {

  text-decoration: underline;

}



.header-logout-form {

  display: inline;

  margin: 0;

}



.header-logout-form button {

  background: none;

  border: none;

  padding: 0;

  font: inherit;

  color: var(--text-secondary);

  cursor: pointer;

  text-decoration: none;

}



.header-logout-form button:hover {

  text-decoration: underline;

}



/* Hamburger tlačítko – na desktopu skryté, na mobilu/tabletu zobrazené */

.header-menu-toggle {

  display: none;

  align-items: center;

  justify-content: center;

  width: 2.75rem;

  height: 2.75rem;

  padding: 0;

  margin: 0;

  border: none;

  background: transparent;

  color: var(--text-primary);

  cursor: pointer;

  border-radius: var(--radius-s);

}

.header-menu-toggle:hover {

  background: var(--surface-alt);

}

.header-menu-toggle:focus {

  outline: 2px solid var(--text-primary);

  outline-offset: 2px;

}

.header-menu-toggle__line {

  position: absolute;

  width: 1.25rem;

  height: 2px;

  background: currentColor;

  border-radius: 1px;

}

.header-menu-toggle__line {

  left: 50%;

  margin-left: -0.625rem;

}

.header-menu-toggle__line:nth-child(1) { top: 50%; margin-top: -6px; }

.header-menu-toggle__line:nth-child(2) { top: 50%; margin-top: -1px; }

.header-menu-toggle__line:nth-child(3) { top: 50%; margin-top: 4px; }

.header-menu-toggle {

  position: relative;

}

.header-menu-toggle .header-menu-toggle__line {

  display: block;

}



/* Desktop: menu v jednom řádku; hamburger skrytý */

.header-menu {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-l);

  flex: 1;

  min-width: 0;

}



/*

 * Sidebar (široká obrazovka): tato pravidla MUSÍ být až za .header-menu / .header-nav / .header-user,

 * protože jinak pozdější globální align-items: center na .header-menu při sloupci centruje celý obsah.

 */

@media (min-width: 769px) {

  .app-header .header-menu {

    align-items: stretch;

    justify-content: flex-start;

  }



  .app-header .header-nav {

    display: block;

    width: 100%;

  }



  .app-header .header-nav-list {

    flex-direction: column;

    align-items: stretch;

    width: 100%;

  }



  .app-header .header-nav-list li {

    width: 100%;

    text-align: left;

  }



  .app-header .header-nav-list a {

    display: block;

    text-align: left;

    width: 100%;

    box-sizing: border-box;

    padding-left: 0;

    padding-right: 0;

  }



  .app-header .header-brand,

  .app-header .header-brand-name {

    text-align: left;

  }



  .app-header .header-user {

    align-items: stretch;

    width: 100%;

  }



  .app-header .header-user .user-name {

    text-align: left;

    display: block;

    width: 100%;

    box-sizing: border-box;

    padding-left: 0;

    padding-right: 0;

  }



  /* Přepis globálního .header-logout-form button { padding: 0 } – stejná osa jako odkazy */

  .app-header .header-settings-link,

  .app-header .header-logout-form button {

    text-align: left;

    width: 100%;

    box-sizing: border-box;

    padding: var(--space-s) 0;

  }

}



/* Responzivní header: pod 768px hamburger + rozbalovací menu */

@media (max-width: 768px) {

  .header-menu-toggle {

    display: flex;

  }

  .header-inner {

    position: relative;

    flex-wrap: nowrap;

  }

  .header-menu {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    flex: none;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: var(--space-m);

    background: var(--bg-surface);

    border-top: 1px solid var(--border-subtle);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    max-height: calc(100vh - var(--header-height));

    overflow-y: auto;

  }

  .app-header.header-menu-open .header-menu {

    display: flex;

  }

  .header-nav {

    width: 100%;

  }

  .header-nav-list {

    flex-direction: column;

    gap: 0;

    align-items: stretch;

  }

  .header-nav-list a {

    display: block;

    padding: var(--space-m);

    min-height: 2.75rem;

    box-sizing: border-box;

    line-height: 1.25;

  }

  .header-user {

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding-top: var(--space-m);

    border-top: 1px solid var(--border-subtle);

  }

  .header-user .user-name {

    padding: var(--space-s) var(--space-m);

    min-height: 2.5rem;

    display: flex;

    align-items: center;

  }

  .header-settings-link,

  .header-logout-form button {

    display: block;

    padding: var(--space-m);

    min-height: 2.75rem;

    text-align: left;

    width: 100%;

    box-sizing: border-box;

    line-height: 1.25;

  }

  .header-logout-form {

    display: block;

  }

}



/* Hlavní obsah – druhý sloupec gridu; patička ve stejném sloupci pod obsahem */

#main-content {

  grid-column: 2;

  grid-row: 1;

  min-width: 0;

  max-width: var(--page-max-width, min(100%, 92rem));

  width: 100%;

  margin: 0;

  justify-self: start;

  padding: var(--page-content-padding-top) var(--space-l) var(--space-m);

  box-sizing: border-box;

}



@media (max-width: 480px) {

  #main-content {

    padding-left: var(--space-m);

    padding-right: var(--space-m);

  }

  .header-inner {

    padding-left: var(--space-m);

    padding-right: var(--space-m);

  }

  .page {

    padding-left: var(--space-m);

    padding-right: var(--space-m);

  }

  .page-header-btn,

  .page-header-buttons button.page-header-btn {

    min-height: 2.75rem;

    height: 2.75rem;

  }

}



/* Nadpis stránky – vždy nahoře, minimální mezera (dashboard, projekty, …) */

.page-header {

  margin: 0 0 var(--space-s);

  padding: 0;

}



.page-header h1 {

  margin: 0;

  font-size: 1.25rem;

  font-weight: 600;

}



/* Tlačítka v hlavičce stránky – jednotně pro všechny stránky (layout/page-start.php) */

.page-header-buttons {

  margin-top: var(--page-header-gap-title-buttons);

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-s);

  align-items: center;

}



.page-header-btn,

.page-header-buttons button.page-header-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 2.25rem;

  height: 2.25rem;

  padding: 0 var(--space-m);

  box-sizing: border-box;

  font-family: inherit;

  font-size: 0.9375rem;

  font-weight: 500;

  line-height: 1.25;

  color: var(--text-primary);

  text-decoration: none;

  border: 1px solid var(--border-subtle, #ccc);

  border-radius: var(--radius-s);

  background: var(--surface-alt, #f5f5f5);

  cursor: pointer;

  margin: 0;

  white-space: nowrap;

}



.page-header-btn:hover {

  text-decoration: none;

  border-color: var(--text-secondary);

  background: var(--surface-hover, #eee);

}



/* Stejná čitelnost jako ostatní sekundární tlačítka – šedá evokovala neaktivní stav */

.page-header-btn--back {

  color: var(--text-primary);

}



.page-header-btn--primary {

  border-color: var(--primary);

  background: var(--primary);

  color: #fff;

}



.page-header-btn--primary:hover {

  background: var(--primary-hover);

  border-color: var(--primary-hover);

  color: #fff;

}



.visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



/* Stránka – jednotný rozestup mezi sekcemi (filtry, seznam, …), ladění přes --page-section-gap */

.page {

  display: flex;

  flex-direction: column;

  gap: var(--page-section-gap);

  min-width: 0;

}



.section {

  display: flex;

  flex-direction: column;

  gap: var(--space-s);

  min-width: 0;

  max-width: 100%;

}



.section h2 {

  margin: 0;

  font-size: 1rem;

  font-weight: 600;

}



.section--projects .surface,

.section--attention .surface {

  margin: 0;

}



/* Dashboard – seznam „projekty vyžadující pozornost“: název (klikací) + důvod + datum */

.dashboard-attention-list .attention-list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.dashboard-attention-list .attention-item {

  padding: var(--space-s) 0;

  border-bottom: 1px solid var(--border-subtle);

  display: flex;

  flex-direction: column;

  gap: var(--space-2xs, 2px);

}



.dashboard-attention-list .attention-item:last-child {

  border-bottom: none;

}



.dashboard-attention-list .attention-item__name {

  font-weight: 600;

  color: var(--text-primary);

  text-decoration: none;

}



.dashboard-attention-list .attention-item__name:hover {

  text-decoration: underline;

}



.dashboard-attention-list .attention-item__reason {

  color: var(--text-secondary);

  font-size: 0.9375rem;

}



/* Akční dashboard – položka = odkaz (typ problému + projekt) */

.dashboard-attention-list .attention-item--action .attention-item__link {

  display: flex;

  flex-direction: column;

  gap: var(--space-2xs, 2px);

  color: inherit;

  text-decoration: none;

}



.dashboard-attention-list .attention-item--action .attention-item__link:hover {

  text-decoration: underline;

}



.dashboard-attention-list .attention-item--action .attention-item__label {

  font-weight: 600;

  color: var(--text-primary);

}



.dashboard-attention-list .attention-item--action .attention-item__project {

  color: var(--text-secondary);

  font-size: 0.9375rem;

}



.dashboard-attention-empty {

  margin: 0;

  color: var(--text-secondary);

}



/* Dashboard – stavy „vše v pořádku“ a „zatím žádné projekty“ (jedna informační plocha, klidný tón) */

.dashboard-state {

  margin: 0;

}



.dashboard-state__title {

  margin: 0 0 var(--space-s);

  font-weight: 600;

  color: var(--text-primary);

}



.dashboard-state__text {

  margin: 0;

  color: var(--text-secondary);

}



/* Poslední aktivita – poznámka méně výrazná (šedá), seznam v rámečku jako „Vyžaduje pozornost“ */

.dashboard-recent-list {

  margin: 0;

}

.dashboard-recent-note {

  margin: 0 0 var(--space-m);

  color: var(--text-secondary);

  font-size: 0.9375rem;

  line-height: 1.4;

}

.dashboard-recent-activity {

  list-style: none;

  margin: 0;

  padding: 0;

}

.dashboard-recent-activity li {

  padding: var(--space-s) 0;

  border-bottom: 1px solid var(--border-subtle);

  color: var(--text-primary);

}

.dashboard-recent-activity li:last-child {

  border-bottom: none;

}



.surface {

  padding: var(--space-m) var(--space-l);

  border-radius: var(--radius-m);

  border: 1px solid var(--border-subtle);

  box-shadow: var(--shadow-surface, 0 1px 3px rgba(0, 0, 0, 0.05));

}



.surface--primary {

  background: var(--surface-primary);

}



.project-list p {

  margin: 0 0 var(--space-s);

}



.project-list p:last-child {

  margin-bottom: 0;

}



.project-list a {

  color: var(--text-primary);

  text-decoration: none;

}



.project-list a:hover {

  text-decoration: underline;

}



/* Stránka projektu – dokumentový charakter */

.page-project .project-header {

  margin-bottom: var(--space-xl);

}



.page-project .daily-logs-list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.page-project .daily-log-item {

  border-bottom: 1px solid var(--border-subtle);

  padding: var(--space-s) 0;

}



.page-project .daily-log-item a {

  color: var(--text-primary);

  text-decoration: none;

}



.page-project .daily-log-status {

  color: var(--text-secondary);

  margin-left: var(--space-s);

}



.page-dashboard .projects-list,

.page-projects .projects-list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.page-dashboard .projects-list li,

.page-projects .projects-list li {

  padding: var(--space-s) 0;

  border-bottom: 1px solid var(--border-subtle);

}



.page-dashboard .projects-list a,

.page-projects .projects-list a {

  color: var(--text-primary);

  text-decoration: none;

}



footer {

  grid-column: 2;

  grid-row: 2;

  align-self: end;

  max-width: var(--page-max-width, min(100%, 92rem));

  width: 100%;

  margin: 0;

  justify-self: start;

  padding: var(--space-m) var(--space-l);

  border-top: 1px solid var(--border-subtle);

  color: var(--text-secondary);

  font-size: 0.9rem;

  box-sizing: border-box;

}



footer a {

  color: var(--text-secondary);

  text-decoration: underline;

}



footer a:hover {

  color: var(--text-primary);

}



/* Podmínky / ochrana údajů */

.legal-content h3 {

  margin: var(--space-l) 0 var(--space-s);

  font-size: 1.1rem;

}



.legal-content h3:first-child {

  margin-top: 0;

}



.legal-operator {

  font-style: normal;

  margin: var(--space-m) 0;

  padding: var(--space-m);

  background: var(--surface-secondary);

  border-radius: var(--radius-s);

}



.legal-operator a {

  color: var(--link-color, #1f3a5f);

}



.legal-updated {

  color: var(--text-secondary);

  font-size: 0.9em;

  margin-top: var(--space-l);

}



/* Detail denního záznamu – struktura, čitelnost (bez barev/ikon) */

.page-daily-log {

  display: flex;

  flex-direction: column;

  gap: var(--space-xl);

}



.page-daily-log .daily-log-header h1 {

  margin: 0 0 var(--space-m);

  font-size: 1.25rem;

}



.page-daily-log .daily-log-meta {

  margin: 0;

  display: grid;

  grid-template-columns: auto 1fr;

  gap: var(--space-2xs, 2px) var(--space-m);

  align-items: baseline;

}



.page-daily-log .daily-log-meta dt {

  font-weight: 600;

  color: var(--text-primary);

}



.page-daily-log .daily-log-meta dd {

  margin: 0;

  color: var(--text-secondary);

}



.page-daily-log .daily-log-meta dd a {

  color: var(--text-primary);

  text-decoration: none;

}



.page-daily-log .daily-log-warning {

  padding: var(--space-m);

  border: 1px solid var(--border-subtle);

}



.page-daily-log .daily-log-warning h2,

.page-daily-log .daily-log-factual h2,

.page-daily-log .daily-log-photos h2,

.page-daily-log .daily-log-changes h2,

.page-daily-log .daily-log-statements h2,

.page-daily-log .daily-log-additional h2,

.page-daily-log .daily-log-actions h2 {

  margin: 0 0 var(--space-m);

  font-size: 1.125rem;

  font-weight: 600;

}



.page-daily-log .daily-log-factual h3,

.page-daily-log .daily-log-statement h3 {

  margin: var(--space-m) 0 var(--space-s);

  font-size: 1rem;

  font-weight: 600;

}



.page-daily-log .daily-log-factual h3:first-of-type {

  margin-top: 0;

}



.page-daily-log .daily-log-factual p,

.page-daily-log .daily-log-warning p {

  margin: 0 0 var(--space-s);

}



.page-daily-log .daily-log-photo-item {

  margin-bottom: var(--space-l);

}

.page-daily-log .daily-log-photo-meta {

  margin: var(--space-s) 0 var(--space-2xs);

  color: var(--text-secondary);

  font-size: 0.9rem;

}

.page-daily-log .daily-log-photo-desc {

  margin: 0;

  font-size: 0.9375rem;

}

.page-daily-log .daily-log-photo-link {

  display: inline-block;

  margin-bottom: var(--space-s);

  padding: 0;

  border: none;

  background: none;

  cursor: pointer;

  font: inherit;

}

.page-daily-log .daily-log-photo-thumb {

  max-width: 100%;

  max-height: 280px;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: var(--radius-s);

  border: 1px solid var(--border-subtle);

}

.page-daily-log .daily-log-photos-list,

.page-daily-log .daily-log-changes-list,

.page-daily-log .daily-log-additional-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: var(--space-m);

}



.page-daily-log .daily-log-changes-list li,

.page-daily-log .daily-log-additional-list li {

  padding: var(--space-m) var(--space-l);

}



.page-daily-log .daily-log-statement {

  margin-bottom: var(--space-l);

}



.page-daily-log .statement-history-heading {

  margin: var(--space-m) 0 var(--space-s);

  font-size: 0.9375rem;

  font-weight: 600;

}

.page-daily-log .statement-history-list {

  margin: 0;

  padding-left: var(--space-l);

  list-style: decimal;

}

.page-daily-log .statement-history-item {

  margin-bottom: var(--space-s);

}

.page-daily-log .statement-history-date {

  color: var(--text-secondary);

  font-size: 0.9rem;

}

.page-daily-log .statement-history-comment {

  display: block;

  margin-top: var(--space-xs);

  margin-left: 0;

}

.page-daily-log .statement-history-empty {

  margin: 0;

  color: var(--text-secondary);

  font-size: 0.9375rem;

}

.page-daily-log .statement-history-backfill-note {

  margin: var(--space-s) 0 0;

  color: var(--text-secondary);

  font-size: 0.875rem;

  font-style: italic;

}



.page-daily-log .statement-meta,

.page-daily-log .additional-meta,

.page-daily-log .photo-date {

  font-size: 0.9rem;

  color: var(--text-secondary);

}



.page-daily-log .additional-record-photo {

  margin: var(--space-m) 0 0;

}



.page-daily-log .additional-record-photo__trigger {

  display: inline-block;

  padding: 0;

  margin: 0;

  border: none;

  background: none;

  cursor: pointer;

  font: inherit;

  line-height: 0;

  border-radius: var(--radius-s);

  overflow: hidden;

}



.page-daily-log .additional-record-photo__trigger:hover .additional-record-photo__img {

  border-color: var(--primary);

  box-shadow: 0 0 0 2px rgba(44, 44, 46, 0.2);

}



.page-daily-log .additional-record-photo__img {

  max-width: 120px;

  width: auto;

  max-height: 120px;

  height: auto;

  display: block;

  border: 2px solid var(--border-subtle, #ddd);

  border-radius: var(--radius-s);

  transition: border-color 0.2s, box-shadow 0.2s;

}



.page-daily-log .additional-record-photo-desc {

  display: block;

  margin-top: var(--space-xs, 0.25rem);

  font-size: 0.85rem;

  color: var(--text-secondary);

  max-width: 320px;

}



/* Vyskakovací okno – zvětšená fotografie */

.photo-modal {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.92);

  display: none;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  padding: var(--space-l);

  box-sizing: border-box;

}



.photo-modal.photo-modal--open {

  display: flex !important;

}



.photo-modal__content {

  display: flex;

  align-items: center;

  justify-content: center;

  max-width: 95%;

  max-height: 95%;

}



.photo-modal__content img {

  max-width: 100%;

  max-height: 90vh;

  width: auto;

  height: auto;

  object-fit: contain;

  border-radius: var(--radius-m);

}



.photo-modal__close {

  position: absolute;

  top: var(--space-m);

  right: var(--space-m);

  width: 2.5rem;

  height: 2.5rem;

  padding: 0;

  border: none;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.5);

  color: #fff;

  font-size: 1.75rem;

  line-height: 1;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.2s;

}



.photo-modal__close:hover {

  background: rgba(0, 0, 0, 0.8);

}



/* Náhled vybrané fotky ve formuláři „Přidat dodatečný záznam“ */

.additional-photo-preview {

  margin-top: var(--space-s);

}



.additional-photo-preview__img {

  max-width: 280px;

  width: 100%;

  height: auto;

  display: block;

  border: 1px solid var(--border-subtle, #ddd);

  border-radius: var(--radius-s);

}



.page-daily-log .daily-log-actions ul {

  margin: var(--space-s) 0 0;

  padding-left: var(--space-l);

}



/* Seznam denních záznamů (logs), formulář vytvoření, administrace, export */

.page-daily-logs-header,

.page-admin header,

.page-export header,

.page-daily-log-create header {

  margin-bottom: var(--space-l);

}



.page-daily-logs-nav,

.project-actions {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-m);

  margin-top: var(--space-s);

}



.page-daily-logs-nav a,

.project-actions a {

  color: var(--text-primary);

  text-decoration: none;

}



.page-daily-logs-nav a:hover,

.project-actions a:hover {

  text-decoration: underline;

}



.daily-logs-list {

  list-style: none;

  margin: 0;

  padding: 0;

}



.daily-log-row {

  border-bottom: 1px solid var(--border-subtle);

}



.daily-log-row-link {

  display: block;

  padding: var(--space-s) 0;

  color: var(--text-primary);

  text-decoration: none;

}



.daily-log-row-link:hover {

  text-decoration: underline;

}



.daily-log-summary {

  display: block;

  color: var(--text-secondary);

  font-size: 0.9375rem;

}



.daily-log-status {

  display: inline-block;

  margin-top: var(--space-2xs, 2px);

  font-size: 0.9rem;

  color: var(--text-secondary);

}



.page-note,

.form-note {

  margin-top: var(--space-l);

  font-size: 0.9rem;

  color: var(--text-secondary);

}



.admin-nav ul {

  list-style: none;

  margin: var(--space-m) 0 0;

  padding: 0;

}



.admin-nav li {

  margin-bottom: var(--space-s);

}



.admin-nav a {

  color: var(--text-primary);

  text-decoration: none;

}



.admin-nav a:hover {

  text-decoration: underline;

}



.admin-actions {

  display: flex;

  gap: var(--space-m);

  margin-top: var(--space-m);

  flex-wrap: wrap;

}



/* Menší rozestupy mezi sekcemi na stránce správy staveb */

#page-admin-projects {

  gap: var(--space-s);

}



.admin-message {

  margin: 0 0 var(--space-m);

  padding: var(--space-s) var(--space-m);

  border-radius: var(--radius-s);

}

.admin-message--success {

  background: #ecfdf5;

  border: 1px solid #a7f3d0;

  color: #065f46;

}

.admin-message--error {

  background: #fef2f2;

  border: 1px solid #fecaca;

  color: #991b1b;

}



.admin-message--success.admin-message--fade-out {

  opacity: 0;

  transition: opacity 0.4s ease;

}

.admin-message--success.admin-message--hidden {

  display: none;

}



.admin-form h3 {

  margin: 0 0 var(--space-m);

  font-size: 1rem;

  font-weight: 600;

}



.admin-assign-list {

  list-style: none;

  margin: var(--space-m) 0;

  padding: 0;

}

.admin-assign-list li {

  margin-bottom: var(--space-s);

}

.admin-assign-label {

  display: inline-flex;

  align-items: center;

  gap: var(--space-s);

  cursor: pointer;

}

.admin-assign-label input[type="checkbox"] {

  margin: 0;

}



.form-group {

  margin-bottom: var(--space-m);

}



.form-group label {

  display: block;

  margin-bottom: var(--space-2xs, 2px);

  font-weight: 500;

}



.form-group input[type="text"],

.form-group input[type="email"],

.form-group input[type="password"],

.form-group input[type="date"],

.form-group select,

.form-group textarea {

  width: 100%;

  max-width: 40rem;

  padding: var(--space-s) var(--space-m);

  box-sizing: border-box;

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-s);

  background: var(--bg-surface);

  font-family: inherit;

  font-size: 1rem;

}



/* Export kód – šedá nápověda (dokončení existujícího kódu) pod reálným vstupem */

.export-code-input-wrap {

  position: relative;

  width: 100%;

  max-width: 40rem;

}



.export-code-input-wrap .export-code-ghost {

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  padding: var(--space-s) var(--space-m);

  box-sizing: border-box;

  border: 1px solid transparent;

  border-radius: var(--radius-s);

  pointer-events: none;

  white-space: nowrap;

  overflow: hidden;

  font-family: inherit;

  font-size: 1rem;

  line-height: normal;

  display: flex;

  align-items: center;

  z-index: 0;

  text-align: left;

}



.export-code-input-wrap .export-code-ghost-prefix {

  color: transparent;

}



.export-code-input-wrap .export-code-ghost-suffix {

  color: var(--text-secondary, #888);

}



.export-code-input-wrap .export-code-input {

  position: relative;

  z-index: 1;

  width: 100%;

  max-width: none;

  background: transparent !important;

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  outline: 2px solid var(--text-primary);

  outline-offset: 2px;

  border-color: var(--text-primary);

}



/* Úzké pole pro výběr data (kalendář) – šířka odpovídá délce datumu */

.form-group--date input[type="date"] {

  width: 10.5rem;

  max-width: 10.5rem;

}



/* Sekce počasí – nový / úprava denního záznamu */

.form-subheading {

  margin: 0 0 var(--space-s);

  font-size: 1rem;

  font-weight: 600;

}



.form-group--weather .form-hint {

  margin-top: 0;

  margin-bottom: var(--space-m);

}



.form-group--checkbox .label-checkbox {

  display: flex;

  align-items: flex-start;

  gap: var(--space-s);

  font-weight: 500;

  cursor: pointer;

}



.form-group--checkbox .label-checkbox input {

  margin-top: 0.2rem;

  flex-shrink: 0;

}



.weather-outdoor-fields {

  border: none;

  margin: 0 0 var(--space-m);

  padding: 0;

  min-width: 0;

}



.weather-outdoor-fields--muted {

  opacity: 0.45;

  pointer-events: none;

}



/* Obloha + vítr v jednom řádku, úzké selecty podle typického textu voleb */

.weather-outdoor-fields__select-row {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-l);

  align-items: flex-end;

  margin-bottom: var(--space-m);

}



.weather-outdoor-fields__select-cell {

  display: flex;

  flex-direction: column;

  gap: var(--space-2xs, 2px);

  min-width: 0;

}



.weather-outdoor-fields__select-cell label {

  display: block;

  margin-bottom: 0;

  font-weight: 500;

}



.weather-outdoor-fields select.weather-select,

.weather-outdoor-fields .form-group--temp input[type="text"] {

  min-height: 2.5rem;

  box-sizing: border-box;

  line-height: 1.25;

  font: inherit;

}



/* Nejdelší volby: obloha „— neuvádím —“, vítr „Nárazový nebo velmi silný vítr“ + padding řádku */

.weather-outdoor-fields select.weather-select--sky {

  width: auto;

  min-width: 11.5rem;

  max-width: 100%;

  padding-right: var(--space-xl);

  field-sizing: content;

}



.weather-outdoor-fields select.weather-select--wind {

  width: auto;

  min-width: 20rem;

  max-width: 100%;

  padding-right: var(--space-xl);

  field-sizing: content;

}



@supports not (field-sizing: content) {

  .weather-outdoor-fields select.weather-select--sky {

    min-width: 12.5rem;

  }



  .weather-outdoor-fields select.weather-select--wind {

    min-width: 22rem;

  }

}



.weather-outdoor-fields .form-group--temp input[type="text"] {

  max-width: 8rem;

}



.form-row--weather-temps {

  margin-bottom: 0;

}



.form-row--weather-temps .form-group--temp {

  margin-bottom: var(--space-m);

}



@media (min-width: 480px) {

  .form-row--weather-temps {

    display: grid;

    grid-template-columns: minmax(0, max-content) minmax(0, max-content);

    gap: var(--space-l);

    align-items: end;

  }



  .form-row--weather-temps .form-group--temp {

    margin-bottom: 0;

  }

}



/* Pole Role – šířka jen o málo větší než nejdelší text (Zhotovitel) */

.form-group--role select {

  width: auto;

  max-width: 12rem;

  min-width: 10rem;

}



/* Formulář Přidat uživatele – levý sloupec: titul před, titul za, role (stejná šířka); pravý sloupec: jméno, příjmení, poznámka */

.admin-form--add-user .form-group:first-of-type input {

  max-width: 40rem;

}

/* Rozestup mezi řádky se dvěma poli = stejný jako mezi E-mail a první řádek (var(--space-m)) */

.admin-form--add-user .form-row--two {

  display: grid;

  grid-template-columns: 12rem 1fr;

  grid-template-rows: auto auto;

  gap: 0 var(--space-m);

  row-gap: var(--space-2xs, 2px);

  margin-bottom: var(--space-m);

  max-width: 40rem;

}

.admin-form--add-user .form-row--two .form-group {

  min-width: 0;

  display: grid;

  grid-template-rows: subgrid;

  grid-row: span 2;

  align-items: start;

}

.admin-form--add-user .form-row--two .form-group label {

  margin-bottom: 0;

  padding-bottom: var(--space-2xs, 2px);

}

/* Levý sloupec: titul před, titul za, role – pevná šířka 12rem (text v Role se nezkracuje) */

.admin-form--add-user .form-row--two .form-group:first-child input,

.admin-form--add-user .form-row--two .form-group:first-child select {

  width: 100%;

  max-width: 100%;

  box-sizing: border-box;

}

.admin-form--add-user .form-row--two .form-group--role select {

  width: 100%;

  max-width: 100%;

  min-width: 0;

}

/* Pravý sloupec: jméno, příjmení, poznámka – vyplní sloupec do konce řádku */

.admin-form--add-user .form-row--two .form-group:last-child input {

  max-width: none;

  width: 100%;

}

.admin-form--add-user .form-row--two .form-group--role {

  margin-bottom: 0;

}

.admin-form--add-user .form-row--two .form-group:last-child {

  margin-bottom: 0;

}



.form-actions {

  margin-top: var(--space-l);

  display: flex;

  gap: var(--space-m);

}



/* Zarovnání tlačítka Zrušit s řádkem vstupních polí (v gridu na tabletu) */

.form-actions--align-inputs {

  display: flex;

  align-items: flex-end;

}



.button-submit,

.form-actions button[type="submit"] {

  padding: var(--space-s) var(--space-l);

  font-weight: 500;

  cursor: pointer;

  font-family: inherit;

  font-size: 0.9375rem;

  color: #fff;

  background: var(--primary);

  border: 1px solid var(--primary);

  border-radius: var(--radius-s);

}



.button-submit:hover,

.form-actions button[type="submit"]:hover {

  background: var(--primary-hover);

  border-color: var(--primary-hover);

  color: #fff;

}



/* Odkaz stylovaný jako primární tlačítko (např. Zpět na přihlášení) */

a.button-submit {

  display: inline-block;

  text-decoration: none;

  text-align: center;

  line-height: 1.25;

}



a.button-submit:hover {

  text-decoration: none;

}



/* Tlačítko Zrušit u filtrů – třída pro snadné doladění vzhledu při ladění designu */

.btn-reset {

  display: inline-flex;

  align-items: center;

  min-height: 2.25rem;

  padding: var(--space-s) var(--space-m);

  box-sizing: border-box;

  color: var(--text-secondary);

  text-decoration: none;

  font-size: 1rem;

  cursor: pointer;

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-s);

  background: transparent;

}

.btn-reset:hover {

  color: var(--text-primary);

  text-decoration: none;

  border-color: var(--text-secondary);

}



/* Akce v tabulce (Otevřít) – nenápadné tlačítko ve stylu Zrušit, konzistentní s celou aplikací */

.btn-cell {

  display: inline-flex;

  align-items: center;

  min-height: 2rem;

  padding: var(--space-2xs, 2px) var(--space-s);

  box-sizing: border-box;

  color: var(--text-primary);

  text-decoration: none;

  font-size: 0.9375rem;

  cursor: pointer;

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-s);

  background: transparent;

  white-space: nowrap;

}

.btn-cell:hover {

  text-decoration: none;

  border-color: var(--text-secondary);

  background: var(--surface-alt, #f5f5f5);

}



button.btn-cell {

  font: inherit;

  appearance: none;

  -webkit-appearance: none;

}



.admin-project-status-form {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--space-s);

  margin: 0;

}



.admin-project-status-form select {

  min-width: 9.5rem;

  max-width: 100%;

}



.btn-cell--danger {

  color: var(--color-danger, #b91c1c);

  border-color: var(--color-danger, #b91c1c);

}

.btn-cell--danger:hover {

  background: var(--color-danger, #b91c1c);

  color: #fff;

  border-color: var(--color-danger, #b91c1c);

}



.button-cancel,

.button-link {

  color: var(--text-secondary);

  text-decoration: none;

}



.button-cancel:hover,

.button-link:hover {

  text-decoration: underline;

}



/* Správa uživatelů a přiřazení uživatelů – live-search (jedno pole + Zrušit) */

#admin-assign-live-filter {

  margin-bottom: var(--space-m);

}

@media (min-width: 500px) {

  #admin-users-live-filter,

  #admin-assign-live-filter {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto;

    gap: var(--space-s);

    align-items: end;

  }

  #admin-users-live-filter .form-group,

  #admin-assign-live-filter .form-group {

    margin-bottom: 0;

  }

  #admin-users-live-filter .form-actions,

  #admin-assign-live-filter .form-actions {

    margin-top: 0;

    margin-bottom: 0;

    align-items: flex-end;

  }

  #admin-users-live-filter .btn-reset,

  #admin-assign-live-filter .btn-reset {

    height: 2.5rem;

    min-height: 2.5rem;

    margin: 0;

    flex-shrink: 0;

  }

}



/* Stavby / denní záznamy – tabulka (page-header použit výše) */



/* Na tabletu filtry do jednoho řádku; vstupní pole a tlačítko na jedné dolní linii */

@media (min-width: 600px) {

  #projects-live-filter,

  #admin-projects-live-filter {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;

    gap: var(--space-m);

    align-items: end;

  }

  #projects-live-filter .form-group,

  #admin-projects-live-filter .form-group {

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    margin-bottom: 0; /* bez margin-bottom, jinak jsou pole výš než tlačítko */

  }

  /* Stejná výška pole a tlačítka = vizuálně v jedné řadě */

  #projects-live-filter .form-group input,

  #admin-projects-live-filter .form-group input {

    height: 2.5rem;

    min-height: 2.5rem;

    margin-top: auto;

    box-sizing: border-box;

  }

  #projects-live-filter .form-actions,

  #admin-projects-live-filter .form-actions {

    margin-top: 0;

    margin-bottom: 0;

    justify-content: flex-end;

    align-items: flex-end;

  }

  #projects-live-filter .btn-reset,

  #admin-projects-live-filter .btn-reset {

    height: 2.5rem;

    min-height: 2.5rem;

    margin: 0;

    flex-shrink: 0;

  }

  #projects-live-filter .form-actions--align-inputs,

  #admin-projects-live-filter .form-actions--align-inputs {

    padding-bottom: 0;

  }

}



/* Přehled denních záznamů stavby – filtry v jednom řádku, úzká pole Datum od / do */

@media (min-width: 600px) {

  #project-logs-live-filter {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 10.5rem 10.5rem auto;

    gap: var(--space-m);

    align-items: end;

  }

  #project-logs-live-filter .form-group {

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    margin-bottom: 0;

  }

  #project-logs-live-filter .form-group input {

    height: 2.5rem;

    min-height: 2.5rem;

    margin-top: auto;

    box-sizing: border-box;

  }

  #project-logs-live-filter .form-group--date input[type="date"] {

    width: 10.5rem;

    max-width: none;

  }

  #project-logs-live-filter .form-actions {

    margin-top: 0;

    margin-bottom: 0;

    justify-content: flex-end;

    align-items: flex-end;

  }

  #project-logs-live-filter .btn-reset {

    height: 2.5rem;

    min-height: 2.5rem;

    margin: 0;

    flex-shrink: 0;

  }

  #project-logs-live-filter .form-actions--align-inputs {

    padding-bottom: 0;

  }

}



/* Text „Aktivní filtr“ – zobrazuje JS, když je v nějakém poli alespoň jeden znak */

.filter-active-label {

  display: none;

  font-weight: 500;

  color: var(--text-primary);

}



.filter-result-note {

  margin: var(--space-m) 0 0;

  padding-top: var(--space-m);

  border-top: 1px solid var(--border-subtle);

  font-size: 0.9rem;

  color: var(--text-secondary);

}



.projects-table-wrap {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  max-width: 100%;

  min-width: 0;

}



.projects-table {

  width: 100%;

  border-collapse: collapse;

}



.projects-table th,

.projects-table td {

  padding: var(--space-s) var(--space-m);

  text-align: left;

  border-bottom: 1px solid var(--border-subtle);

  overflow-wrap: break-word;

  word-break: break-word;

}



.projects-table th {

  font-weight: 600;

}



.projects-table tbody tr:hover {

  background: rgba(0, 0, 0, 0.02);

}



.projects-table--center {

  text-align: center;

}



.admin-assign-remove-form {

  display: inline-block;

  margin: 0;

}

.admin-assign-remove-form button[type="submit"] {

  font: inherit;

  cursor: pointer;

}



.projects-table a {

  color: var(--text-primary);

  text-decoration: none;

}



.projects-table a:hover {

  text-decoration: underline;

}



.projects-table .text-secondary {

  color: var(--text-secondary);

  font-size: 0.9rem;

}



/* Tisk / Export do PDF – na stránce denního záznamu skrýt navigaci, tisknout jen obsah */

@media print {

  body {

    padding-top: 0;

  }

  .app-header,

  .page-header-buttons {

    display: none !important;

  }

  .page-header h1 {

    margin-bottom: 0;

  }

}