/* ================================================================ Resayil — Empty state cards (Phase 24.12 Plan 04) ---------------------------------------------------------------- Swaps Frappe's stark "No results" fragments in list views and workspace widgets for a Resayil-branded dashed-border card with an inline unDraw-style SVG, headline, sub-line, and optional CTA. Extracted from rs-ui-showcase.css §10 (the proven demo pattern). ================================================================ */ .rs-empty-card { display: flex; flex-direction: column; align-items: center; gap: var(--rs-space-2); background: var(--rs-surface); border: 1px dashed var(--rs-border-strong); border-radius: var(--rs-radius-lg); padding: var(--rs-space-16) var(--rs-space-8); text-align: center; max-width: 480px; margin-inline: auto; margin-block: var(--rs-space-6); font-family: var(--rs-font-sans); } [dir="rtl"] .rs-empty-card { font-family: var(--rs-font-arabic); } .rs-empty-illustration { margin-inline: auto; margin-bottom: var(--rs-space-6); width: 160px; height: 110px; color: var(--rs-accent); } .rs-empty-illustration svg { width: 100%; height: 100%; display: block; } .rs-empty-title { font-size: var(--rs-text-xl); font-weight: 700; color: var(--rs-fg); margin-bottom: var(--rs-space-2); line-height: 1.3; } .rs-empty-sub { font-size: var(--rs-text-sm); color: var(--rs-fg-muted); margin-bottom: var(--rs-space-6); max-width: 380px; line-height: 1.5; } .rs-empty-cta { display: inline-flex; align-items: center; gap: var(--rs-space-2); background: var(--rs-accent); color: #fff; border: none; padding: 0.55rem 1.1rem; border-radius: var(--rs-radius); font-size: var(--rs-text-sm); font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--rs-duration-fast) var(--rs-ease), transform var(--rs-duration-fast) var(--rs-ease); } .rs-empty-cta:hover { background: #e65d00; transform: translateY(-1px); color: #fff; text-decoration: none; } .rs-empty-cta:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 2px; } /* Compact variant for workspace widgets (number cards / chart empties) */ .rs-empty-card.rs-empty-compact { padding: var(--rs-space-6) var(--rs-space-4); gap: var(--rs-space-1); max-width: 280px; margin-block: 0; background: transparent; border: none; } .rs-empty-card.rs-empty-compact .rs-empty-illustration { width: 100px; height: 80px; margin-bottom: var(--rs-space-3); } .rs-empty-card.rs-empty-compact .rs-empty-title { font-size: var(--rs-text-base); } .rs-empty-card.rs-empty-compact .rs-empty-sub { font-size: var(--rs-text-xs); margin-bottom: var(--rs-space-3); } /* Hide Frappe's own empty-state fragments once Resayil's card is present. The JS adds .rs-default-hidden to the matched Frappe node after mount. */ .frappe-list .result .no-result.rs-default-hidden, .list-row-container .no-result.rs-default-hidden, .msg-box.no-results.rs-default-hidden, .widget.number-card .no-value.rs-default-hidden, .widget-group.empty > .empty-state.rs-default-hidden { display: none !important; } /* Kill-switch: opt-out via */ html[data-rs-empty="off"] .rs-empty-card[data-rs-empty="1"] { display: none !important; }