.sdt-wrap{ padding: 10px 0; position: relative; min-height: 240px; }

/* Topbar */
.sdt-filter-topbar{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom: 10px;
}

.sdt-filters{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap:14px;
  align-items:end;
  margin-bottom:14px;
}

/* IMPORTANT: allow grid children to shrink so long text doesn't blow layout */
.sdt-field { min-width: 0; }

.sdt-field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;

  /* prevent super long label from stretching */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sdt-field input,
.sdt-field select{
  width:100%;
  padding:10px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  background:#fff;

  /* prevent long selected text from stretching UI */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sdt-field select{
  cursor:pointer;
}

.sdt-actions{ display:flex; }

.sdt-btn{
  padding:10px 14px;
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:6px;
  cursor:pointer;
}
.sdt-btn:hover{ background:#f7f7f7; }

@media (max-width: 1000px){
  .sdt-filters{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}

/* Loading overlay */
.sdt-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);
  z-index: 50;
}

.sdt-loading-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:18px 22px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.sdt-spinner{
  width:42px;
  height:42px;
  border:4px solid #e5e7eb;
  border-top-color:#111827;
  border-radius:999px;
  animation: sdtSpin 0.9s linear infinite;
}

.sdt-loading-title{ font-weight:700; font-size:16px; }
.sdt-loading-sub{ font-size:13px; color:#6b7280; }

@keyframes sdtSpin{ to{ transform: rotate(360deg); } }

/* hide helper class */
.sdt-hide{ display:none !important; }

