/* ============================================================================
   ZYBENEFITS — ROUND 4 SHARED STYLESHEET (every page, one system)
   Load AFTER zybenefits-m0.css. Adds: portal-as-page shell, campaign/report/
   AI patterns, status pages, complaint form, contact sheets. No new hex
   beyond 01 + 08 §7 (see 13-R4 docs). Icons: sprite icons.svg, injected once
   per page (loader in each page's logic), referenced as <use href="#name">.
   ========================================================================= */

/* Portal shell as the whole page (P-* and R-* files) */
.rs-portal--page { border: none; border-radius: 0; box-shadow: none; }
.rs-portal--page .rs-portal-body { min-height: calc(100vh - 190px); }

/* §2.4 enforcement — anchors already pinned in m0.css; belt for buttons */
.zq-btn--primary:disabled { opacity: 0.55; }
.zq-btn--primary:disabled::after { content: ""; }

/* Empty states (generic, per-page copy) */
.r4-empty { border: 1.5px dashed var(--zq-border-soft); border-radius: 12px; padding: 26px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.r4-empty .zqi { width: 30px; height: 30px; stroke-width: 1.75; color: var(--zq-text-secondary); }

/* Campaign creative preview frames (P-5/P-6/R-4) */
.r4-creative { border: 1px solid var(--zq-border-soft); border-radius: 10px; overflow: hidden; background: var(--zq-bg-soft); position: relative; }
.r4-creative-size { position: absolute; top: 8px; right: 8px; }
.r4-fmt-rail { aspect-ratio: 4 / 3; }
.r4-fmt-banner { aspect-ratio: 4 / 1; }
.r4-fmt-poster { aspect-ratio: 1 / 1.414; }

/* AI suggestion card (P-9, P-6) — observation purple accent */
.r4-ai { border-left: 4px solid #7b1fa2; background: linear-gradient(180deg, rgba(123,31,162,0.055), rgba(123,31,162,0.015)), var(--zq-card-bg); }
.r4-ai-diff { border: 1px solid var(--zq-border-soft); border-radius: 9px; padding: 9px 11px; font-size: 12px; line-height: 1.55; }
.r4-ai-diff del { background: rgba(244,67,54,0.10); text-decoration: line-through; color: var(--zq-text-secondary); }
.r4-ai-diff ins { background: rgba(76,175,80,0.14); text-decoration: none; }

/* Delivery report (P-8) */
.r4-bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding: 4px 4px 0; }
.r4-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.r4-bar > i { width: 100%; max-width: 40px; border-radius: 6px 6px 2px 2px; background: var(--zqb-ladder-fill); font-style: normal; min-height: 3px; display: block; }

/* Status pages (X-14) */
.r4-status { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 40px 20px; }
.r4-status .zqi { width: 44px; height: 44px; stroke-width: 1.5; color: var(--zq-primary); }
.r4-status-code { font: 800 13px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.18em; color: var(--zq-text-secondary); }

/* Evidence checklist rows (P-3) reuse .m0-evrow; add not-started */
.m0-evrow--todo { border-style: dashed; }

/* Queue section headers (R-6) */
.r4-qsec { display: flex; align-items: center; gap: 8px; padding: 10px 2px 6px; border-bottom: 1px solid var(--zq-border-soft); margin-bottom: 8px; }

/* Contact sheets */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cs-cell { border: 1px solid var(--zq-border-soft); border-radius: 10px; overflow: hidden; background: var(--zq-card-bg); }
.cs-frame { width: 100%; height: 212px; overflow: hidden; position: relative; background: var(--zq-bg-soft); }
.cs-frame iframe { width: 1366px; height: 940px; transform: scale(0.2196); transform-origin: 0 0; border: 0; pointer-events: none; }
.cs-cap { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-top: 1px solid var(--zq-border-soft); font: 600 11px/1.3 var(--zq-font-family); }
.ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ic-cell { border: 1px solid var(--zq-border-soft); border-radius: 9px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 7px; background: var(--zq-card-bg); }
.ic-cell .ic-16 { width: 16px; height: 16px; }
.ic-cell .ic-24 { width: 24px; height: 24px; }
.ic-name { font: 600 9px/1.2 ui-monospace, Menlo, monospace; color: var(--zq-text-secondary); text-align: center; word-break: break-all; }
.ic-dark { background: #171923; border-color: #171923; color: #e8eaf2; }
.ic-dark .ic-name { color: rgba(232,234,242,0.6); }

/* ── PER-TYPE ICON COLOURS ──────────────────────────────────────────────────
   Every glyph type carries one consistent colour system-wide (9-colour
   dashboard palette + ZyCalendar family + Material status set — no ad-hoc
   hex). Containers override: inside buttons, chips, glass, bands, dark
   surfaces and icon-buttons the icon keeps the container's ink. Explicit
   inline colours (status semantics) always win. Navigation glyphs (arrows,
   chevrons, more-dots, minus/plus, x-close) stay text-coloured on purpose. */
.zqi:has(> use[href="#tag"]) { color: #e91e63; }
.zqi:has(> use[href="#ticket"]) { color: #7b1fa2; }
.zqi:has(> use[href="#award"]) { color: #fb8c00; }
.zqi:has(> use[href="#message"]) { color: #00bcd4; }
.zqi:has(> use[href="#motion"]) { color: #00897b; }
.zqi:has(> use[href="#building"]) { color: #3f51b5; }
.zqi:has(> use[href="#store"]) { color: #4a148c; }
.zqi:has(> use[href="#megaphone"]) { color: #7b1fa2; }
.zqi:has(> use[href="#flag"]) { color: #f44336; }
.zqi:has(> use[href="#grid"]) { color: #4a148c; }
.zqi:has(> use[href="#check"]), .zqi:has(> use[href="#check-circle"]) { color: #4caf50; }
.zqi:has(> use[href="#x-circle"]) { color: #f44336; }
.zqi:has(> use[href="#info"]) { color: #2196f3; }
.zqi:has(> use[href="#alert-triangle"]) { color: #ff9800; }
.zqi:has(> use[href="#search"]) { color: #3f51b5; }
.zqi:has(> use[href="#filter"]) { color: #00897b; }
.zqi:has(> use[href="#sort"]) { color: #7b1fa2; }
.zqi:has(> use[href="#download"]) { color: #1B5062; }
.zqi:has(> use[href="#upload"]) { color: #4a148c; }
.zqi:has(> use[href="#copy-link"]) { color: #00bcd4; }
.zqi:has(> use[href="#link-out"]) { color: #2196f3; }
.zqi:has(> use[href="#plus-circle"]) { color: #4caf50; }
.zqi:has(> use[href="#minus-circle"]) { color: #f44336; }
.zqi:has(> use[href="#pencil"]) { color: #fb8c00; }
.zqi:has(> use[href="#trash"]) { color: #f44336; }
.zqi:has(> use[href="#eye"]) { color: #3f51b5; }
.zqi:has(> use[href="#lock"]), .zqi:has(> use[href="#shield-lock"]) { color: #4a148c; }
.zqi:has(> use[href="#key"]) { color: #fb8c00; }
.zqi:has(> use[href="#shield-check"]) { color: #4caf50; }
.zqi:has(> use[href="#cloud-off"]) { color: #f44336; }
.zqi:has(> use[href="#compass"]) { color: #3f51b5; }
.zqi:has(> use[href="#empty-box"]), .zqi:has(> use[href="#gear"]), .zqi:has(> use[href="#more-dots"]) { color: var(--zq-text-secondary); }
.zqi:has(> use[href="#timer"]), .zqi:has(> use[href="#clock"]), .zqi:has(> use[href="#bell"]), .zqi:has(> use[href="#pause-circle"]), .zqi:has(> use[href="#offline-cloud"]) { color: #fb8c00; }
.zqi:has(> use[href="#calendar"]) { color: #3f51b5; }
.zqi:has(> use[href="#calendar-range"]) { color: #00bcd4; }
.zqi:has(> use[href="#wallet"]), .zqi:has(> use[href="#clipboard-list"]), .zqi:has(> use[href="#gavel"]), .zqi:has(> use[href="#scales"]), .zqi:has(> use[href="#signature"]) { color: #4a148c; }
.zqi:has(> use[href="#qr"]), .zqi:has(> use[href="#credit-card"]), .zqi:has(> use[href="#receipt"]), .zqi:has(> use[href="#scan"]), .zqi:has(> use[href="#handshake"]) { color: #1B5062; }
.zqi:has(> use[href="#star"]), .zqi:has(> use[href="#star-fill"]), .zqi:has(> use[href="#star-half-fill"]) { color: #ff9800; }
.zqi:has(> use[href="#sparkle"]), .zqi:has(> use[href="#sparkles"]), .zqi:has(> use[href="#users-group"]), .zqi:has(> use[href="#appeal-arrow"]) { color: #7b1fa2; }
.zqi:has(> use[href="#undo"]), .zqi:has(> use[href="#users"]), .zqi:has(> use[href="#phone"]), .zqi:has(> use[href="#chart-line"]) { color: #00897b; }
.zqi:has(> use[href="#image"]), .zqi:has(> use[href="#magnifier-doc"]) { color: #00bcd4; }
.zqi:has(> use[href="#chart-bar"]), .zqi:has(> use[href="#file-text"]), .zqi:has(> use[href="#queue-stack"]) { color: #3f51b5; }
.zqi:has(> use[href="#globe"]), .zqi:has(> use[href="#send"]), .zqi:has(> use[href="#mail"]) { color: #2196f3; }
.zqi:has(> use[href="#user-plus"]), .zqi:has(> use[href="#person-check"]), .zqi:has(> use[href="#document-check"]), .zqi:has(> use[href="#money"]) { color: #4caf50; }
.zqi:has(> use[href="#document-x"]) { color: #f44336; }
.zqi:has(> use[href="#location"]) { color: #e91e63; }
.zqi:has(> use[href="#bed"]) { color: #1B5062; }
.zqi:has(> use[href="#cart"]) { color: #7b1fa2; }
.zqi:has(> use[href="#book"]) { color: #3f51b5; }
.zqi:has(> use[href="#restaurant"]) { color: #fb8c00; }
.zqi:has(> use[href="#institution"]) { color: #00897b; }
.zqi:has(> use[href="#wellness"]) { color: #e91e63; }
/* Containers keep their own ink (higher specificity, no !important) */
.zq-btn .zqi:has(> use), .zq-glass .zqi:has(> use), .zq-chip .zqi:has(> use),
.zq-iconbtn .zqi:has(> use), .m0-band .zqi:has(> use), .rs-portal-top .zqi:has(> use),
.m3-dark .zqi:has(> use), .m0-vbadge .zqi:has(> use), .zq-topbar .zqi:has(> use) { color: inherit; }