/* AirContent Update Repository — shared components
   (buttons, inputs, forms, dialogs, toasts, tables, cards, badges, stats) */

/* ── Buttons ───────────────────────────────────────────────────────────── */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 80px; height: 30px; padding: 0 14px;
  background: var(--ac-button-bg); color: var(--ac-brush);
  border: 1px solid var(--ac-button-border); border-radius: var(--ac-radius);
  white-space: nowrap; text-decoration: none; line-height: 1;
}
.ac-btn:hover:not(:disabled) { background: var(--ac-button-hover); border-color: var(--ac-accent-brush-light); text-decoration: none; }
.ac-btn:active:not(:disabled) { background: var(--ac-paint-deep-shadow); }
.ac-btn:disabled { color: var(--ac-brush-major); }
.ac-btn-primary { background: var(--ac-button-primary-bg); color: var(--ac-button-primary-fg); border-color: var(--ac-button-primary-bg); }
.ac-btn-primary:hover:not(:disabled) { background: var(--ac-accent-hover); border-color: var(--ac-accent-hover); }
.ac-btn-primary:disabled { background: var(--ac-brush-major); border-color: var(--ac-brush-major); color: #fff; }
.ac-btn-danger { background: var(--ac-red); color: #fff; border-color: var(--ac-red); }
.ac-btn-danger:hover:not(:disabled) { background: #D13500; border-color: #D13500; }
.ac-btn-flat { min-width: 0; border-color: transparent; background: transparent; }
.ac-btn-flat:hover:not(:disabled) { background: var(--ac-button-hover); }
.ac-btn-sm { height: 24px; padding: 0 10px; min-width: 0; font-size: var(--ac-font-size-sm); }
.ac-btn-icon { min-width: 0; width: 30px; padding: 0; }
.ac-btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* ── Inputs ────────────────────────────────────────────────────────────── */
.ac-input, .ac-select, .ac-textarea {
  height: 30px; padding: 0 8px; width: 100%;
  background: var(--ac-input-bg); color: var(--ac-brush);
  border: 1px solid var(--ac-input-border); border-radius: var(--ac-radius);
}
.ac-textarea { height: auto; min-height: 90px; padding: 6px 8px; resize: vertical; line-height: 1.4; }
.ac-textarea.ac-mono { font-family: var(--ac-font-mono); font-size: 13px; }
.ac-input:focus, .ac-select:focus, .ac-textarea:focus { border-color: var(--ac-input-focus); outline: none; box-shadow: 0 0 0 1px var(--ac-input-focus) inset; }
.ac-input:disabled, .ac-select:disabled, .ac-textarea:disabled { background: var(--ac-paint); color: var(--ac-brush-light); }
.ac-input::placeholder { color: var(--ac-brush-major); }
.ac-select { appearance: none; padding-right: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23666'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; }
.ac-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ac-checkbox input { width: 15px; height: 15px; accent-color: var(--ac-accent); margin: 0; }

.ac-form { display: grid; grid-template-columns: max-content 1fr; gap: 10px 14px; align-items: center; }
.ac-form label { white-space: nowrap; color: var(--ac-brush-light); }
.ac-form .ac-form-full { grid-column: 1 / -1; }
.ac-form-hint { color: var(--ac-brush-light); font-size: var(--ac-font-size-sm); }
.ac-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ac-form-stack { display: grid; gap: 10px; }
.ac-form-stack label { display: block; color: var(--ac-brush-light); margin-bottom: 4px; font-size: var(--ac-font-size-sm); }
.ac-form-stack label.ac-checkbox { display: inline-flex; color: var(--ac-brush); font-size: inherit; margin: 0; }
@media (max-width: 640px) { .ac-form { grid-template-columns: 1fr; gap: 6px; } .ac-form label { margin-top: 6px; } }

/* ── Dialogs ───────────────────────────────────────────────────────────── */
.ac-modal-layer { position: fixed; inset: 0; z-index: 1000; background: var(--ac-overlay); display: flex; align-items: center; justify-content: center; padding: 16px; animation: ac-fade-in 120ms ease-out; }
.ac-dialog {
  background: var(--ac-dialog-bg); color: var(--ac-brush);
  border: 1px solid var(--ac-accent); border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  min-width: min(360px, 100%); max-width: min(96vw, 960px); max-height: 92vh; width: 100%;
  display: flex; flex-direction: column; animation: ac-pop-in 120ms ease-out;
}
.ac-dialog-caption { height: 36px; display: flex; align-items: center; padding: 0 6px 0 14px; gap: 8px; background: var(--ac-dialog-caption-bg); color: var(--ac-dialog-caption-fg); font-weight: 600; border-radius: 3px 3px 0 0; }
.ac-dialog-caption .ac-dialog-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-dialog-close { width: 30px; height: 26px; border: 0; background: transparent; color: inherit; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; }
.ac-dialog-close:hover { background: var(--ac-red); }
.ac-dialog-body { padding: 18px; overflow: auto; flex: 1 1 auto; }
.ac-dialog-body p { margin: 0 0 10px; }
.ac-dialog-body p:last-child { margin-bottom: 0; }
.ac-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--ac-brush-minor); flex-wrap: wrap; }
.ac-dialog-footer .ac-footer-left { margin-right: auto; display: flex; gap: 8px; }
.ac-dialog-icon-row { display: flex; gap: 14px; align-items: flex-start; }
.ac-dialog-icon { width: 32px; height: 32px; flex: 0 0 auto; }
.ac-dialog-icon.info { color: var(--ac-blue); }
.ac-dialog-icon.warn { color: var(--ac-warning); }
.ac-dialog-icon.error { color: var(--ac-red); }
.ac-dialog-icon.question { color: var(--ac-accent); }
@keyframes ac-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ac-pop-in { from { transform: translateY(-6px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Toasts ────────────────────────────────────────────────────────────── */
.ac-toast-layer { position: fixed; right: 16px; bottom: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.ac-toast { pointer-events: auto; width: 360px; max-width: calc(100vw - 32px); background: var(--ac-paint-high); color: var(--ac-brush); border: 1px solid var(--ac-brush-minor); border-left: 4px solid var(--ac-accent); border-radius: 3px; box-shadow: var(--ac-menu-shadow); padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; animation: ac-slide-up 160ms ease-out; }
.ac-toast.ok { border-left-color: var(--ac-ok); }
.ac-toast.warn { border-left-color: var(--ac-warning); }
.ac-toast.error { border-left-color: var(--ac-red); }
.ac-toast-title { font-weight: 600; }
.ac-toast-text { grid-column: 1 / -1; color: var(--ac-brush-light); white-space: pre-wrap; }
.ac-toast-close { border: 0; background: transparent; color: var(--ac-brush-light); width: 20px; height: 20px; padding: 0; border-radius: 3px; }
.ac-toast-close:hover { background: var(--ac-paint); color: var(--ac-brush); }
@keyframes ac-slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Tables ────────────────────────────────────────────────────────────── */
.ac-table-wrap { border: 1px solid var(--ac-brush-minor); background: var(--ac-paint-high); border-radius: var(--ac-radius); overflow: auto; }
.ac-table { width: 100%; border-collapse: collapse; }
.ac-table th { position: sticky; top: 0; text-align: left; font-weight: 600; height: 34px; padding: 0 10px; background: var(--ac-paint-shadow); border-bottom: 1px solid var(--ac-brush-minor); white-space: nowrap; font-size: var(--ac-font-size-sm); color: var(--ac-brush-light); text-transform: uppercase; letter-spacing: 0.02em; }
.ac-table td { height: 36px; padding: 4px 10px; border-bottom: 1px solid var(--ac-row-border); vertical-align: middle; }
.ac-table tbody tr:hover { background: var(--ac-row-hover); }
.ac-table tbody tr.clickable { cursor: pointer; }
.ac-table tbody tr.muted td { color: var(--ac-brush-light); }
.ac-table td.num, .ac-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ac-table td.actions { white-space: nowrap; text-align: right; }
.ac-table .ac-empty { padding: 28px; text-align: center; color: var(--ac-brush-light); }
.ac-table td.wrap { white-space: normal; word-break: break-word; }
.ac-table td.nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  .ac-table.responsive thead { display: none; }
  .ac-table.responsive tr { display: block; border-bottom: 1px solid var(--ac-brush-minor); padding: 6px 0; }
  .ac-table.responsive td { display: flex; gap: 10px; height: auto; border: 0; padding: 3px 10px; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .ac-table.responsive td > * { min-width: 0; }
  .ac-table.responsive td::before { content: attr(data-label); color: var(--ac-brush-light); min-width: 110px; font-size: var(--ac-font-size-sm); }
  .ac-table.responsive td.actions { justify-content: flex-start; }
}

/* ── Cards / stats / badges ────────────────────────────────────────────── */
.ac-card { background: var(--ac-card-bg); border: 1px solid var(--ac-card-border); border-radius: var(--ac-radius-lg); box-shadow: var(--ac-card-shadow); padding: 16px 18px; }
.ac-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ac-card-title h2, .ac-card-title h3 { margin: 0; }
.ac-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ac-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ac-stat { background: var(--ac-card-bg); border: 1px solid var(--ac-card-border); border-radius: var(--ac-radius-lg); padding: 12px 14px; }
.ac-stat-label { color: var(--ac-brush-light); font-size: var(--ac-font-size-sm); text-transform: uppercase; letter-spacing: 0.03em; }
.ac-stat-value { font-size: 26px; font-weight: 600; line-height: 1.2; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ac-stat-value.warn { color: var(--ac-warning); }
.ac-stat-value.danger { color: var(--ac-red); }
.ac-stat-value.ok { color: var(--ac-ok); }

.ac-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; background: var(--ac-tint-gray-bg); color: var(--ac-tint-gray-fg); white-space: nowrap; }
.ac-badge.stable, .ac-badge.role { background: var(--ac-tint-blue-bg); color: var(--ac-tint-blue-fg); }
.ac-badge.role { text-transform: none; }
.ac-badge.beta, .ac-badge.mandatory, .ac-badge.grace { background: var(--ac-tint-amber-bg); color: var(--ac-tint-amber-fg); }
.ac-badge.breaking, .ac-badge.yanked, .ac-badge.danger, .ac-badge.expired, .ac-badge.blocked { background: var(--ac-tint-red-bg); color: var(--ac-tint-red-fg); }
.ac-badge.restricted { background: var(--ac-tint-purple-bg); color: var(--ac-tint-purple-fg); }
.ac-badge.published, .ac-badge.ok, .ac-badge.valid { background: var(--ac-tint-green-bg); color: var(--ac-tint-green-fg); }
.ac-badge.draft { background: var(--ac-tint-gray-bg); color: var(--ac-tint-gray-fg); }

.ac-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--ac-radius-lg); border: 1px solid var(--ac-yellow); background: var(--ac-tint-amber-bg); color: var(--ac-tint-amber-fg); margin-bottom: 16px; }
.ac-banner.error { border-color: var(--ac-red); background: var(--ac-tint-red-bg); color: var(--ac-tint-red-fg); }
.ac-banner.info { border-color: var(--ac-accent-brush-light); background: var(--ac-tint-blue-bg); color: var(--ac-tint-blue-fg); }

/* ── Misc ──────────────────────────────────────────────────────────────── */
.ac-muted { color: var(--ac-brush-light); }
.ac-small { font-size: var(--ac-font-size-sm); }
.ac-kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--ac-brush-major); border-bottom-width: 2px; border-radius: 3px; font-size: 11px; background: var(--ac-paint); }
.ac-spinner { width: 18px; height: 18px; border: 2px solid var(--ac-brush-minor); border-top-color: var(--ac-accent); border-radius: 50%; animation: ac-spin 0.8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
.ac-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ac-neutral-dot); vertical-align: middle; }
.ac-dot.ok { background: var(--ac-ok); }
.ac-dot.off { background: var(--ac-offline); }
.ac-dot.warn { background: var(--ac-warning); }
.ac-code { font-family: var(--ac-font-mono); font-size: 12px; background: var(--ac-code-bg); border: 1px solid var(--ac-brush-minor); border-radius: 3px; padding: 1px 5px; word-break: break-all; }
.ac-pre { font-family: var(--ac-font-mono); font-size: 12px; background: var(--ac-code-bg); border: 1px solid var(--ac-brush-minor); border-radius: 4px; padding: 10px 12px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0 0 10px; }
.ac-loading { display: flex; align-items: center; gap: 10px; color: var(--ac-brush-light); padding: 24px 0; }
.ac-status-text { color: var(--ac-error); min-height: 1.4em; }
.ac-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--ac-brush-minor); margin-bottom: 14px; flex-wrap: wrap; }
.ac-tab { padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; background: transparent; color: var(--ac-brush-light); }
.ac-tab:hover:not(:disabled) { color: var(--ac-brush); }
.ac-tab.active { background: var(--ac-paint-high); color: var(--ac-brush); border-color: var(--ac-brush-minor); font-weight: 600; margin-bottom: -1px; }
.ac-progress { height: 8px; background: var(--ac-paint-shadow); border-radius: 4px; overflow: hidden; }
.ac-progress > div { height: 100%; background: var(--ac-gradient-brand); width: 0; transition: width 120ms linear; }
.ac-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.ac-toolbar .ac-input, .ac-toolbar .ac-select { width: auto; min-width: 140px; }
.ac-toolbar .spacer { flex: 1 1 auto; }
.ac-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--ac-brush-light); font-size: var(--ac-font-size-sm); }
.ac-copy { cursor: pointer; }
.ac-copy:hover { color: var(--ac-accent); }

/* ── Markdown (release notes) ──────────────────────────────────────────── */
.ac-md h1, .ac-md h2, .ac-md h3 { margin: 14px 0 6px; }
.ac-md h1 { font-size: 18px; } .ac-md h2 { font-size: 16px; } .ac-md h3 { font-size: 14px; }
.ac-md p { margin: 0 0 8px; }
.ac-md ul, .ac-md ol { margin: 0 0 10px; padding-left: 22px; }
.ac-md li { margin: 2px 0; }
.ac-md code { background: var(--ac-code-bg); border: 1px solid var(--ac-brush-minor); border-radius: 3px; padding: 0 4px; }
.ac-md pre { background: var(--ac-code-bg); border: 1px solid var(--ac-brush-minor); border-radius: 4px; padding: 10px 12px; overflow: auto; margin: 0 0 10px; }
.ac-md pre code { border: 0; padding: 0; background: transparent; }
.ac-md blockquote { margin: 0 0 10px; padding: 4px 12px; border-left: 3px solid var(--ac-accent-brush-light); color: var(--ac-brush-light); }
.ac-md hr { border: 0; border-top: 1px solid var(--ac-brush-minor); margin: 12px 0; }
.ac-md table { border-collapse: collapse; margin: 0 0 10px; }
.ac-md th, .ac-md td { border: 1px solid var(--ac-brush-minor); padding: 4px 8px; }