/* page-admin.css — extracted from style.css 2026-05-27 (UX-6 cut 8).
 *
 * /admin/* page styling. Three source blocks folded here:
 *   - /admin/ai-usage cap progress bar (commit 2.20) — the .aiu-cap-*
 *     classes that render the AI-spend-vs-cap bar inside backup-kpi-card.
 *   - /admin/automation-log (Phase D-1 audit trail) — the .autolog-*
 *     classes for the cpfence-action audit trail. Section header was
 *     accidentally stripped by cut 7 (alerts); re-synthesized here.
 *   - /admin/ai-usage dashboard — the .aiu-* page classes (grid, cards,
 *     daily spend timeline).
 *
 * Loaded AFTER style.css + components.css via base.html.
 */

/* ─── /admin/ai-usage cap progress bar (commit 2.20) ─── */
/* ─── /admin/ai-usage cap progress bar (commit 2.20) ─────────────────
   Inside the new .backup-kpi-card layout. Same color bands as the
   pre-2.20 .aiu-bar: green/yellow/red at 70/90% thresholds. */
.aiu-cap-bar {
  height: 8px;
  background: var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 10px;
}
.aiu-cap-bar-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.25s ease;
  border-radius: 4px;
}
.aiu-cap-bar-fill.aiu-cap-bar-yellow { background: var(--yellow); }
.aiu-cap-bar-fill.aiu-cap-bar-red    { background: var(--red); }

/* (UX-6 cut 5, 2026-05-27) Per-VM Backups tab styles
 * moved to page-backups.css. */

   Per-host pill grid — visual at-a-glance fleet view. Each pill is a
   click-through to /logs filtered to that host. Color = freshness band.
*/
.host-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 6px 0 8px;
}
.host-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.host-pill:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.host-pill-green { border-left: 3px solid var(--green); }
.host-pill-yellow {
  border-left: 3px solid var(--yellow);
  background: linear-gradient(90deg, rgba(234,179,8,0.04) 0%, var(--bg-elev) 60%);
}
.host-pill-red {
  border-left: 3px solid var(--red);
  background: linear-gradient(90deg, rgba(220,38,38,0.06) 0%, var(--bg-elev) 60%);
}
.host-pill-red:hover { border-color: var(--red); }
.host-pill-yellow:hover { border-color: var(--yellow); }
.host-pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.host-pill-name {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.host-pill-meta {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.host-pill-unit { color: var(--text-faint); }

/* (UX-6 cut 5, 2026-05-27) /system/backups Mode-1 styles
 * moved to page-backups.css. */

   Per feedback_notification_deeplink_standard.md: when /alerts?focus=<id>
   is opened, JS adds .is-focused to the target card for 2.5s. CSS
   animates a background flash + stronger ring so the operator's eye
   lands on it immediately. Reusable on any actionable surface.
*/
.is-focused {
  animation: noc-focus-flash 2.5s ease-out;
  scroll-margin-top: 60px;
}
@keyframes noc-focus-flash {
  0%   { background: rgba(37, 99, 235, 0.18); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45); }
  60%  { background: rgba(37, 99, 235, 0.10); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20); }
  100% { background: transparent;              box-shadow: 0 0 0 0   rgba(37, 99, 235, 0); }
}

/* (UX-6 cut 6, 2026-05-27) Mode-1 digest redesign moved to
 * page-digest.css. */

.ip-block-menu {
  display: inline-block;
  margin-left: 4px;
  position: relative;
}
.ip-block-trigger {
  display: inline-block;
  padding: 0 4px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  list-style: none;
  opacity: 0.5;
}
.ip-block-trigger:hover { opacity: 1; background: var(--bg-soft); }
.ip-block-trigger::-webkit-details-marker { display: none; }
.ip-block-form {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  min-width: 360px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  font-size: 14px;
}
.ip-block-label code {
  background: var(--bg-soft);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 14px;
}


/* ─── /admin/automation-log page (Phase D-1 audit trail) ─── */
.autolog-page { max-width: 1100px; margin: 0 auto; }
.autolog-empty {
  padding: 28px 20px;
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
}
.autolog-group {
  margin-bottom: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.autolog-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.autolog-action {
  font-weight: 600;
  color: var(--text);
}
.autolog-target {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--bg);
  padding: 2px 7px;
  border-radius: 3px;
}
.autolog-group-body { padding: 12px 16px; }
.autolog-arguments { margin-bottom: 8px; }
.autolog-arg-pill {
  display: inline-block;
  font-size: 14px;
  padding: 1px 7px;
  margin-right: 5px;
  background: var(--bg-soft);
  color: var(--text-mute);
  border-radius: 10px;
}
.autolog-hosts-ok {
  color: var(--green, #16a34a);
  font-size: 14px;
  margin-bottom: 4px;
}
.autolog-hosts-ok code {
  background: transparent;
  font-size: 14px;
  padding: 0;
}
.autolog-hosts-fail {
  color: var(--red);
  font-size: 14px;
}
.autolog-hosts-fail details { display: inline-block; margin-right: 6px; }
.autolog-hosts-fail pre {
  font-size: 14px;
  background: #fee2e2;
  padding: 6px 8px;
  border-radius: 4px;
  margin: 4px 0 0 0;
  white-space: pre-wrap;
}
[data-theme="dark"] .autolog-hosts-fail pre { background: #450a0a; }
.autolog-raw { margin-top: 10px; }
.autolog-footnote { margin-top: 32px; font-size: 14px; text-align: center; }


/* ─── /admin/ai-usage dashboard ─── */
.aiu-page { max-width: 1100px; margin: 0 auto; }
.aiu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.aiu-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.aiu-card-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.aiu-card-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.aiu-card-sub {
  font-size: 14px;
  color: var(--text-mute);
  margin-top: 4px;
}
.aiu-bar {
  margin-top: 10px;
  height: 6px;
  background: var(--bg-soft);
  border-radius: 3px;
  overflow: hidden;
}
.aiu-bar-fill {
  height: 100%;
  background: var(--green, #16a34a);
  transition: width 200ms ease;
}
.aiu-bar-fill.aiu-bar-yellow { background: var(--yellow); }
.aiu-bar-fill.aiu-bar-red    { background: var(--red); }
.aiu-cap-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.aiu-dollar { color: var(--text-mute); font-weight: 600; }
.aiu-cap-input {
  width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}
.aiu-cap-suffix { color: var(--text-mute); font-size: 14px; }
.aiu-section { margin-bottom: 32px; }
.aiu-section-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-2);
}
.aiu-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  padding: 10px 4px 0 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.aiu-bar-col {
  flex: 1;
  min-width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.aiu-bar-stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  min-height: 1px;
}
.aiu-bar-seg { width: 100%; }
.aiu-bar-label {
  font-size: 14px;
  color: var(--text-mute);
  font-family: var(--mono);
  text-align: center;
  transform: rotate(-30deg);
  transform-origin: top left;
  white-space: nowrap;
  margin-top: 6px;
}
.aiu-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-size: 14px;
}
.aiu-legend-item { display: flex; align-items: center; gap: 5px; color: var(--text-mute); }
.aiu-legend-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
}

.ask-cost-line {
  font-size: var(--fs-xs) !important;
  color: var(--text-mute);
  margin-top: 6px;
}
.ask-cost-line a { color: var(--accent); }