.data-table { width: 100%; border-collapse: collapse; background: var(--panel); margin-bottom: var(--space-3); }
.data-table th, .data-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  vertical-align: top;
}
.data-table th { color: var(--muted); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; }
.data-table-empty { text-align: center; color: var(--muted-2); padding: var(--space-4); }
/* Zebra striping (reference look), with hover taking precedence. */
.data-table tbody tr:nth-child(odd) td { background: var(--panel-header); }
.data-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }

.table-actions { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; }

.badge { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-active { background: var(--success-bg); color: var(--success); }
.badge-suspended { background: var(--danger-bg); color: var(--danger-text); }
.badge-past { background: var(--danger-bg); color: var(--danger-text); }

.past-exception td { color: var(--muted); background: var(--panel-header); }

.data-table td input, .data-table td select {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background-color: var(--panel);
  color: inherit;
}
.data-table td input[type="number"] { width: 80px; }
.data-table td select { max-width: 220px; }

.option-assignment-row, .delivery-zone-row, .option-item-row, .pickup-option-row, .menu-item-row, .header-block-row, .category-row, .gallery-image-row { cursor: grab; }
.option-assignment-row.dragging, .delivery-zone-row.dragging, .option-item-row.dragging, .pickup-option-row.dragging, .menu-item-row.dragging, .header-block-row.dragging, .category-row.dragging, .gallery-image-row.dragging { opacity: 0.4; }
.option-assignment-row .drag-handle, .delivery-zone-row .drag-handle, .option-item-row .drag-handle, .pickup-option-row .drag-handle, .menu-item-row .drag-handle, .header-block-row .drag-handle, .category-row .drag-handle, .gallery-image-row .drag-handle {
  display: inline-block; width: 1.5em; padding: var(--space-2) var(--space-1);
  font-size: 1.5em; line-height: 1; text-align: center; color: var(--muted); cursor: grab;
}

/* One slide of a "slider" home page block (home_page_blocks.js's
   slideRowHtml) - a smaller nested version of .block-editor-row, since it
   lives inside one block's own "Slides" form-field rather than at the top
   level of the editor. */
.slide-editor-row {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3);
  margin-bottom: var(--space-2); background: var(--panel-header);
}
.slide-editor-row.dragging { opacity: 0.4; }
.slide-editor-row-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.slide-drag-handle {
  display: inline-block; padding: var(--space-1);
  font-size: 1.3em; line-height: 1; color: var(--muted); cursor: grab;
}
.slides-editor { margin-bottom: var(--space-2); }

.block-editor-row {
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3);
  margin-bottom: var(--space-3); background: var(--panel);
  max-width: 800px;
}
.block-editor-row.dragging { opacity: 0.4; }
.block-editor-row-header {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
}
.block-editor-row-header strong { flex: 1; cursor: pointer; }
.block-editor-row-header .drag-handle {
  display: inline-block; padding: var(--space-2) var(--space-1);
  font-size: 1.5em; line-height: 1; color: var(--muted); cursor: grab;
}
/* .block-collapse-toggle is a bare <button> (base.css otherwise gives every
   button its full filled background/border chrome), styled to sit
   inline with the drag handle. */
.block-collapse-toggle {
  background: none; border: none; padding: var(--space-2) var(--space-1);
  font-size: 1.1em; line-height: 1; color: var(--muted); cursor: pointer;
}
.block-collapse-toggle:hover { filter: none; color: var(--text); }
.block-editor-row--collapsed .block-editor-row-fields { display: none; }
.block-editor-row-fields .form-field { margin-bottom: var(--space-2); }
.block-editor-row-fields .range-value { margin-left: var(--space-2); font-weight: 600; }
/* .field-with-style pairs a text field (hero's heading/tagline/cta_text)
   with its own font-size/color controls in one row, right beside the
   input, instead of each getting its own stacked form-field further down
   the list - see home_page_blocks.js's styledFieldHtml. */
.field-with-style { display: flex; align-items: center; gap: var(--space-2); }
.field-with-style input[type="text"] { flex: 1; min-width: 0; }
.field-with-style-control { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.field-with-style input[type="number"] { width: 64px; }

.hero-position-preview {
  position: relative; width: 100%; min-height: 220px; border-radius: var(--radius);
  background-size: cover; background-position: center; background-color: #2a2a35;
  overflow: hidden;
}
.hero-position-chip {
  position: absolute; transform: translate(-50%, -50%); max-width: 80%;
  background: rgba(0,0,0,0.65); color: #fff; padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); font-size: 0.8rem; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: grab; user-select: none; border: 1px dashed rgba(255,255,255,0.6);
}
.hero-position-chip.dragging { cursor: grabbing; opacity: 0.8; }

.richtext-editor .ql-container { min-height: 120px; border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.richtext-editor .ql-toolbar { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
/* Taller variant for a full-page editor (e.g. the Contact Page content). */
.richtext-editor.richtext-editor-lg .ql-container { min-height: 460px; }
.richtext-editor.richtext-editor-lg { max-width: 820px; }
/* Image alignment (About Page editor) - float/center classes applied via the
   custom "imageAlign" Quill format (see about_page.js), previewed here the
   same way they'll render on the storefront (store.css has the matching
   rules for .richtext-content). */
.richtext-editor .ql-img-left { float: left; margin: 0 var(--space-3) var(--space-2) 0; max-width: 45%; }
.richtext-editor .ql-img-right { float: right; margin: 0 0 var(--space-2) var(--space-3); max-width: 45%; }
.richtext-editor .ql-img-center { display: block; margin: var(--space-2) auto; max-width: 100%; }
.image-align-toolbar { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.link-toggle {
  background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer;
}
.link-toggle:hover { text-decoration: underline; }
.option-detail-row td { background: var(--panel-header); }
.option-detail-row .data-table { margin-top: var(--space-2); }