/* ==========================================================================
   Kitgenix Image Optimizer – Admin styles

   This plugin's admin screens are built almost entirely from the shared
   kitgenix-admin-ui.css component library (cards, settings rows, toggles,
   tables, stat tiles, notices, badges, buttons, etc). Everything below is
   this plugin's own presentation layer on top of that library: layout
   glue, table column widths, and a handful of small plugin-specific
   status widgets that carry functional meaning in admin.js / Media_Column.
   ========================================================================== */

/* ----------------------------------------------------------------
   Page app wrapper & scoped tokens
----------------------------------------------------------------- */
#kitgenix-image-optimizer-admin-app {
  width: 100%;
  max-width: 1240px;
}

/* ----------------------------------------------------------------
   Bulk optimization status text
----------------------------------------------------------------- */
.kitgenix-image-optimizer-bulk-status {
  font-size: 13px;
  color: var(--kitgenix-text-muted);
  align-self: center;
}

.kitgenix-image-optimizer-bulk-status.is-running {
  color: var(--kitgenix-brand);
}

.kitgenix-image-optimizer-bulk-status.is-done {
  color: var(--kitgenix-success);
}

.kitgenix-image-optimizer-bulk-status.is-error {
  color: var(--kitgenix-danger);
}

.kitgenix-image-optimizer-progress-wrap {
  margin: 4px 0 18px;
}

/* ----------------------------------------------------------------
   KPI stat tile color accents
   (base tile look comes from the shared .kitgenix-stat-tile component)
----------------------------------------------------------------- */
#kitgenix-image-optimizer-admin-app .kitgenix-image-optimizer-stat--pending {
  color: var(--kitgenix-warning, #F59E0B);
}

#kitgenix-image-optimizer-admin-app .kitgenix-image-optimizer-stat--savings {
  color: var(--kitgenix-success, #22C55E);
}

/* ----------------------------------------------------------------
   Images table – column widths & cell typography
----------------------------------------------------------------- */
.kitgenix-image-optimizer-images-table th.col-thumb,
.kitgenix-image-optimizer-images-table td.col-thumb {
  width: 72px;
}

.kitgenix-image-optimizer-images-table td.col-thumb img {
  display: block;
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--kitgenix-radius-sm);
  border: 1px solid var(--kitgenix-border-color);
}

.kitgenix-image-optimizer-images-table th.col-original,
.kitgenix-image-optimizer-images-table td.col-original,
.kitgenix-image-optimizer-images-table th.col-savings,
.kitgenix-image-optimizer-images-table td.col-savings {
  width: 130px;
}

.kitgenix-image-optimizer-images-table th.col-status,
.kitgenix-image-optimizer-images-table td.col-status {
  width: 110px;
}

.kitgenix-image-optimizer-images-table th.col-actions,
.kitgenix-image-optimizer-images-table td.col-actions {
  width: 170px;
}

.kitgenix-image-optimizer-filename {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--kitgenix-text-color);
  word-break: break-all;
}

.kitgenix-image-optimizer-mime {
  font-size: 11px;
  color: var(--kitgenix-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------------
   Savings chip (updated live by admin.js on optimize)
----------------------------------------------------------------- */
.kitgenix-image-optimizer-savings-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--kitgenix-success-light);
  color: var(--kitgenix-success, #22C55E);
  border: 1px solid var(--kitgenix-success-border, #B8ECC8);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.kitgenix-image-optimizer-savings-chip.is-none {
  background: transparent;
  border-color: transparent;
  color: var(--kitgenix-text-muted);
  font-weight: 400;
}

/* ----------------------------------------------------------------
   Activity log table – column typography
----------------------------------------------------------------- */
.kitgenix-image-optimizer-log-table .kitgenix-log-time {
  width: 190px;
  font-size: 12px;
  color: var(--kitgenix-text-muted);
  white-space: nowrap;
}

.kitgenix-image-optimizer-log-table .kitgenix-log-context code {
  font-size: 11px;
  background: var(--kitgenix-bg-light);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--kitgenix-text-color);
  white-space: nowrap;
}

.kitgenix-image-optimizer-log-table .kitgenix-log-outcome {
  width: 110px;
}

.kitgenix-image-optimizer-log-table .kitgenix-log-note {
  font-size: 12px;
  color: var(--kitgenix-text-muted);
  line-height: 1.5;
}

/* ----------------------------------------------------------------
   Visual compression level card grid (Quality tab)
----------------------------------------------------------------- */
.kitgenix-compression-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 4px 0 12px;
}

@media (max-width: 1000px) {
  .kitgenix-compression-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 680px) {
  .kitgenix-compression-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kitgenix-compression-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 2px solid var(--kitgenix-border-color, #E1E7F5);
  border-radius: var(--kitgenix-radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  background: var(--kitgenix-bg-white, #fff);
  position: relative;
  user-select: none;
}

.kitgenix-compression-card:hover {
  border-color: var(--kitgenix-brand);
}

.kitgenix-compression-card:has(input:checked),
.kitgenix-compression-card.is-selected {
  border-color: var(--kitgenix-brand);
  background: var(--kitgenix-brand-light);
}

.kitgenix-compression-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kitgenix-compression-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--kitgenix-text-color);
}

.kitgenix-compression-card__quality {
  font-size: 11px;
  font-weight: 600;
  color: var(--kitgenix-brand);
  font-family: monospace;
}

.kitgenix-compression-card__desc {
  font-size: 11px;
  color: var(--kitgenix-text-muted);
  line-height: 1.3;
}

/* ----------------------------------------------------------------
   Attachment edit-screen meta box panel
----------------------------------------------------------------- */
.kitgenix-attachment-panel-stats {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 4px;
  font-size: 12px;
}

.kitgenix-attachment-panel-stats th {
  text-align: left;
  font-weight: 600;
  color: var(--kitgenix-text-muted);
  padding: 3px 8px 3px 0;
  width: 70px;
}

.kitgenix-attachment-panel-stats td {
  padding: 3px 0;
  color: var(--kitgenix-text-color);
}

.kitgenix-attachment-panel-saved {
  color: var(--kitgenix-success, #22C55E);
}

.kitgenix-attachment-panel .kitgenix-button-group {
  margin-top: 10px;
}

.kitgenix-attachment-restore-btn {
  color: var(--kitgenix-danger);
}

.kitgenix-attachment-panel-status {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
}

/* ----------------------------------------------------------------
   Media library stats bar (upload.php screen)
----------------------------------------------------------------- */
.kitgenix-media-library-bar {
  background: var(--kitgenix-bg-white, #fff);
  border: 1px solid var(--kitgenix-border-color, #E1E7F5);
  border-radius: var(--kitgenix-radius-md);
  margin: 40px 20px 8px 0;
  box-shadow: var(--kitgenix-shadow-sm);
  clear: both;
}

.kitgenix-media-library-bar__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  flex-wrap: wrap;
}

.kitgenix-media-library-bar__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--kitgenix-text-color);
  flex-shrink: 0;
  border-right: 1px solid var(--kitgenix-border-color, #E1E7F5);
  padding-right: 16px;
}

.kitgenix-media-library-bar__stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.kitgenix-media-library-bar__stat {
  font-size: 12px;
  color: var(--kitgenix-text-muted);
}

.kitgenix-media-library-bar__stat strong {
  color: var(--kitgenix-text-color);
  font-weight: 700;
}

.kitgenix-media-library-bar__stat--optimized strong {
  color: var(--kitgenix-success, #22C55E);
}

.kitgenix-media-library-bar__stat--savings strong {
  color: var(--kitgenix-brand);
}

.kitgenix-media-library-bar__pct {
  color: var(--kitgenix-text-muted);
  font-weight: 400;
}

.kitgenix-media-library-bar__sep {
  color: var(--kitgenix-border-color);
  font-size: 11px;
  font-weight: 300;
}

.kitgenix-media-library-bar__cta {
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Media Library list-table column (rendered by Media_Column.php)
----------------------------------------------------------------- */
.column-kitgenix_optimizer {
  width: 130px;
}

.kitgenix-mcol-optimized {
  color: var(--kitgenix-success, #22C55E);
  font-weight: 600;
  font-size: 12px;
}

.kitgenix-mcol-error {
  color: var(--kitgenix-danger);
  font-weight: 600;
  font-size: 12px;
  cursor: help;
}

.kitgenix-mcol-na {
  color: var(--kitgenix-text-muted, #64748B);
  font-size: 12px;
}

.kitgenix-mcol-optimize,
.kitgenix-mcol-restore {
  font-size: 11px;
}

.kitgenix-mcol-restore {
  color: var(--kitgenix-danger) !important;
}

.kitgenix-mcol-restore:hover {
  color: var(--kitgenix-danger) !important;
}

.kitgenix-mcol-spinning {
  opacity: 0.6;
  pointer-events: none;
}
