body {
    color: #f5f5f5;
}

.admin-body{
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    color: black;
}

.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.form-signin  h1{
    text-align: center;
    color: black;
}

.form-floating {
    color: black;
}
.form-signin .form-floating:focus-within {
    z-index: 2;
}

.form-signin input[name="jmeno"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin input[name="heslo"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.admin {
    max-width: 1000px;
    width: 100%;
    margin: auto;

}
#seznam .btn {
    margin-right: 0.25em;
    margin-left: 0.25em;
    margin-top: 0.15em;
    margin-bottom: 0.15em;
}

i.fa-solid.fa-floppy-disk{
    margin: 0.3em;
}

/* Toggle zobrazení hesla v přihlašovacích formulářích */
.password-toggle {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: .25rem;
  color: #6c757d;
}
.password-toggle:focus { outline: none; }

/* Jednotný spacing a login-info v hlavičce adminu */
header .header-buttons .btn { margin-right: .5rem; }
header .header-buttons .btn:last-child { margin-right: 0; }
header .header-buttons .login-info { color: #212529; }

/* Responzivní úpravy pro editor na mobilu */
@media (max-width: 600px) {
  .admin {
    max-width: 100vw;
    padding: 0 5px;
  }
  /* Plnošířkové prvky v hlavičce administrace */
  .header-buttons .btn,
  .header-buttons form,
  .header-buttons form button {
    width: 100% !important;
  }
  .header-buttons {
    gap: 0.5rem;
  }
  .form-signin {
    max-width: 100vw;
    padding: 10px;
    margin: 0;
  }
  .editor, .wysiwyg, .tox, .tox-tinymce, textarea.editor {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    font-size: 1rem;
  }
  .tox .tox-editor-header, .tox .tox-toolbar {
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .tox .tox-statusbar {
    font-size: 0.9em;
  }
  .form-floating, .form-signin input, .form-signin textarea {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  #seznam .btn {
    width: 100%;
    margin: 0.2em 0;
    font-size: 1em;
  }
}

/* Nové styly pro tlačítka v hlavičce administrace */
@media (max-width: 768px) {
  .header-buttons {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    align-items: stretch;
  }
  .header-buttons .btn,
  .header-buttons form,
  .header-buttons form .btn {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* Zvýrazněný nadpis stránky v administraci */
.site-admin-wrapper header .page-title.title-highlight {
  color: black;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 2rem);
  margin: 0;
  padding-bottom: .5rem;
  border-bottom: 3px solid rgba(25, 135, 84, 0.35); /* Bootstrap success zelená s průhledností */
}

.site-admin-wrapper header .page-title .fa-newspaper {
  color: #198754; /* text-success */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.1));
}

/* Pozice tlačítek vůči nadpisu na menších displejích */
@media (max-width: 768px) {
  .site-admin-wrapper header {
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem;
  }
}

/* --- Responzivní tabulka aktualit bez horizontálního scrollu --- */
@media (max-width: 768px) {
  /* Vypnout horizontální posuvník pro naši tabulku uvnitř administrace */
  .site-admin-wrapper .table-responsive {
    overflow-x: visible;
  }

  /* Převést tabulku na "karty" s popisky z data-label */
  table.table-cards {
    border-collapse: separate;
    border-spacing: 0;
  }
  table.table-cards thead {
    display: none;
  }
  table.table-cards tbody,
  table.table-cards tr,
  table.table-cards td {
    display: block;
    width: 100% !important;
  }
  table.table-cards tr {
    background: #ffffff;
    border: 1px solid rgb(0, 0, 0);
    border-radius: .5rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
  }
  table.table-cards td {
    border: 0 !important;
    padding: .25rem 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .95rem;
    word-break: break-word;
  }
  table.table-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #6c757d;
    flex: 0 0 auto;
    margin-right: .5rem;
  }
  /* První sloupec s checkboxem bez popisku */
  table.table-cards td:first-child::before { content: ""; }
  /* Sloupec s úchopem na přesun – menší šířka, bez labelu */
  table.table-cards td:nth-child(2) {
    justify-content: flex-start;
  }
  table.table-cards td:nth-child(2)::before { content: ""; }

  /* Akční tlačítka zalomit do více řádků */
  table.table-cards td[data-label="Akce"] .btn-group {
    display: flex !important; /* přepíše inline-flex z Bootstrapu */
    flex-wrap: wrap;
    gap: .35rem;
  }
  table.table-cards td[data-label="Akce"] .btn-group .btn {
    padding: .25rem .5rem;
    font-size: .9rem;
  }
}

/* Ještě menší zařízení – drobné zmenšení písma */
@media (max-width: 480px) {
  .site-admin-wrapper { font-size: .95rem; }
  table.table-cards td { font-size: .9rem; }
  .site-admin-wrapper .btn { font-size: .9rem; }
}

/* --- Responzivní editor odstavců v detailech aktuality --- */
@media (max-width: 768px) {
  #paragraphs-container {
    overflow: visible; /* zajistí, že nic nepřeteče s horizontálním posuvníkem */
  }
  #paragraphs-container .paragraph-item {
    display: flex;
    flex-direction: column; /* položky pod sebe */
    align-items: stretch;
    gap: .5rem;
  }
  #paragraphs-container .paragraph-item .form-select {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #paragraphs-container .paragraph-item textarea {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important; /* potlačí ruční změnu výšky (inline style) */
    min-height: 120px; /* rozumné minimum pro editaci */
    font-size: .95rem; /* mírné zmenšení písma */
    line-height: 1.35;
  }
  #paragraphs-container .paragraph-item .btn {
    align-self: flex-end; /* tlačítko koše zarovnat doprava */
  }
}
