/* Kitgenix PDF Invoicing for WooCommerce – Order meta box (order edit screen)
   Loaded only on WC order edit pages. Uses the shared kitgenix-admin-ui.css
   tokens/badge/modal components; this sheet only adds metabox-specific layout.
*/

.kitgenix-pdf-invoicing-for-woocommerce-order-meta {
  box-sizing: border-box;
  width: 100%;
}

/* ----------------------------------------------------------------
  Document list – one compact two-line row per document type instead
  of a full card each (label+status on line 1, number+actions on line 2).
----------------------------------------------------------------- */
.kitgenix-doc-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--kitgenix-border-color, #dcdcde);
}

.kitgenix-doc-row:first-child {
  padding-top: 0;
}

.kitgenix-doc-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.kitgenix-doc-row__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kitgenix-doc-row__line + .kitgenix-doc-row__line {
  margin-top: 4px;
}

.kitgenix-doc-row__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--kitgenix-text-color, #1d2327);
}

.kitgenix-doc-row__identifier {
  font-size: 12px;
  color: var(--kitgenix-text-muted);
}

/* Right-hand cluster on line 1 – status badge, plus (for a "Not generated"
   row only) the single Download action sitting right next to it, so that
   row never needs a second line at all. */
.kitgenix-doc-row__end {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Regenerate / Void / History – icon-only buttons so a row with several
   actions (Download, Regenerate, Void, History) stays on one compact line
   instead of stacking full-width text buttons. Deliberately understated
   (light border, muted icon) by default – color only on hover/focus –
   since the plain .button chrome they inherit otherwise reads as a heavy
   blue tile once shrunk down to icon size. */
.kitgenix-icon-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Deliberately NOT using the WP core .button class here – its padding/
   min-height rules sit at the same CSS specificity as anything we'd use to
   override them, so sizing this down reliably means owning the whole
   button style instead of fighting the cascade. */
.kitgenix-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  line-height: 1;
  flex: 0 0 auto;
  background: var(--kitgenix-bg-white, #fff);
  border: 1px solid var(--kitgenix-border-color, #dcdcde);
  border-radius: 4px;
  color: var(--kitgenix-text-muted, #646970);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  transition: border-color .1s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
}

.kitgenix-icon-button:hover,
.kitgenix-icon-button:focus-visible {
  border-color: var(--kitgenix-brand, #214BFF);
  color: var(--kitgenix-brand, #214BFF);
  background: var(--kitgenix-brand-light, #eef1ff);
  outline: none;
}

.kitgenix-icon-button:focus-visible {
  box-shadow: 0 0 0 1px var(--kitgenix-brand, #214BFF);
}

.kitgenix-icon-button .dashicons {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

/* Regenerate/Void are plain admin-post.php links – a real full-page
   navigation with no AJAX involved, so there's no request we can hook a
   spinner to. Instead the button visibly starts "working" the instant it's
   clicked (before the browser's own page-load round trip even begins),
   so a slow PDF regeneration reads as in-progress rather than unresponsive. */
.kitgenix-icon-button.is-loading {
  cursor: wait;
  pointer-events: none;
  opacity: 0.65;
}

.kitgenix-icon-button.is-loading .dashicons {
  animation: kitgenix-pdf-invoicing-icon-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .kitgenix-icon-button.is-loading .dashicons {
    animation: none;
  }
}

@keyframes kitgenix-pdf-invoicing-icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.kitgenix-document-status-note {
  margin-top: 10px;
}

/* ----------------------------------------------------------------
  Document history modal – reuses the shared kitgenix-modal component;
  this only sizes the table inside it.
----------------------------------------------------------------- */
.kitgenix-document-history-table {
  width: 100%;
  border-collapse: collapse;
}

.kitgenix-document-history-table th,
.kitgenix-document-history-table td {
  padding: 6px 8px;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid var(--kitgenix-border-color, #dcdcde);
}

.kitgenix-document-history-table th {
  font-weight: 600;
  color: var(--kitgenix-text-muted);
}
