/* ═══════════════════════════════════════════════════════════════════════════
   Al Razana — Sales Pulse + commercial screen depth.

   WHY HAND-WRITTEN CSS: this project has NO Tailwind build (no
   tailwind.config.js, no postcss.config.js, no custom Filament theme). Filament
   ships a PRE-COMPILED stylesheet that contains only the utilities Filament
   itself uses. Verified against public/css/filament/filament/app.css:
   `grid-cols-12`, `col-span-*`, `space-y-*` and friends have ZERO matches —
   any view using them silently collapses into one unstyled column. Every rule
   this dashboard needs is therefore written here, with CSS Grid + logical
   properties so RTL works for free.
   ═══════════════════════════════════════════════════════════════════════════ */

.rz-pulse { display: flex; flex-direction: column; gap: 1.15rem; }

/* ── Hero band ──────────────────────────────────────────────────────────── */
.rz-hero {
    display: grid; gap: 1.5rem; align-items: center;
    grid-template-columns: minmax(0, 1fr);
    padding: 1.55rem 1.7rem;
    border-radius: 1.1rem;
    background:
        radial-gradient(38rem 18rem at 92% -30%, rgba(201, 162, 75, .22), transparent 62%),
        linear-gradient(135deg, #0b1f3a 0%, #14243d 55%, #1d3355 100%);
    box-shadow: 0 18px 44px -20px rgba(2, 8, 23, .65);
    color: #fff;
}
@media (min-width: 900px) { .rz-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.rz-hero-label {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    font-size: .82rem; font-weight: 700; color: #c9a24b; letter-spacing: .02em;
}
.rz-hero-figure {
    margin-top: .55rem;
    font-size: clamp(2.1rem, 4.4vw, 3.05rem); font-weight: 800;
    line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.rz-hero-figure .rz-cur { font-size: .4em; font-weight: 700; color: #9fb0c9; margin-inline-start: .35rem; }
.rz-hero-sub { margin-top: .5rem; font-size: .85rem; color: #9fb0c9; }
.rz-hero-meta { margin-top: 1rem; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.rz-hero-meta dt { font-size: .7rem; color: #8fa3c0; letter-spacing: .04em; }
.rz-hero-meta dd { margin: .2rem 0 0; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.rz-live {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .2rem .6rem; border-radius: 999px;
    background: rgba(201, 162, 75, .18); color: #c9a24b;
    font-size: .68rem; font-weight: 800;
}
.rz-live-dot { position: relative; width: .45rem; height: .45rem; display: inline-block; }
.rz-live-dot i, .rz-live-dot b { position: absolute; inset: 0; border-radius: 999px; background: #c9a24b; display: block; }
.rz-live-dot i { animation: rz-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes rz-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

.rz-trend { background: rgba(255, 255, 255, .05); border-radius: .9rem; padding: .85rem 1rem 1rem; }
.rz-trend-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
    font-size: .72rem; color: #9fb0c9; margin-bottom: .5rem;
}
.rz-trend svg { display: block; width: 100%; height: 5.6rem; }

/* ── KPI cards ──────────────────────────────────────────────────────────── */
.rz-kpis { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.rz-kpi {
    position: relative; overflow: hidden;
    padding: 1rem 1.1rem; border-radius: .9rem;
    background: #fff; border: 1px solid var(--rz-line, #e5e9f0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .14s ease, box-shadow .14s ease;
}
.dark .rz-kpi { background: #0f172a; border-color: rgba(255, 255, 255, .08); }
.rz-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .35); }
.rz-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.rz-kpi-label { font-size: .76rem; font-weight: 600; color: var(--rz-muted, #5a6b84); }
.rz-kpi-ic {
    width: 1.95rem; height: 1.95rem; border-radius: .55rem; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
    background: rgba(201, 162, 75, .14); color: #a8842f;
}
.dark .rz-kpi-ic { color: #d9b566; }
.rz-kpi-value {
    margin-top: .55rem; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: #14243d;
}
.dark .rz-kpi-value { color: #f1f5f9; }
.rz-kpi-value .rz-cur { font-size: .52em; font-weight: 700; color: var(--rz-muted, #5a6b84); margin-inline-start: .25rem; }
.rz-kpi-foot { margin-top: .2rem; font-size: .72rem; color: var(--rz-muted, #5a6b84); }
.rz-kpi.is-warn { background: rgba(217, 119, 6, .07); border-color: rgba(217, 119, 6, .28); }
.rz-kpi.is-warn .rz-kpi-ic { background: rgba(217, 119, 6, .16); color: #b45309; }
.rz-kpi.is-warn .rz-kpi-value { color: #b45309; }
.dark .rz-kpi.is-warn .rz-kpi-value { color: #fbbf24; }

/* ── Panels + columns ───────────────────────────────────────────────────── */
.rz-cols { display: grid; gap: 1.15rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .rz-cols.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rz-panel {
    background: #fff; border: 1px solid var(--rz-line, #e5e9f0);
    border-radius: 1rem; padding: 1.15rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.dark .rz-panel { background: #0f172a; border-color: rgba(255, 255, 255, .08); }
.rz-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.rz-panel-title { font-size: 1rem; font-weight: 700; color: #14243d; }
.dark .rz-panel-title { color: #f1f5f9; }
.rz-panel-sub { font-size: .74rem; color: var(--rz-muted, #5a6b84); }

/* ── Pipeline rail ──────────────────────────────────────────────────────── */
.rz-pipe { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.rz-pipe-step {
    padding: .95rem 1rem; border-radius: .8rem;
    background: var(--rz-sand, #f7f5f0); border: 1px solid var(--rz-line, #e5e9f0);
}
.dark .rz-pipe-step { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.rz-pipe-n { font-size: 1.8rem; font-weight: 800; line-height: 1; color: #0b1f3a; font-variant-numeric: tabular-nums; }
.dark .rz-pipe-n { color: #e2e8f0; }
.rz-pipe-l { margin-top: .35rem; font-size: .8rem; font-weight: 600; color: var(--rz-muted, #5a6b84); }
.rz-pipe-bar { margin-top: .65rem; height: .3rem; border-radius: 999px; background: var(--rz-line, #e5e9f0); overflow: hidden; }
.rz-pipe-bar > span { display: block; height: 100%; border-radius: 999px; background: #0b1f3a; }
.rz-pipe-step.is-active { border-color: #c9a24b; background: rgba(201, 162, 75, .12); }
.rz-pipe-step.is-active .rz-pipe-n { color: #a8842f; }
.dark .rz-pipe-step.is-active .rz-pipe-n { color: #d9b566; }
.rz-pipe-step.is-active .rz-pipe-bar > span { background: #c9a24b; }

/* ── Ranked bar list ────────────────────────────────────────────────────── */
.rz-rank { display: flex; flex-direction: column; gap: .85rem; }
.rz-rank-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.rz-rank-name { font-size: .86rem; font-weight: 600; color: #14243d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .rz-rank-name { color: #e2e8f0; }
.rz-rank-val { font-size: .84rem; font-weight: 700; color: #0b1f3a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dark .rz-rank-val { color: #cbd5e1; }
.rz-rank-bar { margin-top: .3rem; height: .5rem; border-radius: 999px; background: var(--rz-line, #e5e9f0); overflow: hidden; }
.rz-rank-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0b1f3a, #c9a24b); }

/* ── Lists ──────────────────────────────────────────────────────────────── */
.rz-list { display: flex; flex-direction: column; }
.rz-list-item { display: flex; align-items: center; gap: .8rem; padding: .68rem 0; border-bottom: 1px solid var(--rz-line, #e5e9f0); }
.rz-list-item:last-child { border-bottom: 0; }
.rz-list-main { min-width: 0; flex: 1 1 auto; }
.rz-list-title { font-size: .85rem; font-weight: 600; color: #14243d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .rz-list-title { color: #e2e8f0; }
.rz-list-sub { font-size: .72rem; color: var(--rz-muted, #5a6b84); margin-top: .1rem; }
.rz-pill { flex: 0 0 auto; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rz-pill.is-danger { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.rz-pill.is-warn { background: rgba(217, 119, 6, .14); color: #b45309; }
.rz-pill.is-ok { background: rgba(22, 163, 74, .12); color: #15803d; }
.rz-dot-ic {
    flex: 0 0 auto; width: 1.95rem; height: 1.95rem; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; font-size: .9rem;
    background: var(--rz-sand, #f7f5f0); color: #0b1f3a;
}
.dark .rz-dot-ic { background: rgba(255, 255, 255, .06); color: #cbd5e1; }

.rz-pulse-empty {
    padding: 1.7rem 1rem; text-align: center; font-size: .86rem;
    color: var(--rz-muted, #5a6b84); background: var(--rz-sand, #f7f5f0); border-radius: .8rem;
}
.dark .rz-pulse-empty { background: rgba(255, 255, 255, .03); }

/* ═══════════════════════════════════════════════════════════════════════════
   DEPTH INSIDE THE WORKING SCREENS — quotations, orders, invoices, deliveries.
   These are the pages employees live in; they must not look like a default
   admin panel.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Document header identity: number reads as the document's name */
.fi-in-text .fi-in-text-item-label { font-weight: 600; }

/* Money + document numbers: tabular so columns line up down a table */
.fi-ta-text-item-label,
.fi-ta-record .fi-ta-text,
.fi-in-text-item-label { font-variant-numeric: tabular-nums; }

/* Infolist sections: quieter dividers, stronger headings */
.fi-section-header-heading { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.fi-section-header-description { font-size: .78rem; }

/* Repeatable line-item rows (quotation/order/invoice lines) read as a table */
.fi-in-repeatable-item {
    border-radius: .7rem !important;
    border-color: var(--rz-line, #e5e9f0) !important;
    transition: background-color .12s ease;
}
.fi-in-repeatable-item:hover { background: rgba(201, 162, 75, .05); }
.dark .fi-in-repeatable-item:hover { background: rgba(201, 162, 75, .07); }

/* Primary action on a document page: unmistakable */
.fi-header-actions .fi-ac-btn-action:first-child .fi-btn-color-primary,
.fi-header-actions .fi-btn-color-primary {
    box-shadow: 0 6px 16px -8px rgba(234, 88, 12, .8);
}

/* Empty states never read as a bare "no records" */
.fi-ta-empty-state-heading { font-weight: 700; }

/* Badges/chips: consistent weight everywhere */
.fi-badge { font-weight: 700; letter-spacing: .01em; }

/* ═══════════════════════════════════════════════════════════════════════════
   INSIGHT BAND — the header strip above Sales Orders / Quotations lists.
   Hand-written (no Tailwind build in this project — see file header).
   ═══════════════════════════════════════════════════════════════════════════ */

.rz-band { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }

.rz-band-card {
    position: relative; overflow: hidden;
    padding: .95rem 1.05rem; border-radius: .85rem;
    background: #fff; border: 1px solid var(--rz-line, #e5e9f0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.dark .rz-band-card { background: #0f172a; border-color: rgba(255, 255, 255, .08); }
.rz-band-card:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .35); }

.rz-band-card.is-hero {
    background: radial-gradient(24rem 12rem at 88% -40%, rgba(201, 162, 75, .26), transparent 62%),
                linear-gradient(135deg, #0b1f3a 0%, #16294a 100%);
    border-color: transparent; color: #fff;
}
.rz-band-card.is-hero .rz-band-label { color: #c9a24b; }
.rz-band-card.is-hero .rz-band-value { color: #fff; }
.rz-band-card.is-hero .rz-band-foot { color: #9fb0c9; }

.rz-band-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.rz-band-label { font-size: .74rem; font-weight: 700; color: var(--rz-muted, #5a6b84); letter-spacing: .02em; }
.rz-band-ic {
    width: 1.8rem; height: 1.8rem; border-radius: .5rem; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: .88rem;
    background: rgba(201, 162, 75, .14); color: #a8842f;
}
.rz-band-card.is-hero .rz-band-ic { background: rgba(255, 255, 255, .12); color: #e7c982; }
.rz-band-value {
    margin-top: .45rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: #14243d; line-height: 1.1;
}
.dark .rz-band-value { color: #f1f5f9; }
.rz-band-value .rz-cur { font-size: .5em; font-weight: 700; opacity: .65; margin-inline-start: .25rem; }
.rz-band-foot { margin-top: .25rem; font-size: .73rem; color: var(--rz-muted, #5a6b84); }

.rz-band-card.is-alert { border-color: rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .05); }
.rz-band-card.is-alert .rz-band-ic { background: rgba(220, 38, 38, .14); color: #b91c1c; }
.rz-band-card.is-alert .rz-band-value { color: #b91c1c; }
.dark .rz-band-card.is-alert .rz-band-value { color: #fca5a5; }
.rz-band-card.is-good { border-color: rgba(22, 163, 74, .3); background: rgba(22, 163, 74, .05); }
.rz-band-card.is-good .rz-band-ic { background: rgba(22, 163, 74, .14); color: #15803d; }

/* Mini distribution bar inside a band card (stage / status split) */
.rz-band-split { display: flex; height: .38rem; border-radius: 999px; overflow: hidden; margin-top: .6rem; background: var(--rz-line, #e5e9f0); }
.rz-band-split > span { display: block; height: 100%; }
.rz-band-legend { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .5rem; }
.rz-band-legend span { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; color: var(--rz-muted, #5a6b84); }
.rz-band-legend i { width: .5rem; height: .5rem; border-radius: 999px; display: inline-block; }