/* letterboard.css */
/* =========================
   Theme variables
   ========================= */
:root {
  --felt-bg: #4A3A2A;
  --text: #fff;
  --muted: #d7c9b6;
  --accent: #f0e6d6;
}

/* =========================
   Base & background
   ========================= */
html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--felt-bg);
}

/* Felt texture overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0) 8%,
      rgba(0, 0, 0, 0.2) 16%,
      rgba(0, 0, 0, 0) 24%,
      rgba(0, 0, 0, 0.15) 32%,
      rgba(0, 0, 0, 0) 40%,
      rgba(0, 0, 0, 0.2) 48%,
      rgba(0, 0, 0, 0) 56%,
      rgba(0, 0, 0, 0.1) 64%,
      rgba(0, 0, 0, 0) 72%,
      rgba(0, 0, 0, 0.15) 80%,
      rgba(0, 0, 0, 0) 88%,
      rgba(0, 0, 0, 0.2) 100%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03) 25%,
      rgba(0, 0, 0, 0.06) 25%
    );
  background-size: 100% 24px, 6px 6px;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

/* =========================
   Header
   ========================= */
header {
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.brand {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.timestamp {
  color: var(--muted);
  font-size: 16px;
}

/* =========================
   Main board layout (THREE COLUMNS)
   ========================= */
#content {
  display: grid;
  /* LEFT: Pigeon | MIDDLE: Poultry | RIGHT: Ingredients */
  grid-template-columns: 1fr 1fr 1fr !important; /* override any inline rules */
  gap: 0.75rem;                 /* tighter spacing between columns */
  padding: 24px 0 24px 24px;    /* remove right padding to hug the edge */
  box-sizing: border-box;
}

/* Column wrappers */
.col-left,
.col-right,
.col-ingredients {
  display: flex;
  flex-direction: column;
  gap: 2rem;                    /* spacing between each section in a column */
  margin: 0;
  min-width: 0;                 /* allow grid children to shrink instead of forcing extra width */
}

/* Section headers */
.section {
  padding: 1px 24px 4px;        /* slightly reduced bottom padding to tighten header-to-table spacing */
  margin: 0;                    /* remove default margins */
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: yellow;
  text-transform: uppercase;
}

/* =========================
   Tables
   ========================= */
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;          /* prevents long content from expanding column width */
}

.table thead th {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  padding: 4px 6px;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  /* No-wrap enforcement */
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.table tbody td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 18px;
  line-height: 1.3;
  /* No-wrap enforcement */
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.table .name {
  font-weight: 700;
}

.table .price {
  font-weight: 800;
}

.table .muted {
  color: var(--muted);
}

/* Single separator row inside the pigeon table */
.pigeon-separator td {
  padding: 6px 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: var(--accent);
  border-top: 2px solid rgba(255,255,255,0.12);
  border-bottom: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  /* No-wrap enforcement */
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   Footer
   ========================= */
footer {
  padding: 12px 24px;
  color: var(--muted);
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

/* ===== TV sizing: larger text, tighter cells ===== */

/* Headers above tables */
.section {
  font-size: 24px;        /* was 22px → bump up */
  padding: 1px 24px 4px;  /* keep header/table spacing steady */
}

/* Table headers and cells */
.table thead th {
  font-size: 18px;        /* was 16px → bump up */
  padding: 3px 6px;       /* was 4px 6px → tighter vertical */
  line-height: 1.2;       /* slightly tighter lines */
}

.table tbody td {
  font-size: 20px;        /* was 18px → bump up */
  padding: 3px 6px;       /* was 4–6px 6–8px → tighter */
  line-height: 1.2;       /* slightly tighter lines */
}

/* Keep no-wrap & ellipsis behavior you already use */
.table thead th,
.table tbody td {
  white-space: nowrap;           /* no wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Bold weights unchanged, but you can emphasize price a bit more if desired */
.table .name  { font-weight: 700; }
.table .price { font-weight: 800; }

/* Optional: make the separator row match the larger text */
.pigeon-separator td {
  font-size: 18px;
  padding: 4px 6px;        /* slightly tighter than default */
  line-height: 1.2;
}

/* Allow wrapping in the TV2 "Wild Bird" table so names aren't clipped */
#wild-bird thead th,
#wild-bird tbody td {
  white-space: normal;       /* allow wrapping */
  overflow: visible;         /* no clipping */
  text-overflow: clip;       /* disable ellipsis */
  word-break: break-word;    /* break long tokens if needed */
}

/* Optional: give a little extra vertical breathing room for wrapped lines */
#wild-bird tbody td {
  line-height: 1.25;         /* slightly taller lines for readability */
  padding: 4px 6px;          /* a touch more vertical padding if wrapping */
}

/* If you want ONLY the Product Name to be multi-line (prices stay one line): */
#wild-bird tbody td.name {
  white-space: normal;
  word-break: break-word;
}

  /* Shrink entire page uniformly */
  html {
    /* Pick ONE scale: 0.58 or 0.55 or 0.75, etc. */
    transform: scale(0.58);           /* <-- set your desired scale */
    transform-origin: top left;
    width: 172.414%;                  /* <-- 100 / 0.58 = 172.414% (update if you change scale) */
  }

  body {
    margin: 0;
    overflow: hidden;                 /* prevents scrollbars in kiosk browsers */
  }

  /* (tv2 only) keep the table layout tidy while scaled */
  #content {
    display: grid;
    grid-template-columns: 1fr;       /* tv2 = single column with one wide table */
    padding: 24px;
    box-sizing: border-box;
  }

/* ===== Zebra striping for TV2 Wild Bird table (strong specificity) ===== */
#wild-bird tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.08) !important; /* light row */
}
#wild-bird tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.16) !important;       /* slightly darker row */
}

/* Keep text color consistent with your theme */
#wild-bird thead th,
#wild-bird tbody td {
  color: var(--text) !important;
}

/* Optional: hover row aid (staff scanning) */
#wild-bird tbody tr:hover td {
  background: rgba(255, 255, 255, 0.22) !important;
}