@import url("./thumb-rule-common.css");

/* Special Status Badge */
.tr-status-badge {
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
}

.tr-status-success {
  background-color: #dcfce7; /* green-100 */
  color: #15803d; /* green-700 */
}

.dark .tr-status-success {
  background-color: rgba(20, 83, 45, 0.5); /* green-900/50 */
  color: #86efac; /* green-300 */
}

.tr-status-error {
  background-color: #fee2e2; /* red-100 */
  color: #b91c1c; /* red-700 */
}

.dark .tr-status-error {
  background-color: rgba(127, 29, 29, 0.5); /* red-900/50 */
  color: #fca5a5; /* red-300 */
}

/* Layout Utilities */
.tr-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* gap-4 */
}

@media (min-width: 768px) {
  .tr-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tr-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* gap-4 */
}

@media (min-width: 768px) {
  .tr-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tr-input-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* space-y-1 */
}

.tr-input-label-sm {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  color: var(--page-text);
  margin-bottom: 0.25rem;
}

.tr-text-center {
  text-align: center;
}

.tr-advanced-header {
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}