/* ─────────────────────────────────────────────────────────────────────────
   Al Razana Commercial Design System — tokens + shared component classes.
   Registered as a Filament asset; every commercial component uses these
   classes so the platform feels like ONE product. Extend, never fork.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --rz-navy: #0b1f3a;
    --rz-ink: #14243d;
    --rz-gold: #c9a24b;
    --rz-gold-soft: rgba(201, 162, 75, 0.12);
    --rz-sand: #f7f5f0;
    --rz-muted: #5a6b84;
    --rz-line: #e5e9f0;
    --rz-radius: 12px;
    --rz-success: #16a34a;
    --rz-info: #2563eb;
    --rz-warn: #d97706;
    --rz-danger: #dc2626;
}

.dark {
    --rz-line: rgba(255, 255, 255, 0.08);
    --rz-muted: #94a3b8;
    --rz-sand: rgba(255, 255, 255, 0.03);
    --rz-gold-soft: rgba(201, 162, 75, 0.16);
}

/* ── Document progress steps ─────────────────────────────────────────── */
.rz-progress { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.rz-progress .rz-step { display: flex; align-items: center; gap: .45rem; }
.rz-progress .rz-dot {
    width: 1.6rem; height: 1.6rem; border-radius: 999px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700;
    background: var(--rz-line); color: var(--rz-muted);
    border: 2px solid transparent;
}
.rz-progress .rz-step.done .rz-dot { background: var(--rz-success); color: #fff; }
.rz-progress .rz-step.current .rz-dot {
    background: var(--rz-gold-soft); color: var(--rz-gold);
    border-color: var(--rz-gold);
}
.rz-progress .rz-step.void .rz-dot { background: var(--rz-danger); color: #fff; }
.rz-progress .rz-label { font-size: .8rem; font-weight: 600; color: var(--rz-muted); white-space: nowrap; }
.rz-progress .rz-step.current .rz-label { color: var(--rz-gold); }
.rz-progress .rz-step.done .rz-label { color: var(--rz-success); }
.rz-progress .rz-step.void .rz-label { color: var(--rz-danger); }
.rz-progress .rz-bar {
    height: 2px; width: 2.2rem; margin: 0 .5rem; border-radius: 2px;
    background: var(--rz-line); flex: 0 0 auto;
}
.rz-progress .rz-bar.done { background: var(--rz-success); }
@media (max-width: 640px) { .rz-progress .rz-bar { width: 1rem; margin: 0 .3rem; } }

/* ── Next action banner ──────────────────────────────────────────────── */
.rz-next {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    border: 1px solid var(--rz-gold); border-radius: var(--rz-radius);
    background: var(--rz-gold-soft); padding: .7rem 1rem;
}
.rz-next .rz-next-icon { color: var(--rz-gold); flex: 0 0 auto; width: 1.3rem; height: 1.3rem; }
.rz-next .rz-next-text { font-weight: 600; font-size: .875rem; }

/* ── Related document cards ──────────────────────────────────────────── */
.rz-related-grid {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.rz-related-card {
    display: flex; align-items: center; gap: .65rem;
    border: 1px solid var(--rz-line); border-radius: var(--rz-radius);
    padding: .65rem .8rem; text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
    background: rgba(255, 255, 255, 0.4);
}
.dark .rz-related-card { background: rgba(255, 255, 255, 0.02); }
.rz-related-card:hover { border-color: var(--rz-gold); transform: translateY(-1px); }
.rz-related-card .rz-rc-icon {
    width: 2.1rem; height: 2.1rem; border-radius: 10px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--rz-gold-soft); color: var(--rz-gold);
}
.rz-related-card .rz-rc-icon svg { width: 1.15rem; height: 1.15rem; }
.rz-related-card .rz-rc-body { min-width: 0; }
.rz-related-card .rz-rc-title {
    font-weight: 700; font-size: .82rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.rz-related-card .rz-rc-sub { font-size: .74rem; color: var(--rz-muted); }

/* ── Status chip (single palette everywhere) ─────────────────────────── */
.rz-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    border-radius: 999px; padding: .1rem .6rem;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.rz-chip--gray { background: var(--rz-line); color: var(--rz-muted); }
.rz-chip--success { background: rgba(22, 163, 74, .12); color: var(--rz-success); }
.rz-chip--info { background: rgba(37, 99, 235, .12); color: var(--rz-info); }
.rz-chip--warning { background: rgba(217, 119, 6, .12); color: var(--rz-warn); }
.rz-chip--danger { background: rgba(220, 38, 38, .12); color: var(--rz-danger); }
.rz-chip--gold { background: var(--rz-gold-soft); color: var(--rz-gold); }

/* ── Action center (attention queues) ────────────────────────────────── */
.rz-attn { display: flex; flex-direction: column; gap: .35rem; }
.rz-attn-row {
    display: flex; align-items: center; justify-content: space-between; gap: .7rem;
    border: 1px solid var(--rz-line); border-radius: 10px;
    padding: .5rem .75rem; text-decoration: none;
    transition: border-color .15s ease;
}
.rz-attn-row:hover { border-color: var(--rz-gold); }
.rz-attn-row .rz-attn-main { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.rz-attn-row .rz-attn-title {
    font-size: .82rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rz-attn-row .rz-attn-sub { font-size: .72rem; color: var(--rz-muted); }
.rz-attn-count {
    min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rz-gold-soft); color: var(--rz-gold);
    font-size: .74rem; font-weight: 800;
}

/* ── Activity timeline ───────────────────────────────────────────────── */
.rz-timeline { display: flex; flex-direction: column; gap: 0; }
.rz-tl-item { display: flex; gap: .7rem; position: relative; padding-bottom: .9rem; }
.rz-tl-item:last-child { padding-bottom: 0; }
.rz-tl-item::before {
    content: ''; position: absolute; top: 1rem; bottom: 0;
    inset-inline-start: .38rem; width: 2px; background: var(--rz-line);
}
.rz-tl-item:last-child::before { display: none; }
.rz-tl-dot {
    width: .8rem; height: .8rem; border-radius: 999px; margin-top: .25rem;
    flex: 0 0 auto; background: var(--rz-gold); position: relative; z-index: 1;
    box-shadow: 0 0 0 3px var(--rz-gold-soft);
}
.rz-tl-dot--success { background: var(--rz-success); box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.rz-tl-dot--danger { background: var(--rz-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.rz-tl-dot--info { background: var(--rz-info); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.rz-tl-body { min-width: 0; }
.rz-tl-title { font-size: .82rem; font-weight: 600; }
.rz-tl-meta { font-size: .72rem; color: var(--rz-muted); }

/* ── Empty state (always actionable) ─────────────────────────────────── */
.rz-empty {
    text-align: center; padding: 1.4rem .8rem;
    border: 1px dashed var(--rz-line); border-radius: var(--rz-radius);
    color: var(--rz-muted); font-size: .82rem;
}