body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 1280px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: #1a1a1a;
}
header { border-bottom: 1px solid #ddd; margin-bottom: 1.5rem; padding-bottom: 0.5rem; }
header h1 { margin: 0 0 0.25rem; }
header nav { font-size: 0.95em; color: #555; }
header nav a { color: #2c5fa6; text-decoration: none; }
header nav a:hover { text-decoration: underline; }
main { font-size: 0.95em; }

a { color: #2c5fa6; text-decoration: none; }
a:hover { text-decoration: underline; }

.btn { padding: 0.35rem 0.75rem; border: 1px solid #888; background: #fafafa;
       cursor: pointer; text-decoration: none; color: inherit; }
.btn:hover { background: #f0f0f0; }
.btn:disabled { background: #f5f5f5; color: #999; cursor: not-allowed; }
.error { color: #b00020; }
.muted { color: #888; font-size: 0.9em; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid #eee;
         vertical-align: top; }
th { background: #fafafa; font-size: 0.9em; }
table.kv { width: auto; }
table.kv th { width: 12rem; }

.pill { padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.8em;
        background: #eee; display: inline-block; }
.pill-ok { background: #d6f5d6; }
.pill-warn { background: #fff3cd; }
.pill-err { background: #f8d7da; }
.pill-grey { background: #e0e0e0; color: #555; }
.pill-outline { background: transparent; border: 1px solid #b88800; }
.pill-strikethrough { text-decoration: line-through; }

/* Raw payload viewer on order detail page */
pre.raw-payload {
  background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 4px;
  padding: 0.75rem; max-height: 32rem; overflow: auto;
  font-size: 0.85em; line-height: 1.4;
}

/* Clickable rows (e.g. dashboard Channels table) */
tr.row-link { cursor: pointer; }
tr.row-link:hover { background: #f5f8fc; }
tr.row-link a { color: inherit; text-decoration: none; }
tr.row-link:hover a { text-decoration: underline; }

/* Dashboard cards */
.card-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.card { background: #f8f9fa; border: 1px solid #e1e4e8; border-radius: 6px;
        padding: 1rem 1.25rem; flex: 1 1 180px; }
.card-value { font-size: 1.75rem; font-weight: 600; margin-bottom: 0.25rem; }
.card-label { font-size: 0.85em; color: #555; text-transform: uppercase;
              letter-spacing: 0.5px; }
.card-alert { background: #fff3f3; border-color: #f5c6c6; }
.card-warn { background: #fff8e6; border-color: #f0d878; }

/* Filter form */
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end;
           margin-bottom: 1rem; padding: 0.75rem; background: #fafafa; border-radius: 4px; }
.filters label { display: flex; flex-direction: column; font-size: 0.85em; color: #555; }
.filters input, .filters select { font: inherit; padding: 0.3rem 0.4rem; }

.pagination { margin-top: 1rem; }
.pagination a { margin-right: 1rem; }

/* Tabs on product detail */
nav.tabs { border-bottom: 1px solid #ddd; margin: 1rem 0 1.5rem; }
nav.tabs a { display: inline-block; padding: 0.5rem 1rem; color: #555;
             text-decoration: none; border-bottom: 2px solid transparent;
             margin-bottom: -1px; }
nav.tabs a.active { color: #1a1a1a; border-bottom-color: #2c5fa6; font-weight: 600; }
nav.tabs a:hover { background: #fafafa; text-decoration: none; }

.btn-active { background: #e0eaf5; border-color: #2c5fa6; }

/* Dashboard channels table — flag last-build cells where the most
   recent build is more than 24h old, so it's obvious which feeds
   have gone quiet. */
td.stale-build { background: #ffd9e2; }
tr.row-link:hover td.stale-build { background: #ffc4d1; }

/* Session detail — line-item sub-rows under each order row */
.orders-with-lines tr.line-detail-row > td { padding: 0; border-bottom: 1px solid #eee; }
.line-detail-table {
  width: 100%;
  background: #eef4fb; /* pale blue — sub-level details */
  font-size: 0.85em;
  margin: 0;
}
.line-detail-table th,
.line-detail-table td {
  padding: 0.3rem 0.6rem;
  border-bottom: 1px solid #dbe6f2;
}
.line-detail-table th { background: #dde9f5; font-size: 0.9em; }
.line-detail-table tr:last-child td { border-bottom: none; }

/* Admin pages — card panels for grouped controls (e.g. the materials
   cost admin's two trigger forms + result panel). */
.admin-card {
  border: 1px solid #d0d6e0;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  background: #fafbfd;
}
.admin-card h2, .admin-card h3 { margin-top: 0; }
.admin-card-error { background: #fff2f4; border-color: #f0bcc4; }
.admin-card-error pre {
  background: #fff;
  padding: 0.5rem 0.75rem;
  border: 1px solid #f0bcc4;
  border-radius: 4px;
  white-space: pre-wrap;
}
.admin-card-result { background: #f3faf3; border-color: #b8dcb8; }
.admin-card-result table { width: auto; min-width: 50%; }
.admin-card-result th { padding-right: 1.5rem; font-weight: 500; }

/* Sessions list — visual distinction between EVENT and CAFE_BAR rows.
   Without these, CAFE_BAR rows look identical to EVENT rows and
   operators can't tell the daily cafe sweeper has actually run. */
.session-type-badge {
  display: inline-block;
  padding: 0.1em 0.55em;
  border-radius: 0.3em;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.session-type-badge-event    { background: #e1ecf7; color: #194a85; }
.session-type-badge-cafe_bar { background: #fff1d6; color: #8a5a00; }

/* Subtle row tint so the eye picks up CAFE_BAR rows at a glance. */
tr.session-type-cafe_bar > td { background: #fffaf0; }
tr.session-type-cafe_bar.row-link:hover > td { background: #fff2db; }