/*
 * Roswell Data — page-level styles that are not part of the Vireo theme.
 * Load order: bootstrap.min.css -> fonts.css -> vireo-theme.css -> app.css
 *
 * The CSP forbids style attributes, so every width or state a template needs
 * has a class here. Anything genuinely dynamic is set from JS via the CSSOM.
 */

/* ---- Shared with the PIM and the Dealer Platform ------------------------ */

/* Dashboard notices and the install check. */
.rx-notice-warn { border-color: color-mix(in srgb, var(--rx-warning) 50%, transparent) !important; }
.rx-selftest-list { margin: 0; padding-left: 1.1rem; font-size: 0.8125rem; }

/* Column and control widths, so no template needs a style attribute. */
.rx-cw-14 { max-width: 14ch; }
.rx-cw-20 { max-width: 20ch; }

/* The brand slot (views/partials/brand.php). */
.rx-brand-logo { display: block; width: 32px; height: 32px; flex-shrink: 0; }

/* A nav entry for a section that arrives in a later phase. */
.rx-nav-link.rx-nav-soon { opacity: 0.55; cursor: default; pointer-events: none; }
.rx-nav-soon .badge { font-size: 0.625rem; }

.rx-resend[disabled] { opacity: 0.6; }
.rx-min-0 { min-width: 0; }
.rx-cw-28 { max-width: 28ch; overflow-wrap: anywhere; }
.rx-mw-16 { max-width: 16rem; }

/* ---- Admin (Phase 2) ------------------------------------------------------ */

/* Permission checkbox grid in the role editor. */
.rx-perm-group + .rx-perm-group { margin-top: 1.5rem; }
.rx-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem 1.5rem; }

/* Audit log changes: field, then old -> new. Long values wrap. */
.rx-audit-changes { display: grid; grid-template-columns: max-content 1fr; gap: 0.125rem 0.75rem; font-size: 0.8125rem; }
.rx-audit-changes dt { font-weight: 500; color: var(--rx-text-muted); }
.rx-audit-changes dd { margin: 0; overflow-wrap: anywhere; max-width: 60ch; }
.rx-audit-old { color: var(--rx-text-muted); }
.rx-audit-new { color: var(--rx-text-strong); }

/* ---- Media (Phase 3) ------------------------------------------------------ */
.rx-picker-box { display: flex; gap: 1rem; align-items: flex-start; padding: 0.75rem; border: 1px solid var(--rx-border); border-radius: var(--bs-border-radius); background: var(--rx-surface-subtle); }
.rx-picker-preview { flex: 0 0 140px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: calc(var(--bs-border-radius) - 4px); background: var(--rx-surface); overflow: hidden; color: var(--rx-text-subtle); font-size: 2rem; }
.rx-picker-preview img { width: 100%; height: 100%; object-fit: cover; }
.rx-picker-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.rx-picker-progress { height: 4px; }
.rx-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.rx-media-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0; background: var(--rx-surface-subtle); }
.rx-media-choice { padding: 0; border: 2px solid transparent; border-radius: var(--bs-border-radius); background: none; overflow: hidden; text-align: left; }
.rx-media-choice:hover, .rx-media-choice:focus-visible { border-color: var(--rx-accent); }
.rx-media-choice .rx-media-thumb { border-radius: 0; }
@media (max-width: 575.98px) {
  .rx-picker-box { flex-direction: column; }
  .rx-picker-preview { flex-basis: auto; width: 100%; height: 160px; }
}

/* ---- Events (Phase 4) ----------------------------------------------------- */
.rx-schedule input[type="time"] { min-width: 6.75rem; }
.rx-schedule input[type="text"] { min-width: 8rem; }
.rx-schedule th[scope="row"] { min-width: 9.5rem; }
.rx-schedule-preview { padding: 0.75rem 1rem; border: 1px dashed var(--rx-border); border-radius: var(--bs-border-radius); background: var(--rx-surface-subtle); }
.rx-schedule-preview pre { font-family: var(--rx-font-sans); font-size: 0.875rem; white-space: pre-wrap; color: var(--rx-text-strong); }
.rx-facts dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rx-text-subtle); font-weight: 600; }
.rx-facts dd { margin-bottom: 0.75rem; overflow-wrap: anywhere; }
.rx-facts dd:last-child { margin-bottom: 0; }
@media (min-width: 1200px) { .rx-sticky { position: sticky; top: calc(var(--rx-topbar-h) + 1rem); } }
/* Dates-only events: the hour columns and default hours are hidden (and cleared by event-edit.js). */
.rx-dates-only .rx-hours { display: none; }
/* Square pickers (partner logo): a 1:1 preview, the whole logo visible on a light tile. */
.rx-picker-square .rx-picker-preview { flex-basis: 96px; width: 96px; height: 96px; background: #fff; }
.rx-picker-square .rx-picker-preview img { object-fit: contain; }
@media (max-width: 575.98px) { .rx-picker-square .rx-picker-preview { width: 120px; height: 120px; } }