/* /Components/app/accounting/Accounting.razor.rz.scp.css */
/* ============================================================
   Accounting — iCRM
   ============================================================ */

.ac-page[b-96t6lckv8g] {
    padding: var(--space-6) var(--space-8);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.ac-header[b-96t6lckv8g] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    flex-wrap: wrap;
}

.ac-header-left h1[b-96t6lckv8g] {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.ac-vitals[b-96t6lckv8g] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
    flex-wrap: wrap;
}

.ac-vital-num[b-96t6lckv8g] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.ac-vital--blue[b-96t6lckv8g]   { color: #2563eb; }
.ac-vital--purple[b-96t6lckv8g] { color: #7c3aed; }
.ac-vital--green[b-96t6lckv8g]  { color: #059669; }
.ac-vital--red[b-96t6lckv8g]    { color: #dc2626; }

.ac-vital-lbl[b-96t6lckv8g] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.38;
    margin-left: 5px;
    margin-right: 14px;
}

.ac-vital-rule[b-96t6lckv8g] {
    width: 1px;
    height: 18px;
    background: rgba(128,128,128,0.2);
    margin-right: 14px;
    align-self: center;
    display: inline-block;
    vertical-align: middle;
}

/* ── Tabs ────────────────────────────────────────────────── */
.ac-tabs[b-96t6lckv8g] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
    align-self: flex-start;
}

.ac-tab[b-96t6lckv8g] {
    padding: 7px 16px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.14s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ac-tab:hover[b-96t6lckv8g] { color: var(--mud-palette-text-primary); }

.ac-tab.active[b-96t6lckv8g] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.ac-tab-badge[b-96t6lckv8g] {
    font-size: 0.58rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 20px;
    line-height: 1.4;
}

.ac-tab-badge--warn[b-96t6lckv8g] {
    background: #f59e0b;
    color: #fff;
}

.ac-tab-badge--error[b-96t6lckv8g] {
    background: #ef4444;
    color: #fff;
}

/* ── Section ─────────────────────────────────────────────── */
.ac-section[b-96t6lckv8g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.ac-toolbar[b-96t6lckv8g] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ac-toolbar-spacer[b-96t6lckv8g] { flex: 1; }

.ac-toolbar-label[b-96t6lckv8g] {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.6;
}

[b-96t6lckv8g] .ac-search { width: 220px; }

/* ── Alert ───────────────────────────────────────────────── */
.ac-alert[b-96t6lckv8g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.ac-alert--warn[b-96t6lckv8g] {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    color: #f59e0b;
}

/* ── Journal table ───────────────────────────────────────── */
.ac-table-wrap[b-96t6lckv8g] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
}

.ac-table-head[b-96t6lckv8g],
.ac-table-row[b-96t6lckv8g],
.ac-table-foot[b-96t6lckv8g] {
    display: grid;
    grid-template-columns: 110px 120px 90px 1fr 110px 110px 80px 48px;
    padding: 10px 16px;
    align-items: center;
}

.ac-table-head[b-96t6lckv8g] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.ac-table-row[b-96t6lckv8g] {
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.82rem;
    transition: background 0.12s;
}

.ac-table-row:last-child[b-96t6lckv8g] { border-bottom: none; }
.ac-table-row:hover[b-96t6lckv8g] { background: rgba(128,128,128,0.025); }

.ac-table-row--draft[b-96t6lckv8g] {
    opacity: 0.5;
    font-style: italic;
}

.ac-table-foot[b-96t6lckv8g] {
    border-top: 2px solid rgba(128,128,128,0.15);
    background: rgba(128,128,128,0.03);
}

.ac-foot-label[b-96t6lckv8g] {
    font-weight: 700;
    font-size: 0.72rem;
    opacity: 0.5;
    text-align: right;
}

.ac-foot-val[b-96t6lckv8g] { font-weight: 700; }

/* ── Cell helpers ────────────────────────────────────────── */
.ac-cell-mono[b-96t6lckv8g] {
    font-family: monospace;
    font-size: 0.8rem;
}

.ac-cell-ref[b-96t6lckv8g] {
    font-weight: 600;
    opacity: 0.55;
    font-size: 0.78rem;
}

.ac-cell-desc[b-96t6lckv8g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-cell-bold[b-96t6lckv8g] { font-weight: 600; }
.ac-cell-sub[b-96t6lckv8g]  { opacity: 0.45; font-size: 0.78rem; }

.ac-col-right[b-96t6lckv8g] { text-align: right; }

.ac-cell-actions[b-96t6lckv8g] {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

/* ── Chips / badges ──────────────────────────────────────── */
.ac-chip[b-96t6lckv8g] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.ac-chip--sale[b-96t6lckv8g]     { background: rgba(37,99,235,0.12);  color: #60a5fa; }
.ac-chip--purchase[b-96t6lckv8g] { background: rgba(245,158,11,0.12); color: #fbbf24; }
.ac-chip--bank[b-96t6lckv8g]     { background: rgba(5,150,105,0.12);  color: #34d399; }
.ac-chip--general[b-96t6lckv8g]  { background: rgba(128,128,128,0.1); color: rgba(255,255,255,0.5); }
.ac-chip--asset[b-96t6lckv8g]     { background: rgba(37,99,235,0.12);  color: #60a5fa; }
.ac-chip--liability[b-96t6lckv8g] { background: rgba(220,38,38,0.12);  color: #f87171; }
.ac-chip--revenue[b-96t6lckv8g]   { background: rgba(5,150,105,0.12);  color: #34d399; }
.ac-chip--expense[b-96t6lckv8g]   { background: rgba(245,158,11,0.12); color: #fbbf24; }
.ac-chip--rate[b-96t6lckv8g]      { background: rgba(124,58,237,0.12); color: #a78bfa; }
.ac-chip--matched[b-96t6lckv8g]   { background: rgba(5,150,105,0.12);  color: #34d399; }

/* ── Status pills ────────────────────────────────────────── */
.ac-status[b-96t6lckv8g] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.ac-status--posted[b-96t6lckv8g]  { border-color: rgba(5,150,105,0.3);  color: #34d399; }
.ac-status--draft[b-96t6lckv8g]   { border-color: rgba(245,158,11,0.3); color: #fbbf24; }
.ac-status--active[b-96t6lckv8g]  { border-color: rgba(5,150,105,0.3);  color: #34d399; }
.ac-status--inactive[b-96t6lckv8g] { border-color: rgba(128,128,128,0.2); color: rgba(128,128,128,0.5); }
.ac-status--output[b-96t6lckv8g]  { border-color: rgba(220,38,38,0.3);  color: #f87171; }
.ac-status--input[b-96t6lckv8g]   { border-color: rgba(5,150,105,0.3);  color: #34d399; }

/* ── Empty state ─────────────────────────────────────────── */
.ac-empty[b-96t6lckv8g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px;
    font-size: 0.82rem;
    opacity: 0.5;
}

/* ── Card ────────────────────────────────────────────────── */
.ac-card[b-96t6lckv8g] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
}

.ac-card-head[b-96t6lckv8g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.ac-card-title[b-96t6lckv8g] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.4;
}

.ac-card-badge[b-96t6lckv8g] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    opacity: 0.55;
}

.ac-card-badge--green[b-96t6lckv8g] {
    background: rgba(5,150,105,0.1);
    border-color: rgba(5,150,105,0.25);
    color: #34d399;
    opacity: 1;
}

/* ── Ledger grid ─────────────────────────────────────────── */
.ac-ledger-grid[b-96t6lckv8g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.ac-ledger-card[b-96t6lckv8g] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 14px 16px;
    transition: transform 0.12s, box-shadow 0.12s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ac-ledger-card:hover[b-96t6lckv8g] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.ac-ledger-head[b-96t6lckv8g] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ac-ledger-code[b-96t6lckv8g] {
    font-family: monospace;
    font-size: 0.7rem;
    opacity: 0.4;
    font-weight: 700;
}

.ac-ledger-name[b-96t6lckv8g] {
    font-size: 0.82rem;
    font-weight: 600;
    flex: 1;
}

.ac-ledger-balance[b-96t6lckv8g] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 4px 0;
}

.ac-ledger-amount[b-96t6lckv8g] {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ac-ledger-dir[b-96t6lckv8g] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 6px;
}

.ac-ledger-dir--dr[b-96t6lckv8g] { background: rgba(37,99,235,0.12); color: #60a5fa; }
.ac-ledger-dir--cr[b-96t6lckv8g] { background: rgba(220,38,38,0.12); color: #f87171; }

.ac-ledger-divider[b-96t6lckv8g] {
    height: 1px;
    background: var(--mud-palette-divider);
    margin: 4px 0;
}

.ac-ledger-line[b-96t6lckv8g] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    margin-bottom: 3px;
}

.ac-ledger-line-date[b-96t6lckv8g] {
    font-family: monospace;
    font-size: 0.68rem;
    opacity: 0.4;
    min-width: 32px;
}

.ac-ledger-line-desc[b-96t6lckv8g] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-ledger-line-amount[b-96t6lckv8g] {
    font-family: monospace;
    font-weight: 600;
}

.ac-ledger-more[b-96t6lckv8g] {
    font-size: 0.7rem;
    opacity: 0.35;
    margin-top: 2px;
}

/* ── Link button ─────────────────────────────────────────── */
.ac-link-btn[b-96t6lckv8g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 0;
    border: none;
    background: none;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-primary);
    transition: opacity 0.12s;
}

.ac-link-btn:hover[b-96t6lckv8g] { opacity: 0.7; }

/* ── Tax Engine ──────────────────────────────────────────── */
.ac-tax-cards[b-96t6lckv8g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.ac-tax-card[b-96t6lckv8g] {
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ac-tax-card--output[b-96t6lckv8g] {
    background: rgba(220,38,38,0.06);
    border-color: rgba(220,38,38,0.18);
}

.ac-tax-card--input[b-96t6lckv8g] {
    background: rgba(5,150,105,0.06);
    border-color: rgba(5,150,105,0.18);
}

.ac-tax-card-head[b-96t6lckv8g] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.ac-tax-card-label[b-96t6lckv8g] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
}

.ac-tax-card-value[b-96t6lckv8g] {
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ac-tax-card-sub[b-96t6lckv8g] {
    font-size: 0.7rem;
    opacity: 0.45;
}

.ac-tax-row[b-96t6lckv8g] {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 14px;
}

/* Rate breakdown table */
.ac-rate-head[b-96t6lckv8g],
.ac-rate-row[b-96t6lckv8g] {
    display: grid;
    grid-template-columns: 80px 1fr 130px 130px 90px;
    padding: 10px 16px;
    align-items: center;
}

.ac-rate-head[b-96t6lckv8g] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.ac-rate-row[b-96t6lckv8g] {
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.8rem;
    transition: background 0.12s;
}

.ac-rate-row:last-child[b-96t6lckv8g] { border-bottom: none; }
.ac-rate-row:hover[b-96t6lckv8g] { background: rgba(128,128,128,0.025); }

/* Tax rules table */
.ac-rules-head[b-96t6lckv8g],
.ac-rules-row[b-96t6lckv8g] {
    display: grid;
    grid-template-columns: 1fr 80px 80px 80px;
    padding: 10px 16px;
    align-items: center;
}

.ac-rules-head[b-96t6lckv8g] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.ac-rules-row[b-96t6lckv8g] {
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.8rem;
    transition: background 0.12s;
}

.ac-rules-row:last-child[b-96t6lckv8g] { border-bottom: none; }
.ac-rules-row:hover[b-96t6lckv8g] { background: rgba(128,128,128,0.025); }
.ac-rules-row--inactive[b-96t6lckv8g] { opacity: 0.4; }

/* ── Reconciliation ──────────────────────────────────────── */
.ac-recon-topbar[b-96t6lckv8g] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ac-recon-stat[b-96t6lckv8g] {
    font-size: 0.82rem;
    opacity: 0.6;
}

.ac-recon-progress[b-96t6lckv8g] {
    width: 200px;
    height: 6px;
    background: var(--mud-palette-divider);
    border-radius: 3px;
    overflow: hidden;
}

.ac-recon-fill[b-96t6lckv8g] {
    height: 100%;
    background: #059669;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.ac-recon-list[b-96t6lckv8g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ac-recon-row[b-96t6lckv8g] {
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    font-size: 0.82rem;
}

.ac-recon-row--matched[b-96t6lckv8g] {
    border-color: rgba(5,150,105,0.3);
    background: rgba(5,150,105,0.03);
}

.ac-recon-row--unmatched[b-96t6lckv8g] {
    border-color: rgba(217,119,6,0.25);
    background: rgba(217,119,6,0.03);
}

.ac-recon-left[b-96t6lckv8g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ac-recon-icon[b-96t6lckv8g] { text-align: center; }

.ac-recon-right[b-96t6lckv8g] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Action button ───────────────────────────────────────── */
.ac-action-btn[b-96t6lckv8g] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: all 0.12s;
    white-space: nowrap;
}

.ac-action-btn:hover[b-96t6lckv8g] {
    background: var(--mud-palette-primary);
    color: #fff;
    border-color: var(--mud-palette-primary);
}

.ac-action-btn--small[b-96t6lckv8g] {
    padding: 4px 10px;
    font-size: 0.7rem;
}

/* ── Reports ─────────────────────────────────────────────── */
.ac-report-row[b-96t6lckv8g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ac-report-body[b-96t6lckv8g] {
    padding: 0 16px 16px;
}

.ac-report-group-label[b-96t6lckv8g] {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.35;
    margin: 14px 0 8px;
}

.ac-report-line[b-96t6lckv8g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.82rem;
}

.ac-report-subtotal[b-96t6lckv8g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 4px;
    border-top: 2px solid rgba(128,128,128,0.15);
    margin-top: 6px;
    font-weight: 700;
    font-size: 0.85rem;
}

.ac-report-total[b-96t6lckv8g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 0;
    border-top: 2px solid rgba(128,128,128,0.2);
    margin-top: 6px;
    font-weight: 700;
    font-size: 0.95rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .ac-header[b-96t6lckv8g] { flex-direction: column; align-items: flex-start; }
    .ac-tax-cards[b-96t6lckv8g] { grid-template-columns: 1fr; }
    .ac-tax-row[b-96t6lckv8g] { grid-template-columns: 1fr; }
    .ac-report-row[b-96t6lckv8g] { grid-template-columns: 1fr; }
    .ac-table-head[b-96t6lckv8g],
    .ac-table-row[b-96t6lckv8g],
    .ac-table-foot[b-96t6lckv8g] { grid-template-columns: 90px 100px 75px 1fr 90px 90px 70px 40px; font-size: 0.75rem; }
}

@media (max-width: 600px) {
    .ac-page[b-96t6lckv8g] { padding: var(--space-4); }
    .ac-tabs[b-96t6lckv8g] { flex-wrap: wrap; }
    .ac-table-head[b-96t6lckv8g],
    .ac-table-row[b-96t6lckv8g],
    .ac-table-foot[b-96t6lckv8g] { grid-template-columns: 80px 90px 65px 1fr 80px 80px 60px 36px; padding: 8px 10px; }
    .ac-recon-row[b-96t6lckv8g] { grid-template-columns: 1fr; gap: 8px; }
}
/* /Components/app/auditLog/AuditLog.razor.rz.scp.css */
/* ============================================================
   Audit Log — iCRM  (system-wide activity tracking)
   ============================================================ */

.al-page[b-5umo0pecnw] {
    padding: var(--space-6) var(--space-8);
    min-height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.al-header[b-5umo0pecnw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    flex-wrap: wrap;
}

.al-header-left h1[b-5umo0pecnw] {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.al-vitals[b-5umo0pecnw] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
    flex-wrap: wrap;
}

.al-vital-num[b-5umo0pecnw] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.al-vital--blue[b-5umo0pecnw]   { color: #2563eb; }
.al-vital--green[b-5umo0pecnw]  { color: #059669; }
.al-vital--amber[b-5umo0pecnw]  { color: #d97706; }
.al-vital--red[b-5umo0pecnw]    { color: #dc2626; }

.al-vital-lbl[b-5umo0pecnw] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.38;
    margin-left: 5px;
    margin-right: 14px;
}

.al-vital-rule[b-5umo0pecnw] {
    width: 1px;
    height: 18px;
    background: rgba(128,128,128,0.2);
    margin-right: 14px;
    align-self: center;
    display: inline-block;
    vertical-align: middle;
}


/* ── Tabs ────────────────────────────────────────────────── */
.al-header-right[b-5umo0pecnw] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.al-tabs[b-5umo0pecnw] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
}

.al-tab[b-5umo0pecnw] {
    padding: 7px 16px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.14s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.al-tab:hover[b-5umo0pecnw] { color: var(--mud-palette-text-primary); }

.al-tab.active[b-5umo0pecnw] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}


/* ── Toolbar ─────────────────────────────────────────────── */
.al-toolbar[b-5umo0pecnw] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.al-toolbar-spacer[b-5umo0pecnw] { flex: 1; }

[b-5umo0pecnw] .al-search { width: 280px; }
.al-filter[b-5umo0pecnw] { width: 170px; }

.al-result-count[b-5umo0pecnw] {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}


/* ── Table ───────────────────────────────────────────────── */
.al-table-wrap[b-5umo0pecnw] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
}

.al-table-head[b-5umo0pecnw],
.al-row[b-5umo0pecnw] {
    display: grid;
    grid-template-columns: 130px 90px 180px 140px 110px 1fr 40px;
    padding: 10px 16px;
    align-items: center;
    min-width: 900px;
}

.al-table-head[b-5umo0pecnw] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.al-row[b-5umo0pecnw] {
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s;
}

.al-row:hover[b-5umo0pecnw] { background: rgba(128,128,128,0.025); }
.al-row:last-child[b-5umo0pecnw] { border-bottom: none; }

.al-row--expanded[b-5umo0pecnw] {
    background: rgba(var(--mud-palette-primary-rgb), 0.03);
    border-bottom-color: transparent;
}

/* Severity row tinting */
.al-row--critical[b-5umo0pecnw] { border-left: 3px solid #ef4444; }
.al-row--warning[b-5umo0pecnw]  { border-left: 3px solid #f59e0b; }
.al-row--info[b-5umo0pecnw]     { border-left: 3px solid transparent; }

.al-cell-mono[b-5umo0pecnw] {
    font-family: monospace;
    font-size: 0.72rem;
    opacity: 0.6;
}

.al-cell-truncate[b-5umo0pecnw] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}


/* ── User cell ───────────────────────────────────────────── */
.al-user-cell[b-5umo0pecnw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.al-user-avatar[b-5umo0pecnw] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.03em;
    color: #fff;
}

.al-avatar--master_admin[b-5umo0pecnw] { background: #dc2626; }
.al-avatar--admin[b-5umo0pecnw]        { background: #d97706; }
.al-avatar--user[b-5umo0pecnw]         { background: #059669; }

.al-user-info[b-5umo0pecnw] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.al-user-name[b-5umo0pecnw] {
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al-user-role[b-5umo0pecnw] {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.35;
}


/* ── Severity badge ──────────────────────────────────────── */
.al-severity[b-5umo0pecnw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

.al-severity--info[b-5umo0pecnw]     { background: rgba(59,130,246,0.1);  color: #2563eb; }
.al-severity--warning[b-5umo0pecnw]  { background: rgba(245,158,11,0.12); color: #d97706; }
.al-severity--critical[b-5umo0pecnw] { background: rgba(239,68,68,0.12);  color: #dc2626; }


/* ── Action chip ─────────────────────────────────────────── */
.al-action-chip[b-5umo0pecnw] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: capitalize;
}

.al-action--create[b-5umo0pecnw]  { background: rgba(16,185,129,0.1);  color: #059669; }
.al-action--update[b-5umo0pecnw]  { background: rgba(59,130,246,0.1);  color: #2563eb; }
.al-action--delete[b-5umo0pecnw]  { background: rgba(239,68,68,0.1);   color: #dc2626; }
.al-action--login[b-5umo0pecnw]   { background: rgba(139,92,246,0.1);  color: #7c3aed; }
.al-action--logout[b-5umo0pecnw]  { background: rgba(107,114,128,0.1); color: #6b7280; }
.al-action--decommission[b-5umo0pecnw] { background: rgba(245,158,11,0.1); color: #d97706; }
.al-action--reactivate[b-5umo0pecnw]   { background: rgba(16,185,129,0.1); color: #059669; }
.al-action--install[b-5umo0pecnw]      { background: rgba(99,102,241,0.1); color: #6366f1; }
.al-action--uninstall[b-5umo0pecnw]    { background: rgba(107,114,128,0.1); color: #6b7280; }
.al-action--export[b-5umo0pecnw]       { background: rgba(14,165,233,0.1); color: #0ea5e9; }
.al-action--assign[b-5umo0pecnw]       { background: rgba(217,119,6,0.1);  color: #d97706; }


/* ── Category chip ───────────────────────────────────────── */
.al-category-chip[b-5umo0pecnw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0.5;
    white-space: nowrap;
}


/* ── Expand panel ────────────────────────────────────────── */
.al-expand-panel[b-5umo0pecnw] {
    padding: 16px 20px 20px;
    background: rgba(128,128,128,0.02);
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.al-expand-grid[b-5umo0pecnw] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 14px 24px;
}

.al-expand-item[b-5umo0pecnw] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.al-expand-item--full[b-5umo0pecnw] {
    grid-column: 1 / -1;
}

.al-expand-lbl[b-5umo0pecnw] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.3;
}

.al-expand-val[b-5umo0pecnw] {
    font-size: 0.78rem;
    font-weight: 500;
}


/* ── Changes diff ────────────────────────────────────────── */
.al-changes[b-5umo0pecnw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.al-change-row[b-5umo0pecnw] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(128,128,128,0.04);
}

.al-change-field[b-5umo0pecnw] {
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.5;
    min-width: 100px;
}

.al-change-old[b-5umo0pecnw] {
    font-family: monospace;
    font-size: 0.72rem;
    color: #dc2626;
    background: rgba(239,68,68,0.06);
    padding: 1px 6px;
    border-radius: 3px;
    text-decoration: line-through;
}

.al-change-new[b-5umo0pecnw] {
    font-family: monospace;
    font-size: 0.72rem;
    color: #059669;
    background: rgba(16,185,129,0.06);
    padding: 1px 6px;
    border-radius: 3px;
}


/* ── Empty state ─────────────────────────────────────────── */
.al-empty[b-5umo0pecnw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.35;
}


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .al-page[b-5umo0pecnw] {
        padding: var(--space-4);
    }

    .al-header[b-5umo0pecnw] {
        flex-direction: column;
        align-items: flex-start;
    }

    .al-toolbar[b-5umo0pecnw] {
        flex-direction: column;
        align-items: stretch;
    }

    [b-5umo0pecnw] .al-search { width: 100%; }
    .al-filter[b-5umo0pecnw] { width: 100%; }

    .al-expand-grid[b-5umo0pecnw] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .al-header-left h1[b-5umo0pecnw] { font-size: 1.3rem; }

    .al-vitals[b-5umo0pecnw] { display: none; }

    .al-tabs[b-5umo0pecnw] { overflow-x: auto; }

    .al-expand-grid[b-5umo0pecnw] {
        grid-template-columns: 1fr;
    }
}
/* /Components/app/booking/Bookings.razor.rz.scp.css */
/* ============================================
   Bookings — Dispatch Desk (email-client layout)
   ============================================ */

.bk-page[b-2bx34zojt7] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    padding: var(--space-5) var(--space-8) var(--space-4);
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    gap: var(--space-4);
}

.bk-loading[b-2bx34zojt7] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

/* ── Header ── */
.bk-header[b-2bx34zojt7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-4);
}

.bk-header-left h1[b-2bx34zojt7] {
    margin: 0 0 var(--space-2) 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.title-accent[b-2bx34zojt7] {
    display: inline-block;
    width: 4px;
    height: 1.6rem;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Vitals */
.bk-vitals[b-2bx34zojt7] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
}

.bk-vital[b-2bx34zojt7] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

    .bk-vital.pending[b-2bx34zojt7] {
        color: #f59e0b;
    }

    .bk-vital.contacted[b-2bx34zojt7] {
        color: #2563eb;
    }

    .bk-vital.converted[b-2bx34zojt7] {
        color: #10b981;
    }

    .bk-vital.cancelled[b-2bx34zojt7] {
        color: rgba(128,128,128,0.5);
    }

.bk-vital-lbl[b-2bx34zojt7] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.4;
    margin-left: 5px;
    margin-right: 14px;
}

.bk-vital-rule[b-2bx34zojt7] {
    width: 1px;
    height: 0.9rem;
    background: currentColor;
    opacity: 0.15;
    margin-right: 14px;
    align-self: center;
}

/* Status tab strip */
.bk-header-right[b-2bx34zojt7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bk-status-tabs[b-2bx34zojt7] {
    display: flex;
    background: rgba(128,128,128,0.08);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.bk-tab[b-2bx34zojt7] {
    background: transparent;
    border: none;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: 0.45;
    transition: all 0.15s ease;
    white-space: nowrap;
}

    .bk-tab:hover[b-2bx34zojt7] {
        opacity: 0.8;
        background: rgba(128,128,128,0.1);
    }

    .bk-tab.active[b-2bx34zojt7] {
        background: var(--mud-palette-surface);
        opacity: 1;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

.bk-tab--pending.active[b-2bx34zojt7] {
    color: #f59e0b;
}

.bk-tab--contacted.active[b-2bx34zojt7] {
    color: #2563eb;
}

.bk-tab--converted.active[b-2bx34zojt7] {
    color: #10b981;
}

.bk-tab--cancelled.active[b-2bx34zojt7] {
    color: #6b7280;
}

.bk-search[b-2bx34zojt7] {
    max-width: 200px;
}

/* ── Desk: two-column ── */
.bk-desk[b-2bx34zojt7] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--space-4);
    overflow: hidden;
}

/* ── Queue (left) ── */
.bk-queue[b-2bx34zojt7] {
    overflow-y: auto;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.1);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bk-queue-empty[b-2bx34zojt7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    opacity: 0.4;
    font-size: 0.8rem;
    padding: 3rem;
}

/* Queue row */
.bk-row[b-2bx34zojt7] {
    display: flex;
    align-items: stretch;
    gap: 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(128,128,128,0.07);
    transition: background 0.12s ease;
    position: relative;
}

    .bk-row:last-child[b-2bx34zojt7] {
        border-bottom: none;
    }

    .bk-row:hover[b-2bx34zojt7] {
        background: rgba(128,128,128,0.05);
    }

.bk-row--active[b-2bx34zojt7] {
    background: rgba(37,99,235,0.05) !important;
}

/* Left accent bar */
.bk-row-accent[b-2bx34zojt7] {
    width: 3px;
    flex-shrink: 0;
    border-radius: 0;
}

.bk-row:first-child .bk-row-accent[b-2bx34zojt7] {
    border-top-left-radius: 12px;
}

/* Status dot top-right */
.bk-row-status-dot[b-2bx34zojt7] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: flex-start;
    margin: 14px 12px 0 0;
}

.bk-row-body[b-2bx34zojt7] {
    flex: 1;
    padding: 11px 8px 11px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bk-row-top[b-2bx34zojt7] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
}

.bk-row-name[b-2bx34zojt7] {
    font-size: 0.83rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-row-age[b-2bx34zojt7] {
    font-size: 0.65rem;
    opacity: 0.35;
    font-weight: 600;
    flex-shrink: 0;
}

.bk-row-mid[b-2bx34zojt7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.bk-row-package[b-2bx34zojt7] {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bk-row-city[b-2bx34zojt7] {
    font-size: 0.68rem;
    opacity: 0.35;
    white-space: nowrap;
    flex-shrink: 0;
}

    .bk-row-city[b-2bx34zojt7]::before {
        content: '·';
        margin-right: 5px;
    }

.bk-row-preview[b-2bx34zojt7] {
    font-size: 0.7rem;
    opacity: 0.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    margin-top: 1px;
}

/* Status color tokens */
.bk-accent--pending[b-2bx34zojt7] {
    background: #f59e0b;
}

.bk-accent--contacted[b-2bx34zojt7] {
    background: #2563eb;
}

.bk-accent--converted[b-2bx34zojt7] {
    background: #10b981;
}

.bk-accent--cancelled[b-2bx34zojt7] {
    background: rgba(128,128,128,0.3);
}

/* ── Detail pane (right) ── */
.bk-detail[b-2bx34zojt7] {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bk-detail--empty[b-2bx34zojt7] {
    align-items: center;
    justify-content: center;
}

.bk-detail-placeholder[b-2bx34zojt7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    opacity: 0.3;
    font-size: 0.8rem;
}

/* Detail header */
.bk-detail-head[b-2bx34zojt7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid rgba(128,128,128,0.1);
    flex-shrink: 0;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.bk-detail-name[b-2bx34zojt7] {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.bk-detail-meta[b-2bx34zojt7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.bk-status-badge[b-2bx34zojt7] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 5px;
    color: #fff;
}

.bk-accent-bg--pending[b-2bx34zojt7] {
    background: #f59e0b;
}

.bk-accent-bg--contacted[b-2bx34zojt7] {
    background: #2563eb;
}

.bk-accent-bg--converted[b-2bx34zojt7] {
    background: #10b981;
}

.bk-accent-bg--cancelled[b-2bx34zojt7] {
    background: #9ca3af;
}

.bk-detail-time[b-2bx34zojt7] {
    font-size: 0.72rem;
    opacity: 0.4;
    font-weight: 500;
}

.bk-detail-actions[b-2bx34zojt7] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Detail body */
.bk-detail-body[b-2bx34zojt7] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.bk-detail-section-label[b-2bx34zojt7] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.35;
    margin-bottom: 0.5rem;
}

.bk-detail-package[b-2bx34zojt7] {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bk-detail-message[b-2bx34zojt7] {
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
    opacity: 0.75;
    padding: 1rem 1.25rem;
    background: rgba(128,128,128,0.05);
    border-left: 3px solid rgba(128,128,128,0.2);
    border-radius: 0 8px 8px 0;
}

.bk-detail-contact-grid[b-2bx34zojt7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bk-contact-item[b-2bx34zojt7] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .bk-contact-item .mud-icon-root[b-2bx34zojt7] {
        font-size: 1rem !important;
        opacity: 0.4;
        flex-shrink: 0;
    }

.bk-contact-val[b-2bx34zojt7] {
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    transition: color 0.15s;
}

a.bk-contact-val:hover[b-2bx34zojt7] {
    color: var(--mud-palette-primary);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .bk-desk[b-2bx34zojt7] {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 768px) {
    .bk-page[b-2bx34zojt7] {
        height: auto;
        overflow: visible;
        padding: var(--space-4);
    }

    .bk-desk[b-2bx34zojt7] {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .bk-queue[b-2bx34zojt7] {
        max-height: 50vh;
    }

    .bk-detail[b-2bx34zojt7] {
        min-height: 400px;
    }

    .bk-header[b-2bx34zojt7] {
        flex-direction: column;
        align-items: flex-start;
    }

    .bk-header-right[b-2bx34zojt7] {
        width: 100%;
        flex-wrap: wrap;
    }

    .bk-search[b-2bx34zojt7] {
        max-width: 100%;
        flex: 1;
    }
}
/* /Components/app/expenses/Expenses.razor.rz.scp.css */
/* ============================================================
   Expenses — iCRM
   ============================================================ */

.ex-page[b-49wtavfypl] {
    padding: var(--space-6) var(--space-8);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.ex-header[b-49wtavfypl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    flex-wrap: wrap;
}

.ex-header-left h1[b-49wtavfypl] {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.ex-vitals[b-49wtavfypl] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
    flex-wrap: wrap;
}

.ex-vital-num[b-49wtavfypl] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.ex-vital--blue[b-49wtavfypl]   { color: #2563eb; }
.ex-vital--purple[b-49wtavfypl] { color: #7c3aed; }
.ex-vital--green[b-49wtavfypl]  { color: #059669; }
.ex-vital--amber[b-49wtavfypl]  { color: #d97706; }
.ex-vital--red[b-49wtavfypl]    { color: #dc2626; }

.ex-vital-lbl[b-49wtavfypl] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.38;
    margin-left: 5px;
    margin-right: 14px;
}

.ex-vital-rule[b-49wtavfypl] {
    width: 1px;
    height: 18px;
    background: rgba(128,128,128,0.2);
    margin-right: 14px;
    align-self: center;
    display: inline-block;
    vertical-align: middle;
}

/* ── Tabs ────────────────────────────────────────────────── */
.ex-tabs[b-49wtavfypl] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
    align-self: flex-start;
}

.ex-tab[b-49wtavfypl] {
    padding: 7px 16px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.14s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ex-tab:hover[b-49wtavfypl] { color: var(--mud-palette-text-primary); }

.ex-tab.active[b-49wtavfypl] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.ex-tab-badge[b-49wtavfypl] {
    font-size: 0.56rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 20px;
    line-height: 1.4;
    background: #f59e0b;
    color: #fff;
}

/* ── Section / toolbar ───────────────────────────────────── */
.ex-section[b-49wtavfypl] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ex-toolbar[b-49wtavfypl] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ex-toolbar-spacer[b-49wtavfypl] { flex: 1; }

[b-49wtavfypl] .ex-search { width: 220px; }

/* ── Alert ───────────────────────────────────────────────── */
.ex-alert[b-49wtavfypl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.ex-alert--amber[b-49wtavfypl] {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    color: #f59e0b;
}

/* ── Action button ───────────────────────────────────────── */
.ex-action-btn[b-49wtavfypl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: all 0.12s;
    white-space: nowrap;
}

.ex-action-btn:hover[b-49wtavfypl] {
    background: var(--mud-palette-primary);
    color: #fff;
    border-color: var(--mud-palette-primary);
}

.ex-action-btn--primary[b-49wtavfypl] {
    background: var(--mud-palette-primary);
    color: #fff;
    border-color: var(--mud-palette-primary);
}

.ex-action-btn--primary:hover[b-49wtavfypl] { opacity: 0.85; }

/* ── Expense table ───────────────────────────────────────── */
.ex-table-wrap[b-49wtavfypl] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
}

.ex-table-head[b-49wtavfypl],
.ex-table-row[b-49wtavfypl],
.ex-table-foot[b-49wtavfypl] {
    display: grid;
    grid-template-columns: 105px 160px 1fr 110px 100px 80px 95px 70px;
    padding: 10px 16px;
    align-items: center;
    min-width: 850px;
}

.ex-table-head[b-49wtavfypl] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.ex-table-row[b-49wtavfypl] {
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.82rem;
    transition: background 0.12s;
}

.ex-table-row:last-child[b-49wtavfypl] { border-bottom: none; }
.ex-table-row:hover[b-49wtavfypl] { background: rgba(128,128,128,0.025); }
.ex-table-row--rejected[b-49wtavfypl] { opacity: 0.4; }

.ex-table-foot[b-49wtavfypl] {
    border-top: 2px solid rgba(128,128,128,0.15);
    background: rgba(128,128,128,0.03);
}

.ex-foot-label[b-49wtavfypl] { font-weight: 700; font-size: 0.72rem; opacity: 0.5; text-align: right; }
.ex-foot-val[b-49wtavfypl]   { font-weight: 700; }

/* ── Cell helpers ────────────────────────────────────────── */
.ex-cell-mono[b-49wtavfypl]  { font-family: monospace; font-size: 0.8rem; }
.ex-cell-bold[b-49wtavfypl]  { font-weight: 700; }
.ex-cell-sub[b-49wtavfypl]   { opacity: 0.45; font-size: 0.78rem; }
.ex-cell-desc[b-49wtavfypl]  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-col-right[b-49wtavfypl]  { text-align: right; }
.ex-cell-actions[b-49wtavfypl] { display: flex; gap: 2px; justify-content: flex-end; }

.ex-cell-employee[b-49wtavfypl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.8rem;
}

.ex-avatar[b-49wtavfypl] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.ex-avatar-sm[b-49wtavfypl] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.52rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    margin-right: 4px;
}

/* Receipt badge */
.ex-receipt-badge[b-49wtavfypl] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    color: #059669;
    opacity: 0.7;
}

/* ── Chips ───────────────────────────────────────────────── */
.ex-chip[b-49wtavfypl] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.ex-chip--travel[b-49wtavfypl]         { background: rgba(37,99,235,0.12);  color: #60a5fa; }
.ex-chip--meals[b-49wtavfypl]          { background: rgba(245,158,11,0.12); color: #fbbf24; }
.ex-chip--software[b-49wtavfypl]       { background: rgba(124,58,237,0.12); color: #a78bfa; }
.ex-chip--hardware[b-49wtavfypl]       { background: rgba(5,150,105,0.12);  color: #34d399; }
.ex-chip--office_supplies[b-49wtavfypl] { background: rgba(128,128,128,0.1); color: rgba(255,255,255,0.5); }
.ex-chip--parking[b-49wtavfypl]        { background: rgba(8,145,178,0.12);  color: #22d3ee; }
.ex-chip--telecom[b-49wtavfypl]        { background: rgba(236,72,153,0.12); color: #f472b6; }
.ex-chip--training[b-49wtavfypl]       { background: rgba(220,38,38,0.12);  color: #f87171; }

/* ── Status pills ────────────────────────────────────────── */
.ex-status[b-49wtavfypl] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    letter-spacing: 0.02em;
    line-height: 1.6;
    white-space: nowrap;
}

.ex-status--pending[b-49wtavfypl]    { border-color: rgba(245,158,11,0.3);  color: #fbbf24; }
.ex-status--approved[b-49wtavfypl]   { border-color: rgba(37,99,235,0.3);   color: #60a5fa; }
.ex-status--reimbursed[b-49wtavfypl] { border-color: rgba(5,150,105,0.3);   color: #34d399; }
.ex-status--rejected[b-49wtavfypl]   { border-color: rgba(220,38,38,0.3);   color: #f87171; }

/* ── Empty state ─────────────────────────────────────────── */
.ex-empty[b-49wtavfypl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px;
    font-size: 0.82rem;
    opacity: 0.5;
}

/* ── Card ────────────────────────────────────────────────── */
.ex-card[b-49wtavfypl] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
}

.ex-card-head[b-49wtavfypl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.ex-card-title[b-49wtavfypl] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.4;
}

.ex-card-badge[b-49wtavfypl] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    opacity: 0.55;
}

.ex-card-body[b-49wtavfypl] { padding: 14px 16px; }

/* ── KPI strip ───────────────────────────────────────────── */
.ex-kpi-strip[b-49wtavfypl] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.ex-kpi[b-49wtavfypl] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}

.ex-kpi-num[b-49wtavfypl] {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}

.ex-kpi-lbl[b-49wtavfypl] {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.35;
}

/* ── Analytics rows ──────────────────────────────────────── */
.ex-analytics-row[b-49wtavfypl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Bar chart rows */
.ex-bar-row[b-49wtavfypl] {
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ex-bar-label[b-49wtavfypl] {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.6;
    display: flex;
    align-items: center;
}

.ex-bar-track[b-49wtavfypl] {
    height: 8px;
    background: var(--mud-palette-divider);
    border-radius: 4px;
    overflow: hidden;
}

.ex-bar-fill[b-49wtavfypl] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.ex-bar-val[b-49wtavfypl] {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    opacity: 0.6;
}

/* ── Monthly trend chart ─────────────────────────────────── */
.ex-month-grid[b-49wtavfypl] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    padding-top: 8px;
}

.ex-month-col[b-49wtavfypl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ex-month-col--current .ex-month-bar[b-49wtavfypl] {
    background: var(--mud-palette-primary) !important;
    opacity: 0.8;
}

.ex-month-col--current .ex-month-lbl[b-49wtavfypl] {
    color: var(--mud-palette-primary);
    opacity: 1 !important;
    font-weight: 800 !important;
}

.ex-month-val[b-49wtavfypl] {
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.45;
    min-height: 14px;
}

.ex-month-bar-wrap[b-49wtavfypl] {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ex-month-bar[b-49wtavfypl] {
    width: 70%;
    border-radius: 3px 3px 0 0;
    background: var(--mud-palette-primary);
    opacity: 0.2;
    transition: height 0.4s ease;
    min-height: 3px;
}

.ex-month-lbl[b-49wtavfypl] {
    font-size: 0.6rem;
    font-weight: 600;
    opacity: 0.3;
}

/* ── Expense Reports ─────────────────────────────────────── */
.ex-reports-grid[b-49wtavfypl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 16px;
}

.ex-report-card[b-49wtavfypl] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.12s, box-shadow 0.12s;
}

.ex-report-card:hover[b-49wtavfypl] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.ex-report-head[b-49wtavfypl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.ex-report-id[b-49wtavfypl] {
    display: block;
    font-family: monospace;
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.4;
    margin-bottom: 2px;
}

.ex-report-title[b-49wtavfypl] {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
}

.ex-report-meta[b-49wtavfypl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    opacity: 0.45;
}

.ex-report-dot[b-49wtavfypl] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
}

/* Report mini bar chart */
.ex-report-breakdown[b-49wtavfypl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ex-report-bar-row[b-49wtavfypl] {
    display: grid;
    grid-template-columns: 90px 1fr 65px;
    align-items: center;
    gap: 8px;
}

.ex-report-bar-lbl[b-49wtavfypl] {
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.5;
}

.ex-report-bar-track[b-49wtavfypl] {
    height: 5px;
    background: var(--mud-palette-divider);
    border-radius: 3px;
    overflow: hidden;
}

.ex-report-bar-fill[b-49wtavfypl] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.ex-report-bar-val[b-49wtavfypl] {
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    opacity: 0.5;
}

.ex-report-foot[b-49wtavfypl] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-divider);
}

.ex-report-total[b-49wtavfypl] {
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ex-report-date[b-49wtavfypl] {
    font-size: 0.68rem;
    opacity: 0.35;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .ex-header[b-49wtavfypl] { flex-direction: column; align-items: flex-start; }
    .ex-kpi-strip[b-49wtavfypl] { grid-template-columns: repeat(3, 1fr); }
    .ex-analytics-row[b-49wtavfypl] { grid-template-columns: 1fr; }
    .ex-month-grid[b-49wtavfypl] { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 600px) {
    .ex-page[b-49wtavfypl] { padding: var(--space-4); }
    .ex-kpi-strip[b-49wtavfypl] { grid-template-columns: repeat(2, 1fr); }
    .ex-reports-grid[b-49wtavfypl] { grid-template-columns: 1fr; }
    .ex-month-grid[b-49wtavfypl] { grid-template-columns: repeat(4, 1fr); }
}

/* ── Expense dialog ─────────────────────────────────────── */
.ex-dlg-backdrop[b-49wtavfypl] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ex-dlg[b-49wtavfypl] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.ex-dlg--wide[b-49wtavfypl] { max-width: 680px; }

.ex-dlg-head[b-49wtavfypl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.ex-dlg-title[b-49wtavfypl] { font-size: 0.95rem; font-weight: 800; }

.ex-dlg-close[b-49wtavfypl] {
    width: 30px; height: 30px; border-radius: 8px;
    border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--mud-palette-text-primary); opacity: 0.5;
    transition: opacity 0.12s;
}
.ex-dlg-close:hover[b-49wtavfypl] { opacity: 1; }

.ex-dlg-body[b-49wtavfypl] {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.ex-dlg-body--landscape[b-49wtavfypl] {
    flex-direction: row;
    gap: 0;
    padding: 0;
}

.ex-dlg-col[b-49wtavfypl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
}

.ex-dlg-divider[b-49wtavfypl] {
    width: 1px;
    background: var(--mud-palette-divider);
    flex-shrink: 0;
}

.ex-dlg-section-label[b-49wtavfypl] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.3;
    margin-bottom: 2px;
}

.ex-dlg-footer[b-49wtavfypl] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.ex-dlg-field[b-49wtavfypl] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ex-dlg-label[b-49wtavfypl] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.45;
}

.ex-dlg-input[b-49wtavfypl] {
    width: 100%;
    padding: 8px 11px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-size: 0.83rem;
    outline: none;
    transition: border-color 0.12s;
    box-sizing: border-box;
}

.ex-dlg-input:focus[b-49wtavfypl] { border-color: var(--mud-palette-primary); }
.ex-dlg-select[b-49wtavfypl] { cursor: pointer; }

/* Toggle */
.ex-dlg-toggle-label[b-49wtavfypl] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    user-select: none;
    margin-top: 4px;
}

.ex-dlg-toggle-check[b-49wtavfypl] { display: none; }

.ex-dlg-toggle[b-49wtavfypl] {
    width: 36px; height: 20px; border-radius: 10px;
    background: var(--mud-palette-divider);
    position: relative; transition: background 0.15s; flex-shrink: 0;
}

.ex-dlg-toggle[b-49wtavfypl]::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform 0.15s;
}

.ex-dlg-toggle-check:checked + .ex-dlg-toggle[b-49wtavfypl] { background: var(--mud-palette-primary); }
.ex-dlg-toggle-check:checked + .ex-dlg-toggle[b-49wtavfypl]::after { transform: translateX(16px); }

/* Buttons */
.ex-dlg-btn-cancel[b-49wtavfypl] {
    padding: 8px 18px; border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: none; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; color: var(--mud-palette-text-primary);
    transition: background 0.12s;
}
.ex-dlg-btn-cancel:hover[b-49wtavfypl] { background: rgba(128,128,128,0.07); }

.ex-dlg-btn-save[b-49wtavfypl] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 22px; border-radius: 8px; border: none;
    background: var(--mud-palette-primary); color: #fff;
    font-size: 0.82rem; font-weight: 700; cursor: pointer;
    transition: opacity 0.12s;
}
.ex-dlg-btn-save:hover[b-49wtavfypl] { opacity: 0.88; }

@media (max-width: 680px) {
    .ex-dlg--wide[b-49wtavfypl] { max-width: 100%; }
    .ex-dlg-body--landscape[b-49wtavfypl] { flex-direction: column; }
    .ex-dlg-divider[b-49wtavfypl] { width: 100%; height: 1px; }
}
/* /Components/app/finance/Finance.razor.rz.scp.css */
/* ============================================================
   Finance — iCRM
   ============================================================ */

.fn-page[b-8bysz02zg9] {
    padding: var(--space-6);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.fn-header[b-8bysz02zg9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.fn-title-row[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.fn-header-left h1[b-8bysz02zg9] {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Country picker ─────────────────────────────────────── */
.fn-country-picker[b-8bysz02zg9] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 3px;
    border-radius: 9px;
}

.fn-country-btn[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 7px;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.14s;
    color: rgba(128,128,128,0.55);
}

.fn-country-btn:hover[b-8bysz02zg9] {
    color: var(--mud-palette-text-primary);
    background: rgba(128,128,128,0.06);
}

.fn-country-btn.active[b-8bysz02zg9] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.fn-country-flag[b-8bysz02zg9] {
    font-size: 1rem;
    line-height: 1;
}

.fn-country-code[b-8bysz02zg9] {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.fn-vitals[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fn-vital-num[b-8bysz02zg9] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.fn-vital--revenue[b-8bysz02zg9] { color: #2563eb; }
.fn-vital--btw[b-8bysz02zg9]     { color: #7c3aed; }
.fn-vital--open[b-8bysz02zg9]    { color: #d97706; }
.fn-vital--overdue[b-8bysz02zg9] { color: #dc2626; }

.fn-vital-lbl[b-8bysz02zg9] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.38;
}

.fn-vital-rule[b-8bysz02zg9] {
    width: 1px;
    height: 18px;
    background: rgba(128,128,128,0.2);
}

/* ── Section tabs ────────────────────────────────────────── */
.fn-tabs[b-8bysz02zg9] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
    align-self: flex-start;
}

.fn-tab[b-8bysz02zg9] {
    padding: 7px 18px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.14s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fn-tab:hover[b-8bysz02zg9] { color: var(--mud-palette-text-primary); }

.fn-tab.active[b-8bysz02zg9] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.fn-tab-badge[b-8bysz02zg9] {
    background: #ef4444;
    color: #fff;
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 1px 6px;
    line-height: 1.4;
}

/* ── Loading ─────────────────────────────────────────────── */
.fn-loading[b-8bysz02zg9] {
    display: flex;
    justify-content: center;
    padding: 5rem;
}

/* ── Section + card layout ───────────────────────────────── */
.fn-section[b-8bysz02zg9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fn-row[b-8bysz02zg9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.fn-card[b-8bysz02zg9] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 20px 22px;
}

.fn-card--wide[b-8bysz02zg9] { width: 100%; }

.fn-card-head[b-8bysz02zg9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.fn-card-title[b-8bysz02zg9] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.4;
}

.fn-card-sub[b-8bysz02zg9] {
    font-size: 0.68rem;
    opacity: 0.3;
}

/* ── Year picker ─────────────────────────────────────────── */
.fn-year-picker[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fn-year-btn[b-8bysz02zg9] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-primary);
    transition: all 0.12s;
}

.fn-year-btn:hover:not(:disabled)[b-8bysz02zg9] {
    background: var(--mud-palette-primary);
    color: #fff;
    border-color: var(--mud-palette-primary);
}

.fn-year-btn:disabled[b-8bysz02zg9] { opacity: 0.2; cursor: not-allowed; }

.fn-year-label[b-8bysz02zg9] {
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 38px;
    text-align: center;
}

/* ── Revenue SVG chart ───────────────────────────────────── */
.fn-chart-wrap[b-8bysz02zg9] { margin-bottom: 6px; }

.fn-svg[b-8bysz02zg9] {
    width: 100%;
    height: 140px;
    display: block;
    overflow: visible;
}

.fn-bar[b-8bysz02zg9] {
    fill: var(--mud-palette-primary);
    opacity: 0.22;
    transition: opacity 0.15s;
    cursor: pointer;
}

.fn-bar:hover[b-8bysz02zg9]   { opacity: 0.55; }
.fn-bar--current[b-8bysz02zg9] { opacity: 0.72; }

.fn-chart-labels[b-8bysz02zg9] {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.fn-chart-labels span[b-8bysz02zg9] {
    font-size: 0.62rem;
    font-weight: 600;
    opacity: 0.32;
    text-align: center;
    flex: 1;
}

.fn-label--current[b-8bysz02zg9] {
    opacity: 1 !important;
    color: var(--mud-palette-primary);
    font-weight: 800 !important;
}

/* Month totals strip */
.fn-month-totals[b-8bysz02zg9] {
    display: flex;
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: 10px;
    padding-top: 8px;
}

.fn-month-cell[b-8bysz02zg9] {
    flex: 1;
    text-align: center;
    padding: 4px 1px;
    border-radius: 4px;
}

.fn-month-cell--current[b-8bysz02zg9] {
    background: rgba(37,99,235,0.07);
}

.fn-month-rev[b-8bysz02zg9] {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fn-month-count[b-8bysz02zg9] {
    display: block;
    font-size: 0.55rem;
    opacity: 0.3;
}

/* ── Quarterly bars ──────────────────────────────────────── */
.fn-quarters[b-8bysz02zg9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fn-quarter[b-8bysz02zg9] {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
}

.fn-quarter--current[b-8bysz02zg9] {
    border-color: var(--mud-palette-primary);
    background: rgba(37,99,235,0.03);
}

.fn-quarter-header[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.fn-quarter-label[b-8bysz02zg9] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.45;
}

.fn-quarter-now[b-8bysz02zg9] {
    font-size: 0.58rem;
    font-weight: 800;
    background: var(--mud-palette-primary);
    color: #fff;
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fn-quarter-count[b-8bysz02zg9] {
    margin-left: auto;
    font-size: 0.65rem;
    opacity: 0.35;
}

.fn-quarter-rev[b-8bysz02zg9] {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}

.fn-quarter-sub[b-8bysz02zg9] {
    font-size: 0.67rem;
    opacity: 0.38;
    margin-bottom: 8px;
}

.fn-quarter-bar[b-8bysz02zg9] {
    height: 4px;
    background: var(--mud-palette-divider);
    border-radius: 2px;
    overflow: hidden;
}

.fn-quarter-fill[b-8bysz02zg9] {
    height: 100%;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* ── Service types ───────────────────────────────────────── */
.fn-types[b-8bysz02zg9] {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.fn-type-row[b-8bysz02zg9] {
    display: grid;
    grid-template-columns: 105px 1fr 72px;
    align-items: center;
    gap: 10px;
}

.fn-type-name[b-8bysz02zg9] {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.65;
}

.fn-type-track[b-8bysz02zg9] {
    height: 6px;
    background: var(--mud-palette-divider);
    border-radius: 3px;
    overflow: hidden;
}

.fn-type-fill[b-8bysz02zg9] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.fn-type--repair[b-8bysz02zg9]        { background: #2563eb; }
.fn-type--installation[b-8bysz02zg9]  { background: #7c3aed; }
.fn-type--maintenance[b-8bysz02zg9]   { background: #059669; }
.fn-type--training[b-8bysz02zg9]      { background: #d97706; }
.fn-type--data_recovery[b-8bysz02zg9] { background: #dc2626; }
.fn-type--emergency[b-8bysz02zg9]     { background: #db2777; }

.fn-type-val[b-8bysz02zg9] {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    opacity: 0.65;
}

.fn-empty-state[b-8bysz02zg9] {
    font-size: 0.78rem;
    opacity: 0.35;
    padding: 20px 0;
    text-align: center;
}

/* ── BTW ─────────────────────────────────────────────────── */
.fn-btw-topbar[b-8bysz02zg9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fn-btw-note[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    opacity: 0.5;
}

.fn-btw-quarters[b-8bysz02zg9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.fn-btw-card[b-8bysz02zg9] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fn-btw-card--current[b-8bysz02zg9] {
    border-color: var(--mud-palette-primary);
    background: rgba(37,99,235,0.025);
}

.fn-btw-card-head[b-8bysz02zg9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fn-btw-qlabel[b-8bysz02zg9] {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.45;
}

.fn-btw-badge[b-8bysz02zg9] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--mud-palette-primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
}

.fn-btw-rows[b-8bysz02zg9] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.fn-btw-row[b-8bysz02zg9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.fn-btw-row--highlight[b-8bysz02zg9] { padding: 5px 0; }

.fn-btw-row--total[b-8bysz02zg9] {
    padding-top: 9px;
    border-top: 1px solid var(--mud-palette-divider);
}

.fn-btw-row--meta[b-8bysz02zg9] { margin-top: 2px; }

.fn-btw-lbl[b-8bysz02zg9]  { opacity: 0.45; font-weight: 500; }
.fn-btw-val[b-8bysz02zg9]  { font-weight: 700; font-variant-numeric: tabular-nums; }
.fn-btw-purple[b-8bysz02zg9] { color: #7c3aed; }
.fn-btw-strong[b-8bysz02zg9] { font-size: 0.92rem; }
.fn-btw-muted[b-8bysz02zg9]  { opacity: 0.4; font-weight: 500; }

/* Year total strip */
.fn-btw-yeartotal[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 22px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    flex-wrap: wrap;
}

.fn-btw-yt-item[b-8bysz02zg9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fn-btw-yt-lbl[b-8bysz02zg9] {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.35;
}

.fn-btw-yt-val[b-8bysz02zg9] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.fn-btw-yt-rule[b-8bysz02zg9] {
    width: 1px;
    height: 34px;
    background: var(--mud-palette-divider);
}

/* Export button */
.fn-export-btn[b-8bysz02zg9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: all 0.12s;
    align-self: flex-start;
    white-space: nowrap;
}

.fn-export-btn:hover[b-8bysz02zg9] {
    background: var(--mud-palette-primary);
    color: #fff;
    border-color: var(--mud-palette-primary);
}

/* ── Aging ───────────────────────────────────────────────── */
.fn-aging-buckets[b-8bysz02zg9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.fn-bucket[b-8bysz02zg9] {
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    position: relative;
    overflow: hidden;
}

.fn-bucket[b-8bysz02zg9]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}

.fn-bucket--current[b-8bysz02zg9]::before   { background: #22c55e; }
.fn-bucket--late[b-8bysz02zg9]::before      { background: #f59e0b; }
.fn-bucket--very-late[b-8bysz02zg9]::before { background: #f97316; }
.fn-bucket--critical[b-8bysz02zg9]::before  { background: #ef4444; }

.fn-bucket-label[b-8bysz02zg9] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.38;
    margin-bottom: 8px;
}

.fn-bucket-count[b-8bysz02zg9] {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 5px;
}

.fn-bucket-amount[b-8bysz02zg9] {
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

.fn-bucket-days[b-8bysz02zg9] {
    font-size: 0.63rem;
    opacity: 0.3;
}

/* Aging empty state */
.fn-aging-empty[b-8bysz02zg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px;
    font-size: 0.82rem;
    opacity: 0.5;
}

/* Aging list */
.fn-aging-list[b-8bysz02zg9] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
}

.fn-aging-head[b-8bysz02zg9],
.fn-aging-row[b-8bysz02zg9] {
    display: grid;
    grid-template-columns: 120px 1fr 130px 110px 110px 110px;
    padding: 10px 18px;
    align-items: center;
}

.fn-aging-head[b-8bysz02zg9] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.fn-aging-row[b-8bysz02zg9] {
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.8rem;
    transition: background 0.12s;
}

.fn-aging-row:last-child[b-8bysz02zg9] { border-bottom: none; }
.fn-aging-row:hover[b-8bysz02zg9] { background: rgba(128,128,128,0.025); }

.fn-aging-num[b-8bysz02zg9]      { font-family: monospace; font-size: 0.73rem; font-weight: 700; opacity: 0.55; }
.fn-aging-customer[b-8bysz02zg9] { font-weight: 600; }
.fn-aging-due[b-8bysz02zg9]      { font-size: 0.75rem; opacity: 0.55; }
.fn-aging-amount[b-8bysz02zg9]   { font-weight: 700; font-variant-numeric: tabular-nums; }

.fn-aging-days[b-8bysz02zg9] { font-weight: 700; font-size: 0.76rem; }
.fn-days--current[b-8bysz02zg9]   { color: #16a34a; }
.fn-days--late[b-8bysz02zg9]      { color: #d97706; }
.fn-days--very-late[b-8bysz02zg9] { color: #ea580c; }
.fn-days--critical[b-8bysz02zg9]  { color: #dc2626; }

.fn-remind-btn[b-8bysz02zg9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: all 0.12s;
    white-space: nowrap;
}

.fn-remind-btn:hover[b-8bysz02zg9] {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

/* ── Customer revenue table ──────────────────────────────── */
.fn-cust-table[b-8bysz02zg9] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
}

.fn-cust-head[b-8bysz02zg9],
.fn-cust-row[b-8bysz02zg9] {
    display: grid;
    grid-template-columns: 2fr 70px 120px 120px 110px 160px;
    padding: 11px 18px;
    align-items: center;
}

.fn-cust-head[b-8bysz02zg9] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.fn-cust-row[b-8bysz02zg9] {
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.8rem;
    transition: background 0.12s;
}

.fn-cust-row:last-child[b-8bysz02zg9] { border-bottom: none; }
.fn-cust-row:hover[b-8bysz02zg9] { background: rgba(128,128,128,0.025); }

.fn-cust-name[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
}

.fn-cust-avatar[b-8bysz02zg9] {
    width: 27px;
    height: 27px;
    border-radius: 7px;
    background: var(--mud-palette-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.63rem;
    font-weight: 800;
    flex-shrink: 0;
}

.fn-cust-meta[b-8bysz02zg9] { font-size: 0.75rem; opacity: 0.42; }
.fn-cust-paid[b-8bysz02zg9] { font-weight: 700; font-variant-numeric: tabular-nums; }
.fn-cust-open[b-8bysz02zg9] { font-size: 0.78rem; opacity: 0.35; font-variant-numeric: tabular-nums; }
.fn-cust-open--alert[b-8bysz02zg9] { opacity: 1 !important; color: #d97706; font-weight: 700; }

.fn-cust-share[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fn-share-track[b-8bysz02zg9] {
    flex: 1;
    height: 5px;
    background: var(--mud-palette-divider);
    border-radius: 3px;
    overflow: hidden;
}

.fn-share-fill[b-8bysz02zg9] {
    height: 100%;
    background: var(--mud-palette-primary);
    border-radius: 3px;
    opacity: 0.55;
    transition: width 0.4s ease;
}

.fn-share-pct[b-8bysz02zg9] {
    font-size: 0.67rem;
    font-weight: 700;
    opacity: 0.42;
    min-width: 38px;
    text-align: right;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .fn-row[b-8bysz02zg9] { grid-template-columns: 1fr; }
    .fn-btw-quarters[b-8bysz02zg9] { grid-template-columns: repeat(2, 1fr); }
    .fn-aging-buckets[b-8bysz02zg9] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .fn-page[b-8bysz02zg9] { padding: 16px; }
    .fn-header[b-8bysz02zg9] { flex-direction: column; }
    .fn-title-row[b-8bysz02zg9] { flex-wrap: wrap; }
    .fn-btw-quarters[b-8bysz02zg9] { grid-template-columns: 1fr 1fr; }
    .fn-aging-buckets[b-8bysz02zg9] { grid-template-columns: 1fr 1fr; }
    .fn-cust-head[b-8bysz02zg9], .fn-cust-row[b-8bysz02zg9] { grid-template-columns: 2fr 80px 110px; }
    .fn-cust-head span:nth-child(n+4)[b-8bysz02zg9],
    .fn-cust-row  span:nth-child(n+4)[b-8bysz02zg9] { display: none; }
    .fn-aging-head[b-8bysz02zg9], .fn-aging-row[b-8bysz02zg9] { grid-template-columns: 100px 1fr 90px 90px; }
    .fn-aging-head span:nth-child(n+5)[b-8bysz02zg9],
    .fn-aging-row  span:nth-child(n+5)[b-8bysz02zg9] { display: none; }
}

/* ── Statistics tab ──────────────────────────────────────── */
.fn-stat-row[b-8bysz02zg9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.fn-stat-card[b-8bysz02zg9] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 20px 22px;
}

.fn-stat-card--wide[b-8bysz02zg9] {
    width: 100%;
}

.fn-stat-empty[b-8bysz02zg9] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    font-size: 0.78rem;
    opacity: 0.35;
    text-align: center;
    padding: 0 20px;
}

/* Center text inside donut */
.mud-donut-text[b-8bysz02zg9] {
    dominant-baseline: middle;
    text-anchor: middle;
    font-size: 1rem;
    font-weight: 800;
    fill: currentColor;
}

.mud-donut-subtext[b-8bysz02zg9] {
    dominant-baseline: middle;
    text-anchor: middle;
    font-size: 0.62rem;
    font-weight: 600;
    fill: currentColor;
    opacity: 0.4;
}

@media (max-width: 1100px) {
    .fn-stat-row[b-8bysz02zg9] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .fn-stat-row[b-8bysz02zg9] { grid-template-columns: 1fr; }
}
/* /Components/app/helpdesk/Helpdesk.razor.rz.scp.css */
/* ============================================================
   Helpdesk — iCRM  (support ticket system)
   ============================================================ */

.hd-page[b-aeyhp66zz1] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    padding: var(--space-5) var(--space-8) var(--space-4);
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    gap: var(--space-4);
}

/* ── Header ──────────────────────────────────────────────── */
.hd-header[b-aeyhp66zz1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hd-header-left h1[b-aeyhp66zz1] {
    margin: 0 0 var(--space-2) 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.hd-vitals[b-aeyhp66zz1] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
}

.hd-vital[b-aeyhp66zz1] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.hd-vital--open[b-aeyhp66zz1]     { color: #f59e0b; }
.hd-vital--progress[b-aeyhp66zz1] { color: #2563eb; }
.hd-vital--waiting[b-aeyhp66zz1]  { color: #8b5cf6; }
.hd-vital--resolved[b-aeyhp66zz1] { color: #059669; }
.hd-vital--breached[b-aeyhp66zz1] { color: #dc2626; }

.hd-vital-lbl[b-aeyhp66zz1] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.4;
    margin-left: 5px;
    margin-right: 14px;
}

.hd-vital-rule[b-aeyhp66zz1] {
    width: 1px;
    height: 0.9rem;
    background: currentColor;
    opacity: 0.15;
    margin-right: 14px;
    align-self: center;
}

/* ── Header right ────────────────────────────────────────── */
.hd-header-right[b-aeyhp66zz1] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.hd-status-tabs[b-aeyhp66zz1] {
    display: flex;
    background: rgba(128,128,128,0.08);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.hd-tab[b-aeyhp66zz1] {
    background: transparent;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: 0.45;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.hd-tab:hover[b-aeyhp66zz1] { opacity: 0.8; background: rgba(128,128,128,0.1); }

.hd-tab.active[b-aeyhp66zz1] {
    background: var(--mud-palette-surface);
    opacity: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.hd-tab--open.active[b-aeyhp66zz1]        { color: #f59e0b; }
.hd-tab--in_progress.active[b-aeyhp66zz1] { color: #2563eb; }
.hd-tab--waiting.active[b-aeyhp66zz1]     { color: #8b5cf6; }
.hd-tab--resolved.active[b-aeyhp66zz1]    { color: #059669; }
.hd-tab--closed.active[b-aeyhp66zz1]      { color: #6b7280; }

[b-aeyhp66zz1] .hd-search { max-width: 200px; }

.hd-new-btn[b-aeyhp66zz1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.12s;
    white-space: nowrap;
}

.hd-new-btn:hover[b-aeyhp66zz1] { opacity: 0.85; }

/* ── Desk: two-column ────────────────────────────────────── */
.hd-desk[b-aeyhp66zz1] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--space-4);
    overflow: hidden;
}

/* ── Queue (left) ────────────────────────────────────────── */
.hd-queue[b-aeyhp66zz1] {
    overflow-y: auto;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.1);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hd-queue[b-aeyhp66zz1]::-webkit-scrollbar { width: 4px; }
.hd-queue[b-aeyhp66zz1]::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.15); border-radius: 2px; }

.hd-queue-empty[b-aeyhp66zz1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    opacity: 0.4;
    font-size: 0.8rem;
    padding: 3rem;
}

/* Queue row */
.hd-row[b-aeyhp66zz1] {
    display: flex;
    align-items: stretch;
    gap: 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(128,128,128,0.07);
    transition: background 0.12s ease;
}

.hd-row:last-child[b-aeyhp66zz1] { border-bottom: none; }
.hd-row:hover[b-aeyhp66zz1] { background: rgba(128,128,128,0.05); }
.hd-row--active[b-aeyhp66zz1] { background: rgba(37,99,235,0.05) !important; }

.hd-row-accent[b-aeyhp66zz1] {
    width: 3px;
    flex-shrink: 0;
}

.hd-row:first-child .hd-row-accent[b-aeyhp66zz1] { border-top-left-radius: 12px; }

.hd-accent--open[b-aeyhp66zz1]        { background: #f59e0b; }
.hd-accent--in_progress[b-aeyhp66zz1] { background: #2563eb; }
.hd-accent--waiting[b-aeyhp66zz1]     { background: #8b5cf6; }
.hd-accent--resolved[b-aeyhp66zz1]    { background: #059669; }
.hd-accent--closed[b-aeyhp66zz1]      { background: rgba(128,128,128,0.25); }

.hd-row-body[b-aeyhp66zz1] {
    flex: 1;
    padding: 11px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hd-row-top[b-aeyhp66zz1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hd-row-id[b-aeyhp66zz1] {
    font-family: monospace;
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.45;
}

.hd-row-subject[b-aeyhp66zz1] {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hd-row-meta[b-aeyhp66zz1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    opacity: 0.45;
}

.hd-row-dot[b-aeyhp66zz1] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
}

.hd-row-bottom[b-aeyhp66zz1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.hd-row-age[b-aeyhp66zz1] {
    font-size: 0.65rem;
    opacity: 0.3;
    font-weight: 600;
    margin-left: auto;
}

/* Priority dot */
.hd-priority-dot[b-aeyhp66zz1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hd-priority--urgent[b-aeyhp66zz1] { background: #dc2626; box-shadow: 0 0 6px rgba(220,38,38,0.5); }
.hd-priority--high[b-aeyhp66zz1]   { background: #f59e0b; }
.hd-priority--normal[b-aeyhp66zz1] { background: #2563eb; }
.hd-priority--low[b-aeyhp66zz1]    { background: rgba(128,128,128,0.35); }

/* SLA pill */
.hd-sla-pill[b-aeyhp66zz1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 8px;
    line-height: 1.6;
    white-space: nowrap;
}

.hd-sla--on_time[b-aeyhp66zz1]  { background: rgba(5,150,105,0.1);   color: #34d399; }
.hd-sla--at_risk[b-aeyhp66zz1]  { background: rgba(245,158,11,0.12); color: #fbbf24; }
.hd-sla--breached[b-aeyhp66zz1] { background: rgba(220,38,38,0.12);  color: #f87171; }

/* ── Detail pane (right) ─────────────────────────────────── */
.hd-detail[b-aeyhp66zz1] {
    overflow-y: auto;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.1);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hd-detail[b-aeyhp66zz1]::-webkit-scrollbar { width: 4px; }
.hd-detail[b-aeyhp66zz1]::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.15); border-radius: 2px; }

.hd-detail--empty[b-aeyhp66zz1] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hd-detail-placeholder[b-aeyhp66zz1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    opacity: 0.35;
    font-size: 0.82rem;
}

/* Detail header */
.hd-detail-head[b-aeyhp66zz1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
    flex-wrap: wrap;
}

.hd-detail-id[b-aeyhp66zz1] {
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.4;
    margin-bottom: 2px;
}

.hd-detail-subject[b-aeyhp66zz1] {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}

.hd-detail-badges[b-aeyhp66zz1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hd-detail-date[b-aeyhp66zz1] {
    font-size: 0.7rem;
    opacity: 0.35;
}

.hd-detail-actions[b-aeyhp66zz1] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ── Badges ──────────────────────────────────────────────── */
.hd-badge[b-aeyhp66zz1] {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    line-height: 1.6;
    border: 1px solid transparent;
    white-space: nowrap;
}

.hd-badge--open[b-aeyhp66zz1]        { border-color: rgba(245,158,11,0.3);  color: #fbbf24; }
.hd-badge--in_progress[b-aeyhp66zz1] { border-color: rgba(37,99,235,0.3);   color: #60a5fa; }
.hd-badge--waiting[b-aeyhp66zz1]     { border-color: rgba(139,92,246,0.3);  color: #a78bfa; }
.hd-badge--resolved[b-aeyhp66zz1]    { border-color: rgba(5,150,105,0.3);   color: #34d399; }
.hd-badge--closed[b-aeyhp66zz1]      { border-color: rgba(128,128,128,0.2); color: rgba(128,128,128,0.5); }

.hd-badge--priority-urgent[b-aeyhp66zz1] { background: rgba(220,38,38,0.12); color: #f87171; border-color: rgba(220,38,38,0.25); }
.hd-badge--priority-high[b-aeyhp66zz1]   { background: rgba(245,158,11,0.1); color: #fbbf24; border-color: rgba(245,158,11,0.2); }
.hd-badge--priority-normal[b-aeyhp66zz1] { background: rgba(37,99,235,0.08); color: #60a5fa; border-color: rgba(37,99,235,0.15); }
.hd-badge--priority-low[b-aeyhp66zz1]    { background: rgba(128,128,128,0.06); color: rgba(128,128,128,0.5); border-color: rgba(128,128,128,0.15); }

/* ── Info row ────────────────────────────────────────────── */
.hd-info-row[b-aeyhp66zz1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.hd-info-panel[b-aeyhp66zz1] {
    padding: 14px 20px;
    border-right: 1px solid rgba(128,128,128,0.07);
}

.hd-info-panel:last-child[b-aeyhp66zz1] { border-right: none; }

.hd-info-label[b-aeyhp66zz1] {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.3;
    margin-bottom: 4px;
}

.hd-info-value[b-aeyhp66zz1] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
}

.hd-info-sub[b-aeyhp66zz1] {
    display: block;
    font-size: 0.7rem;
    opacity: 0.4;
    margin-top: 2px;
}

.hd-mono[b-aeyhp66zz1] { font-family: monospace; }

.hd-assignee[b-aeyhp66zz1] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hd-avatar[b-aeyhp66zz1] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.hd-msg-avatar[b-aeyhp66zz1] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

/* Category chips */
.hd-chip[b-aeyhp66zz1] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.hd-chip--network[b-aeyhp66zz1]   { background: rgba(37,99,235,0.12);  color: #60a5fa; }
.hd-chip--software[b-aeyhp66zz1]  { background: rgba(124,58,237,0.12); color: #a78bfa; }
.hd-chip--hardware[b-aeyhp66zz1]  { background: rgba(245,158,11,0.12); color: #fbbf24; }
.hd-chip--server[b-aeyhp66zz1]    { background: rgba(220,38,38,0.12);  color: #f87171; }
.hd-chip--account[b-aeyhp66zz1]   { background: rgba(5,150,105,0.12);  color: #34d399; }
.hd-chip--general[b-aeyhp66zz1]   { background: rgba(128,128,128,0.1);  color: rgba(255,255,255,0.5); }
.hd-chip--security[b-aeyhp66zz1]  { background: rgba(220,38,38,0.15);  color: #f87171; }

/* ── Thread ──────────────────────────────────────────────── */
.hd-thread-section[b-aeyhp66zz1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 24px;
    min-height: 0;
}

.hd-section-label[b-aeyhp66zz1] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.3;
    margin-bottom: 12px;
}

.hd-thread[b-aeyhp66zz1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hd-msg[b-aeyhp66zz1] {
    border-radius: 10px;
    padding: 12px 16px;
}

.hd-msg--customer[b-aeyhp66zz1] {
    background: rgba(128,128,128,0.04);
    border: 1px solid rgba(128,128,128,0.08);
}

.hd-msg--agent[b-aeyhp66zz1] {
    background: rgba(37,99,235,0.04);
    border: 1px solid rgba(37,99,235,0.1);
}

.hd-msg--internal[b-aeyhp66zz1] {
    background: rgba(245,158,11,0.04) !important;
    border-color: rgba(245,158,11,0.15) !important;
    border-style: dashed !important;
}

.hd-msg-head[b-aeyhp66zz1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hd-msg-from[b-aeyhp66zz1] {
    font-size: 0.78rem;
    font-weight: 700;
}

.hd-msg-time[b-aeyhp66zz1] {
    font-size: 0.65rem;
    opacity: 0.35;
    margin-left: auto;
    font-family: monospace;
}

.hd-msg-internal-badge[b-aeyhp66zz1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.58rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(245,158,11,0.1);
    padding: 1px 7px;
    border-radius: 6px;
}

.hd-msg-body[b-aeyhp66zz1] {
    font-size: 0.82rem;
    line-height: 1.55;
    opacity: 0.75;
    white-space: pre-wrap;
}

/* ── Reply bar ───────────────────────────────────────────── */
.hd-reply-bar[b-aeyhp66zz1] {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(128,128,128,0.1);
    align-items: flex-end;
    flex-shrink: 0;
}

.hd-reply-actions[b-aeyhp66zz1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .hd-desk[b-aeyhp66zz1] {
        grid-template-columns: 1fr;
        grid-template-rows: 280px 1fr;
    }
    .hd-header[b-aeyhp66zz1] { flex-direction: column; align-items: flex-start; }
    .hd-header-right[b-aeyhp66zz1] { flex-wrap: wrap; }
    .hd-info-row[b-aeyhp66zz1] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .hd-page[b-aeyhp66zz1] { padding: var(--space-3); }
    .hd-info-row[b-aeyhp66zz1] { grid-template-columns: 1fr; }
    .hd-reply-bar[b-aeyhp66zz1] { flex-direction: column; }
}
/* /Components/app/helpdesk/Repairs.razor.rz.scp.css */
/* ============================================================
   Repairs — iCRM  (device intake / RMA workflow)
   ============================================================ */

.rp-page[b-gdjf0sxw2v] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    padding: var(--space-5) var(--space-8) var(--space-4);
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    gap: var(--space-4);
}

/* ── Header ──────────────────────────────────────────────── */
.rp-header[b-gdjf0sxw2v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.rp-header-left h1[b-gdjf0sxw2v] {
    margin: 0 0 var(--space-2) 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.rp-vitals[b-gdjf0sxw2v] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
}

.rp-vital[b-gdjf0sxw2v] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.rp-vital--intake[b-gdjf0sxw2v]      { color: #f59e0b; }
.rp-vital--diagnosing[b-gdjf0sxw2v]  { color: #2563eb; }
.rp-vital--repairing[b-gdjf0sxw2v]   { color: #8b5cf6; }
.rp-vital--ready[b-gdjf0sxw2v]       { color: #059669; }
.rp-vital--picked_up[b-gdjf0sxw2v]   { color: rgba(128,128,128,0.45); }

.rp-vital-lbl[b-gdjf0sxw2v] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.4;
    margin-left: 5px;
    margin-right: 14px;
}

.rp-vital-rule[b-gdjf0sxw2v] {
    width: 1px;
    height: 0.9rem;
    background: currentColor;
    opacity: 0.15;
    margin-right: 14px;
    align-self: center;
}

/* ── Header right ────────────────────────────────────────── */
.rp-header-right[b-gdjf0sxw2v] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.rp-status-tabs[b-gdjf0sxw2v] {
    display: flex;
    background: rgba(128,128,128,0.08);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.rp-tab[b-gdjf0sxw2v] {
    background: transparent;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: 0.45;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.rp-tab:hover[b-gdjf0sxw2v] { opacity: 0.8; background: rgba(128,128,128,0.1); }

.rp-tab.active[b-gdjf0sxw2v] {
    background: var(--mud-palette-surface);
    opacity: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.rp-tab--intake.active[b-gdjf0sxw2v]     { color: #f59e0b; }
.rp-tab--diagnosing.active[b-gdjf0sxw2v] { color: #2563eb; }
.rp-tab--repairing.active[b-gdjf0sxw2v]  { color: #8b5cf6; }
.rp-tab--ready.active[b-gdjf0sxw2v]      { color: #059669; }
.rp-tab--picked_up.active[b-gdjf0sxw2v]  { color: #6b7280; }

[b-gdjf0sxw2v] .rp-search { max-width: 200px; }

.rp-new-btn[b-gdjf0sxw2v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.12s;
    white-space: nowrap;
}

.rp-new-btn:hover[b-gdjf0sxw2v] { opacity: 0.85; }

/* ── Desk: two-column ────────────────────────────────────── */
.rp-desk[b-gdjf0sxw2v] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--space-4);
    overflow: hidden;
}

/* ── Queue (left) ────────────────────────────────────────── */
.rp-queue[b-gdjf0sxw2v] {
    overflow-y: auto;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.1);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rp-queue[b-gdjf0sxw2v]::-webkit-scrollbar { width: 4px; }
.rp-queue[b-gdjf0sxw2v]::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.15); border-radius: 2px; }

.rp-queue-empty[b-gdjf0sxw2v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    opacity: 0.4;
    font-size: 0.8rem;
    padding: 3rem;
}

/* Queue row */
.rp-row[b-gdjf0sxw2v] {
    display: flex;
    align-items: stretch;
    gap: 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(128,128,128,0.07);
    transition: background 0.12s ease;
    position: relative;
}

.rp-row:last-child[b-gdjf0sxw2v] { border-bottom: none; }
.rp-row:hover[b-gdjf0sxw2v] { background: rgba(128,128,128,0.05); }
.rp-row--active[b-gdjf0sxw2v] { background: rgba(37,99,235,0.05) !important; }

/* Left accent bar */
.rp-row-accent[b-gdjf0sxw2v] {
    width: 3px;
    flex-shrink: 0;
}

.rp-row:first-child .rp-row-accent[b-gdjf0sxw2v] { border-top-left-radius: 12px; }

.rp-accent--intake[b-gdjf0sxw2v]     { background: #f59e0b; }
.rp-accent--diagnosing[b-gdjf0sxw2v] { background: #2563eb; }
.rp-accent--repairing[b-gdjf0sxw2v]  { background: #8b5cf6; }
.rp-accent--ready[b-gdjf0sxw2v]      { background: #059669; }
.rp-accent--picked_up[b-gdjf0sxw2v]  { background: rgba(128,128,128,0.25); }

/* Status dot */
.rp-row-status-dot[b-gdjf0sxw2v] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: flex-start;
    margin: 14px 12px 0 0;
}

.rp-row-body[b-gdjf0sxw2v] {
    flex: 1;
    padding: 11px 8px 11px 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rp-row-top[b-gdjf0sxw2v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rp-row-ticket[b-gdjf0sxw2v] {
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.5;
}

.rp-row-age[b-gdjf0sxw2v] {
    font-size: 0.65rem;
    opacity: 0.3;
    font-weight: 600;
}

.rp-row-device[b-gdjf0sxw2v] {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-row-customer[b-gdjf0sxw2v] {
    font-size: 0.72rem;
    opacity: 0.5;
}

.rp-row-issue[b-gdjf0sxw2v] {
    font-size: 0.7rem;
    opacity: 0.35;
    line-height: 1.35;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Detail pane (right) ─────────────────────────────────── */
.rp-detail[b-gdjf0sxw2v] {
    overflow-y: auto;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.1);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rp-detail[b-gdjf0sxw2v]::-webkit-scrollbar { width: 4px; }
.rp-detail[b-gdjf0sxw2v]::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.15); border-radius: 2px; }

.rp-detail--empty[b-gdjf0sxw2v] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.rp-detail-placeholder[b-gdjf0sxw2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    opacity: 0.35;
    font-size: 0.82rem;
}

/* Detail header */
.rp-detail-head[b-gdjf0sxw2v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.rp-detail-ticket[b-gdjf0sxw2v] {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.rp-detail-meta[b-gdjf0sxw2v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rp-detail-date[b-gdjf0sxw2v] {
    font-size: 0.72rem;
    opacity: 0.4;
}

.rp-detail-actions[b-gdjf0sxw2v] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Badges ──────────────────────────────────────────────── */
.rp-badge[b-gdjf0sxw2v] {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    line-height: 1.6;
    border: 1px solid transparent;
    white-space: nowrap;
}

.rp-badge--intake[b-gdjf0sxw2v]      { border-color: rgba(245,158,11,0.3);  color: #fbbf24; }
.rp-badge--diagnosing[b-gdjf0sxw2v]  { border-color: rgba(37,99,235,0.3);   color: #60a5fa; }
.rp-badge--repairing[b-gdjf0sxw2v]   { border-color: rgba(139,92,246,0.3);  color: #a78bfa; }
.rp-badge--ready[b-gdjf0sxw2v]       { border-color: rgba(5,150,105,0.3);   color: #34d399; }
.rp-badge--picked_up[b-gdjf0sxw2v]   { border-color: rgba(128,128,128,0.2); color: rgba(128,128,128,0.5); }

.rp-badge--priority-urgent[b-gdjf0sxw2v] { background: rgba(220,38,38,0.12); color: #f87171; border-color: rgba(220,38,38,0.25); }
.rp-badge--priority-high[b-gdjf0sxw2v]   { background: rgba(245,158,11,0.1); color: #fbbf24; border-color: rgba(245,158,11,0.2); }
.rp-badge--priority-normal[b-gdjf0sxw2v] { background: rgba(37,99,235,0.08); color: #60a5fa; border-color: rgba(37,99,235,0.15); }
.rp-badge--priority-low[b-gdjf0sxw2v]    { background: rgba(128,128,128,0.06); color: rgba(128,128,128,0.5); border-color: rgba(128,128,128,0.15); }

.rp-badge--warranty[b-gdjf0sxw2v]    { background: rgba(5,150,105,0.1);   color: #34d399; border-color: rgba(5,150,105,0.2); }
.rp-badge--no-warranty[b-gdjf0sxw2v] { background: rgba(128,128,128,0.06); color: rgba(128,128,128,0.5); border-color: rgba(128,128,128,0.15); }

/* ── Sections ────────────────────────────────────────────── */
.rp-section[b-gdjf0sxw2v] {
    padding: 14px 0;
    border-bottom: 1px solid rgba(128,128,128,0.07);
}

.rp-section:last-child[b-gdjf0sxw2v] { border-bottom: none; }

.rp-section-label[b-gdjf0sxw2v] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.35;
    margin-bottom: 10px;
}

/* Info grid */
.rp-info-grid[b-gdjf0sxw2v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.rp-info-lbl[b-gdjf0sxw2v] {
    display: block;
    font-size: 0.65rem;
    opacity: 0.35;
    margin-bottom: 2px;
}

.rp-info-val[b-gdjf0sxw2v] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
}

.rp-mono[b-gdjf0sxw2v] { font-family: monospace; font-size: 0.82rem; }
.rp-bold[b-gdjf0sxw2v] { font-weight: 700; }
.rp-col-right[b-gdjf0sxw2v] { text-align: right; }

/* Text block (issue / diagnosis) */
.rp-text-block[b-gdjf0sxw2v] {
    font-size: 0.82rem;
    line-height: 1.55;
    opacity: 0.7;
    padding: 10px 14px;
    background: rgba(128,128,128,0.03);
    border-radius: 8px;
    border: 1px solid rgba(128,128,128,0.06);
}

/* Parts table */
.rp-parts-table[b-gdjf0sxw2v] {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    overflow: hidden;
}

.rp-parts-head[b-gdjf0sxw2v],
.rp-parts-row[b-gdjf0sxw2v] {
    display: grid;
    grid-template-columns: 1fr 50px 90px 90px;
    padding: 8px 14px;
    align-items: center;
}

.rp-parts-head[b-gdjf0sxw2v] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.rp-parts-row[b-gdjf0sxw2v] {
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(128,128,128,0.06);
}

.rp-parts-row:last-child[b-gdjf0sxw2v] { border-bottom: none; }

/* Cost summary */
.rp-cost-grid[b-gdjf0sxw2v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 340px;
}

.rp-cost-line[b-gdjf0sxw2v] {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 4px 0;
}

.rp-cost-total[b-gdjf0sxw2v] {
    display: flex;
    justify-content: space-between;
    font-size: 0.92rem;
    font-weight: 700;
    padding-top: 8px;
    border-top: 2px solid rgba(128,128,128,0.15);
    margin-top: 4px;
}

/* ── Timeline ────────────────────────────────────────────── */
.rp-timeline[b-gdjf0sxw2v] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 20px;
}

.rp-timeline[b-gdjf0sxw2v]::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(128,128,128,0.1);
}

.rp-tl-item[b-gdjf0sxw2v] {
    display: flex;
    gap: 14px;
    padding: 8px 0;
    position: relative;
}

.rp-tl-dot[b-gdjf0sxw2v] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    position: absolute;
    left: -20px;
    border: 2px solid var(--mud-palette-surface);
    box-shadow: 0 0 0 2px rgba(128,128,128,0.08);
}

.rp-tl-content[b-gdjf0sxw2v] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rp-tl-title[b-gdjf0sxw2v] {
    font-size: 0.8rem;
    font-weight: 600;
}

.rp-tl-date[b-gdjf0sxw2v] {
    font-size: 0.68rem;
    opacity: 0.35;
    font-family: monospace;
}

.rp-tl-note[b-gdjf0sxw2v] {
    font-size: 0.75rem;
    opacity: 0.5;
    margin-top: 2px;
    line-height: 1.4;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .rp-desk[b-gdjf0sxw2v] {
        grid-template-columns: 1fr;
        grid-template-rows: 280px 1fr;
    }
    .rp-header[b-gdjf0sxw2v] { flex-direction: column; align-items: flex-start; }
    .rp-header-right[b-gdjf0sxw2v] { flex-wrap: wrap; }
    .rp-status-tabs[b-gdjf0sxw2v] { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    .rp-page[b-gdjf0sxw2v] { padding: var(--space-3); }
    .rp-detail[b-gdjf0sxw2v] { padding: 16px; }
    .rp-info-grid[b-gdjf0sxw2v] { grid-template-columns: 1fr; }
}
/* /Components/app/inventory/Inventory.razor.rz.scp.css */
/* ============================================================
   Inventory — iCRM  (warehouse & stock management)
   ============================================================ */

.inv-page[b-ad4yewtitx] {
    padding: var(--space-6) var(--space-8);
    min-height: 100vh;
    max-width: 1500px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.inv-header[b-ad4yewtitx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    flex-wrap: wrap;
}

.inv-header-left h1[b-ad4yewtitx] {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.inv-vitals[b-ad4yewtitx] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
    flex-wrap: wrap;
}

.inv-vital-num[b-ad4yewtitx] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.inv-vital--blue[b-ad4yewtitx]   { color: #2563eb; }
.inv-vital--purple[b-ad4yewtitx] { color: #7c3aed; }
.inv-vital--green[b-ad4yewtitx]  { color: #059669; }
.inv-vital--amber[b-ad4yewtitx]  { color: #d97706; }
.inv-vital--red[b-ad4yewtitx]    { color: #dc2626; }

.inv-vital-lbl[b-ad4yewtitx] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.38;
    margin-left: 5px;
    margin-right: 14px;
}

.inv-vital-rule[b-ad4yewtitx] {
    width: 1px;
    height: 18px;
    background: rgba(128,128,128,0.2);
    margin-right: 14px;
    align-self: center;
    display: inline-block;
    vertical-align: middle;
}

/* ── Tabs ────────────────────────────────────────────────── */
.inv-tabs[b-ad4yewtitx] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
    align-self: flex-start;
    flex-wrap: wrap;
}

.inv-tab[b-ad4yewtitx] {
    padding: 7px 14px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.14s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.inv-tab:hover[b-ad4yewtitx] { color: var(--mud-palette-text-primary); }

.inv-tab.active[b-ad4yewtitx] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.inv-tab-badge[b-ad4yewtitx] {
    font-size: 0.56rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 20px;
    line-height: 1.4;
    color: #fff;
}

.inv-tab-badge--warn[b-ad4yewtitx] { background: #f59e0b; }
.inv-tab-badge--blue[b-ad4yewtitx] { background: #2563eb; }
.inv-tab-badge--error[b-ad4yewtitx] { background: #ef4444; }

/* ── Section / toolbar ───────────────────────────────────── */
.inv-section[b-ad4yewtitx] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.inv-toolbar[b-ad4yewtitx] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inv-toolbar-spacer[b-ad4yewtitx] { flex: 1; }

[b-ad4yewtitx] .inv-search { width: 220px; }

/* ── Alert ───────────────────────────────────────────────── */
.inv-alert[b-ad4yewtitx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.inv-alert--warn[b-ad4yewtitx] {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    color: #f59e0b;
}

.inv-alert--error[b-ad4yewtitx] {
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.2);
    color: #f87171;
}

/* ── Table wrap ──────────────────────────────────────────── */
.inv-table-wrap[b-ad4yewtitx] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
}

/* ── Stock table ─────────────────────────────────────────── */
.inv-stock-head[b-ad4yewtitx],
.inv-stock-row[b-ad4yewtitx],
.inv-stock-foot[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: 110px 1fr 100px 130px 70px 70px 70px 90px 90px 90px;
    padding: 10px 16px;
    align-items: center;
    min-width: 950px;
}

.inv-stock-head[b-ad4yewtitx] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.inv-stock-row[b-ad4yewtitx] {
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.82rem;
    transition: background 0.12s;
}

.inv-stock-row:last-child[b-ad4yewtitx] { border-bottom: none; }
.inv-stock-row:hover[b-ad4yewtitx] { background: rgba(128,128,128,0.025); }

.inv-stock-row--out[b-ad4yewtitx] { background: rgba(220,38,38,0.03); }
.inv-stock-row--out:hover[b-ad4yewtitx] { background: rgba(220,38,38,0.06); }
.inv-stock-row--low[b-ad4yewtitx] { background: rgba(245,158,11,0.03); }
.inv-stock-row--low:hover[b-ad4yewtitx] { background: rgba(245,158,11,0.06); }

.inv-stock-foot[b-ad4yewtitx] {
    border-top: 2px solid rgba(128,128,128,0.15);
    background: rgba(128,128,128,0.03);
}

/* ── PO table ────────────────────────────────────────────── */
.inv-po-head[b-ad4yewtitx],
.inv-po-row[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: 120px 1fr 110px 110px 70px 110px 90px 100px;
    padding: 10px 16px;
    align-items: center;
    min-width: 800px;
}

.inv-po-head[b-ad4yewtitx] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.inv-po-row[b-ad4yewtitx] {
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.82rem;
    transition: background 0.12s;
}

.inv-po-row:last-child[b-ad4yewtitx] { border-bottom: none; }
.inv-po-row:hover[b-ad4yewtitx] { background: rgba(128,128,128,0.025); }

/* ── Movement table ──────────────────────────────────────── */
.inv-move-head[b-ad4yewtitx],
.inv-move-row[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: 110px 120px 95px 1fr 170px 170px 65px 110px;
    padding: 10px 16px;
    align-items: center;
    min-width: 950px;
}

.inv-move-head[b-ad4yewtitx] {
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.inv-move-row[b-ad4yewtitx] {
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.82rem;
    transition: background 0.12s;
}

.inv-move-row:last-child[b-ad4yewtitx] { border-bottom: none; }
.inv-move-row:hover[b-ad4yewtitx] { background: rgba(128,128,128,0.025); }

/* ── Cell helpers ────────────────────────────────────────── */
.inv-cell-mono[b-ad4yewtitx]  { font-family: monospace; font-size: 0.8rem; }
.inv-cell-sku[b-ad4yewtitx]   { font-family: monospace; font-size: 0.75rem; font-weight: 700; opacity: 0.5; }
.inv-cell-name[b-ad4yewtitx]  { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-cell-bold[b-ad4yewtitx]  { font-weight: 700; }
.inv-cell-sub[b-ad4yewtitx]   { opacity: 0.45; font-size: 0.78rem; }
.inv-col-right[b-ad4yewtitx]  { text-align: right; }
.inv-cell-actions[b-ad4yewtitx] { display: flex; gap: 4px; justify-content: flex-end; }
.inv-foot-label[b-ad4yewtitx] { font-weight: 700; font-size: 0.72rem; opacity: 0.5; text-align: right; }
.inv-foot-val[b-ad4yewtitx]   { font-weight: 700; }

/* ── Chips ───────────────────────────────────────────────── */
.inv-chip[b-ad4yewtitx] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

.inv-chip--hardware[b-ad4yewtitx]    { background: rgba(37,99,235,0.12);  color: #60a5fa; }
.inv-chip--networking[b-ad4yewtitx]  { background: rgba(124,58,237,0.12); color: #a78bfa; }
.inv-chip--peripherals[b-ad4yewtitx] { background: rgba(236,72,153,0.12); color: #f472b6; }
.inv-chip--storage[b-ad4yewtitx]     { background: rgba(5,150,105,0.12);  color: #34d399; }
.inv-chip--cables[b-ad4yewtitx]      { background: rgba(217,119,6,0.12);  color: #fbbf24; }
.inv-chip--consumables[b-ad4yewtitx] { background: rgba(128,128,128,0.1);  color: rgba(255,255,255,0.5); }
.inv-chip--inbound[b-ad4yewtitx]     { background: rgba(5,150,105,0.12);  color: #34d399; }
.inv-chip--outbound[b-ad4yewtitx]    { background: rgba(220,38,38,0.12);  color: #f87171; }
.inv-chip--transfer[b-ad4yewtitx]    { background: rgba(37,99,235,0.12);  color: #60a5fa; }
.inv-chip--adjustment[b-ad4yewtitx]  { background: rgba(217,119,6,0.12);  color: #fbbf24; }

/* ── Status pills ────────────────────────────────────────── */
.inv-status[b-ad4yewtitx] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    letter-spacing: 0.02em;
    line-height: 1.6;
    white-space: nowrap;
}

.inv-status--ok[b-ad4yewtitx]        { border-color: rgba(5,150,105,0.3);   color: #34d399; }
.inv-status--low[b-ad4yewtitx]       { border-color: rgba(245,158,11,0.3);  color: #fbbf24; }
.inv-status--out[b-ad4yewtitx]       { border-color: rgba(220,38,38,0.3);   color: #f87171; background: rgba(220,38,38,0.06); }
.inv-status--inactive[b-ad4yewtitx]  { border-color: rgba(128,128,128,0.2); color: rgba(128,128,128,0.5); }
.inv-status--pending[b-ad4yewtitx]   { border-color: rgba(245,158,11,0.3);  color: #fbbf24; }
.inv-status--ordered[b-ad4yewtitx]   { border-color: rgba(37,99,235,0.3);   color: #60a5fa; }
.inv-status--shipped[b-ad4yewtitx]   { border-color: rgba(124,58,237,0.3);  color: #a78bfa; }
.inv-status--received[b-ad4yewtitx]  { border-color: rgba(5,150,105,0.3);   color: #34d399; }
.inv-status--cancelled[b-ad4yewtitx] { border-color: rgba(128,128,128,0.2); color: rgba(128,128,128,0.5); }

/* ── Action button ───────────────────────────────────────── */
.inv-action-btn[b-ad4yewtitx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: all 0.12s;
    white-space: nowrap;
}

.inv-action-btn:hover[b-ad4yewtitx] {
    background: var(--mud-palette-primary);
    color: #fff;
    border-color: var(--mud-palette-primary);
}

.inv-action-btn--small[b-ad4yewtitx] { padding: 4px 10px; font-size: 0.7rem; }

.inv-action-btn--green:hover[b-ad4yewtitx] {
    background: #059669;
    border-color: #059669;
}

/* ── Empty state ─────────────────────────────────────────── */
.inv-empty[b-ad4yewtitx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px;
    font-size: 0.82rem;
    opacity: 0.5;
}

.inv-empty-inline[b-ad4yewtitx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 0.8rem;
    opacity: 0.55;
}

/* ── PO summary cards ────────────────────────────────────── */
.inv-po-cards[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.inv-po-card[b-ad4yewtitx] {
    border-radius: 10px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-divider);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inv-po-card--pending[b-ad4yewtitx]  { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.18); }
.inv-po-card--ordered[b-ad4yewtitx]  { background: rgba(37,99,235,0.06);  border-color: rgba(37,99,235,0.18); }
.inv-po-card--shipped[b-ad4yewtitx]  { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.18); }
.inv-po-card--received[b-ad4yewtitx] { background: rgba(5,150,105,0.06);  border-color: rgba(5,150,105,0.18); }

.inv-po-card-num[b-ad4yewtitx] {
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.inv-po-card-lbl[b-ad4yewtitx] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.5;
}

.inv-po-card-val[b-ad4yewtitx] {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.55;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* ── Warehouse grid ──────────────────────────────────────── */
.inv-wh-grid[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.inv-wh-card[b-ad4yewtitx] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.12s, box-shadow 0.12s;
}

.inv-wh-card:hover[b-ad4yewtitx] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.inv-wh-card-head[b-ad4yewtitx] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.inv-wh-icon[b-ad4yewtitx] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inv-wh-info[b-ad4yewtitx] { flex: 1; }

.inv-wh-name[b-ad4yewtitx] {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
}

.inv-wh-loc[b-ad4yewtitx] {
    display: block;
    font-size: 0.7rem;
    opacity: 0.4;
}

/* WH stats */
.inv-wh-stats[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.inv-wh-stat[b-ad4yewtitx] { text-align: center; }

.inv-wh-stat-num[b-ad4yewtitx] {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.inv-wh-stat-lbl[b-ad4yewtitx] {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.35;
}

/* WH capacity bar */
.inv-wh-cap[b-ad4yewtitx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inv-wh-cap-bar[b-ad4yewtitx] {
    flex: 1;
    height: 6px;
    background: var(--mud-palette-divider);
    border-radius: 3px;
    overflow: hidden;
}

.inv-wh-cap-fill[b-ad4yewtitx] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.inv-wh-cap-text[b-ad4yewtitx] {
    font-size: 0.68rem;
    opacity: 0.4;
    white-space: nowrap;
}

/* WH zones */
.inv-wh-zones[b-ad4yewtitx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inv-wh-zone[b-ad4yewtitx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    padding: 4px 0;
}

.inv-wh-zone-name[b-ad4yewtitx] { font-weight: 600; flex: 1; }
.inv-wh-zone-type[b-ad4yewtitx] { font-size: 0.65rem; opacity: 0.35; }
.inv-wh-zone-count[b-ad4yewtitx] { font-size: 0.7rem; opacity: 0.5; font-variant-numeric: tabular-nums; }

.inv-wh-warn[b-ad4yewtitx] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: #f59e0b;
    padding: 6px 10px;
    background: rgba(245,158,11,0.06);
    border-radius: 6px;
}

/* ── Card (analytics) ────────────────────────────────────── */
.inv-card[b-ad4yewtitx] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
}

.inv-card-head[b-ad4yewtitx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.inv-card-title[b-ad4yewtitx] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.4;
}

.inv-card-badge[b-ad4yewtitx] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    opacity: 0.55;
}

.inv-card-badge--warn[b-ad4yewtitx] {
    background: rgba(245,158,11,0.1);
    border-color: rgba(245,158,11,0.25);
    color: #fbbf24;
    opacity: 1;
}

.inv-card-body[b-ad4yewtitx] { padding: 14px 16px; }

/* ── KPI strip ───────────────────────────────────────────── */
.inv-kpi-strip[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.inv-kpi[b-ad4yewtitx] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}

.inv-kpi-num[b-ad4yewtitx] {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}

.inv-kpi-lbl[b-ad4yewtitx] {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.35;
}

/* ── Analytics rows ──────────────────────────────────────── */
.inv-analytics-row[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Bar chart rows */
.inv-bar-row[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: 100px 1fr 80px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.inv-bar-label[b-ad4yewtitx] {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.6;
    text-transform: capitalize;
}

.inv-bar-track[b-ad4yewtitx] {
    height: 8px;
    background: var(--mud-palette-divider);
    border-radius: 4px;
    overflow: hidden;
}

.inv-bar-fill[b-ad4yewtitx] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.inv-bar--hardware[b-ad4yewtitx]    { background: #2563eb; }
.inv-bar--networking[b-ad4yewtitx]  { background: #7c3aed; }
.inv-bar--peripherals[b-ad4yewtitx] { background: #ec4899; }
.inv-bar--storage[b-ad4yewtitx]     { background: #059669; }
.inv-bar--cables[b-ad4yewtitx]      { background: #d97706; }
.inv-bar--consumables[b-ad4yewtitx] { background: #6b7280; }

.inv-bar-val[b-ad4yewtitx] {
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    opacity: 0.6;
}

/* Top movers / slow movers rows */
.inv-top-row[b-ad4yewtitx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(128,128,128,0.06);
    font-size: 0.82rem;
}

.inv-top-row:last-child[b-ad4yewtitx] { border-bottom: none; }

.inv-top-count[b-ad4yewtitx] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: #059669;
}

.inv-top-days[b-ad4yewtitx] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 700;
    color: #d97706;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .inv-header[b-ad4yewtitx] { flex-direction: column; align-items: flex-start; }
    .inv-kpi-strip[b-ad4yewtitx] { grid-template-columns: repeat(3, 1fr); }
    .inv-po-cards[b-ad4yewtitx] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .inv-page[b-ad4yewtitx] { padding: var(--space-4); }
    .inv-tabs[b-ad4yewtitx] { flex-wrap: wrap; }
    .inv-kpi-strip[b-ad4yewtitx] { grid-template-columns: repeat(2, 1fr); }
    .inv-analytics-row[b-ad4yewtitx] { grid-template-columns: 1fr; }
    .inv-po-cards[b-ad4yewtitx] { grid-template-columns: 1fr; }
    .inv-wh-grid[b-ad4yewtitx] { grid-template-columns: 1fr; }
}

/* ── Add warehouse card ─────────────────────────────────── */
.inv-wh-card--add[b-ad4yewtitx] {
    border-style: dashed;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    gap: 10px;
    transition: opacity 0.15s, transform 0.15s;
}

.inv-wh-card--add:hover[b-ad4yewtitx] {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* ── Warehouse dialog ───────────────────────────────────── */
.inv-dlg-backdrop[b-ad4yewtitx] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.inv-dlg[b-ad4yewtitx] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.inv-dlg-head[b-ad4yewtitx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.inv-dlg-title[b-ad4yewtitx] {
    font-size: 0.95rem;
    font-weight: 800;
}

.inv-dlg-close[b-ad4yewtitx] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-primary);
    opacity: 0.5;
    transition: opacity 0.12s;
}

.inv-dlg-close:hover[b-ad4yewtitx] { opacity: 1; }

.inv-dlg-body[b-ad4yewtitx] {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.inv-dlg-footer[b-ad4yewtitx] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.inv-dlg-field[b-ad4yewtitx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.inv-dlg-row[b-ad4yewtitx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.inv-dlg-label[b-ad4yewtitx] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.45;
}

.inv-dlg-input[b-ad4yewtitx] {
    width: 100%;
    padding: 8px 11px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-size: 0.83rem;
    outline: none;
    transition: border-color 0.12s;
    box-sizing: border-box;
}

.inv-dlg-input:focus[b-ad4yewtitx] { border-color: var(--mud-palette-primary); }

.inv-dlg-textarea[b-ad4yewtitx] {
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.inv-dlg-color-row[b-ad4yewtitx] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-dlg-color-input[b-ad4yewtitx] {
    width: 34px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--mud-palette-divider);
    padding: 2px;
    cursor: pointer;
    background: none;
}

.inv-dlg-color-dot[b-ad4yewtitx] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s;
}

.inv-dlg-color-dot:hover[b-ad4yewtitx] { transform: scale(1.2); }
.inv-dlg-color-dot.active[b-ad4yewtitx] { border-color: var(--mud-palette-text-primary); }

.inv-dlg-btn-cancel[b-ad4yewtitx] {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: background 0.12s;
}

.inv-dlg-btn-cancel:hover[b-ad4yewtitx] { background: rgba(128,128,128,0.07); }

.inv-dlg-btn-save[b-ad4yewtitx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: 8px;
    border: none;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.12s;
}

.inv-dlg-btn-save:hover[b-ad4yewtitx] { opacity: 0.88; }

@media (max-width: 600px) {
    .inv-dlg-row[b-ad4yewtitx] { grid-template-columns: 1fr; }
}
/* /Components/app/invoices/Invoices.razor.rz.scp.css */
/* ============================================================
   Invoices — Revamped Ledger
   ============================================================ */

.iv-page[b-o5grravv6a] {
    padding: var(--space-6) var(--space-8);
    max-width: 1600px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Header ──────────────────────────────────────────────── */
.iv-header[b-o5grravv6a] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.iv-header-left h1[b-o5grravv6a] {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.title-accent[b-o5grravv6a] {
    display: inline-block;
    width: 4px;
    height: 1.6rem;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.iv-vitals[b-o5grravv6a] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
    flex-wrap: wrap;
}

.iv-vital-num[b-o5grravv6a] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.iv-vital--green[b-o5grravv6a] { color: #059669; }
.iv-vital--amber[b-o5grravv6a] { color: #d97706; }
.iv-vital--red[b-o5grravv6a]   { color: #dc2626; }
.iv-vital--blue[b-o5grravv6a]  { color: #2563eb; }

.iv-vital-lbl[b-o5grravv6a] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.38;
    margin-left: 5px;
    margin-right: 14px;
}

.iv-vital-rule[b-o5grravv6a] {
    width: 1px;
    height: 18px;
    background: rgba(128,128,128,0.2);
    margin-right: 14px;
    align-self: center;
    display: inline-block;
    vertical-align: middle;
}

/* ── Tabs ────────────────────────────────────────────────── */
.iv-header-right[b-o5grravv6a] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.iv-tabs[b-o5grravv6a] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
}

.iv-tab[b-o5grravv6a] {
    padding: 7px 14px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.14s;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.iv-tab:hover[b-o5grravv6a] { color: var(--mud-palette-text-primary); }

.iv-tab.active[b-o5grravv6a] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.iv-tab--open.active[b-o5grravv6a]    { color: #d97706; }
.iv-tab--overdue.active[b-o5grravv6a] { color: #dc2626; }
.iv-tab--paid.active[b-o5grravv6a]    { color: #059669; }
.iv-tab--draft.active[b-o5grravv6a]   { color: #6b7280; }

.iv-tab-count[b-o5grravv6a] {
    font-size: 0.6rem;
    font-weight: 800;
    background: rgba(128,128,128,0.12);
    padding: 1px 5px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}


/* ── Toolbar ─────────────────────────────────────────────── */
.iv-toolbar[b-o5grravv6a] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.iv-toolbar-spacer[b-o5grravv6a] { flex: 1; }

[b-o5grravv6a] .iv-search { width: 280px; }

.iv-new-btn[b-o5grravv6a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.12s;
    white-space: nowrap;
}

.iv-new-btn:hover[b-o5grravv6a] { opacity: 0.85; }


/* ── Loading / Empty ─────────────────────────────────────── */
.iv-loading[b-o5grravv6a], .iv-empty[b-o5grravv6a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 40vh;
    opacity: 0.4;
    font-size: 0.8rem;
}


/* ── Ledger table ────────────────────────────────────────── */
.iv-ledger[b-o5grravv6a] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.iv-ledger-head[b-o5grravv6a] {
    display: grid;
    grid-template-columns: 130px 1fr 100px 100px 100px 80px 100px 80px 140px;
    padding: 10px 16px 10px 20px;
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid var(--mud-palette-divider);
    gap: var(--space-3);
    align-items: center;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
    min-width: 1000px;
}

.iv-row-wrap[b-o5grravv6a] {
    border-bottom: 1px solid rgba(128,128,128,0.06);
}

.iv-row-wrap:last-child[b-o5grravv6a] { border-bottom: none; }

.iv-row[b-o5grravv6a] {
    display: grid;
    grid-template-columns: 130px 1fr 100px 100px 100px 80px 100px 80px 140px;
    padding: 0 16px 0 0;
    gap: var(--space-3);
    align-items: center;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
    min-height: 52px;
    min-width: 1000px;
}

.iv-row:hover[b-o5grravv6a] { background: rgba(128,128,128,0.03); }
.iv-row--expanded[b-o5grravv6a] { background: rgba(128,128,128,0.025); }

/* Accent stripe */
.iv-row-accent[b-o5grravv6a] {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}

.iv-accent--open[b-o5grravv6a]    { background: #f59e0b; }
.iv-accent--paid[b-o5grravv6a]    { background: #10b981; }
.iv-accent--overdue[b-o5grravv6a] { background: #ef4444; }
.iv-accent--draft[b-o5grravv6a]   { background: #9ca3af; }

/* Columns */
.iv-col-num[b-o5grravv6a] { padding-left: 20px; }

.iv-invoice-num[b-o5grravv6a] {
    font-size: 0.78rem;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: 0.03em;
    opacity: 0.8;
}

.iv-col-customer[b-o5grravv6a] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.iv-avatar[b-o5grravv6a] {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--mud-palette-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
}

.iv-customer-name[b-o5grravv6a] {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iv-muted[b-o5grravv6a] { opacity: 0.3; }

.iv-col-issued[b-o5grravv6a], .iv-col-due[b-o5grravv6a] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.55;
    white-space: nowrap;
}

.iv-col-due[b-o5grravv6a] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.iv-overdue-date[b-o5grravv6a] { color: #ef4444 !important; opacity: 1 !important; font-weight: 700 !important; }

.iv-overdue-tag[b-o5grravv6a] {
    width: 16px; height: 16px;
    background: #ef4444;
    color: #fff;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.iv-col-subtotal[b-o5grravv6a], .iv-col-vat[b-o5grravv6a] {
    font-size: 0.78rem;
    text-align: right;
}

.iv-col-total[b-o5grravv6a] { text-align: right; }

.iv-amount[b-o5grravv6a] {
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.iv-cell-mono[b-o5grravv6a] { font-family: monospace; font-size: 0.74rem; }
.iv-cell-bold[b-o5grravv6a] { font-weight: 700; }

/* Status badge */
.iv-status-badge[b-o5grravv6a] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.iv-status--open[b-o5grravv6a]    { background: rgba(245,158,11,0.12); color: #d97706; }
.iv-status--paid[b-o5grravv6a]    { background: rgba(16,185,129,0.12); color: #059669; }
.iv-status--overdue[b-o5grravv6a] { background: rgba(239,68,68,0.12);  color: #dc2626; }
.iv-status--draft[b-o5grravv6a]   { background: rgba(107,114,128,0.12); color: #6b7280; }

/* Actions */
.iv-col-actions[b-o5grravv6a] {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.15s;
}

.iv-row:hover .iv-col-actions[b-o5grravv6a],
.iv-row--expanded .iv-col-actions[b-o5grravv6a] { opacity: 1; }

.iv-action-btn[b-o5grravv6a] {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.4;
    transition: background 0.12s, opacity 0.12s;
    flex-shrink: 0;
}

.iv-action-btn .mud-icon-root[b-o5grravv6a] { font-size: 0.95rem !important; }
.iv-action-btn:hover[b-o5grravv6a] { background: rgba(128,128,128,0.1); opacity: 1; }
.iv-action-btn--pay:hover[b-o5grravv6a] { background: rgba(16,185,129,0.1); color: #059669; }
.iv-action-btn--delete:hover[b-o5grravv6a] { background: rgba(239,68,68,0.08); color: #dc2626; }
.iv-action-btn--expand[b-o5grravv6a] { opacity: 0.25; }
.iv-action-btn--expand:hover[b-o5grravv6a] { opacity: 1; }


/* ── Detail panel ────────────────────────────────────────── */
.iv-detail[b-o5grravv6a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
    padding: 1.25rem 1.5rem 1.5rem 20px;
    background: rgba(128,128,128,0.02);
    border-top: 1px solid rgba(128,128,128,0.08);
    animation: iv-slide-in-b-o5grravv6a 0.15s ease;
}

@keyframes iv-slide-in-b-o5grravv6a {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.iv-detail-section[b-o5grravv6a] { display: flex; flex-direction: column; gap: 0.6rem; }
.iv-detail-section--wide[b-o5grravv6a] { grid-column: 1 / -1; }

.iv-detail-label[b-o5grravv6a] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.35;
}

/* Line items table in detail */
.iv-lines-table[b-o5grravv6a] {
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.iv-lines-head[b-o5grravv6a], .iv-lines-row[b-o5grravv6a], .iv-lines-footer[b-o5grravv6a] {
    display: grid;
    grid-template-columns: 1fr 60px 100px 100px;
    padding: 8px 14px;
    align-items: center;
    font-size: 0.78rem;
}

.iv-lines-head[b-o5grravv6a] {
    background: rgba(128,128,128,0.04);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.iv-lines-row[b-o5grravv6a] { border-bottom: 1px solid rgba(128,128,128,0.05); }
.iv-lines-row:last-child[b-o5grravv6a] { border-bottom: none; }

.iv-lines-footer[b-o5grravv6a] {
    font-size: 0.75rem;
    opacity: 0.6;
    border-top: 1px solid rgba(128,128,128,0.06);
}

.iv-lines-footer--total[b-o5grravv6a] {
    font-weight: 800;
    opacity: 1;
    font-size: 0.85rem;
    border-top: 2px solid rgba(128,128,128,0.15);
}

.iv-lines-right[b-o5grravv6a] { text-align: right; }

/* Price breakdown (quick mode) */
.iv-price-table[b-o5grravv6a] { display: flex; flex-direction: column; gap: 4px; }

.iv-price-row[b-o5grravv6a] {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    opacity: 0.7;
    font-weight: 500;
    padding: 2px 0;
}

.iv-price-row--total[b-o5grravv6a] {
    font-weight: 800;
    opacity: 1;
    font-size: 0.88rem;
    padding-top: 6px;
    border-top: 1px solid rgba(128,128,128,0.15);
    margin-top: 2px;
}

/* Payment facts */
.iv-detail-facts[b-o5grravv6a] { display: flex; flex-direction: column; gap: 5px; }

.iv-fact[b-o5grravv6a] { display: flex; gap: 8px; font-size: 0.75rem; font-weight: 500; }

.iv-fact-lbl[b-o5grravv6a] {
    opacity: 0.4;
    font-weight: 700;
    min-width: 44px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-top: 1px;
}

.iv-detail-text[b-o5grravv6a] { font-size: 0.82rem; line-height: 1.6; opacity: 0.7; }


/* ═══════════════════════════════════════════════════════════
   DIALOG
   ═══════════════════════════════════════════════════════════ */
.iv-dialog-title[b-o5grravv6a] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.95rem;
}

.iv-dialog-title .mud-icon-root[b-o5grravv6a] { font-size: 1.2rem !important; }
.iv-dialog-title--danger[b-o5grravv6a] { color: #ef4444; }

.iv-dialog-body[b-o5grravv6a] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 4px;
}

/* Mode toggle */
.iv-mode-toggle[b-o5grravv6a] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 8px;
    width: fit-content;
}

.iv-mode-btn[b-o5grravv6a] {
    padding: 6px 16px;
    border-radius: 6px;
    border: none;
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.5);
    transition: all 0.14s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.iv-mode-btn:hover[b-o5grravv6a] { color: var(--mud-palette-text-primary); }
.iv-mode-btn.active[b-o5grravv6a] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* Dialog grid (two columns) */
.iv-dialog-grid[b-o5grravv6a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.iv-dialog-col[b-o5grravv6a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.iv-dialog-section-label[b-o5grravv6a] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.35;
    margin-bottom: -4px;
}

.iv-field-row[b-o5grravv6a] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.iv-fields[b-o5grravv6a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Amount section */
.iv-dialog-amount-section[b-o5grravv6a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid rgba(128,128,128,0.1);
    padding-top: 16px;
}

.iv-quick-amount[b-o5grravv6a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
}

.iv-quick-summary[b-o5grravv6a] {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    opacity: 0.6;
}

.iv-quick-total[b-o5grravv6a] {
    font-size: 0.9rem;
    opacity: 1;
    font-weight: 700;
}

/* Line items editor */
.iv-lines-editor[b-o5grravv6a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iv-lines-editor-head[b-o5grravv6a] {
    display: grid;
    grid-template-columns: 1fr 70px 120px 90px 36px;
    gap: 8px;
    padding: 0 4px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.35;
}

.iv-lines-editor-row[b-o5grravv6a] {
    display: grid;
    grid-template-columns: 1fr 70px 120px 90px 36px;
    gap: 8px;
    align-items: center;
}

.iv-le-total[b-o5grravv6a] {
    text-align: right;
    padding-right: 4px;
    font-size: 0.8rem;
}

.iv-add-line-btn[b-o5grravv6a] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px dashed rgba(128,128,128,0.25);
    background: none;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-primary);
    opacity: 0.6;
    transition: opacity 0.12s, border-color 0.12s;
    width: fit-content;
}

.iv-add-line-btn:hover[b-o5grravv6a] { opacity: 1; border-color: var(--mud-palette-primary); }

.iv-lines-summary[b-o5grravv6a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: flex-end;
    max-width: 260px;
    width: 100%;
    margin-top: 8px;
}

.iv-lines-summary-row[b-o5grravv6a] {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    opacity: 0.6;
    padding: 2px 0;
}

.iv-lines-summary-row--total[b-o5grravv6a] {
    font-weight: 800;
    font-size: 0.9rem;
    opacity: 1;
    padding-top: 6px;
    border-top: 2px solid rgba(128,128,128,0.15);
    margin-top: 2px;
}


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    .iv-page[b-o5grravv6a] { padding: var(--space-4); }
    .iv-header[b-o5grravv6a] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
    .iv-ledger-head[b-o5grravv6a] { display: none; }
    .iv-row[b-o5grravv6a] {
        grid-template-columns: 1fr auto auto;
        grid-template-rows: auto auto auto;
        padding: 10px 12px 10px 16px;
        min-height: auto;
        min-width: 0;
        gap: 4px 12px;
    }

    .iv-col-num[b-o5grravv6a] { grid-column: 1; grid-row: 1; padding-left: 8px; }
    .iv-col-customer[b-o5grravv6a] { grid-column: 1; grid-row: 2; padding-left: 8px; }
    .iv-col-total[b-o5grravv6a] { grid-column: 2; grid-row: 1; }
    .iv-col-status[b-o5grravv6a] { grid-column: 3; grid-row: 1; }
    .iv-col-due[b-o5grravv6a] { grid-column: 2; grid-row: 2; }
    .iv-col-actions[b-o5grravv6a] { grid-column: 3; grid-row: 2; opacity: 1; }
    .iv-col-issued[b-o5grravv6a], .iv-col-subtotal[b-o5grravv6a], .iv-col-vat[b-o5grravv6a] { display: none; }

    .iv-dialog-grid[b-o5grravv6a] { grid-template-columns: 1fr; }
    .iv-field-row[b-o5grravv6a] { grid-template-columns: 1fr; }

    .iv-lines-editor-head[b-o5grravv6a],
    .iv-lines-editor-row[b-o5grravv6a] {
        grid-template-columns: 1fr 50px 90px 70px 30px;
    }

    [b-o5grravv6a] .iv-search { width: 100%; }
}
/* /Components/app/marketing/CreateCampaignDialog.razor.rz.scp.css */
/* CreateCampaignDialog Landscape Layout */

[b-ffntxkttdx] .campaign-dialog-landscape {
    min-width: 900px;
    max-width: 1200px;
}

.campaign-layout[b-ffntxkttdx] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    min-height: 550px;
}

.campaign-settings[b-ffntxkttdx] {
    display: flex;
    flex-direction: column;
}

.campaign-editor[b-ffntxkttdx] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.editor-wrapper[b-ffntxkttdx] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.editor-wrapper[b-ffntxkttdx]  .rz-html-editor {
    flex: 1;
    min-height: 480px;
    height: 100%;
}

/* Fix Radzen editor content area - white text on white background issue */
.editor-wrapper[b-ffntxkttdx]  .rz-html-editor-content {
    background-color: #ffffff;
    color: #1a1a1a;
    min-height: 380px;
}

.editor-wrapper[b-ffntxkttdx]  .rz-html-editor-content p,
.editor-wrapper[b-ffntxkttdx]  .rz-html-editor-content span,
.editor-wrapper[b-ffntxkttdx]  .rz-html-editor-content div {
    color: #1a1a1a;
}

/* Editor toolbar styling for dark theme compatibility */
.editor-wrapper[b-ffntxkttdx]  .rz-html-editor-toolbar {
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}

.template-vars-table[b-ffntxkttdx] {
    font-size: 0.85rem;
}

.template-vars-table code[b-ffntxkttdx] {
    background: var(--mud-palette-background-gray);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Responsive: stack on smaller screens */
@media (max-width: 960px) {
    [b-ffntxkttdx] .campaign-dialog-landscape {
        min-width: auto;
        width: 100%;
    }

    .campaign-layout[b-ffntxkttdx] {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .campaign-editor[b-ffntxkttdx] {
        min-height: 400px;
    }

    .editor-wrapper[b-ffntxkttdx]  .rz-html-editor {
        min-height: 350px;
    }

    .editor-wrapper[b-ffntxkttdx]  .rz-html-editor-content {
        min-height: 280px;
    }
}
/* /Components/app/marketing/Marketing.razor.rz.scp.css */
/* ============================================
   Marketing — The Studio
   ============================================ */

.mk-page[b-us8y9vbdyx] {
    padding: var(--space-5) var(--space-8) var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ── Header ── */
.mk-header[b-us8y9vbdyx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.mk-header-left h1[b-us8y9vbdyx] {
    margin: 0 0 var(--space-2) 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.title-accent[b-us8y9vbdyx] {
    display: inline-block;
    width: 4px;
    height: 1.6rem;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Vitals */
.mk-vitals[b-us8y9vbdyx] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
}

.mk-vital-num[b-us8y9vbdyx] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.mk-vital-num--rate[b-us8y9vbdyx] { color: #10b981; }

.mk-vital-lbl[b-us8y9vbdyx] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.4;
    margin-left: 5px;
    margin-right: 14px;
}

.mk-vital-rule[b-us8y9vbdyx] {
    width: 1px;
    height: 0.9rem;
    background: currentColor;
    opacity: 0.15;
    margin-right: 14px;
    align-self: center;
}

/* Header right */
.mk-header-right[b-us8y9vbdyx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Section tabs */
.mk-section-tabs[b-us8y9vbdyx] {
    display: flex;
    gap: 2px;
    background: rgba(128,128,128,0.08);
    border-radius: 8px;
    padding: 3px;
}

.mk-stab[b-us8y9vbdyx] {
    background: transparent;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: 0.4;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.mk-stab .mud-icon-root[b-us8y9vbdyx] { font-size: 0.9rem !important; }
.mk-stab:hover[b-us8y9vbdyx] { opacity: 0.75; background: rgba(128,128,128,0.08); }
.mk-stab.active[b-us8y9vbdyx] { background: var(--mud-palette-surface); opacity: 1; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

/* ── Loading ── */
.mk-loading[b-us8y9vbdyx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

/* ══════════════════════════════════════
   CAMPAIGNS STUDIO — two-panel
   ══════════════════════════════════════ */
.mk-studio[b-us8y9vbdyx] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: 12px;
    overflow: hidden;
    flex: 1;
    min-height: 560px;
    background: var(--mud-palette-surface);
}

/* ── Queue (left) ── */
.mk-queue[b-us8y9vbdyx] {
    border-right: 1px solid rgba(128,128,128,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mk-queue-search[b-us8y9vbdyx] {
    padding: 12px;
    border-bottom: 1px solid rgba(128,128,128,0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mk-filter-pills[b-us8y9vbdyx] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.mk-fpill[b-us8y9vbdyx] {
    background: none;
    border: 1px solid rgba(128,128,128,0.18);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    color: inherit;
    opacity: 0.45;
    transition: all 0.12s;
}

.mk-fpill:hover[b-us8y9vbdyx] { opacity: 0.8; }
.mk-fpill.active[b-us8y9vbdyx] { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: #fff; opacity: 1; }

.mk-queue-empty[b-us8y9vbdyx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex: 1;
    opacity: 0.3;
    font-size: 0.75rem;
}

/* Campaign row */
.mk-row[b-us8y9vbdyx] {
    display: flex;
    align-items: stretch;
    cursor: pointer;
    border-bottom: 1px solid rgba(128,128,128,0.07);
    transition: background 0.12s;
    position: relative;
    min-height: 60px;
}

.mk-row:last-child[b-us8y9vbdyx] { border-bottom: none; }
.mk-row:hover[b-us8y9vbdyx] { background: rgba(128,128,128,0.04); }
.mk-row--active[b-us8y9vbdyx] { background: rgba(var(--mud-palette-primary-rgb), 0.05) !important; }

.mk-row-accent[b-us8y9vbdyx] {
    width: 3px;
    flex-shrink: 0;
    align-self: stretch;
}

.mk-accent--draft[b-us8y9vbdyx]     { background: #f59e0b; }
.mk-accent--scheduled[b-us8y9vbdyx] { background: #3b82f6; }
.mk-accent--sent[b-us8y9vbdyx]      { background: #10b981; }

.mk-row-body[b-us8y9vbdyx] {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.mk-row-top[b-us8y9vbdyx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

.mk-row-subject[b-us8y9vbdyx] {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.mk-row-age[b-us8y9vbdyx] {
    font-size: 0.62rem;
    opacity: 0.35;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 1px;
}

.mk-row-mid[b-us8y9vbdyx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mk-row-recipients[b-us8y9vbdyx] {
    font-size: 0.65rem;
    opacity: 0.4;
}

/* Status pill */
.mk-status-pill[b-us8y9vbdyx] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.mk-status--draft[b-us8y9vbdyx]     { background: rgba(245,158,11,0.12);  color: #d97706; }
.mk-status--scheduled[b-us8y9vbdyx] { background: rgba(59,130,246,0.12);  color: #2563eb; }
.mk-status--sent[b-us8y9vbdyx]      { background: rgba(16,185,129,0.12);  color: #059669; }

/* ── Detail (right) ── */
.mk-detail[b-us8y9vbdyx] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mk-detail--empty[b-us8y9vbdyx] {
    align-items: center;
    justify-content: center;
}

.mk-detail-placeholder[b-us8y9vbdyx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    opacity: 0.25;
    font-size: 0.75rem;
}

/* Detail head */
.mk-detail-head[b-us8y9vbdyx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(128,128,128,0.08);
    gap: var(--space-3);
    flex-wrap: wrap;
}

.mk-detail-subject[b-us8y9vbdyx] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.mk-detail-meta[b-us8y9vbdyx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mk-detail-time[b-us8y9vbdyx] {
    font-size: 0.72rem;
    opacity: 0.4;
}

.mk-detail-actions[b-us8y9vbdyx] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Stats strip */
.mk-stats-strip[b-us8y9vbdyx] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px 1.5rem;
    background: rgba(128,128,128,0.025);
    border-bottom: 1px solid rgba(128,128,128,0.07);
}

.mk-stat[b-us8y9vbdyx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 20px 0 0;
}

.mk-stat:first-child[b-us8y9vbdyx] { padding-left: 0; }

.mk-stat-num[b-us8y9vbdyx] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mk-stat-lbl[b-us8y9vbdyx] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.35;
}

.mk-stat-rule[b-us8y9vbdyx] {
    width: 1px;
    height: 2rem;
    background: rgba(128,128,128,0.15);
    margin: 0 20px 0 0;
    flex-shrink: 0;
}

/* Email preview */
.mk-detail-label[b-us8y9vbdyx] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.3;
    padding: 1rem 1.5rem 0.5rem;
}

.mk-email-preview[b-us8y9vbdyx] {
    margin: 0 1.5rem 1.5rem;
    border: 1px solid rgba(128,128,128,0.12);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.mk-email-subject-line[b-us8y9vbdyx] {
    padding: 10px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(128,128,128,0.05);
    border-bottom: 1px solid rgba(128,128,128,0.1);
    color: #000;
}

.mk-email-body[b-us8y9vbdyx] {
    padding: 16px;
    font-size: 0.82rem;
    line-height: 1.7;
    color: #333;
    max-height: 320px;
    overflow-y: auto;
}

/* ══════════════════════════════════════
   AUDIENCE
   ══════════════════════════════════════ */
.mk-audience[b-us8y9vbdyx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mk-audience-card[b-us8y9vbdyx] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.mk-audience-card--all[b-us8y9vbdyx] { border-left: 3px solid var(--mud-palette-primary); }

.mk-audience-icon[b-us8y9vbdyx] {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-primary);
    flex-shrink: 0;
}

.mk-audience-info[b-us8y9vbdyx] { flex: 1; min-width: 0; }

.mk-audience-name[b-us8y9vbdyx] {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.mk-audience-desc[b-us8y9vbdyx] {
    font-size: 0.72rem;
    opacity: 0.4;
}

.mk-audience-count[b-us8y9vbdyx] {
    font-size: 1.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    opacity: 0.6;
    min-width: 48px;
    text-align: right;
}



/* ══════════════════════════════════════
   ANALYTICS
   ══════════════════════════════════════ */
.mk-analytics[b-us8y9vbdyx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mk-analytics-vitals[b-us8y9vbdyx] {
    display: flex;
    gap: 0;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: 12px;
    overflow: hidden;
}

.mk-analytics-vital[b-us8y9vbdyx] {
    flex: 1;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid rgba(128,128,128,0.08);
}

.mk-analytics-vital:last-child[b-us8y9vbdyx] { border-right: none; }

.mk-analytics-num[b-us8y9vbdyx] {
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.mk-analytics-num.mk-rate[b-us8y9vbdyx] { color: #10b981; }

.mk-analytics-lbl[b-us8y9vbdyx] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.35;
}

.mk-analytics-label[b-us8y9vbdyx] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.35;
}

/* Analytics table */
.mk-analytics-table[b-us8y9vbdyx] {
    background: var(--mud-palette-surface);
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: 12px;
    overflow: hidden;
}

.mk-at-head[b-us8y9vbdyx] {
    display: grid;
    grid-template-columns: 1fr 100px 90px 110px;
    padding: 8px 16px;
    background: rgba(128,128,128,0.04);
    border-bottom: 1px solid rgba(128,128,128,0.1);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.4;
    gap: var(--space-3);
}

.mk-at-row[b-us8y9vbdyx] {
    display: grid;
    grid-template-columns: 1fr 100px 90px 110px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(128,128,128,0.06);
    gap: var(--space-3);
    align-items: center;
    transition: background 0.1s;
    font-size: 0.78rem;
}

.mk-at-row:last-child[b-us8y9vbdyx] { border-bottom: none; }
.mk-at-row:hover[b-us8y9vbdyx] { background: rgba(128,128,128,0.03); }

.mk-at-subject[b-us8y9vbdyx] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-at-num[b-us8y9vbdyx] { font-variant-numeric: tabular-nums; opacity: 0.6; }
.mk-at-date[b-us8y9vbdyx] { font-size: 0.72rem; opacity: 0.4; }

/* ── Responsive ── */
@media (max-width: 860px) {
    .mk-studio[b-us8y9vbdyx] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .mk-queue[b-us8y9vbdyx] { border-right: none; border-bottom: 1px solid rgba(128,128,128,0.1); max-height: 280px; overflow-y: auto; }

    .mk-analytics-vitals[b-us8y9vbdyx] { flex-wrap: wrap; }
    .mk-analytics-vital[b-us8y9vbdyx] { flex: 1 1 45%; }

    .mk-header-right[b-us8y9vbdyx] { flex-wrap: wrap; }
    .mk-page[b-us8y9vbdyx] { padding: var(--space-4); }
}
/* /Components/app/msi/Integrations.razor.rz.scp.css */
/* ============================================================
   Integrations — iCRM
   ============================================================ */

.ig-page[b-d87doto20f] {
    padding: var(--space-6) var(--space-8);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.ig-header[b-d87doto20f] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    flex-wrap: wrap;
}

.ig-header-left h1[b-d87doto20f] {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.ig-vitals[b-d87doto20f] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
    flex-wrap: wrap;
}

.ig-vital-num[b-d87doto20f] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.ig-vital--blue[b-d87doto20f]  { color: #2563eb; }
.ig-vital--green[b-d87doto20f] { color: #059669; }

.ig-vital-lbl[b-d87doto20f] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.38;
    margin-left: 5px;
    margin-right: 14px;
}

.ig-vital-rule[b-d87doto20f] {
    width: 1px;
    height: 18px;
    background: rgba(128,128,128,0.2);
    margin-right: 14px;
    align-self: center;
    display: inline-block;
    vertical-align: middle;
}

/* ── Tabs ────────────────────────────────────────────────── */
.ig-tabs[b-d87doto20f] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
}

.ig-tab[b-d87doto20f] {
    padding: 7px 16px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.14s;
}

.ig-tab:hover[b-d87doto20f] { color: var(--mud-palette-text-primary); }

.ig-tab.active[b-d87doto20f] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

/* ── Section ─────────────────────────────────────────────── */
.ig-section[b-d87doto20f] {
    margin-bottom: 24px;
}

.ig-section-head[b-d87doto20f] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.ig-section-icon[b-d87doto20f] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ig-section-icon--ms[b-d87doto20f] {
    background: rgba(128,128,128,0.06);
    border: 1px solid rgba(128,128,128,0.1);
}

.ig-section-title[b-d87doto20f] {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
}

.ig-section-sub[b-d87doto20f] {
    display: block;
    font-size: 0.75rem;
    opacity: 0.45;
    margin-top: 2px;
}

/* ── Card grid ───────────────────────────────────────────── */
.ig-grid[b-d87doto20f] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ig-card[b-d87doto20f] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s, box-shadow 0.12s;
}

.ig-card:hover[b-d87doto20f] {
    border-color: rgba(128,128,128,0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.ig-card--active[b-d87doto20f] {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px;
    padding: 15px 17px;
}

.ig-card--available[b-d87doto20f] { opacity: 0.65; }
.ig-card--available:hover[b-d87doto20f] { opacity: 0.85; }
.ig-card--active.ig-card--available[b-d87doto20f] { opacity: 1; }

.ig-card-head[b-d87doto20f] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.ig-card-icon[b-d87doto20f] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.ig-card-icon--lg[b-d87doto20f] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    font-size: 1rem;
}

.ig-card-info[b-d87doto20f] { flex: 1; min-width: 0; }

.ig-card-name[b-d87doto20f] {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.ig-card-desc[b-d87doto20f] {
    display: block;
    font-size: 0.72rem;
    opacity: 0.45;
    line-height: 1.4;
}

.ig-card-foot[b-d87doto20f] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(128,128,128,0.07);
}

.ig-conn-dot[b-d87doto20f] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ig-conn-dot--on[b-d87doto20f]  { background: #059669; box-shadow: 0 0 6px rgba(5,150,105,0.4); }
.ig-conn-dot--off[b-d87doto20f] { background: rgba(128,128,128,0.3); }

.ig-conn-label[b-d87doto20f] {
    font-size: 0.68rem;
    font-weight: 600;
}

.ig-conn-label--on[b-d87doto20f]  { color: #059669; }
.ig-conn-label--off[b-d87doto20f] { opacity: 0.4; }

.ig-sync-count[b-d87doto20f] {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.35;
    font-variant-numeric: tabular-nums;
}

/* ── Detail panel ────────────────────────────────────────── */
.ig-detail[b-d87doto20f] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 24px 28px;
    margin-top: 16px;
    animation: ig-slide-in-b-d87doto20f 0.2s ease;
}

@keyframes ig-slide-in-b-d87doto20f {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ig-detail-head[b-d87doto20f] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.ig-detail-title-wrap[b-d87doto20f] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ig-detail-title[b-d87doto20f] {
    font-size: 1.15rem;
    font-weight: 700;
}

.ig-detail-badge[b-d87doto20f] {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.ig-detail-badge--on[b-d87doto20f]  { border-color: rgba(5,150,105,0.3);  color: #34d399; }
.ig-detail-badge--off[b-d87doto20f] { border-color: rgba(128,128,128,0.2); color: rgba(128,128,128,0.5); }

.ig-close-btn[b-d87doto20f] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-primary);
    opacity: 0.4;
    transition: opacity 0.12s;
}

.ig-close-btn:hover[b-d87doto20f] { opacity: 1; }

.ig-detail-desc[b-d87doto20f] {
    font-size: 0.85rem;
    line-height: 1.65;
    opacity: 0.6;
    margin: 0 0 20px;
}

/* Status bar */
.ig-status-bar[b-d87doto20f] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: rgba(128,128,128,0.03);
    border: 1px solid rgba(128,128,128,0.07);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.ig-status-item[b-d87doto20f] {
    padding: 12px 16px;
    border-right: 1px solid rgba(128,128,128,0.07);
}

.ig-status-item:last-child[b-d87doto20f] { border-right: none; }

.ig-status-label[b-d87doto20f] {
    display: block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.3;
    margin-bottom: 4px;
}

.ig-status-value[b-d87doto20f] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
}

.ig-status-value--ok[b-d87doto20f] { color: #059669; }

/* Features */
.ig-feat-section[b-d87doto20f] {
    margin-bottom: 20px;
}

.ig-feat-label[b-d87doto20f] {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.3;
    margin-bottom: 12px;
}

.ig-feat-grid[b-d87doto20f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ig-feat[b-d87doto20f] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(128,128,128,0.03);
    border: 1px solid rgba(128,128,128,0.06);
    border-radius: 8px;
}

.ig-feat-name[b-d87doto20f] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.ig-feat-sub[b-d87doto20f] {
    display: block;
    font-size: 0.7rem;
    opacity: 0.4;
    line-height: 1.4;
}

/* Permissions */
.ig-perm-section[b-d87doto20f] {
    margin-bottom: 20px;
}

.ig-perm-list[b-d87doto20f] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ig-perm-tag[b-d87doto20f] {
    font-family: monospace;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(128,128,128,0.06);
    border: 1px solid rgba(128,128,128,0.08);
    opacity: 0.55;
}

/* Actions */
.ig-detail-actions[b-d87doto20f] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(128,128,128,0.08);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .ig-header[b-d87doto20f] { flex-direction: column; align-items: flex-start; }
    .ig-grid[b-d87doto20f] { grid-template-columns: repeat(2, 1fr); }
    .ig-feat-grid[b-d87doto20f] { grid-template-columns: 1fr; }
    .ig-status-bar[b-d87doto20f] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ig-page[b-d87doto20f] { padding: var(--space-4); }
    .ig-grid[b-d87doto20f] { grid-template-columns: 1fr; }
    .ig-status-bar[b-d87doto20f] { grid-template-columns: 1fr; }
}
/* /Components/app/notes/Notes.razor.rz.scp.css */
/* ============================================================
   Notes — Canvas page (iCRM)
   ============================================================ */

.nt-page[b-qfnlvbfbo2] {
    padding: var(--space-6) var(--space-8);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ── Header ────────────────────────────────────────────── */
.nt-header[b-qfnlvbfbo2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    flex-wrap: wrap;
}

.nt-header-left h1[b-qfnlvbfbo2] {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.title-accent[b-qfnlvbfbo2] {
    display: inline-block;
    width: 4px;
    height: 1.6rem;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Vitals */
.nt-vitals[b-qfnlvbfbo2] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
    flex-wrap: wrap;
}

.nt-vital-num[b-qfnlvbfbo2] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.nt-vital--blue[b-qfnlvbfbo2] { color: #2563eb; }

.nt-vital-lbl[b-qfnlvbfbo2] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
    margin-left: 5px;
    margin-right: 14px;
}

.nt-vital-rule[b-qfnlvbfbo2] {
    width: 1px;
    height: 0.9rem;
    background: currentColor;
    opacity: 0.15;
    margin-right: 14px;
    align-self: center;
}

.nt-vital-saved[b-qfnlvbfbo2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.45;
    color: var(--mud-palette-success);
}

/* Header right */
.nt-header-right[b-qfnlvbfbo2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.nt-search-btn[b-qfnlvbfbo2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(128,128,128,0.18);
    background: var(--mud-palette-surface);
    border-radius: 8px;
    font-size: 0.78rem;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.15s ease;
}

.nt-search-btn:hover[b-qfnlvbfbo2] {
    opacity: 1;
    border-color: var(--mud-palette-primary);
}

.nt-kbd[b-qfnlvbfbo2] {
    font-size: 0.62rem;
    border: 1px solid rgba(128,128,128,0.25);
    border-radius: 4px;
    padding: 1px 6px;
    opacity: 0.55;
    font-family: monospace;
    margin-left: 4px;
}

/* View switch */
.nt-view-switch[b-qfnlvbfbo2] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
}

.nt-view-btn[b-qfnlvbfbo2] {
    padding: 6px 14px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    transition: all 0.15s ease;
}

.nt-view-btn:hover[b-qfnlvbfbo2] { opacity: 0.8; }

.nt-view-btn.active[b-qfnlvbfbo2] {
    background: var(--mud-palette-surface);
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Loading ───────────────────────────────────────────── */
.nt-loading[b-qfnlvbfbo2] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

/* ── Canvas ────────────────────────────────────────────── */
.nt-canvas-wrap[b-qfnlvbfbo2] {
    flex: 1;
    min-height: calc(100vh - 220px);
    overflow: auto;
    border-radius: 16px;
    position: relative;
    border: 1px solid rgba(128,128,128,0.12);
}

.nt-canvas[b-qfnlvbfbo2] {
    position: relative;
    width: 4000px;
    height: 3000px;
    background: var(--mud-palette-surface);
    background-image: radial-gradient(circle, rgba(127,127,127,0.18) 1px, transparent 1px);
    background-size: 20px 20px;
    cursor: grab;
    outline: none;
}

.nt-canvas--panning[b-qfnlvbfbo2] {
    cursor: grabbing !important;
    user-select: none;
}

/* ── Floating overlay (stays in viewport while canvas scrolls) ── */
.nt-canvas-overlay[b-qfnlvbfbo2] {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    z-index: 10;
    pointer-events: none;
}

.nt-overlay-bottom[b-qfnlvbfbo2] {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
}

.nt-overlay-bottom > *[b-qfnlvbfbo2] {
    pointer-events: auto;
}

.nt-canvas-hint[b-qfnlvbfbo2] {
    font-size: 0.68rem;
    opacity: 0.3;
    font-style: italic;
    user-select: none;
    pointer-events: none;
    margin-bottom: 6px;
}

.nt-empty[b-qfnlvbfbo2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.nt-empty-hint[b-qfnlvbfbo2] {
    font-size: 0.85rem;
    opacity: 0.32;
    font-style: italic;
}

/* ── Items (base) ──────────────────────────────────────── */
.nt-item[b-qfnlvbfbo2] {
    position: absolute;
    cursor: default;
    transition: box-shadow 0.15s ease, transform 0.25s ease;
}

.nt-item--dragging[b-qfnlvbfbo2],
.nt-item--rotating[b-qfnlvbfbo2] {
    transition: none !important;
    user-select: none;
}

.nt-item:hover[b-qfnlvbfbo2] {
    z-index: 5;
}

.nt-item:hover .nt-item-del[b-qfnlvbfbo2],
.nt-item:hover .nt-item-rotate[b-qfnlvbfbo2] {
    opacity: 0.5;
}

.nt-item-del[b-qfnlvbfbo2],
.nt-item-rotate[b-qfnlvbfbo2] {
    position: absolute;
    top: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(128,128,128,0.25);
    background: var(--mud-palette-surface);
    cursor: pointer;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    color: inherit;
    padding: 0;
}

.nt-item-del[b-qfnlvbfbo2] {
    right: -8px;
}

.nt-item-rotate[b-qfnlvbfbo2] {
    right: 14px;
    cursor: grab;
}

.nt-item--rotating .nt-item-rotate[b-qfnlvbfbo2],
.nt-item-rotate:active[b-qfnlvbfbo2] {
    cursor: grabbing;
}

.nt-item-del:hover[b-qfnlvbfbo2] {
    opacity: 1 !important;
    color: #ef4444;
    border-color: #ef4444;
}

.nt-item-rotate:hover[b-qfnlvbfbo2] {
    opacity: 1 !important;
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
}

/* ── Plain text ────────────────────────────────────────── */
.nt-item--text .nt-text-body[b-qfnlvbfbo2] {
    font-size: 0.82rem;
    line-height: 1.55;
    outline: none;
    padding: 8px 11px;
    border-radius: 8px;
    word-wrap: break-word;
    white-space: pre-wrap;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid rgba(128,128,128,0.18);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    min-height: 1.6em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nt-item--text .nt-text-body:hover[b-qfnlvbfbo2] {
    border-color: rgba(128,128,128,0.32);
}

.nt-item--text .nt-text-body:focus[b-qfnlvbfbo2] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.nt-tag[b-qfnlvbfbo2] {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.78rem;
}

/* ── Sticky note ───────────────────────────────────────── */
.nt-sticky-drag-handle[b-qfnlvbfbo2],
.nt-text-drag-handle[b-qfnlvbfbo2] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    cursor: grab;
    opacity: 0.25;
    transition: opacity 0.15s ease;
    border-radius: 8px 8px 0 0;
    user-select: none;
}

.nt-sticky-drag-handle:hover[b-qfnlvbfbo2],
.nt-text-drag-handle:hover[b-qfnlvbfbo2] {
    opacity: 0.6;
}

.nt-sticky-drag-handle:active[b-qfnlvbfbo2],
.nt-text-drag-handle:active[b-qfnlvbfbo2] {
    cursor: grabbing;
}

.nt-sticky-drag-handle[b-qfnlvbfbo2] {
    background: rgba(0,0,0,0.04);
}

.nt-text-drag-handle[b-qfnlvbfbo2] {
    background: rgba(128,128,128,0.06);
    border: 1px solid rgba(128,128,128,0.18);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.nt-item--text .nt-text-body[b-qfnlvbfbo2] {
    border-radius: 0 0 8px 8px;
}

.nt-item--sticky .nt-sticky-body[b-qfnlvbfbo2] {
    background: #FAEEDA;
    color: #633806;
    border-radius: 0 0 8px 8px;
    padding: 10px 12px;
    font-size: 0.8rem;
    line-height: 1.5;
    outline: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    word-wrap: break-word;
}

.nt-item--amber .nt-sticky-body[b-qfnlvbfbo2] { background: #FAEEDA; color: #633806; }
.nt-item--blue  .nt-sticky-body[b-qfnlvbfbo2] { background: #E6F1FB; color: #0C447C; }
.nt-item--green .nt-sticky-body[b-qfnlvbfbo2] { background: #EAF3DE; color: #27500A; }
.nt-item--pink  .nt-sticky-body[b-qfnlvbfbo2] { background: #FBEAF0; color: #72243E; }
.nt-item--gray  .nt-sticky-body[b-qfnlvbfbo2] { background: #F1EFE8; color: #444441; }

/* ── Image ─────────────────────────────────────────────── */
.nt-item--image .nt-image-frame[b-qfnlvbfbo2] {
    width: 100%;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(128,128,128,0.12);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.nt-item--image img[b-qfnlvbfbo2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nt-image-placeholder[b-qfnlvbfbo2] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.7rem;
    opacity: 0.6;
}

/* ── Pin ───────────────────────────────────────────────── */
.nt-pin[b-qfnlvbfbo2] {
    background: var(--mud-palette-surface);
    border: 1px solid rgba(128,128,128,0.18);
    border-left: 3px solid #2563eb;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.nt-pin--customer[b-qfnlvbfbo2]    { border-left-color: #2563eb; }
.nt-pin--appointment[b-qfnlvbfbo2] { border-left-color: #1D9E75; }
.nt-pin--invoice[b-qfnlvbfbo2]     { border-left-color: #d97706; }
.nt-pin--stock[b-qfnlvbfbo2]       { border-left-color: #7c3aed; }

.nt-pin-head[b-qfnlvbfbo2] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.45;
    margin-bottom: 3px;
}

.nt-pin-title[b-qfnlvbfbo2] {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
}

.nt-pin-sub[b-qfnlvbfbo2] {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: 2px;
}

/* ── Floating canvas controls ──────────────────────────── */
.nt-toolbar[b-qfnlvbfbo2] {
    width: fit-content;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(128,128,128,0.18);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.nt-tool[b-qfnlvbfbo2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: 0.65;
    transition: all 0.15s ease;
}

.nt-tool:hover[b-qfnlvbfbo2] {
    opacity: 1;
    background: rgba(128,128,128,0.08);
}

.nt-zoom[b-qfnlvbfbo2] {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(128,128,128,0.18);
    border-radius: 8px;
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.nt-zoom-divider[b-qfnlvbfbo2] {
    width: 1px;
    height: 14px;
    background: rgba(128,128,128,0.2);
    margin: 0 2px;
}

.nt-zoom button[b-qfnlvbfbo2] {
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.85rem;
    line-height: 1;
}

.nt-zoom button:hover[b-qfnlvbfbo2] { background: rgba(128,128,128,0.08); }

.nt-zoom span[b-qfnlvbfbo2] {
    padding: 0 6px;
    opacity: 0.55;
    font-variant-numeric: tabular-nums;
}

/* ── Timeline view ─────────────────────────────────────── */
.nt-timeline[b-qfnlvbfbo2] {
    background: var(--mud-palette-surface);
    border: 1px solid rgba(128,128,128,0.12);
    border-radius: 16px;
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.nt-tl-group[b-qfnlvbfbo2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.nt-tl-date[b-qfnlvbfbo2] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.42;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.nt-tl-list[b-qfnlvbfbo2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nt-tl-row[b-qfnlvbfbo2] {
    display: grid;
    grid-template-columns: 28px 1fr 60px;
    align-items: center;
    gap: 12px;
    padding: 9px 6px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.nt-tl-row:hover[b-qfnlvbfbo2] { background: rgba(128,128,128,0.05); }

.nt-tl-icon[b-qfnlvbfbo2] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128,128,128,0.1);
    opacity: 0.7;
}

.nt-tl-icon--text[b-qfnlvbfbo2]   { background: rgba(99,102,241,0.12);  color: #4f46e5; }
.nt-tl-icon--sticky[b-qfnlvbfbo2] { background: rgba(217,119,6,0.14);   color: #b45309; }
.nt-tl-icon--image[b-qfnlvbfbo2]  { background: rgba(124,58,237,0.12);  color: #7c3aed; }
.nt-tl-icon--pin[b-qfnlvbfbo2]    { background: rgba(37,99,235,0.12);   color: #2563eb; }

.nt-tl-content[b-qfnlvbfbo2] {
    font-size: 0.82rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-tl-time[b-qfnlvbfbo2] {
    font-size: 0.7rem;
    opacity: 0.42;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .nt-page[b-qfnlvbfbo2] {
        padding: var(--space-4);
    }
    .nt-header-right[b-qfnlvbfbo2] {
        width: 100%;
        justify-content: space-between;
    }
    .nt-search-btn span:not(.nt-kbd)[b-qfnlvbfbo2] { display: none; }
    .nt-kbd[b-qfnlvbfbo2] { display: none; }
}
/* /Components/app/planning/Planning.razor.rz.scp.css */
/* ============================================================
   Planning — iCRM  (team scheduling & resource allocation)
   ============================================================ */

.pl-page[b-mqd7pr85l8] {
    padding: var(--space-6) var(--space-8);
    min-height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.pl-header[b-mqd7pr85l8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    flex-wrap: wrap;
}

.pl-header-left h1[b-mqd7pr85l8] {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.pl-vitals[b-mqd7pr85l8] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
    flex-wrap: wrap;
}

.pl-vital-num[b-mqd7pr85l8] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.pl-vital--blue[b-mqd7pr85l8]   { color: #2563eb; }
.pl-vital--green[b-mqd7pr85l8]  { color: #059669; }
.pl-vital--purple[b-mqd7pr85l8] { color: #7c3aed; }
.pl-vital--amber[b-mqd7pr85l8]  { color: #d97706; }

.pl-vital-lbl[b-mqd7pr85l8] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.38;
    margin-left: 5px;
    margin-right: 14px;
}

.pl-vital-rule[b-mqd7pr85l8] {
    width: 1px;
    height: 18px;
    background: rgba(128,128,128,0.2);
    margin-right: 14px;
    align-self: center;
    display: inline-block;
    vertical-align: middle;
}

/* ── Tabs ────────────────────────────────────────────────── */
.pl-header-right[b-mqd7pr85l8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pl-tabs[b-mqd7pr85l8] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
}

.pl-tab[b-mqd7pr85l8] {
    padding: 7px 16px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.14s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pl-tab:hover[b-mqd7pr85l8] { color: var(--mud-palette-text-primary); }

.pl-tab.active[b-mqd7pr85l8] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.pl-new-btn[b-mqd7pr85l8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.12s;
    white-space: nowrap;
}

.pl-new-btn:hover[b-mqd7pr85l8] { opacity: 0.85; }

/* ── Section ─────────────────────────────────────────────── */
.pl-section[b-mqd7pr85l8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Week nav ────────────────────────────────────────────── */
.pl-week-nav[b-mqd7pr85l8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pl-nav-btn[b-mqd7pr85l8] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-primary);
    transition: all 0.12s;
}

.pl-nav-btn:hover[b-mqd7pr85l8] {
    background: var(--mud-palette-primary);
    color: #fff;
    border-color: var(--mud-palette-primary);
}

.pl-week-label[b-mqd7pr85l8] {
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 260px;
}

.pl-today-btn[b-mqd7pr85l8] {
    padding: 5px 14px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-primary);
    background: none;
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
}

.pl-today-btn:hover[b-mqd7pr85l8] {
    background: var(--mud-palette-primary);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════
   WEEK GRID
   ══════════════════════════════════════════════════════════ */
.pl-grid-wrap[b-mqd7pr85l8] {
    overflow-x: auto;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
}

.pl-grid[b-mqd7pr85l8] {
    display: grid;
    grid-template-columns: 180px repeat(7, 1fr);
    min-width: 900px;
}

/* Header cells */
.pl-grid-corner[b-mqd7pr85l8] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
    border-right: 1px solid rgba(128,128,128,0.06);
    background: rgba(128,128,128,0.02);
}

.pl-grid-day-head[b-mqd7pr85l8] {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--mud-palette-divider);
    border-right: 1px solid rgba(128,128,128,0.06);
    background: rgba(128,128,128,0.02);
}

.pl-grid-day-head:last-child[b-mqd7pr85l8] { border-right: none; }

.pl-grid-day--today[b-mqd7pr85l8] {
    background: rgba(37,99,235,0.04);
}

.pl-day-name[b-mqd7pr85l8] {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
}

.pl-day-num[b-mqd7pr85l8] {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.pl-day-num--today[b-mqd7pr85l8] {
    color: var(--mud-palette-primary);
}

/* Member cells */
.pl-grid-member[b-mqd7pr85l8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(128,128,128,0.06);
    border-right: 1px solid rgba(128,128,128,0.06);
    background: rgba(128,128,128,0.01);
}

.pl-member-avatar[b-mqd7pr85l8] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.pl-member-info[b-mqd7pr85l8] { display: flex; flex-direction: column; }

.pl-member-name[b-mqd7pr85l8] {
    font-size: 0.78rem;
    font-weight: 700;
}

.pl-member-role[b-mqd7pr85l8] {
    font-size: 0.62rem;
    opacity: 0.35;
}

/* Schedule cells */
.pl-grid-cell[b-mqd7pr85l8] {
    padding: 6px;
    border-bottom: 1px solid rgba(128,128,128,0.06);
    border-right: 1px solid rgba(128,128,128,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 56px;
}

.pl-grid-cell:nth-child(8n)[b-mqd7pr85l8] { border-right: none; }

.pl-grid-cell--today[b-mqd7pr85l8] {
    background: rgba(37,99,235,0.02);
}

/* Shift blocks */
.pl-shift[b-mqd7pr85l8] {
    padding: 4px 7px;
    border-radius: 5px;
    font-size: 0.65rem;
    line-height: 1.3;
    cursor: default;
    transition: opacity 0.12s;
}

.pl-shift:hover[b-mqd7pr85l8] { opacity: 0.8; }

.pl-shift--office[b-mqd7pr85l8]  { background: rgba(37,99,235,0.1);  border-left: 2px solid #2563eb; color: #60a5fa; }
.pl-shift--field[b-mqd7pr85l8]   { background: rgba(5,150,105,0.1);  border-left: 2px solid #059669; color: #34d399; }
.pl-shift--remote[b-mqd7pr85l8]  { background: rgba(124,58,237,0.1); border-left: 2px solid #7c3aed; color: #a78bfa; }
.pl-shift--on_call[b-mqd7pr85l8] { background: rgba(245,158,11,0.08); border-left: 2px solid #f59e0b; color: #fbbf24; }

.pl-shift-time[b-mqd7pr85l8] {
    display: block;
    font-weight: 700;
    font-family: monospace;
    font-size: 0.6rem;
    opacity: 0.7;
}

.pl-shift-label[b-mqd7pr85l8] {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════
   WORKLOAD VIEW
   ══════════════════════════════════════════════════════════ */
.pl-workload-grid[b-mqd7pr85l8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.pl-wl-card[b-mqd7pr85l8] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.12s, box-shadow 0.12s;
}

.pl-wl-card:hover[b-mqd7pr85l8] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.pl-wl-head[b-mqd7pr85l8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pl-wl-info[b-mqd7pr85l8] { flex: 1; }

.pl-wl-name[b-mqd7pr85l8] {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
}

.pl-wl-role[b-mqd7pr85l8] {
    display: block;
    font-size: 0.65rem;
    opacity: 0.4;
}

.pl-wl-pct[b-mqd7pr85l8] {
    font-size: 1.3rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pl-wl-bar-wrap[b-mqd7pr85l8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pl-wl-bar[b-mqd7pr85l8] {
    flex: 1;
    height: 8px;
    background: var(--mud-palette-divider);
    border-radius: 4px;
    overflow: hidden;
}

.pl-wl-fill[b-mqd7pr85l8] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.pl-wl-hours[b-mqd7pr85l8] {
    font-size: 0.7rem;
    opacity: 0.4;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pl-wl-breakdown[b-mqd7pr85l8] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pl-wl-tag[b-mqd7pr85l8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

.pl-wl-tag--office[b-mqd7pr85l8]  { background: rgba(37,99,235,0.08);  color: #60a5fa; }
.pl-wl-tag--field[b-mqd7pr85l8]   { background: rgba(5,150,105,0.08);  color: #34d399; }
.pl-wl-tag--remote[b-mqd7pr85l8]  { background: rgba(124,58,237,0.08); color: #a78bfa; }
.pl-wl-tag--on_call[b-mqd7pr85l8] { background: rgba(245,158,11,0.06); color: #fbbf24; }

/* Shift list inside workload card */
.pl-wl-shifts[b-mqd7pr85l8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-divider);
}

.pl-wl-shift-row[b-mqd7pr85l8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    padding: 3px 0;
}

.pl-wl-shift-day[b-mqd7pr85l8] {
    font-weight: 700;
    min-width: 28px;
    opacity: 0.45;
}

.pl-wl-shift-time[b-mqd7pr85l8] {
    font-family: monospace;
    font-size: 0.68rem;
    opacity: 0.5;
    min-width: 80px;
}

.pl-shift-type-dot[b-mqd7pr85l8] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pl-shift-type--office[b-mqd7pr85l8]  { background: #2563eb; }
.pl-shift-type--field[b-mqd7pr85l8]   { background: #059669; }
.pl-shift-type--remote[b-mqd7pr85l8]  { background: #7c3aed; }
.pl-shift-type--on_call[b-mqd7pr85l8] { background: #f59e0b; }

.pl-wl-shift-label[b-mqd7pr85l8] {
    opacity: 0.6;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════
   TEAM VIEW
   ══════════════════════════════════════════════════════════ */
.pl-team-grid[b-mqd7pr85l8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.pl-team-card[b-mqd7pr85l8] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform 0.12s, box-shadow 0.12s;
}

.pl-team-card:hover[b-mqd7pr85l8] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.pl-team-head[b-mqd7pr85l8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pl-team-avatar[b-mqd7pr85l8] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.pl-team-info[b-mqd7pr85l8] { flex: 1; }

.pl-team-name[b-mqd7pr85l8] {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
}

.pl-team-role-badge[b-mqd7pr85l8] {
    display: block;
    font-size: 0.65rem;
    opacity: 0.45;
}

.pl-team-status[b-mqd7pr85l8] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
}

.pl-team-status--available[b-mqd7pr85l8] { border-color: rgba(5,150,105,0.3);  color: #34d399; }
.pl-team-status--on_leave[b-mqd7pr85l8]  { border-color: rgba(245,158,11,0.3); color: #fbbf24; }
.pl-team-status--busy[b-mqd7pr85l8]      { border-color: rgba(220,38,38,0.3);  color: #f87171; }

.pl-team-stats[b-mqd7pr85l8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.pl-team-stat[b-mqd7pr85l8] { text-align: center; }

.pl-team-stat-num[b-mqd7pr85l8] {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pl-team-stat-lbl[b-mqd7pr85l8] {
    display: block;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.3;
}

.pl-team-contact[b-mqd7pr85l8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.75rem;
    opacity: 0.45;
}

.pl-team-skills[b-mqd7pr85l8] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pl-skill-tag[b-mqd7pr85l8] {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(128,128,128,0.07);
    color: rgba(255,255,255,0.45);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .pl-header[b-mqd7pr85l8] { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
    .pl-page[b-mqd7pr85l8] { padding: var(--space-4); }
    .pl-workload-grid[b-mqd7pr85l8] { grid-template-columns: 1fr; }
    .pl-team-grid[b-mqd7pr85l8] { grid-template-columns: 1fr; }
}
/* /Components/app/products/Products.razor.rz.scp.css */
/* ============================================================
   Products — iCRM
   ============================================================ */

.pr-page[b-mkz0nw0qlr] {
    padding: var(--space-6);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.pr-header[b-mkz0nw0qlr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.pr-header-left h1[b-mkz0nw0qlr] {
    margin: 0 0 10px;
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pr-vitals[b-mkz0nw0qlr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pr-vital-num[b-mkz0nw0qlr] {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--mud-palette-primary);
}

.pr-vital-lbl[b-mkz0nw0qlr] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.38;
}

.pr-vital-rule[b-mkz0nw0qlr] {
    width: 1px;
    height: 16px;
    background: rgba(128,128,128,0.2);
}

.pr-header-right[b-mkz0nw0qlr] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Tabs ────────────────────────────────────────────────── */
.pr-tabs[b-mkz0nw0qlr] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 4px;
    border-radius: 10px;
}

.pr-tab[b-mkz0nw0qlr] {
    padding: 7px 18px;
    border-radius: 7px;
    border: none;
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.14s;
}

.pr-tab:hover[b-mkz0nw0qlr] { color: var(--mud-palette-text-primary); }
.pr-tab.active[b-mkz0nw0qlr] {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

/* Add button */
.pr-add-btn[b-mkz0nw0qlr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 9px;
    border: none;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.12s;
}

.pr-add-btn:hover[b-mkz0nw0qlr] { opacity: 0.88; }

/* ── Loading / empty ─────────────────────────────────────── */
.pr-loading[b-mkz0nw0qlr] {
    display: flex;
    justify-content: center;
    padding: 5rem;
}

.pr-empty[b-mkz0nw0qlr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    font-size: 0.85rem;
    opacity: 0.45;
}

.pr-empty-btn[b-mkz0nw0qlr] {
    margin-top: 4px;
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px dashed rgba(128,128,128,0.35);
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-primary);
    opacity: 1;
    transition: all 0.12s;
}

.pr-empty-btn:hover[b-mkz0nw0qlr] { background: rgba(37,99,235,0.06); }

/* ── Product row list (landscape) ────────────────────────── */
.pr-list[b-mkz0nw0qlr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pr-row[b-mkz0nw0qlr] {
    display: grid;
    grid-template-columns: 44px 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
    transition: box-shadow 0.15s, transform 0.15s;
}

.pr-row:hover[b-mkz0nw0qlr] {
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    transform: translateY(-1px);
}

.pr-row--featured[b-mkz0nw0qlr] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.pr-row--inactive[b-mkz0nw0qlr] {
    opacity: 0.5;
    filter: grayscale(0.4);
}

/* Row icon */
.pr-row-icon[b-mkz0nw0qlr] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Row main info */
.pr-row-main[b-mkz0nw0qlr] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pr-row-top[b-mkz0nw0qlr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pr-row-name[b-mkz0nw0qlr] {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-row-badge[b-mkz0nw0qlr] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 20px;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.pr-row-inactive-tag[b-mkz0nw0qlr] {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(128,128,128,0.15);
    color: rgba(128,128,128,0.7);
    padding: 1px 7px;
    border-radius: 6px;
    flex-shrink: 0;
}

.pr-row-sub[b-mkz0nw0qlr] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pr-row-sku[b-mkz0nw0qlr] {
    font-size: 0.68rem;
    font-weight: 600;
    font-family: monospace;
    opacity: 0.35;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.pr-row-desc[b-mkz0nw0qlr] {
    font-size: 0.75rem;
    opacity: 0.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Row tags */
.pr-row-tags[b-mkz0nw0qlr] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.pr-duration-chip[b-mkz0nw0qlr] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(128,128,128,0.08);
    color: rgba(128,128,128,0.65);
}

/* Row price */
.pr-row-price[b-mkz0nw0qlr] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
    min-width: 100px;
    justify-content: flex-end;
}

.pr-row-price-val[b-mkz0nw0qlr] {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.pr-row-price-per[b-mkz0nw0qlr] {
    font-size: 0.7rem;
    opacity: 0.45;
    font-weight: 600;
}

/* Row actions */
.pr-row-actions[b-mkz0nw0qlr] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.pr-row:hover .pr-row-actions[b-mkz0nw0qlr] { opacity: 1; }

.pr-category-chip[b-mkz0nw0qlr] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(37,99,235,0.1);
    color: var(--mud-palette-primary);
}

.pr-warehouse-chip[b-mkz0nw0qlr] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(5,150,105,0.1);
    color: #059669;
}

/* ── Card actions (shared) ───────────────────────────────── */

.pr-action-btn[b-mkz0nw0qlr] {
    flex: 1;
    padding: 6px;
    border-radius: 7px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    color: var(--mud-palette-text-primary);
}

.pr-action-btn--edit:hover[b-mkz0nw0qlr]       { background: rgba(37,99,235,0.1);  color: #2563eb; border-color: #2563eb; }
.pr-action-btn--activate:hover[b-mkz0nw0qlr]   { background: rgba(34,197,94,0.1);  color: #16a34a; border-color: #16a34a; }
.pr-action-btn--deactivate:hover[b-mkz0nw0qlr] { background: rgba(107,114,128,0.1);color: #6b7280; border-color: #6b7280; }
.pr-action-btn--featured:hover[b-mkz0nw0qlr]   { background: rgba(249,115,22,0.1); color: #f97316; border-color: #f97316; }
.pr-action-btn--unfeatured:hover[b-mkz0nw0qlr] { background: rgba(107,114,128,0.1);color: #6b7280; border-color: #6b7280; }
.pr-action-btn--delete:hover[b-mkz0nw0qlr]     { background: rgba(239,68,68,0.1);  color: #ef4444; border-color: #ef4444; }

/* ── Dialog ──────────────────────────────────────────────── */
.pr-dialog-backdrop[b-mkz0nw0qlr] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pr-dialog[b-mkz0nw0qlr] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.pr-dialog--wide[b-mkz0nw0qlr] {
    max-width: 860px;
}

.pr-form-row[b-mkz0nw0qlr] {
    display: grid;
    gap: 14px;
}

.pr-form-row--3[b-mkz0nw0qlr] {
    grid-template-columns: 1fr 1fr 1fr;
}

.pr-form-row--2[b-mkz0nw0qlr] {
    grid-template-columns: 1fr 1fr;
}

.pr-inventory-hint[b-mkz0nw0qlr] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed var(--mud-palette-divider);
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.6;
}

.pr-dialog-head[b-mkz0nw0qlr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

.pr-dialog-title[b-mkz0nw0qlr] {
    font-size: 0.95rem;
    font-weight: 800;
}

.pr-dialog-close[b-mkz0nw0qlr] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-primary);
    opacity: 0.5;
    transition: opacity 0.12s;
}

.pr-dialog-close:hover[b-mkz0nw0qlr] { opacity: 1; }

.pr-dialog-body[b-mkz0nw0qlr] {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.pr-dialog-footer[b-mkz0nw0qlr] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--mud-palette-divider);
    flex-shrink: 0;
}

/* Form fields */
.pr-field[b-mkz0nw0qlr] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pr-field-row[b-mkz0nw0qlr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.pr-field-row--mt[b-mkz0nw0qlr] { margin-top: 8px; }

.pr-field--half[b-mkz0nw0qlr] { /* used in grid */ }

.pr-label[b-mkz0nw0qlr] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.45;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pr-label-hint[b-mkz0nw0qlr] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.65rem;
    opacity: 0.7;
    color: #059669;
}

.pr-input[b-mkz0nw0qlr] {
    width: 100%;
    padding: 8px 11px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-size: 0.83rem;
    outline: none;
    transition: border-color 0.12s;
    box-sizing: border-box;
}

.pr-input:focus[b-mkz0nw0qlr] { border-color: var(--mud-palette-primary); }
.pr-textarea[b-mkz0nw0qlr] { min-height: 90px; resize: vertical; font-family: inherit; line-height: 1.5; }
.pr-select[b-mkz0nw0qlr] { cursor: pointer; }

/* Type toggle */
.pr-type-toggle[b-mkz0nw0qlr] {
    display: flex;
    gap: 6px;
}

.pr-type-btn[b-mkz0nw0qlr] {
    padding: 6px 14px;
    border-radius: 7px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: rgba(128,128,128,0.6);
    transition: all 0.12s;
}

.pr-type-btn.active[b-mkz0nw0qlr] {
    background: var(--mud-palette-primary);
    color: #fff;
    border-color: var(--mud-palette-primary);
}

/* Color picker */
.pr-color-row[b-mkz0nw0qlr] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pr-color-input[b-mkz0nw0qlr] {
    width: 36px;
    height: 32px;
    border-radius: 7px;
    border: 1px solid var(--mud-palette-divider);
    padding: 2px;
    cursor: pointer;
    background: none;
}

.pr-color-presets[b-mkz0nw0qlr] {
    display: flex;
    gap: 5px;
}

.pr-color-dot[b-mkz0nw0qlr] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.1s;
}

.pr-color-dot:hover[b-mkz0nw0qlr]  { transform: scale(1.2); }
.pr-color-dot.active[b-mkz0nw0qlr] { border-color: var(--mud-palette-text-primary); }

/* Toggle checkbox */
.pr-toggle-label[b-mkz0nw0qlr] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    user-select: none;
}

.pr-toggle-check[b-mkz0nw0qlr] { display: none; }

.pr-toggle[b-mkz0nw0qlr] {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--mud-palette-divider);
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}

.pr-toggle[b-mkz0nw0qlr]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}

.pr-toggle-check:checked + .pr-toggle[b-mkz0nw0qlr] { background: var(--mud-palette-primary); }
.pr-toggle-check:checked + .pr-toggle[b-mkz0nw0qlr]::after { transform: translateX(16px); }

/* Footer buttons */
.pr-btn-cancel[b-mkz0nw0qlr] {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    transition: background 0.12s;
}

.pr-btn-cancel:hover[b-mkz0nw0qlr] { background: rgba(128,128,128,0.07); }

.pr-btn-save[b-mkz0nw0qlr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border-radius: 8px;
    border: none;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.12s;
}

.pr-btn-save:hover:not(:disabled)[b-mkz0nw0qlr] { opacity: 0.88; }
.pr-btn-save:disabled[b-mkz0nw0qlr] { opacity: 0.5; cursor: not-allowed; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
    .pr-row[b-mkz0nw0qlr] { grid-template-columns: 44px 1fr auto auto; }
    .pr-row-tags[b-mkz0nw0qlr] { display: none; }
}

@media (max-width: 768px) {
    .pr-page[b-mkz0nw0qlr]    { padding: 16px; }
    .pr-header[b-mkz0nw0qlr]  { flex-direction: column; }
    .pr-row[b-mkz0nw0qlr] { grid-template-columns: 44px 1fr auto; gap: 12px; padding: 12px 14px; }
    .pr-row-price[b-mkz0nw0qlr] { min-width: auto; }
    .pr-row-actions[b-mkz0nw0qlr] { opacity: 1; }
    .pr-field-row[b-mkz0nw0qlr] { grid-template-columns: 1fr; }
    .pr-form-row--3[b-mkz0nw0qlr] { grid-template-columns: 1fr; }
    .pr-form-row--2[b-mkz0nw0qlr] { grid-template-columns: 1fr; }
    .pr-dialog--wide[b-mkz0nw0qlr] { max-width: 100%; }
}

@media (max-width: 500px) {
    .pr-row[b-mkz0nw0qlr] { grid-template-columns: 40px 1fr; }
    .pr-row-price[b-mkz0nw0qlr] { display: none; }
}
/* /Components/app/propertyManagement/Properties.razor.rz.scp.css */
/* ============================================
   Properties — Property Management Layout
   ============================================ */

.pm-page[b-piyks2mh9p] {
    padding: var(--space-6) var(--space-8);
    max-width: 1500px;
    margin: 0 auto;
    min-height: 100vh;
}

/* ── Header ── */
.pm-header[b-piyks2mh9p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    gap: var(--space-4);
    flex-wrap: wrap;
}

.pm-header-left h1[b-piyks2mh9p] {
    margin: 0 0 var(--space-2) 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.pm-vitals[b-piyks2mh9p] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
    flex-wrap: wrap;
}

.pm-vital-num[b-piyks2mh9p] {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

.pm-vital--green[b-piyks2mh9p] { color: #059669; }
.pm-vital--amber[b-piyks2mh9p] { color: #d97706; }
.pm-vital--blue[b-piyks2mh9p]  { color: #3b82f6; }

.pm-vital-lbl[b-piyks2mh9p] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 0.3rem;
    opacity: 0.55;
}

.pm-vital-rule[b-piyks2mh9p] {
    display: inline-block;
    width: 1px;
    height: 0.9rem;
    background: rgba(128,128,128,0.2);
    margin: 0 0.7rem;
    vertical-align: middle;
}

.pm-header-right[b-piyks2mh9p] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pm-search[b-piyks2mh9p] {
    width: 220px;
}

.pm-add-btn[b-piyks2mh9p] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: var(--mud-palette-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.pm-add-btn:hover[b-piyks2mh9p] {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ── Filter bar ── */
.pm-filters[b-piyks2mh9p] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    padding: var(--space-3) 0;
    flex-wrap: wrap;
}

.pm-filter-group[b-piyks2mh9p] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.pm-filter-label[b-piyks2mh9p] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.45;
    white-space: nowrap;
}

.pm-filter-spacer[b-piyks2mh9p] {
    flex: 1;
}

.pm-tabs[b-piyks2mh9p] {
    display: flex;
    gap: 2px;
    background: rgba(128,128,128,0.06);
    border-radius: 8px;
    padding: 2px;
}

.pm-tab[b-piyks2mh9p] {
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: inherit;
    opacity: 0.6;
    white-space: nowrap;
}

.pm-tab:hover[b-piyks2mh9p] { opacity: 0.85; }

.pm-tab.active[b-piyks2mh9p] {
    background: var(--mud-palette-surface);
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.pm-tab--available.active[b-piyks2mh9p] { color: #059669; }
.pm-tab--reserved.active[b-piyks2mh9p]  { color: #d97706; }

.pm-view-toggle[b-piyks2mh9p] {
    display: flex;
    gap: 2px;
    background: rgba(128,128,128,0.06);
    border-radius: 8px;
    padding: 2px;
}

.pm-view-btn[b-piyks2mh9p] {
    padding: 0.35rem 0.55rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.15s;
    color: inherit;
    display: flex;
    align-items: center;
}

.pm-view-btn.active[b-piyks2mh9p] {
    background: var(--mud-palette-surface);
    opacity: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Loading / Empty ── */
.pm-loading[b-piyks2mh9p] {
    display: flex;
    justify-content: center;
    padding: var(--space-12) 0;
}

.pm-empty[b-piyks2mh9p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) 0;
    gap: var(--space-3);
    opacity: 0.7;
}

.pm-empty p[b-piyks2mh9p] {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.6;
}

.pm-empty-btn[b-piyks2mh9p] {
    padding: 0.45rem 1rem;
    border: 1px dashed rgba(128,128,128,0.3);
    background: transparent;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--mud-palette-primary);
    font-weight: 600;
    transition: all 0.15s;
}

.pm-empty-btn:hover[b-piyks2mh9p] {
    border-color: var(--mud-palette-primary);
    background: rgba(59,130,246,0.04);
}

/* ══════════════════════════════
   GRID VIEW — Property Cards
   ══════════════════════════════ */

.pm-grid[b-piyks2mh9p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: var(--space-5);
    animation: pm-fadeIn-b-piyks2mh9p 0.3s ease;
}

@keyframes pm-fadeIn-b-piyks2mh9p {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-card[b-piyks2mh9p] {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    border: 1px solid rgba(128,128,128,0.08);
}

.pm-card:hover[b-piyks2mh9p] {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    border-color: rgba(128,128,128,0.15);
}

/* Card Visual / Header */
.pm-card-visual[b-piyks2mh9p] {
    height: 140px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pm-card-visual[b-piyks2mh9p]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.2));
}

.pm-card-type-icon[b-piyks2mh9p] {
    position: relative;
    z-index: 1;
    opacity: 0.6;
}

.pm-card-badges[b-piyks2mh9p] {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    gap: 0.3rem;
    z-index: 2;
}

.pm-badge[b-piyks2mh9p] {
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pm-badge--available[b-piyks2mh9p] {
    background: #059669;
    color: #fff;
}

.pm-badge--reserved[b-piyks2mh9p] {
    background: #d97706;
    color: #fff;
}

.pm-badge--negotiable[b-piyks2mh9p] {
    background: rgba(255,255,255,0.9);
    color: #7c3aed;
}

.pm-badge--sm[b-piyks2mh9p] {
    padding: 0.15rem 0.45rem;
    font-size: 0.6rem;
}

/* Sold / Rented ribbon */
.pm-card-sold-ribbon[b-piyks2mh9p] {
    position: absolute;
    top: 18px;
    right: -30px;
    background: #dc2626;
    color: #fff;
    padding: 0.2rem 2rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    transform: rotate(45deg);
    z-index: 3;
}

.pm-card-sold-ribbon--rented[b-piyks2mh9p] {
    background: #7c3aed;
}

/* Card Body */
.pm-card-body[b-piyks2mh9p] {
    padding: var(--space-4);
}

.pm-card-title[b-piyks2mh9p] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.pm-card-address[b-piyks2mh9p] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    opacity: 0.55;
    margin-bottom: var(--space-3);
}

.pm-card-specs[b-piyks2mh9p] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.pm-spec[b-piyks2mh9p] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.65;
}

.pm-card-footer[b-piyks2mh9p] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
}

.pm-card-price[b-piyks2mh9p] {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.pm-price[b-piyks2mh9p] {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mud-palette-primary);
}

.pm-price-unit[b-piyks2mh9p] {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.5;
}

.pm-card-ppm2[b-piyks2mh9p] {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.4;
    font-variant-numeric: tabular-nums;
}

.pm-card-meta[b-piyks2mh9p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-2);
    border-top: 1px solid rgba(128,128,128,0.08);
}

.pm-occupancy[b-piyks2mh9p] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.pm-dot[b-piyks2mh9p] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pm-occupancy--occupied .pm-dot[b-piyks2mh9p] { background: #059669; }
.pm-occupancy--vacant .pm-dot[b-piyks2mh9p]   { background: #9ca3af; }

.pm-agent[b-piyks2mh9p] {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.45;
}

/* Card actions overlay */
.pm-card-actions[b-piyks2mh9p] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.pm-card:hover .pm-card-actions[b-piyks2mh9p] {
    opacity: 1;
}

.pm-action-btn[b-piyks2mh9p] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    background: rgba(255,255,255,0.92);
    color: #374151;
    backdrop-filter: blur(8px);
}

.pm-action-btn:hover[b-piyks2mh9p] {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.pm-action-btn--danger:hover[b-piyks2mh9p] {
    background: #fef2f2;
    color: #dc2626;
}

/* ══════════════════════════════
   TABLE VIEW
   ══════════════════════════════ */

.pm-table-wrap[b-piyks2mh9p] {
    overflow-x: auto;
    animation: pm-fadeIn-b-piyks2mh9p 0.3s ease;
}

.pm-table[b-piyks2mh9p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.pm-table thead th[b-piyks2mh9p] {
    padding: 0.6rem 0.8rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.45;
    border-bottom: 1px solid rgba(128,128,128,0.12);
    white-space: nowrap;
}

.pm-trow[b-piyks2mh9p] {
    cursor: pointer;
    transition: background 0.1s;
}

.pm-trow:hover[b-piyks2mh9p] {
    background: rgba(128,128,128,0.04);
}

.pm-trow td[b-piyks2mh9p] {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid rgba(128,128,128,0.06);
    vertical-align: middle;
}

.pm-trow-name[b-piyks2mh9p] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pm-trow-icon[b-piyks2mh9p] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pm-trow-title[b-piyks2mh9p] {
    font-weight: 700;
    display: block;
}

.pm-trow-addr[b-piyks2mh9p] {
    font-size: 0.72rem;
    opacity: 0.5;
    display: block;
}

.pm-trow-price[b-piyks2mh9p] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary);
}

.pm-type-chip[b-piyks2mh9p] {
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(128,128,128,0.08);
    white-space: nowrap;
}

.pm-trow-actions[b-piyks2mh9p] {
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.pm-trow:hover .pm-trow-actions[b-piyks2mh9p] {
    opacity: 1;
}

/* ── Summary Bar ── */
.pm-summary[b-piyks2mh9p] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: var(--space-4) 0;
    margin-top: var(--space-4);
    border-top: 1px solid rgba(128,128,128,0.1);
    font-size: 0.78rem;
    opacity: 0.55;
    flex-wrap: wrap;
}

.pm-summary strong[b-piyks2mh9p] {
    font-weight: 700;
    opacity: 1;
}

.pm-summary-sep[b-piyks2mh9p] {
    margin: 0 0.5rem;
    opacity: 0.3;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .pm-page[b-piyks2mh9p] {
        padding: var(--space-4);
    }

    .pm-header[b-piyks2mh9p] {
        flex-direction: column;
        align-items: flex-start;
    }

    .pm-header-right[b-piyks2mh9p] {
        width: 100%;
    }

    .pm-search[b-piyks2mh9p] {
        flex: 1;
        width: auto;
    }

    .pm-filters[b-piyks2mh9p] {
        gap: var(--space-3);
    }

    .pm-grid[b-piyks2mh9p] {
        grid-template-columns: 1fr;
    }

    .pm-summary[b-piyks2mh9p] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .pm-summary-sep[b-piyks2mh9p] { display: none; }
}
/* /Components/app/propertyManagement/PropertyDetailsDialog.razor.rz.scp.css */
/* ============================================
   PropertyDetailsDialog — View Property Details
   ============================================ */

.pd-content[b-ra7xe3yqqx] {
    max-height: 65vh;
    overflow-y: auto;
}

.pd-content[b-ra7xe3yqqx]::-webkit-scrollbar {
    width: 5px;
}

.pd-content[b-ra7xe3yqqx]::-webkit-scrollbar-track {
    background: transparent;
}

.pd-content[b-ra7xe3yqqx]::-webkit-scrollbar-thumb {
    background: rgba(128,128,128,0.15);
    border-radius: 4px;
}

/* ── Hero ── */
.pd-hero[b-ra7xe3yqqx] {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.pd-hero-overlay[b-ra7xe3yqqx] {
    padding: var(--space-6) var(--space-5);
    background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.4));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pd-hero-badges[b-ra7xe3yqqx] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pd-badge[b-ra7xe3yqqx] {
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
}

.pd-badge--available[b-ra7xe3yqqx]  { background: rgba(5,150,105,0.8); }
.pd-badge--reserved[b-ra7xe3yqqx]   { background: rgba(217,119,6,0.8); }
.pd-badge--occupied[b-ra7xe3yqqx]   { background: rgba(59,130,246,0.6); }
.pd-badge--vacant[b-ra7xe3yqqx]     { background: rgba(156,163,175,0.5); }
.pd-badge--negotiable[b-ra7xe3yqqx] { background: rgba(124,58,237,0.7); }
.pd-badge--sold[b-ra7xe3yqqx]       { background: rgba(220,38,38,0.8); }
.pd-badge--rented[b-ra7xe3yqqx]     { background: rgba(124,58,237,0.8); }

.pd-hero-price[b-ra7xe3yqqx] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
}

.pd-big-price[b-ra7xe3yqqx] {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.pd-price-unit[b-ra7xe3yqqx] {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.7;
}

.pd-hero-meta[b-ra7xe3yqqx] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.8;
    flex-wrap: wrap;
}

/* ── Address ── */
.pd-address-row[b-ra7xe3yqqx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.pd-complex-chip[b-ra7xe3yqqx] {
    padding: 0.1rem 0.5rem;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(128,128,128,0.08);
    margin-left: 0.3rem;
}

.pd-description[b-ra7xe3yqqx] {
    font-size: 0.85rem;
    line-height: 1.6;
    opacity: 0.7;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: rgba(128,128,128,0.03);
    border-radius: 8px;
    border-left: 3px solid rgba(128,128,128,0.12);
}

/* ── Specs grid ── */
.pd-specs-grid[b-ra7xe3yqqx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.pd-spec-item[b-ra7xe3yqqx] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: var(--space-2) var(--space-3);
    background: rgba(128,128,128,0.03);
    border-radius: 8px;
}

.pd-spec-label[b-ra7xe3yqqx] {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.4;
}

.pd-spec-value[b-ra7xe3yqqx] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
}

/* ── Sections ── */
.pd-section[b-ra7xe3yqqx] {
    margin-bottom: var(--space-4);
}

.pd-section-label[b-ra7xe3yqqx] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.4;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid rgba(128,128,128,0.08);
}

/* ── Chips ── */
.pd-chips[b-ra7xe3yqqx] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pd-chip[b-ra7xe3yqqx] {
    padding: 0.2rem 0.6rem;
    border-radius: 16px;
    font-size: 0.72rem;
    font-weight: 600;
    background: rgba(59,130,246,0.08);
    color: var(--mud-palette-primary);
}

/* ── Info rows ── */
.pd-info-grid[b-ra7xe3yqqx] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pd-info-row[b-ra7xe3yqqx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(128,128,128,0.04);
}

.pd-info-label[b-ra7xe3yqqx] {
    font-size: 0.78rem;
    opacity: 0.5;
    font-weight: 600;
}

.pd-info-value[b-ra7xe3yqqx] {
    font-size: 0.82rem;
    font-weight: 600;
    text-align: right;
}

/* ── Notes ── */
.pd-notes[b-ra7xe3yqqx] {
    font-size: 0.82rem;
    line-height: 1.6;
    opacity: 0.65;
    padding: var(--space-3);
    background: rgba(128,128,128,0.03);
    border-radius: 8px;
    white-space: pre-wrap;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .pd-big-price[b-ra7xe3yqqx] {
        font-size: 1.5rem;
    }

    .pd-specs-grid[b-ra7xe3yqqx] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/app/propertyManagement/PropertyDialog.razor.rz.scp.css */
/* ============================================
   PropertyDialog — Create / Edit Form Styling
   ============================================ */

.pm-dialog-tabs[b-d8yrmdgumu] {
    margin-top: var(--space-2);
}

.pm-tab-content[b-d8yrmdgumu] {
    padding: var(--space-4) var(--space-2) var(--space-2) var(--space-2);
    max-height: 55vh;
    overflow-y: auto;
}

/* Subtle scrollbar */
.pm-tab-content[b-d8yrmdgumu]::-webkit-scrollbar {
    width: 5px;
}

.pm-tab-content[b-d8yrmdgumu]::-webkit-scrollbar-track {
    background: transparent;
}

.pm-tab-content[b-d8yrmdgumu]::-webkit-scrollbar-thumb {
    background: rgba(128,128,128,0.15);
    border-radius: 4px;
}

.pm-tab-content[b-d8yrmdgumu]::-webkit-scrollbar-thumb:hover {
    background: rgba(128,128,128,0.3);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================
   MainLayout — Command Bar
   ============================================ */

.app-container[b-oeluh17ui8] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ══════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════ */
.top-navbar[b-oeluh17ui8] {
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: sticky;
    top: 0;
    z-index: 200;
    height: 52px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

.navbar-content[b-oeluh17ui8] {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 1.25rem;
    gap: 1rem;
}

/* ══════════════════════════════════════
   BRAND + MEGA MENU WRAPPER
   ══════════════════════════════════════ */
.nb-brand-wrap[b-oeluh17ui8] {
    position: relative;
    flex-shrink: 0;
}

.nb-brand[b-oeluh17ui8] {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.14s;
    user-select: none;
}

    .nb-brand:hover[b-oeluh17ui8],
    .nb-brand.open[b-oeluh17ui8] {
        background: rgba(255,255,255,0.06);
    }

.nb-brand-icon[b-oeluh17ui8] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nb-brand-name[b-oeluh17ui8] {
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.nb-brand-chevron[b-oeluh17ui8] {
    color: rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    transition: transform 0.2s, color 0.14s;
    line-height: 0;
}

.nb-brand:hover .nb-brand-chevron[b-oeluh17ui8],
.nb-brand.open .nb-brand-chevron[b-oeluh17ui8] {
    color: rgba(255,255,255,0.7);
}

.nb-brand.open .nb-brand-chevron[b-oeluh17ui8] {
    transform: rotate(180deg);
}

.nb-brand-chevron .mud-icon-root[b-oeluh17ui8] {
    color: inherit !important;
    font-size: inherit !important;
}

/* ══════════════════════════════════════
   MEGA MENU
   ══════════════════════════════════════ */
.mega-menu[b-oeluh17ui8] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 480px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 300;
}

    .mega-menu.visible[b-oeluh17ui8] {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0) scale(1);
    }

[b-oeluh17ui8] .mm-section-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 0 6px;
    margin-bottom: 6px;
}

[b-oeluh17ui8] .mm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

[b-oeluh17ui8] .mm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.12s;
    cursor: pointer;
}

    [b-oeluh17ui8] .mm-item:hover {
        background: var(--mud-palette-action-default-hover);
    }

    [b-oeluh17ui8] .mm-item.active {
        background: var(--mud-palette-action-default-hover);
    }

        [b-oeluh17ui8] .mm-item:hover .mm-label,
        [b-oeluh17ui8] .mm-item.active .mm-label {
            color: var(--mud-palette-text-primary);
        }

[b-oeluh17ui8] .mm-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    [b-oeluh17ui8] .mm-icon .mud-icon-root {
        color: inherit !important;
        font-size: inherit !important;
    }

[b-oeluh17ui8] .mm-icon--blue {
    background: rgba(59,130,246,0.14);
    color: #3b82f6;
}

[b-oeluh17ui8] .mm-icon--green {
    background: rgba(16,185,129,0.14);
    color: #10b981;
}

[b-oeluh17ui8] .mm-icon--amber {
    background: rgba(245,158,11,0.14);
    color: #f59e0b;
}

[b-oeluh17ui8] .mm-icon--purple {
    background: rgba(139,92,246,0.14);
    color: #8b5cf6;
}

[b-oeluh17ui8] .mm-icon--pink {
    background: rgba(236,72,153,0.14);
    color: #ec4899;
}

[b-oeluh17ui8] .mm-icon--cyan {
    background: rgba(6,182,212,0.14);
    color: #06b6d4;
}

[b-oeluh17ui8] .mm-icon--orange {
    background: rgba(249,115,22,0.14);
    color: #f97316;
}

[b-oeluh17ui8] .mm-icon--teal {
    background: rgba(20,184,166,0.14);
    color: #14b8a6;
}

[b-oeluh17ui8] .mm-icon--ai {
    background: rgba(99,102,241,0.14);
    color: #818cf8;
}

[b-oeluh17ui8] .mm-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

[b-oeluh17ui8] .mm-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    transition: color 0.12s;
}

[b-oeluh17ui8] .mm-desc {
    font-size: 0.67rem;
    color: var(--mud-palette-text-disabled);
}

[b-oeluh17ui8] .mm-divider {
    height: 1px;
    background: var(--mud-palette-table-lines);
    margin: 10px 0;
}

[b-oeluh17ui8] .mm-footer {
    display: flex;
    gap: 2px;
}

[b-oeluh17ui8] .mm-footer-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
}

    [b-oeluh17ui8] .mm-footer-item .mud-icon-root {
        color: inherit !important;
        font-size: inherit !important;
    }

    [b-oeluh17ui8] .mm-footer-item:hover {
        background: var(--mud-palette-action-default-hover);
        color: var(--mud-palette-text-primary);
    }

[b-oeluh17ui8] .mm-footer-item--danger:hover {
    background: rgba(239,68,68,0.08);
    color: var(--mud-palette-error);
}

/* iAssistant mega menu item */
[b-oeluh17ui8] .mm-item--ai {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08));
    border: 1px solid rgba(99,102,241,0.18);
    position: relative;
    overflow: hidden;
}

    [b-oeluh17ui8] .mm-item--ai:hover {
        background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(139,92,246,0.16)) !important;
        border-color: rgba(99,102,241,0.35) !important;
    }

    [b-oeluh17ui8] .mm-item--ai .mm-label--ai {
        color: #a5b4fc;
    }

    [b-oeluh17ui8] .mm-item--ai:hover .mm-label--ai {
        color: #c4b5fd !important;
    }

[b-oeluh17ui8] .mm-ai-badge {
    margin-left: auto;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #818cf8;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 4px;
    padding: 2px 5px;
}

/* ══════════════════════════════════════
   SEARCH BAR
   ══════════════════════════════════════ */
.nb-search-wrap[b-oeluh17ui8] {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nb-search-bar[b-oeluh17ui8] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0 11px;
    height: 32px;
    width: 100%;
    max-width: 420px;
    transition: border-color 0.15s, background 0.15s;
    cursor: text;
}

    .nb-search-bar:hover[b-oeluh17ui8] {
        border-color: rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.07);
    }

    .nb-search-bar:focus-within[b-oeluh17ui8] {
        border-color: rgba(99,102,241,0.5);
        background: rgba(255,255,255,0.07);
    }

    .nb-search-bar .mud-icon-root[b-oeluh17ui8] {
        color: inherit !important;
    }

.nb-search-input[b-oeluh17ui8] {
    background: none;
    border: none;
    outline: none;
    color: rgba(255,255,255,0.82);
    font-size: 0.78rem;
    flex: 1;
    font-family: inherit;
    min-width: 0;
}

    .nb-search-input[b-oeluh17ui8]::placeholder {
        color: rgba(255,255,255,0.25);
    }

.nb-search-kbd[b-oeluh17ui8] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.nb-kbd[b-oeluh17ui8] {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.18);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 3px;
    padding: 1px 4px;
    font-family: monospace;
}

/* ══════════════════════════════════════
   RIGHT ACTIONS
   ══════════════════════════════════════ */
.navbar-actions[b-oeluh17ui8] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.nb-action-btn[b-oeluh17ui8] {
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    transition: background 0.12s, color 0.12s;
}

    .nb-action-btn:hover[b-oeluh17ui8] {
        background: rgba(255,255,255,0.07);
        color: rgba(255,255,255,0.9);
    }

    .nb-action-btn .mud-icon-root[b-oeluh17ui8] {
        color: inherit !important;
    }

.sidebar-toggle[b-oeluh17ui8] {
    display: none;
}

/* ── User button ── */
.user-btn[b-oeluh17ui8] {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 4px 10px 4px 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    color: #fff;
}

    .user-btn:hover[b-oeluh17ui8] {
        background: rgba(255,255,255,0.11);
        border-color: rgba(255,255,255,0.18);
    }

.user-avatar[b-oeluh17ui8] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--mud-palette-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
    flex-shrink: 0;
}

.user-name[b-oeluh17ui8] {
    font-size: 0.76rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.nb-menu-head[b-oeluh17ui8] {
    padding: 10px 16px 8px;
}

.nb-menu-name[b-oeluh17ui8] {
    font-size: 0.82rem;
    font-weight: 700;
}

.nb-menu-email[b-oeluh17ui8] {
    font-size: 0.68rem;
    opacity: 0.45;
    margin-top: 2px;
}

/* ══════════════════════════════════════
   MOBILE SIDEBAR
   ══════════════════════════════════════ */
.sidebar-overlay[b-oeluh17ui8] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 150;
    backdrop-filter: blur(2px);
}

    .sidebar-overlay.active[b-oeluh17ui8] {
        opacity: 1;
        pointer-events: all;
    }

.expandable-sidebar[b-oeluh17ui8] {
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100vh;
    background: #0a0a0a;
    border-right: 1px solid rgba(255,255,255,0.08);
    transition: left 0.25s cubic-bezier(0.4,0,0.2,1);
    z-index: 200;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

    .expandable-sidebar.open[b-oeluh17ui8] {
        left: 0;
    }

.sidebar-header[b-oeluh17ui8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.close-btn[b-oeluh17ui8] {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.4);
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}

    .close-btn:hover[b-oeluh17ui8] {
        background: rgba(255,255,255,0.07);
        color: #fff;
    }

    .close-btn .mud-icon-root[b-oeluh17ui8] {
        color: inherit !important;
    }

.sidebar-nav[b-oeluh17ui8] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

[b-oeluh17ui8] .sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.12s, color 0.12s;
}

    [b-oeluh17ui8] .sidebar-item:hover {
        background: rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.9);
    }

    [b-oeluh17ui8] .sidebar-item.active {
        background: rgba(255,255,255,0.09);
        color: #fff;
    }

[b-oeluh17ui8] .sidebar-item--danger:hover {
    background: rgba(239,68,68,0.08);
    color: #f87171;
}

[b-oeluh17ui8] .item-icon {
    font-size: 1rem !important;
    flex-shrink: 0;
    color: inherit !important;
}

    [b-oeluh17ui8] .item-icon .mud-icon-root {
        font-size: inherit !important;
        color: inherit !important;
    }

.sidebar-divider[b-oeluh17ui8] {
    height: 1px;
    background: rgba(255,255,255,0.07);
    margin: 6px 4px;
}

/* ══════════════════════════════════════
   iASSISTANT SIDEBAR ITEM (ai-feature)
   ══════════════════════════════════════ */
[b-oeluh17ui8] .sidebar-item--ai {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08)) !important;
    border: 1px solid rgba(99,102,241,0.18) !important;
    color: #a5b4fc !important;
}

    [b-oeluh17ui8] .sidebar-item--ai:hover {
        background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.18)) !important;
        color: #c4b5fd !important;
    }

    [b-oeluh17ui8] .sidebar-item--ai.active {
        background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.25)) !important;
        border-color: rgba(99,102,241,0.4) !important;
        color: #e0e7ff !important;
    }

/* ══════════════════════════════════════
   BLAZAAR NAV ITEM (ai-feature)
   ══════════════════════════════════════ */
[b-oeluh17ui8] .mm-icon--blazaar {
    background: rgba(99,102,241,0.12);
    color: #818cf8;
}

[b-oeluh17ui8] .mm-item--blazaar {
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.06));
    border: 1px solid rgba(99,102,241,0.15);
}

    [b-oeluh17ui8] .mm-item--blazaar:hover {
        background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(139,92,246,0.14)) !important;
        border-color: rgba(99,102,241,0.3) !important;
    }

[b-oeluh17ui8] .mm-label--blazaar {
    color: #a5b4fc;
}

[b-oeluh17ui8] .mm-item--blazaar:hover .mm-label--blazaar {
    color: #c4b5fd !important;
}

[b-oeluh17ui8] .mm-blazaar-badge {
    margin-left: auto;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #818cf8;
    background: rgba(99,102,241,0.15);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 4px;
    padding: 2px 5px;
}

[b-oeluh17ui8] .sidebar-item--blazaar {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08)) !important;
    border: 1px solid rgba(99,102,241,0.18) !important;
    color: #a5b4fc !important;
}

    [b-oeluh17ui8] .sidebar-item--blazaar:hover {
        background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.18)) !important;
        color: #c4b5fd !important;
    }

    [b-oeluh17ui8] .sidebar-item--blazaar.active {
        background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.25)) !important;
        border-color: rgba(99,102,241,0.4) !important;
        color: #e0e7ff !important;
    }

/* ── Main content ── */
.main-content[b-oeluh17ui8] {
    flex: 1;
    width: 100%;
    overflow-x: hidden;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 1024px) {
    .nb-search-wrap[b-oeluh17ui8] {
        display: none;
    }

    .sidebar-toggle[b-oeluh17ui8] {
        display: flex !important;
    }
}

@media (max-width: 640px) {
    .navbar-content[b-oeluh17ui8] {
        padding: 0 1rem;
        gap: 0.75rem;
    }

    .user-name[b-oeluh17ui8] {
        display: none;
    }

    .nb-brand-name[b-oeluh17ui8] {
        font-size: 0.78rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-m8hwnwsn2a] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-m8hwnwsn2a] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-m8hwnwsn2a] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-m8hwnwsn2a] {
    font-size: 1.1rem;
}

.bi[b-m8hwnwsn2a] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-m8hwnwsn2a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-m8hwnwsn2a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-m8hwnwsn2a] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-m8hwnwsn2a] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-m8hwnwsn2a] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-m8hwnwsn2a] {
        padding-bottom: 1rem;
    }

    .nav-item[b-m8hwnwsn2a]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-m8hwnwsn2a]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-m8hwnwsn2a]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-m8hwnwsn2a] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-m8hwnwsn2a] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-m8hwnwsn2a] {
        display: none;
    }

    .nav-scrollable[b-m8hwnwsn2a] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/AppDetail.razor.rz.scp.css */
/* ============================================
   Blazaar — App Detail Page
   ============================================ */

.ad[b-epbfsy1m4a] {
    min-height: 100vh;
    padding: 1.5rem 2rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ══════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════ */
.ad-crumb[b-epbfsy1m4a] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 1.5rem;
}

.ad-crumb-link[b-epbfsy1m4a] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}

.ad-crumb-link:hover[b-epbfsy1m4a] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.ad-crumb-sep[b-epbfsy1m4a] {
    color: var(--mud-palette-text-disabled);
}

.ad-crumb-current[b-epbfsy1m4a] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ══════════════════════════════════════
   HERO
   ══════════════════════════════════════ */
.ad-hero[b-epbfsy1m4a] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 0 2rem;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    margin-bottom: 2rem;
}

.ad-hero-icon[b-epbfsy1m4a] {
    width: 88px;
    height: 88px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ad-hero-body[b-epbfsy1m4a] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ad-hero-meta[b-epbfsy1m4a] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
}

.ad-category[b-epbfsy1m4a] {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
}

.ad-dot[b-epbfsy1m4a] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--mud-palette-text-disabled);
}

.ad-installed-label[b-epbfsy1m4a] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #10b981;
}

.ad-hero-title[b-epbfsy1m4a] {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
    line-height: 1.1;
    margin: 0;
}

.ad-hero-tagline[b-epbfsy1m4a] {
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
    max-width: 640px;
    line-height: 1.5;
}

.ad-hero-actions[b-epbfsy1m4a] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.ad-hero-price-note[b-epbfsy1m4a] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-disabled);
}

/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */
.ad-btn[b-epbfsy1m4a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.12s, background 0.12s, transform 0.1s, border-color 0.12s;
    font-family: inherit;
}

.ad-btn:active[b-epbfsy1m4a] { transform: scale(0.98); }

.ad-btn--primary[b-epbfsy1m4a] {
    background: var(--mud-palette-primary);
    color: #fff;
}

.ad-btn--primary:hover[b-epbfsy1m4a] { opacity: 0.9; }

.ad-btn--ghost[b-epbfsy1m4a] {
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-table-lines);
}

.ad-btn--ghost:hover[b-epbfsy1m4a] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.ad-btn--disabled[b-epbfsy1m4a] {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}

.ad-btn--full[b-epbfsy1m4a] {
    width: 100%;
}

/* ══════════════════════════════════════
   BODY LAYOUT
   ══════════════════════════════════════ */
.ad-body[b-epbfsy1m4a] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2.5rem;
    align-items: start;
}

/* ══════════════════════════════════════
   MAIN COLUMN
   ══════════════════════════════════════ */
.ad-main[b-epbfsy1m4a] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.ad-section[b-epbfsy1m4a] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.ad-section-title[b-epbfsy1m4a] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.ad-prose[b-epbfsy1m4a] {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.ad-prose--muted[b-epbfsy1m4a] {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
    font-size: 0.82rem;
}

/* ══════════════════════════════════════
   GALLERY
   ══════════════════════════════════════ */
.ad-gallery[b-epbfsy1m4a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ad-gallery-stage[b-epbfsy1m4a] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-gallery-img[b-epbfsy1m4a] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ad-gallery-nav[b-epbfsy1m4a] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, transform 0.12s;
    backdrop-filter: blur(6px);
}

.ad-gallery-nav:hover[b-epbfsy1m4a] {
    background: rgba(0, 0, 0, 0.75);
}

.ad-gallery-nav:active[b-epbfsy1m4a] {
    transform: translateY(-50%) scale(0.94);
}

.ad-gallery-nav--prev[b-epbfsy1m4a] { left: 12px; }
.ad-gallery-nav--next[b-epbfsy1m4a] { right: 12px; }

.ad-gallery-dots[b-epbfsy1m4a] {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.ad-gallery-dot[b-epbfsy1m4a] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: var(--mud-palette-table-lines);
    cursor: pointer;
    padding: 0;
    transition: background 0.12s, transform 0.12s;
}

.ad-gallery-dot:hover[b-epbfsy1m4a] {
    background: var(--mud-palette-text-disabled);
}

.ad-gallery-dot.active[b-epbfsy1m4a] {
    background: var(--mud-palette-primary);
    transform: scale(1.3);
}

/* ══════════════════════════════════════
   FEATURES
   ══════════════════════════════════════ */
.ad-features[b-epbfsy1m4a] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.ad-feature[b-epbfsy1m4a] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 10px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.ad-feature-icon[b-epbfsy1m4a] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ══════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════ */
.ad-sidebar[b-epbfsy1m4a] {
    position: sticky;
    top: 72px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ad-side-card[b-epbfsy1m4a] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ad-side-price[b-epbfsy1m4a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ad-side-price-main[b-epbfsy1m4a] {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
    line-height: 1;
}

.ad-side-price-per[b-epbfsy1m4a] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-left: 2px;
}

.ad-side-price-sub[b-epbfsy1m4a] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-disabled);
    margin-top: 2px;
}

.ad-side-info[b-epbfsy1m4a] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 14px;
    padding: 0.25rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.ad-side-info-row[b-epbfsy1m4a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    font-size: 0.78rem;
}

.ad-side-info-row:last-child[b-epbfsy1m4a] {
    border-bottom: none;
}

.ad-side-info-label[b-epbfsy1m4a] {
    color: var(--mud-palette-text-disabled);
    font-weight: 500;
}

.ad-side-info-value[b-epbfsy1m4a] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.ad-side-info-value--warn[b-epbfsy1m4a] {
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ══════════════════════════════════════
   NOT FOUND
   ══════════════════════════════════════ */
.ad-notfound[b-epbfsy1m4a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6rem 2rem;
    text-align: center;
}

.ad-notfound-title[b-epbfsy1m4a] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    margin-top: 0.5rem;
}

.ad-notfound-sub[b-epbfsy1m4a] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 1rem;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 900px) {
    .ad[b-epbfsy1m4a] {
        padding: 1.25rem 1.25rem 3rem;
    }

    .ad-body[b-epbfsy1m4a] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .ad-sidebar[b-epbfsy1m4a] {
        position: static;
        order: -1;
    }

    .ad-hero[b-epbfsy1m4a] {
        flex-direction: column;
        gap: 1rem;
    }

    .ad-hero-icon[b-epbfsy1m4a] {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }

    .ad-hero-title[b-epbfsy1m4a] {
        font-size: 1.75rem;
    }

    .ad-features[b-epbfsy1m4a] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/AppointmentDetailsDialog.razor.rz.scp.css */
/* ============================================
   Appointment Details Dialog — Tabbed
   ============================================ */

[b-beoa0isrll] .apd-dialog {
    width: min(680px, 95vw) !important;
    max-width: min(680px, 95vw) !important;
}

    [b-beoa0isrll] .apd-dialog .mud-dialog-content {
        padding: 0 !important;
        overflow: hidden;
    }

    [b-beoa0isrll] .apd-dialog .mud-dialog-title {
        padding: 0 !important;
    }

/* ── Titlebar ── */
.apd-titlebar[b-beoa0isrll] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem 0.75rem;
    gap: var(--space-3);
}

.apd-titlebar-left[b-beoa0isrll] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.apd-status-dot[b-beoa0isrll] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.apd-dot--scheduled[b-beoa0isrll] {
    background: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.2);
}

.apd-dot--completed[b-beoa0isrll] {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
}

.apd-dot--canceled[b-beoa0isrll] {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
}

.apd-dot--archived[b-beoa0isrll] {
    background: #9ca3af;
    box-shadow: 0 0 0 3px rgba(156,163,175,0.2);
}

.apd-title-text[b-beoa0isrll] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.apd-title[b-beoa0isrll] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.apd-subtitle[b-beoa0isrll] {
    font-size: 0.7rem;
    opacity: 0.4;
    font-weight: 500;
}

.apd-titlebar-right[b-beoa0isrll] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* ── Tab strip ── */
.apd-tabs[b-beoa0isrll] {
    display: flex;
    gap: 0;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(128,128,128,0.12);
}

.apd-tab[b-beoa0isrll] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.45;
    transition: opacity 0.15s, border-color 0.15s;
    white-space: nowrap;
}

    .apd-tab .mud-icon-root[b-beoa0isrll] {
        font-size: 0.9rem !important;
    }

    .apd-tab:hover[b-beoa0isrll] {
        opacity: 0.75;
    }

.apd-tab--active[b-beoa0isrll] {
    opacity: 1;
    border-bottom-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.apd-tab-badge[b-beoa0isrll] {
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 16px;
    text-align: center;
    line-height: 14px;
}

/* ── Content area ── */
.apd-content[b-beoa0isrll] {
    height: 480px;
    overflow: hidden;
}

.apd-pane[b-beoa0isrll] {
    height: 100%;
    overflow-y: auto;
    padding: 1.5rem 1.5rem;
}

/* ── Shared ── */
.apd-section-label[b-beoa0isrll] {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.35;
    display: block;
    margin-bottom: 0.6rem;
}

.apd-divider[b-beoa0isrll] {
    height: 1px;
    background: rgba(128,128,128,0.1);
    margin: 1.25rem 0;
}

/* ── TAB 0: Info ── */
.apd-info-hero[b-beoa0isrll] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.apd-info-avatar[b-beoa0isrll] {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--mud-palette-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.apd-info-name[b-beoa0isrll] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.apd-info-since[b-beoa0isrll] {
    font-size: 0.72rem;
    opacity: 0.4;
    font-weight: 500;
    margin-top: 2px;
}

.apd-info-grid[b-beoa0isrll] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.apd-info-item[b-beoa0isrll] {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(128,128,128,0.06);
    gap: var(--space-3);
}

    .apd-info-item:last-child[b-beoa0isrll] {
        border-bottom: none;
    }

.apd-info-label[b-beoa0isrll] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.38;
}

.apd-info-val[b-beoa0isrll] {
    font-size: 0.82rem;
    font-weight: 500;
}

.apd-info-val--link[b-beoa0isrll] {
    text-decoration: none;
    color: var(--mud-palette-primary);
    transition: opacity 0.15s;
}

    .apd-info-val--link:hover[b-beoa0isrll] {
        opacity: 0.75;
    }

/* Copyable (postal) */
.apd-copyable[b-beoa0isrll] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(128,128,128,0.07);
    border: 1px solid rgba(128,128,128,0.12);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: copy;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

    .apd-copyable:hover[b-beoa0isrll] {
        background: rgba(37,99,235,0.08);
        border-color: var(--mud-palette-primary);
        color: var(--mud-palette-primary);
    }

.apd-copyable-val[b-beoa0isrll] {
}

.apd-copyable-icon[b-beoa0isrll] {
    font-size: 0.75rem !important;
    opacity: 0;
    transition: opacity 0.15s;
}

.apd-copyable:hover .apd-copyable-icon[b-beoa0isrll] {
    opacity: 0.7;
}

/* PIN section */
.apd-pin-section[b-beoa0isrll] {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(128,128,128,0.1);
}

.apd-pin[b-beoa0isrll] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(37,99,235,0.07);
    border: 1px solid rgba(37,99,235,0.18);
    border-radius: 10px;
    cursor: copy;
    color: var(--mud-palette-primary);
    width: 100%;
    text-align: left;
    transition: background 0.15s;
    margin-top: 0.5rem;
}

    .apd-pin:hover[b-beoa0isrll] {
        background: rgba(37,99,235,0.13);
    }

.apd-pin-code[b-beoa0isrll] {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: 0.15em;
    flex: 1;
}

.apd-pin-copy[b-beoa0isrll] {
    font-size: 0.85rem !important;
    opacity: 0;
    transition: opacity 0.15s;
}

.apd-pin:hover .apd-pin-copy[b-beoa0isrll] {
    opacity: 0.6;
}

/* ── TAB 1: Details ── */
.apd-pane--details[b-beoa0isrll] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.apd-detail-badges[b-beoa0isrll] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.apd-type-badge[b-beoa0isrll] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 4px 10px;
    border-radius: 6px;
}

.apd-type--repair[b-beoa0isrll] {
    background: rgba(37,99,235,0.1);
    color: #2563eb;
}

.apd-type--installation[b-beoa0isrll] {
    background: rgba(16,185,129,0.1);
    color: #059669;
}

.apd-type--maintenance[b-beoa0isrll] {
    background: rgba(245,158,11,0.1);
    color: #d97706;
}

.apd-type--training[b-beoa0isrll] {
    background: rgba(124,58,237,0.1);
    color: #7c3aed;
}

.apd-type--data_recovery[b-beoa0isrll] {
    background: rgba(14,165,233,0.1);
    color: #0891b2;
}

.apd-type--emergency[b-beoa0isrll] {
    background: rgba(239,68,68,0.1);
    color: #dc2626;
}

.apd-time-badge[b-beoa0isrll] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(128,128,128,0.08);
    opacity: 0.7;
}

    .apd-time-badge .mud-icon-root[b-beoa0isrll] {
        font-size: 0.75rem !important;
    }

.apd-today-badge[b-beoa0isrll] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(37,99,235,0.1);
    color: #2563eb;
}

.apd-past-badge[b-beoa0isrll] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(128,128,128,0.08);
    opacity: 0.5;
}

.apd-description[b-beoa0isrll] {
    font-size: 0.85rem;
    line-height: 1.65;
    opacity: 0.7;
    padding: 0.85rem 1.1rem;
    background: rgba(128,128,128,0.05);
    border-radius: 8px;
    border-left: 3px solid rgba(128,128,128,0.18);
    margin-bottom: 0.25rem;
}

/* Status pills */
.apd-status-row[b-beoa0isrll] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.apd-status-pills[b-beoa0isrll] {
    display: flex;
    gap: 3px;
    background: rgba(128,128,128,0.07);
    padding: 3px;
    border-radius: 8px;
}

.apd-status-pill[b-beoa0isrll] {
    background: transparent;
    border: none;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: 0.45;
    transition: all 0.15s;
}

    .apd-status-pill:hover[b-beoa0isrll] {
        opacity: 0.8;
    }

.apd-status-pill--scheduled.active[b-beoa0isrll] {
    background: var(--mud-palette-surface);
    color: #f59e0b;
    opacity: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.apd-status-pill--completed.active[b-beoa0isrll] {
    background: var(--mud-palette-surface);
    color: #10b981;
    opacity: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.apd-status-pill--canceled.active[b-beoa0isrll] {
    background: var(--mud-palette-surface);
    color: #ef4444;
    opacity: 1;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* Assignment */
.apd-assign-row[b-beoa0isrll] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.apd-assigned-current[b-beoa0isrll] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    opacity: 0.45;
    margin-top: 6px;
}

    .apd-assigned-current .mud-icon-root[b-beoa0isrll] {
        font-size: 0.82rem !important;
    }

/* ── TAB 2: Notes ── */
.apd-pane--notes[b-beoa0isrll] {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.apd-notes-feed[b-beoa0isrll] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.apd-notes-empty[b-beoa0isrll] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    opacity: 0.35;
    font-size: 0.8rem;
    text-align: center;
    height: 100%;
}

.apd-note[b-beoa0isrll] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 80%;
}

.apd-note--own[b-beoa0isrll] {
    align-self: flex-end;
}

.apd-note--other[b-beoa0isrll] {
    align-self: flex-start;
}

.apd-note-meta[b-beoa0isrll] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.apd-note--own .apd-note-meta[b-beoa0isrll] {
    flex-direction: row-reverse;
}

.apd-note-author[b-beoa0isrll] {
    font-size: 0.65rem;
    font-weight: 700;
    opacity: 0.4;
}

.apd-note-time[b-beoa0isrll] {
    font-size: 0.62rem;
    opacity: 0.28;
}

.apd-note-del[b-beoa0isrll] {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    padding: 0;
    color: #ef4444;
    display: flex;
    align-items: center;
    margin-left: auto;
    transition: opacity 0.15s;
}

.apd-note--own .apd-note-del[b-beoa0isrll] {
    margin-left: 0;
    margin-right: auto;
}

.apd-note-del .mud-icon-root[b-beoa0isrll] {
    font-size: 0.75rem !important;
}

.apd-note:hover .apd-note-del[b-beoa0isrll] {
    opacity: 0.4;
}

.apd-note-del:hover[b-beoa0isrll] {
    opacity: 1 !important;
}

.apd-note-body[b-beoa0isrll] {
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 9px 13px;
    border-radius: 12px;
    word-break: break-word;
}

.apd-note--own .apd-note-body[b-beoa0isrll] {
    background: var(--mud-palette-primary);
    color: #fff;
    border-bottom-right-radius: 3px;
}

.apd-note--other .apd-note-body[b-beoa0isrll] {
    background: rgba(128,128,128,0.1);
    border-bottom-left-radius: 3px;
}

.apd-note-input[b-beoa0isrll] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid rgba(128,128,128,0.1);
    flex-shrink: 0;
}

.apd-note-field[b-beoa0isrll] {
    flex: 1;
}
/* /Components/Pages/Appointments.razor.rz.scp.css */
/* ============================================
   Appointments — List Page
   ============================================ */

.appointments-page[b-v13d6l60yl] {
    padding: var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
}

/* ── Header ── */
.page-header[b-v13d6l60yl] {
    margin-bottom: var(--space-5);
}

.header-top[b-v13d6l60yl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-3);
}

.header-title h1[b-v13d6l60yl] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.title-accent[b-v13d6l60yl] {
    display: inline-block;
    width: 4px;
    height: 1.6rem;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.header-title p[b-v13d6l60yl] {
    margin: 3px 0 0 0.65rem;
    font-size: 0.8rem;
    opacity: 0.45;
    font-weight: 500;
}

.header-actions[b-v13d6l60yl] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* ── Stat ticker ── */
.stat-ticker[b-v13d6l60yl] {
    display: flex;
    align-items: center;
    padding-left: 0.65rem;
    gap: 0;
}

.ticker-item[b-v13d6l60yl] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding-right: 1.1rem;
}

.ticker-num[b-v13d6l60yl] {
    font-size: 1.2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.ticker-today[b-v13d6l60yl] {
    color: #2563eb;
}

.ticker-upcoming[b-v13d6l60yl] {
    color: #f59e0b;
}

.ticker-completed[b-v13d6l60yl] {
    color: #10b981;
}

.ticker-cancelled[b-v13d6l60yl] {
    color: #ef4444;
}

.ticker-sep[b-v13d6l60yl] {
    font-size: 0.7rem;
    opacity: 0.2;
}

.ticker-lbl[b-v13d6l60yl] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.4;
}

.ticker-rule[b-v13d6l60yl] {
    display: inline-block;
    width: 1px;
    height: 0.9rem;
    background: currentColor;
    opacity: 0.15;
    margin-right: 1.1rem;
}

/* ── Table Panel ── */
.table-panel[b-v13d6l60yl] {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.table-panel-header[b-v13d6l60yl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid rgba(128,128,128,0.1);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.table-panel-title[b-v13d6l60yl] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.5;
}

.table-panel-controls[b-v13d6l60yl] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.search-field[b-v13d6l60yl] {
    max-width: 220px;
    min-width: 160px;
}

.table-loading[b-v13d6l60yl] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 2rem 1.5rem;
    opacity: 0.5;
    font-size: 0.875rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .appointments-page[b-v13d6l60yl] {
        padding: var(--space-4);
    }

    .header-top[b-v13d6l60yl] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .header-actions[b-v13d6l60yl] {
        width: 100%;
        flex-wrap: wrap;
    }

    .stat-ticker[b-v13d6l60yl] {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .ticker-rule[b-v13d6l60yl] {
        display: none;
    }

    .table-panel-header[b-v13d6l60yl] {
        flex-direction: column;
        align-items: flex-start;
    }

    .table-panel-controls[b-v13d6l60yl] {
        width: 100%;
    }

    .search-field[b-v13d6l60yl] {
        max-width: 100%;
        width: 100%;
    }
}
/* /Components/Pages/AppointmentsCalendar.razor.rz.scp.css */
/* ============================================
   Appointments Calendar — Full-height page
   ============================================ */

.cal-page[b-pc5xa0jugj] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px); /* subtract navbar */
    padding: var(--space-4) var(--space-6) var(--space-5);
    max-width: 1600px;
    margin: 0 auto;
    gap: var(--space-4);
    overflow: hidden;
}

/* ── Header ── */
.cal-header[b-pc5xa0jugj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.cal-header-left[b-pc5xa0jugj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.back-btn[b-pc5xa0jugj] {
    opacity: 0.5;
    font-size: 0.8rem !important;
}

.back-btn:hover[b-pc5xa0jugj] { opacity: 1; }

.cal-title h1[b-pc5xa0jugj] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.title-accent[b-pc5xa0jugj] {
    display: inline-block;
    width: 4px;
    height: 1.6rem;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.cal-header-right[b-pc5xa0jugj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* View switcher */
.view-switcher[b-pc5xa0jugj] {
    display: flex;
    background: rgba(128,128,128,0.1);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.view-btn[b-pc5xa0jugj] {
    background: transparent;
    border: none;
    padding: 5px 16px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    transition: all 0.15s ease;
}

.view-btn:hover[b-pc5xa0jugj] { opacity: 0.85; background: rgba(128,128,128,0.1); }

.view-btn.active[b-pc5xa0jugj] {
    background: var(--mud-palette-primary);
    opacity: 1;
    color: #fff;
}

/* ── Calendar body fills all remaining space ── */
.cal-body[b-pc5xa0jugj] {
    flex: 1;
    min-height: 0;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
}

.cal-loading[b-pc5xa0jugj] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}

/* ── Radzen overrides ── */
[b-pc5xa0jugj] .rz-scheduler {
    font-family: var(--font-sans), sans-serif;
    border: none !important;
    box-shadow: none !important;
    background: transparent;
    height: 100% !important;
}

[b-pc5xa0jugj] .rz-scheduler-header { display: none !important; }

[b-pc5xa0jugj] .rz-scheduler-month-view table {
    table-layout: fixed;
    width: 100%;
}

[b-pc5xa0jugj] .rz-scheduler-month-view th {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
    opacity: 0.5;
}

[b-pc5xa0jugj] .rz-scheduler-month-view td {
    height: 120px !important;
    vertical-align: top;
    padding: 4px !important;
    border: 1px solid rgba(128,128,128,0.08) !important;
}

[b-pc5xa0jugj] .rz-scheduler-week-view td,
[b-pc5xa0jugj] .rz-scheduler-day-view td {
    height: 44px !important;
    border-color: rgba(128,128,128,0.08) !important;
}

[b-pc5xa0jugj] .rz-scheduler-time {
    font-size: 0.67rem;
    font-weight: 600;
    opacity: 0.4;
    padding: 0 8px;
}

[b-pc5xa0jugj] .rz-scheduler-appointment {
    border-radius: 4px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 2px 5px !important;
    margin: 1px 2px !important;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}

[b-pc5xa0jugj] .rz-scheduler-appointment:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

[b-pc5xa0jugj] .rz-scheduler-today { background: rgba(37,99,235,0.04) !important; }

[b-pc5xa0jugj] .rz-scheduler-current-time {
    background: #ef4444;
    height: 2px;
    z-index: 10;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cal-page[b-pc5xa0jugj] {
        padding: var(--space-3) var(--space-4);
        height: auto;
        overflow: visible;
    }

    .cal-body[b-pc5xa0jugj] { height: 600px; }

    .cal-header[b-pc5xa0jugj] { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .cal-header-right[b-pc5xa0jugj] { width: 100%; justify-content: space-between; }
}
/* /Components/Pages/Archive.razor.rz.scp.css */
/* Archive Page - Modern MudBlazor Style */

.archive-page[b-eodpawbh6u] {
    padding: var(--space-6);
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header */
.page-header[b-eodpawbh6u] {
    margin-bottom: var(--space-6);
}

[b-eodpawbh6u] .archive-breadcrumbs {
    padding: 0;
    margin-bottom: var(--space-2);
}

.header-row[b-eodpawbh6u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
}

[b-eodpawbh6u] .header-title {
    font-weight: 700;
    line-height: 1.2;
}

.bulk-actions[b-eodpawbh6u] {
    flex-shrink: 0;
}

/* Search Bar */
.search-bar[b-eodpawbh6u] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--mud-palette-divider);
    margin-bottom: var(--space-6);
    background: var(--mud-palette-surface);
}

.search-input[b-eodpawbh6u] {
    flex: 1;
    min-width: 200px;
}

.type-filter[b-eodpawbh6u] {
    min-width: 160px;
    max-width: 200px;
}

/* Card Grid */
.archive-grid[b-eodpawbh6u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-4);
}

/* Archive Card */
.archive-card[b-eodpawbh6u] {
    padding: var(--space-4);
    border-radius: var(--radius-lg) !important;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.archive-card:hover[b-eodpawbh6u] {
    border-color: var(--mud-palette-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mud-theme-dark .archive-card:hover[b-eodpawbh6u] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Card Top Row */
.card-top[b-eodpawbh6u] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

[b-eodpawbh6u] .type-chip {
    font-size: 0.7rem;
    height: 24px;
}

.card-actions[b-eodpawbh6u] {
    display: flex;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.archive-card:hover .card-actions[b-eodpawbh6u] {
    opacity: 1;
}

/* Card Body */
.card-body[b-eodpawbh6u] {
    padding: var(--space-1) 0;
}

[b-eodpawbh6u] .card-title {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}

/* Card Meta */
.card-meta[b-eodpawbh6u] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.meta-item[b-eodpawbh6u] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pin-text[b-eodpawbh6u] {
    font-family: monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Card Footer */
.card-footer-info[b-eodpawbh6u] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-top: var(--space-2);
    opacity: 0.6;
}

/* Empty State */
.empty-state[b-eodpawbh6u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    border: 2px dashed var(--mud-palette-divider);
    border-radius: var(--radius-xl);
    margin-top: var(--space-6);
}

.empty-icon-wrapper[b-eodpawbh6u] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-eodpawbh6u] .empty-icon-wrapper .mud-icon-root {
    font-size: 2.5rem;
    opacity: 0.4;
}

/* No Results */
.no-results[b-eodpawbh6u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8);
    text-align: center;
    margin-top: var(--space-4);
}

/* Loading */
.loading-state[b-eodpawbh6u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
}

/* Responsive */
@media (max-width: 1024px) {
    .header-row[b-eodpawbh6u] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .archive-page[b-eodpawbh6u] {
        padding: var(--space-4);
    }

    .archive-grid[b-eodpawbh6u] {
        grid-template-columns: 1fr;
    }

    .search-bar[b-eodpawbh6u] {
        flex-direction: column;
    }

    .search-input[b-eodpawbh6u],
    .type-filter[b-eodpawbh6u] {
        width: 100%;
        max-width: 100%;
    }

    .card-actions[b-eodpawbh6u] {
        opacity: 1;
    }
}
/* /Components/Pages/Blazaar.razor.rz.scp.css */
/* ============================================
   Blazaar — App Marketplace
   ============================================ */

.blz[b-vc17dg5ynh] {
    min-height: 100vh;
}

/* ══════════════════════════════════════
   HERO
   ══════════════════════════════════════ */
.blz-hero[b-vc17dg5ynh] {
    padding: 2.5rem 2rem 2rem;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.blz-hero-inner[b-vc17dg5ynh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.blz-hero-eyebrow[b-vc17dg5ynh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6366f1;
}

.blz-hero-eyebrow svg[b-vc17dg5ynh] { color: #6366f1; }

.blz-hero-title[b-vc17dg5ynh] {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
    line-height: 1;
    margin: 0;
}

.blz-hero-sub[b-vc17dg5ynh] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
    max-width: 400px;
}

.blz-search[b-vc17dg5ynh] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 10px;
    padding: 0 14px;
    height: 40px;
    width: 360px;
    margin-top: 0.5rem;
    transition: border-color 0.15s;
}

.blz-search:focus-within[b-vc17dg5ynh] {
    border-color: rgba(99,102,241,0.5);
}

.blz-search-input[b-vc17dg5ynh] {
    background: none;
    border: none;
    outline: none;
    color: var(--mud-palette-text-primary);
    font-size: 0.82rem;
    flex: 1;
    font-family: inherit;
}

.blz-search-input[b-vc17dg5ynh]::placeholder { color: var(--mud-palette-text-disabled); }

/* Stats */
.blz-hero-stats[b-vc17dg5ynh] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 0.25rem;
}

.blz-stat[b-vc17dg5ynh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.blz-stat-num[b-vc17dg5ynh] {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--mud-palette-text-primary);
    line-height: 1;
}

.blz-stat-lbl[b-vc17dg5ynh] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-text-disabled);
}

.blz-stat-rule[b-vc17dg5ynh] {
    width: 1px;
    height: 32px;
    background: var(--mud-palette-table-lines);
}

/* ══════════════════════════════════════
   BODY LAYOUT
   ══════════════════════════════════════ */
.blz-body[b-vc17dg5ynh] {
    display: flex;
    gap: 0;
}

/* ══════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════ */
.blz-sidebar[b-vc17dg5ynh] {
    width: 200px;
    flex-shrink: 0;
    padding: 1.5rem 1rem;
    border-right: 1px solid var(--mud-palette-table-lines);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 52px;
    height: calc(100vh - 52px);
    overflow-y: auto;
}

.blz-filter-label[b-vc17dg5ynh] {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 0 8px;
    margin-bottom: 4px;
}

.blz-filter-item[b-vc17dg5ynh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    width: 100%;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.blz-filter-item:hover[b-vc17dg5ynh] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.blz-filter-item.active[b-vc17dg5ynh] {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.blz-filter-dot[b-vc17dg5ynh] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.blz-filter-count[b-vc17dg5ynh] {
    margin-left: auto;
    font-size: 0.68rem;
    color: var(--mud-palette-text-disabled);
}

/* ══════════════════════════════════════
   MAIN GRID
   ══════════════════════════════════════ */
.blz-main[b-vc17dg5ynh] {
    flex: 1;
    padding: 1.75rem 2rem;
    min-width: 0;
}

.blz-section-label[b-vc17dg5ynh] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    margin-bottom: 0.75rem;
}

.blz-grid[b-vc17dg5ynh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* ══════════════════════════════════════
   APP CARD
   ══════════════════════════════════════ */
.blz-card[b-vc17dg5ynh] {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-table-lines);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.blz-card:hover[b-vc17dg5ynh] {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.blz-card--installed[b-vc17dg5ynh] {
    border-color: rgba(99,102,241,0.3);
    background: var(--mud-palette-surface);
}

.blz-card--installed:hover[b-vc17dg5ynh] {
    border-color: rgba(99,102,241,0.55);
}

.blz-card--soon[b-vc17dg5ynh] {
    opacity: 0.6;
}

.blz-card--clickable[b-vc17dg5ynh] {
    cursor: pointer;
}

.blz-card--clickable:active[b-vc17dg5ynh] {
    transform: scale(0.995);
}

.blz-card-actions[b-vc17dg5ynh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blz-card-header[b-vc17dg5ynh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 4px;
}

.blz-card-icon[b-vc17dg5ynh] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.blz-card-badges[b-vc17dg5ynh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.blz-badge[b-vc17dg5ynh] {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
}

.blz-badge--installed[b-vc17dg5ynh] {
    background: rgba(99,102,241,0.12);
    color: #818cf8;
    border: 1px solid rgba(99,102,241,0.2);
}

.blz-badge--free[b-vc17dg5ynh] {
    background: rgba(16,185,129,0.12);
    color: #10b981;
    border: 1px solid rgba(16,185,129,0.2);
}

.blz-badge--price[b-vc17dg5ynh] {
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
    border: 1px solid rgba(245,158,11,0.2);
}

.blz-badge--soon[b-vc17dg5ynh] {
    background: rgba(107,114,128,0.12);
    color: #9ca3af;
    border: 1px solid rgba(107,114,128,0.2);
}

.blz-card-name[b-vc17dg5ynh] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.blz-card-desc[b-vc17dg5ynh] {
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    flex: 1;
}

.blz-card-footer[b-vc17dg5ynh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
}

.blz-card-category[b-vc17dg5ynh] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--mud-palette-text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.blz-btn[b-vc17dg5ynh] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: opacity 0.12s, transform 0.1s;
}

.blz-btn:active[b-vc17dg5ynh] { transform: scale(0.97); }

.blz-btn--install[b-vc17dg5ynh] {
    background: var(--mud-palette-primary);
    color: #fff;
}

.blz-btn--install:hover[b-vc17dg5ynh] { opacity: 0.88; }

.blz-btn--manage[b-vc17dg5ynh] {
    background: rgba(99,102,241,0.12);
    color: #818cf8;
    border: 1px solid rgba(99,102,241,0.2);
}

.blz-btn--manage:hover[b-vc17dg5ynh] {
    background: rgba(99,102,241,0.2);
}

/* ══════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════ */
.blz-empty[b-vc17dg5ynh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4rem;
    color: var(--mud-palette-text-disabled);
}

.blz-empty-text[b-vc17dg5ynh] {
    font-size: 0.85rem;
    color: var(--mud-palette-text-disabled);
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    .blz-hero[b-vc17dg5ynh] { flex-direction: column; align-items: flex-start; }
    .blz-hero-stats[b-vc17dg5ynh] { align-self: flex-start; }
    .blz-search[b-vc17dg5ynh] { width: 100%; }
    .blz-sidebar[b-vc17dg5ynh] { display: none; }
    .blz-main[b-vc17dg5ynh] { padding: 1.25rem; }
    .blz-grid[b-vc17dg5ynh] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Customers.razor.rz.scp.css */
/* ============================================
   Customers — Contact Directory Layout
   ============================================ */

.cx-page[b-jt9twdl52n] {
    padding: var(--space-6) var(--space-8);
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
}

/* ── Header ── */
.cx-header[b-jt9twdl52n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    gap: var(--space-4);
}

.cx-header-left h1[b-jt9twdl52n] {
    margin: 0 0 var(--space-2) 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: -0.02em;
}

.title-accent[b-jt9twdl52n] {
    display: inline-block;
    width: 4px;
    height: 1.6rem;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.cx-vitals[b-jt9twdl52n] {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-left: 0.65rem;
}

.cx-vital-num[b-jt9twdl52n] {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

.cx-vital-lbl[b-jt9twdl52n] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.4;
    margin-left: 5px;
    margin-right: 14px;
}

.cx-vital-rule[b-jt9twdl52n] {
    width: 1px;
    height: 0.9rem;
    background: currentColor;
    opacity: 0.15;
    margin-right: 14px;
    align-self: center;
}

.cx-header-right[b-jt9twdl52n] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.cx-search[b-jt9twdl52n] {
    min-width: 280px;
}

/* ── Loading / Empty ── */
.cx-loading[b-jt9twdl52n], .cx-empty[b-jt9twdl52n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 40vh;
    opacity: 0.5;
    font-size: 0.875rem;
}

/* ── Body: alpha rail + roster ── */
.cx-body[b-jt9twdl52n] {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

/* Alphabet sidebar */
.cx-alpha[b-jt9twdl52n] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: sticky;
    top: 1rem;
    flex-shrink: 0;
}

.cx-alpha-btn[b-jt9twdl52n] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-primary);
    transition: background 0.1s, opacity 0.1s;
}

    .cx-alpha-btn:hover[b-jt9twdl52n] {
        background: rgba(37,99,235,0.1);
    }

.cx-alpha-btn--dim[b-jt9twdl52n] {
    opacity: 0.18;
    pointer-events: none;
}

/* Roster */
.cx-roster[b-jt9twdl52n] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Letter group */
.cx-group[b-jt9twdl52n] {
}

.cx-group-letter[b-jt9twdl52n] {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.3;
    padding: 0 0 var(--space-2) 0;
    border-bottom: 1px solid rgba(128,128,128,0.1);
    margin-bottom: 2px;
}

/* Customer row */
.cx-row[b-jt9twdl52n] {
    display: grid;
    grid-template-columns: 40px 1fr 200px 100px 70px 64px;
    align-items: center;
    gap: var(--space-4);
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    position: relative;
}

    .cx-row:hover[b-jt9twdl52n] {
        background: rgba(128,128,128,0.06);
    }

        .cx-row:hover .cx-row-actions[b-jt9twdl52n] {
            opacity: 1;
        }

/* Avatar */
.cx-avatar[b-jt9twdl52n] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* Name + email */
.cx-row-main[b-jt9twdl52n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cx-row-name[b-jt9twdl52n] {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-row-email[b-jt9twdl52n] {
    font-size: 0.72rem;
    opacity: 0.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Phone + postal */
.cx-row-details[b-jt9twdl52n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cx-row-phone[b-jt9twdl52n] {
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.65;
}

.cx-row-postal[b-jt9twdl52n] {
    font-size: 0.7rem;
    font-family: monospace;
    font-weight: 700;
    opacity: 0.45;
    cursor: copy;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(128,128,128,0.08);
    width: fit-content;
    transition: background 0.15s, opacity 0.15s;
}

    .cx-row-postal:hover[b-jt9twdl52n] {
        background: rgba(37,99,235,0.1);
        opacity: 1;
        color: var(--mud-palette-primary);
    }

/* Role badge */
.cx-role-badge[b-jt9twdl52n] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.cx-role-user[b-jt9twdl52n] {
    background: rgba(16,185,129,0.12);
    color: #059669;
}

.cx-role-admin[b-jt9twdl52n] {
    background: rgba(245,158,11,0.12);
    color: #d97706;
}

.cx-role-master_admin[b-jt9twdl52n] {
    background: rgba(239,68,68,0.12);
    color: #dc2626;
}

/* Member since */
.cx-row-since[b-jt9twdl52n] {
    font-size: 0.7rem;
    opacity: 0.35;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

/* Action buttons — hidden until hover */
.cx-row-actions[b-jt9twdl52n] {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
    justify-content: flex-end;
}

.cx-action-btn[b-jt9twdl52n] {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    opacity: 0.5;
    transition: background 0.12s, opacity 0.12s;
}

    .cx-action-btn .mud-icon-root[b-jt9twdl52n] {
        font-size: 1rem !important;
    }

    .cx-action-btn:hover[b-jt9twdl52n] {
        background: rgba(128,128,128,0.12);
        opacity: 1;
    }

.cx-action-btn--danger:hover[b-jt9twdl52n] {
    background: rgba(239,68,68,0.1);
    color: #ef4444;
    opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .cx-row[b-jt9twdl52n] {
        grid-template-columns: 36px 1fr 140px 90px 60px 56px;
        gap: var(--space-3);
    }
}

@media (max-width: 768px) {
    .cx-page[b-jt9twdl52n] {
        padding: var(--space-4);
    }

    .cx-header[b-jt9twdl52n] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .cx-header-right[b-jt9twdl52n] {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .cx-search[b-jt9twdl52n] {
        min-width: 0;
        width: 100%;
    }

    .cx-alpha[b-jt9twdl52n] {
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
    }

    .cx-row[b-jt9twdl52n] {
        grid-template-columns: 36px 1fr 80px 56px;
    }

    .cx-row-details[b-jt9twdl52n], .cx-row-since[b-jt9twdl52n] {
        display: none;
    }

    .cx-row-actions[b-jt9twdl52n] {
        opacity: 1;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.err-page[b-1ud4fsbyeo] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 2rem;
}

.err-card[b-1ud4fsbyeo] {
    max-width: 440px;
    width: 100%;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
}

.err-icon[b-1ud4fsbyeo] {
    margin-bottom: 1rem;
}

.err-alert[b-1ud4fsbyeo] {
    margin-top: 1.25rem;
    text-align: left;
}

    .err-alert code[b-1ud4fsbyeo] {
        font-size: 0.75rem;
        word-break: break-all;
        opacity: 0.8;
    }

.err-actions[b-1ud4fsbyeo] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================
   Dashboard — Editorial layout
   ============================================ */

.db[b-4hkuwhl708] {
    padding: var(--space-6) var(--space-8);
    max-width: 1500px;
    margin: 0 auto;
    min-height: 100vh;
}

.db-loading[b-4hkuwhl708] {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══ HERO BAND ═══ */
.db-hero[b-4hkuwhl708] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(128,128,128,0.12);
    margin-bottom: var(--space-5);
}

.db-greeting[b-4hkuwhl708] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

    .db-greeting em[b-4hkuwhl708] {
        font-style: normal;
        color: var(--mud-palette-primary);
    }

.db-date[b-4hkuwhl708] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.4;
    margin-top: 6px;
}

.db-hero-right[b-4hkuwhl708] {
    text-align: right;
}

.db-revenue-label[b-4hkuwhl708] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.4;
    margin-bottom: 4px;
}

.db-revenue-num[b-4hkuwhl708] {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--mud-palette-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ═══ VITALS ROW ═══ */
.db-vitals[b-4hkuwhl708] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-6);
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(128,128,128,0.12);
}

.db-vital[b-4hkuwhl708] {
    flex: 1;
}

.db-vital-link[b-4hkuwhl708] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    padding: var(--space-2) var(--space-4);
    border-radius: 8px;
    transition: background 0.15s ease;
}

    .db-vital-link:hover[b-4hkuwhl708] {
        background: rgba(128,128,128,0.07);
    }

.db-vital-num[b-4hkuwhl708] {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

    .db-vital-num.upcoming[b-4hkuwhl708] {
        color: #f59e0b;
    }

    .db-vital-num.completed[b-4hkuwhl708] {
        color: #10b981;
    }

    .db-vital-num.overdue[b-4hkuwhl708] {
        color: #ef4444;
    }

.db-vital-lbl[b-4hkuwhl708] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 0.4;
}

.db-vital-rule[b-4hkuwhl708] {
    width: 1px;
    height: 2.5rem;
    background: rgba(128,128,128,0.15);
    flex-shrink: 0;
}

/* ═══ MAIN GRID ═══ */
.db-grid[b-4hkuwhl708] {
    display: grid;
    grid-template-columns: 1fr 280px 320px;
    grid-template-rows: auto;
    gap: var(--space-5);
}

/* ── Shared panel ── */
.db-panel[b-4hkuwhl708] {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid rgba(128,128,128,0.1);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.db-panel-head[b-4hkuwhl708] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.25rem;
}

.db-panel-title[b-4hkuwhl708] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.45;
}

.db-panel-sub[b-4hkuwhl708] {
    font-size: 0.7rem;
    opacity: 0.35;
    font-weight: 600;
}

.db-panel-link[b-4hkuwhl708] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s;
}

    .db-panel-link:hover[b-4hkuwhl708] {
        opacity: 1;
    }

/* ── Revenue chart ── */
.db-chart[b-4hkuwhl708] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.db-svg[b-4hkuwhl708] {
    width: 100%;
    height: 130px;
    overflow: visible;
}

.db-bar[b-4hkuwhl708] {
    fill: rgba(37,99,235,0.18);
    transition: fill 0.2s ease;
}

    .db-bar:hover[b-4hkuwhl708] {
        fill: rgba(37,99,235,0.5);
        cursor: pointer;
    }

.db-bar--current[b-4hkuwhl708] {
    fill: var(--mud-palette-primary);
}

    .db-bar--current:hover[b-4hkuwhl708] {
        fill: var(--mud-palette-primary-darken);
    }

.db-chart-labels[b-4hkuwhl708] {
    display: flex;
    justify-content: space-between;
    padding: 0 1px;
}

    .db-chart-labels span[b-4hkuwhl708] {
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        opacity: 0.35;
        flex: 1;
        text-align: center;
    }

.db-empty-chart[b-4hkuwhl708] {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    opacity: 0.35;
}

/* ── Appointments breakdown ── */
.db-appt-rows[b-4hkuwhl708] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.db-appt-row[b-4hkuwhl708] {
}

.db-appt-meta[b-4hkuwhl708] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.db-appt-dot[b-4hkuwhl708] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .db-appt-dot.scheduled[b-4hkuwhl708] {
        background: #f59e0b;
    }

    .db-appt-dot.completed[b-4hkuwhl708] {
        background: #10b981;
    }

    .db-appt-dot.canceled[b-4hkuwhl708] {
        background: #ef4444;
    }

.db-appt-name[b-4hkuwhl708] {
    font-size: 0.8rem;
    font-weight: 600;
    flex: 1;
}

.db-appt-count[b-4hkuwhl708] {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
}

.db-appt-track[b-4hkuwhl708] {
    height: 5px;
    background: rgba(128,128,128,0.12);
    border-radius: 3px;
    overflow: hidden;
}

.db-appt-fill[b-4hkuwhl708] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease;
}

    .db-appt-fill.scheduled[b-4hkuwhl708] {
        background: #f59e0b;
    }

    .db-appt-fill.completed[b-4hkuwhl708] {
        background: #10b981;
    }

    .db-appt-fill.canceled[b-4hkuwhl708] {
        background: #ef4444;
    }

.db-appt-total[b-4hkuwhl708] {
    margin-top: 1.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.3;
    text-align: right;
}

/* ── Activity feed ── */
.db-feed[b-4hkuwhl708] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.db-feed-empty[b-4hkuwhl708] {
    font-size: 0.8rem;
    opacity: 0.35;
    padding: 1rem 0;
    text-align: center;
}

.db-feed-item[b-4hkuwhl708] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(128,128,128,0.07);
}

    .db-feed-item:last-child[b-4hkuwhl708] {
        border-bottom: none;
    }

.db-feed-icon[b-4hkuwhl708] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

    .db-feed-icon .mud-icon-root[b-4hkuwhl708] {
        font-size: 0.95rem !important;
    }

    .db-feed-icon.appointment[b-4hkuwhl708] {
        background: rgba(37,99,235,0.1);
        color: #2563eb;
    }

    .db-feed-icon.invoice[b-4hkuwhl708] {
        background: rgba(16,185,129,0.1);
        color: #10b981;
    }

    .db-feed-icon.customer[b-4hkuwhl708] {
        background: rgba(245,158,11,0.1);
        color: #f59e0b;
    }

.db-feed-body[b-4hkuwhl708] {
    flex: 1;
    min-width: 0;
}

.db-feed-title[b-4hkuwhl708] {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.db-feed-meta[b-4hkuwhl708] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.db-feed-customer[b-4hkuwhl708] {
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.5;
}

.db-feed-time[b-4hkuwhl708] {
    font-size: 0.67rem;
    opacity: 0.38;
    font-weight: 500;
}

.db-feed-sep[b-4hkuwhl708] {
    font-size: 0.6rem;
    opacity: 0.2;
}

.db-feed-amount[b-4hkuwhl708] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #10b981;
}

.db-feed-status[b-4hkuwhl708] {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

    .db-feed-status.completed[b-4hkuwhl708], .db-feed-status.paid[b-4hkuwhl708] {
        background: rgba(16,185,129,0.12);
        color: #10b981;
    }

    .db-feed-status.scheduled[b-4hkuwhl708], .db-feed-status.open[b-4hkuwhl708] {
        background: rgba(245,158,11,0.12);
        color: #f59e0b;
    }

    .db-feed-status.overdue[b-4hkuwhl708], .db-feed-status.canceled[b-4hkuwhl708] {
        background: rgba(239,68,68,0.12);
        color: #ef4444;
    }

/* ═══ Responsive ═══ */
@media (max-width: 1200px) {
    .db-grid[b-4hkuwhl708] {
        grid-template-columns: 1fr 1fr;
    }

    .db-panel--revenue[b-4hkuwhl708] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .db[b-4hkuwhl708] {
        padding: var(--space-4);
    }

    .db-hero[b-4hkuwhl708] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .db-hero-right[b-4hkuwhl708] {
        text-align: left;
    }

    .db-revenue-num[b-4hkuwhl708] {
        font-size: 2rem;
    }

    .db-greeting[b-4hkuwhl708] {
        font-size: 1.5rem;
    }

    .db-vitals[b-4hkuwhl708] {
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .db-vital-rule[b-4hkuwhl708] {
        display: none;
    }

    .db-vital[b-4hkuwhl708] {
        flex: 1 1 40%;
    }

    .db-grid[b-4hkuwhl708] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   LOGIN — PRODUSERA
   Editorial / refined-luxury split. Always-dark brand canvas on
   the left asserts the brand; right panel inherits app theme.
   ════════════════════════════════════════════════════════════════ */

.pl[b-0g5ink2cix] {
    --pl-ink:        #0a0a0c;
    --pl-ink-2:      #131318;
    --pl-fog:        rgba(255,255,255,.06);
    --pl-line:       rgba(255,255,255,.08);
    --pl-text:       rgba(255,255,255,.92);
    --pl-text-mute:  rgba(255,255,255,.55);
    --pl-text-dim:   rgba(255,255,255,.32);
    --pl-accent:     var(--mud-palette-primary);

    --pl-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --pl-sans:  'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pl-mono:  ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    font-family: var(--pl-sans);
    font-feature-settings: 'ss01', 'cv11';
}

/* ════════════════════════════════════════════════════════════════
   LEFT — Brand canvas (always dark, always premium)
   ════════════════════════════════════════════════════════════════ */
.pl-canvas[b-0g5ink2cix] {
    position: relative;
    background: var(--pl-ink);
    color: var(--pl-text);
    display: flex;
    flex-direction: column;
    padding: 2.25rem 2.5rem;
    overflow: hidden;
    isolation: isolate;
}

/* ── Atmosphere: gradient mesh ── */
.pl-mesh[b-0g5ink2cix] {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 15% 20%,
            color-mix(in oklab, var(--pl-accent) 35%, transparent) 0%,
            transparent 60%),
        radial-gradient(ellipse 70% 50% at 85% 75%,
            color-mix(in oklab, var(--pl-accent) 22%, transparent) 0%,
            transparent 65%),
        radial-gradient(ellipse 90% 60% at 50% 110%,
            rgba(120, 140, 255, .12) 0%, transparent 70%);
    filter: blur(2px);
    opacity: .85;
    z-index: 0;
    animation: pl-breathe-b-0g5ink2cix 18s ease-in-out infinite alternate;
}

@keyframes pl-breathe-b-0g5ink2cix {
    0%   { transform: scale(1)   translate(0,0); opacity: .85; }
    100% { transform: scale(1.08) translate(-1%, 1%); opacity: 1; }
}

/* ── Atmosphere: dot grid ── */
.pl-grid[b-0g5ink2cix] {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 90%);
    z-index: 0;
    pointer-events: none;
}

/* ── Floating orbs ── */
.pl-orb[b-0g5ink2cix] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .35;
    z-index: 0;
    pointer-events: none;
}
.pl-orb-a[b-0g5ink2cix] {
    width: 380px; height: 380px;
    top: -80px; right: -120px;
    background: color-mix(in oklab, var(--pl-accent) 70%, white);
    animation: pl-float-b-0g5ink2cix 20s ease-in-out infinite;
}
.pl-orb-b[b-0g5ink2cix] {
    width: 280px; height: 280px;
    bottom: -60px; left: -80px;
    background: color-mix(in oklab, var(--pl-accent) 60%, #5b6cff);
    animation: pl-float-b-0g5ink2cix 24s ease-in-out infinite reverse;
}
@keyframes pl-float-b-0g5ink2cix {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(20px, -30px) scale(1.1); }
}

/* ── Atmosphere: grain ── */
.pl-grain[b-0g5ink2cix] {
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .35;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Top bar ── */
.pl-top[b-0g5ink2cix] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pl-wordmark[b-0g5ink2cix] {
    font-family: var(--pl-sans);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}
.pl-mark-dot[b-0g5ink2cix] {
    color: var(--pl-accent);
    font-weight: 700;
}

.pl-status[b-0g5ink2cix] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pl-mono);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    color: var(--pl-text-mute);
    padding: 6px 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--pl-line);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pl-status-pulse[b-0g5ink2cix] {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74,222,128,.5);
    animation: pl-pulse-b-0g5ink2cix 2s ease-out infinite;
}
@keyframes pl-pulse-b-0g5ink2cix {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
    100% { box-shadow: 0 0 0 10px rgba(74,222,128,0); }
}

/* ── Center content ── */
.pl-center[b-0g5ink2cix] {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 0;
    max-width: 540px;
}

.pl-eyebrow-mono[b-0g5ink2cix] {
    font-family: var(--pl-mono);
    font-size: 0.7rem;
    color: var(--pl-text-dim);
    margin-bottom: 1.25rem;
    letter-spacing: 0.06em;
}

.pl-headline[b-0g5ink2cix] {
    font-family: var(--pl-sans);
    font-weight: 500;
    font-size: clamp(2.6rem, 4.6vw, 4rem);
    line-height: 1.0;
    letter-spacing: -0.045em;
    margin: 0 0 1.5rem;
    color: var(--pl-text);
    animation: pl-rise-b-0g5ink2cix .9s cubic-bezier(.2,.8,.2,1) both;
}
.pl-headline em[b-0g5ink2cix] {
    font-family: var(--pl-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--pl-text);
    background: linear-gradient(120deg,
        color-mix(in oklab, var(--pl-accent) 90%, white) 0%,
        #fff 50%,
        color-mix(in oklab, var(--pl-accent) 80%, white) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

.pl-sub[b-0g5ink2cix] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--pl-text-mute);
    margin: 0 0 2.5rem;
    max-width: 460px;
    animation: pl-rise-b-0g5ink2cix .9s cubic-bezier(.2,.8,.2,1) .1s both;
}

@keyframes pl-rise-b-0g5ink2cix {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Stage: floating live cards ── */
.pl-stage[b-0g5ink2cix] {
    position: relative;
    height: 280px;
    width: 100%;
    max-width: 520px;
}

.pl-thread[b-0g5ink2cix] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

.pl-card[b-0g5ink2cix] {
    position: absolute;
    background: linear-gradient(180deg,
        rgba(255,255,255,.06) 0%,
        rgba(255,255,255,.025) 100%);
    border: 1px solid var(--pl-line);
    border-radius: 14px;
    padding: 14px 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.06) inset,
        0 24px 48px -16px rgba(0,0,0,.6);
    width: 280px;
    color: var(--pl-text);
    z-index: 1;
}

.pl-card-1[b-0g5ink2cix] {
    top: 0;
    left: 0;
    transform: rotate(-2deg);
    animation: pl-card-in-b-0g5ink2cix 1.0s cubic-bezier(.2,.8,.2,1) .25s both,
               pl-bob-a-b-0g5ink2cix 7s ease-in-out 1.25s infinite;
}
.pl-card-2[b-0g5ink2cix] {
    top: 60px;
    right: 0;
    transform: rotate(1.5deg);
    animation: pl-card-in-b-0g5ink2cix 1.0s cubic-bezier(.2,.8,.2,1) .45s both,
               pl-bob-b-b-0g5ink2cix 8s ease-in-out 1.45s infinite;
}
.pl-card-3[b-0g5ink2cix] {
    bottom: 0;
    left: 50px;
    transform: rotate(-0.5deg);
    animation: pl-card-in-b-0g5ink2cix 1.0s cubic-bezier(.2,.8,.2,1) .65s both,
               pl-bob-a-b-0g5ink2cix 9s ease-in-out 1.65s infinite;
}

@keyframes pl-card-in-b-0g5ink2cix {
    from { opacity: 0; transform: translateY(24px) rotate(0); }
}
@keyframes pl-bob-a-b-0g5ink2cix {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -6px; }
}
@keyframes pl-bob-b-b-0g5ink2cix {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}

.pl-card-row[b-0g5ink2cix] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pl-tag[b-0g5ink2cix] {
    font-family: var(--pl-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.4;
}
.pl-tag-blue[b-0g5ink2cix]   { background: rgba(96,165,250,.18); color: #93c5fd; }
.pl-tag-violet[b-0g5ink2cix] { background: rgba(167,139,250,.18); color: #c4b5fd; }
.pl-tag-amber[b-0g5ink2cix]  { background: rgba(251,191,36,.18); color: #fcd34d; }

.pl-card-amt[b-0g5ink2cix] {
    font-family: var(--pl-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--pl-text);
    font-variant-numeric: tabular-nums;
}
.pl-card-time[b-0g5ink2cix] {
    font-family: var(--pl-mono);
    font-size: 0.7rem;
    color: var(--pl-text-dim);
}

.pl-card-name[b-0g5ink2cix] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.35;
}

.pl-card-foot[b-0g5ink2cix] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--pl-text-mute);
    padding-top: 8px;
    border-top: 1px dashed var(--pl-line);
}
.pl-card-foot-thin[b-0g5ink2cix] {
    font-family: var(--pl-mono);
    font-size: 0.68rem;
    color: var(--pl-text-dim);
}
.pl-card-stage[b-0g5ink2cix] {
    color: var(--pl-text-mute);
}
.pl-card-score[b-0g5ink2cix] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #4ade80;
    font-family: var(--pl-mono);
    font-weight: 600;
}

/* Mini bar chart in MRP card */
.pl-card-bars[b-0g5ink2cix] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 22px;
    margin-top: 6px;
}
.pl-card-bars span[b-0g5ink2cix] {
    flex: 1;
    background: linear-gradient(180deg, color-mix(in oklab, var(--pl-accent) 80%, white) 0%, var(--pl-accent) 100%);
    border-radius: 1px;
    opacity: .8;
}

/* ── Bottom: marquee + footer ── */
.pl-bottom[b-0g5ink2cix] {
    position: relative;
    z-index: 2;
    border-top: 1px solid var(--pl-line);
    padding-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pl-marq-label[b-0g5ink2cix] {
    font-family: var(--pl-mono);
    font-size: 0.66rem;
    color: var(--pl-text-dim);
    letter-spacing: 0.04em;
}

.pl-marq[b-0g5ink2cix] {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.pl-marq-track[b-0g5ink2cix] {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    white-space: nowrap;
    font-family: var(--pl-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--pl-text-mute);
    animation: pl-scroll-b-0g5ink2cix 32s linear infinite;
}
.pl-marq-sep[b-0g5ink2cix] {
    color: var(--pl-text-dim);
    font-style: normal;
    font-family: var(--pl-sans);
    font-weight: 300;
}
@keyframes pl-scroll-b-0g5ink2cix {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.pl-foot[b-0g5ink2cix] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pl-mono);
    font-size: 0.66rem;
    color: var(--pl-text-dim);
}
.pl-foot-sep[b-0g5ink2cix] { color: rgba(255,255,255,.18); }


/* ════════════════════════════════════════════════════════════════
   RIGHT — Form panel (theme-aware)
   ════════════════════════════════════════════════════════════════ */
.pl-form-panel[b-0g5ink2cix] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    background: var(--mud-palette-background);
}

.pl-form-mark[b-0g5ink2cix] {
    display: none; /* shown only on mobile */
    position: absolute;
    top: 1.25rem;
    left: 1.5rem;
    font-family: var(--pl-sans);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.pl-form[b-0g5ink2cix] {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: var(--pl-sans);
}

/* Heading */
.pl-form-head[b-0g5ink2cix] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0.25rem; }

.pl-form-eyebrow[b-0g5ink2cix] {
    font-family: var(--pl-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    color: var(--mud-palette-primary);
    margin-bottom: 4px;
}

.pl-form-title[b-0g5ink2cix] {
    font-family: var(--pl-sans);
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin: 0;
}

.pl-form-sub[b-0g5ink2cix] {
    font-size: 0.85rem;
    opacity: 0.55;
    margin: 4px 0 0;
}

/* Error banner */
.pl-error[b-0g5ink2cix] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #ef4444;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.22);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 500;
    animation: pl-shake-b-0g5ink2cix .35s ease;
}
@keyframes pl-shake-b-0g5ink2cix {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

/* Fields */
.pl-fields[b-0g5ink2cix] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pl-field[b-0g5ink2cix] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pl-label[b-0g5ink2cix] {
    font-family: var(--pl-mono);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.55;
}

.pl-label-row[b-0g5ink2cix] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.pl-forgot[b-0g5ink2cix] {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
}

/* Remember me */
.pl-remember[b-0g5ink2cix] { margin-top: -2px; }
.pl-remember-lbl[b-0g5ink2cix] {
    font-size: 0.78rem;
    opacity: 0.65;
}

/* Submit button */
.pl-submit[b-0g5ink2cix] {
    height: 50px !important;
    font-family: var(--pl-sans) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    border-radius: 10px !important;
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .25s ease !important;
}
.pl-submit:hover:not(:disabled)[b-0g5ink2cix] {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px color-mix(in oklab, var(--mud-palette-primary) 50%, transparent) !important;
}
.pl-submit:active:not(:disabled)[b-0g5ink2cix] { transform: translateY(0); }

.pl-submit-key[b-0g5ink2cix] {
    margin-left: 10px;
    font-family: var(--pl-mono);
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.18);
    line-height: 1;
}

/* Divider */
.pl-divider[b-0g5ink2cix] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
}
.pl-divider[b-0g5ink2cix]::before,
.pl-divider[b-0g5ink2cix]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(128,128,128,.2);
}
.pl-divider span[b-0g5ink2cix] {
    font-family: var(--pl-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.45;
}

/* SSO */
.pl-sso[b-0g5ink2cix] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 46px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(128,128,128,.22);
    background: transparent;
    color: inherit;
    font-family: var(--pl-sans);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.pl-sso:hover[b-0g5ink2cix] {
    background: rgba(128,128,128,.06);
    border-color: rgba(128,128,128,.32);
    transform: translateY(-1px);
}
.pl-sso:disabled[b-0g5ink2cix] { opacity: .5; cursor: not-allowed; }

/* CTA line */
.pl-cta[b-0g5ink2cix] {
    text-align: center;
    font-size: 0.82rem;
    opacity: 0.6;
    margin: 4px 0 0;
}
.pl-cta a[b-0g5ink2cix] {
    color: var(--mud-palette-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
}
.pl-cta a:hover[b-0g5ink2cix] { border-bottom-color: var(--mud-palette-primary); }

/* Bottom-right meta strip */
.pl-meta[b-0g5ink2cix] {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pl-mono);
    font-size: 0.66rem;
    opacity: 0.42;
}
.pl-meta a[b-0g5ink2cix] {
    color: inherit;
    text-decoration: none;
    transition: opacity .15s ease;
}
.pl-meta a:hover[b-0g5ink2cix] { opacity: 1; }
.pl-meta span[b-0g5ink2cix] { opacity: 0.4; }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .pl[b-0g5ink2cix] { grid-template-columns: 1fr; grid-template-rows: minmax(380px, auto) 1fr; }
    .pl-canvas[b-0g5ink2cix] { padding: 1.5rem 1.75rem; }
    .pl-center[b-0g5ink2cix] { padding: 1.25rem 0; }
    .pl-stage[b-0g5ink2cix]  { display: none; }
    .pl-headline[b-0g5ink2cix] { font-size: clamp(2rem, 5vw, 2.8rem); }
    .pl-sub[b-0g5ink2cix]      { margin-bottom: 1rem; max-width: 100%; }
    .pl-form-mark[b-0g5ink2cix] { display: block; }
    .pl-meta[b-0g5ink2cix] { position: static; justify-content: center; padding-top: 1rem; }
}

@media (max-width: 640px) {
    .pl-canvas[b-0g5ink2cix] { padding: 1.25rem 1.25rem 1.5rem; }
    .pl-form-panel[b-0g5ink2cix] { padding: 4rem 1.25rem 2rem; }
    .pl-headline[b-0g5ink2cix] { font-size: 2rem; }
    .pl-sub br[b-0g5ink2cix] { display: none; }
    .pl-bottom[b-0g5ink2cix] { padding-top: 0.9rem; gap: 0.6rem; }
    .pl-marq-track[b-0g5ink2cix] { font-size: 1.1rem; }
    .pl-foot[b-0g5ink2cix] { flex-wrap: wrap; }
}

/* Reduced motion respects user preferences */
@media (prefers-reduced-motion: reduce) {
    .pl-mesh[b-0g5ink2cix], .pl-orb-a[b-0g5ink2cix], .pl-orb-b[b-0g5ink2cix],
    .pl-card-1[b-0g5ink2cix], .pl-card-2[b-0g5ink2cix], .pl-card-3[b-0g5ink2cix],
    .pl-marq-track[b-0g5ink2cix], .pl-status-pulse[b-0g5ink2cix],
    .pl-headline[b-0g5ink2cix], .pl-sub[b-0g5ink2cix] {
        animation: none !important;
    }
}
/* /Components/Pages/ModuleGate.razor.rz.scp.css */
.mg-locked[b-ml4h4nmnt6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.mg-card[b-ml4h4nmnt6] {
    max-width: 380px;
    width: 100%;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
}

.mg-icon[b-ml4h4nmnt6] {
    margin-bottom: 1rem;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* ============================================
   Settings — Revamped Landscape Layout
   ============================================ */

.st-page[b-3wpm9kk3lw] {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100vh;
}

/* ── Loading ── */
.st-loading[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}


/* ══════════════════════════════════════
   HERO HEADER
   ══════════════════════════════════════ */
.st-hero[b-3wpm9kk3lw] {
    padding: var(--space-6) 0 var(--space-5) 0;
}

.st-hero-inner[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.st-hero-avatar[b-3wpm9kk3lw] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--mud-palette-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.st-hero-info[b-3wpm9kk3lw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.st-hero-name[b-3wpm9kk3lw] {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.st-hero-meta[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.st-hero-sep[b-3wpm9kk3lw] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.2;
    flex-shrink: 0;
}

.st-hero-detail[b-3wpm9kk3lw] {
    font-size: 0.75rem;
    opacity: 0.4;
    font-weight: 500;
}


/* ══════════════════════════════════════
   TABS BAR
   ══════════════════════════════════════ */
.st-tabs-bar[b-3wpm9kk3lw] {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid rgba(128,128,128,0.1);
    margin-bottom: var(--space-6);
}

.st-tab[b-3wpm9kk3lw] {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    font-size: 0.8rem;
    font-weight: 600;
    color: inherit;
    opacity: 0.4;
    border-bottom: 2px solid transparent;
    transition: opacity 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.st-tab .mud-icon-root[b-3wpm9kk3lw] { font-size: 1rem !important; }

.st-tab:hover[b-3wpm9kk3lw] {
    opacity: 0.7;
    background: rgba(128,128,128,0.04);
}

.st-tab--active[b-3wpm9kk3lw] {
    opacity: 1;
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}


/* ══════════════════════════════════════
   BODY
   ══════════════════════════════════════ */
.st-body[b-3wpm9kk3lw] {
    flex: 1;
}


/* ══════════════════════════════════════
   PANEL GRID (two columns)
   ══════════════════════════════════════ */
.st-panel-grid[b-3wpm9kk3lw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}


/* ══════════════════════════════════════
   CARDS
   ══════════════════════════════════════ */
.st-card[b-3wpm9kk3lw] {
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.st-card--muted[b-3wpm9kk3lw] {
    background: rgba(128,128,128,0.025);
}

.st-card--danger[b-3wpm9kk3lw] {
    border-color: rgba(239,68,68,0.15);
    background: rgba(239,68,68,0.02);
}

.st-card--danger .st-card-head h2[b-3wpm9kk3lw] { color: #ef4444; }

.st-card-head[b-3wpm9kk3lw] {
    margin-bottom: 1.25rem;
}

.st-card-head h2[b-3wpm9kk3lw] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-card-head p[b-3wpm9kk3lw] {
    font-size: 0.72rem;
    opacity: 0.38;
    margin: 0;
}

.st-card-footer[b-3wpm9kk3lw] {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}


/* ══════════════════════════════════════
   FIELDS (reused)
   ══════════════════════════════════════ */
.st-fields[b-3wpm9kk3lw] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: var(--space-5);
}

.st-field-row[b-3wpm9kk3lw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}


/* ══════════════════════════════════════
   INFO LIST (Account Overview)
   ══════════════════════════════════════ */
.st-info-list[b-3wpm9kk3lw] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.st-info-row[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid rgba(128,128,128,0.07);
}

.st-info-row:last-child[b-3wpm9kk3lw] { border-bottom: none; }

.st-info-lbl[b-3wpm9kk3lw] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.35;
}

.st-info-val[b-3wpm9kk3lw] {
    font-size: 0.82rem;
    font-weight: 500;
    text-align: right;
}

.st-info-val--mono[b-3wpm9kk3lw] {
    font-family: monospace;
    font-size: 0.68rem;
    opacity: 0.45;
    word-break: break-all;
}


/* ══════════════════════════════════════
   ROLE BADGES
   ══════════════════════════════════════ */
.st-role-badge[b-3wpm9kk3lw] {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 7px;
    border-radius: 4px;
    width: fit-content;
    white-space: nowrap;
}

.st-role--master_admin[b-3wpm9kk3lw] { background: rgba(239,68,68,0.12);  color: #dc2626; }
.st-role--admin[b-3wpm9kk3lw]        { background: rgba(245,158,11,0.12); color: #d97706; }
.st-role--user[b-3wpm9kk3lw]         { background: rgba(16,185,129,0.12); color: #059669; }


/* ══════════════════════════════════════
   STATUS BADGES
   ══════════════════════════════════════ */
.st-status-badge[b-3wpm9kk3lw] {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

.st-status--active[b-3wpm9kk3lw]          { background: rgba(16,185,129,0.12); color: #059669; }
.st-status--decommissioned[b-3wpm9kk3lw]  { background: rgba(156,163,175,0.15); color: #6b7280; }


/* ══════════════════════════════════════
   ERROR / NOTICES (reused)
   ══════════════════════════════════════ */
.st-error[b-3wpm9kk3lw] {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 600;
    padding: 8px 12px;
    background: rgba(239,68,68,0.07);
    border-radius: 6px;
    border-left: 3px solid #ef4444;
}

.st-sudo-status[b-3wpm9kk3lw] {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 7px;
    border-radius: 4px;
}

.st-sudo-status--ok[b-3wpm9kk3lw]   { background: rgba(16,185,129,0.12); color: #059669; }
.st-sudo-status--warn[b-3wpm9kk3lw] { background: rgba(245,158,11,0.12);  color: #d97706; }

.st-sudo-loading[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    opacity: 0.5;
    margin-bottom: var(--space-4);
}

.st-sudo-readonly[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    opacity: 0.5;
    padding: 12px 0;
}

.st-sudo-notice[b-3wpm9kk3lw] {
    font-size: 0.75rem;
    color: #d97706;
    background: rgba(245,158,11,0.08);
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
    padding: 8px 12px;
    margin-bottom: 1rem;
}


/* ══════════════════════════════════════
   SECURITY TIPS
   ══════════════════════════════════════ */
.st-tips[b-3wpm9kk3lw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.st-tip[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.6;
}


/* ══════════════════════════════════════
   SUDO GATE (in dialog)
   ══════════════════════════════════════ */
.st-sudo-gate[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #d97706;
    background: rgba(245,158,11,0.08);
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
    margin-top: 4px;
}

.st-sudo-gate .mud-icon-root[b-3wpm9kk3lw] { font-size: 0.9rem !important; }

.st-role-select-section[b-3wpm9kk3lw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* ══════════════════════════════════════
   MANAGE USERS — TOOLBAR
   ══════════════════════════════════════ */
.st-users-panel[b-3wpm9kk3lw] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.st-users-toolbar[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.st-users-toolbar-left[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.st-search-field[b-3wpm9kk3lw] {
    max-width: 300px;
    flex: 1;
}

.st-role-filter[b-3wpm9kk3lw] {
    max-width: 160px;
}


/* ══════════════════════════════════════
   MANAGE USERS — TABLE
   ══════════════════════════════════════ */
.st-table-wrap[b-3wpm9kk3lw] {
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: 12px;
    overflow: hidden;
    overflow-x: auto;
}

.st-table[b-3wpm9kk3lw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.st-table thead[b-3wpm9kk3lw] {
    background: rgba(128,128,128,0.04);
}

.st-table th[b-3wpm9kk3lw] {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.35;
    white-space: nowrap;
    border-bottom: 1px solid rgba(128,128,128,0.1);
}

.st-th-actions[b-3wpm9kk3lw] {
    text-align: right !important;
}

.st-table td[b-3wpm9kk3lw] {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(128,128,128,0.06);
    vertical-align: middle;
    white-space: nowrap;
}

.st-table tbody tr:last-child td[b-3wpm9kk3lw] { border-bottom: none; }

.st-table tbody tr:hover[b-3wpm9kk3lw] {
    background: rgba(128,128,128,0.03);
}

.st-row--decommissioned[b-3wpm9kk3lw] {
    opacity: 0.45;
}

.st-row--decommissioned:hover[b-3wpm9kk3lw] {
    opacity: 0.6;
}

.st-table-empty[b-3wpm9kk3lw] {
    text-align: center !important;
    padding: 40px 14px !important;
    opacity: 0.35;
    font-weight: 600;
}


/* User cell (avatar + name) */
.st-user-cell[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.st-user-cell-avatar[b-3wpm9kk3lw] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.03em;
    color: #fff;
}

.st-avatar--master_admin[b-3wpm9kk3lw] { background: #dc2626; }
.st-avatar--admin[b-3wpm9kk3lw]        { background: #d97706; }
.st-avatar--user[b-3wpm9kk3lw]         { background: #059669; }

.st-user-cell-info[b-3wpm9kk3lw] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.st-user-cell-name[b-3wpm9kk3lw] {
    font-weight: 600;
    font-size: 0.8rem;
}

.st-user-cell-id[b-3wpm9kk3lw] {
    font-size: 0.6rem;
    opacity: 0.3;
    font-family: monospace;
}


/* Actions cell */
.st-actions-cell[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}


/* ══════════════════════════════════════
   DIALOG OVERRIDES
   ══════════════════════════════════════ */
.st-dialog-title[b-3wpm9kk3lw] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.95rem;
}

.st-dialog-title .mud-icon-root[b-3wpm9kk3lw] { font-size: 1.2rem !important; }

.st-dialog-title--danger[b-3wpm9kk3lw] { color: #ef4444; }
.st-dialog-title--warning[b-3wpm9kk3lw] { color: #d97706; }


/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 800px) {
    .st-page[b-3wpm9kk3lw] {
        padding: var(--space-4);
    }

    .st-hero-inner[b-3wpm9kk3lw] {
        gap: 14px;
    }

    .st-hero-avatar[b-3wpm9kk3lw] {
        width: 44px;
        height: 44px;
        font-size: 0.8rem;
        border-radius: 10px;
    }

    .st-hero-name[b-3wpm9kk3lw] {
        font-size: 1.1rem;
    }

    .st-hero-meta[b-3wpm9kk3lw] {
        gap: 8px;
    }

    .st-hero-sep[b-3wpm9kk3lw] { display: none; }

    .st-hero-detail[b-3wpm9kk3lw] {
        display: none;
    }

    .st-tabs-bar[b-3wpm9kk3lw] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
    }

    .st-tab[b-3wpm9kk3lw] {
        padding: 8px 14px;
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    .st-panel-grid[b-3wpm9kk3lw] {
        grid-template-columns: 1fr;
    }

    .st-field-row[b-3wpm9kk3lw] {
        grid-template-columns: 1fr;
    }

    .st-users-toolbar[b-3wpm9kk3lw] {
        flex-direction: column;
        align-items: stretch;
    }

    .st-users-toolbar-left[b-3wpm9kk3lw] {
        flex-direction: column;
    }

    .st-search-field[b-3wpm9kk3lw],
    .st-role-filter[b-3wpm9kk3lw] {
        max-width: none;
    }

    .st-table[b-3wpm9kk3lw] {
        font-size: 0.72rem;
    }

    .st-table th[b-3wpm9kk3lw],
    .st-table td[b-3wpm9kk3lw] {
        padding: 8px 10px;
    }
}

@media (max-width: 500px) {
    .st-tab span[b-3wpm9kk3lw] {
        display: none;
    }

    .st-tab[b-3wpm9kk3lw] {
        padding: 10px 14px;
    }
}
/* /Components/Shared/Card.razor.rz.scp.css */
/* Card.razor.css - Let MudBlazor handle the theming */

.card[b-qtmk6j70e9] {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

/* Light theme - minimal */
.card[b-qtmk6j70e9] {
    box-shadow: none;
    border: 1px solid;
    border-radius: 12px;
}

.card:hover[b-qtmk6j70e9] {
    transform: translateY(-1px);
}

/* Dark theme - add shadows */
.mud-theme-dark .card[b-qtmk6j70e9] {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

.mud-theme-dark .card:hover[b-qtmk6j70e9] {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
}

/* Card sections */
.card-header[b-qtmk6j70e9] {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-content[b-qtmk6j70e9] {
    padding: 1.5rem;
}

.card-footer[b-qtmk6j70e9] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title[b-qtmk6j70e9] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.card-subtitle[b-qtmk6j70e9] {
    margin: 0.5rem 0 0 0;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Clickable */
.card.clickable[b-qtmk6j70e9] {
    cursor: pointer;
}

.card.clickable:hover[b-qtmk6j70e9] {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .card-header[b-qtmk6j70e9],
    .card-content[b-qtmk6j70e9],
    .card-footer[b-qtmk6j70e9] {
        padding: 1rem;
    }
}
/* /Components/Shared/DataTable.razor.rz.scp.css */
/* DataTable.razor.css - Component-scoped styles */

.data-table-container[b-toyry8tho6] {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

/* Empty state styling */
.empty-state[b-toyry8tho6] {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    color: var(--gray-500);
}

.empty-icon[b-toyry8tho6] {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-4);
    opacity: 0.6;
}

.empty-state p[b-toyry8tho6] {
    margin: 0;
    font-size: var(--text-lg);
}

/* Table styling */
.data-table[b-toyry8tho6] {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

/* Header styling */
.data-table thead[b-toyry8tho6] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border-bottom: 2px solid var(--gray-200);
}

.data-table th[b-toyry8tho6] {
    padding: var(--space-4) var(--space-6);
    text-align: left;
    font-weight: 600;
    color: var(--gray-700);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    white-space: nowrap;
}

/* Sortable column styling */
.data-table th.sortable[b-toyry8tho6] {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.data-table th.sortable:hover[b-toyry8tho6] {
    background: var(--gray-200);
}

/* Sort indicators */
.sort-indicator[b-toyry8tho6] {
    margin-left: var(--space-2);
    font-size: var(--text-sm);
    opacity: 0.7;
}

.sort-indicator.asc[b-toyry8tho6]::before {
    content: "↑";
}

.sort-indicator.desc[b-toyry8tho6]::before {
    content: "↓";
}

/* Body styling */
.data-table tbody tr[b-toyry8tho6] {
    border-bottom: 1px solid var(--gray-100);
    transition: background-color 0.2s ease;
}

.data-table tbody tr:hover[b-toyry8tho6] {
    background: var(--gray-50);
}

.data-table tbody tr:last-child[b-toyry8tho6] {
    border-bottom: none;
}

.data-table td[b-toyry8tho6] {
    padding: var(--space-4) var(--space-6);
    color: var(--gray-900);
    font-size: var(--text-base);
    vertical-align: middle;
}

/* Actions column */
.actions-column[b-toyry8tho6] {
    width: 120px;
    text-align: center;
}

.actions-cell[b-toyry8tho6] {
    text-align: center;
    white-space: nowrap;
}

.actions-cell button[b-toyry8tho6] {
    margin: 0 var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.actions-cell button:hover[b-toyry8tho6] {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.actions-cell button.danger[b-toyry8tho6] {
    color: var(--error-color);
    border-color: var(--error-color);
}

.actions-cell button.danger:hover[b-toyry8tho6] {
    background: var(--error-color);
    color: var(--white);
}

.actions-cell button.primary[b-toyry8tho6] {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.actions-cell button.primary:hover[b-toyry8tho6] {
    background: var(--primary-color);
    color: var(--white);
}

/* Responsive design */
@media (max-width: 768px) {
    .data-table-container[b-toyry8tho6] {
        overflow-x: auto;
    }

    .data-table th[b-toyry8tho6],
    .data-table td[b-toyry8tho6] {
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
    }

    .actions-cell button[b-toyry8tho6] {
        padding: var(--space-1) var(--space-2);
        font-size: 0.75rem;
    }
}

/* Loading state (if you want to add loading later) */
.data-table.loading[b-toyry8tho6] {
    opacity: 0.6;
    pointer-events: none;
}

.data-table.loading tbody tr:hover[b-toyry8tho6] {
    background: transparent;
}