/* SB CRM — product-feature styles only.
   The shared SB Liquid-Glass design system (tokens, orbs, MudBlazor re-skin, sb-landing,
   sb-status, dash-kpi) lives in Sb.DesignSystem/sb.css, linked BEFORE this file in App.razor.
   Anything that would look right in more than one SB app belongs THERE, not here. */

/* ── Page chrome ─────────────────────────────────────────────────────────── */

.crm-page-title {
    font-weight: 700;
}

.crm-nav-section {
    font-size: 0.72rem;
    font-weight: 600;
    color: #AEAEB2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 16px 4px;
}

/* ── Pipeline board ──────────────────────────────────────────────────────── */

/* Horizontal scroller; columns never squeeze below a readable width. */
.crm-board {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 12px;
}

.crm-board-col {
    flex: 0 0 280px;
    min-width: 280px;
}

.crm-board-col .mud-paper {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
}

/* Drop target highlight while dragging. */
.crm-dropzone {
    min-height: 160px;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.crm-dropzone.mud-drop-zone-drag-over {
    background: rgba(0, 122, 255, 0.06);
}

.crm-deal-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.crm-deal-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--mkt-shadow-sm);
}

.crm-deal-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* "Rotting" age chip on cards that sat in a stage too long. */
.crm-stage-age {
    color: #B25000;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Column footer: count + total value. */
.crm-col-total {
    font-size: 0.8rem;
    color: var(--mkt-text-soft);
    font-variant-numeric: tabular-nums;
}

/* ── Record detail surfaces ──────────────────────────────────────────────── */

/* Right-side deal drawer (DialogPosition.CenterRight), mirrors PM's task drawer. */
.crm-deal-drawer {
    height: 100vh;
    max-height: 100vh !important;
    width: min(560px, 96vw);
    margin: 0 !important;
    border-radius: 16px 0 0 16px !important;
}

.crm-deal-drawer .mud-dialog-content {
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}

/* Key-value field rows on detail headers. */
.crm-field-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mkt-text-faint);
}

.crm-field-value {
    font-size: 0.9rem;
    color: var(--mkt-text);
    overflow-wrap: anywhere;
}

/* Timeline feed rows. */
.crm-timeline-row {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--mkt-border-soft);
}

.crm-timeline-row:last-child {
    border-bottom: none;
}

.crm-timeline-when {
    font-size: 0.75rem;
    color: var(--mkt-text-faint);
    white-space: nowrap;
}

/* Note cards. */
.crm-note {
    background: rgba(255, 249, 196, 0.45);
    border: 0.5px solid rgba(180, 160, 60, 0.25);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.crm-note-meta {
    font-size: 0.75rem;
    color: var(--mkt-text-faint);
}

/* Activity rows (agenda + panels). */
.crm-activity-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--mkt-border-soft);
}

.crm-activity-row:last-child {
    border-bottom: none;
}

.crm-activity-done {
    text-decoration: line-through;
    opacity: 0.55;
}

.crm-overdue {
    color: #D70015;
    font-weight: 600;
}

/* Agenda group headers (Overdue / Today / Upcoming / Later). */
.crm-agenda-group {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mkt-text-soft);
    margin: 18px 0 6px;
}

/* Won/Lost banners on a closed deal. */
.crm-deal-won-banner {
    background: rgba(52, 199, 89, 0.12);
    border: 0.5px solid rgba(52, 199, 89, 0.35);
    border-radius: 12px;
    padding: 8px 12px;
    color: #1E8E3E;
    font-weight: 600;
}

.crm-deal-lost-banner {
    background: rgba(255, 59, 48, 0.08);
    border: 0.5px solid rgba(255, 59, 48, 0.3);
    border-radius: 12px;
    padding: 8px 12px;
    color: #D70015;
    font-weight: 600;
}

/* Dashboard stage funnel rows. */
.crm-funnel-row {
    display: grid;
    grid-template-columns: 140px 1fr 110px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
}

.crm-funnel-name {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-funnel-value {
    font-size: 0.85rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--mkt-text-soft);
}