/* Tables */
.table-wrap { background: var(--surface); border: var(--border); box-shadow: var(--shadow-card); overflow-x: auto; }
.table-tools {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: var(--border); gap: 1rem; flex-wrap: wrap;
}
.table-tools .search {
  display: flex; align-items: center; gap: 0.5rem; flex: 1; max-width: 380px;
  border: var(--border); padding: 0.55rem 0.8rem; background: #fff;
}
.table-tools .search input {
  all: unset; flex: 1; font-family: var(--font-body); font-size: 0.92rem; color: var(--ink);
}
.table-tools .search i { color: var(--ink-soft); }
.table-tools .filter-group { display: flex; align-items: center; gap: 0.5rem; }
.table-tools .filter-group select {
  border: var(--border); padding: 0.55rem 0.8rem; background: #fff;
  font-family: var(--font-body); font-size: 0.88rem; border-radius: 0;
}

table.tbl { width: 100%; border-collapse: collapse; }
table.tbl thead th {
  background: var(--bg);
  text-align: left;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.85rem 1rem; border-bottom: var(--border); border-right: 1px solid var(--ink);
  color: var(--ink);
}
table.tbl thead th:last-child { border-right: none; }
table.tbl tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  font-size: 0.92rem;
  vertical-align: middle;
}
table.tbl tbody td:last-child { border-right: none; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: #f6f6f6; }

table.tbl .mono { font-family: 'IBM Plex Mono', monospace; font-feature-settings: 'tnum' 1; }
table.tbl .id-col { width: 100px; color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; }
table.tbl .actions-col { width: 130px; }
table.tbl .row-actions { display: flex; gap: 0.4rem; }
table.tbl .icon-btn {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.35rem 0.5rem; border: 1px solid var(--ink);
  background: #fff; color: var(--ink);
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  line-height: 1; text-decoration: none; outline: none;
  box-sizing: border-box;
}
table.tbl .icon-btn:hover { background: var(--ink); color: #fff; }
table.tbl .icon-btn.danger:hover { background: var(--error); color: #fff; border-color: var(--error); }
table.tbl .icon-btn.reset-btn { border-color: #ca8a04; color: #92400e; }
table.tbl .icon-btn.reset-btn:hover { background: #ca8a04; color: #fff; border-color: #ca8a04; }

.empty-state {
  padding: 3rem 1rem; text-align: center; color: var(--ink-soft);
  font-family: var(--font-head); font-weight: 300; font-size: 1.2rem;
}

.table-footer {
  padding: 0.75rem 1.25rem; border-top: var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.82rem; color: var(--ink-soft);
}

/* Permanent success button style */
table.tbl .icon-btn.success { border-color: #059669; color: #065f46; }
table.tbl .icon-btn.success:hover { background: #059669; color: #fff; border-color: #059669; }

/* ── Mobile card layout — no horizontal scroll ── */
@media (max-width: 768px) {
  /* Table wrap loses the overflow clip */
  .table-wrap {
    overflow-x: visible;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .table-tools {
    padding: 0.75rem 0;
    border: none;
    background: transparent;
    margin-bottom: 0.5rem;
  }

  /* Table structure becomes block */
  table.tbl, table.tbl tbody { display: block; width: 100%; }
  table.tbl thead { display: none; }

  /* Each row = a card */
  table.tbl tbody tr {
    display: block;
    border: 2px solid var(--ink);
    margin-bottom: 0.85rem;
    box-shadow: 3px 3px 0 var(--ink);
    background: var(--surface);
    overflow: hidden;
  }
  table.tbl tbody tr:hover { background: var(--surface); }

  /* Each cell = a label + value row */
  table.tbl tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(10,11,16,0.09);
    border-right: none;
    font-size: 0.9rem;
    min-height: 44px;
    text-align: right;
    gap: 0.5rem;
  }
  table.tbl tbody td:last-child { border-bottom: none; }

  /* Label from data-label attribute */
  table.tbl tbody td::before {
    content: attr(data-label);
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-soft);
    flex-shrink: 0;
    min-width: 80px;
    text-align: left;
  }
  table.tbl tbody td[data-label=""]::before { display: none; }

  /* Hide code/id columns — not needed on mobile */
  table.tbl td.id-col { display: none; }

  /* Actions cell — block so grid inside controls everything */
  table.tbl tbody td.actions-col,
  table.tbl tbody td[data-label=""] {
    display: block;
    padding: 0.65rem 0.75rem;
    min-height: auto;
    border-bottom: none;
  }
  table.tbl tbody td.actions-col::before,
  table.tbl tbody td[data-label=""]::before { display: none; }

  /* Grid layout: 2 equal columns — buttons fill their cells automatically */
  table.tbl .row-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    width: 100%;
  }

  /* Each button fills its grid cell */
  table.tbl .icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.7rem 0.5rem;
    font-size: 0.82rem;
    min-height: 44px;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Primary actions — color coded */
  table.tbl .icon-btn.success { background: #d1fae5; border-color: #059669; color: #065f46; }
  table.tbl .icon-btn.danger  { background: #fee2e2; border-color: #dc2626; color: #dc2626; }

  /* Modify Qty — spans both columns, sits below the primary action row */
  table.tbl .icon-btn.modify-btn {
    grid-column: 1 / -1;
    background: #f5f5f5;
    border-color: rgba(10,11,16,0.25);
    color: var(--ink-soft);
    font-size: 0.78rem;
    padding: 0.5rem 0.75rem;
    min-height: 38px;
  }

  /* Reset to Scheduled — spans both columns, amber color */
  table.tbl .icon-btn.reset-btn {
    grid-column: 1 / -1;
    background: #fef9c3;
    border-color: #ca8a04;
    color: #713f12;
    font-size: 0.82rem;
  }

  /* Empty-state rows */
  table.tbl tbody tr.empty-row {
    border: none; box-shadow: none; background: transparent; margin: 0;
  }
  table.tbl tbody tr.empty-row td {
    justify-content: center; min-height: auto; border-bottom: none;
  }
  table.tbl tbody tr.empty-row td::before { display: none; }

  /* Summary / total rows (no label prefix, centered bold) */
  table.tbl tbody tr.summary-row td { justify-content: center; font-weight: 700; }
  table.tbl tbody tr.summary-row td::before { display: none; }

  /* Inputs inside table cells (e.g. MilkProduction entry form) */
  table.tbl tbody td input[type="number"],
  table.tbl tbody td input[type="text"] {
    flex: 1; max-width: 150px; min-width: 70px; text-align: right;
  }
}