/**
 * Table Styles
 * Global table styling + deployment-specific styles
 */

/* ==========================================================================
   Global Table Styles
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
}
.tabledrag-toggle-weight-wrapper {
  display: none;
}
table th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-400);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-gray-200);
}

table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-gray-100);
  font-size: var(--font-size-base);
  color: var(--color-gray-700);
}

table tbody tr:last-child td {
  border-bottom: none;
}

table tbody tr:hover {
  background: var(--color-gray-50);
}

/* Compact buttons inside tables */
table td .button,
table td .form-submit {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  min-height: 0;
  line-height: 1.2;
}

table td .ief-entity-operations {
  display: flex;
  gap: var(--space-1);
  margin: 0;
}

/* Compact fieldsets/forms inside tables */
table td .fieldset,
table td .fieldset__wrapper,
table td .form-item {
  margin: 0;
  padding: 0;
}

table td .form-element {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  min-height: 0;
}

table td select.form-element {
  padding-right: var(--space-8);
  min-width: 100px;
}

table td .form-item__label {
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-1);
}

/* Hide Claro's spin buttons on email/text fields in tables */
table td .form-element--type-email,
table td .form-element--type-text {
  -moz-appearance: textfield;
}

table td .form-element--type-email::-webkit-inner-spin-button,
table td .form-element--type-email::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

table td .custom-field-row {
  width: 100%;
}
table td .custom-field-widget-wrapper {
  width: 100%;
  border: none;
  background-color: transparent;
  box-shadow: none;
}
table td .custom-field-widget-wrapper > .fieldset__wrapper {
  width: 100%;
}

table td .custom-field-row > .form-item {
  padding: var(--space-2) var(--space-2);
}

/* ==========================================================================
   Deployments Table (Card-style rows)
   ========================================================================== */

.deployments-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5rem;
  font-size: 90%;
}

/* Table header styling */
.deployments-table thead th {
  background: transparent;
  color: var(--color-gray-600);
  font-weight: 600;
  text-align: left;
  padding: 0.5rem 0.875rem;
  border: none;
}

/* Style each row as a card (deployment-item) */
.deployments-table tbody tr {
  box-shadow: 0 0 0 1px var(--color-gray-200);
  border-radius: 8px;
  transition: all 0.15s;
  background: var(--color-white);
}

.deployments-table tbody tr:hover {
  box-shadow: 0 0 0 1px var(--color-primary);
  background: var(--color-gray-50);
}

/* Ensure first and last cells have rounded corners */
.deployments-table tbody tr td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.deployments-table tbody tr td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Table cells - default table display */
.deployments-table td {
  padding: 0.875rem;
  border: none;
  vertical-align: middle;
}

/* ID Column - monospace font */
.deployments-table .deployment-id {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 500;
  color: var(--color-gray-900);
}

/* Created Column - small muted text */
.deployments-table .deployment-created {
  color: var(--color-gray-400);
}

/* Duration Column - small text */
.deployments-table .deployment-duration {
  color: var(--color-gray-500);
}

/* Status Column */
.deployments-table .deployment-status {
}

/* Action Column */
.deployments-table .deployment-action {
  text-align: right;
}

.deployments-table .button--small {
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  border: 1px solid var(--color-gray-200);
  background: var(--color-white);
  color: var(--color-gray-600);
  transition: all 0.15s;
}

.deployments-table .button--small:hover {
  background: var(--color-gray-100);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Status-specific icon styling */
.deployments-table .status-active,
.deployments-table .status-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.deployments-table .status-error,
.deployments-table .status-failed {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.deployments-table .status-pending,
.deployments-table .status-running {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

/* Spinner for running status - uses shared @keyframes spin from animations.css */
.deployments-table .status-running::before {
  background: transparent;
  border: 2px solid var(--color-info-text);
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}