/* GSPressHQ-specific readability improvements scoped to Avo's asset bundle. */
:root {
  --gsp-avo-surface: Canvas;
  --gsp-avo-ink: CanvasText;
  --gsp-avo-muted: color-mix(in srgb, CanvasText 58%, Canvas);
  --gsp-avo-border: color-mix(in srgb, CanvasText 14%, Canvas);
  --gsp-avo-control-border: color-mix(in srgb, CanvasText 30%, Canvas);
  --gsp-avo-readonly-bg: color-mix(in srgb, CanvasText 6%, Canvas);
  --gsp-avo-readonly-border: color-mix(in srgb, CanvasText 20%, Canvas);
  --gsp-avo-focus: Highlight;
  --gsp-avo-focus-ink: HighlightText;
  --gsp-avo-danger: LinkText;
}

.main-content-area table {
  border-collapse: separate;
  border-spacing: 0;
}

.main-content-area table thead {
  background: color-mix(in srgb, CanvasText 4%, Canvas);
}

.main-content-area table thead th {
  color: var(--gsp-avo-muted);
  font-size: 0.6875rem !important;
  letter-spacing: 0.04em;
  padding: 0.625rem 0.75rem !important;
}

.main-content-area table tbody tr {
  transition: background-color 150ms linear;
}

.main-content-area table tbody tr:nth-child(even) {
  background: color-mix(in srgb, CanvasText 1.5%, Canvas);
}

.main-content-area table tbody tr:hover {
  background: color-mix(in srgb, Highlight 7%, Canvas);
}

.main-content-area table tbody td {
  border-color: var(--gsp-avo-border);
  color: var(--gsp-avo-ink);
  font-size: 0.8125rem !important;
  line-height: 1.25rem !important;
  min-height: 2.5rem !important;
  vertical-align: middle;
}

.main-content-area table tbody td a {
  text-underline-offset: 0.18em;
}

/* Editable controls should look actionable. Avo's default gray treatment makes
 * them almost indistinguishable from disabled and read-only values. */
.main-content-area form [data-slot="value"] input:not([type="checkbox"]):not([type="radio"]):not(:disabled),
.main-content-area form [data-slot="value"] select:not(:disabled),
.main-content-area form [data-slot="value"] textarea:not(:disabled) {
  background: var(--gsp-avo-surface) !important;
  border-color: var(--gsp-avo-control-border) !important;
  color: var(--gsp-avo-ink) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, CanvasText 6%, transparent) !important;
}

.main-content-area form [data-slot="value"] input:not([type="checkbox"]):not([type="radio"]):not(:disabled):focus,
.main-content-area form [data-slot="value"] select:not(:disabled):focus,
.main-content-area form [data-slot="value"] textarea:not(:disabled):focus {
  border-color: var(--gsp-avo-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, Highlight 14%, transparent) !important;
  outline: none !important;
}

/* Read-only Avo fields render as disabled controls. Give them a separate visual
 * language and label so administrators can scan editability before clicking. */
.main-content-area form [data-slot="value"] input:disabled,
.main-content-area form [data-slot="value"] select:disabled,
.main-content-area form [data-slot="value"] textarea:disabled {
  background: var(--gsp-avo-readonly-bg) !important;
  border-color: var(--gsp-avo-readonly-border) !important;
  border-style: dashed !important;
  color: var(--gsp-avo-muted) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.main-content-area form :has(> [data-slot="value"] :is(input, select, textarea):disabled) > [data-slot="label"] {
  color: var(--gsp-avo-muted) !important;
}

.main-content-area form :has(> [data-slot="value"] :is(input, select, textarea):disabled) > [data-slot="label"]::after {
  background: var(--gsp-avo-readonly-bg);
  border: 1px solid var(--gsp-avo-readonly-border);
  border-radius: 999px;
  color: var(--gsp-avo-muted);
  content: "Read only";
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  margin-left: 0.5rem;
  padding: 0.125rem 0.375rem;
  white-space: nowrap;
}

/* Avo's primary color variable is not present in this theme, which leaves the
 * form submit button with white text on a transparent background. Keep this
 * narrowly scoped to Avo's resource edit save control. */
button[data-resource-edit-target="saveButton"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--gsp-avo-focus-ink) !important;
  background: var(--gsp-avo-focus) !important;
  border: 1px solid var(--gsp-avo-focus) !important;
}

button[data-resource-edit-target="saveButton"]:hover {
  filter: brightness(0.88);
}

button[data-resource-edit-target="saveButton"]:disabled {
  background: var(--gsp-avo-readonly-bg) !important;
  border-color: var(--gsp-avo-readonly-border) !important;
  color: var(--gsp-avo-muted) !important;
}

/* Avo emits primary and destructive utility class names, but their color
 * tokens are absent from the generated stylesheet in this app. Keep the
 * resource actions visible instead of rendering white-on-white controls. */
a.button-component.bg-primary-500 {
  background: var(--gsp-avo-focus) !important;
  border-color: var(--gsp-avo-focus) !important;
  color: var(--gsp-avo-focus-ink) !important;
}

a.button-component.bg-primary-500:hover {
  filter: brightness(0.88);
}

a.button-component.text-red-500 {
  color: var(--gsp-avo-danger) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}