/*
 * Layout for the CRM's own Blade screens (AI Guide, Decision Inbox, deal simulator, AI Privacy
 * Log). Filament's stylesheet has only its own fi-* classes, so these screens use the crm-*
 * classes below, built on Filament's colour variables (light and dark).
 */
.crm-stack { display: grid; gap: 1rem; }
.crm-stack-sm { display: grid; gap: .5rem; }
.crm-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.crm-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.crm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crm-min-0 { min-width: 0; }
.crm-right { text-align: right; }

.crm-card { border: 1px solid var(--gray-200); border-radius: .75rem; padding: 1rem; background: var(--white, #fff); }
.dark .crm-card { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .02); }
.crm-card h4, .crm-h4 { font-weight: 600; font-size: .9375rem; margin-bottom: .35rem; }
.crm-title { font-weight: 600; font-size: 1rem; line-height: 1.4; }
.crm-amount { font-weight: 600; font-size: 1.125rem; }

.crm-text { font-size: .875rem; line-height: 1.6; }
.crm-text p + p { margin-top: .5rem; }
.crm-small { font-size: .8125rem; }
.crm-muted { color: var(--gray-500); font-size: .8125rem; }
.dark .crm-muted { color: var(--gray-400); }
.crm-strong { font-weight: 600; }
.crm-link { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.dark .crm-link { color: var(--primary-400); }

.crm-list { list-style: disc; padding-inline-start: 1.25rem; display: grid; gap: .25rem; font-size: .875rem; line-height: 1.55; }
.crm-steps { list-style: decimal; padding-inline-start: 1.25rem; display: grid; gap: .35rem; font-size: .875rem; line-height: 1.55; }

.crm-callout { border-radius: .75rem; padding: .75rem 1rem; font-size: .875rem; background: color-mix(in oklab, var(--primary-500) 10%, transparent); border: 1px solid color-mix(in oklab, var(--primary-500) 25%, transparent); }
.crm-callout-success { background: color-mix(in oklab, var(--success-500) 10%, transparent); border-color: color-mix(in oklab, var(--success-500) 25%, transparent); }

.crm-table-wrap { overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.crm-table th { text-align: left; font-weight: 500; color: var(--gray-500); padding: .4rem .6rem; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }
.crm-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.dark .crm-table th, .dark .crm-table td { border-color: rgba(255, 255, 255, .08); }
.crm-table .crm-num { text-align: right; white-space: nowrap; }
.crm-table tr.crm-best td { font-weight: 600; color: var(--success-700); }
.dark .crm-table tr.crm-best td { color: var(--success-400); }
.crm-table tr.crm-bad td { color: var(--danger-600); }

.crm-pre { font-size: .75rem; white-space: pre-wrap; word-break: break-word; max-height: 28rem; overflow: auto; border-radius: .5rem; padding: .75rem; background: var(--gray-50); }
.dark .crm-pre { background: rgba(255, 255, 255, .05); }

.crm-feature { display: grid; gap: .35rem; }
.crm-feature-where { font-size: .8125rem; color: var(--gray-500); }

@media print {
    .fi-sidebar, .fi-topbar, .fi-header-actions-ctn, .fi-header .fi-ac, .crm-no-print { display: none !important; }
    .fi-main { padding: 0 !important; }
    .crm-card { break-inside: avoid; }
}

/* Customer page (ViewCustomer): hero card, contact strip, KPI tiles. */
.crm-customer-hero { position: relative; border-radius: var(--crm-radius-card, 12px); padding: 1.25rem 1.25rem 1rem; display: grid; gap: 1rem; border: 1px solid var(--crm-border); background: var(--crm-surface); box-shadow: var(--crm-shadow-card, none); }
/* One quiet card language (DESIGN.md): no coloured stripes; the stage shows as a badge. */
.crm-customer-hero-top { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.crm-customer-avatar { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: grid; place-items: center; font-weight: 600; font-size: 1.25rem; letter-spacing: .02em; color: #fff; background: var(--primary-600); }
.crm-customer-ident { display: grid; gap: .35rem; min-width: 0; }
.crm-customer-name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--crm-text-strong); overflow-wrap: anywhere; }
.crm-customer-sub { font-size: var(--crm-text-meta, .8125rem); color: var(--crm-muted); }
.crm-customer-badges { display: flex; flex-wrap: wrap; gap: .375rem; }
.crm-customer-contact { display: flex; flex-wrap: wrap; gap: .5rem; }
.crm-customer-chip { display: inline-flex; align-items: center; gap: .375rem; max-width: 100%; padding: .3rem .7rem; border-radius: var(--crm-radius-control, 8px); font-size: .8125rem; color: var(--crm-text); background: var(--crm-surface-muted); border: 1px solid var(--crm-border); overflow-wrap: anywhere; transition: border-color .15s ease, color .15s ease; }
.crm-customer-chip-link:hover { border-color: var(--primary-400); color: var(--primary-700); }
.dark .crm-customer-chip-link:hover { color: var(--primary-300); }
.crm-customer-chip-wa { color: var(--success-700); }
.dark .crm-customer-chip-wa { color: var(--success-400); }
.crm-customer-ico { width: 1rem; height: 1rem; flex: none; }
.crm-customer-tiles { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.crm-customer-tile { display: grid; align-content: start; gap: .2rem; padding: .75rem .875rem; border-radius: var(--crm-radius-control, 8px); background: var(--crm-surface-muted); border: 1px solid var(--crm-border-subtle, var(--crm-border)); min-width: 0; }
.crm-customer-tile-label { display: flex; align-items: center; gap: .35rem; font-size: var(--crm-text-label, .78125rem); font-weight: 500; color: var(--crm-muted); }
.crm-customer-tile-value { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--crm-text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.crm-customer-tile-hint { font-size: .75rem; line-height: 1.4; color: var(--crm-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-customer-tile-value-sm { font-size: 1rem; line-height: 1.35; padding-block: .15rem; }
/* Colour only when it means something: amber = due/overdue, red = a block. */
.crm-customer-tone-warning .crm-customer-tile-value { color: var(--crm-warning-text); }
.crm-customer-tone-danger .crm-customer-tile-value { color: var(--crm-danger-text); }
@media (max-width: 640px) {
    .crm-customer-hero { padding: 1rem; }
    .crm-customer-avatar { width: 2.75rem; height: 2.75rem; font-size: 1rem; border-radius: .75rem; }
    .crm-customer-name { font-size: 1.125rem; }
    .crm-customer-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-customer-tile-value { font-size: 1.125rem; }
}