/* Екрани власника в адмінці WordPress. */
.bof-wrap{--ink:#14201b;--ink2:#4a5852;--ink3:#7d8a84;--line:#dcdcd4;--line2:#ecece6;
  --loden:#35594a;--loden-bg:#e8efe9;--honig:#b8860f;--honig-bg:#fbf2dc;--gf:#6b3f6e;
  --warn:#a63a24;--warn-bg:#fbeae5;max-width:1920px}

/* Пояснення під заголовком екрана. Власний клас, а не `.description`:
   той існує тільки в адмінці, а ці екрани показуються ще й на сайті. */
.bof-lead{max-width:640px;margin:2px 0 18px;color:var(--ink2);font-size:13.5px;line-height:1.55}
.bof-lead--wide{max-width:760px}

/* Внесення — це форма, а не таблиця: заголовок, пояснення й саму форму
   тримаємо однією колонкою, інакше на широкому екрані вони розʼїжджаються.

   Колонка стоїть ПО ЦЕНТРУ. У 0.4.2 її було посунуто вліво — заради
   однаковості з сусідніми вкладками, які починаються від краю, — і замовник
   повернув назад у 0.5.1: форма посеред екрана читається спокійніше,
   а однаковість тут ціни не має.

   Ширина та сама, що в самої форми (`.bof-app--staff` у guest.css). Було
   640 проти 760 — форма просила більше, ніж їй міг дати батько, тож 760
   не діяло ніколи. Одне число замість двох, які сперечаються; це з 0.4.2
   лишилось, бо до розташування стосунку не має. */
.bof-entry{max-width:760px;margin:0 auto}

.bof-seg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.bof-seg a{display:inline-block;padding:6px 13px;border:1px solid var(--line);background:#fff;
  border-radius:3px;text-decoration:none;color:var(--ink2);font-size:13.5px}
.bof-seg a.active{background:var(--loden);border-color:var(--loden);color:#fff}
.bof-seg input[type=date]{padding:5px 8px}

/* Смуга вибору шале на ранковому екрані. Прийом той самий, що в смузі днів
   у формі гостя: картки-кнопки в ряд, вибрана темна, на вузькому екрані
   прокрутка вбік. Значення власні — тут інша типографіка й інші кольори. */
.bof-wrap .bof-chalets{display:flex;gap:8px;overflow-x:auto;margin:0 0 18px;padding-bottom:2px;
  -webkit-overflow-scrolling:touch}
/* Селектор навмисно з трьох класів: на сторінці сайту тема теж фарбує
   <button>, і смуга має виглядати однаково там і в адмінці. */
.bof-wrap .bof-chalets .bof-ch{flex:0 0 auto;padding:9px 16px;border:1px solid var(--line);
  background:#fff;border-radius:3px;cursor:pointer;font:inherit;font-size:14px;line-height:1.3;
  color:var(--ink2);white-space:nowrap;text-transform:none;letter-spacing:0}
.bof-wrap .bof-chalets .bof-ch:hover{border-color:var(--loden);color:var(--loden)}
.bof-wrap .bof-chalets .bof-ch[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);
  color:#fff;font-weight:600}
/* Скільки замовлень у шале — числом поруч із назвою. Значком у кутку його
   зрізало б прокруткою смуги. */
.bof-wrap .bof-chalets .bof-ch .n{margin-left:8px;font-size:12px;font-weight:400;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.bof-wrap .bof-chalets .bof-ch[aria-pressed="true"] .n{color:#b6c6bf}
/* Шале без замовлень приглушене, як недоступний день у формі гостя,
   але натиснути можна: усередині видно, що там нічого немає. */
.bof-wrap .bof-chalets .bof-ch.none{color:var(--ink3);
  background:repeating-linear-gradient(135deg,#fff,#fff 5px,#f2f2ec 5px,#f2f2ec 6px)}
.bof-wrap .bof-chalets .bof-ch.none[aria-pressed="true"]{background:var(--ink);color:#fff}

/* Відібране ховається, а не перемальовується. */
.bof-wrap .bof-card[hidden],.bof-wrap .bof-empty[hidden],
.bof-wrap .bof-arch[hidden],.bof-wrap .bof-done[hidden]{display:none}

.bof-cover{background:#fff;border:1px solid var(--line);border-left:3px solid var(--loden);
  padding:11px 15px;margin-bottom:18px;display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px}
.bof-cover b{font-variant-numeric:tabular-nums}
.bof-cover .bof-miss{color:var(--warn)}
.bof-empty{padding:34px 4px;color:var(--ink3);text-align:center;background:#fff;border:1px solid var(--line)}
/* «Усе видано» — не порожнеча, а закінчена робота. */
.bof-empty.ok{padding:18px 4px;color:var(--loden);border-color:var(--loden)}

.bof-sect{margin-bottom:22px}
.bof-sect h2{font-size:15px;padding-bottom:6px;border-bottom:1.5px solid var(--ink);margin:0 0 2px}
.bof-sect.gf h2{border-color:var(--gf);color:var(--gf)}
/* Секцій-таблиць кілька — по одній на постачальника. При автоширині кожна
   рахувала колонки за власним вмістом, тому цифри «Molkerei» і «Hof» стояли
   на різних вертикалях. `table-layout:fixed` дає всім однакову геометрію:
   ширини беруться звідси, а не з вмісту. */
table.bof-list{width:100%;border-collapse:collapse;background:#fff;table-layout:fixed}
table.bof-list td{padding:8px 6px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.bof-list td.chk{width:30px}
table.bof-list td.nm .nr{color:var(--ink3);font-size:11.5px;margin-right:7px;font-variant-numeric:tabular-nums}
/* Чотири праві колонки: «скільки замовлено» і «скільки купити».
   У кожної число й одиниця розведені по власних клітинках — цифри стоять
   стовпчиком праворуч, слова починаються з однієї вертикалі ліворуч.
   Ширини задані тут, тож у всіх секціях вони однакові. Назва забирає залишок.
   Одиниці переносяться, а не обрізаються: довге слово має лишитись читабельним. */
table.bof-list td.portq,table.bof-list td.portu{color:var(--ink3);font-size:12.5px}
table.bof-list td.portq{width:52px;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-right:4px}
table.bof-list td.portu{width:98px;text-align:left;padding-left:0;padding-right:24px}
table.bof-list td.buyq{width:58px;text-align:right;white-space:nowrap;
  font-variant-numeric:tabular-nums;padding-right:6px}
table.bof-list td.buyq b{font-size:18px}
table.bof-list td.buyu{width:104px;text-align:left;font-size:12px;color:var(--ink2);padding-left:0}
.bof-sect.gf td.buyq b{color:var(--gf)}

@media (max-width:760px){
  .bof-wrap .bof-chalets .bof-ch{padding:8px 12px;font-size:13.5px}
  table.bof-list td.portq{width:40px}
  table.bof-list td.portu{width:76px;padding-right:12px}
  table.bof-list td.buyq{width:46px}
  table.bof-list td.buyu{width:82px}
}

.bof-summary{display:flex;background:#fff;border:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.bof-summary div{padding:11px 18px;border-right:1px solid var(--line2);flex:1;min-width:110px}
.bof-summary div:last-child{border-right:0}
.bof-summary span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.bof-summary b{font-size:20px;font-variant-numeric:tabular-nums}
.bof-summary .alert b{color:var(--warn)}

/* Кошики одне під одним, на всю ширину — і коли вибрано «Alle», і коли
   лишилось одне шале. Ряд із трьох карток читався як сітка, у якій треба
   шукати потрібне шале; тепер шале обирається смугою вгорі, а список
   читається згори вниз, у порядку часу подачі. */
.bof-cards{min-width:0;display:grid;gap:12px;align-content:start;grid-template-columns:1fr}
.bof-cards .bof-card{margin-bottom:0}
.bof-card{background:#fff;border:1px solid var(--line);margin-bottom:8px}
.bof-card.gf{border-color:var(--gf)}
.bof-card .gfband{background:var(--gf);color:#fff;padding:5px 14px;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
/* Шапка у два рядки: шале й час зверху, дії знизу. В один рядок усе
   четверо не вміщалось — назва шале ламалась навпіл. */
.bof-card header{padding:10px 14px;border-bottom:1px solid var(--line2)}
.bof-card header .top{display:flex;align-items:flex-start;gap:12px}
/* Рядок дій вирівняний праворуч: галочки «geliefert» тут більше немає,
   лишились самі кнопки, і зліва їх ніщо не тримає. */
.bof-card header .act{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:9px}
.bof-card .who{flex:1;min-width:0}
/* Час подачі — праворуч, врівень із назвою. Збіг із іншим шале підсвічується
   тим самим кольором, що й у смузі підсумку: попередження одне, не два. */
.bof-card .tm{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--ink2)}
.bof-card .tm.clash{color:var(--warn)}
.bof-card .ch{font-size:16px;font-weight:600}
.bof-card .gu{font-size:13px;color:var(--ink2)}
.bof-card ul{list-style:none;margin:0;padding:9px 14px}
.bof-card li{display:flex;gap:11px;font-size:14.5px;padding:2px 0}
.bof-card li .q{font-weight:600;min-width:24px;font-variant-numeric:tabular-nums}
.bof-card .msg{margin:0 14px 11px;padding:9px 12px;background:var(--honig-bg);border-left:2px solid var(--honig);font-size:13.5px}
.bof-card .msg b{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#7a5b0a;margin-bottom:2px}
.bof-card .dupe{margin:10px 14px;padding:9px 12px;background:var(--warn-bg);border-left:2px solid var(--warn);font-size:13.5px}
.bof-card .origin{padding:0 14px 10px;font-size:11.5px;color:var(--ink3)}

/* Кнопки в рядку дій картки. Вигляд один на всі — різниця тільки в кольорі
   наведення: «Entfernen» попереджає, друк і повернення ні. */
.bof-card header .act .btns{display:flex;align-items:center;gap:6px}
/* Префікс `.bof-wrap` — з тієї самої причини, що й у смузі вибору шале вище:
   на сторінці сайту тема фарбує кожен <button>, і одинарного класу для неї
   замало. Клас стоїть на обгортці і в адмінці, і на сторінці, тож правило
   одне на обидва місця.

   Без цього на бойовому «Erledigt», «Drucken» і «Löschen» вийшли великим
   текстом із засічками в рожевій рамці. В адмінці цього не видно ніколи —
   там теми немає, тому й помітили аж на живому екрані. */
.bof-wrap .bof-arch-btn,.bof-wrap .bof-print-btn{padding:3px 10px;border:1px solid var(--line);background:#fff;
  border-radius:3px;cursor:pointer;font:inherit;font-size:12px;line-height:1.5;color:var(--ink2);
  white-space:nowrap;text-transform:none;letter-spacing:0;box-shadow:none;width:auto;text-decoration:none}
.bof-wrap .bof-print-btn:hover,.bof-wrap .bof-print-btn:focus{border-color:var(--loden);color:var(--loden);background:#fff}
/* Прибрати з подачі. Не видалення: запис лишається, лише міняє статус. */
.bof-wrap .bof-arch-btn:hover,.bof-wrap .bof-arch-btn:focus{border-color:var(--warn);color:var(--warn);background:#fff}
.bof-wrap .bof-arch-btn.back:hover,.bof-wrap .bof-arch-btn.back:focus{border-color:var(--loden);color:var(--loden)}
.bof-wrap .bof-arch-btn[disabled]{opacity:.4;cursor:wait}

/* Видане. Прийом той самий, що в архіві, але приглушення слабше: архів
   нікуди не рахується, а це — виконана робота, вона рахується скрізь. */
.bof-done{margin-top:30px;padding-top:16px;border-top:1px solid var(--line)}
.bof-done h2{font-size:14px;margin:0;color:var(--ink2)}
.bof-done h2 .n{margin-left:5px;color:var(--ink3);font-weight:400;font-variant-numeric:tabular-nums}
.bof-done .d{margin:2px 0 12px;font-size:12.5px;color:var(--ink3)}
.bof-card.done{opacity:.78}
.bof-card.done .ch em{font-style:normal;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gf);margin-left:6px}

/* Головна дія ранку: кошик винесли, картка їде вниз. */
.bof-wrap .bof-done-btn{padding:3px 12px;border:1px solid var(--loden);background:var(--loden);
  border-radius:3px;cursor:pointer;font:inherit;font-size:12px;line-height:1.5;color:#fff;white-space:nowrap;
  text-transform:none;letter-spacing:0;box-shadow:none;width:auto;text-decoration:none}
.bof-wrap .bof-done-btn:hover,.bof-wrap .bof-done-btn:focus{background:var(--loden);border-color:var(--loden);
  color:#fff;filter:brightness(1.08)}
.bof-wrap .bof-done-btn.back{background:#fff;border-color:var(--line);color:var(--ink2)}
.bof-wrap .bof-done-btn.back:hover,.bof-wrap .bof-done-btn.back:focus{border-color:var(--ink2);background:#fff;
  color:var(--ink2);filter:none}
.bof-wrap .bof-done-btn[disabled]{opacity:.4;cursor:wait}

.bof-arch{margin-top:34px;padding-top:18px;border-top:1px dashed var(--line)}
.bof-arch h2{font-size:14px;margin:0;color:var(--ink2)}
.bof-arch h2 .n{margin-left:5px;color:var(--ink3);font-weight:400;font-variant-numeric:tabular-nums}
.bof-arch .d{margin:2px 0 12px;font-size:12.5px;color:var(--ink3)}
.bof-card.arch{opacity:.62;background:#fbfbf9}
.bof-card.arch .ch em{font-style:normal;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gf);margin-left:6px}

@media print{
  /* Рядок дій на папері не потрібен: кнопки не натиснеш.
     Смуга вибору шале — теж: друкується те, що вона вже відібрала.
     Архів на папір не йде, бо ніде не рахується. Видане, навпаки, йде:
     це виконана робота дня, і на аркуші вона має бути видна. */
  #adminmenumain,#wpadminbar,#wpfooter,.bof-seg,.bof-chalets,.notice,
  .bof-card header .act,.bof-arch,.bof-arch-btn,
  table.bof-list td.chk{display:none!important}
  #wpcontent{margin-left:0!important;padding-left:0!important}
  .bof-card,.bof-sect{break-inside:avoid}

  /* Аркуш на один кошик. Механізм той самий, що й для всього екрана, —
     window.print(). Змінюється лише область: перед друком JS позначає саму
     картку класом `bof-solo-on`, а всіх її батьків — `bof-solo-path`, і тут
     ховається все, що не лежить на цьому шляху. Далі всередині картки діють
     правила вище: галочка й кнопки на папір не йдуть однаково. */
  body.bof-solo > *:not(.bof-solo-path){display:none!important}
  body.bof-solo .bof-solo-path > *:not(.bof-solo-path):not(.bof-solo-on){display:none!important}
  body.bof-solo .bof-solo-path{margin:0!important;padding:0!important;border:0!important;
    background:none!important;width:auto!important;max-width:none!important}
  /* Попередження про дубль — вказівка власниці перевірити, а не відомість
     про сніданок. На аркуші, який лежить на кошику, їй нема місця. */
  body.bof-solo .bof-solo-on .dupe{display:none!important}
}