/* ==========================================================================

   ČÁST 1: VEŘEJNÉ ZOBRAZENÍ (Návštěvník)

   Filtry, Menu kartičky, Detail jídla, Štítky

   ========================================================================== */



/* --- 1. KATEGORIE FILTRY (Sticky lišta) --- */

#category-filters {

  margin-bottom:30px;

  display:flex;

  justify-content:center;

  gap:25px;

  flex-wrap:wrap;

  padding:15px 0;

}

.filter-item {

  display:flex;

  align-items:center;

  gap:8px;

  cursor:pointer;

  transition:all 0.25s ease;

  padding:8px 12px;

  border-radius:20px;

  user-select: none;

  flex: 0 0 auto;

}

/* Povolit označování textu ve formulářových polích na mobilu */

input, textarea, [contenteditable="true"] {

  user-select: text !important;

  -webkit-user-select: text !important;

  cursor: text !important;

}

.filter-item:hover {

  background:color-mix(in srgb, var(--primary-color) 10%, transparent);

  transform:translateY(-2px);

}

.filter-dot {

  width:12px;

  height:12px;

  border-radius:50%;

  border:2px solid #ddd;

  background:transparent;

  transition:all 0.3s ease;

  flex-shrink:0;

  pointer-events: none;

}

.filter-dot.active {

  background:var(--primary-color);

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

  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);

}

.filter-label {

  font-size:0.95rem;

  font-weight:500;

  color:#666;

  transition:all 0.3s ease;

  pointer-events: none;

}

.filter-label.active {

  color:var(--primary-color);

  font-weight:600;

}



/* --- 2. GRID PRO MENU --- */

#menu-items { 

  display:flex; 

  flex-wrap:wrap; 

  justify-content:center; 

  gap:15px; 

}



/* --- 3. KARTIČKA JÍDLA (Základ) --- */

.menu-item {

  background:#fff;

  border-radius:15px;

  width:260px;

  min-height:140px;

  box-shadow:0 3px 10px rgba(0,0,0,0.1);

  overflow:hidden;

  transition:all 0.3s ease;

  padding:15px;

  position:relative;

  border:2px solid transparent;

  display: flex;

  flex-direction: column;

}

.menu-item:hover {

  box-shadow:0 6px 15px rgba(0,0,0,0.15);

}



/* Obsah karty (Texty) */

.menu-item h3 { 

  margin:25px 0 8px 0; 

  font-size:1.2rem; 

  line-height:1.3;

  font-weight: 500; /* Změna tloušťky: 400=normální, 500=střední, 600=polotučné */

}

.menu-item p { 

  font-size:0.9rem; 

  margin-bottom:12px; 

  color:#666;

  line-height:1.4;

}

.price { 

  font-weight:bold; 

  color:var(--primary-color); 

  font-size:1.1rem;

  margin-top:auto;

}

.item-code-display {

  font-weight: 700;

  color: var(--primary-color);

  margin-right: 2px;

}



/* Štítky na kartě (Tags) */

.category-tag {

  position:absolute;

  top:8px;

  left:8px;

  background:color-mix(in srgb, var(--primary-color) 10%, transparent);

  color:var(--primary-color);

  padding:3px 8px;

  border-radius:10px;

  font-size:0.75rem;

  font-weight:600;

  border:1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);

}

.recommended-tag {

  position:absolute;

  top:8px;

  right:8px;

  background:rgba(40, 167, 69, 0.1);

  color:#28a745;

  padding:3px 8px;

  border-radius:10px;

  font-size:0.75rem;

  font-weight:600;

  border:1px solid rgba(40, 167, 69, 0.2);

  z-index:3;

}

.photo-indicator {

  position: absolute;

  bottom: 8px;

  right: 8px;

  background: rgba(40, 167, 69, 0.1);

  color: #28a745;

  padding: 3px 8px;

  border-radius: 10px;

  font-size: 0.75rem;

  font-weight: 600;

  border: 1px solid rgba(40, 167, 69, 0.2);

  z-index: 3;

}



/* --- 4. DETAIL JÍDLA (Modal pro návštěvníka) --- */

.food-detail-modal {

    background: #fff;

    border-radius: 24px;

    width: 90%;

    max-width: 500px;

    max-height: 90vh;

    overflow-y: auto;

    position: relative;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

    display: flex;

    flex-direction: column;

}



.detail-close-btn {

    position: absolute;

    top: 15px;

    right: 15px;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);

    border: none;

    font-size: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 10;

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

    transition: transform 0.2s;

}

.detail-close-btn:hover { transform: scale(1.1); }



.detail-image-container {

    width: 100%;

    height: 350px;

    flex-shrink: 0;

}



@media (min-width: 769px) {

    .detail-image-container {

        height: 450px;

    }

}



.detail-image-container img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 24px 24px 0 0;

}



.detail-content {

    padding: 25px;

}



.detail-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 15px;

}

.detail-header h3 {

    margin: 0;

    font-size: 1.6rem;

    line-height: 1.2;

    flex: 1;

    padding-right: 10px;

}

.detail-code {

    color: var(--primary-color);

    margin-right: 5px;

}

.detail-price {

    font-size: 1.3rem;

    font-weight: 700;

    color: var(--primary-color);

    white-space: nowrap;

}



.detail-description {

    font-size: 1rem;

    color: #555;

    line-height: 1.6;

    margin-bottom: 25px;

}



/* Detail Alergenů (V modalu) */

.detail-allergens-section {

    background: #f8f9fa;

    border-radius: 16px;

    padding: 15px;

    border: 1px solid #eee;

}

.detail-allergens-label {

    display: block;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #888;

    margin-bottom: 10px;

    font-weight: 700;

}

.detail-allergens-list {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.allergen-badge {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: #fff;

    border: 2px solid var(--primary-color);

    color: var(--primary-color);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 0.9rem;

    cursor: help;

    transition: all 0.2s;

}

.allergen-badge:hover, .allergen-badge.active {

    background: var(--primary-color);

    color: #fff;

    transform: scale(1.1);

}

.detail-allergens-help {

    margin-top: 8px;

    font-size: 0.8rem;

    color: #666;

    font-style: italic;

    min-height: 1.2em;

}





/* ==========================================================================

   ČÁST 2: ADMIN NÁSTROJE (Viditelné jen po přihlášení)

   Editace menu, Hromadné úpravy, Recenze, Alergeny v editoru

   ========================================================================== */



/* --- 1. ADMIN DRAG & DROP (Styl při tahání) --- */

.menu-item.admin-mode {

  border-color:#e0e0e0;

  cursor:grab;

}

.menu-item.admin-mode:hover {

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

}

.menu-item.admin-mode[draggable="true"]:active {

  cursor:grabbing;

}

.menu-item.dragging {

  opacity:0.5;

  transform:rotate(2deg) scale(0.95);

  z-index:10;

}

.menu-item.drag-over {

  border-color:#007bff;

  background:rgba(0, 123, 255, 0.05);

}

/* Zprůhlednění štítků v admin módu, aby nezavazely tlačítkům */

.menu-item.admin-mode .category-tag,

.menu-item.admin-mode .recommended-tag,

.menu-item.admin-mode .photo-indicator {

  opacity: 0.5;

  z-index: 1;

}



/* --- 2. OVLÁDACÍ TLAČÍTKA NA KARTĚ --- */

.admin-controls {

  position:absolute;

  top:8px;

  right:8px;

  display:flex;

  gap:4px;

  opacity:0.7;

  transition:opacity 0.3s ease;

  z-index: 10;

}

.menu-item:hover .admin-controls { opacity:1; }

.admin-btn {

  background:rgba(255,255,255,0.9);

  border:1px solid #ddd;

  border-radius:6px;

  padding:4px 6px;

  cursor:pointer;

  font-size:12px;

  transition:all 0.2s ease;

  backdrop-filter:blur(5px);

}

.admin-btn:hover {

  background:#fff;

  transform:scale(1.05);

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

}

.edit-btn:hover { color:var(--primary-color); }

.delete-btn:hover { color:#dc3545; }

.drag-handle { cursor:grab; }

.drag-handle:hover { color:#6c757d; }

.menu-item.admin-mode .admin-controls { z-index: 10; }



/* --- 3. EDITACE KARTY (Formulář místo obsahu) --- */

.menu-item.editing {

  width:320px;

  min-height:auto;

  background:#f8f9fa;

  border:2px solid var(--primary-color);

  box-shadow:0 8px 25px color-mix(in srgb, var(--primary-color) 20%, transparent);

}

.inline-edit-form {

  display:flex;

  flex-direction:column;

  gap:12px;

}

.inline-edit-form input,

.inline-edit-form textarea,

.inline-edit-form select {

  padding:10px;

  border:2px solid #ddd;

  border-radius:8px;

  font-size:0.9rem;

  transition:border-color 0.3s ease;

}

.inline-edit-form input:focus,

.inline-edit-form textarea:focus,

.inline-edit-form select:focus {

  outline:none;

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

}

.inline-edit-form textarea {

  resize:vertical;

  min-height:60px;

}



/* Upload obrázků v editoru */

.file-upload-btn {

  background:#6c757d;

  color:#fff;

  border:none;

  padding:8px 12px;

  border-radius:6px;

  cursor:pointer;

  font-size:0.85rem;

  transition:all 0.3s ease;

}

.file-upload-btn:hover {

  background:#5a6268;

  transform:translateY(-1px);

}

.delete-image-btn {

  background: #dc3545;

  color: #fff;

  border: none;

  padding: 8px 12px;

  border-radius: 6px;

  cursor: pointer;

  font-size: 0.85rem;

  transition: all 0.3s ease;

  flex-shrink: 0;

}

.delete-image-btn:hover {

  background: #c82333;

  transform: translateY(-1px);

}

.image-preview-container {

  width: 100%;

  margin-top: 10px;

  border-radius: 8px;

  overflow: hidden;

  background: #f8f9fa;

  border: 2px solid #e9ecef;

}

.image-preview {

  width: 100%;

  height: auto;

  max-height: 200px;

  object-fit: contain;

  display: block;

  background: #fff;

}

.image-upload-section {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  align-items: center;

}

.inline-edit-buttons {

  display:flex;

  gap:8px;

  margin-top:8px;

}



/* Výběr alergenů (Checkboxy v editoru) */

.allergen-selection {

    margin: 10px 0;

    background: #fff;

    padding: 10px;

    border-radius: 8px;

    border: 1px solid #eee;

}

.allergen-selection label {

    font-weight: 600;

    display: block;

    margin-bottom: 8px;

    font-size: 0.9rem;

    color: #444;

}

.allergen-grid {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 5px;

}

.allergen-checkbox {

    display: flex;

    flex-direction: column;

    align-items: center;

    cursor: pointer;

    border: 1px solid #ddd;

    border-radius: 6px;

    padding: 5px 2px;

    transition: all 0.2s;

}

.allergen-checkbox:hover {

    background: #f0f0f0;

}

.allergen-checkbox input {

    display: none;

}

.allergen-checkbox span {

    font-size: 0.9rem;

    font-weight: 600;

    color: #666;

}

/* Když je checkbox zaškrtnutý */

.allergen-checkbox input:checked + span {

    color: var(--primary-color);

}

.allergen-checkbox:has(input:checked) {

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

    background: color-mix(in srgb, var(--primary-color) 10%, transparent);

}



/* --- 4. BULK MODE (Hromadné úpravy) --- */

.bulk-checkbox-container {

  position: absolute;

  inset: 0; 

  z-index: 5;

  pointer-events: none;

}

.bulk-checkbox {

  display: none;

}

.bulk-checkbox-label {

  display: flex; 

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  cursor: pointer;

  pointer-events: all;

  background: transparent;

  border: 2px solid transparent;

  opacity: 0;

  transition: all 0.2s ease;

}

.bulk-checkbox:checked + .bulk-checkbox-label {

  opacity: 1; 

  background: color-mix(in srgb, var(--primary-color) 30%, transparent);

  border: 3px solid var(--primary-color);

  border-radius: 15px; 

}

.bulk-checkbox:checked + .bulk-checkbox-label::after {

  content: '✓';

  font-size: 64px;

  font-weight: bold;

  color: white;

  text-shadow: 0 2px 4px rgba(0,0,0,0.5); 

}



/* Panel pro hromadné akce */

#bulk-controls {

  margin-top:30px;

  padding-top:20px;

  border-top:2px dashed #ddd;

  display:flex;

  justify-content:center;

  gap:15px;

  flex-wrap:wrap;

}

.bulk-action-btn {

  padding:8px 16px;

  border:none;

  border-radius:20px;

  background:#6c757d;

  color:#fff;

  cursor:pointer;

  font-weight:500;

  font-size:0.9rem;

  transition:all 0.3s ease;

  box-shadow:0 2px 6px rgba(0,0,0,0.1);

}

.bulk-action-btn:hover {

  background:#5a6268;

  transform:translateY(-1px);

}

.bulk-action-btn.danger {

  background:#dc3545;

}

.bulk-action-btn.danger:hover {

  background:#c82333;

}



/* --- 5. REVIEWS ADMIN EDITOR (Seznam recenzí v adminu) --- */

.reviews-modal-content { max-width:700px; width:90vw; }

#reviews-editor { text-align:left; }

#reviews-list { margin-bottom:25px; }

.review-item {

  background:#f8f9fa;

  border:2px solid #e9ecef;

  border-radius:10px;

  padding:20px;

  margin-bottom:15px;

  transition:all 0.3s ease;

}

.review-item:hover {

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

  box-shadow:0 3px 10px color-mix(in srgb, var(--primary-color) 10%, transparent);

}

.review-item-content { margin-bottom:15px; }

.review-text-field, .review-author-field { margin-bottom:15px; }

.review-text-field label, .review-author-field label {

  display:block;

  font-weight:600;

  margin-bottom:5px;

  color:#333;

}

.review-text-input {

  width:100%;

  min-height:80px;

  padding:12px;

  border:2px solid #ddd;

  border-radius:8px;

  font-size:0.95rem;

  font-family:inherit;

  resize:vertical;

  transition:border-color 0.3s ease;

}

.review-author-input {

  width:100%;

  padding:10px;

  border:2px solid #ddd;

  border-radius:8px;

  font-size:0.95rem;

  transition:border-color 0.3s ease;

}

.review-text-input:focus,

.review-author-input:focus {

  outline:none;

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

}

.review-item-actions {

  display:flex;

  gap:10px;

  justify-content:flex-end;

}

.save-review-btn, .delete-review-btn {

  padding:8px 15px;

  border:none;

  border-radius:5px;

  cursor:pointer;

  font-size:0.85rem;

  font-weight:500;

  transition:all 0.3s ease;

}

.save-review-btn { background:#28a745; color:white; }

.save-review-btn:hover { background:#218838; transform:translateY(-1px); }

.delete-review-btn { background:#dc3545; color:white; }

.delete-review-btn:hover { background:#c82333; transform:translateY(-1px); }