/* ================================================================
Deyafa Dashboard — Redesign Experiment CSS
Route: /salesdashboard-redesign
Scope: .rd-scope — zero effect outside this element.
No business-logic changes. Pure visual layer.
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
/* ─── Design tokens ─────────────────────────────────────────── */
.rd-scope {
/* Core palette — Deyafa POS purple/indigo identity */
--rd-amber: #5B5FEF; /* bright violet/blue — primary accent */
--rd-amber-deep: #33269A;
--rd-amber-glow: #F4F3FF;
--rd-amber-border: #C4BFFF;
--rd-amber-muted: rgba(91,95,239,.12);
--rd-green: #15803D;
--rd-green-light: #F0FDF4;
--rd-green-border: #BBF7D0;
--rd-green-muted: rgba(21,128,61,.12);
--rd-orange: #FFD23F; /* accent yellow */
--rd-orange-muted: rgba(255,210,63,.12);
--rd-red: #DC2626;
--rd-red-light: #FEF2F2;
--rd-red-border: #FECACA;
--rd-charcoal: #251B74; /* deep indigo */
--rd-charcoal-2: #33269A;
--rd-purple: #5B5FEF;
--rd-cyan: #FFD23F;
--rd-teal: #5B5FEF;
/* Surface & layout — soft lavender neutral */
--rd-bg: #F4F3FF;
--rd-bg-2: #EDEDFF;
--rd-surface: #FFFFFF;
--rd-border: #C4BFFF;
--rd-border-light: #DAD7FF;
--rd-text-1: #251B74;
--rd-text-2: #4A4080;
--rd-text-3: #9490C0;
/* Shape */
--rd-radius-sm: 10px;
--rd-radius-md: 16px;
--rd-radius-lg: 22px;
--rd-shadow-sm: 0 1px 3px rgba(37,26,116,.07), 0 1px 2px rgba(37,26,116,.05);
--rd-shadow-md: 0 4px 20px rgba(37,26,116,.10), 0 2px 6px rgba(37,26,116,.06);
--rd-shadow-lg: 0 16px 40px rgba(37,26,116,.15), 0 4px 10px rgba(37,26,116,.07);
--rd-shadow-glow: 0 0 0 3px rgba(91,95,239,.18);
/* Override shared tokens used by existing components */
--blue: #5B5FEF;
--blue-light: #A5A7F7;
--navy: #251B74;
--navy-light: #33269A;
--navy-hover: #3D35B3;
--green: #15803D;
--orange: #FFD23F;
--red: #DC2626;
--bg: #F4F3FF;
--surface: #FFFFFF;
--border: #C4BFFF;
--border-light: #DAD7FF;
--text-1: #251B74;
--text-2: #4A4080;
--text-3: #9490C0;
--radius-sm: 10px;
--radius-md: 16px;
--shadow-sm: 0 1px 3px rgba(37,26,116,.07), 0 1px 2px rgba(37,26,116,.05);
--shadow-md: 0 4px 20px rgba(37,26,116,.10), 0 2px 6px rgba(37,26,116,.06);
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
background: var(--rd-bg);
}
/* ═══════════════════════════════════════════════════════════════
PREVIEW BANNER
═══════════════════════════════════════════════════════════════ */
.rd-preview-banner {
background: #251B74;
color: #fff !important;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
border-radius: 0 0 12px 12px;
margin: 0 0 24px 0;
border-left: 4px solid #FFD23F;
}
.rd-preview-banner .rd-banner-label {
display: flex;
align-items: center;
gap: 9px;
font-size: .82rem;
font-weight: 700;
}
.rd-preview-banner .rd-banner-label i { color: #FFD23F; }
.rd-preview-banner .rd-banner-badge {
background: #FFD23F;
color: #251B74;
border-radius: 6px;
padding: 2px 9px;
font-size: .68rem;
font-weight: 800;
letter-spacing: .06em;
}
.rd-preview-banner a.rd-banner-back {
color: rgba(255,255,255,.6);
font-size: .8rem;
font-weight: 600;
text-decoration: none;
display: flex;
align-items: center;
gap: 6px;
transition: color .15s;
}
.rd-preview-banner a.rd-banner-back:hover { color: #fff; }
/* ═══════════════════════════════════════════════════════════════
HERO HEADER — Premium restaurant dashboard identity
═══════════════════════════════════════════════════════════════ */
.rd-scope .rd-hero {
background:
radial-gradient(ellipse 700px 500px at -10% 120%, rgba(91,95,239,.35) 0%, transparent 60%),
radial-gradient(ellipse 600px 400px at 110% -10%, rgba(255,210,63,.18) 0%, transparent 55%),
radial-gradient(ellipse 400px 300px at 50% 130%, rgba(61,53,179,.15) 0%, transparent 60%),
linear-gradient(165deg, #251B74 0%, #1A1050 100%);
border-radius: var(--rd-radius-lg);
padding: 2rem 2.2rem 1.6rem 2.2rem;
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
box-shadow: var(--rd-shadow-lg);
border: 1px solid rgba(255,255,255,.06);
}
/* Subtle grid overlay */
.rd-scope .rd-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
}
/* Top row of hero */
.rd-scope .rd-hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.2rem;
flex-wrap: wrap;
position: relative;
z-index: 1;
margin-bottom: 1.25rem;
}
.rd-scope .rd-hero-brand {
display: flex;
align-items: center;
gap: 14px;
}
/* Logo container */
.rd-scope .rd-hero-logo-container {
width: 64px; height: 64px;
background: rgba(255,255,255,.08);
border-radius: 18px;
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 0 24px rgba(91,95,239,.35), 0 4px 12px rgba(0,0,0,.20);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.rd-scope .rd-hero-logo-img {
max-width: 54px;
max-height: 54px;
object-fit: contain;
display: block;
filter: brightness(0) invert(1);
opacity: .92;
}
.rd-scope .rd-hero-logo-fallback {
width: 54px; height: 54px;
display: none;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: rgba(255,255,255,.7);
}
.rd-scope .rd-hero-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.55rem;
font-weight: 800;
color: #fff !important;
margin: 0 0 3px 0;
letter-spacing: -.025em;
line-height: 1.1;
}
.rd-scope .rd-hero-sub {
font-size: .8rem;
color: #DAD7FF !important;
margin: 0;
font-weight: 400;
}
.rd-scope .rd-hero-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
position: relative;
z-index: 1;
flex-shrink: 0;
}
.rd-scope .live-badge {
background: rgba(21,128,61,.2);
color: #4ade80;
border-color: rgba(21,128,61,.35);
font-size: .73rem;
font-weight: 700;
}
.rd-scope .live-dot { background: #4ade80; }
/* Inventory Dashboard BETA badge (2026-07-31) — TEST-only status pill,
soft amber, no popup/alert, never affects dashboard data/functionality. */
.rd-scope .inv-beta-badge {
display: inline-block;
margin: .3rem 0 .15rem 0;
padding: .2rem .6rem;
border-radius: 999px;
background: rgba(251,191,36,.16);
color: #FBBF24;
border: 1px solid rgba(251,191,36,.4);
font-size: .7rem;
font-weight: 700;
letter-spacing: .02em;
white-space: normal;
line-height: 1.3;
}
@media (max-width: 480px) {
.rd-scope .inv-beta-badge { font-size: .65rem; padding: .18rem .5rem; }
}
/* Manual Inventory Refresh — hero action (2026-09-14, revised to match
/salesdashboard exactly). The button itself is plain ".btn-export" —
the SAME class the Sales Dashboard's own Refresh/Export buttons use —
so height, pill shape, gold gradient, hover/shadow, and icon sizing
are guaranteed identical, not re-implemented. inv-refresh-action only
fixes a min-width so the button doesn't shrink when its label swaps
to "Refreshing..." (shorter than "Refresh from Deyafa") — never wider
than that either, so it never reads as heavier than the Sales button. */
.rd-scope .inv-refresh-action {
min-width: 168px;
justify-content: center;
}
/* Groups the existing KPI-reload "HH:mm:ss" indicator with the new
Inventory "Last synchronized" status in the lower-right of the hero's
filter row — mirrors exactly where the Sales Dashboard places its own
"Updated Xs ago" (.rd-hero-bottom, right side, never under the
button). Two .filter-refresh children keep .rd-hero-bottom's existing
two-child space-between layout (filters | this group) unchanged. */
.rd-scope .rd-hero-refresh-group {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.rd-scope .dash-session-pill {
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.12);
color: #DAD7FF !important;
font-size: .72rem;
}
.rd-scope .dash-session-pill i { color: var(--rd-teal); }
.rd-scope .btn-export {
background: linear-gradient(135deg, #FFD23F, #F2B705);
color: #251B74 !important;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(255,210,63,.45);
opacity: 1;
font-size: .8rem;
font-weight: 700;
}
.rd-scope .btn-export:hover { background: linear-gradient(135deg, #F2B705, #D4A017); color: #251B74 !important; }
/* Mobile: hero action buttons must wrap, never overflow (2026-09-14).
.rd-hero-actions already has flex-wrap:wrap, but it also has
flex-shrink:0 with no width constraint — so on its own wrapped line
under .rd-hero-brand it still sizes to its unwrapped max-content
width (Live + Tenant Session + Refresh + help + Export + help in one
row). On narrow phones that width exceeds the viewport and Export
gets clipped by .rd-hero's overflow:hidden instead of ever wrapping.
Constraining it to the actual line width lets its own flex-wrap wrap
those items onto as many rows as needed (Export moves under Refresh
when it doesn't fit) instead of overflowing off-screen. */
@media (max-width: 576px) {
.rd-scope .rd-hero-actions {
width: 100%;
flex-basis: 100%;
flex-shrink: 1;
row-gap: 10px;
}
}
/* Bottom strip of hero — filter bar embedded in hero */
.rd-scope .rd-hero-bottom {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-top: 1.1rem;
border-top: 1px solid rgba(255,255,255,.1);
}
.rd-scope .rd-hero-filters {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.rd-scope .rd-filter-group {
display: flex;
align-items: center;
gap: 7px;
}
.rd-scope .rd-filter-label {
font-size: .73rem;
font-weight: 600;
color: #DAD7FF !important;
white-space: nowrap;
display: flex;
align-items: center;
gap: 4px;
}
.rd-scope .rd-filter-label i { color: var(--rd-cyan); opacity: .8; font-size: .7rem; }
.rd-scope .rd-filter-select {
height: 32px;
font-size: .8rem;
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: var(--rd-radius-sm) !important;
background: rgba(255,255,255,.08) !important;
color: #fff !important;
min-width: 110px;
max-width: 150px;
outline: none;
cursor: pointer;
padding: 0 8px;
}
.rd-scope .rd-filter-select:focus {
border-color: rgba(91,95,239,.55) !important;
box-shadow: 0 0 0 2px rgba(91,95,239,.20) !important;
background: rgba(255,255,255,.12) !important;
}
.rd-scope .rd-filter-select option {
background: #251B74;
color: #fff;
}
.rd-scope .filter-refresh {
font-size: .7rem;
color: rgba(218,215,255,.65) !important;
display: flex;
align-items: center;
gap: 4px;
}
/* ═══════════════════════════════════════════════════════════════
SECTION HEADERS — Premium restaurant section dividers
═══════════════════════════════════════════════════════════════ */
.rd-scope .ds-section-header {
display: flex;
align-items: center;
gap: 12px;
margin: 32px 0 16px 0;
padding-bottom: 10px;
border-bottom: 1px solid var(--rd-border);
position: relative;
z-index: 2;
}
.rd-scope .ds-section-accent {
display: none !important; /* replaced by the new header style */
}
.rd-scope .ds-section-title {
font-size: .75rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--rd-text-2);
margin: 0;
}
/* Yellow accent line at bottom of section header */
.rd-scope .ds-section-header::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 32px; height: 2px;
background: #FFD23F;
border-radius: 99px;
}
.rd-scope .rd-section-icon {
width: 28px; height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: .75rem;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════
KPI CARDS — Redesigned: tall, big number, floating icon
═══════════════════════════════════════════════════════════════ */
.rd-scope .kpi-v2 {
background: var(--rd-surface);
border: 1px solid var(--rd-border);
border-left: 4px solid transparent;
border-radius: var(--rd-radius-md);
box-shadow: var(--rd-shadow-sm);
padding: 1.25rem 1.25rem 1rem 1.25rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
min-height: 130px;
position: relative;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.rd-scope .kpi-v2::after {
content: '';
position: absolute;
bottom: 0; left: -4px; right: 0;
height: 2px;
background: inherit;
opacity: .05;
}
.rd-scope .kpi-v2:hover {
transform: translateY(-4px);
box-shadow: var(--rd-shadow-md);
}
/* Floating icon - top right corner */
.rd-scope .kpi-v2-icon {
position: absolute !important;
top: 1.1rem; right: 1.1rem;
width: 40px; height: 40px;
border-radius: 11px;
font-size: 1rem;
box-shadow: none;
}
/* Body: metric name + value */
.rd-scope .kpi-v2-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.rd-scope .kpi-v2-label {
font-size: .63rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--rd-text-3);
margin: 0 0 6px 0;
white-space: nowrap;
}
.rd-scope .kpi-v2-value {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 2.1rem !important;
font-weight: 800 !important;
color: var(--rd-text-1) !important;
margin: 0 !important;
line-height: 1 !important;
letter-spacing: -.03em !important;
}
.rd-scope .kpi-v2-nodata {
font-size: .6rem;
background: transparent;
border: none;
color: var(--rd-text-3);
padding: 0;
margin-top: 2px;
}
/* KPI card border colors via nth-child */
.rd-scope .ds-kpi-row-1 .col-12:nth-child(1) .kpi-v2 { border-left-color: #251B74; }
.rd-scope .ds-kpi-row-1 .col-12:nth-child(2) .kpi-v2 { border-left-color: #15803D; }
.rd-scope .ds-kpi-row-1 .col-12:nth-child(3) .kpi-v2 { border-left-color: #3D35B3; }
.rd-scope .ds-kpi-row-1 .col-12:nth-child(4) .kpi-v2 { border-left-color: #FFD23F; }
.rd-scope .ds-kpi-row-2 .col-12:nth-child(1) .kpi-v2 { border-left-color: #33269A; }
.rd-scope .ds-kpi-row-2 .col-12:nth-child(2) .kpi-v2 { border-left-color: #5B5FEF; }
.rd-scope .ds-kpi-row-2 .col-12:nth-child(3) .kpi-v2 { border-left-color: #DC2626; }
.rd-scope .ds-kpi-row-2 .col-12:nth-child(4) .kpi-v2 { border-left-color: #FFD23F; }
/* Subtle tint on hover */
.rd-scope .ds-kpi-row-1 .col-12:nth-child(2) .kpi-v2:hover { background: #f9fffc; }
.rd-scope .ds-kpi-row-1 .col-12:nth-child(4) .kpi-v2:hover { background: #FFFBEB; }
.rd-scope .ds-kpi-row-2 .col-12:nth-child(3) .kpi-v2:hover { background: #fff9f9; }
/* ═══════════════════════════════════════════════════════════════
HEALTH STATUS LEGEND — IT & Branch Health (2026-08-19). Always-
visible key for the Branch Health table's badges, independent of
the Help/User Guide drawer. Deliberately NOT styled like .kpi-v2
(no big number, no left accent bar) so it reads as a legend, not a
fifth KPI row. Colors are the exact Bootstrap badge-success/
warning/danger/secondary hex values the table's own badges already
use (see ITBranchHealth.razor's ModuleBadge/BusinessDayBadge), not
the --rd-* design tokens, so the legend's colors can never drift
from what the table actually shows.
═══════════════════════════════════════════════════════════════ */
.rd-scope .hs-legend { margin: 0 0 1rem 0; }
.rd-scope .hs-legend-title {
display: flex;
align-items: center;
gap: .4rem;
font-size: .74rem;
font-weight: 700;
color: var(--rd-text-2);
text-transform: uppercase;
letter-spacing: .03em;
margin-bottom: .5rem;
}
.rd-scope .hs-legend-title i { color: var(--rd-text-3); font-size: .72rem; }
.rd-scope .hs-legend-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: .6rem;
}
@media (max-width: 900px) {
.rd-scope .hs-legend-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.rd-scope .hs-legend-grid { grid-template-columns: 1fr; }
}
.rd-scope .hs-legend-item {
display: flex;
align-items: flex-start;
gap: .55rem;
padding: .55rem .7rem;
border-radius: 10px;
background: var(--rd-surface);
border: 1px solid var(--rd-border-light);
}
.rd-scope .hs-legend-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: .72rem;
}
.rd-scope .hs-legend-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.rd-scope .hs-legend-label { font-size: .78rem; font-weight: 700; color: var(--rd-text-1); }
.rd-scope .hs-legend-desc { font-size: .68rem; color: var(--rd-text-3); line-height: 1.3; }
.rd-scope .hs-legend-item.hs-healthy .hs-legend-icon { background: rgba(40,167,69,.14); color: #1e7e34; }
.rd-scope .hs-legend-item.hs-lagging .hs-legend-icon { background: rgba(255,193,7,.20); color: #b45309; }
.rd-scope .hs-legend-item.hs-outdated .hs-legend-icon { background: rgba(220,53,69,.14); color: #dc3545; }
.rd-scope .hs-legend-item.hs-nodata .hs-legend-icon { background: rgba(108,117,125,.14); color: #6c757d; }
/* Recipe / Cost Coverage Guide (2026-08-19) — Inventory Dashboard's Food
Cost by Sales Channel section, reusing .hs-legend* as-is (same visual
language as IT & Branch Health's Health Status Guide). Only these four
color modifiers are new: Sales Lines is a neutral count (violet/indigo,
the page's own primary accent — not a status), Fully Costed is green,
Partial Cost is amber/orange, and No Recipe is red so its meaning reads
as immediately as the others without needing to read the text first. */
.rd-scope .hs-legend-item.rc-lines .hs-legend-icon { background: rgba(91,95,239,.14); color: #5B5FEF; }
.rd-scope .hs-legend-item.rc-full .hs-legend-icon { background: rgba(40,167,69,.14); color: #1e7e34; }
.rd-scope .hs-legend-item.rc-partial .hs-legend-icon { background: rgba(217,119,6,.16); color: #d97706; }
.rd-scope .hs-legend-item.rc-none .hs-legend-icon { background: rgba(220,38,38,.14); color: #dc2626; }
/* ═══════════════════════════════════════════════════════════════
SERVICE CHANNEL CARDS — Restaurant operation cards
═══════════════════════════════════════════════════════════════ */
.rd-scope .rd-channel-wrap {
display: flex;
flex-direction: column;
gap: 0;
height: 100%;
}
/* The colored top-strip */
.rd-scope .rd-channel-strip {
height: 5px;
border-radius: var(--rd-radius-md) var(--rd-radius-md) 0 0;
}
/* The card body */
.rd-scope .channel-card {
background: var(--rd-surface);
border: 1px solid var(--rd-border);
border-top: none;
border-radius: 0 0 var(--rd-radius-md) var(--rd-radius-md);
padding: 1.1rem 1.15rem;
display: flex;
align-items: center;
gap: .9rem;
min-height: 106px;
height: 100%;
flex: 1;
box-shadow: 0 3px 10px rgba(37,26,116,.06);
transition: transform .18s, box-shadow .18s;
position: relative;
overflow: hidden;
flex-direction: row;
}
.rd-scope .channel-card:hover { transform: translateY(-2px); box-shadow: var(--rd-shadow-md); }
.rd-scope .channel-icon {
width: 52px; height: 52px;
border-radius: 14px !important;
font-size: 1.3rem;
box-shadow: 0 4px 12px rgba(0,0,0,.10);
flex-shrink: 0;
}
.rd-scope .channel-body { flex: 1; min-width: 0; }
.rd-scope .channel-label {
font-size: .66rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--rd-text-3);
margin: 0 0 5px 0;
}
.rd-scope .channel-value {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.45rem;
font-weight: 800;
color: var(--rd-text-1);
line-height: 1;
letter-spacing: -.02em;
}
/* Pct badge */
.rd-scope .channel-pct {
position: absolute;
top: .75rem; right: .75rem;
font-size: .68rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 6px;
border: none !important;
background: rgba(0,0,0,.05);
color: var(--rd-text-2);
}
/* Progress bar inside channel card */
.rd-scope .rd-channel-prog {
position: absolute;
bottom: 0; left: 0;
height: 3px;
border-radius: 0 99px 99px 0;
transition: width .6s cubic-bezier(.4,0,.2,1);
opacity: .55;
}
/* ═══════════════════════════════════════════════════════════════
DASHBOARD CARDS (general)
═══════════════════════════════════════════════════════════════ */
.rd-scope .ds-card {
background: var(--rd-surface);
border: 1px solid var(--rd-border);
border-radius: var(--rd-radius-md);
box-shadow: var(--rd-shadow-sm);
overflow: hidden;
}
.rd-scope .ds-card-header {
padding: .9rem 1.2rem;
border-bottom: 1px solid var(--rd-border-light);
background: var(--rd-surface);
border-radius: var(--rd-radius-md) var(--rd-radius-md) 0 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem;
}
.rd-scope .ds-card-title {
font-size: .88rem;
font-weight: 700;
color: var(--rd-text-1);
margin: 0;
display: flex;
align-items: center;
gap: 7px;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.rd-scope .ds-card-title i { opacity: .9; }
.rd-scope .ds-card-body { padding: .9rem 1rem; }
/* Card-level selects */
.rd-scope .ds-card-header .form-select-sm,
.rd-scope .form-select-sm {
border-radius: var(--rd-radius-sm) !important;
border-color: var(--rd-border) !important;
background: var(--rd-bg);
font-size: .8rem;
height: 32px;
color: var(--rd-text-1);
}
.rd-scope .form-select:focus, .rd-scope .form-select-sm:focus {
border-color: var(--rd-amber) !important;
box-shadow: 0 0 0 .15rem rgba(91,95,239,.18) !important;
}
/* Food Cost by Sales Channel filter controls (2026-08-19 fix) —
.rd-filter-select/.rd-filter-label/.rd-filter-group were designed only
for the dark-purple hero bar at the top of the page (white text,
near-transparent white background/border, calibrated to be readable on
a dark surface). The Food Cost by Sales Channel card reused the same
classes inside .ds-card-body — a plain WHITE/light card — producing
white text on a barely-tinted-white background: effectively invisible.
Scoped to .fc-filter-bar only, so the hero bar's own .rd-filter-select
usage (Period/Site-Branch/Store-Warehouse/Category) is completely
unaffected; matches the existing "Card-level selects" (.form-select-sm)
color tokens already used elsewhere in this file for light-card
controls, for visual consistency. */
.rd-scope .fc-filter-bar .rd-filter-select {
background: var(--rd-bg) !important;
color: var(--rd-text-1) !important;
border: 1px solid var(--rd-border) !important;
}
.rd-scope .fc-filter-bar .rd-filter-select:focus {
border-color: var(--rd-amber) !important;
box-shadow: 0 0 0 .15rem rgba(91,95,239,.18) !important;
background: var(--rd-bg) !important;
}
.rd-scope .fc-filter-bar .rd-filter-select option {
background: #fff;
color: var(--rd-text-1);
}
.rd-scope .fc-filter-bar .rd-filter-label {
color: var(--text-2, #4A4080) !important;
}
/* Sales Channel logo chips (2026-08-19) — every channel always visible as
its own inline, clickable chip (no popup/combobox/trigger). Wraps
responsively; each chip stays compact and visually consistent with the
surrounding .rd-filter-select controls (light-card color tokens, small
inline logo box), never card-like or oversized. */
.rd-scope .cl-chip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.rd-scope .cl-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 6px;
border-radius: 999px;
border: 1px solid var(--rd-border);
background: var(--rd-bg);
color: var(--rd-text-1);
font-size: .78rem;
line-height: 1.2;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
/* Hover/focus contrast fix (2026-08-19) — an UNSELECTED chip must always
keep dark, readable text on hover/focus; white text is reserved for the
selected/active chip only. Explicit :not(.active) + color declarations
here so this can never be silently overridden by specificity ordering
elsewhere (the .active rule below is otherwise more specific than a bare
:hover, but color was previously unset on hover, leaving it dependent on
cascade order alone). */
.rd-scope .cl-chip:hover:not(:disabled):not(.active) {
background: rgba(91,95,239,.10);
border-color: var(--rd-amber);
color: var(--rd-text-1);
}
.rd-scope .cl-chip:focus-visible:not(.active) {
outline: 2px solid var(--rd-amber);
outline-offset: 1px;
color: var(--rd-text-1);
}
.rd-scope .cl-chip:disabled {
opacity: .5;
cursor: not-allowed;
}
/* Selected channel — a very clear, high-contrast active state (not just a
subtle tint), so the current filter is unambiguous at a glance. White
text stays white on hover/focus too — only the active chip ever shows it. */
.rd-scope .cl-chip.active,
.rd-scope .cl-chip.active:hover,
.rd-scope .cl-chip.active:focus-visible {
background: var(--rd-amber);
border-color: var(--rd-amber);
color: #fff;
font-weight: 700;
box-shadow: 0 3px 10px rgba(91,95,239,.35);
}
.rd-scope .cl-chip.active .order-channel-fallback-icon {
color: #fff;
}
.rd-scope .cl-chip-logo-box {
/* Visibility bump (2026-08-19) — 18px -> 27px. object-fit:contain on
.cl-chip-logo-img (unchanged below) means this is purely a bigger
viewport; it never stretches/distorts an image, and --logo-scale
(each channel's saved DisplayScale, applied via transform:scale on
the ![]()
itself) keeps working exactly as before — scale is
relative to whatever box size it's placed in. .cl-chip's own
align-items:center (unchanged) keeps the channel name vertically
centered beside the now-larger logo automatically. */
width: 27px;
height: 27px;
flex: 0 0 27px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 4px;
background: #fff;
}
.rd-scope .cl-chip-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
transform: scale(var(--logo-scale, 1));
transform-origin: center;
}
/* Visual balance fix (2026-08-19) — the shared .order-channel-fallback-icon
class (site.css, also used unscoped by the Sales Dashboard's
OrderChannelsComp — left completely untouched there) has no explicit
size cap, so at the 27px chip box its icon glyph (used for both "All
Channels" and any channel with no uploaded logo) could read as bulkier/
larger than a real uploaded logo image, which is naturally constrained
by object-fit:contain to fit inside the same box. Scoped strictly to
.cl-chip-logo-box so the Sales Dashboard's own icon sizing is unaffected. */
.rd-scope .cl-chip-logo-box .order-channel-fallback-icon {
font-size: .95rem;
line-height: 1;
}
.rd-scope .cl-chip-label {
white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════
LOADING STATE
═══════════════════════════════════════════════════════════════ */
.rd-scope .spinner-border { color: var(--rd-amber) !important; }
/* ═══════════════════════════════════════════════════════════════
TABLE HEADERS — ensure text is readable on dark purple backgrounds
═══════════════════════════════════════════════════════════════ */
.rd-scope table thead th {
color: #FFFFFF !important;
}
.rd-scope .pm-grouped-table th {
color: rgba(255,255,255,.9) !important;
}
/* ═══════════════════════════════════════════════════════════════
SHARED RESPONSIVE DATA TABLE PATTERN — .rd-data-table (2026-08-19)
═══════════════════════════════════════════════════════════════
Design rule for the whole Portal, not a page-specific fix: on mobile,
an operational table with many columns (IT & Branch Health today; any
future wide table) must never be squeezed to fit the viewport by
letting the browser wrap short values (dates, statuses, badges) into
multiple stacked lines — that reads as compressed and often breaks
mid-word/mid-date. The correct behavior is the opposite: keep every
column at a readable minimum width and let the surrounding
.table-responsive wrapper (already used everywhere in this app) handle
overflow with horizontal scrolling. Text wrapping only ever wins over
scrolling when the browser is ALLOWED to shrink a cell below its
content's natural width — this class prevents that by nowrapping
short/atomic values and giving every column an explicit floor.
Usage: add "rd-data-table" alongside the existing "table"/"table-hover"
classes (keeps Bootstrap's own row/hover styling and the global dark
header from site.css's unscoped ".table thead th" — deliberately NOT
touched here, so this never changes Sales Dashboard or any other
existing plain ".table" elsewhere in the Portal). Add one of
.rd-col-xs/.rd-col-sm/.rd-col-md/.rd-col-lg to a for a sensible
minimum column width (badge-only column -> xs/sm; a date/timestamp or a
2-3 word header -> md/lg). Add .rd-nowrap to any | holding a date/
timestamp, status badge, or other short value that must never break
mid-word — headers are deliberately NOT forced nowrap, since column
headers are allowed to wrap up to ~2 lines (never single-word-per-line)
once the column has a real minimum width to wrap within.
Typography floor (never go below this for a real data cell):
font-size ~13px, line-height >= 1.4, cell padding >= 10px vertical. */
.rd-scope .rd-data-table {
font-size: .8125rem; /* ~13px */
line-height: 1.4;
}
.rd-scope .rd-data-table thead th {
padding: 10px 12px;
line-height: 1.35; /* header text may wrap to 2 lines; never cramped */
vertical-align: bottom;
}
.rd-scope .rd-data-table tbody td {
padding: 10px 12px;
line-height: 1.4;
vertical-align: middle;
}
.rd-scope .rd-data-table .badge {
/* Bootstrap's own .badge already sets white-space:nowrap (status words
like Online/Offline/Healthy/Lagging/Outdated/No Data were never
actually at risk of wrapping) -- what it does NOT account for is
font-size:75% of the inherited table font-size, which would shrink
badge text below the readable floor once .rd-data-table sets a
smaller base size. Fixed to an explicit, comfortably readable size
(~12px) with a touch more padding than Bootstrap's own .25em .4em
default, independent of whatever font-size the surrounding cell has. */
font-size: .75rem;
padding: .3em .55em;
}
.rd-scope .rd-data-table .rd-nowrap { white-space: nowrap; }
/* Reusable minimum column widths — generic on purpose (not tied to any
one table's specific columns), so any future .rd-data-table can reuse
the same four sizes instead of inventing new pixel values per page. */
.rd-scope .rd-col-xs { min-width: 80px; }
.rd-scope .rd-col-sm { min-width: 110px; }
.rd-scope .rd-col-md { min-width: 150px; }
.rd-scope .rd-col-lg { min-width: 190px; }
@media (max-width: 768px) {
/* The floor holds on mobile too — this is the whole point. Only the
table's own horizontal scroll (from the existing .table-responsive
wrapper) is allowed to change; text never shrinks/wraps further. */
.rd-scope .rd-data-table { font-size: .8rem; }
}
/* ═══════════════════════════════════════════════════════════════
BRANCH TABLE — Premium dark header
═══════════════════════════════════════════════════════════════ */
.rd-scope .branch-table thead th {
background: #251B74;
color: rgba(255,255,255,.9);
font-size: .66rem;
letter-spacing: .07em;
padding: 10px 12px;
text-transform: uppercase;
}
/* Sticky BRANCH column (2026-09-03) -- corrective override. site.css's
generic `html[data-theme="dark"] .branch-table th.bt-name { background:
#243044; }` (for a bare, non-.rd-scope usage of this table) has HIGHER
specificity than the unconditional purple rule directly above (3
classes vs 2, regardless of dark/light), so without this it would win
here too and leave the sticky header cell's own column looking navy
while every other header cell stays purple. This re-asserts purple
specifically for [data-theme="dark"] + .rd-scope, at a specificity
(4 classes) that wins over both. */
html[data-theme="dark"] .rd-scope .branch-table th.bt-name { background: #251B74; }
.rd-scope .branch-table tbody .bt-row { border-bottom-color: var(--rd-border-light); }
.rd-scope .branch-table tbody .bt-row:hover { background: var(--rd-border-light); }
/* Sticky BRANCH column hover -- same corrective-specificity reasoning as
the header rule above: site.css's generic `.bt-row:hover td.bt-name-val`
rules (needed for a bare, non-.rd-scope table) are more specific than
this file's own row-level `.bt-row:hover` rule, in BOTH themes, so
without these two the sticky cell's hover color would mismatch the
rest of the row's hover color here. var(--rd-border-light) already
resolves to the correct value for whichever theme is active (see the
html[data-theme="dark"] .rd-scope token block in site.css), so one
rule per theme is enough -- no separate light/dark color literals
needed here. */
.rd-scope .branch-table tbody .bt-row:hover td.bt-name-val { background: var(--rd-border-light); }
html[data-theme="dark"] .rd-scope .branch-table tbody .bt-row:hover td.bt-name-val { background: var(--rd-border-light); }
.rd-scope .bt-branch-name { font-weight: 700; font-size: .86rem; color: var(--rd-text-1); }
.rd-scope .bt-seen-val { color: var(--rd-text-3); }
/* Status badges */
.rd-scope .status-online { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.rd-scope .status-delayed { background: var(--rd-amber-glow); color: var(--rd-amber-deep); border-color: var(--rd-amber-border); }
.rd-scope .status-offline { background: var(--rd-red-light); color: var(--rd-red); border-color: var(--rd-red-border); }
.rd-scope .btn-branch-detail {
background: #251B74;
border-color: #251B74;
border-radius: 8px;
font-size: .72rem;
padding: 4px 12px;
}
.rd-scope .btn-branch-detail:hover { background: #33269A; }
/* ═══════════════════════════════════════════════════════════════
DRAWER
═══════════════════════════════════════════════════════════════ */
.rd-scope .drawer-header { background: #251B74; }
.rd-scope .drawer-close { border-radius: 8px; }
/* ═══════════════════════════════════════════════════════════════
PAYMENT TYPE TABLE
═══════════════════════════════════════════════════════════════ */
.rd-scope .pt-table thead tr,
.rd-scope .pm-grouped-table th {
background: #251B74;
}
.rd-scope .pt-table thead th { color: rgba(255,255,255,.9); }
.rd-scope .pt-type-badge {
background: var(--rd-amber-glow);
border-color: var(--rd-amber-border);
color: var(--rd-amber-deep);
font-weight: 700;
padding: 2px 10px;
border-radius: 6px;
}
.rd-scope .pm-summary-strip {
background: var(--rd-border-light);
border-bottom-color: var(--rd-border);
}
.rd-scope .pm-sum-item { border-color: var(--rd-border); background: var(--rd-surface); }
.rd-scope .pm-sum-label { color: var(--rd-text-3); }
.rd-scope .pm-sum-val { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
.rd-scope .pm-sum-val.val-cash { color: var(--rd-green); }
.rd-scope .pm-sum-val.val-credit { color: var(--rd-amber); }
.rd-scope .pm-table-progress-bar { background: var(--rd-amber); }
/* ═══════════════════════════════════════════════════════════════
RANKED ITEMS — purple → yellow gradient
═══════════════════════════════════════════════════════════════ */
.rd-scope .ri-bar { background: linear-gradient(to right, #5B5FEF, #FFD23F); }
.rd-scope .ri-rank { background: #251B74; border-radius: 6px; font-size: .64rem; }
.rd-scope .ri-name { font-weight: 600; color: var(--rd-text-1); }
.rd-scope .ri-qty { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }
/* ═══════════════════════════════════════════════════════════════
DISCOUNTS & VOIDS BARS
═══════════════════════════════════════════════════════════════ */
.rd-scope .ic-bar-disc { background: linear-gradient(to right, #5B5FEF, #FFD23F); }
.rd-scope .ic-bar-void { background: linear-gradient(to right, var(--rd-red), #7F1D1D); }
.rd-scope .ic-disc-amt { color: #5B5FEF; }
.rd-scope .ic-void-amt { color: var(--rd-red); }
.rd-scope .ic-total { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; }
/* ═══════════════════════════════════════════════════════════════
SERVICE TYPE DONUT
═══════════════════════════════════════════════════════════════ */
.rd-scope .sst-name { font-weight: 600; }
.rd-scope .sst-amt { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }
/* ═══════════════════════════════════════════════════════════════
HEALTH BADGES
═══════════════════════════════════════════════════════════════ */
.rd-scope .health-badge-ok { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.rd-scope .health-badge-warn { background: var(--rd-amber-glow); color: var(--rd-amber-deep); border-color: var(--rd-amber-border); }
.rd-scope .health-badge-err { background: var(--rd-red-light); color: var(--rd-red); border-color: var(--rd-red-border); }
/* ═══════════════════════════════════════════════════════════════
SYNCFUSION GRID
═══════════════════════════════════════════════════════════════ */
.rd-scope .e-pager .e-currentitem { background: var(--rd-amber) !important; }
.rd-scope .e-grid .e-row:hover .e-rowcell { background: var(--rd-border-light) !important; }
/* ═══════════════════════════════════════════════════════════════
SIDEBAR — Deyafa purple/yellow theme.
Activated by (set via JS interop when
/salesdashboard-redesign mounts; removed on dispose).
Has zero effect on /salesdashboard, /userslist, or V2.
═══════════════════════════════════════════════════════════════ */
/* Outer sidebar shell — full gradient */
.main-sidebar {
background: linear-gradient(180deg, #251B74 0%, #33269A 45%, #1A1050 100%) !important;
}
/* Inner .sidebar div — AdminLTE sets its own background via sidebar-dark-primary;
make it transparent so the .main-sidebar gradient shows through everywhere */
.main-sidebar .sidebar {
background: transparent !important;
}
/* Nav containers — also transparent so gradient is unobstructed */
.nav-sidebar,
.nav-sidebar > .nav-item {
background: transparent !important;
}
/* Brand area */
.main-sidebar .brand-link {
background: rgba(91,95,239,.12) !important;
border-bottom: 1px solid rgba(91,95,239,.25) !important;
}
/* Sidebar brand logo — white */
.brand-link img {
filter: brightness(0) invert(1) !important;
opacity: .92 !important;
}
/* Default nav link — transparent bg, lavender text */
.nav-sidebar > .nav-item > .nav-link {
background: transparent !important;
color: #DAD7FF !important;
}
.nav-sidebar .nav-link i {
color: rgba(218,215,255,.65) !important;
}
/* Active item — yellow accent */
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item.menu-open > .nav-link {
background: rgba(255,210,63,.16) !important;
border-left-color: #FFD23F !important;
color: #FFD23F !important;
box-shadow: none !important;
}
.nav-sidebar > .nav-item > .nav-link.active i,
.nav-sidebar > .nav-item.menu-open > .nav-link i {
color: #FFD23F !important;
}
/* Hover */
.nav-sidebar > .nav-item > .nav-link:hover {
background: rgba(255,255,255,.08) !important;
color: #fff !important;
}
.nav-sidebar > .nav-item > .nav-link:hover i {
color: #FFD23F !important;
}
/* Treeview sub-items */
.nav-sidebar .nav-treeview {
background: transparent !important;
}
.nav-sidebar .nav-treeview .nav-link {
background: transparent !important;
color: rgba(218,215,255,.8) !important;
}
.nav-sidebar .nav-treeview .nav-link.active {
background: rgba(255,210,63,.12) !important;
color: #FFD23F !important;
border-left-color: #FFD23F !important;
}
/* ═══════════════════════════════════════════════════════════════
CUSTOM SCROLLBAR
═══════════════════════════════════════════════════════════════ */
.rd-scope ::-webkit-scrollbar { width: 6px; height: 6px; }
.rd-scope ::-webkit-scrollbar-track { background: var(--rd-border-light); border-radius: 99px; }
.rd-scope ::-webkit-scrollbar-thumb { background: var(--rd-border); border-radius: 99px; }
.rd-scope ::-webkit-scrollbar-thumb:hover { background: var(--rd-amber); }
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.rd-scope .rd-hero { padding: 1.4rem 1.2rem; }
.rd-scope .rd-hero-title { font-size: 1.25rem; }
.rd-scope .kpi-v2-value { font-size: 1.75rem !important; }
.rd-scope .channel-icon { width: 44px; height: 44px; }
.rd-scope .channel-value { font-size: 1.2rem; }
}
/* ═══════════════════════════════════════════════════════════════
BUSINESS PULSE STRIP
Slim indicator bar below hero — zero new DB calls.
═══════════════════════════════════════════════════════════════ */
.rd-scope .bp-strip {
display: flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #251B74 0%, #33269A 55%, #3D35B3 100%);
border-radius: var(--rd-radius-md);
padding: .7rem 1.25rem;
margin-bottom: 1rem;
box-shadow: var(--rd-shadow-md);
border: 1px solid rgba(255,255,255,.08);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Constrain to parent width so internal content can overflow and scroll */
width: 100%;
box-sizing: border-box;
}
.rd-scope .bp-strip::-webkit-scrollbar { display: none; }
.rd-scope .bp-label {
display: flex;
align-items: center;
gap: .45rem;
font-size: .68rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
white-space: nowrap;
flex-shrink: 0;
padding-right: .9rem;
border-right: 1px solid rgba(255,255,255,.14);
}
.rd-scope .bp-label i { color: #FFD23F; font-size: .78rem; }
[dir="rtl"] .rd-scope .bp-label {
padding-right: 0;
padding-left: .9rem;
border-right: none;
border-left: 1px solid rgba(255,255,255,.14);
}
.rd-scope .bp-chips {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: nowrap;
/* flex: 0 0 auto — do NOT grow/shrink; natural content width lets the
strip's overflow-x: auto scroll the chips row as a unit */
flex: 0 0 auto;
}
.rd-scope .bp-chip {
display: flex;
align-items: center;
gap: .55rem;
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,255,255,.10);
border-radius: var(--rd-radius-sm);
padding: .45rem .8rem;
flex: 0 0 auto; /* never shrink; always natural width */
transition: background .15s;
cursor: default;
}
.rd-scope .bp-chip:hover { background: rgba(255,255,255,.15); }
.rd-scope .bp-chip-icon {
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: .78rem;
flex-shrink: 0;
}
.rd-scope .bp-chip-orders .bp-chip-icon { background: rgba(91,95,239,.4); color: #C4C6FC; }
.rd-scope .bp-chip-avgcheck .bp-chip-icon { background: rgba(255,210,63,.25); color: #FFD23F; }
.rd-scope .bp-chip-branch .bp-chip-icon { background: rgba(21,128,61,.28); color: #86EFAC; }
.rd-scope .bp-chip-channel .bp-chip-icon { background: rgba(255,255,255,.13); color: rgba(255,255,255,.75); }
.rd-scope .bp-chip-body {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.rd-scope .bp-chip-label {
display: block;
font-size: .63rem;
font-weight: 600;
line-height: 1.1;
color: rgba(255,255,255,.52);
letter-spacing: .04em;
white-space: nowrap;
}
.rd-scope .bp-chip-value {
display: block;
font-size: .9rem;
font-weight: 700;
line-height: 1.15;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
/* Dark mode — deepen the gradient slightly */
html[data-theme="dark"] .rd-scope .bp-strip {
background: linear-gradient(135deg, #130D4A 0%, #1E1660 55%, #251B74 100%);
border-color: rgba(255,255,255,.05);
box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
}
/* Tablet + mobile: show thin scrollbar as a scroll hint, tighten sizing */
@media (max-width: 768px) {
.rd-scope .bp-strip {
gap: .55rem;
padding: .6rem .9rem .75rem; /* extra bottom padding for scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.28) transparent;
}
.rd-scope .bp-strip::-webkit-scrollbar { display: block; height: 3px; }
.rd-scope .bp-strip::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 99px; }
.rd-scope .bp-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 99px; }
.rd-scope .bp-label { font-size: .62rem; padding-right: .65rem; }
[dir="rtl"] .rd-scope .bp-label { padding-right: 0; padding-left: .65rem; }
.rd-scope .bp-chip { padding: .4rem .7rem; gap: .45rem; }
.rd-scope .bp-chip-icon { width: 28px; height: 28px; font-size: .72rem; }
.rd-scope .bp-chip-value { font-size: .85rem; max-width: 110px; }
.rd-scope .bp-chip-label { font-size: .59rem; }
}
/* Small phones: further reduce so first 2–3 chips are partially visible,
signalling there's more to scroll */
@media (max-width: 480px) {
.rd-scope .bp-strip { gap: .45rem; padding: .55rem .75rem .7rem; }
.rd-scope .bp-label { font-size: .58rem; padding-right: .55rem; }
[dir="rtl"] .rd-scope .bp-label { padding-right: 0; padding-left: .55rem; }
.rd-scope .bp-chip { padding: .35rem .6rem; gap: .38rem; }
.rd-scope .bp-chip-icon { width: 24px; height: 24px; font-size: .66rem; }
.rd-scope .bp-chip-value { font-size: .8rem; max-width: 90px; }
.rd-scope .bp-chip-label { font-size: .56rem; }
}
/* ═══════════════════════════════════════════════════════════════
BUSINESS DAY ALERT — informational notice on the Sales Dashboard
when one or more branches are on a different Business Day / have
not uploaded data yet. Height grows with content (no fixed
height), icon aligns with the first text line, wraps cleanly at
every breakpoint.
═══════════════════════════════════════════════════════════════ */
.rd-scope .alert-banner {
display: flex;
align-items: flex-start;
gap: .7rem;
background: rgba(37,99,235,.08);
border: 1px solid rgba(37,99,235,.35);
border-radius: 10px;
padding: .8rem 1rem;
margin-bottom: 1rem;
max-width: 860px;
}
.rd-scope .alert-banner-icon {
flex-shrink: 0;
color: #2563EB;
font-size: .95rem;
line-height: 1.55;
margin-top: 1px;
}
.rd-scope .alert-banner-text {
flex: 1;
min-width: 0;
font-size: .85rem;
line-height: 1.55;
color: var(--text-1, #1E1B4B);
text-align: left;
word-break: break-word;
}
[dir="rtl"] .rd-scope .alert-banner-text { text-align: right; }
html[data-theme="dark"] .rd-scope .alert-banner {
background: rgba(37,99,235,.14);
border-color: rgba(59,130,246,.4);
}
html[data-theme="dark"] .rd-scope .alert-banner-text { color: #DAD7FF; }
html[data-theme="dark"] .rd-scope .alert-banner-icon { color: #60A5FA; }
@media (max-width: 768px) {
.rd-scope .alert-banner {
max-width: 100%;
padding: .7rem .85rem;
gap: .55rem;
}
.rd-scope .alert-banner-text { font-size: .8rem; line-height: 1.5; }
.rd-scope .alert-banner-icon { font-size: .85rem; }
}
@media (max-width: 480px) {
.rd-scope .alert-banner { padding: .65rem .75rem; }
.rd-scope .alert-banner-text { font-size: .78rem; }
}
/* ================================================================
INVENTORY DASHBOARD — /inventorydashboard
All selectors scoped under .rd-scope.
Uses existing shared classes (rd-hero, ds-card, kpi-v2, bp-strip,
branch-table, btn-branch-detail) unchanged — no overrides.
Only new inventory-specific classes are defined here.
================================================================ */
/* ── Locked / Upgrade Required badge (module not entitled) ───────── */
.rd-scope .inv-locked-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 999px;
font-size: .72rem;
font-weight: 700;
letter-spacing: .03em;
background: rgba(220,38,38,.14);
border: 1px solid rgba(220,38,38,.4);
color: #EF4444;
}
.rd-scope .inv-locked-pill i { font-size: .65rem; }
/* ── Module locked panel (replaces KPIs/tables when Inventory is
not included in the Brand's subscription) ─────────────────────── */
.rd-scope .inv-locked-panel {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: var(--card-bg, #fff);
border: 1px solid var(--border-1, #e5e7eb);
border-radius: 14px;
padding: 56px 24px;
margin-bottom: 24px;
}
.rd-scope .inv-locked-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(220,38,38,.12);
color: #DC2626;
font-size: 1.6rem;
margin-bottom: 16px;
}
.rd-scope .inv-locked-title {
font-weight: 700;
color: var(--text-1);
margin-bottom: 8px;
}
.rd-scope .inv-locked-text {
font-size: .88rem;
color: var(--text-2);
max-width: 480px;
margin-bottom: 20px;
line-height: 1.55;
}
.rd-scope .inv-locked-cta {
display: inline-flex;
align-items: center;
gap: 8px;
background: #DC2626;
color: #fff !important;
font-weight: 700;
padding: .55rem 1.2rem;
border-radius: 8px;
font-size: .85rem;
text-decoration: none !important;
transition: background-color .15s, transform .15s;
}
.rd-scope .inv-locked-cta:hover { background: #B91C1C; transform: translateY(-1px); }
/* ================================================================
AI INSIGHTS PANEL (Sprint 22 / 22.1) — used on both Sales and
Inventory dashboards via .
Light-mode rules use the same --rd-* tokens as .ds-card for visual
consistency. Dark mode is NOT handled by these tokens (--rd-surface /
--rd-border / --rd-text-* have no dark variant anywhere in this
codebase — .rd-scope re-pins them to fixed light values, which
shadows the global html[data-theme="dark"] override). Dark mode is
instead handled by the explicit html[data-theme="dark"] .rd-scope
overrides below, matching the established pattern already used for
.inv-health-card / .inv-priority-* / .ds-card-title.
================================================================ */
.rd-scope .ai-insights-panel {
background: var(--rd-surface);
border: 1px solid var(--rd-border);
border-radius: var(--rd-radius-md);
box-shadow: var(--rd-shadow-sm);
padding: 18px 20px 20px;
margin-bottom: 24px;
}
.rd-scope .ai-insights-checking { display: flex; justify-content: center; padding: 12px; }
.rd-scope .ai-insights-locked {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 28px 16px;
}
.rd-scope .ai-locked-icon {
width: 48px; height: 48px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(220,38,38,.12);
color: #DC2626;
font-size: 1.2rem;
margin-bottom: 12px;
}
.rd-scope .ai-locked-text { font-size: .85rem; color: var(--rd-text-2); max-width: 460px; margin: 0; line-height: 1.5; }
.rd-scope .ai-insights-cta {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 16px;
}
.rd-scope .ai-cta-text { font-size: .85rem; color: var(--rd-text-2); margin-bottom: 14px; max-width: 480px; }
.rd-scope .btn-generate-ai,
.rd-scope .btn-regenerate-ai,
.rd-scope .btn-retry-ai {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
color: #fff;
border: none;
border-radius: 8px;
padding: .6rem 1.3rem;
font-size: .85rem;
font-weight: 700;
cursor: pointer;
transition: filter .15s, transform .15s;
}
.rd-scope .btn-generate-ai:hover,
.rd-scope .btn-regenerate-ai:hover,
.rd-scope .btn-retry-ai:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rd-scope .btn-regenerate-ai { margin-top: 14px; background: rgba(139,92,246,.12); color: #8B5CF6; }
.rd-scope .ai-insights-loading {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 16px;
gap: 10px;
color: var(--rd-text-2);
font-size: .85rem;
}
.rd-scope .ai-insights-error {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 16px;
color: #DC2626;
}
.rd-scope .ai-insights-error i { font-size: 1.3rem; margin-bottom: 8px; }
.rd-scope .ai-insights-error p { color: var(--rd-text-2); font-size: .85rem; margin-bottom: 12px; }
.rd-scope .ai-summary {
font-size: .88rem;
color: var(--rd-text-1);
background: rgba(139,92,246,.06);
border-left: 3px solid #8B5CF6;
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 18px;
line-height: 1.65;
}
[dir="rtl"] .rd-scope .ai-summary { border-left: none; border-right: 3px solid #8B5CF6; }
.rd-scope .ai-cards-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.rd-scope .ai-card {
border: 1px solid var(--rd-border);
border-radius: var(--rd-radius-sm);
box-shadow: var(--rd-shadow-sm);
padding: 18px;
background: var(--rd-surface);
border-top: 3px solid #6B7280;
}
.rd-scope .ai-card-warning { border-top-color: #DC2626; }
.rd-scope .ai-card-opportunity { border-top-color: #15803D; }
.rd-scope .ai-card-inventory { border-top-color: #5B5FEF; }
.rd-scope .ai-card-summary { border-top-color: #8B5CF6; }
.rd-scope .ai-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.rd-scope .ai-card-type-badge,
.rd-scope .ai-card-priority-badge {
font-size: .62rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
padding: 3px 9px;
border-radius: 999px;
background: rgba(107,114,128,.12);
color: #6B7280;
white-space: nowrap;
}
.rd-scope .ai-priority-high .ai-card-priority-badge { background: rgba(220,38,38,.12); color: #DC2626; }
.rd-scope .ai-priority-medium .ai-card-priority-badge { background: rgba(249,115,22,.12); color: #F97316; }
.rd-scope .ai-priority-low .ai-card-priority-badge { background: rgba(21,128,61,.12); color: #15803D; }
.rd-scope .ai-card-title { font-weight: 700; font-size: .92rem; color: var(--rd-text-1); line-height: 1.4; margin-bottom: 8px; }
.rd-scope .ai-card-message { font-size: .83rem; color: var(--rd-text-2); line-height: 1.7; margin-bottom: 16px; }
.rd-scope .ai-card-action {
font-size: .78rem;
font-weight: 600;
line-height: 1.55;
color: #6D28D9;
display: flex;
align-items: flex-start;
gap: 8px;
padding-top: 12px;
border-top: 1px dashed var(--rd-border-light);
}
/* align-items: flex-start (not center) + flex-shrink on the icon — with
center alignment, a wrapped multi-line RecommendedAction text visually
overlapped/crowded the icon instead of wrapping cleanly beside it. */
.rd-scope .ai-card-action i { flex-shrink: 0; margin-top: 2px; }
/* ── Dark mode ─────────────────────────────────────────────────
Hardcoded to match the established .rd-scope dark palette used
elsewhere (see .inv-health-card / .inv-priority-* / .ds-card-title):
near-black surfaces via a faint white overlay, #DAD7FF for primary
text, #9490C0 / #a5a0d8 for secondary text. ─────────────────── */
html[data-theme="dark"] .rd-scope .ai-insights-panel {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .rd-scope .ai-locked-text,
html[data-theme="dark"] .rd-scope .ai-cta-text,
html[data-theme="dark"] .rd-scope .ai-insights-loading,
html[data-theme="dark"] .rd-scope .ai-insights-error p,
html[data-theme="dark"] .rd-scope .ai-card-message {
color: #9490C0;
}
html[data-theme="dark"] .rd-scope .ai-summary {
color: #DAD7FF;
background: rgba(139,92,246,.14);
}
html[data-theme="dark"] .rd-scope .ai-card {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .rd-scope .ai-card-title { color: #DAD7FF; }
html[data-theme="dark"] .rd-scope .ai-card-action { border-top-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .rd-scope .btn-regenerate-ai { background: rgba(139,92,246,.22); color: #C4BFFF; }
/* Badges: light mode uses a light tint + saturated text on a white card;
in dark mode that same tint nearly disappears against the near-black
card, so dark mode gets its own brighter tint + lighter text pairing. */
html[data-theme="dark"] .rd-scope .ai-card-type-badge {
background: rgba(255,255,255,.08);
color: #C4BFFF;
}
html[data-theme="dark"] .rd-scope .ai-priority-high .ai-card-priority-badge { background: rgba(220,38,38,.22); color: #FCA5A5; }
html[data-theme="dark"] .rd-scope .ai-priority-medium .ai-card-priority-badge { background: rgba(249,115,22,.18); color: #FDBA74; }
html[data-theme="dark"] .rd-scope .ai-priority-low .ai-card-priority-badge { background: rgba(21,128,61,.18); color: #86EFAC; }
/* ── Inventory Pulse Chip colours ──────────────────────────────── */
.rd-scope .inv-chip-stockval .bp-chip-icon { background: rgba(91,95,239,.35); color: #C4C6FC; }
.rd-scope .inv-chip-foodcost .bp-chip-icon { background: rgba(249,115,22,.25); color: #FDBA74; }
.rd-scope .inv-chip-waste .bp-chip-icon { background: rgba(220,38,38,.28); color: #FCA5A5; }
.rd-scope .inv-chip-variance .bp-chip-icon { background: rgba(45,212,191,.2); color: #5EEAD4; }
/* ── KPI row border accents (mirrors ds-kpi-row-1 pattern) ─────── */
.rd-scope .inv-kpi-row .col-6:nth-child(1) .kpi-v2 { border-left-color: #5B5FEF; }
.rd-scope .inv-kpi-row .col-6:nth-child(2) .kpi-v2 { border-left-color: #F97316; }
.rd-scope .inv-kpi-row .col-6:nth-child(3) .kpi-v2 { border-left-color: #DC2626; }
.rd-scope .inv-kpi-row .col-6:nth-child(4) .kpi-v2 { border-left-color: #15803D; }
[dir="rtl"] .rd-scope .inv-kpi-row .kpi-v2 { border-left: 1px solid var(--rd-border); border-right: 4px solid transparent; }
[dir="rtl"] .rd-scope .inv-kpi-row .col-6:nth-child(1) .kpi-v2 { border-right-color: #5B5FEF; }
[dir="rtl"] .rd-scope .inv-kpi-row .col-6:nth-child(2) .kpi-v2 { border-right-color: #F97316; }
[dir="rtl"] .rd-scope .inv-kpi-row .col-6:nth-child(3) .kpi-v2 { border-right-color: #DC2626; }
[dir="rtl"] .rd-scope .inv-kpi-row .col-6:nth-child(4) .kpi-v2 { border-right-color: #15803D; }
/* Floating icon: flip to left side in RTL */
[dir="rtl"] .rd-scope .kpi-v2-icon { right: auto; left: 1.1rem; }
/* ── KPI delta helpers ──────────────────────────────────────────── */
.rd-scope .inv-delta-up { font-size: .7rem; font-weight: 700; color: #15803D; }
.rd-scope .inv-delta-down { font-size: .7rem; font-weight: 700; color: #DC2626; }
/* ── Alert Strip ───────────────────────────────────────────────── */
.rd-scope .inv-alert-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
background: #FFF7ED;
border: 1px solid #FED7AA;
border-left: 4px solid #F97316;
border-radius: var(--rd-radius-sm);
padding: .75rem 1rem;
font-size: .82rem;
color: #7C2D12;
margin-bottom: 1rem;
}
[dir="rtl"] .rd-scope .inv-alert-strip {
border-left: 1px solid #FED7AA;
border-right: 4px solid #F97316;
}
.rd-scope .inv-alert-inner { display: flex; align-items: flex-start; gap: .6rem; flex: 1; flex-wrap: wrap; line-height: 1.5; }
.rd-scope .inv-alert-icon { color: #F97316; font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.rd-scope .inv-alert-body { flex: 1; }
.rd-scope .inv-alert-dismiss {
background: none; border: none; cursor: pointer;
color: #9A3412; font-size: .85rem;
padding: .2rem .4rem; border-radius: 6px;
flex-shrink: 0; line-height: 1; transition: background .15s;
}
.rd-scope .inv-alert-dismiss:hover { background: rgba(249,115,22,.15); }
html[data-theme="dark"] .rd-scope .inv-alert-strip {
background: rgba(249,115,22,.08);
border-color: rgba(249,115,22,.2);
border-left-color: #F97316;
color: #FDBA74;
}
[dir="rtl"] html[data-theme="dark"] .rd-scope .inv-alert-strip {
border-left-color: rgba(249,115,22,.2);
border-right-color: #F97316;
}
/* ── Count Badges (section header) ─────────────────────────────── */
.rd-scope .inv-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .65rem;
font-weight: 800;
padding: .1rem .55rem;
border-radius: 999px;
vertical-align: middle;
margin-inline-start: .5rem;
letter-spacing: .03em;
}
.rd-scope .inv-badge-red { background: #FEE2E2; color: #B91C1C; }
.rd-scope .inv-badge-orange { background: #FFF7ED; color: #C2410C; }
.rd-scope .inv-badge-green { background: #F0FDF4; color: #15803D; }
html[data-theme="dark"] .rd-scope .inv-badge-red { background: rgba(220,38,38,.2); color: #FCA5A5; }
html[data-theme="dark"] .rd-scope .inv-badge-orange { background: rgba(249,115,22,.15); color: #FDBA74; }
html[data-theme="dark"] .rd-scope .inv-badge-green { background: rgba(21,128,61,.15); color: #86EFAC; }
/* ── Stock Health Cards ────────────────────────────────────────── */
.rd-scope .inv-health-card {
display: flex;
align-items: flex-start;
gap: .85rem;
padding: 1.15rem 1.25rem;
border-radius: var(--rd-radius-md);
border: 1px solid var(--rd-border-light);
background: var(--rd-surface);
box-shadow: var(--rd-shadow-sm);
height: 100%;
transition: transform .2s, box-shadow .2s;
}
.rd-scope .inv-health-card:hover {
transform: translateY(-3px);
box-shadow: var(--rd-shadow-md);
}
.rd-scope .inv-health-icon {
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
}
.rd-scope .inv-health-body { flex: 1; min-width: 0; }
.rd-scope .inv-health-val {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.9rem;
font-weight: 800;
line-height: 1;
color: var(--rd-text-1);
letter-spacing: -.03em;
}
.rd-scope .inv-health-label {
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--rd-text-3);
margin: .35rem 0 .65rem;
}
.rd-scope .inv-health-bar-track {
height: 5px;
background: var(--rd-bg-2);
border-radius: 99px;
overflow: hidden;
margin-bottom: .35rem;
}
.rd-scope .inv-health-bar-fill { height: 100%; border-radius: 99px; transition: width .5s ease; }
.rd-scope .inv-health-pct { font-size: .7rem; font-weight: 600; color: var(--rd-text-3); }
.rd-scope .inv-health-teal .inv-health-icon { background: rgba(45,212,191,.15); color: #2DD4BF; }
.rd-scope .inv-health-warn .inv-health-icon { background: rgba(249,115,22,.15); color: #F97316; }
.rd-scope .inv-health-red .inv-health-icon { background: rgba(220,38,38,.15); color: #DC2626; }
.rd-scope .inv-health-indigo .inv-health-icon { background: rgba(139,92,246,.15); color: #8B5CF6; }
html[data-theme="dark"] .rd-scope .inv-health-card {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.06);
}
/* ── Donut Chart ───────────────────────────────────────────────── */
.rd-scope .inv-donut-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.rd-scope .inv-donut-outer {
width: 190px; height: 190px;
border-radius: 50%;
background: conic-gradient(
#5B5FEF 0deg 124.9deg,
#2DD4BF 124.9deg 202.6deg,
#F97316 202.6deg 261.2deg,
#8B5CF6 261.2deg 316.9deg,
#EC4899 316.9deg 344.1deg,
#6B7280 344.1deg 360deg
);
position: relative;
flex-shrink: 0;
box-shadow: 0 8px 32px rgba(91,95,239,.25);
}
.rd-scope .inv-donut-inner {
position: absolute;
inset: 20%;
border-radius: 50%;
background: var(--rd-surface);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: .25rem;
}
.rd-scope .inv-donut-center-lbl { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rd-text-3); line-height: 1; margin-bottom: .2rem; }
.rd-scope .inv-donut-center-val { font-size: .68rem; font-weight: 600; color: var(--rd-text-3); line-height: 1; }
.rd-scope .inv-donut-center-val2 { font-size: .88rem; font-weight: 800; color: var(--rd-text-1); line-height: 1.2; }
html[data-theme="dark"] .rd-scope .inv-donut-inner { background: #1A1440; }
/* ── Donut Legend ──────────────────────────────────────────────── */
.rd-scope .inv-donut-legend { width: 100%; display: flex; flex-direction: column; gap: .55rem; }
.rd-scope .inv-legend-row {
display: flex;
align-items: center;
gap: .55rem;
font-size: .8rem;
padding: .2rem 0;
border-bottom: 1px solid var(--rd-border-light);
}
.rd-scope .inv-legend-row:last-child { border-bottom: none; }
.rd-scope .inv-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rd-scope .inv-legend-name { flex: 1; color: var(--rd-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-scope .inv-legend-spacer { flex: 1; }
.rd-scope .inv-legend-pct { font-size: .78rem; font-weight: 700; color: var(--rd-text-1); min-width: 44px; text-align: end; }
/* ── Horizontal Bars (Top Consumed / Stock Value by Warehouse) ───
Stock Value by Warehouse UI Fix (2026-07-31) — root cause of the
reported clipping/wrapping/clutter issues: .inv-hbar-label was a
fixed 140px with white-space:nowrap (silently clipped Arabic names
at the ellipsis, never wrapped), .inv-hbar-pct was a fixed 36px
(nowhere near enough for "EGP 0.00", forcing it onto two lines), and
.inv-hbar-track's flex:1 soaked up all the remaining space between
them (the "excessive horizontal spacing" complaint). Fixed by
letting the label wrap up to 2 lines instead of clipping, giving the
value column a real minimum width with nowrap, and tightening the
row gap. */
.rd-scope .inv-hbar-list { display: flex; flex-direction: column; gap: .6rem; }
.rd-scope .inv-hbar-row { display: flex; align-items: center; gap: .6rem; }
.rd-scope .inv-hbar-label {
font-size: .78rem; color: var(--rd-text-2);
width: 160px; flex-shrink: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
white-space: normal; word-break: break-word; line-height: 1.3;
}
[dir="rtl"] .rd-scope .inv-hbar-label { text-align: right; }
.rd-scope .inv-hbar-track { flex: 1; min-width: 40px; height: 8px; background: var(--rd-bg-2); border-radius: 99px; overflow: hidden; }
.rd-scope .inv-hbar-fill { height: 100%; border-radius: 99px; transition: width .5s ease; }
.rd-scope .inv-hbar-pct { font-size: .75rem; font-weight: 700; color: var(--rd-text-1); min-width: 92px; text-align: end; flex-shrink: 0; white-space: nowrap; }
.rd-scope .inv-hbar-empty-state { text-align: center; padding: 36px 16px; color: var(--rd-text-3); font-size: .85rem; }
/* ── Priority badges ───────────────────────────────────────────── */
.rd-scope .inv-priority-high {
display: inline-block; font-size: .7rem; font-weight: 700;
padding: .18rem .6rem; border-radius: 999px;
background: #FEE2E2; color: #B91C1C; letter-spacing: .02em;
}
.rd-scope .inv-priority-medium {
display: inline-block; font-size: .7rem; font-weight: 600;
padding: .18rem .6rem; border-radius: 999px;
background: #FFF7ED; color: #C2410C;
}
html[data-theme="dark"] .rd-scope .inv-priority-high { background: rgba(220,38,38,.2); color: #FCA5A5; }
html[data-theme="dark"] .rd-scope .inv-priority-medium { background: rgba(249,115,22,.15); color: #FDBA74; }
/* ── Sortable table headers (2026-08-17) — Low Stock Alerts,
Warehouse Summary, Suggested Purchase Orders. Client-side sort only;
no data reload. Uses the global (dark-mode-adaptive) --text-3/--blue
tokens rather than this file's own --rd-text-*/--rd-* tokens, which
are not redefined for dark theme anywhere in this stylesheet. */
.rd-scope .inv-sortable-th {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.rd-scope .inv-sortable-th:hover {
color: var(--blue);
}
.rd-scope .inv-sortable-th:focus-visible {
outline: 2px solid var(--blue);
outline-offset: -2px;
}
.rd-scope .inv-sort-icon {
display: inline-block;
min-width: 1em;
margin-inline-start: .35em;
font-size: .7rem;
opacity: .4;
color: var(--text-3);
}
.rd-scope .inv-sortable-th[aria-sort="ascending"] .inv-sort-icon,
.rd-scope .inv-sortable-th[aria-sort="descending"] .inv-sort-icon {
opacity: 1;
color: var(--blue);
}
/* ── Warehouse code chip ────────────────────────────────────────── */
.rd-scope .inv-wh-code {
display: inline-block; font-size: .7rem; font-weight: 700;
padding: .15rem .55rem; border-radius: 6px;
background: var(--rd-amber-muted); color: var(--rd-purple);
letter-spacing: .06em; font-family: monospace;
}
/* ── Warehouse fill bar ─────────────────────────────────────────── */
.rd-scope .inv-fill-wrap { display: flex; align-items: center; gap: .6rem; }
.rd-scope .inv-stock-bar-track {
flex: 1; height: 7px; background: var(--rd-bg-2);
border-radius: 99px; overflow: hidden; min-width: 60px; max-width: 100px;
}
.rd-scope .inv-stock-bar-fill { height: 100%; border-radius: 99px; transition: width .4s; }
.rd-scope .inv-fill-pct { font-size: .73rem; font-weight: 600; color: var(--rd-text-2); white-space: nowrap; }
/* ── Warehouse status badge ─────────────────────────────────────── */
.rd-scope .inv-status-badge {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .74rem; font-weight: 600;
padding: .18rem .6rem; border-radius: 999px;
}
.rd-scope .inv-status-ok { background: #f0fdf4; color: #15803d; }
.rd-scope .inv-status-warn { background: #FFF7ED; color: #C2410C; }
.rd-scope .inv-status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #22C55E; display: inline-block;
animation: inv-pulse 2s ease-in-out infinite;
}
@keyframes inv-pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
html[data-theme="dark"] .rd-scope .inv-status-ok { background: rgba(21,128,61,.15); color: #86EFAC; }
html[data-theme="dark"] .rd-scope .inv-status-warn { background: rgba(249,115,22,.12); color: #FDBA74; }
/* ── Empty state (Waste log) ────────────────────────────────────── */
.rd-scope .inv-empty-state {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 2.5rem 1rem; min-height: 180px;
}
/* ── Stock Movement Cards ───────────────────────────────────────── */
.rd-scope .inv-mv-card { padding: 1.25rem; transition: transform .2s, box-shadow .2s; }
.rd-scope .inv-mv-card:hover { transform: translateY(-3px); box-shadow: var(--rd-shadow-md); }
.rd-scope .inv-mv-header { display: flex; align-items: center; gap: .85rem; margin-bottom: .85rem; }
.rd-scope .inv-mv-icon {
width: 42px; height: 42px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 1rem; flex-shrink: 0;
}
.rd-scope .inv-mv-meta { flex: 1; min-width: 0; }
.rd-scope .inv-mv-title { font-size: .82rem; font-weight: 700; color: var(--rd-text-1); line-height: 1.2; }
.rd-scope .inv-mv-sub { font-size: .7rem; color: var(--rd-text-3); margin-top: .1rem; }
.rd-scope .inv-mv-value {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 1.65rem; font-weight: 800; color: var(--rd-text-1);
line-height: 1; letter-spacing: -.03em; margin-bottom: .3rem;
}
.rd-scope .inv-mv-delta { font-size: .72rem; font-weight: 600; }
.rd-scope .inv-mv-delta i { margin-inline-end: .2rem; }
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 992px) {
.rd-scope .inv-donut-outer { width: 170px; height: 170px; }
}
@media (max-width: 768px) {
/* Stock Value by Warehouse UI Fix (2026-07-31) — mobile: stack the
warehouse name on its own full-width line above the track+value
pair, instead of squeezing it into a shrinking fixed column. Keeps
"EGP 0.00" on one line and avoids clipping longer Arabic names. */
.rd-scope .inv-hbar-row { flex-wrap: wrap; row-gap: .25rem; }
.rd-scope .inv-hbar-label { width: 100%; flex-basis: 100%; font-size: .76rem; order: 1; }
.rd-scope .inv-hbar-track { order: 2; flex: 1 1 auto; }
.rd-scope .inv-hbar-pct { order: 3; min-width: 84px; font-size: .73rem; }
.rd-scope .inv-donut-outer { width: 150px; height: 150px; }
.rd-scope .inv-health-val { font-size: 1.5rem; }
.rd-scope .inv-health-card { padding: .9rem 1rem; }
.rd-scope .inv-stock-bar-track { max-width: 70px; }
.rd-scope .inv-mv-card { padding: 1rem; }
.rd-scope .inv-mv-value { font-size: 1.4rem; }
}
@media (max-width: 480px) {
.rd-scope .inv-alert-strip { font-size: .76rem; }
.rd-scope .inv-donut-outer { width: 130px; height: 130px; }
.rd-scope .inv-donut-center-val2 { font-size: .72rem; }
.rd-scope .inv-health-val { font-size: 1.3rem; }
.rd-scope .inv-hbar-pct { min-width: 76px; font-size: .7rem; }
}
/* ================================================================
UNDER CONSTRUCTION PAGE — /underconstruction
All selectors scoped under .rd-scope.uc-page or .rd-scope .uc-*
Never bleeds into Sales Dashboard or Inventory Dashboard.
================================================================ */
.rd-scope.uc-page {
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem 5rem;
background: linear-gradient(145deg, #0D0830 0%, #150E55 35%, #1E1570 65%, #251B74 100%);
/* bleed to cover the layout's content-wrapper padding */
margin: -1rem -1rem 0;
width: calc(100% + 2rem);
box-sizing: border-box;
}
.rd-scope .uc-card {
max-width: 620px;
width: 100%;
background: linear-gradient(160deg, rgba(37,27,116,.65) 0%, rgba(20,12,64,.80) 100%);
border: 1px solid rgba(91,95,239,.45);
border-radius: 24px;
padding: 3rem 2.75rem 2.5rem;
text-align: center;
box-shadow:
0 0 80px rgba(91,95,239,.18),
0 0 160px rgba(91,95,239,.08),
0 24px 64px rgba(0,0,0,.48);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
position: relative;
overflow: hidden;
}
/* top highlight line */
.rd-scope .uc-card::before {
content: '';
position: absolute;
top: 0; left: 12%; right: 12%;
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(91,95,239,.65),
rgba(165,168,255,.55),
rgba(91,95,239,.65),
transparent);
}
/* ── Icon ──────────────────────────────────────────────────────── */
.rd-scope .uc-icon-wrap {
width: 88px; height: 88px;
border-radius: 22px;
background: rgba(91,95,239,.18);
border: 1px solid rgba(91,95,239,.42);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.75rem;
font-size: 2.1rem;
color: #A5A8FF;
box-shadow:
0 0 40px rgba(91,95,239,.28),
0 0 12px rgba(91,95,239,.15);
position: relative;
}
.rd-scope .uc-icon-wrap::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 25px;
border: 1px solid rgba(165,168,255,.12);
}
/* ── Badge ─────────────────────────────────────────────────────── */
.rd-scope .uc-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 16px;
border-radius: 999px;
font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
background: rgba(255,210,63,.13);
border: 1px solid rgba(255,210,63,.42);
color: #FFD23F;
margin-bottom: 1.4rem;
}
.rd-scope .uc-badge i { font-size: .6rem; }
/* ── Title ─────────────────────────────────────────────────────── */
.rd-scope .uc-title {
font-size: 2.6rem; font-weight: 800;
color: #fff;
margin: 0 0 .9rem;
letter-spacing: -.025em; line-height: 1.1;
text-shadow: 0 2px 24px rgba(91,95,239,.45);
}
/* ── Subtitle ──────────────────────────────────────────────────── */
.rd-scope .uc-subtitle {
font-size: .96rem;
color: rgba(196,198,252,.78);
margin: 0 auto 2rem;
line-height: 1.65;
max-width: 440px;
}
/* ── Divider ───────────────────────────────────────────────────── */
.rd-scope .uc-divider {
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(91,95,239,.38),
rgba(165,168,255,.22),
rgba(91,95,239,.38),
transparent);
margin: 0 0 1.6rem;
}
/* ── Module context block ──────────────────────────────────────── */
.rd-scope .uc-module-label {
font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: rgba(165,168,255,.52);
margin: 0 0 .55rem;
}
.rd-scope .uc-helper {
font-size: .89rem;
color: rgba(196,198,252,.65);
margin: 0 auto .85rem;
line-height: 1.55;
max-width: 480px;
}
.rd-scope .uc-helper-secondary {
font-size: .77rem;
color: rgba(148,144,192,.52);
margin: 0;
display: flex; align-items: center; justify-content: center; gap: 5px;
}
.rd-scope .uc-helper-secondary i { font-size: .68rem; }
/* ── RTL ───────────────────────────────────────────────────────── */
[dir="rtl"] .rd-scope .uc-card { text-align: center; }
[dir="rtl"] .rd-scope .uc-helper-secondary { flex-direction: row-reverse; }
/* ── Dark-mode tokens are already dark — no override needed ────── */
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
.rd-scope.uc-page { padding: 2rem 1rem 4rem; }
.rd-scope .uc-card { padding: 2.25rem 1.5rem 2rem; border-radius: 18px; }
.rd-scope .uc-title { font-size: 2rem; }
.rd-scope .uc-icon-wrap { width: 72px; height: 72px; font-size: 1.75rem; border-radius: 18px; }
.rd-scope .uc-subtitle { font-size: .88rem; }
}
/* ══════════════════════════════════════════════════════════════════
Sales Dashboard — Initial Load Skeleton + Brand Moment (2026-08-15)
Purely presentational; toggled by the existing isLoading boolean in
SalesDashboardPage.razor. Data-loading logic itself is unchanged —
see that file's OnInitializedAsync / GetSelesDashboarData.
══════════════════════════════════════════════════════════════════ */
.rd-scope .dsl-loading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2.5rem 1rem 3rem;
min-height: 480px;
}
/* ── Brand moment ─────────────────────────────────────────────── */
.rd-scope .dsl-brand-moment {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2.25rem;
max-width: 460px;
}
.rd-scope .dsl-logo-wrap {
width: 72px;
height: 72px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.1rem;
background: radial-gradient(circle, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 72%);
position: relative;
}
.rd-scope .dsl-logo-wrap::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 26px;
background: radial-gradient(circle, rgba(37,99,235,.18) 0%, rgba(37,99,235,0) 70%);
animation: dslLogoGlow 2.4s ease-in-out infinite;
}
.rd-scope .dsl-logo-img {
width: 46px;
height: 46px;
object-fit: contain;
position: relative;
z-index: 1;
animation: dslLogoPulse 2.4s ease-in-out infinite;
}
.rd-scope .dsl-logo-fallback {
display: none;
width: 46px; height: 46px;
align-items: center; justify-content: center;
font-size: 1.4rem; color: var(--blue);
position: relative; z-index: 1;
}
@keyframes dslLogoGlow {
0%, 100% { opacity: .55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
@keyframes dslLogoPulse {
0%, 100% { opacity: .85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
.rd-scope .dsl-title {
font-weight: 700;
font-size: 1.15rem;
color: var(--text-1);
margin: 0 0 .5rem;
}
.rd-scope .dsl-subtitle {
font-size: .88rem;
color: var(--text-2);
margin: 0 0 1.15rem;
line-height: 1.55;
max-width: 420px;
}
.rd-scope .dsl-activity {
font-size: .8rem;
font-weight: 600;
color: var(--blue);
margin: 0;
min-height: 1.2em;
}
/* ── Skeleton ──────────────────────────────────────────────────── */
.rd-scope .dsl-skeleton {
width: 100%;
max-width: 1100px;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.rd-scope .dsl-sk {
display: block;
border-radius: 10px;
background: linear-gradient(90deg, var(--dsl-sk-base, #E7ECF3) 25%, var(--dsl-sk-shine, #F3F6FA) 37%, var(--dsl-sk-base, #E7ECF3) 63%);
background-size: 400% 100%;
animation: dslShimmer 1.6s ease-in-out infinite;
}
.rd-scope .dsl-sk-header {
display: flex;
align-items: center;
gap: 1rem;
}
.rd-scope .dsl-sk-avatar {
width: 56px; height: 56px;
border-radius: 16px;
flex-shrink: 0;
}
.rd-scope .dsl-sk-header-lines {
display: flex;
flex-direction: column;
gap: .55rem;
flex: 1;
}
.rd-scope .dsl-sk-line { height: 12px; border-radius: 6px; }
.rd-scope .dsl-sk-line-title { width: 40%; height: 16px; }
.rd-scope .dsl-sk-line-sub { width: 60%; }
.rd-scope .dsl-sk-line-xs { width: 50%; height: 10px; }
.rd-scope .dsl-sk-line-md { width: 70%; height: 18px; }
.rd-scope .dsl-sk-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.rd-scope .dsl-sk-kpi-card {
background: var(--dsl-sk-card-bg, #fff);
border: 1px solid var(--dsl-sk-card-border, #E7ECF3);
border-radius: 14px;
padding: 1.1rem 1.2rem;
display: flex;
flex-direction: column;
gap: .6rem;
}
.rd-scope .dsl-sk-kpi-icon {
width: 38px; height: 38px;
border-radius: 10px;
}
.rd-scope .dsl-sk-panel-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.rd-scope .dsl-sk-panel {
height: 220px;
border-radius: 14px;
}
.rd-scope .dsl-sk-table {
display: flex;
flex-direction: column;
gap: .55rem;
}
.rd-scope .dsl-sk-table-row {
height: 34px;
border-radius: 8px;
}
.rd-scope .dsl-sk-table-row:nth-child(1) { width: 100%; }
.rd-scope .dsl-sk-table-row:nth-child(2) { width: 96%; }
.rd-scope .dsl-sk-table-row:nth-child(3) { width: 100%; }
.rd-scope .dsl-sk-table-row:nth-child(4) { width: 92%; }
.rd-scope .dsl-sk-table-row:nth-child(5) { width: 97%; }
@keyframes dslShimmer {
0% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
/* ── Content reveal transition ────────────────────────────────── */
.rd-scope section.dsl-content-in {
animation: dslFadeIn .4s ease both;
}
@keyframes dslFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Dark theme ────────────────────────────────────────────────── */
html[data-theme="dark"] .rd-scope .dsl-sk {
--dsl-sk-base: #263449;
--dsl-sk-shine: #324259;
}
html[data-theme="dark"] .rd-scope .dsl-sk-kpi-card {
--dsl-sk-card-bg: #1E293B;
--dsl-sk-card-border: #334155;
}
html[data-theme="dark"] .rd-scope .dsl-logo-wrap {
background: radial-gradient(circle, rgba(96,165,250,.14) 0%, rgba(96,165,250,0) 72%);
}
html[data-theme="dark"] .rd-scope .dsl-logo-wrap::before {
background: radial-gradient(circle, rgba(96,165,250,.22) 0%, rgba(96,165,250,0) 70%);
}
/* ── RTL ───────────────────────────────────────────────────────── */
[dir="rtl"] .rd-scope .dsl-sk {
background: linear-gradient(270deg, var(--dsl-sk-base, #E7ECF3) 25%, var(--dsl-sk-shine, #F3F6FA) 37%, var(--dsl-sk-base, #E7ECF3) 63%);
background-size: 400% 100%;
}
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
.rd-scope .dsl-sk-kpi-row { grid-template-columns: repeat(2, 1fr); }
.rd-scope .dsl-sk-panel-row { grid-template-columns: 1fr; }
.rd-scope .dsl-sk-panel { height: 180px; }
}
@media (max-width: 480px) {
.rd-scope .dsl-loading { padding: 1.75rem .75rem 2.25rem; min-height: 380px; }
.rd-scope .dsl-sk-kpi-row { grid-template-columns: 1fr 1fr; gap: .7rem; }
.rd-scope .dsl-sk-kpi-card { padding: .85rem .9rem; }
.rd-scope .dsl-title { font-size: 1.02rem; }
.rd-scope .dsl-subtitle { font-size: .8rem; }
.rd-scope .dsl-skeleton { gap: .9rem; }
}
/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.rd-scope .dsl-sk { animation: none; background: var(--dsl-sk-base, #E7ECF3); }
.rd-scope .dsl-logo-img,
.rd-scope .dsl-logo-wrap::before { animation: none; }
.rd-scope section.dsl-content-in { animation: none; }
}
/* ══════════════════════════════════════════════════════════════════
Deyafa Loading Pattern — Phase 1 shared/reusable additions (2026-08-16)
Everything above this point (brand moment, title/subtitle/activity,
.dsl-sk shimmer base, .dsl-sk-line*, .dsl-sk-kpi-row/-panel-row,
.dsl-content-in fade-in, dark/RTL/responsive/reduced-motion for all of
it) is already fully generic and is reused as-is by the new shared
Shared/Loading/LoadingShell.razor + Skeleton* components — nothing
above was duplicated. Only the pieces below are genuinely new, added
here rather than inline in any single page's markup so every future
adopter shares them too. NOT used by SalesDashboardPage.razor (still
on its own inline dsl-sk-kpi-card / no Compact variant) — its visual
output is unchanged by this addition.
══════════════════════════════════════════════════════════════════ */
/* ── Compact variant (LoadingShell Variant="Compact") ─────────────
Smaller/settings-page footprint: no skeleton body is ever rendered
in this variant, so there's no bottom margin to reserve for it. */
.rd-scope .dsl-loading--compact {
min-height: 260px;
padding: 2rem 1rem;
}
.rd-scope .dsl-loading--compact .dsl-brand-moment {
margin-bottom: 0;
}
/* ── Generic skeleton card container (SkeletonCard.razor) ─────────
Deliberately a NEW class, not a rename of .dsl-sk-kpi-card above —
this keeps Sales Dashboard's existing markup/output completely
untouched while giving every other adopter (Inventory Dashboard's
Business Pulse chips, KPI cards, and Stock Health cards all reuse
this same one class) its own card shape to compose SkeletonLine/
SkeletonBlock content inside. Same visual recipe as dsl-sk-kpi-card
by design (consistent look across the whole Pattern), just not the
same CSS rule. */
.rd-scope .dsl-sk-card {
background: var(--dsl-sk-card-bg, #fff);
border: 1px solid var(--dsl-sk-card-border, #E7ECF3);
border-radius: 14px;
padding: 1.1rem 1.2rem;
display: flex;
flex-direction: column;
gap: .6rem;
}
/* ── Filters-row skeleton shape ────────────────────────────────────
A handful of pill-shaped SkeletonBlock instances (explicit Width/
Height/BorderRadius per instance) in a wrapping row — mirrors a
typical Period/Store/Category filter bar. Row direction naturally
follows the ancestor's dir="rtl"/ltr via flexbox, no separate RTL
rule needed. */
.rd-scope .dsl-sk-filters-row {
display: flex;
flex-wrap: wrap;
gap: .75rem;
}
/* ── Dark theme ────────────────────────────────────────────────── */
html[data-theme="dark"] .rd-scope .dsl-sk-card {
--dsl-sk-card-bg: #1E293B;
--dsl-sk-card-border: #334155;
}
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 480px) {
.rd-scope .dsl-sk-card { padding: .85rem .9rem; }
.rd-scope .dsl-loading--compact { min-height: 220px; padding: 1.5rem .75rem; }
}
|