/* ══════════════════════════════════════════════════════════
   CRM.razor.css — Dashboard
   Minimal, information-rich. Purple accent, clean white cards.
   All colours: --tone-* tokens where possible.
   ══════════════════════════════════════════════════════════ */

/* ── Shell ── */
.crm-dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-bottom: 2rem;
}

/* ── Loading / empty states ── */
.crm-loading,
.crm-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 1.5rem;
}

.crm-loading-card {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.25rem;
    background: rgba(255,255,255,.85);
    box-shadow: 0 8px 28px rgba(26,0,80,.08);
}

.crm-empty-state {
    flex-direction: column;
    text-align: center;
    border: 1px dashed rgba(124,58,237,.22);
    border-radius: 1.25rem;
    background: rgba(255,255,255,.62);
}

.crm-empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--tone-text-main, #343434);
}

.crm-empty-inline {
    padding: 1.25rem;
    border: 1px dashed #d8d4f0;
    border-radius: 0.85rem;
    text-align: center;
    color: var(--tone-text-muted, #6b7280);
}

.crm-empty-inline .fw-semibold {
    color: var(--tone-text-main, #343434);
    font-size: 0.85rem;
    display: block;
    margin-bottom: 0.25rem;
}

/* ── Hero nav → toolbar (below hero, not inside it) ── */
.crm-toolbar {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #e5e3f0;
    border-radius: 0.85rem;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(26,0,80,.04);
}

/* Override SfButton e-outline inside toolbar → flat text pill */
.crm-toolbar .e-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.36rem 0.82rem !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: #5a5a7a !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.crm-toolbar .e-btn:hover {
    background: #f5f0ff !important;
    color: #7c3aed !important;
}

.crm-toolbar .e-btn .e-btn-icon {
    font-size: 0.66rem !important;
    margin: 0 !important;
    opacity: .7;
}

.crm-toolbar .e-btn:hover .e-btn-icon { opacity: 1; }

/* Active/current page button in toolbar */
.crm-toolbar .e-btn.is-active,
.crm-toolbar .e-btn[aria-current="page"] {
    background: #f0ebff !important;
    color: #7c3aed !important;
    font-weight: 700 !important;
}

/* ── Hero (no longer contains nav) ── */
.crm-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #1a0050 0%, #2d0080 45%, #7c3aed 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.crm-hero::before {
    content: "";
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    right: -80px; top: -80px;
    pointer-events: none;
}

.crm-hero-copy { position: relative; z-index: 1; max-width: 54rem; }

.crm-eyebrow,
.crm-panel-kicker {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7c3aed;
    margin-bottom: 0.25rem;
}

.crm-eyebrow { color: rgba(255,255,255,.55); }

.crm-hero h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
}

.crm-hero p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255,255,255,.72);
}

/* Hero nav actions hidden — nav moved to crm-toolbar below hero */
.crm-hero-actions { display: none; }

/* ── Masonry ── */
.crm-masonry {
    column-count: 2;
    column-gap: 1rem;
}

.crm-panel {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem;
    padding: 1.25rem;
    border-radius: 1.1rem;
    background: #fff;
    border: 1px solid #e5e3f0;
    box-shadow: 0 2px 12px rgba(26,0,80,.05);
}

.crm-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0eeff;
}

.crm-panel h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--tone-text-main, #343434);
    letter-spacing: -0.01em;
}

/* ── Summary grid — 4-col ── */
.crm-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.crm-summary-card {
    padding: 0.72rem 0.82rem;
    border-radius: 0.85rem;
    border: 1px solid #ede9fb;
    background: #faf8ff;
}

.crm-summary-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tone-text-muted, #6b7280);
}

.crm-summary-value {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--tone-text-main, #343434);
    margin: 0.18rem 0 0.15rem;
}

.crm-summary-detail {
    font-size: 0.68rem;
    color: var(--tone-text-muted, #6b7280);
    line-height: 1.4;
}

/* Colour variants — border + value colour only */
.crm-summary-card--primary { border-color: rgba(59,130,246,.25); }
.crm-summary-card--primary .crm-summary-value { color: #2563eb; }
.crm-summary-card--good    { border-color: rgba(34,197,94,.25); }
.crm-summary-card--good    .crm-summary-value { color: #16a34a; }
.crm-summary-card--accent  { border-color: rgba(124,58,237,.25); }
.crm-summary-card--accent  .crm-summary-value { color: #7c3aed; }
.crm-summary-card--warn    { border-color: rgba(245,158,11,.28); }
.crm-summary-card--warn    .crm-summary-value { color: #d97706; }
.crm-summary-card--muted   { border-color: #e5e3f0; }
.crm-summary-card--muted   .crm-summary-value { color: #5a5a7a; }

/* ── Work queue ── */
.crm-work-queue {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.crm-queue-card {
    padding: 0.72rem 0.82rem;
    border-radius: 0.85rem;
    border: 1px solid #ede9fb;
    background: #faf8ff;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.crm-queue-card--warn   { border-color: rgba(245,158,11,.3);   background: #fffbf0; }
.crm-queue-card--accent { border-color: rgba(124,58,237,.25);  background: #faf8ff; }

/* Override SfButton e-outline e-small inside queue cards */
.crm-queue-card .e-btn.e-outline.e-small {
    margin-top: 0.4rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.28rem 0.65rem !important;
    border-radius: 8px !important;
    letter-spacing: 0.04em !important;
    color: #7c3aed !important;
    border-color: rgba(124,58,237,.3) !important;
}

.crm-queue-card .e-btn.e-outline.e-small:hover {
    background: rgba(124,58,237,.06) !important;
    border-color: #7c3aed !important;
}

/* Recent items inside queue cards */
.crm-mini-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.crm-mini-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    padding: 0.62rem 0.82rem;
    border-radius: 0.75rem;
    background: #faf8ff;
    border: 1px solid #ede9fb;
    transition: border-color 120ms, background 120ms;
}

.crm-mini-row:hover {
    border-color: rgba(124,58,237,.3);
    background: #f5f0ff;
}

.crm-mini-activity {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tone-text-main, #343434);
    white-space: nowrap;
}

/* ── Client masonry ── */
.crm-client-masonry {
    column-count: 2;
    column-gap: 0.75rem;
}

.crm-client-card {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.95rem;
    background: #fff;
    border: 1px solid #e5e3f0;
    box-shadow: 0 2px 8px rgba(26,0,80,.04);
    transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}

.crm-client-card:hover {
    border-color: rgba(124,58,237,.3);
    box-shadow: 0 6px 20px rgba(124,58,237,.08);
    transform: translateY(-1px);
}

.crm-client-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.6rem;
}

.crm-client-avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(135deg, #5b21b6, #7c3aed);
}

.crm-client-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.28rem;
}

.crm-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.52rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(124,58,237,.08);
    color: #5b21b6;
}

.crm-pill--success { background: rgba(34,197,94,.1);          color: #15803d; }
.crm-pill--muted   { background: rgba(148,163,184,.12);        color: #5a7a7a; }

.crm-client-name {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--tone-text-main, #343434);
    letter-spacing: -0.01em;
    margin-bottom: 0.18rem;
}

.crm-client-meta {
    font-size: 0.73rem;
    color: var(--tone-text-muted, #6b7280);
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-client-activity {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid #f0eeff;
}

.crm-client-activity-label { font-size: 0.66rem; color: var(--tone-text-muted, #6b7280); }
.crm-client-activity-value { font-size: 0.75rem; font-weight: 700; color: var(--tone-text-main, #343434); white-space: nowrap; }

.crm-client-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.55rem;
}

.crm-client-footer-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.7rem;
    color: var(--tone-text-muted, #6b7280);
    min-width: 0;
    overflow: hidden;
}

.crm-client-footer-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Override SfButton e-outline e-primary for "Open" */
.crm-client-open.e-btn {
    padding: 0.3rem 0.72rem !important;
    border-radius: 8px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    color: #7c3aed !important;
    border-color: rgba(124,58,237,.3) !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}

.crm-client-open.e-btn:hover {
    background: rgba(124,58,237,.06) !important;
    border-color: #7c3aed !important;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .crm-masonry,
    .crm-client-masonry { column-count: 1; }
    .crm-hero { flex-direction: column; }
    .crm-summary-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
    .crm-summary-grid { grid-template-columns: repeat(2, 1fr); }
    .crm-work-queue   { grid-template-columns: 1fr; }
    .crm-panel-head,
    .crm-client-footer,
    .crm-mini-row     { flex-wrap: wrap; }
    .crm-client-badges { justify-content: flex-start; }
}

/* ── RTL ── */
[dir="rtl"] .crm-hero { flex-direction: row-reverse; }
[dir="rtl"] .crm-client-badges { justify-content: flex-start; }

/* ══════════════════════════════════════════════════════════
   Shared CRM Theme (all CRM routes)
   Ensures non-dashboard CRM pages inherit the same palette.
   ══════════════════════════════════════════════════════════ */
.crm-theme .page-content-surface {
    background: #f8f7ff !important;
}

.crm-theme h2,
.crm-theme h3,
.crm-theme h4 {
    color: #1a1a2e;
}

.crm-theme .text-muted,
.crm-theme .small.text-muted {
    color: #7a7a9a !important;
}

.crm-theme .card,
.crm-theme .e-card,
.crm-theme .border.rounded,
.crm-theme .border.rounded.p-3.bg-white {
    border-color: #e5e3f0 !important;
    border-radius: 1rem !important;
    box-shadow: 0 2px 12px rgba(26,0,80,.05);
}

.crm-theme .e-tab .e-tab-header {
    border-bottom-color: #e8e3fa !important;
}

.crm-theme .e-tab .e-toolbar-item.e-active .e-tab-wrap,
.crm-theme .e-tab .e-toolbar-item.e-active .e-text-wrap {
    color: #7c3aed !important;
}

.crm-theme .e-grid .e-gridheader,
.crm-theme .e-grid .e-headercontent {
    background: #f6f3ff !important;
    border-color: #e5e3f0 !important;
}

.crm-theme .e-grid .e-rowcell,
.crm-theme .e-grid .e-headercell {
    border-color: #efebfb !important;
}

.crm-theme .btn-primary,
.crm-theme .e-btn.e-primary {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #fff !important;
}

.crm-theme .btn-primary:hover,
.crm-theme .e-btn.e-primary:hover {
    background-color: #5b21b6 !important;
    border-color: #5b21b6 !important;
}

.crm-theme .btn-outline-primary,
.crm-theme .e-btn.e-outline.e-primary {
    color: #7c3aed !important;
    border-color: rgba(124,58,237,.35) !important;
    background: transparent !important;
}

.crm-theme .btn-outline-primary:hover,
.crm-theme .e-btn.e-outline.e-primary:hover {
    color: #5b21b6 !important;
    border-color: #7c3aed !important;
    background: rgba(124,58,237,.08) !important;
}

/* ══════════════════════════════════════════════════════════
   CRM Directory Pages
   Customers/vendors should feel like drill-down workspaces from /crm.
   ══════════════════════════════════════════════════════════ */
.crm-list-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.crm-toolbar-wrap {
    width: 100%;
}

.crm-directory-toolbar.e-toolbar,
.crm-directory-toolbar .e-toolbar-items {
    width: 100%;
    min-height: auto;
    border: 0 !important;
    border-radius: 0.85rem !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(26,0,80,.04);
}

.crm-directory-toolbar.e-toolbar {
    border: 1px solid #e5e3f0 !important;
    padding: 0.35rem 0.45rem !important;
}

.crm-directory-toolbar .e-toolbar-item {
    min-height: 2.15rem !important;
}

.crm-directory-toolbar .e-toolbar-item .e-tbar-btn,
.crm-directory-toolbar .e-toolbar-item .e-dropdown-btn,
.crm-directory-toolbar .e-toolbar-item .e-btn {
    border-radius: 8px !important;
    border-color: transparent !important;
    background: transparent !important;
    color: #5a5a7a !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    box-shadow: none !important;
}

.crm-directory-toolbar .e-toolbar-item .e-tbar-btn:hover,
.crm-directory-toolbar .e-toolbar-item .e-dropdown-btn:hover,
.crm-directory-toolbar .e-toolbar-item .e-btn:hover {
    background: #f5f0ff !important;
    color: #7c3aed !important;
}

.crm-directory-toolbar .e-toolbar-item .e-btn.e-primary,
.crm-directory-toolbar .e-toolbar-item.e-overlay .e-btn.e-primary {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #fff !important;
}

.crm-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.crm-search .e-input-group {
    border-color: #e5e3f0 !important;
    border-radius: 999px !important;
    background: #faf8ff !important;
    padding-left: 1.65rem;
}

.crm-search-icon {
    position: absolute;
    left: 0.72rem;
    z-index: 1;
    font-size: 0.72rem;
    color: #7a7a9a;
    pointer-events: none;
}

.crm-panel--directory {
    display: block;
    padding: 1rem;
}

.crm-panel--directory > .d-flex:first-child {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0eeff;
}

.crm-panel--directory h3 {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.crm-panel--directory .badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.crm-theme .e-grid {
    border: 0 !important;
    border-radius: 0.9rem;
    overflow: hidden;
}

.crm-theme .e-grid .e-row:hover .e-rowcell {
    background: #faf8ff !important;
}

@media (max-width: 760px) {
    .crm-directory-toolbar.e-toolbar {
        overflow-x: auto;
    }

    .crm-search .e-control-wrapper,
    .crm-search .e-input-group {
        width: min(72vw, 320px) !important;
    }
}