/* ========================================
   ZÁKLAD
======================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  padding: 30px;

  font-family: Arial, Helvetica, sans-serif;

  background: #b00000;
  color: #fff;
}


/* ========================================
   ODKAZY
======================================== */

a {
  color: #900000;
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  color: #d00000;
  text-decoration: underline;
}

body > a {
  color: #fff;
  margin-right: 15px;
}

body > a:hover {
  color: #ffcccc;
}


/* ========================================
   KATEGORIE - MASONRY
======================================== */

.categories-container {
  max-width: 1600px;
  margin: 30px auto;

  column-count: 3;
  column-gap: 20px;
}


/* ========================================
   KATEGORIE
======================================== */

.categories {
  display: inline-block;

  width: 100%;

  margin: 0 0 20px 0;
  padding: 20px;

  background: #fff;
  color: #222;

  border: 1px solid #ddd;
  border-radius: 16px;

  box-shadow:
          0 8px 25px rgba(0, 0, 0, 0.25);

  text-align: center;

  /*
   * Nesmí se rozdělit mezi sloupce
   */
  break-inside: avoid;
  page-break-inside: avoid;

  /*
   * Důležité pro masonry
   */
  vertical-align: top;
}


/* ========================================
   NADPIS KATEGORIE
======================================== */

.categories h2 {
  margin: 0 0 15px;
  padding-bottom: 10px;

  color: #900000;

  border-bottom: 2px solid #ddd;
}


/* ========================================
   ÚKOLY
======================================== */

.items,
.highlighted {
  display: block;

  width: 100%;

  border: none;
  border-radius: 12px;

  padding: 14px 16px;
  margin: 5px 0;

  cursor: pointer;

  text-align: left;

  font-family: inherit;
  font-size: 15px;

  transition:
          transform 0.15s ease,
          box-shadow 0.15s ease,
          background 0.15s ease;
}


/* Normální úkol */

.items {
  background: #f2f2f2;
  color: #222;
}

.items:hover {
  background: #e4e4e4;

  transform: translateY(-2px);

  box-shadow:
          0 5px 12px rgba(0, 0, 0, 0.15);
}


/* Zvýrazněný úkol */

.highlighted {
  background: #ff4d4d;
  color: #fff;
}

.highlighted:hover {
  background: #e52e2e;

  transform: translateY(-2px);

  box-shadow:
          0 5px 12px rgba(0, 0, 0, 0.20);
}


/* Text v úkolech */

.items p,
.highlighted p {
  margin: 3px 0;
}

.items p:first-child,
.highlighted p:first-child {
  font-weight: bold;
  font-size: 17px;
}


/* ========================================
   TLAČÍTKA
======================================== */

.add,
.categories > button:not(.items):not(.highlighted) {
  display: block;

  width: 100%;

  border: none;
  border-radius: 10px;

  padding: 12px 16px;
  margin: 5px 0;

  background: #900000;
  color: #fff;

  font-family: inherit;
  font-size: 15px;
  font-weight: bold;

  cursor: pointer;

  transition:
          background 0.15s ease,
          transform 0.15s ease;
}

.add:hover,
.categories > button:not(.items):not(.highlighted):hover {
  background: #700000;

  transform: translateY(-1px);
}


/* ========================================
   POPOVERY
======================================== */

[popover] {
  width: min(700px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);

  padding: 25px;

  border: none;
  border-radius: 18px;

  overflow-y: auto;

  background: #fff;
  color: #222;

  box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.45);
}


/* Skryté popupy */

[popover]:not([data-show]) {
  display: none;
}


/* Otevřený popup */

[popover][data-show] {
  display: block;

  position: fixed;

  top: 20px;
  left: 50%;

  transform: translateX(-50%);

  width: min(700px, calc(100vw - 40px));

  max-height: calc(100vh - 40px);

  overflow-y: auto;
  overflow-x: hidden;

  z-index: 1001;

  animation: popupIn 0.18s ease-out;
}


/* ========================================
   OBSAH POPOVERU
======================================== */

[popover] h2 {
  margin-top: 5px;

  color: #900000;
}

[popover] p {
  line-height: 1.5;
}


/* Obrázky */

[popover] img {
  max-width: 100%;
  height: auto;

  border-radius: 10px;
}


/* Code block */

[popover] pre {
  overflow-x: auto;

  padding: 15px;

  border-radius: 8px;

  background: #222;
  color: #fff;
}


/* Inline code */

[popover] code {
  padding: 2px 5px;

  border-radius: 4px;

  background: #eee;
  color: #900000;
}


/* Citace */

[popover] blockquote {
  margin: 15px 0;
  padding: 10px 15px;

  border-left: 4px solid #900000;

  background: #f5f5f5;
}


/* ========================================
   CLOSE BUTTON
======================================== */

.close-btn {
  position: absolute;

  top: 10px;
  right: 12px;

  width: 36px;
  height: 36px;

  padding: 0;

  border: none;
  border-radius: 50%;

  background: #900000;
  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 36px;

  cursor: pointer;

  transition:
          background 0.15s ease;
}

.close-btn:hover {
  background: #650000;
}


/* ========================================
   OVERLAY
======================================== */

.overlay {
  position: fixed;

  inset: 0;

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

  opacity: 0;
  visibility: hidden;

  transition:
          opacity 0.2s ease,
          visibility 0.2s ease;

  z-index: 1000;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}


/* ========================================
   FORMULÁŘE
======================================== */

form {
  width: 100%;
}

table {
  width: 100%;

  border-collapse: collapse;
}

th,
td {
  padding: 8px;

  vertical-align: top;
}

th {
  width: 150px;

  text-align: left;

  color: #700000;
}


/* ========================================
   INPUTY
======================================== */

input,
textarea,
select {
  width: 100%;

  padding: 10px 12px;

  border: 1px solid #ccc;
  border-radius: 8px;

  outline: none;

  font-family: inherit;
  font-size: 15px;

  background: #fff;
  color: #222;

  transition:
          border-color 0.15s ease,
          box-shadow 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #900000;

  box-shadow:
          0 0 0 3px
          rgba(144, 0, 0, 0.15);
}

textarea {
  min-height: 120px;

  resize: vertical;
}

select[multiple] {
  min-height: 120px;
}


/* ========================================
   SUBMIT BUTTON
======================================== */

.button,
input[type="submit"] {
  width: auto;

  padding: 11px 18px;

  border: none;
  border-radius: 9px;

  background: #900000;
  color: #fff;

  font-family: inherit;
  font-weight: bold;

  cursor: pointer;

  transition:
          background 0.15s ease;
}

.button:hover,
input[type="submit"]:hover {
  background: #6d0000;
}


/* ========================================
   EASYMDE
======================================== */

.editor-toolbar {
  border:
          1px solid #ccc !important;

  border-radius:
          8px 8px 0 0;

  background: #f5f5f5;
}

.CodeMirror {
  min-height: 180px;

  border:
          1px solid #ccc;

  border-top: none;

  border-radius:
          0 0 8px 8px;
}

.editor-preview {
  background: #fff;
  color: #222;
}


/* ========================================
   POPUP ANIMACE
======================================== */

@keyframes popupIn {

  from {
    opacity: 0;

    transform:
            translate(-50%, -48%)
            scale(0.97);
  }

  to {
    opacity: 1;

    transform:
            translate(-50%, -50%)
            scale(1);
  }

}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1200px) {

  .categories-container {
    column-count: 2;
  }

}


/* ========================================
   MOBIL
======================================== */

@media (max-width: 700px) {

  body {
    padding: 15px;
  }

  .categories-container {
    column-count: 1;
    column-gap: 0;

    margin-top: 15px;
  }

  .categories {
    padding: 15px;
  }


  /* Formuláře */

  th,
  td {
    display: block;

    width: 100%;
  }

  th {
    padding-bottom: 2px;
  }

  td {
    padding-top: 2px;
  }


  /* Main */




  /* Popup */

  [popover][data-show] {
    display: block;

    position: fixed;

    top: 20px;
    left: 50%;

    transform: translateX(-50%);

    width: min(700px, calc(100vw - 40px));

    max-height: calc(100vh - 40px);

    overflow-y: auto;
    overflow-x: hidden;

    z-index: 1001;

    animation: popupIn 0.18s ease-out;
  }

}


/* ========================================
   MALÝ MOBIL
======================================== */

@media (max-width: 450px) {

  body {
    padding: 10px;
  }

  .categories {
    padding: 12px;

    border-radius: 12px;
  }

  .items,
  .highlighted {
    padding: 12px;
  }

  [popover] {
    padding: 20px;
  }

}


/* ========================================
   VELKÝ MONITOR
======================================== */

@media (min-width: 1600px) {

  .categories-container {
    column-count: 4;
  }

}