/* ==========================================================================
   ГЕНЕРАТОР - НОВИЯТ ИЗГЛЕД (05.10.2026)

   „Работен плот" (вариант A) + лентата на седмицата (от вариант D) - виж
   docs/mockups/gen-week-tpl.html. Всичко тук е под `.mg-v2` и се зарежда СЛЕД
   menu-generator.css: махнеш ли класа, остава класическият изглед, без нито
   един променен ред в него. Класът се слага от menu-generator.js по
   uiPrefs.generator_ui (менюто на профила → „Класически генератор").

   ❗ Маркировката е обща за двата изгледа. Елементите само за новия са с
   `.mg-only`; не добавяй id-та и логика, които работят само в единия.
   ========================================================================== */

.menu-generator-container:not(.mg-v2) .mg-only { display: none !important; }

.mg-v2 { color: #3f3328; }

/* ---- разположение: две колони от 1100px (класическият ги дава чак от 1540px) */
@media (min-width: 1100px) {
    .mg-v2 .content-grid,
    .mg-v2 .content-grid.expanded {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 22px;
        align-items: start;
    }
    .mg-v2 .preview-panel { position: sticky; top: 16px; }
}

.mg-v2 .generator-panel {
    padding: 24px;
    border: 1px solid #efe4d8;
    border-radius: 20px;
    box-shadow: 0 8px 26px rgba(60, 40, 25, .06);
}

/* ---- заглавие, дата и лентата на седмицата */
.mg-v2 .date-section { position: relative; margin-bottom: 16px; }
.mg-v2 .date-section > h3 { display: none; }
/* Полето остава в DOM-а (експортът чете оттам) и се отваря с „Друга дата" */
.mg-v2 .date-section > #menuDate {
    position: absolute; top: 0; right: 0; width: 1px; height: 1px; padding: 0; border: 0;
    opacity: 0; pointer-events: none;
}

.mg-head { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.mg-head-text { flex: 1; min-width: 0; }
.mg-title { margin: 0; font-size: 1.35rem; font-weight: 800; color: #2b231d; }
.mg-date { margin: 2px 0 0; font-size: .9rem; color: #8a7866; }
.mg-date::first-letter { text-transform: uppercase; }
.mg-cal {
    min-height: 0; min-width: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
    border: 1px solid #e6d4bf; border-radius: 11px; background: #fff; color: #3f3328; box-shadow: none;
    font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
}
.mg-cal i { color: #a8743f; }
.mg-cal:hover { background: #fbf4ec; }
.mg-cal[hidden] { display: none; }

.mg-week { display: flex; align-items: stretch; gap: 6px; margin-top: 14px; }
.mg-week-nav {
    flex: none; width: 34px; min-height: 0; min-width: 0; padding: 0; border: 1px solid #efe4d8; border-radius: 12px;
    background: #fff; color: #5a4a3a; box-shadow: none; cursor: pointer;
}
.mg-week-nav:hover { background: #fbf4ec; }
.mg-days { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mg-day {
    position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 7px 9px 8px; border: 1px solid #efe4d8; border-radius: 12px; background: #fff; color: #2b231d;
    box-shadow: none; font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, background .12s;
}
.mg-day:hover { border-color: #e0c49e; }
.mg-day.on { border-color: #3a2f26; background: #3a2f26; color: #fff; }
.mg-day-top { display: flex; align-items: baseline; gap: 6px; }
.mg-dn { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a7866; }
.mg-dd { font-size: 1.05rem; font-weight: 800; }
.mg-day.on .mg-dn { color: #d9c6ae; }
.mg-st { display: flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 700; }
.mg-st i { flex: none; font-size: .45rem; }
.mg-st.is-plan { color: #9a5d0b; }
.mg-st.is-sel { color: #2f7a35; }
.mg-day.on .mg-st { color: #f1d3a6; }
.mg-today { position: absolute; top: 6px; right: 7px; font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #a8743f; }
.mg-day.on .mg-today { color: #f1d3a6; }
.mg-day:focus-visible, .mg-week-nav:focus-visible, .mg-cal:focus-visible { outline: 3px solid #e0b98a; outline-offset: 2px; }

.mg-plan {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px;
    border: 1px solid #f1dfc4; border-radius: 12px; background: #fdf6ea; color: #6b4a1f; font-size: .88rem;
}
.mg-plan[hidden] { display: none; }
.mg-plan > i { color: #c98a2b; }
.mg-plan > span { flex: 1; min-width: 0; }
.mg-plan-load {
    min-height: 0; min-width: 0; padding: 7px 12px; border: 0; border-radius: 9px; background: #3a2f26; color: #fff;
    box-shadow: none; font: inherit; font-weight: 700; font-size: .84rem; cursor: pointer;
}
.mg-plan-load:hover { background: #2b231d; }

/* ---- категории като чипове */
/* Пренасят се на нов ред; ако и 2 реда не стигат, utils.fitChipRows() слага
   chip-rows-scroll - два реда, които се плъзгат, в естествения ред. */
.mg-v2 .category-tabs {
    flex-wrap: wrap; overflow-x: visible; gap: 6px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 0;
}
.mg-v2 .category-tabs.chip-rows-scroll { display: block; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.mg-v2 .category-tabs .chip-rows-inner { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-v2 .category-tab {
    flex: none; padding: 7px 14px; border: 1px solid #efe4d8; border-radius: 999px; background: #fff;
    color: #5a4a3a; box-shadow: none; font-size: .86rem; font-weight: 600;
}
.mg-v2 .category-tab:hover { background: #fbf4ec; color: #3f3328; }
.mg-v2 .category-tab.active { border-color: #3a2f26; background: #3a2f26; color: #fff; box-shadow: none; }

/* ---- търсене и бързите действия */
.mg-v2 .quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.mg-v2 .quick-actions .search-input {
    order: -1; flex: 1 1 240px; min-width: 0; padding: 10px 12px; border: 1px solid #efe4d8; border-radius: 12px;
    background: #fff; color: #3f3328; box-shadow: none; font-size: .92rem;
}
.mg-v2 .quick-actions .search-input:focus { outline: none; border-color: #d4a574; box-shadow: 0 0 0 3px rgba(212, 165, 116, .25); }
.mg-v2 .quick-btn {
    padding: 8px 12px; border: 1px solid #e6d4bf; border-radius: 10px; background: #fff; color: #5a4a3a;
    box-shadow: none; font-size: .84rem; font-weight: 700; transform: none;
}
.mg-v2 .quick-btn:hover { background: #fbf4ec; color: #3f3328; transform: none; box-shadow: none; }

/* ---- ястията: редове с отметка, на два стълба */
.mg-v2 .checkbox-group {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px;
    margin-bottom: 10px; padding: 0;
}
@media (min-width: 1700px) {
    .mg-v2 .checkbox-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mg-v2 .checkbox-item,
.mg-v2 .content-grid.expanded .checkbox-item {
    flex: none; max-width: none; min-height: 0; flex-direction: row; align-items: center;
    padding: 9px 10px 9px 40px; border: 0; border-radius: 11px; background: none; box-shadow: none; overflow: visible;
}
/* ::before вече не е лъскав блясък, а самото квадратче.
   ❗ display: block е задължителен - articles.css (зарежда се за цялото табло)
   слага `.checkbox-item::before { display: none }` и квадратчето изчезваше. */
.mg-v2 .checkbox-item::before {
    content: ''; display: block; position: absolute; pointer-events: none;
    top: 50%; left: 10px; width: 20px; height: 20px; transform: translateY(-50%);
    border: 2px solid #d9c6ae; border-radius: 6px; background: none; transition: none; box-sizing: border-box;
}
.mg-v2 .checkbox-item:hover::before { left: 10px; }
.mg-v2 .checkbox-item:hover { background: #fbf4ec; border: 0; transform: none; box-shadow: none; }
.mg-v2 .checkbox-item.selected { background: #fbf4ec; border: 0; transform: none; box-shadow: none; }
.mg-v2 .checkbox-item.selected::before { border-color: #3a2f26; background: #3a2f26; }
.mg-v2 .checkbox-item.selected::after {
    top: 50%; left: 10px; right: auto; width: 20px; height: 20px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center; border-radius: 6px;
    background: none; color: #f1d3a6; font-size: 12px; animation: none;
}
.mg-v2 .checkbox-item-content { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-width: 0; text-align: left; }
.mg-v2 .checkbox-item-title { flex: 1; min-width: 0; margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.35; color: #3f3328; }
.mg-v2 .checkbox-item.selected .checkbox-item-title { color: #2b231d; }
.mg-v2 .checkbox-item-meta { flex: none; flex-wrap: nowrap; gap: 8px; margin: 0; }
.mg-v2 .checkbox-item-meta span { font-size: .78rem; color: #8a7866; }
.mg-v2 .checkbox-item-meta span::before { display: none; }
.mg-v2 .checkbox-item-meta .price-primary,
.mg-v2 .checkbox-item.selected .checkbox-item-meta .price-primary { font-size: .9rem; font-weight: 700; color: #5a4a3a; background: none; padding: 0; }
.mg-v2 .checkbox-item-meta .price-secondary { font-size: .78rem; color: #8a7866; background: none; padding: 0; }

/* ---- дясно: тъмната карта „Днешно меню" */
.mg-v2 .preview-panel {
    padding: 18px; border-radius: 20px; color: #fff;
    background: linear-gradient(135deg, #3a2f26, #57432f);
    box-shadow: 0 16px 40px rgba(60, 40, 25, .22);
}
.mg-v2 .preview-header { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .12); text-align: left; }
.mg-v2 .preview-header .onoffswitch { display: none; }
.mg-v2 .preview-header-top { justify-content: flex-start; }
.mg-v2 .preview-header h2 {
    margin: 0; font-size: 1.05rem; font-weight: 800; color: #fff;
    background: none; -webkit-text-fill-color: #fff;
}
.mg-v2 .preview-date { margin-top: 2px; font-size: .85rem; color: #d9c6ae; }

.mg-v2 #selectedItems { max-height: 48vh; overflow-y: auto; padding: 6px 12px; border-radius: 14px; background: #fff; color: #3f3328; }
.mg-v2 #selectedItems .empty-state { padding: 22px 6px; color: #8a7866; }
.mg-v2 #selectedItems .empty-state i { color: #d4a574; }
.mg-v2 .menu-section { margin: 0; }
.mg-v2 .menu-section h3 {
    margin: 10px 0 2px; padding: 0; border: 0; background: none; border-radius: 0;
    font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8a7866;
}
.mg-v2 .menu-section h3 .drag-hint { display: none; }
.mg-v2 .menu-items { gap: 0; }
.mg-v2 .menu-item { padding: 6px 26px 6px 0; border: 0; border-bottom: 1px dashed #f1e8de; border-radius: 0; background: none; }
.mg-v2 .menu-item:hover { background: none; transform: none; box-shadow: none; }
.mg-v2 .menu-item-content { font-size: .88rem; font-weight: 500; color: #3f3328; }
.mg-v2 .menu-item-remove { top: 50%; right: 0; transform: translateY(-50%); width: 22px; height: 22px; background: none; color: #c4b2a0; opacity: 1; }
.mg-v2 .menu-item-remove:hover { background: #fdecea; color: #b3261e; transform: translateY(-50%); }
/* Полето „Плъзнете ястие тук" е излишно в стегнатия списък - самите редове приемат пускане */
.mg-v2 .drop-zone { display: none; }
/* Преди полето се показваше при влачене и местеше целия списък (във втората+ категория пускането пропадаше).
   Сега последното място се хваща от долната половина на последния ред - вж. menuGenerator._dropSide. */
.mg-v2 .menu-item.drop-before { box-shadow: inset 0 2px 0 #d4a574; }
.mg-v2 .menu-item.drop-after { box-shadow: inset 0 -2px 0 #d4a574; }

.mg-v2 .menu-summary { margin: 10px 0 0; padding: 0 2px; border: 0; background: none; box-shadow: none; }
.mg-v2 .menu-summary h4 { display: none; }
.mg-v2 .menu-summary .summary-item { padding: 2px 0; border: 0; }
.mg-v2 .menu-summary .summary-label { color: #c9b39a; }
.mg-v2 .menu-summary .summary-value { color: #fff; }

.mg-v2 .venue-bar { display: flex; gap: 2px; margin-top: 12px; padding: 3px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .1); }
.mg-v2 .venue-bar[hidden] { display: none; }
.mg-v2 .venue-bar-label { display: none; }
.mg-v2 .venue-tab { flex: 1; min-width: 0; padding: 7px 6px; border: 0; border-radius: 9px; background: none; color: #e9dccd; box-shadow: none; font-size: .8rem; font-weight: 700; }
.mg-v2 .venue-tab:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.mg-v2 .venue-tab.active { background: #fff; color: #3a2f26; }
.mg-v2 .venue-warning { margin-top: 10px; border-radius: 12px; }

/* ---- бутоните за сваляне като плочки */
.mg-v2 .action-buttons {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12);
}
/* ❗ Текстът минава на нов ред: components.css дава на всеки .btn
   `white-space: nowrap` + overflow hidden и дългите надписи („Катеричката
   Копирай текста") се режеха. Височината следва съдържанието - !important,
   защото някои шаблони носят свои размери за бутоните. */
.mg-v2 .action-buttons { grid-auto-rows: auto; align-items: stretch; }
.mg-v2 .action-buttons .btn {
    width: 100%; min-width: 0; margin: 0; padding: 10px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
    background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; font-size: .82rem; line-height: 1.2; text-align: center;
    height: auto !important; min-height: 46px !important; max-height: none !important; overflow: visible !important;
    white-space: normal !important; overflow-wrap: anywhere; text-wrap: balance;
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.mg-v2 .action-buttons .btn i { flex: none; }
.mg-v2 .action-buttons .btn::before { display: none; }
.mg-v2 .action-buttons .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .18); transform: none; box-shadow: none; }
.mg-v2 .action-buttons .btn:first-child { grid-column: 1 / -1; border-color: transparent; background: linear-gradient(135deg, #f1d3a6, #d4a574); color: #2b231d; }
.mg-v2 .action-buttons .btn:first-child:hover:not(:disabled) { background: linear-gradient(135deg, #f6dfbd, #dcb084); }
.mg-v2 .action-buttons .btn:disabled { opacity: .45; }

/* ---- телефон и таблет: една колона, лентата се превърта */
@media (max-width: 1099px) {
    .mg-v2 .preview-panel { margin-top: 0; }
}
@media (max-width: 768px) {
    .mg-v2 .generator-panel { padding: 16px; }
    .mg-v2 .checkbox-group { grid-template-columns: 1fr; }
    .mg-days { grid-template-columns: repeat(7, minmax(52px, 1fr)); overflow-x: auto; }
    .mg-st { display: none; }
    .mg-today { position: static; }
    .mg-cal span { display: none; }
    .mg-plan > span { flex: 1 1 100%; }
    .mg-plan-load { flex: 1 1 auto; }
}
@media (pointer: coarse) {
    .mg-day, .mg-week-nav, .mg-cal, .mg-plan-load { min-height: 44px; }
}