/* Mapa do Kitchen (kitchen-mapa.html): calendário do mês com, em cada dia, a ementa e a carta
   de bar do espaço escolhido e, ao lado, as ementas e cartas para arrastar. Linguagem do
   kitchen.css. Um dia vazio fica limpo: os botões «+ Ementa» e «+ Carta» aparecem ao passar o
   rato, com o teclado ou ao arrastar (nos ecrãs de toque ficam sempre à vista). */

:root {
  --km-ementa: rgba(10, 132, 255, 0.1);
  --km-ementa-ink: #0060c7;
  --km-carta: rgba(175, 82, 222, 0.11);
  --km-carta-ink: #8536b0;
  --km-online: #34c759;
  --km-bad: #c4281f;
}

.km-notice {
  margin: 0 0 var(--sp-3);
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff4e5;
  color: #8a4b00;
  font-weight: 600;
}

/* ---------- barra do topo ---------- */
.km-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.km-month {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.km-month__label {
  min-width: 160px;
  margin: 0;
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--kt-ink);
}

/* ---------- calendário e coluna dos menus ---------- */
.km-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-4);
  align-items: start;
}

/* Só a grelha desliza na horizontal nos ecrãs estreitos; a legenda fica à largura do cartão. */
.km-calendar { padding: var(--sp-4); }
.km-calendar__inner { overflow-x: auto; }

.km-weekdays, .km-grid { min-width: 760px; }

/* Legenda: o que quer dizer cada cor e o interruptor, dita uma vez em vez de em cada dia. */
.km-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--kt-secondary);
}

.km-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.km-legend__item .icon { width: 15px; height: 15px; }
.km-legend__item--ementa .icon { color: var(--km-ementa-ink); }
.km-legend__item--carta .icon { color: var(--km-carta-ink); }

.km-weekdays,
.km-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.km-weekdays {
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kt-secondary);
  text-align: center;
}

.km-weekdays .is-weekend { color: var(--kt-tertiary); }
.km-week + .km-week { margin-top: 6px; }

.km-day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 104px;
  padding: 8px;
  border: 1px solid var(--kt-hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
}

.km-day.is-weekend { background: rgba(242, 242, 247, 0.8); }
/* Os dias passados são só consulta: mais baixos, para a semana atual subir no ecrã. */
.km-day.is-past { min-height: 60px; background: rgba(242, 242, 247, 0.45); border-color: transparent; }
.km-day.is-outside { opacity: 0.5; }
/* Contorno de 2 px por dentro: por fora, a parte da grelha que desliza cortava-o nas bordas. */
.km-day.is-today { border-color: var(--kt-accent); box-shadow: inset 0 0 0 1px var(--kt-accent); }

.km-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
  margin-bottom: 2px;
}

.km-day__num {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--kt-ink);
}

.km-day.is-past .km-day__num { color: var(--kt-tertiary); }
.km-day.is-today .km-day__num { background: var(--kt-accent); color: #fff; }

.km-day__today {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--kt-accent);
}

/* ---------- lugares: pastilha com o menu, ou botão «+» para pôr um ---------- */
.km-slot {
  border-radius: 10px;
  font-size: var(--fs-xs);
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.km-slot.is-filled {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 6px 5px 8px;
  border: 1px solid transparent;
}

.km-slot.is-filled[data-slot="ementa"] { background: var(--km-ementa); }
.km-slot.is-filled[data-slot="carta"] { background: var(--km-carta); }

.km-slot__head {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.km-slot__icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.km-slot[data-slot="ementa"] .km-slot__icon { color: var(--km-ementa-ink); }
.km-slot[data-slot="carta"] .km-slot__icon { color: var(--km-carta-ink); }

.km-slot__name {
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.25;
  color: var(--kt-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Fora da ementa online: a pastilha perde a cor, para se ver de relance o que não aparece. */
.km-slot.is-offline { background: rgba(120, 120, 128, 0.1) !important; }
.km-slot.is-offline .km-slot__name { color: var(--kt-secondary); }
.km-slot.is-offline .km-slot__icon { color: var(--kt-tertiary); }
.km-slot.is-past .km-slot__name { color: var(--kt-ink-soft); }

.km-slot__off { padding-left: 20px; color: var(--kt-secondary); }

.km-slot__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-left: 20px;
}

.km-slot__remove {
  display: grid;
  place-items: center;
  flex: none; /* nos dias estreitos o interruptor espremia-o até 5 px */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--kt-secondary);
  cursor: pointer;
}

.km-slot__remove .icon { width: 13px; height: 13px; }
.km-slot__remove:hover { background: rgba(255, 59, 48, 0.12); color: var(--km-bad); }

/* Botão «+ Ementa» / «+ Carta» de um dia vazio */
.km-slot.is-empty {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  border: 1px dashed rgba(60, 60, 67, 0.22);
  background: transparent;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--kt-secondary);
  text-align: left;
  cursor: pointer;
}

.km-slot.is-empty .icon { width: 12px; height: 12px; }
.km-slot.is-empty:hover { border-color: rgba(10, 132, 255, 0.5); color: var(--kt-accent); background: var(--kt-accent-soft); }

@media (hover: hover) {
  .km-slot.is-empty { opacity: 0; }
  .km-day:hover .km-slot.is-empty,
  .km-slot.is-empty:focus-visible { opacity: 1; }
}

.km-slot:focus-visible,
.km-slot__remove:focus-visible,
.km-switch:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 1px; }

/* Interruptor «aparece online» (o nome está no aria-label e na legenda) */
.km-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.km-switch__track {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: var(--r-full);
  background: rgba(120, 120, 128, 0.32);
  transition: background 0.15s ease;
}

.km-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease;
}

.km-switch[aria-checked="true"] .km-switch__track,
.km-switch__track.is-on { background: var(--km-online); }
.km-switch[aria-checked="true"] .km-switch__track::after,
.km-switch__track.is-on::after { transform: translateX(12px); }

/* Ao arrastar (ou com um menu escolhido) os lugares do tipo certo aparecem e destacam-se. */
body[data-mapa-pick="ementa"] .km-slot[data-slot="ementa"]:not(.is-past),
body[data-mapa-pick="carta"] .km-slot[data-slot="carta"]:not(.is-past) {
  opacity: 1;
  border-style: dashed;
  border-color: var(--kt-accent);
  box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.18);
  cursor: copy;
}

body[data-mapa-pick="ementa"] .km-slot.is-empty[data-slot="ementa"],
body[data-mapa-pick="carta"] .km-slot.is-empty[data-slot="carta"] {
  background: var(--kt-accent-soft);
  color: var(--kt-accent);
}

.km-slot.is-over {
  border-style: solid !important;
  background: rgba(10, 132, 255, 0.2) !important;
}

/* ---------- coluna das ementas e cartas ---------- */
.km-side {
  position: sticky;
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
}

.km-side__heading {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--kt-ink);
}

.km-side__hint {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--kt-secondary);
}

.km-side .search { width: 100%; }
.km-side .search .input { width: 100%; }

.km-side__group { display: flex; flex-direction: column; gap: 6px; }

.km-side__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--kt-ink-soft);
}

.km-side__title .icon { width: 15px; height: 15px; }
.km-side__group--ementa .km-side__title .icon { color: var(--km-ementa-ink); }
.km-side__group--carta .km-side__title .icon { color: var(--km-carta-ink); }

.km-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 12px;
  transition: box-shadow 0.2s ease;
}

/* Clicar num «+» sem menu escolhido mostra onde escolher. */
.km-list.is-prompt { box-shadow: 0 0 0 3px var(--kt-accent-soft); }

.km-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 1px solid var(--kt-hairline);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  font: inherit;
  color: var(--kt-ink);
  text-align: left;
  cursor: grab;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.km-menu__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.km-menu__icon .icon { width: 15px; height: 15px; }
.km-menu[data-type="menu"] .km-menu__icon { background: var(--km-ementa); color: var(--km-ementa-ink); }
.km-menu[data-type="bar"] .km-menu__icon { background: var(--km-carta); color: var(--km-carta-ink); }

.km-menu__text { display: flex; flex-direction: column; min-width: 0; }
.km-menu__name { font-size: var(--fs-sm); font-weight: 650; overflow-wrap: anywhere; }
.km-menu__meta { font-size: var(--fs-xs); color: var(--kt-secondary); }

.km-menu:hover { border-color: rgba(10, 132, 255, 0.45); }
.km-menu:active { cursor: grabbing; }
.km-menu:focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 1px; }
.km-menu.is-selected { border-color: var(--kt-accent); box-shadow: 0 0 0 1px var(--kt-accent); background: #fff; }

.km-empty {
  padding: 2px 0;
  font-size: var(--fs-sm);
  color: var(--kt-secondary);
}

body.km-locked .km-menu { cursor: default; opacity: 0.6; }

/* Janela da repetição: caixa «Não voltar a mostrar» */
.km-dialog__check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--kt-ink-soft);
}

.km-dialog__choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 1100px) {
  .km-layout { grid-template-columns: 1fr; }
  .km-side { position: static; order: -1; }
  .km-list { flex-direction: row; flex-wrap: wrap; }
  .km-list > li { flex: 0 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .km-slot, .km-switch__track, .km-switch__track::after, .km-menu, .km-list { transition: none; }
}