/* =========================================================================== */
/* brand.css — Брендові стилі проєкту Jadran Sun Menu System                  */
/*                                                                             */
/* Цей файл містить всі CSS-змінні та стилі UI-компонентів,                    */
/* визначених у дизайн-специфікації "Tech Precision".                          */
/*                                                                             */
/* Підключається в base.html через {% static "css/brand.css" %}                */
/*                                                                             */
/* Дизайн-специфікація: doc/design/menu_for_designers_frontenders.md           */
/* Референс макету:     doc/design/mobile_layout.html                          */
/* Документація CSS Custom Properties:                                         */
/*   https://developer.mozilla.org/en-US/docs/Web/CSS/--*                      */
/* =========================================================================== */


/* =========================================================================== */
/* CSS-змінні бренду "Jadran Sun"                                              */
/* Визначаємо кольори, радіуси та шрифт як змінні, щоб легко                   */
/* змінювати їх в одному місці для всього сайту.                                */
/* =========================================================================== */
:root {
  /* Основний колір бренду — темно-синій */
  --brand-primary: #004A7A;
  /* Колір рамок та розділювачів */
  --brand-border: #E2E8F0;
  /* Фон білих карток і елементів */
  --brand-bg: #FFFFFF;
  /* Фон сторінки — світло-сірий */
  --brand-bg-page: #F8FAFC;
  /* Основний колір тексту — майже чорний */
  --brand-text: #0F172A;
  /* Приглушений текст — для описів та підказок */
  --brand-text-muted: #64748B;
  /* Радіус для карток та кнопок — 6px */
  --radius-precise: 6px;
  /* Менший радіус для тегів та дрібних елементів — 4px */
  --radius-sm: 4px;
  /* Шрифт за замовчуванням для Bootstrap — Outfit */
  --bs-body-font-family: 'Outfit', sans-serif;
}


/* =========================================================================== */
/* Базові стилі body                                                           */
/* padding-bottom: 110px — резервуємо місце для плаваючої кнопки замовлення     */
/* =========================================================================== */
body {
  background-color: var(--brand-bg-page);
  color: var(--brand-text);
  font-family: 'Outfit', sans-serif;
  padding-bottom: 110px;
  overflow-x: hidden;
}

/* Carousel image — responsive height */
.carousel-img {
  height: 280px;
}

@media (min-width: 576px) {
  .carousel-img { height: 400px; }
}

@media (min-width: 992px) {
  .carousel-img { height: 600px; }
}


/* =========================================================================== */
/* Sticky Header — прилипає зверху при скролі                                  */
/* backdrop-filter: blur — напівпрозорий ефект "матового скла"                  */
/* z-index: 1020 — щоб навбар був вище контенту, але нижче модалок              */
/* =========================================================================== */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(12px);
  padding: 12px 16px;
  border-bottom: 1px solid var(--brand-border);
}

/* Navbar: prevent overflow on narrow screens */
@media (max-width: 400px) {
  .sticky-header .btn-sm,
  .sticky-header .language-switcher-btn {
    font-size: 0.65rem !important;
    letter-spacing: 0 !important;
  }
  .sticky-header .vr-custom {
    margin: 0 4px;
  }
}


/* =========================================================================== */
/* Логотип бренду — квадрат 34x34px з іконкою                                   */
/* Відповідає специфікації: "Квадрат із радіусом 6px, Mobile: 34x34 px"         */
/* =========================================================================== */
.brand-logo {
  width: 34px;
  height: 34px;
  background: var(--brand-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
}


/* =========================================================================== */
/* Вертикальний розділювач між кнопками мови та входу                           */
/* =========================================================================== */
.vr-custom {
  width: 1px;
  height: 14px;
  background-color: var(--brand-border);
  margin: 0 10px;
}


/* =========================================================================== */
/* Nav Pills — перемикач режимів "Категорії" / "Теги"                           */
/* Стиль: кнопки з рамкою, активна — залита основним кольором                  */
/* =========================================================================== */
.nav-pills-custom {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}

.nav-pills-custom .nav-link {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  padding: 8px;
  background: transparent;
  transition: all 0.2s ease;
}

.nav-pills-custom .nav-link.active {
  background-color: var(--brand-primary);
  color: white;
}


/* =========================================================================== */
/* Accordion — розкривні панелі для категорій/тегів                             */
/* =========================================================================== */
.accordion-item {
  border: 1px solid var(--brand-border);
  margin: 10px 16px;
  border-radius: var(--radius-precise) !important;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.accordion-button {
  padding: 16px;
  font-weight: 600;
  font-size: 1rem;
}

.accordion-button:not(.collapsed) {
  background: white;
  color: var(--brand-primary);
  border-bottom: 1px solid var(--brand-bg-page);
}


/* =========================================================================== */
/* Dish Row — рядок страви всередині accordion                                 */
/* =========================================================================== */
.dish-nest-list {
  padding: 0 0 8px 10px;
}

.dish-row {
  padding: 12px;
  border-left: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-bg-page);
  display: flex;
  align-items: center;
  gap: 12px;
}

.dish-row:last-child {
  border-bottom: none;
}


/* =========================================================================== */
/* Square Tags — квадратні мітки тегів біля страв                              */
/* Розмір: 28x28px, радіус: 4px (відповідно до специфікації)                    */
/* =========================================================================== */
.tag-group {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.tag-sq {
  width: 28px;
  height: 28px;
  background: white;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-label {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}


/* =========================================================================== */
/* Floating Order Button (FAB) — плаваюча кнопка замовлення                    */
/* Фіксована внизу екрану, z-index: 1030 — вище за навбар                      */
/* =========================================================================== */
.btn-fab-order {
  position: fixed;
  bottom: 40px;
  left: 16px;
  right: 16px;
  background: var(--brand-primary);
  color: white;
  border-radius: var(--radius-precise);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 74, 122, 0.3);
  z-index: 1030;
}

.cart-pill {
  background: white;
  color: var(--brand-primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 800;
}

/* Language switcher button in navbar */
.language-switcher-btn {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

/* Allergen badge on dish card */
.allergen-badge {
  font-size: 0.7rem;
}


/* =========================================================================== */
/* Touch-friendly: smartphone + tablet (< lg)                                  */
/* Кнопки дій ≥ 48px, відступи ≥ 8px між інтерактивними елементами             */
/* =========================================================================== */
@media (max-width: 991.98px) {
  .btn-action {
    min-height: 48px;
    min-width: 48px;
    font-size: 1rem;
    padding: 0.625rem 1rem;
  }

  /* Kitchen: full-width on touch devices for easy tapping */
  .btn-kitchen-action {
    width: 100%;
  }

  .list-group-item {
    padding: 12px 16px;
  }
}

/* Kitchen buttons: 56px on ALL sizes — touch screens on desktops too */
.btn-kitchen-action {
  min-height: 56px;
  font-size: 1rem;
  font-weight: 600;
}


/* =========================================================================== */
/* Kitchen kanban layout — 3 cols on desktop, 2 on tablet, stack on mobile     */
/* =========================================================================== */
.kitchen-kanban {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .kitchen-kanban {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .kitchen-kanban {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Kanban column */
.kanban-col {
  min-height: 200px;
}

.kanban-col .card {
  height: 100%;
}

/* Ticket card — colored left border by status */
.ticket-card-pending {
  border-left: 4px solid #ffc107;
}

.ticket-card-taken {
  border-left: 4px solid #0dcaf0;
}

.ticket-card-done {
  border-left: 4px solid #198754;
}

.ticket-card-escalated {
  border-left: 4px solid #dc3545;
  animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
  0%, 100% { border-left-color: #dc3545; }
  50% { border-left-color: #ff6b6b; }
}


/* =========================================================================== */
/* Kitchen: urgency styles + order grouping + mobile tabs                      */
/* =========================================================================== */

/* Urgency border overrides */
.kitchen-urgency-warn {
  border-left: 4px solid #ffc107 !important;
  background: rgba(255, 193, 7, 0.04);
}

.kitchen-urgency-critical {
  border-left: 4px solid #dc3545 !important;
  background: rgba(220, 53, 69, 0.06);
  animation: pulse-border 2s infinite;
}

/* Order group — groups tickets of the same order */
.kitchen-order-group {
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-precise);
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.kitchen-order-group-header {
  background: var(--brand-bg-page);
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--brand-border);
  color: var(--brand-text-muted);
}

.kitchen-order-group-header .badge {
  font-size: 0.65rem;
  vertical-align: middle;
}

/* Mobile tab pills */
.kitchen-tab-pills .nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
  color: var(--brand-text-muted);
}

.kitchen-tab-pills .nav-link.active {
  background: var(--brand-primary);
  color: #fff;
}

.kitchen-tab-pills .badge {
  font-size: 0.65rem;
  vertical-align: middle;
}

/* Sound activation banner */
.kitchen-sound-banner {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: var(--radius-precise);
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.3s;
}

.kitchen-sound-banner:hover {
  background: #ffe69c;
}

/* Team accordion — cook stats */
.kitchen-team-stats .badge {
  font-size: 0.7rem;
}


/* =========================================================================== */
/* Waiter dashboard: table on desktop, cards on mobile/tablet                   */
/* =========================================================================== */
.waiter-order-table {
  display: none;
}

@media (min-width: 992px) {
  .waiter-order-table {
    display: table;
  }
  .waiter-order-cards {
    display: none;
  }
}


/* =========================================================================== */
/* Extra detail columns — visible only on tablet+ and desktop                  */
/* =========================================================================== */
.detail-md {
  display: none;
}

@media (min-width: 768px) {
  .detail-md {
    display: block;
  }
}

.detail-lg {
  display: none;
}

@media (min-width: 992px) {
  .detail-lg {
    display: block;
  }
}


/* =========================================================================== */
/* Order progress bar — horizontal on tablet+, 2 rows on mobile               */
/* =========================================================================== */
.order-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 1rem 1rem;
  margin-bottom: 0.5rem;
  gap: 0.25rem 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}

.step-icon {
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 2px dashed var(--brand-border);
  opacity: 0.25;
  transition: all 0.3s;
}

/* Done: solid green circle */
.progress-step.done .step-icon {
  background: #d1e7dd;
  border: 2px solid #198754;
  opacity: 1;
}

/* Active (partial progress): yellow circle, PWM animation set by JS */
.progress-step.active .step-icon {
  background: #fff3cd;
  border: 2px solid #ffc107;
  opacity: 1;
}

/* --- Arrows between steps --- */
.progress-line {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--brand-border);
  min-width: 0.75rem;
  max-width: 3rem;
  opacity: 0.25;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-out, opacity 0.3s;
}

/* Arrow appears when previous step is done or active */
.progress-step.done + .progress-line,
.progress-step.active + .progress-line {
  transform: scaleX(1);
  opacity: 1;
}

.progress-step.done + .progress-line {
  background: #198754;
}

.progress-step.active + .progress-line {
  background: #ffc107;
}

/* Arrowhead */
.progress-line::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: inherit;
  border-left-width: 5px;
}

.progress-step.done + .progress-line::after {
  border-left-color: #198754;
}

.progress-step.active + .progress-line::after {
  border-left-color: #ffc107;
}

.step-label {
  font-size: 0.65rem;
  margin-top: 0.2rem;
  color: var(--brand-text-muted);
  text-align: center;
  line-height: 1.1;
}

/* Mobile: zigzag layout (6 steps in 2 staggered rows) */
@media (max-width: 575.98px) {
  .order-progress {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    row-gap: 0.5rem;
    padding: 0.75rem;
    max-width: 340px;
    justify-items: center;
  }

  /* Hide horizontal connectors — replaced by diagonal arrows */
  .order-progress .progress-line {
    display: none;
  }

  /* Row 1 (top): steps 0, 2, 4 — child positions 1, 5, 9 */
  .order-progress > :nth-child(1)  { grid-column: 1; grid-row: 1; }
  .order-progress > :nth-child(5)  { grid-column: 3; grid-row: 1; }
  .order-progress > :nth-child(9)  { grid-column: 5; grid-row: 1; }

  /* Row 2 (bottom): steps 1, 3, 5 — child positions 3, 7, 11 */
  .order-progress > :nth-child(3)  { grid-column: 2; grid-row: 2; }
  .order-progress > :nth-child(7)  { grid-column: 4; grid-row: 2; }
  .order-progress > :nth-child(11) { grid-column: 6; grid-row: 2; }

  .step-label {
    font-size: 0.55rem;
  }

  /* Diagonal arrows between zigzag steps */
  .order-progress > .progress-step {
    position: relative;
  }

  .order-progress > .progress-step::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 2px;
    background: var(--brand-border);
    opacity: 0.3;
  }

  /* ↘ arrows from row-1 steps (down-right) */
  .order-progress > :nth-child(1)::after,
  .order-progress > :nth-child(5)::after,
  .order-progress > :nth-child(9)::after {
    right: -0.7rem;
    bottom: 0.6rem;
    transform: rotate(40deg);
    transform-origin: left center;
  }

  /* ↗ arrows from row-2 steps (up-right) */
  .order-progress > :nth-child(3)::after,
  .order-progress > :nth-child(7)::after {
    right: -0.7rem;
    top: 0.6rem;
    transform: rotate(-40deg);
    transform-origin: left center;
  }

  /* Last step — no arrow */
  .order-progress > :nth-child(11)::after {
    display: none;
  }

  /* Arrow color follows step state */
  .order-progress > .progress-step.done::after {
    background: #198754;
    opacity: 1;
  }
  .order-progress > .progress-step.active::after {
    background: #ffc107;
    opacity: 1;
  }
}

/* --- Delivered dish row (waiter order detail) --- */
.delivered-dish {
  opacity: 0.5;
}

/* --- Payment strip under pipeline --- */
.pipeline-payment-strip {
  text-align: center;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-sm, 4px);
  margin-bottom: 1rem;
}

.pipeline-payment-strip.unpaid {
  background: #f1f5f9;
  color: #94a3b8;
}

.pipeline-payment-strip.paid {
  background: #d1e7dd;
  color: #198754;
}


/* =========================================================================== */
/* Ticket status rows — live tracking per dish                                 */
/* =========================================================================== */
.ticket-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--brand-border);
  transition: background-color 0.3s;
}

.ticket-status-row:last-child {
  border-bottom: none;
}

.ticket-icon {
  font-size: 1.3rem;
  width: 2rem;
  text-align: center;
  flex-shrink: 0;
}

.ticket-icon[data-status="taken"] {
  animation: pulse-soft 2s infinite;
}

.ticket-dish {
  font-weight: 500;
}

.status-updated {
  background-color: rgba(25, 135, 84, 0.1);
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


/* =========================================================================== */
/* Mood selector — emoji radio buttons for feedback form                       */
/* =========================================================================== */
.mood-selector {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mood-option { cursor: pointer; }

.mood-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 2px solid var(--brand-border);
  border-radius: 2rem;
  font-size: 1.1rem;
  transition: all 0.2s;
  min-height: 48px;
}

.mood-option input:checked + .mood-emoji {
  border-color: #198754;
  background: #d1e7dd;
  transform: scale(1.1);
}

.mood-emoji:hover {
  border-color: var(--brand-primary);
}


/* =========================================================================== */
/* Feedback board — responsive grid                                            */
/* =========================================================================== */
.feedback-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .feedback-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
  .feedback-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.feedback-card {
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: 1rem;
  padding: 1.25rem;
}

.feedback-card.featured {
  border-color: #ffc107;
  background: #fff3cd;
}

@media (min-width: 768px) {
  .feedback-card.featured { grid-column: span 2; }
}

.feedback-mood { font-size: 1.5rem; margin-bottom: 0.5rem; }
.feedback-message { font-style: italic; line-height: 1.5; margin-bottom: 0.5rem; }
.feedback-meta { font-size: 0.85rem; display: flex; justify-content: space-between; }
.feedback-author { font-weight: 500; }