/* AGCC Shared Enterprise Report Console — portable styling (arc-*).
   Used by any flagship that mounts AgccReportConsole. Neutral, theme-consistent
   with app.css tokens; a product only supplies --arc-accent. */

.arc { --arc-accent: #2563eb; display: flex; flex-direction: column; gap: 20px; }
.arc-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.arc-head h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--color-text-primary, #111827); }
.arc-muted { color: var(--color-text-muted, #6B7280); }
.arc-head p { margin: 0; max-width: 640px; font-size: 13px; line-height: 1.5; }

.arc-ready { display: flex; flex-wrap: wrap; gap: 6px; }
.arc-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.arc-chip.ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.arc-chip.off { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

.arc-warn { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; font-size: 13px; }

.arc-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.arc-kind { text-align: left; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s, transform .05s; }
.arc-kind:hover { border-color: var(--arc-accent); }
.arc-kind:active { transform: translateY(1px); }
.arc-kind.is-active { border-color: var(--arc-accent); box-shadow: 0 0 0 1px var(--arc-accent) inset; background: color-mix(in srgb, var(--arc-accent) 5%, #fff); }
.arc-kind-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--color-text-primary, #111827); }
.arc-kind-h i { width: 16px; height: 16px; color: var(--arc-accent); }
.arc-kind-d { font-size: 12px; line-height: 1.45; color: var(--color-text-muted, #6B7280); }

.arc-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.arc-fmts { display: flex; flex-wrap: wrap; gap: 8px; }
.arc-fmt { font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--color-border, #e5e7eb); background: var(--color-surface, #fff); color: var(--color-text-primary, #111827); cursor: pointer; transition: border-color .15s, background .15s; }
.arc-fmt:hover { border-color: var(--arc-accent); }
.arc-fmt.is-primary { background: var(--arc-accent); color: #fff; border-color: var(--arc-accent); }
.arc-fmt.is-primary:hover { filter: brightness(1.05); }
.arc-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--arc-accent); color: var(--arc-accent); background: transparent; cursor: pointer; }
.arc-open i { width: 15px; height: 15px; }
.arc-open:hover { background: color-mix(in srgb, var(--arc-accent) 8%, #fff); }

.arc-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .arc-grid { grid-template-columns: 1fr; } }
.arc-preview { border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; overflow: hidden; background: #fff; }
.arc-preview-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--color-border, #e5e7eb); font-size: 13px; font-weight: 600; color: var(--color-text-primary, #111827); }
.arc-frame { width: 100%; height: 640px; border: 0; background: #fff; }

.arc-side { display: flex; flex-direction: column; gap: 16px; }
.arc-card { border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; padding: 14px 16px; background: var(--color-surface, #fff); }
.arc-card h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--color-text-primary, #111827); }
.arc-inside { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
.arc-hist-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border, #f3f4f6); font-size: 13px; }
.arc-hist-row:last-child { border-bottom: 0; }
.arc-hist-row strong { color: var(--color-text-primary, #111827); font-weight: 600; }
.arc-hist-empty { font-size: 13px; padding: 6px 0; }