/*!
 * AI Alt Text Builder — Admin Styles
 * Version: 1.0.18
 * Generate control, quality labels, Media Library grid bulk toolbar.
 * Buttons use the WordPress admin button styles; this file only adds layout.
 */

/* ========== GENERATE CONTROL (attachment screen + media modal) ========== */
.aatb-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
}
.aatb-gen {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.aatb-gen-icon {
  font-size: 12px;
  line-height: 1;
}
.aatb-gen.is-busy .aatb-gen-icon {
  display: none;
}
.aatb-gen.is-busy::before,
.aatb-spin {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #c3c4c7;
  border-top-color: #2271b1;
  border-radius: 50%;
  animation: aatb-spin .8s linear infinite;
  box-sizing: border-box;
}
.aatb-status {
  color: #646970;
  font-size: 13px;
}
/* WordPress's darker green and red: at least 5.5:1 on white and on the grey screens (#f0f0f1, #f6f7f7). */
.aatb-status.is-ok { color: #007017; }
.aatb-status.is-err { color: #b32d2e; }
/* Empty: takes no room, but stays in the accessibility tree, because a live region has to
   be there before its first message for that message to be read out. */
.aatb-status:empty {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* While generating, the button already says "Generating…"; keep the status for screen readers only. */
.aatb-ctl.is-busy .aatb-status {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Media modal: same column as the field and its description (core: 65%, floated right). */
.attachment-details .aatb-ctl-modal {
  box-sizing: border-box;
  float: right;
  clear: both;
  width: 65%;
  margin: 6px 1px 14px;
}

/* ========== QUALITY LABEL (field + list column) ========== */
.aatb-quality {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #50575e;
  white-space: nowrap;
}
.aatb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8c8f94;
  flex: 0 0 8px;
}
.aatb-q-good .aatb-dot { background: #00a32a; }
.aatb-q-missing .aatb-dot { background: #d63638; }
.aatb-q-short .aatb-dot,
.aatb-q-long .aatb-dot { background: #dba617; }
.aatb-count {
  color: #646970;
}
.aatb-count::before {
  content: "\00b7";
  margin: 0 6px 0 0;
}

/* ========== LIST TABLE COLUMN ========== */
.column-aatb_score {
  width: 110px;
}

/* ========== GRID: BULK SELECT TOOLBAR ========== */
.media-toolbar .aatb-grid-gen {
  margin-right: 10px;
}
.media-toolbar .aatb-grid-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 0 2px;
  min-height: 32px;
  line-height: 1.4;
  color: #646970;
  font-size: 13px;
  vertical-align: middle;
}
.media-toolbar .aatb-grid-status.aatb-off { display: none !important; }
/* Empty in Bulk select: no room taken, still a live region (see .aatb-status:empty). */
.media-toolbar .aatb-grid-status:empty {
  position: absolute !important;
  width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.media-toolbar .aatb-grid-status.is-ok { color: #007017; }
.media-toolbar .aatb-grid-status.is-err { color: #b32d2e; }
.aatb-pbar {
  display: inline-block;
  width: 120px;
  height: 6px;
  border-radius: 3px;
  background: #dcdcde;
  overflow: hidden;
}
.aatb-pbar i {
  display: block;
  height: 100%;
  background: #2271b1;
  transition: width .3s ease;
}
.aatb-grid-stop {
  margin-left: 4px;
}

/* ========== LIST VIEW: BULK JOB NOTICE ========== */
.aatb-bulk-notice p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.aatb-bulk-notice .aatb-pbar {
  width: 160px;
}
#aatb-bulk-p {
  color: #50575e;
  font-variant-numeric: tabular-nums;
}

/* ========== ACTIVITY LOG ========== */
/* The table scrolls inside its own box on a narrow screen, so the page does not. */
.aatb-log-scroll {
  overflow-x: auto;
  margin-top: 12px;
}
.aatb-log-scroll:focus {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

@keyframes aatb-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aatb-gen.is-busy::before, .aatb-spin { animation: none; }
  .aatb-pbar i { transition: none; }
}