/*
 * Kitchen feed (/dashboard/kitchen): a board for a cheap Android tablet next
 * to the stove. Own layout, no Fizzy chrome, brand tokens: Ofenorange for
 * NEU (the action is waiting), ink for IN ZUBEREITUNG, green for ABHOLBEREIT,
 * red when overdue. Everything tappable is at least 64px high.
 */
@layer components {
  .kitchen-body {
    display: block;
    margin: 0;
    min-block-size: 100dvh;
    background-color: var(--color-canvas);
    color: var(--color-ink);
    font-family: var(--font-sans);
    -webkit-text-size-adjust: 100%;
  }

  .kitchen {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .kitchen__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space);
    flex-wrap: wrap;
    padding: 12px 16px;
    background-color: var(--color-surface);
    border-block-end: 2px solid var(--color-ink);
  }

  .kitchen__brand {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: var(--text-medium);

    strong {
      font-weight: 800;
      letter-spacing: -0.03em;
    }
  }

  .kitchen__wordmark {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .kitchen__clock {
    color: var(--color-ink-dark);
    font-variant-numeric: tabular-nums;
  }

  .kitchen__status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .kitchen__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-block-size: 44px;
    padding: 0.4em 1em;
    border: 1px solid var(--color-ink-medium);
    border-radius: var(--radius-control);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-small);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
  }

  .kitchen__badge--offline {
    background-color: var(--color-negative-soft);
    border-color: var(--color-negative);
    color: var(--color-negative);
  }

  .kitchen__badge--sound {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
    animation: kitchen-blink 1.6s ease-in-out infinite;
  }

  .kitchen__hint {
    margin: 0;
    padding: 8px 16px;
    background-color: var(--color-accent-soft);
    color: var(--color-ink);
    font-size: var(--text-small);
    text-align: center;
  }

  .kitchen__empty {
    margin: var(--block-space-double) auto 0;
    padding: 0 16px;
    color: var(--color-ink-dark);
    text-align: center;
  }

  .kitchen__board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 16px 32px;
    align-items: start;

    @media (min-width: 720px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .kitchen__column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-inline-size: 0;
  }

  .kitchen__column-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding-block-end: 8px;
    border-block-end: 1px dashed var(--color-ink-medium);
    font-size: var(--text-x-small);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    small {
      flex-basis: 100%;
      color: var(--color-ink-dark);
      font-size: var(--text-x-small);
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }
  }

  .kitchen__column--new .kitchen__column-title { color: var(--color-link); }
  .kitchen__column--ready .kitchen__column-title { color: var(--color-positive); }

  .kitchen__count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.8em;
    block-size: 1.8em;
    padding-inline: 0.4em;
    border-radius: var(--radius-badge);
    background-color: var(--color-ink);
    color: var(--color-canvas);
    font-size: var(--text-x-small);
    font-variant-numeric: tabular-nums;
  }

  .kitchen__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Card
  /* ------------------------------------------------------------------------ */

  .kitchen-card {
    --card-border: var(--color-ink-lighter);

    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 2px solid var(--card-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    text-align: start;
  }

  .kitchen-card--new {
    --card-border: var(--color-accent);
    animation: kitchen-pulse 1.2s ease-in-out infinite;
  }

  .kitchen-card--ready {
    --card-border: var(--color-positive);
  }

  .kitchen-card--overdue {
    --card-border: var(--color-negative);
    animation: none;

    .kitchen-card__time {
      background-color: var(--color-negative-soft);
      color: var(--color-negative);
    }
  }

  .kitchen-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .kitchen-card__reference {
    font-size: var(--text-x-large);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }

  .kitchen-card__guest {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-medium);
    font-weight: 700;
  }

  .kitchen-card__time {
    padding: 0.2em 0.6em;
    border-radius: var(--radius-badge);
    background-color: var(--color-ink-lightest);
    font-size: var(--text-medium);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .kitchen-card__countdown {
    background-color: var(--color-accent-soft);
    color: var(--color-link);

    &[data-expired] {
      background-color: var(--color-negative-soft);
      color: var(--color-negative);
    }
  }

  .kitchen-card__note {
    margin: 0;
    font-weight: 700;
  }

  .kitchen-card__note--manual {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    font-weight: 500;
  }

  .kitchen-card__items {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-normal);
    line-height: 1.5;

    li {
      padding-block: 4px;
    }

    li + li {
      border-block-start: 1px dashed var(--color-ink-lighter);
    }
  }

  .kitchen-card__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
    padding-block-start: 8px;
    border-block-start: 1px dashed var(--color-ink-medium);
    font-size: var(--text-large);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  .kitchen-card__payment {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-ink-dark);
  }

  .kitchen-card__actions {
    display: grid;
    gap: 8px;
  }

  .kitchen-card__form {
    display: contents;
  }

  /* Buttons: big enough for greasy fingers
  /* ------------------------------------------------------------------------ */

  .kitchen-btn {
    --btn-bg: var(--color-surface);
    --btn-fg: var(--color-ink);
    --btn-border: var(--color-ink-medium);

    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 64px;
    padding: 0.6em 1em;
    border: 2px solid var(--btn-border);
    border-radius: var(--radius-control);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font: inherit;
    font-size: var(--text-medium);
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: 100ms ease-out;
    transition-property: background-color, border-color, transform;

    &:active {
      transform: scale(0.98);
    }

    &[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .kitchen-btn--accept {
    --btn-bg: var(--color-accent);
    --btn-fg: var(--color-accent-ink);
    --btn-border: var(--color-accent);
  }

  .kitchen-btn--ready {
    --btn-bg: var(--color-positive);
    --btn-fg: var(--color-canvas);
    --btn-border: var(--color-positive);
  }

  .kitchen-btn--done {
    --btn-bg: var(--color-ink);
    --btn-fg: var(--color-canvas);
    --btn-border: var(--color-ink);
  }

  .kitchen-btn--reject {
    --btn-bg: var(--color-negative-soft);
    --btn-fg: var(--color-negative);
    --btn-border: var(--color-negative);
  }

  .kitchen-btn--plain {
    --btn-bg: transparent;
  }

  .kitchen-dialog {
    inline-size: min(90vw, 32rem);
    padding: var(--block-space-double);
    text-align: start;
  }

  .kitchen-dialog__title {
    margin: 0 0 var(--block-space);
    font-size: var(--text-large);
    font-weight: 800;
    letter-spacing: -0.035em;
  }

  .kitchen-dialog__reasons,
  .kitchen-dialog__form {
    display: grid;
    gap: 8px;
  }

  .kitchen-dialog__label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-ink-dark);
  }

  .kitchen-dialog__select {
    min-block-size: 64px;
    font-size: var(--text-medium);
    font-weight: 700;
  }

  .kitchen-dialog__note {
    margin: 0;
    color: var(--color-ink-dark);
  }

  .kitchen-card__warning {
    margin: 0;
    padding: 12px;
    border-radius: var(--radius-control);
    background-color: var(--color-negative-soft);
    color: var(--color-negative);
    font-size: var(--text-small);
    font-weight: 700;
    text-align: center;
  }

  /* Chat with the guest
  /* ------------------------------------------------------------------------ */

  .kitchen-btn--chat {
    gap: 8px;
  }

  .kitchen-btn--chat-unread {
    --btn-bg: var(--color-accent-soft);
    --btn-border: var(--color-accent);
  }

  .kitchen-card__unread {
    padding: 0.15em 0.6em;
    border-radius: var(--radius-badge);
    background-color: var(--color-accent);
    color: var(--color-accent-ink);
    font-size: var(--text-small);
  }

  .kitchen-chat {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    max-block-size: min(90dvh, 44rem);

    &:not([open]) {
      display: none;
    }
  }

  .kitchen-chat__thread {
    flex: 1;
    min-block-size: 8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .kitchen-chat__hint {
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--radius-control);
    background-color: var(--color-accent-soft);
    font-size: var(--text-small);
  }

  .kitchen-chat__form {
    display: grid;
    gap: 8px;
  }

  .kitchen-chat__input {
    min-block-size: 64px;
    font-size: var(--text-normal);
    resize: vertical;
  }

  .kitchen-dialog__cancel {
    margin-block-start: var(--block-space);
  }

  @keyframes kitchen-pulse {
    0%, 100% { box-shadow: 0 0 0 0 oklch(var(--lch-accent) / 0.8); }
    50% { box-shadow: 0 0 0 8px oklch(var(--lch-accent) / 0); }
  }

  @keyframes kitchen-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  @media (prefers-reduced-motion: reduce) {
    .kitchen-card--new,
    .kitchen__badge--sound {
      animation: none;
    }
  }
}