/* Upload */
.upload-section {
   margin-bottom: 30px;
}

.drop-zone {
   border: 2px dashed #aaa;
   padding: 30px;
   text-align: center;
   background-color: #f9f9f9;
   cursor: pointer;
}

   .drop-zone.dragover {
      background-color: #e0f7fa;
      border-color: #00acc1;
   }
/* Konec uploadu */

/* Galerie */

/*** default.aspx ***/
/*
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding: 30px;
}
*/
.gallery-tile {
   border: 1px solid #ccc;
   border-radius: 6px;
   overflow: hidden;
   background: #f9f9f9;
   text-align: center;
   transition: transform 0.2s;
}

   .gallery-tile:hover {
      transform: scale(1.02);
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
   }

   .gallery-tile img {
      width: 100%;
      height: 160px;
      object-fit: cover;
   }

.gallery-info {
   padding: 10px;
}

.gallery-title {
   font-weight: bold;
   font-size: 1.1em;
   margin-bottom: 5px;
}

.gallery-date {
   font-size: 0.85em;
   color: #666;
}

/*** gallery.aspx ****/
.gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 15px;
   padding: 20px;
}

.thumbnail {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border: 1px solid #ccc;
   border-radius: 4px;
   cursor: pointer;
   transition: transform 0.2s ease;
}

   .thumbnail:hover {
      transform: scale(1.03);
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
   }

.thumb-container {
   text-align: center;
}

.thumb-title {
   margin-top: 5px;
   font-size: 0.9em;
   color: #444;
}

/* Konec galerie */

/* Lightbox */

.lightbox-overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   justify-content: center;
   align-items: center;
   z-index: 9999;
}

   .lightbox-overlay img {
      max-width: 90%;
      max-height: 90%;
      box-shadow: 0 0 20px #000;
      border-radius: 4px;
   }

   .lightbox-overlay.active {
      display: flex;
   }

.lightbox-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 3rem;
   color: white;
   cursor: pointer;
   user-select: none;
   padding: 10px;
   z-index: 10000;
   transition: opacity 0.2s;
}

#lightbox-prev {
   left: 20px;
}

#lightbox-next {
   right: 20px;
}

.lightbox-arrow:hover {
   opacity: 0.7;
}

.lightbox-arrow.disabled {
   opacity: 0.3;
   pointer-events: none;
   cursor: default;
}

#lightbox {
   background-color: rgba(0, 0, 0, 0.9) !important;
}

.lightbox-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   max-height: 90vh;
   max-width: 90vw;
   overflow: hidden;
   position: absolute;
}

.lightbox-caption {
   margin-top: 10px;
   text-align: center;
   color: white;
   font-family: sans-serif;
}

#lightbox-img {
   max-height: 90vh; /* 85vh místo 90% */
   max-width: 100%;
   object-fit: contain;
   background-color: transparent;
   z-index: 10000;
   position: relative;
}

/* Popisek obrazku */
.lightbox-info-box {
   position: absolute;
   top: 60px; /* pod křížek */
   right: 30px;
   background-color: rgba(0, 0, 0, 0.6);
   color: white;
   padding: 10px 15px;
   border-radius: 6px;
   max-width: 300px;
   font-family: sans-serif;
   /*z-index: 10001;*/
}

.lightbox-title {
   font-weight: bold;
   font-size: 1rem;
   margin-bottom: 4px;
}

.lightbox-description {
   font-size: 0.9rem;
   opacity: 0.85;
   word-wrap: break-word;
}
/* Konec popisku obrazku */

/* Lightbox menu */
.lightbox-topbar {
   position: absolute;
   top: 20px;
   right: 30px;
   display: flex;
   gap: 10px;
   align-items: center;
   z-index: 10001;
}

.lightbox-close {
   font-size: 2rem;
   color: white;
   cursor: pointer;
   /*z-index: 10001;*/
}

.lightbox-menu-icon {
   font-size: 1.8rem;
   color: white;
   cursor: pointer;
   user-select: none;
}

.lightbox-menu-wrapper {
   position: relative;
}

.lightbox-dropdown {
   display: none;
   position: absolute;
   top: 30px;
   right: 0;
   background-color: rgba(0, 0, 0, 0.85);
   border-radius: 6px;
   padding: 8px 0;
   min-width: 160px;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   z-index: 10010; /* musi byt vyssi nez info box */
}

   .lightbox-dropdown button {
      display: block;
      width: 100%;
      background: none;
      border: none;
      color: white;
      padding: 10px 15px;
      text-align: left;
      font-size: 0.95rem;
      cursor: pointer;
   }

      .lightbox-dropdown button:hover {
         background-color: rgba(255, 255, 255, 0.1);
      }

.lightbox-close,
.lightbox-menu-icon {
   font-size: 2rem;
   color: white;
   cursor: pointer;
   user-select: none;
   display: flex;
   align-items: center;
   line-height: 1;
}

/* Konec lightbox menu */

/* Share box */
.share-box {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: rgba(0, 0, 0, 0.9);
   color: white;
   padding: 20px 25px;
   border-radius: 8px;
   z-index: 10002;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
   max-width: 90%;
   width: 400px;
   text-align: center;
}

.share-box-inner {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.share-box label {
   font-size: 0.95rem;
   text-align: left;
}

#share-url {
   width: 100%;
   padding: 8px 10px;
   font-size: 1rem;
   border: none;
   border-radius: 4px;
   background-color: #fff;
   color: #000;
}

#share-close {
   margin-top: 10px;
   padding: 8px 16px;
   font-size: 0.95rem;
   background-color: #444;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   align-self: center;
}

   #share-close:hover {
      background-color: #666;
   }

.share-url-row {
   display: flex;
   gap: 8px;
}

#share-url {
   flex: 1;
   padding: 8px 10px;
   font-size: 1rem;
   border: none;
   border-radius: 4px;
   background-color: #fff;
   color: #000;
}

#copy-url {
   padding: 8px 12px;
   font-size: 0.95rem;
   background-color: #444;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   white-space: nowrap;
}

   #copy-url:hover {
      background-color: #666;
   }

/* Konec Share box */

/* Konec lightbox */

/* GalEdit */
#gallery-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

   #gallery-list li {
      padding: 10px;
      margin: 5px 0;
      background-color: #f0f0f0;
      border-radius: 4px;
      cursor: move;
      border: 1px solid #ccc;
   }

.gallery-item {
   padding: 12px 16px;
   margin: 6px 0;
   background-color: #e3f0ff; /* modré podbarvení */
   border: 1px solid #a0c4ff;
   border-radius: 8px;
   cursor: move;
   transition: background-color 0.3s ease;
}

   .gallery-item.active {
      background-color: #d4f4c1; /* zelené podbarvení */
      border-color: #6ac46a;
   }

   .gallery-item:hover {
      background-color: #cfe4ff;
   }

/* Konec GalEdit */

.lightbox-exif-box div {
   margin-bottom: 6px;
   z-index: 10030;
}

.lightbox-exif-box {
   position: absolute;
   top: 20%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10010;
   background-color: #f9f9f9;
   padding: 12px 16px;
   border-radius: 8px;
   font-size: 0.95rem;
   box-shadow: 0 0 8px rgba(0,0,0,0.1);
   max-width: 80%;
   display: none;
}

.exif-close {
   position: absolute;
   top: 8px;
   right: 12px;
   font-size: 1.2rem;
   color: #444;
   cursor: pointer;
   user-select: none;
   background-color: aqua;
}

   .exif-close:hover {
      color: #000;
   }

.exif-inner {
   position: relative;
}


/* image.aspx */
.image-menu-wrapper {
   position: relative; /* důležité, aby absolutní pozice fungovala vůči obrázku */
}

.lightbox-menu-wrapper {
   position: absolute;
   top: 10px; /* vzdálenost od horního okraje */
   right: 10px; /* vzdálenost od pravého okraje */
   z-index: 10020; /* vyšší než obrázek */
}

#lightbox-menu-toggle {
   font-size: 2rem;
   color: #333; /* nebo bílá, podle pozadí */
   cursor: pointer;
   user-select: none;
}

/* Styl pro hamburger dropdown menu */
.lightbox-dropdown {
   display: none; /* defaultně skryté */
   position: absolute;
   top: 40px; /* pod ikonou hamburgeru */
   right: 0;
   background-color: #f9f9f9; /* stejné jako dlaždice galerie */
   border: 1px solid #ccc;
   border-radius: 6px;
   padding: 8px 0;
   min-width: 180px;
   box-shadow: 0 0 10px rgba(0,0,0,0.2);
   z-index: 10010;
   text-align: left;
}

   .lightbox-dropdown .menu-link {
      display: block;
      padding: 10px 15px;
      color: #444;
      font-size: 0.95rem;
      text-decoration: none;
      transition: background-color 0.2s ease;
   }

      .lightbox-dropdown .menu-link:hover {
         background-color: #cfe4ff; /* stejné zvýraznění jako hover dlaždice */
         color: #000;
      }

   /* Aktivní stav menu */
   .lightbox-dropdown.active {
      display: block;
   }

/* Výchozí stav: hamburger */
#lightbox-menu-toggle::before {
   content: "☰";
   font-size: 2rem;
   cursor: pointer;
}

/* Když je menu aktivní, zobrazí se křížek */
#lightbox-menu-toggle.active::before {
   content: "✖";
}


/* Gallery lightbox: topbar vždy nad overlay */
.lightbox-overlay .lightbox-topbar {
   position: absolute;
   top: 20px;
   right: 30px;
   z-index: 10050; /* vyšší než overlay (9999), šipky (10000), img (10000) */
   display: flex;
   gap: 12px;
   align-items: center;
}

   /* Nepřebírat "image.aspx" absolutní pozici: v galerii je wrapper relativní */
   .lightbox-overlay .lightbox-topbar .lightbox-menu-wrapper {
      position: relative !important;
      z-index: 10055; /* nad ostatními prvky v topbaru */
   }

/* Samotná ikona toggle: zajistíme vrstvení nad overlay */
#lightbox-menu-toggle {
   display: inline-block;
   position: relative;
   z-index: 10060;
   color: #fff; /* v lightboxu bílá */
   cursor: pointer;
   user-select: none;
   line-height: 1;
}

   /* Ikona přes pseudo-element, bez textu v HTML */
   #lightbox-menu-toggle::before {
      content: "☰";
      font-size: 2rem;
   }

   #lightbox-menu-toggle.active::before {
      content: "✖";
   }

/* Zavírací křížek: posun a jistota vrstvení */
.lightbox-overlay .lightbox-topbar .lightbox-close {
   position: relative;
   z-index: 10060;
   margin-left: 4px; /* reálný rozestup od hamburgeru */
}

/* Dropdown v galerii (tmavý v lightboxu) */
.lightbox-overlay .lightbox-dropdown {
   display: none;
   position: absolute;
   top: 40px;
   right: 0;
   background-color: rgba(0,0,0,0.85);
   border-radius: 6px;
   padding: 8px 0;
   min-width: 180px;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   z-index: 10065; /* vyšší než topbar ikony, ale pod šipkami (pokud chcete) */
}

   .lightbox-overlay .lightbox-dropdown.active {
      display: block;
   }