/* Panel de jobs dentro del shell de Scope */
.jobs-panel__lead {
  margin: 0 0 var(--space-4);
  max-width: 42rem;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--theme-muted);
}

.jobs-panel__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.jobs-panel__nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--theme-pill-inactive-border);
  background: var(--theme-pill-inactive-bg);
  color: var(--theme-pill-inactive-text);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.jobs-panel__nav a:hover {
  border-color: color-mix(in srgb, var(--sandos-accent) 35%, var(--theme-pill-inactive-border));
  color: var(--theme-heading);
}

.jobs-panel__nav a.is-active {
  background: var(--sandos-accent);
  border-color: var(--sandos-accent);
  color: var(--accent-fg);
}

.jobs-panel__count {
  min-width: 1.35em;
  padding: 1px var(--space-1);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--theme-heading) 8%, transparent);
  color: var(--theme-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}

.jobs-panel__nav a.is-active .jobs-panel__count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--accent-fg);
}

.jobs-panel__selectors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: calc(var(--space-1) * -1) 0 var(--space-3);
}

.jobs-panel__selectors .tabs ul,
.jobs-panel__selectors .navbar-dropdown {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jobs-panel__selectors a {
  color: var(--sandos-accent-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.jobs-panel__body {
  background: var(--theme-card-bg);
  border: 1px solid var(--theme-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.jobs-panel__empty {
  padding: 56px var(--space-6);
  text-align: center;
}

.jobs-panel__empty-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--theme-heading);
}

.jobs-panel__empty-text,
.jobs-panel__body > .has-text-centered {
  margin: 0 auto;
  max-width: 28rem;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.55;
  color: var(--theme-muted);
}

.jobs-panel__body > .has-text-centered {
  padding: 56px var(--space-6);
  text-align: center;
}

.jobs-panel table {
  width: 100%;
  border-collapse: collapse;
}

.jobs-panel th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-table-head-text);
  background: var(--theme-table-head-bg);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--theme-table-head-border);
}

.jobs-panel td {
  font-size: var(--text-base);
  color: var(--theme-table-cell-text);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--theme-table-row-border);
  vertical-align: middle;
  word-break: break-word;
}

.jobs-panel tbody tr:last-child td,
.jobs-panel tbody tr:last-child th {
  border-bottom: 0;
}

.jobs-panel tbody tr:hover td {
  background: var(--theme-table-row-hover-bg);
}

.jobs-panel table tbody th {
  width: 11rem;
  background: transparent;
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--theme-muted);
}

.jobs-panel a {
  color: var(--sandos-accent-dark);
  font-weight: 600;
  text-decoration: none;
}

.jobs-panel a:hover {
  color: var(--sandos-accent);
}

html[data-theme="dark"] .jobs-panel a,
html[data-theme="dark"] .jobs-panel__selectors a {
  color: var(--red-fg);
}

.jobs-panel .has-text-grey {
  margin-top: 3px;
  color: var(--theme-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.jobs-panel .is-family-monospace,
.jobs-panel pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  line-height: 1.5;
}

.jobs-panel pre {
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-3) var(--space-4);
  overflow: auto;
  border-radius: var(--radius-lg);
  background: var(--theme-summary-bg);
  border: 1px solid var(--theme-summary-border);
  color: var(--theme-body-text);
}

.jobs-panel h1,
.jobs-panel .title {
  margin: var(--space-4) var(--space-4) var(--space-2);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--theme-heading);
}

.jobs-panel .subtitle {
  margin: var(--space-4) var(--space-4) var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--theme-muted);
}

.jobs-panel .level,
.jobs-panel h1 .level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}

.jobs-panel__body > .level {
  padding: var(--space-4) var(--space-4) 0;
}

.jobs-panel .field.is-grouped,
.jobs-panel .filter form .field {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.jobs-panel .label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--theme-muted);
}

.jobs-panel .input,
.jobs-panel input[type="text"],
.jobs-panel input[type="datetime-local"] {
  min-width: 14rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--theme-input-border);
  border-radius: var(--radius-md);
  background: var(--theme-input-bg);
  color: var(--theme-input-text);
  font-family: inherit;
  font-size: var(--text-sm);
}

.jobs-panel .input:focus,
.jobs-panel input:focus {
  outline: 2px solid color-mix(in srgb, var(--sandos-accent) 35%, transparent);
  border-color: var(--sandos-accent-border-strong);
}

.jobs-panel .buttons,
.jobs-panel nav[aria-label="pagination"] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.jobs-panel .buttons form {
  margin: 0;
}

.jobs-panel .button,
.jobs-panel button.button,
.jobs-panel .pagination-previous,
.jobs-panel .pagination-next,
.jobs-panel a.button {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--theme-card-border);
  background: var(--theme-ghost-bg);
  color: var(--theme-heading);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}

.jobs-panel .button:hover,
.jobs-panel .pagination-previous:hover,
.jobs-panel .pagination-next:hover {
  border-color: color-mix(in srgb, var(--sandos-accent) 35%, var(--theme-card-border));
  color: var(--sandos-accent-dark);
}

.jobs-panel .button.is-danger {
  background: var(--danger);
  border-color: var(--red-fg);
  color: var(--accent-fg);
}

.jobs-panel .button.is-warning {
  background: var(--amber-solid);
  border-color: var(--amber-fg);
  color: var(--gray-1000);
}

.jobs-panel .button.is-success {
  background: var(--green-solid);
  border-color: var(--green-fg);
  color: var(--accent-fg);
}

.jobs-panel .button:disabled,
.jobs-panel a[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.jobs-panel nav[aria-label="pagination"] {
  padding: var(--space-3) var(--space-4) var(--space-3);
  color: var(--theme-muted);
  font-size: var(--text-sm);
}

.jobs-panel .tag {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--sandos-accent-soft);
  color: var(--sandos-accent-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.jobs-panel .tag.is-warning {
  background: var(--amber-border);
  color: var(--amber-fg);
}

.jobs-panel .tag.is-danger {
  background: var(--red-bg);
  color: var(--red-fg);
}

.jobs-panel .tag.is-success {
  background: var(--green-border);
  color: var(--green-fg);
}

.jobs-panel .tag.is-info,
.jobs-panel .tag.is-primary {
  background: var(--sandos-accent-soft);
  color: var(--sandos-accent-dark);
}

html[data-theme="dark"] .jobs-panel .tag.is-warning {
  background: color-mix(in srgb, var(--amber-solid) 16%, transparent);
  color: var(--amber-fg);
}

html[data-theme="dark"] .jobs-panel .tag.is-success {
  background: color-mix(in srgb, var(--green-solid) 16%, transparent);
  color: var(--green-fg);
}

html[data-theme="dark"] .jobs-panel .button.is-warning {
  color: var(--gray-100);
}