/* Screen theme shared by the classic and modern CRM workspaces. Layout and
   controls retain their dimensions in the existing screen-specific styles. */
body.crm-ui {
    --crm-ink: #152d38;
    --crm-muted: #4f6470;
    --crm-paper: #fff;
    --crm-ground: #f2f5f5;
    --crm-wash: #eaf2f1;
    --crm-line: #cedada;
    --crm-field: #809497;
    --crm-accent: #096a64;
    --crm-deep: #064e4b;
    --crm-tint: #dbf1ec;
    --crm-rail: #102d38;
    --crm-rail-ink: #edf7f5;
    --crm-rail-muted: #c3d6d8;
    --crm-edge: 0 0 0 1px #183a3b13;
    --crm-shadow: 0 2px 4px #15353706, 0 8px 24px -14px #15353738;
    --bs-body-color: var(--crm-ink);
    --bs-secondary-color: var(--crm-muted);
    --bs-tertiary-bg: var(--crm-ground);
    --bs-border-color: var(--crm-line);
    --bs-primary: var(--crm-accent);
    --bs-primary-rgb: 9, 106, 100;
    --bs-link-color-rgb: 9, 106, 100;
    --bs-link-hover-color-rgb: 6, 78, 75;
    --bs-focus-ring-color: #096a6440;
    --we-ink: var(--crm-ink);
    --we-muted: var(--crm-muted);
    --we-line: var(--crm-line);
    --we-paper: var(--crm-paper);
    --we-soft: var(--crm-wash);
    --we-blue: var(--crm-accent);
    --we-primary: var(--crm-accent);
    --ws-text: var(--crm-ink);
    --ws-muted: var(--crm-muted);
    color: var(--crm-ink);
    background: radial-gradient(ellipse 74rem 27rem at 96% 0, #deeeea 0%, transparent 72%) var(--crm-ground) !important;
    accent-color: var(--crm-accent);
}

.crm-ui .company-overview {
    --co-border: var(--crm-line);
    --co-muted: var(--crm-muted);
}
.crm-ui .estimate-modern {
    --ee-line: var(--crm-line);
    --ee-muted: var(--crm-muted);
}
.crm-ui .wcl-page {
    --wcl-line: var(--crm-line);
    --wcl-muted: var(--crm-muted);
    --wcl-ink: var(--crm-ink);
    --wcl-blue: var(--crm-accent);
}
.crm-ui.workspace-modern .catalog-editor-shell {
    --catalog-border: var(--crm-line);
    --catalog-muted: var(--crm-muted);
}

/* A dark rail on desktop becomes the existing drawer on narrow screens.
   Classic navigation keeps its horizontal rows and collapse control. */
.crm-ui .navbar.navbar-light,
.crm-ui.workspace-modern .workspace-navigation {
    background: linear-gradient(155deg, #183d46, var(--crm-rail) 48%, #102733) !important;
    color: var(--crm-rail-ink);
    border-color: #26454d !important;
    --bs-navbar-brand-color: var(--crm-rail-ink);
    --bs-navbar-brand-hover-color: white;
    --bs-navbar-toggler-border-color: #69838b;
}
.crm-ui .navbar .navbar-brand,
.crm-ui.workspace-modern .workspace-brand,
.crm-ui.workspace-modern .workspace-administration > summary {
    color: var(--crm-rail-ink);
}
.crm-ui .navbar .navbar-toggler-icon,
.crm-ui .workspace-navigation .btn-close {
    filter: brightness(0) invert(1);
}
.crm-ui :is(.navbar, .workspace-navigation) .nav-link {
    color: var(--crm-rail-muted);
}
.crm-ui :is(.navbar, .workspace-navigation) .nav-link:is(:hover, :focus-visible),
.crm-ui .workspace-administration > summary:hover {
    color: white;
    background-color: #254b53;
}
.crm-ui :is(.navbar, .workspace-navigation) .nav-link.active {
    background-color: #214e52 !important;
    color: #fff;
    box-shadow: inset 0 -2px #75dcc0;
}
.crm-ui.workspace-modern .workspace-navigation .nav-link.active {
    box-shadow: inset 3px 0 #75dcc0;
}

.crm-ui .workspace-navigation .offcanvas-header h2 {
    color: var(--crm-rail-ink);
}

.crm-ui .workspace-navigation .offcanvas-body > nav .nav-link {
    position: relative;
}
.crm-ui .workspace-navigation .offcanvas-body > nav .nav-link::after {
    content: "";
    position: absolute;
    inset: 50% .65rem auto auto;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: url('../icons/crm-navigation.svg') 0 var(--crm-icon-y, 16px) / 16px 160px no-repeat;
    pointer-events: none;
}
.workspace-navigation .nav-link[href='/checklists'] { --crm-icon-y: 0px; }
.workspace-navigation .nav-link[href='/calendar'] { --crm-icon-y: -16px; }
.workspace-navigation .nav-link[href='/owner-dashboard'] { --crm-icon-y: -32px; }
.workspace-navigation .nav-link[href='/fleet'] { --crm-icon-y: -48px; }
.workspace-navigation .nav-link[href='/company-overview'] { --crm-icon-y: -64px; }
.workspace-navigation .nav-link[href='/'] { --crm-icon-y: -80px; }
.workspace-navigation .nav-link[href='/leads'] { --crm-icon-y: -96px; }
.workspace-navigation .nav-link[href='/clients'] { --crm-icon-y: -112px; }
.workspace-navigation .nav-link[href='/estimates'] { --crm-icon-y: -128px; }
.workspace-navigation .nav-link[href='/documents'] { --crm-icon-y: -144px; }
.crm-ui :is(.workspace-administration, .navbar-user-panel, .offcanvas-header) {
    border-color: #3c5960;
}
.crm-ui .navbar-user-panel .text-muted {
    color: var(--crm-rail-muted) !important;
}
.crm-ui .navbar-user-panel .btn,
.crm-ui .navbar-user-panel .btn:visited {
    color: var(--crm-rail-ink);
    border-color: #708b91;
    background-color: transparent;
}
.crm-ui .navbar-user-panel .btn:is(:hover, :focus-visible) {
    color: white;
    background: #29515a;
    border-color: #a0bdbc;
}
.crm-ui.workspace-modern .workspace-header {
    background: linear-gradient(95deg, #fff 52%, #edf7f3);
    box-shadow: inset 0 -1px #173e3f0a;
}
.crm-ui.workspace-modern .workspace-organization {
    color: var(--crm-ink);
    font-weight: 650;
}

/* Same text metrics, with stronger separation between headings, field
   labels and descriptions. Financial columns keep aligned numerals. */
.crm-ui :is(h1, h2, h3),
.crm-ui .card-header:not([class*="bg-"]) {
    color: var(--crm-ink);
}
.crm-ui h1 {
    color: #102f39;
}
.crm-ui :is(.form-label, .dw-field-group legend) {
    color: #334d56;
}
.crm-ui :is(.workspace-eyebrow, .client-eyebrow, .co-eyebrow, .wcl-eyebrow) {
    color: var(--crm-accent);
}
.crm-ui :is(.mobile-kpi-card, .co-kpi, .ee-line-total, .ee-summary dd, .table .text-end) {
    font-variant-numeric: tabular-nums;
}

.crm-ui .card {
    --bs-card-border-color: var(--crm-line);
    --bs-card-cap-bg: #edf4f2;
    --bs-card-color: var(--crm-ink);
    box-shadow: var(--crm-shadow);
}
.crm-ui .card.border-0.shadow-sm {
    box-shadow: var(--crm-edge), var(--crm-shadow) !important;
}
.crm-ui :is(.work-surface, .client-section, .co-card, .co-kpi, .dw-card,
    .dw-list, .wcl-surface, .ee-section, .ee-surface, .catalog-editor-panel,
    .mobile-record-card, .photo-gallery-card) {
    box-shadow: var(--crm-shadow);
}
.crm-ui .mobile-kpi-card,
.crm-ui .company-overview .co-kpi,
.crm-ui article.card:has(> .card-body > strong.fs-3) {
    background: radial-gradient(ellipse 7rem 6rem at 100% 0, #d6eeea80, transparent),
        linear-gradient(110deg, #fff 40%, #f6faf9);
}
.crm-ui .mobile-kpi-card :is(.display-6, .fs-4),
.crm-ui .company-overview .co-kpi strong,
.crm-ui article.card:has(> .card-body > strong.fs-3) .fs-3 {
    color: var(--crm-deep);
}
.crm-ui .company-overview .co-kpi:hover {
    border-color: var(--crm-accent);
    background: var(--crm-tint);
}
.crm-ui .company-overview .co-needs-attention {
    border-top-color: #ae641f;
}

/* Use the Bootstrap state variables where possible. Modules that set button
   colours directly still get the same hover, pressed and disabled treatment. */
.crm-ui .btn-primary {
    --bs-btn-bg: var(--crm-accent);
    --bs-btn-border-color: var(--crm-accent);
    --bs-btn-hover-bg: var(--crm-deep);
    --bs-btn-hover-border-color: var(--crm-deep);
    --bs-btn-active-bg: #043f3e;
    --bs-btn-active-border-color: #043f3e;
    --bs-btn-disabled-bg: var(--crm-accent);
    --bs-btn-disabled-border-color: var(--crm-accent);
    --bs-btn-focus-shadow-rgb: 9, 106, 100;
}
.crm-ui :is(.btn-primary, .builder-button--primary) {
    color: white;
    background-color: var(--crm-accent);
    border-color: var(--crm-accent);
    box-shadow: inset 0 1px #ffffff25, 0 2px 4px #07453e1c;
}
.crm-ui :is(.btn-primary, .builder-button--primary):is(:hover, :focus-visible):not(:disabled, .disabled) {
    background-color: var(--crm-deep);
    border-color: var(--crm-deep);
    color: white;
}
.crm-ui .btn-primary:not(:disabled):active {
    background-color: #043f3e;
}
.crm-ui .btn-outline-primary {
    --bs-btn-color: var(--crm-deep);
    --bs-btn-border-color: #81a7a2;
    --bs-btn-hover-color: var(--crm-deep);
    --bs-btn-hover-bg: var(--crm-tint);
    --bs-btn-hover-border-color: var(--crm-accent);
    --bs-btn-active-bg: var(--crm-deep);
    --bs-btn-active-border-color: var(--crm-deep);
    --bs-btn-disabled-color: var(--crm-accent);
    --bs-btn-disabled-border-color: #81a7a2;
}
.crm-ui.workspace-modern :is(main, .container-fluid, dialog, .modal) .btn-outline-primary,
.crm-ui .wcl-page .btn-outline-secondary {
    color: var(--crm-deep);
    border-color: #81a7a2;
}
.crm-ui.workspace-modern :is(main, .container-fluid, dialog, .modal) .btn-outline-primary:is(:hover, :focus-visible),
.crm-ui .wcl-page .btn-outline-secondary:is(:hover, :focus-visible) {
    color: var(--crm-deep);
    background-color: var(--crm-tint);
    border-color: var(--crm-accent);
}
.crm-ui .btn-outline-secondary {
    --bs-btn-color: #40565e;
    --bs-btn-border-color: #98aaad;
    --bs-btn-hover-bg: #40565e;
    --bs-btn-hover-border-color: #40565e;
}
.crm-ui :is(.form-control, .form-select):where(:not(:disabled, [readonly], .is-invalid, .is-valid, .was-validated *)) {
    border-color: var(--crm-field);
}
.crm-ui :is(.form-control, .form-select):focus:where(:not(.is-invalid, .is-valid, .was-validated *)) {
    border-color: var(--crm-accent);
    box-shadow: 0 0 0 .2rem #0e756223;
}
.crm-ui .form-check-input:checked {
    background-color: var(--crm-accent);
    border-color: var(--crm-accent);
}
.crm-ui :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--crm-accent);
    outline-offset: 2px;
}
.crm-ui :is(.navbar, .workspace-navigation) :is(a, button, summary):focus-visible {
    outline-color: #8aead0;
}

.crm-ui .table:where(:not(.table-primary, .table-secondary, .table-success, .table-danger,
    .table-warning, .table-info, .table-light, .table-dark)) {
    --bs-table-color: var(--crm-ink);
    --bs-table-border-color: #dbe4e4;
    --bs-table-hover-bg: #edf6f3;
    --bs-table-striped-bg: #f4f8f7;
}
.crm-ui .table:where(:not(.table-dark)) > thead:where(:not(.table-dark)) > tr:where(:not(.table-dark)) > :is(th, td):where(:not([class*="table-"])),
.crm-ui .company-overview thead,
.crm-ui .ee-section > header {
    background-color: #e8f0ee;
    color: #304c52;
}
.crm-ui .work-tabs a.active,
.crm-ui .ee-tabs [aria-pressed=true],
.crm-ui .pv-workspace .ee-tabs > [aria-current=page],
.crm-ui .catalog-editor-tabs [aria-selected=true],
.crm-ui .wcl-catalog-tabs a[aria-current=page] {
    color: var(--crm-deep);
    border-bottom-color: var(--crm-accent);
}
.crm-ui .work-row.selected,
.crm-ui .settings-nav a:is(:hover, :focus-visible),
.crm-ui .company-overview .co-number:not(.co-late) {
    color: var(--crm-deep);
    background-color: var(--crm-tint);
}
.crm-ui .company-overview .co-period [aria-current] {
    background: var(--crm-deep);
    color: white;
}
.crm-ui .nav-pills {
    --bs-nav-pills-link-active-bg: var(--crm-accent);
}
.crm-ui .pagination {
    --bs-pagination-color: var(--crm-deep);
    --bs-pagination-hover-color: var(--crm-deep);
    --bs-pagination-active-bg: var(--crm-accent);
    --bs-pagination-active-border-color: var(--crm-accent);
}
.crm-ui .alert-info {
    --bs-alert-color: #234f5b;
    --bs-alert-bg: #e6f1f3;
    --bs-alert-border-color: #c6dcde;
    --bs-alert-link-color: #174850;
    box-shadow: inset 3px 0 #638f98;
}
.crm-ui .template-builder-app {
    background: var(--crm-ground);
}
.crm-ui .builder-panel {
    background: var(--crm-paper);
    box-shadow: var(--crm-edge), var(--crm-shadow);
}
.crm-ui :is(.modal-content, .dropdown-menu) {
    border-color: var(--crm-line);
    box-shadow: 0 12px 42px #102c352e;
}
.crm-ui .modal-header {
    background-color: #f1f6f4;
}
.crm-ui.crm-auth {
    background: radial-gradient(ellipse at 78% 0, #25615e 0%, transparent 55%),
        linear-gradient(145deg, #102934, #153943 70%, #17343c) !important;
}
.crm-auth .card.border-0.shadow-sm {
    background: linear-gradient(135deg, #e6f4ee, transparent 45%) #fff;
    box-shadow: inset 0 3px #74d3b9, 0 22px 64px #041b2440 !important;
}
.crm-auth h1 {
    color: var(--crm-deep);
}