.stbl-wrap { --stbl-pad: 8px; }
.stbl-controls { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.stbl-controls input[type="search"] { padding:6px 8px; min-width:200px; }
.stbl-controls select, .stbl-controls .button { padding:6px 8px; }

.stbl-scroll { overflow:auto; }
.stbl-table { width:100%; border-collapse: collapse; }
.stbl-table th, .stbl-table td { padding: var(--stbl-pad); border-bottom:1px solid #eaeaea; text-align:left; vertical-align: top; }
.stbl-table th { background:#fafafa; position: sticky; top: 0; z-index: 1; }

.stbl-table img { max-width: 80px; height: auto; display:block; border-radius:6px; }

.stbl-pagination { display:flex; gap:8px; align-items:center; margin-top:12px; }
.stbl-page { padding:6px 10px; border:1px solid #e0e0e0; border-radius:6px; text-decoration:none; }
.stbl-page.disabled { opacity:0.5; border-style:dashed; }
.stbl-page.current { border-style:solid; background:#fafafa; }
.stbl-align-left { text-align:left; }
.stbl-align-center { text-align:center; }
.stbl-align-right { text-align:right; }

/* Controls layout */
.stbl-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

@media (max-width: 1100px) {
  .stbl-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .stbl-controls { grid-template-columns: 1fr; }
}

/* Field block */
.stbl-field { display: flex; flex-direction: column; gap: 6px; }
.stbl-label { font-size: 12px; color: #666; }

/* Inputs */
.stbl-field input[type="search"],
.stbl-field select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}

/* Multi-selects: compact height with internal scroll */
.stbl-field select[multiple] {
  height: 180px; /* pairs with size attr but enforces consistent height */
  overflow: auto;
}

/* Submit button alignment */
.stbl-field--submit .button {
  align-self: flex-end;
  padding: 8px 16px;
  border-radius: 8px;
}

/* Controls layout (slim) */
.stbl-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}
@media (max-width: 1100px) { .stbl-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .stbl-controls { grid-template-columns: 1fr; } }

.stbl-field { display: flex; flex-direction: column; gap: 6px; }

/* Slim multiselect dropdown */
.stbl-ms { position: relative; }
.stbl-ms-toggle {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  line-height: 1.2;
}
.stbl-ms-toggle:after {
  content: "▾";
  float: right;
  opacity: .6;
}
.stbl-ms-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f0f0f0;
  font-size: 12px;
}

.stbl-ms-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 1000;
  display: none;
  max-height: 260px;
  overflow: auto;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 6px 0;
}
.stbl-ms.open .stbl-ms-menu { display: block; }

.stbl-ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
}
.stbl-ms-option:hover { background: #f7f7f7; }
.stbl-ms-option input { margin: 0; }

/* Keep existing helpers */
.stbl-align-left { text-align:left; }
.stbl-align-center { text-align:center; }
.stbl-align-right { text-align:right; }