/* CRM UI. Shared design tokens and components. Page styles own layout only. */
:root {
    --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --ui-bg: #f8f6fb;
    --ui-surface: #ffffff;
    --ui-subtle: #fbf9fd;
    --ui-text: #30213e;
    --ui-muted: #74677e;
    --ui-border: #e5dded;
    --ui-primary: #7438d5;
    --ui-primary-hover: #642bbd;
    --ui-primary-soft: #f0e9fc;
    --ui-primary-active: #5521a4;
    --ui-header: #260b35;
    --ui-header-text: #f4eafe;
    --ui-header-muted: #d5c4e2;
    --ui-header-active: #49245e;
    --ui-lane: #eee9f4;
    --ui-disabled: #f0ecf5;
    --ui-placeholder: #897c94;
    --ui-label: #61516f;
    --ui-success: #15803d;
    --ui-success-soft: #edf9f0;
    --ui-danger: #b91c1c;
    --ui-danger-soft: #fff1f2;
    --ui-warning: #92400e;
    --ui-warning-soft: #fffbeb;
    --ui-info: #0369a1;
    --ui-info-soft: #f0f9ff;
    --ui-radius: 8px;
    --ui-card-radius: 12px;
    --ui-control-height: 38px;
    --ui-shadow: 0 2px 8px rgb(48 33 62 / 4%);
    --ui-floating-shadow: 0 12px 40px rgb(48 33 62 / 14%);
    --ui-focus: 0 0 0 3px rgb(116 56 213 / 18%);
    --bs-primary: var(--ui-primary);
    --bs-primary-rgb: 116, 56, 213;
    --bs-body-font-family: var(--ui-font);
    --bs-body-color: var(--ui-text);
    --bs-body-bg: var(--ui-bg);
    --bs-border-color: var(--ui-border);
    --bs-border-radius: var(--ui-radius);
    --bs-link-color: var(--ui-primary);
    --bs-link-hover-color: var(--ui-primary-hover);
}
html:has(body.crm-ui) { font-size: 14px; overflow-x: clip; overflow-y: auto; }
body.crm-ui { margin: 0; width: 100%; overflow: visible; min-height: 100dvh; font: 400 14px/1.5 var(--ui-font); color: var(--ui-text); background: var(--ui-bg); }
.crm-ui *, .crm-ui *::before, .crm-ui *::after { box-sizing: border-box; }
.crm-ui :is(button, input, select, textarea) { font-family: var(--ui-font); }
.crm-ui :is(h1,h2,h3,h4,h5,h6) { color: var(--ui-text); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.crm-ui h1 { font-size: 1.75rem; margin-bottom: 1.5rem; }
.crm-ui h2 { font-size: 1.4rem; }
.crm-ui h3 { font-size: 1.2rem; }
.crm-ui .text-muted, .crm-ui .help-block, .crm-ui .hint-block, .crm-ui .form-text { color: var(--ui-muted) !important; }
.crm-ui :is(.help-block,.hint-block,.form-text) { font-size: .875rem; margin-top: 5px; }
.crm-ui a:not(.btn) { color: var(--ui-primary); text-underline-offset: 3px; }
.crm-ui .app-main { width: 100%; padding: 24px; }
.crm-ui > header { background: var(--ui-header) !important; color: var(--ui-header-text); border-bottom: 1px solid var(--ui-header); }
.crm-ui .navbar { background: var(--ui-header) !important; min-height: 64px; padding: 10px 20px; }
.crm-ui .navbar .navbar-brand:not(.btn) { display: inline-flex; align-items: center; gap: 10px; color: var(--ui-header-text); font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.crm-ui .navbar .nav-link { color: var(--ui-header-muted); font-size: .925rem; padding: 8px 10px; border-radius: var(--ui-radius); }
.crm-ui .navbar .nav-link:hover, .crm-ui .navbar .nav-link.active, .crm-ui .navbar .nav-link.show { color: var(--ui-header-text); background: var(--ui-header-active); }
.crm-ui .navbar-brand:hover, .crm-ui .navbar-brand:focus { color: var(--ui-header-text); }
.crm-ui .navbar-toggler { color: var(--ui-header-text); --bs-navbar-toggler-icon-bg: none; }
.crm-ui .navbar-toggler-icon { background-image: none; position: relative; width: 22px; height: 16px; border-block: 2px solid currentColor; }
.crm-ui .navbar-toggler-icon::after { content: ""; position: absolute; inset: 5px 0 auto; border-top: 2px solid currentColor; }
.crm-ui .navbar :is(.nav-link,.navbar-brand,.navbar-toggler):focus-visible { outline: 2px solid var(--ui-header-text); outline-offset: 3px; }
.crm-ui .navbar-toggler { border-color: var(--ui-border); padding: 6px 9px; box-shadow: none; }
.crm-ui .breadcrumb { font-size: .875rem; margin-bottom: 18px; }
/* Fields: native controls, Yii ActiveField, Bootstrap and Kartik widgets. */
body.crm-ui :is(.form-control,.form-select,.input-group-text) {
    min-height: var(--ui-control-height); padding: 8px 11px; font-size: 14px; line-height: 20px;
    color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
    background-color: var(--ui-surface); box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
body.crm-ui select:is(.form-control,.form-select) { padding-right: 30px; cursor: pointer; }
body.crm-ui textarea.form-control { min-height: 90px; resize: vertical; }
body.crm-ui .input-group-text { background: var(--ui-subtle); color: var(--ui-muted); }
body.crm-ui :is(.form-control,.form-select):focus { outline: 0; border-color: var(--ui-primary); box-shadow: var(--ui-focus); background-color: var(--ui-surface); }
body.crm-ui :is(.form-control,.form-select):disabled,
body.crm-ui .form-control[readonly] { background-color: var(--ui-disabled); color: var(--ui-muted); opacity: 1; cursor: default; }
body.crm-ui :is(.form-control,.form-select)::placeholder { color: var(--ui-placeholder); opacity: 1; }
.crm-ui :is(label,.form-label,.control-label) { color: var(--ui-label); font-size: 13px; font-weight: 500; line-height: 1.45; margin-bottom: 6px; }
.crm-ui .form-group { margin-bottom: 16px; }
.crm-ui .input-group { align-items: stretch; }
.crm-ui .input-group > .form-control { min-width: 0; }
.crm-ui .input-group > :not(:last-child):not(.dropdown-menu):not(.invalid-feedback):not(.valid-feedback) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.crm-ui .input-group > :not(:first-child):not(.dropdown-menu):not(.invalid-feedback):not(.valid-feedback) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.crm-ui :is(.has-error .form-control,.has-error .form-select,.form-control.is-invalid,.form-select.is-invalid) { border-color: var(--ui-danger); }
.crm-ui :is(.has-error .help-block,.invalid-feedback,.error-summary) { color: var(--ui-danger) !important; font-size: .875rem; }
.crm-ui .error-summary { padding: 14px 16px; background: var(--ui-danger-soft); border: 1px solid #fecdd3; border-radius: var(--ui-radius); margin-bottom: 16px; }
.crm-ui .error-summary p:last-child { margin-bottom: 0; }
.crm-ui .has-success .form-control { border-color: var(--ui-success); }
/* Preserve native input semantics and Bootstrap check/switch background glyphs. */
.crm-ui input:is([type="checkbox"],[type="radio"]) { accent-color: var(--ui-primary); width: 17px; height: 17px; vertical-align: middle; flex-shrink: 0; cursor: pointer; }
.crm-ui .form-switch .form-check-input { width: 34px; height: 19px; }
.crm-ui .form-check-input { border-color: #b5a7c2; }
.crm-ui .form-check-input:checked { background-color: var(--ui-primary); border-color: var(--ui-primary); }
.crm-ui .form-check-input:focus { border-color: var(--ui-primary); box-shadow: var(--ui-focus); }
.crm-ui input:is([type="checkbox"],[type="radio"]):disabled { cursor: default; opacity: .55; }
.crm-ui :is(.checkbox label,.radio label,.form-check-label) { font-size: 14px; font-weight: 400; color: var(--ui-text); cursor: pointer; }
.crm-ui :is(.checkbox,.radio) { margin: 8px 0 16px; }
.crm-ui :is(.checkbox,.radio) input { margin-right: 5px; }
/* Select2 single/multiple/dropdown/search share the native field metrics. */
body.crm-ui .select2-container .select2-selection {
    min-height: var(--ui-control-height); height: auto; padding: 0; border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: none;
    font: 400 14px/20px var(--ui-font); color: var(--ui-text);
}
body.crm-ui .select2-container .select2-selection--single .select2-selection__rendered { line-height: 20px; padding: 8px 30px 8px 11px; color: var(--ui-text); }
body.crm-ui .select2-container .select2-selection__arrow { height: 36px; top: 0; right: 7px; }
body.crm-ui .select2-container .select2-selection__placeholder { color: var(--ui-placeholder); }
body.crm-ui .select2-container.select2-container--disabled .select2-selection { background: var(--ui-disabled); cursor: default; }
body.crm-ui .select2-container--disabled .select2-selection__rendered { color: var(--ui-muted); }
body.crm-ui :is(.select2-container--focus,.select2-container--open) .select2-selection { border-color: var(--ui-primary); box-shadow: var(--ui-focus); }
body.crm-ui .select2-dropdown { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-floating-shadow); font: 400 14px/1.5 var(--ui-font); color: var(--ui-text); }
body.crm-ui .select2-container .select2-search__field { border: 1px solid var(--ui-border); border-radius: 6px; outline-color: var(--ui-primary); font: inherit; color: var(--ui-text); }
body.crm-ui .select2-container .select2-search--inline .select2-search__field { border: 0; background: transparent; margin: 7px 0; }
body.crm-ui .select2-results__option { padding: 9px 12px; }
body.crm-ui .select2-results__option--highlighted[aria-selected] { color: var(--ui-primary); background: var(--ui-primary-soft); }
body.crm-ui .select2-selection--multiple .select2-selection__choice { border: 0; border-radius: 5px; padding: 3px 7px; background: var(--ui-primary-soft); color: var(--ui-primary); }
/* Actions. Semantic colors remain meaningful, geometry stays consistent. */
body.crm-ui .btn {
    --bs-btn-font-size: 14px; --bs-btn-font-weight: 500; --bs-btn-line-height: 20px;
    --bs-btn-border-radius: var(--ui-radius); --bs-btn-padding-x: 13px; --bs-btn-padding-y: 8px;
    font-family: var(--ui-font); font-size: 14px; font-weight: 500; line-height: 20px;
    min-height: var(--ui-control-height); border-radius: var(--ui-radius); box-shadow: none;
    white-space: normal; text-decoration: none;
}
.crm-ui .btn-primary, .crm-ui .auth-submit {
    --bs-btn-bg: var(--ui-primary); --bs-btn-border-color: var(--ui-primary); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ui-primary-hover); --bs-btn-hover-border-color: var(--ui-primary-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ui-primary-active); --bs-btn-active-border-color: var(--ui-primary-active);
    --bs-btn-disabled-bg: var(--ui-primary); --bs-btn-disabled-border-color: var(--ui-primary);
}
.crm-ui .btn-success { --bs-btn-bg: var(--ui-success); --bs-btn-border-color: var(--ui-success); --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; }
.crm-ui .btn-danger { --bs-btn-bg: var(--ui-danger); --bs-btn-border-color: var(--ui-danger); --bs-btn-hover-bg: #991b1b; --bs-btn-hover-border-color: #991b1b; }
.crm-ui .btn-warning { --bs-btn-bg: #fef3c7; --bs-btn-color: var(--ui-warning); --bs-btn-border-color: #fcd34d; --bs-btn-hover-bg: #fde68a; --bs-btn-hover-border-color: #fbbf24; }
.crm-ui .btn-info { --bs-btn-bg: var(--ui-info); --bs-btn-color: #fff; --bs-btn-border-color: var(--ui-info); --bs-btn-hover-bg: #075985; --bs-btn-hover-color: #fff; }
.crm-ui .btn-secondary { --bs-btn-bg: #74677e; --bs-btn-border-color: #74677e; --bs-btn-hover-bg: #5e506a; --bs-btn-hover-border-color: #5e506a; }
.crm-ui :is(.btn-default,.btn-light,.btn-outline-secondary) { color: var(--ui-label); background: var(--ui-surface); border-color: var(--ui-border); }
.crm-ui :is(.btn-default,.btn-light,.btn-outline-secondary):hover { color: var(--ui-text); background: var(--ui-lane); border-color: #c6b7d5; }
.crm-ui .btn-outline-primary { --bs-btn-color: var(--ui-primary); --bs-btn-border-color: var(--ui-primary); --bs-btn-hover-bg: var(--ui-primary); --bs-btn-hover-border-color: var(--ui-primary); --bs-btn-disabled-color: var(--ui-primary); --bs-btn-disabled-border-color: var(--ui-primary); --bs-btn-disabled-bg: transparent; }
.crm-ui .btn-link { min-height: auto; padding: 4px; color: var(--ui-primary); }
.crm-ui .btn:focus-visible, .crm-ui a:focus-visible, .crm-ui button:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 3px; box-shadow: var(--ui-focus); }
.crm-ui :is(.btn:disabled,.btn.disabled) { opacity: .5; }
/* Surfaces and collections. */
body.crm-ui :is(.card,.panel,.ui-surface) { background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border); border-radius: var(--ui-card-radius); box-shadow: var(--ui-shadow); }
.crm-ui :is(.card-header,.panel-heading) { padding: 14px 18px; background: var(--ui-subtle); border-bottom: 1px solid var(--ui-border); font-size: 14px; font-weight: 600; }
.crm-ui .card-header.bg-light { background: var(--ui-subtle) !important; }
.crm-ui :is(.card-body,.panel-body) { padding: 20px; }
.crm-ui .card-footer { padding: 14px 18px; background: var(--ui-subtle); border-top-color: var(--ui-border); }
body.crm-ui .table { --bs-table-bg: var(--ui-surface); --bs-table-color: var(--ui-text); --bs-table-border-color: var(--ui-border); --bs-table-striped-bg: #fbf9fd; --bs-table-striped-color: var(--ui-text); --bs-table-hover-bg: var(--ui-primary-soft); color: var(--ui-text); font-size: 14px; }
.crm-ui .table > :not(caption) > * > * { padding: 11px 13px; border-color: var(--ui-border); vertical-align: middle; }
.crm-ui .table > thead > tr > th { color: var(--ui-label); background: var(--ui-subtle); font-size: 12px; font-weight: 600; letter-spacing: .015em; }
.crm-ui .table .filters :is(.form-control,.form-select) { min-width: 70px; }
.crm-ui .grid-view { width: 100%; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-card-radius); background: var(--ui-surface); }
.crm-ui .grid-view .table { margin-bottom: 0; }
.crm-ui .grid-view .summary { padding: 12px 16px; color: var(--ui-muted); }
.crm-ui .grid-view .pagination { padding: 14px; margin: 0; }
.crm-ui .pagination { gap: 4px; }
.crm-ui .pagination > li > :is(a,span), .crm-ui .page-link { display: block; min-width: 34px; padding: 7px 11px; border: 1px solid var(--ui-border); border-radius: 6px; color: var(--ui-muted); text-decoration: none; background: var(--ui-surface); }
.crm-ui .pagination > .active > :is(a,span), .crm-ui .active > .page-link { color: #fff; background: var(--ui-primary); border-color: var(--ui-primary); }
.crm-ui .pagination > .disabled > :is(a,span) { color: var(--ui-placeholder); background: var(--ui-subtle); pointer-events: none; }
.crm-ui .nav-tabs { border-bottom-color: var(--ui-border); gap: 4px; }
.crm-ui .nav-tabs .nav-link, .crm-ui .nav-pills .nav-link { color: var(--ui-muted); font-weight: 500; padding: 10px 14px; border-radius: var(--ui-radius); }
.crm-ui .nav-tabs .nav-link.active { color: var(--ui-primary); background: var(--ui-surface); border-color: var(--ui-border) var(--ui-border) var(--ui-surface); border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
.crm-ui .nav-pills .nav-link.active { color: var(--ui-primary); background: var(--ui-primary-soft); }
.crm-ui .dropdown-menu { border-color: var(--ui-border); border-radius: var(--ui-radius); padding: 6px; box-shadow: var(--ui-floating-shadow); font-size: 14px; }
.crm-ui .dropdown-item { padding: 8px 12px; border-radius: 5px; color: var(--ui-text); }
.crm-ui .dropdown-item:hover, .crm-ui .dropdown-item:focus, .crm-ui .dropdown-item.active { color: var(--ui-primary); background: var(--ui-primary-soft); }
.crm-ui .list-group-item { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); padding: 12px 16px; }
.crm-ui .list-group-item.active { background: var(--ui-primary-soft); color: var(--ui-primary); border-color: var(--ui-border); }
/* Modal, native dialog, feedback and datepicker. */
body.crm-ui .modal-content, body.crm-ui dialog:not(.file-preview-dialog) { color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-floating-shadow); }
.crm-ui .modal-header { padding: 18px 22px; border-bottom-color: var(--ui-border); }
.crm-ui .modal-title { font-size: 18px; font-weight: 600; }
.crm-ui .modal-body { padding: 22px; }
.crm-ui .modal-footer { padding: 14px 22px; border-top-color: var(--ui-border); background: var(--ui-subtle); border-radius: 0 0 14px 14px; gap: 8px; }
.crm-ui .modal-backdrop { --bs-backdrop-bg: #260b35; --bs-backdrop-opacity: .4; }
.crm-ui dialog::backdrop { background: rgb(38 11 53 / 40%); }
body.crm-ui .alert { padding: 14px 16px; border-width: 1px; border-style: solid; border-radius: var(--ui-radius); font-size: 14px; line-height: 1.5; }
body.crm-ui .alert-dismissible { padding-right: 48px; }
.crm-ui .alert-success { color: var(--ui-success); background: var(--ui-success-soft); border-color: #bce5c8; }
.crm-ui .alert-danger { color: var(--ui-danger); background: var(--ui-danger-soft); border-color: #fecdd3; }
.crm-ui .alert-warning { color: var(--ui-warning); background: var(--ui-warning-soft); border-color: #f4df9b; }
.crm-ui .alert-info { color: var(--ui-info); background: var(--ui-info-soft); border-color: #bae6fd; }
.crm-ui .alert-secondary { color: var(--ui-muted); background: var(--ui-subtle); border-color: var(--ui-border); }
.crm-ui .toast { font: 400 14px/1.5 var(--ui-font); background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-floating-shadow); }
.crm-ui .toast-header { background: var(--ui-subtle); color: var(--ui-text); border-bottom-color: var(--ui-border); }
.crm-ui .badge { font-family: var(--ui-font); font-size: .8rem; font-weight: 500; padding: 5px 8px; border-radius: 5px; }
.crm-ui .datepicker-dropdown, .crm-ui .datetimepicker { padding: 10px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-floating-shadow); color: var(--ui-text); background: var(--ui-surface); font-family: var(--ui-font); }
.crm-ui .datepicker table tr td.active, .crm-ui .datepicker table tr td.active:hover { background: var(--ui-primary); color: #fff; }
/* Existing domain surfaces adopt tokens without altering workflow or layout. */
body.crm-ui .report-details-panel { padding: 20px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-card-radius); }
.crm-ui .report-form > .row { --bs-gutter-x: 20px; }
.crm-ui .report-form .stream { padding-left: 20px; }
.crm-ui .report-search-panel { padding: 18px; }
.crm-ui .reporting-total { color: var(--ui-primary); font-weight: 600; }
.crm-ui .report-title { color: var(--ui-primary); }
.crm-ui :is(.saved,.app-access-allow,.user-status-active) { color: var(--ui-success); }
.crm-ui :is(.not-saved,.app-access-deny,.user-status-delete) { color: var(--ui-danger); }
.crm-ui .stream i { color: inherit; margin-right: 0; }
.crm-ui .task-item { background: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius); overflow: hidden; }
.crm-ui .task-item-header { --task-header-accent:var(--ui-primary); background:color-mix(in srgb, var(--task-header-accent) 16%, var(--ui-surface)); color:var(--ui-text); padding:10px 12px; font-size:13px; font-weight:600; border-bottom:1px solid color-mix(in srgb, var(--task-header-accent) 35%, var(--ui-border)); box-shadow:inset 3px 0 var(--task-header-accent); }
.crm-ui .task-item-header.task-attention { --task-header-accent:var(--ui-danger); color:var(--ui-danger); }
.crm-ui .task-item-header.task-done { --task-header-accent:var(--ui-success); color:var(--ui-success); }
.crm-ui .task-description .message-transcription-text { font: inherit; color: inherit; }
.crm-ui .task-item-bottom { color: var(--ui-muted); font-size: 12px; border-color: var(--ui-border); }
.crm-ui .kanban-column { background: var(--ui-lane); border: 1px solid var(--ui-border); border-radius: var(--ui-card-radius); box-shadow: none; }
.crm-ui .kanban-card { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0; box-shadow: var(--ui-shadow); font-size: 13px; }
.crm-ui .kanban-title { color: var(--ui-label); font-size: 13px; font-weight: 600; padding: 0 10px; }
/* Search fields have no labels; empty Yii feedback must not shift the button. */
.crm-ui .search-inline-form .form-group { margin-bottom: 0; }
.crm-ui .search-inline-form .help-block:empty { display: none; }
.crm-ui .board-button { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); min-height: var(--ui-control-height); padding: 8px 13px; font: 500 14px/20px var(--ui-font); }
.crm-ui .new-report-button { color: #fff; background: var(--ui-primary); border-color: var(--ui-primary); }
.crm-ui .new-report-button:hover { background: var(--ui-primary-hover); }
.crm-ui .show-column-button { color: var(--ui-text); background: var(--ui-surface); }
.crm-ui .messages-inbox { border-color: var(--ui-border); border-radius: var(--ui-card-radius); box-shadow: var(--ui-shadow); }
.crm-ui .messages-sidebar { background: var(--ui-subtle); border-color: var(--ui-border); }
.crm-ui .messages-chat { color: var(--ui-text); border-radius: var(--ui-radius); }
.crm-ui .messages-chat:hover, .crm-ui .messages-chat[aria-current="true"] { background: var(--ui-primary-soft); color: var(--ui-primary); }
.crm-ui .messages-timeline { background: var(--ui-bg); }
.crm-ui .messages-bubble { font-family: var(--ui-font); background: var(--ui-surface); color: var(--ui-text); }
.crm-ui .messages-bubble.outgoing { background: var(--ui-primary-soft); }
.crm-ui .messages-unread { background: var(--ui-primary); }
.crm-ui .messages-compose-row textarea { background: var(--ui-subtle); border: 1px solid var(--ui-border); }
.crm-ui .auth-card { background: var(--ui-surface); border-color: var(--ui-border); border-radius: 14px; box-shadow: var(--ui-floating-shadow); }
.crm-ui .auth-heading h1 { color: var(--ui-text); }
.crm-ui :is(.auth-eyebrow,.auth-heading p span,.auth-security-note .fa) { color: var(--ui-primary); }
.crm-ui .auth-submit { background: var(--ui-primary); color: #fff; box-shadow: none; border-radius: var(--ui-radius); font: 500 14px/20px var(--ui-font); }
.crm-ui .auth-submit:hover { background: var(--ui-primary-hover); box-shadow: none; }
.crm-ui .ui-kit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.crm-ui .ui-kit-wide { grid-column: 1 / -1; }
.crm-ui .ui-kit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 767.98px) {
    .crm-ui .app-main { padding: 16px 10px; }
    .crm-ui .navbar { padding: 10px; }
    .crm-ui h1 { font-size: 1.5rem; }
    body.crm-ui :is(.form-control,.form-select), body.crm-ui .select2-container .select2-selection { font-size: 16px; min-height: 42px; }
    body.crm-ui .select2-container .select2-selection--single .select2-selection__rendered { padding-top: 10px; padding-bottom: 10px; }
    body.crm-ui .select2-container .select2-selection__arrow { height: 40px; }
    body.crm-ui .btn { min-height: 42px; }
    .crm-ui :is(.card-body,.panel-body) { padding: 14px; }
    .crm-ui .modal-dialog { margin: 10px; }
    .crm-ui :is(.modal-header,.modal-body,.modal-footer) { padding: 16px; }
    .crm-ui .app-main:has(.report-form) { padding-left: 0; padding-right: 0; }
    .crm-ui .report-form > .row { margin-left: 0; margin-right: 0; }
    body.crm-ui .report-details-panel { padding: 10px; border-left: 0; border-right: 0; border-radius: 0; }
    .crm-ui .report-details-panel .row { --bs-gutter-x: 12px; }
    .crm-ui .report-form .stream { padding: 16px 10px; height: auto !important; overflow: visible !important; }
    .crm-ui .ui-kit-grid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .crm-ui *, .crm-ui *::before, .crm-ui *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Miniapp adapter: the same tokens, with its existing phone-first grid and auth. */
body.crm-miniapp {
    --bg: var(--ui-bg); --bg-2: var(--ui-subtle); --card: var(--ui-surface);
    --card-2: var(--ui-surface); --text: var(--ui-text); --muted: var(--ui-muted);
    --accent: var(--ui-primary); --accent-2: var(--ui-warning); --border: var(--ui-border);
    background: var(--ui-bg); color: var(--ui-text);
}
.crm-miniapp .app { padding: 18px 10px 28px; }
.crm-miniapp :is(.app-name,.user-name,.title,.file-group-title,.detail-value,.report-number) { color: var(--ui-text); }
.crm-miniapp :is(.user-role,.card p,.files-empty,.file-size,.client-label,.detail-label) { color: var(--ui-muted); }
.crm-miniapp .header-main { border-color: var(--ui-border); }
.crm-miniapp .header-user { background: var(--ui-surface); border-color: var(--ui-border); }
.crm-miniapp :is(.back,.list-item,.file-item,.field-link,.combo-toggle,.combo-list,.upload-type-modal__dialog) { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); border-radius: var(--ui-radius); }
.crm-miniapp .card { padding: 18px; animation: none; }
body.crm-miniapp :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),textarea,select,.field-control) {
    font: 400 16px/22px var(--ui-font); min-height: 42px; padding: 9px 11px;
    color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
}
body.crm-miniapp :is(input,select,textarea):focus { outline: 0; border-color: var(--ui-primary); box-shadow: var(--ui-focus); }
body.crm-miniapp :is(input,select,textarea):disabled { color: var(--ui-muted); background: var(--ui-disabled); }
body.crm-miniapp .field-control.is-invalid { border-color: var(--ui-danger); }
.crm-miniapp .checkbox-inline { color: var(--ui-text); }
.crm-miniapp .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 13px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); }
.crm-miniapp .btn-primary { color: #fff; background: var(--ui-primary); border-color: var(--ui-primary); }
.crm-miniapp .btn-primary:hover { background: var(--ui-primary-hover); }
.crm-miniapp .btn-accent { color: var(--ui-primary); background: var(--ui-primary-soft); border-color: #dac9f0; }
.crm-miniapp :is(.combo-item,.file-item,.call-link) { color: var(--ui-text); }
.crm-miniapp .combo-item:hover { background: var(--ui-primary-soft); }
.crm-miniapp .combo-list { box-shadow: var(--ui-floating-shadow); }
.crm-miniapp .payment-action-btn--tbank { color: var(--ui-warning); background: var(--ui-warning-soft); border-color: #f4df9b; }
.crm-miniapp .payment-action-btn--sber { color: var(--ui-success); background: var(--ui-success-soft); border-color: #bce5c8; }
/* Bootstrap locks the document while a modal is open. */
html:has(body.crm-ui.modal-open), body.crm-ui.modal-open { overflow: hidden; }
body.crm-ui .select2-hidden-accessible { min-height: 0 !important; }
.crm-ui .modal-dialog { max-width: 640px; }
.crm-ui .modal-dialog.modal-lg { max-width: 900px; }
.crm-ui .modal-dialog.modal-xl { max-width: 1200px; }
.crm-miniapp :is(.action-card,.action-card h3,.client-value,.report-card) { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border); }
.crm-miniapp :is(.report-cost,.auth-required p) { color: var(--ui-muted); }
.crm-miniapp .report-status { color: var(--ui-primary); }
.crm-miniapp .status-btn { min-height: 42px; padding: 9px 13px; font: 500 14px/20px var(--ui-font); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: var(--ui-text); }
.crm-miniapp .status-btn.active { color: var(--ui-primary); background: var(--ui-primary-soft); border-color: #dac9f0; }
@media (max-width: 767.98px) {
    .crm-ui .controls-left { flex-wrap: wrap; }
    .crm-ui .controls-right { min-width: 0; width: 100%; }
    .crm-ui #search-form .form-group { min-width: 0; width: 100%; }
    .crm-ui .search-inline-form { width: 100%; }
}
/* Mobile messenger: keep the workspace inside the viewport and pad its content. */
@media (max-width: 767.98px) {
    .crm-ui .app-main:has(#messages-inbox) { padding-inline: 0; }
    .crm-ui .messages-inbox { margin-inline: 0; width: 100%; }
    .crm-ui :is(.messages-sidebar,.messages-heading,.messages-timeline,.messages-compose) {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
}
/* The messenger composer starts as one line; input autosizing still grows it. */
body.crm-ui #messages-text { height: 46px; min-height: 46px; max-height: 140px; resize: none; }
body.crm-ui #messages-text:placeholder-shown { height: 46px !important; }
/* Composer actions align with the 46px input instead of generic button metrics. */
body.crm-ui #messages-send { height:46px; min-height:46px; align-items:center; justify-content:center; gap:8px; white-space:nowrap; flex-shrink:0; }
@media (min-width:768px) { body.crm-ui #messages-send { display:inline-flex; } }
/* Chat list filters live behind the vertical ellipsis next to search. */
.crm-ui .messages-sidebar { position: relative; }
.crm-ui .messages-search-toolbar { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.crm-ui .messages-search-toolbar .form-control { flex: 1; min-width: 0; }
body.crm-ui .messages-list-menu-toggle { display: grid; place-items: center; flex: 0 0 42px; padding: 0; }
.crm-ui .messages-list-menu { position: absolute; top: 64px; right: 10px; left: 10px; z-index: 10; padding: 16px; border: 1px solid var(--ui-border); border-radius: var(--ui-card-radius); background: var(--ui-surface); box-shadow: var(--ui-floating-shadow); max-height: calc(100% - 76px); overflow: auto; }
.crm-ui .messages-list-unread { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; }
@media(max-width:767.98px) { .crm-ui .messages-list-menu { top: 64px; left: 16px; right: 16px; } }
/* One dropdown surface for default and Kartik Select2 themes on every layout. */
body.crm-ui .select2-container { max-width: 100%; font-family: var(--ui-font); }
body.crm-ui .crm-select { min-width: 0; vertical-align: middle; }
body.crm-ui .crm-select-auto { width: auto !important; min-width: 150px; }
body.crm-ui .select2-container .select2-dropdown { border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); box-shadow: var(--ui-floating-shadow); overflow: hidden; }
body.crm-ui .select2-container .select2-results > .select2-results__options { padding: 5px; max-height: min(260px, 45dvh); }
body.crm-ui .select2-container .select2-results__option { border-radius: 6px; padding: 9px 12px; font: 400 14px/1.45 var(--ui-font); color: var(--ui-text); background: var(--ui-surface); overflow-wrap: anywhere; }
body.crm-ui .select2-container .select2-results__option[aria-selected="true"] { color: var(--ui-primary); background: var(--ui-primary-soft); font-weight: 500; }
body.crm-ui .select2-container .select2-results__option--highlighted[aria-selected] { color: var(--ui-primary); background: #e8dcfa; }
body.crm-ui .select2-container .select2-results__option[aria-disabled="true"] { color: var(--ui-placeholder); }
body.crm-ui .select2-search--dropdown { padding: 8px; }
body.crm-ui .select2-search--dropdown .select2-search__field { min-height: 36px; padding: 7px 10px; border: 1px solid var(--ui-border); border-radius: 6px; }
body.crm-ui .select2-search--dropdown.select2-search--hide { display: none; }
body.crm-ui .select2-container .select2-selection--single { background-image: none; }
body.crm-ui .select2-container .select2-selection--single .select2-selection__arrow { width: 20px; display: grid; place-items: center; }
body.crm-ui .select2-selection--single .select2-selection__arrow b { position: static; width: 7px; height: 7px; margin: -3px 0 0; border: 0; border-right: 1.5px solid var(--ui-muted); border-bottom: 1.5px solid var(--ui-muted); transform: rotate(45deg); }
body.crm-ui .select2-container--open .select2-selection--single .select2-selection__arrow b { margin-top: 3px; transform: rotate(225deg); }
body.crm-ui .messages-list-menu > .select2-container { margin-bottom: 16px; }
@media(max-width:767.98px) { body.crm-ui .select2-search--dropdown .select2-search__field { font-size: 16px; } }
body.crm-ui .has-error .select2-container .select2-selection,
body.crm-ui .select2-selection[aria-invalid="true"] { border-color: var(--ui-danger); }
body.crm-ui .select2-container .select2-selection__arrow b { display: none; }
body.crm-ui .select2-container .select2-selection__arrow::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--ui-muted); border-bottom: 1.5px solid var(--ui-muted); transform: translateY(-2px) rotate(45deg); }
body.crm-ui .select2-container--open .select2-selection__arrow::after { transform: translateY(2px) rotate(225deg); }
body.crm-ui .select2-container .select2-selection--single { position: relative; }
body.crm-ui .select2-container .select2-selection--single .select2-selection__arrow { position: absolute; top: 0; right: 7px; }
/* Existing purpose-built pickers and action menus share the same dropdown surface. */
body.crm-ui :is(.messages-material-picker-menu,.messages-channel-menu,.dropdown-menu) { border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); box-shadow: var(--ui-floating-shadow); padding: 5px; }
body.crm-ui :is(.messages-material-picker-menu,.messages-channel-menu) { max-height: min(260px, 45dvh); }
body.crm-ui :is(.messages-material-picker-menu,.messages-channel-menu) button,
body.crm-ui .dropdown-item { border-radius: 6px; padding: 9px 12px; font: 400 14px/1.45 var(--ui-font); color: var(--ui-text); background: var(--ui-surface); }
body.crm-ui :is(.messages-material-picker-menu,.messages-channel-menu) button:is(:hover,:focus-visible,.is-selected,[aria-pressed="true"]),
body.crm-ui .dropdown-item:is(:hover,:focus,.active) { background: var(--ui-primary-soft); color: var(--ui-primary); }
body.crm-ui .messages-material-picker-toggle { min-height: var(--ui-control-height); padding: 8px 11px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); font: 400 14px/20px var(--ui-font); color: var(--ui-text); background: var(--ui-surface); }
@media(max-width:767.98px) { body.crm-ui .messages-material-picker-toggle { min-height: 42px; font-size: 16px; } }
/* Keep the shared header centred identically on short and scrollable pages. */
@media (min-width: 768px) {
    html:has(body.crm-ui) { scrollbar-gutter: stable; }
    @supports (scrollbar-gutter: stable) {
        /* The root already reserves the gutter; Bootstrap must not reserve it twice. */
        body.crm-ui.modal-open { padding-right: 0 !important; }
    }
}
/* Board toolbar stacks independently of the horizontally scrolling kanban. */
@media (max-width: 767.98px) {
    .crm-ui .board-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; padding: 0; }
    .crm-ui .board-controls .controls-left { display: flex; gap: 8px; flex-wrap: nowrap; min-width: 0; }
    .crm-ui .board-controls .controls-left .btn { flex: 1 1 auto; min-width: 0; padding-inline: 10px; }
    .crm-ui .board-controls .controls-right { display: block; width: 100%; min-width: 0; }
    .crm-ui .board-controls #search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; min-width: 0; }
    .crm-ui .board-controls #search-form .form-group { display: block; width: 100%; min-width: 0; margin: 0; }
    .crm-ui .board-controls #search-form .field-reportsearch-type { grid-column: 1 / -1; }
    .crm-ui .board-controls #search-form :is(.form-control,.select2-container) { min-width: 0; width: 100% !important; }
}

.crm-ui .kanban-card-title a,
.crm-ui .kanban-card-title a:is(:hover,:focus,:visited),
.crm-ui .kanban-card-title .report-title { color: var(--ui-text); text-decoration: none; }

/* Application mark beside the company name. */
.crm-ui .app-brand-icon { display: block; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; object-fit: contain; }

/* Seat limit uses shared field styling; only its row layout is local. */
.crm-ui .seat-limit-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crm-ui .seat-limit-form .form-control { width: 154px; max-width: 100%; }

/* Account navigation keeps the same menu surface as other CRM dropdowns. */
.crm-ui .navbar-nav { align-items: center; }
.crm-ui .navbar .account-menu-toggle { display: inline-flex; align-items: center; gap: 6px; }
.crm-ui .account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--ui-primary-soft); color: var(--ui-primary); font-size: 12px; font-weight: 600; }
@media (max-width: 991.98px) {
    .crm-ui .navbar-nav { align-items: stretch; }
    .crm-ui .account-menu .dropdown-menu { min-width: 0; }
}

/* Dropdown group labels share the item typography. */
body.crm-ui .dropdown-header { margin: 0; padding: 9px 12px; font: 400 14px/1.45 var(--ui-font); letter-spacing: normal; color: var(--ui-text); }

/* Mobile header keeps direct navigation beside the account menu. */
.crm-ui .app-nav-icon { display: none; }
@media (max-width: 991.98px) {
    .crm-ui .app-navbar > .container { flex-wrap: nowrap; gap: 4px; }
    .crm-ui .app-navbar .navbar-toggler { display: none; }
    .crm-ui .app-navbar .navbar-collapse { display: flex !important; flex-basis: auto; flex-grow: 0; margin-left: auto; }
    .crm-ui .app-navbar .navbar-nav { flex-direction: row; align-items: center; margin-bottom: 0 !important; gap: 0; }
    .crm-ui .app-navbar .navbar-brand { min-width: 0; margin-right: 0; gap: 6px; }
    .crm-ui .app-navbar .navbar-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .crm-ui .app-navbar .nav-link { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 44px; padding: 6px; }
    .crm-ui .app-navbar .app-nav-label { display: none; }
    .crm-ui .app-navbar .app-nav-icon { display: inline-block; font-size: 19px; }
    .crm-ui .app-navbar .account-menu-toggle { gap: 2px; }
    .crm-ui .app-navbar .account-menu .dropdown-menu { position: absolute; left: auto; right: 0; min-width: 210px; max-width: calc(100vw - 20px); }
}

/* Variant-2 board: quiet lanes and individual report surfaces. */
.crm-ui .kanban-board { gap: 14px; padding: 16px 4px; align-items: flex-start; }
.crm-ui .kanban-column { width: 260px; padding: 12px; background: var(--ui-lane); border-color: var(--ui-border); border-radius: var(--ui-card-radius); }
.crm-ui .kanban-title { display: flex; align-items: center; gap: 8px; text-align: left; margin: 0 0 14px; padding: 0 2px; color: var(--ui-text); }
.crm-ui .kanban-stage-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--ui-primary); }
.crm-ui .kanban-count { margin-left: auto; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
.crm-ui .kanban-card { border-radius: var(--ui-radius); padding: 14px; margin: 0 0 10px; background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); overflow-wrap: anywhere; }
.crm-ui .kanban-card:last-child { margin-bottom: 0; }
.crm-ui .kanban-card-title a { display: block; text-decoration: none; }
.crm-ui .kanban-card-number { display: block; font-size: 12px; font-weight: 500; color: var(--ui-primary); margin-bottom: 10px; }
.crm-ui .kanban-card .report-title { display: block; color: var(--ui-text); font-size: 14px; line-height: 1.45; font-weight: 400; }
.crm-ui .kanban-card-title a:hover .report-title { color: var(--ui-primary); }
.crm-ui .kanban-card-client { margin-top: 8px; color: var(--ui-muted); font-size: 13px; }
.crm-ui .kanban-card-footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--ui-border); }
.crm-ui .kanban-card-assistant { flex: 1 1 110px; font-size: 12px; color: var(--ui-muted); }
.crm-ui .kanban-card-price { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ui-text); }
.crm-ui .kanban-payment-marker { top: 16px; right: 14px; }

/* Payment and assistant each have their own row. */
.crm-ui .kanban-card-title { padding-right: 0; }
.crm-ui .kanban-card-footer { border-top: 0; padding-top: 0; margin-top: 12px; justify-content: flex-end; }
.crm-ui .kanban-card-price { display: inline-flex; align-items: center; gap: 8px; }
.crm-ui .kanban-card-price .kanban-payment-marker { position: static; flex: 0 0 12px; }
.crm-ui .kanban-card-assistant { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ui-border); }
/* Expand report metadata beneath the price, without overlaying nearby cards. */
.crm-ui .kanban-card-footer { border-top: 1px solid var(--ui-border); padding-top: 10px; align-items: center; }
.crm-ui .kanban-card-price { border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; background: transparent; }
.crm-ui .kanban-card-price.kanban-payment-marker--pending { border-color: #d4a017; background: var(--ui-warning-soft); }
.crm-ui .kanban-card-price.kanban-payment-marker--paid_new,
.crm-ui .kanban-card-price.kanban-payment-marker--paid_seen { border-color: var(--ui-success); background: var(--ui-success); color: #fff; }
.crm-ui .kanban-details-toggle { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--ui-radius); background: transparent; color: var(--ui-muted); }
.crm-ui .kanban-details-toggle:hover { background: var(--ui-primary-soft); color: var(--ui-primary); }
.crm-ui .kanban-details-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.crm-ui .kanban-card-details { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ui-border); }
.crm-ui .kanban-card-details[hidden] { display: none; }
.crm-ui .kanban-card-details dl { margin: 0; font-size: 12px; }
.crm-ui .kanban-card-details dt { color: var(--ui-muted); font-weight: 400; margin-top: 8px; }
.crm-ui .kanban-card-details dt:first-child { margin-top: 0; }
.crm-ui .kanban-card-details dd { margin: 2px 0 0; color: var(--ui-text); }
@media (pointer: coarse) { .crm-ui .kanban-details-toggle { width: 44px; height: 44px; } }

/* A visible, separate details target; title links always open the report. */
.crm-ui .kanban-details-toggle { background: var(--ui-primary-soft); color: var(--ui-primary); border: 1px solid var(--ui-border); }
.crm-ui .kanban-details-toggle i { font-size: 20px; font-weight: 700; transition: transform .18s ease-out; }
.crm-ui .kanban-details-toggle:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
/* Match the payment badge and details control heights. */
.crm-ui .kanban-card-price { min-height: 32px; box-sizing: border-box; justify-content: center; }
@media (pointer: coarse) { .crm-ui .kanban-card-price { min-height: 44px; } }

/* Common report comment footer and reversible deletion. */
.crm-ui .task-item-bottom { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.crm-ui .task-item-bottom > .task-created-at,
.crm-ui .task-item-bottom > .task-author { width:auto; padding:0; }
.crm-ui .task-item-bottom > .task-author { flex:1 1 90px; min-width:0; overflow-wrap:anywhere; }
.crm-ui .task-item-bottom > .report-comment-actions { display:flex; align-items:center; justify-content:flex-end; gap:4px; width:auto; padding:0; margin-left:auto; }
.crm-ui .report-comment-delete { display:inline-flex; align-items:center; justify-content:center; width:28px; min-height:28px; padding:4px; color:var(--ui-primary); text-decoration:none; }
.crm-ui .report-comment-source a { display:inline-flex; align-items:center; justify-content:center; width:28px; min-height:28px; color:var(--ui-muted); }
.crm-ui .report-comment-actions svg { width:20px; height:20px; }
.crm-ui .report-comment-source a[data-provider] { color:var(--ui-primary); }
.crm-ui .report-comment-delete:hover { color:var(--ui-primary); background:var(--ui-primary-soft); }
.crm-ui .report-comment-source a:hover { background:var(--ui-primary-soft); }
.crm-ui .report-comment-removed { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:10px 12px; margin-bottom:14px; border:1px solid var(--ui-border); border-radius:var(--ui-radius); color:var(--ui-muted); background:var(--ui-surface); }
.crm-ui .report-comment-removed[hidden],
.crm-ui .report-comment-entry [data-comment-content][hidden] { display:none; }
@media (pointer:coarse) {
    .crm-ui .report-comment-delete, .crm-ui .report-comment-source a { width:44px; min-height:44px; }
}

/* Audio controls share the CRM theme in chats and report comments. */
.crm-ui .message-audio { background:var(--ui-primary-soft); color:var(--ui-text); }
.crm-ui .message-audio button,
.crm-ui .message-transcribe-button,
.crm-ui .message-transcribe-button[aria-expanded="true"],
.crm-ui .message-transcribe-button[aria-busy="true"] { color:var(--ui-primary); }
.crm-ui .message-audio input[type=range] { accent-color:var(--ui-primary); }
.crm-ui .message-audio button:hover,
.crm-ui .message-transcribe-button:hover:not(:disabled) { background:var(--ui-primary-soft); color:var(--ui-primary); }
.crm-ui .message-audio button:focus-visible,
.crm-ui .message-transcribe-button:focus-visible { outline-color:var(--ui-primary); }

/* Let dropdowns extend beyond short comment cards. */
.crm-ui .report-comment-entry .task-item { overflow:visible; }
.crm-ui .report-comment-entry .task-item-header { border-start-start-radius:var(--ui-radius); border-start-end-radius:var(--ui-radius); }
/* Comment action menu. */
.crm-ui .report-comment-menu { display:inline-flex; align-items:center; justify-content:center; width:28px; min-height:28px; padding:4px; color:var(--ui-muted); text-decoration:none; }
.crm-ui .report-comment-menu:hover { background:var(--ui-primary-soft); color:var(--ui-primary); }
.crm-ui .report-comment-pinned-label[hidden] { display:none; }
.crm-ui .report-comment-entry[data-pinned="1"] > [data-comment-content] .task-item { border-inline-start:3px solid var(--ui-primary); }
@media (max-width:767.98px) { .crm-ui .report-comment-menu { width:44px; min-height:44px; } }

/* Report audio fills the card, reserving space for transcription. */
.crm-ui .report-comment-entry .message-audio-row { width:100%; }

/* Compact comment composer grows with its text. */
.crm-ui .report-comment-composer { margin:0 0 24px; }
.crm-ui .report-comment-compose-row { display:flex; align-items:flex-end; gap:8px; }
.crm-ui .report-comment-compose-row > .form-group { flex:1; min-width:0; margin-bottom:0; }
body.crm-ui .report-comment-compose-row textarea.form-control { min-height:var(--ui-control-height); resize:none; overflow-y:hidden; }
.crm-ui .report-comment-compose-row .help-block:empty { display:none; }
.crm-ui .report-comment-compose-row > .btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; margin-bottom:0; }
.crm-ui .report-comment-compose-details { margin-top:12px; }
.crm-ui .report-comment-compose-details[hidden] { display:none; }

.crm-ui .kanban-task-marker { display:inline-flex; align-items:center; gap:4px; padding:3px 6px; border-radius:var(--ui-radius); font-size:12px; color:var(--ui-primary); background:var(--ui-primary-soft); }
.crm-ui .kanban-task-marker--overdue { color:var(--ui-danger); background:var(--ui-danger-soft); }

.crm-ui .kanban-card-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:10px; }
.crm-ui .kanban-card-heading .kanban-card-number { flex:0 0 auto; margin-bottom:0; }
.crm-ui .kanban-card-heading .kanban-task-marker { min-width:0; font-size:11px; }
.crm-ui .kanban-task-marker svg { flex:0 0 auto; }
.crm-ui .kanban-task-marker-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Task header: status, completion, assignee and due date. */
.crm-ui .task-item-header:not(.hide-task-header) { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; }
.crm-ui .task-item-header > * { width:auto; padding:0; min-width:0; }
.crm-ui .task-header-status { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.crm-ui .task-status-label { color:var(--task-header-accent); }
.crm-ui .task-complete-control { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12px; font-weight:400; cursor:pointer; }
.crm-ui .task-complete-control .form-check-input { margin:0; }
.crm-ui .task-header-label { display:block; margin-bottom:2px; color:var(--ui-muted); font-size:11px; font-weight:400; }
.crm-ui .task-assigned-to { overflow-wrap:anywhere; }
.crm-ui .task-deadline-label { white-space:nowrap; cursor:pointer; }

.crm-ui .report-comment-editor { padding:12px; margin-bottom:15px; border:1px solid var(--ui-border); border-radius:var(--ui-radius); background:var(--ui-surface); }
.crm-ui .report-comment-editor > .form-label { display:block; margin-bottom:12px; }
.crm-ui .task-deadline-label { cursor:default; }

/* Company appearance. Keep semantic states and shared component geometry. */
:root[data-ui-theme="dark"] {
    color-scheme:dark;
    --ui-bg:#18141e; --ui-surface:#211b29; --ui-subtle:#251e2e;
    --ui-text:#e6dfed; --ui-muted:#b3a1c2; --ui-border:#43344f;
    --ui-primary:#b78afa; --ui-primary-hover:#cba7ff; --ui-primary-active:#a879ed;
    --ui-primary-soft:#362548; --ui-header:#260b35; --ui-header-text:#f4eafe;
    --ui-header-muted:#d5c4e2; --ui-header-active:#49245e;
    --ui-lane:#2c2236; --ui-disabled:#292132; --ui-placeholder:#a492b6; --ui-label:#c2b0d2;
    --ui-success:#75d49a; --ui-success-soft:#1d3529;
    --ui-danger:#ff9ea8; --ui-danger-soft:#42252e;
    --ui-warning:#e5bf78; --ui-warning-soft:#3a3020;
    --ui-info:#8fc9f0; --ui-info-soft:#203343;
    --ui-shadow:0 2px 8px rgb(0 0 0 / 12%); --ui-floating-shadow:0 12px 40px rgb(0 0 0 / 35%);
    --ui-focus:0 0 0 3px rgb(183 138 250 / 25%);
    --bs-primary-rgb:183,138,250; --bs-secondary-color:var(--ui-muted);
    --bs-tertiary-bg:var(--ui-lane); --bs-secondary-bg:var(--ui-disabled);
    --bs-emphasis-color:var(--ui-text); --bs-heading-color:var(--ui-text);
}
:root[data-ui-theme="light"] { color-scheme:light; }
[data-ui-theme="dark"] .crm-ui .btn-primary,
[data-ui-theme="dark"] .crm-ui .auth-submit { --bs-btn-bg:#8750dd; --bs-btn-border-color:#8750dd; background:#8750dd; border-color:#8750dd; color:#fff; }
[data-ui-theme="dark"] .crm-ui .btn-primary:hover,
[data-ui-theme="dark"] .crm-ui .auth-submit:hover { --bs-btn-hover-bg:#995fea; background:#995fea; border-color:#995fea; }
[data-ui-theme="dark"] .crm-ui :is(.card,.modal-content,.dropdown-menu,.popover,.list-group-item) { background-color:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
[data-ui-theme="dark"] .crm-ui :is(.card-header,.card-footer,.modal-header,.modal-footer) { background-color:var(--ui-subtle); color:var(--ui-text); border-color:var(--ui-border); }
[data-ui-theme="dark"] .crm-ui .table { --bs-table-bg:var(--ui-surface); --bs-table-color:var(--ui-text); --bs-table-border-color:var(--ui-border); --bs-table-striped-bg:var(--ui-subtle); --bs-table-hover-bg:var(--ui-lane); }
[data-ui-theme="dark"] .crm-ui .table > :not(caption) > * > * { color:var(--ui-text); border-color:var(--ui-border); }
[data-ui-theme="dark"] .crm-ui .text-dark { color:var(--ui-text) !important; }
[data-ui-theme="dark"] .crm-ui :is(.bg-white,.bg-light,.text-bg-light) { background-color:var(--ui-subtle) !important; color:var(--ui-text) !important; }
[data-ui-theme="dark"] .crm-ui .select2-container--krajee-bs5 .select2-selection,
[data-ui-theme="dark"] .crm-ui .select2-container--krajee .select2-selection { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
[data-ui-theme="dark"] .crm-ui :is(.select2-search__field,.select2-dropdown,.datepicker,.datetimepicker) { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
[data-ui-theme="dark"] .crm-ui .select2-results__option[aria-selected="true"] { background:var(--ui-lane); color:var(--ui-text); }
[data-ui-theme="dark"] .crm-ui .select2-results__option--highlighted[aria-selected] { background:var(--ui-primary-soft); color:var(--ui-primary); }
[data-ui-theme="dark"] .crm-ui :is(.messages-sidebar,.messages-main,.messages-heading,.messages-compose,.messages-settings,.messages-material-dialog,.messages-list-menu,.messages-material-picker-menu) { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
[data-ui-theme="dark"] .crm-ui :is(.messages-history,.messages-timeline) { background:var(--ui-bg); }
[data-ui-theme="dark"] .crm-ui :is(.message,.message-bubble,.messages-chat,.message-file-card) { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
[data-ui-theme="dark"] .crm-ui :is(.message-outgoing,.message.outgoing,.messages-chat[aria-current="true"]) { background:var(--ui-primary-soft); color:var(--ui-text); }
[data-ui-theme="dark"] .crm-ui .btn-close { filter:invert(1) grayscale(1); }
[data-ui-theme="dark"] .crm-ui .messages-channel-toggle { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-primary); }
[data-ui-theme="dark"] .crm-ui .messages-channel-toggle:hover:not(:disabled),
[data-ui-theme="dark"] .crm-ui .messages-channel-toggle[aria-expanded="true"] { background:var(--ui-primary-soft); }
[data-ui-theme="dark"] .crm-ui :is(.messages-channel-toggle,.messages-channel-menu) .messages-channel-icon { color:inherit; }
[data-ui-theme="dark"] .crm-ui .messages-channel-toggle:focus-visible { outline-color:var(--ui-primary); }

/* CRM Icons: one geometry, size and stroke contract across all layouts. */
.crm-icon { display:inline-block; width:20px; height:20px; flex:0 0 auto; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.crm-icon--sm { width:16px; height:16px; }
.crm-icon--lg { width:24px; height:24px; }
.crm-ui .auth-security-note .crm-icon { color:var(--ui-primary); }
.crm-ui .kanban-details-toggle[aria-expanded="true"] .crm-icon { transform:rotate(180deg); }
.ui-icon-catalog { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.ui-icon-catalog > div { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--ui-border); border-radius:var(--ui-radius); }
.ui-icon-catalog code { font-size:12px; color:var(--ui-muted); }


.crm-ui .crm-icon { fill:none; stroke:currentColor; stroke-width:1.75; }
.crm-ui .message-delivery .crm-icon { width:16px; height:16px; }
.crm-ui .report-file-thumb .crm-icon { width:40px; height:40px; }

/* Conversation menu: aligned text column and equal action targets. */
.crm-ui .messages-settings-menu { width:280px; padding:8px; background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:var(--ui-card-radius); box-shadow:var(--ui-floating-shadow); }
.crm-ui .messages-status-row { display:flex; align-items:center; gap:2px; min-height:44px; padding:0 2px 0 8px; }
.crm-ui .messages-status-row > span { flex:1; min-width:0; font-size:14px; line-height:20px; white-space:nowrap; }
.crm-ui .messages-status-row > span b { font-weight:600; }
.crm-ui .messages-status-row > button,.crm-ui .messages-status-row > details > summary,.crm-ui .messages-settings-menu .messages-relation-remove { display:flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; padding:0; border:0; border-radius:var(--ui-radius); background:transparent; color:var(--ui-muted); cursor:pointer; }
.crm-ui .messages-status-row > details > summary { list-style:none; }
.crm-ui .messages-status-row > details > div { position:absolute; right:8px; top:48px; z-index:2; min-width:230px; padding:4px; border:1px solid var(--ui-border); border-radius:var(--ui-card-radius); background:var(--ui-surface); box-shadow:var(--ui-floating-shadow); }
.crm-ui .messages-settings-menu button { color:var(--ui-text); font-size:14px; }
.crm-ui .messages-status-row > button:hover:not(:disabled),.crm-ui .messages-status-row summary:hover,.crm-ui .messages-settings-menu .messages-relation-remove:hover { background:var(--ui-primary-soft); }
.crm-ui .messages-status-row summary::-webkit-details-marker,.crm-ui .messages-bind-menu > summary::-webkit-details-marker { display:none; }
.crm-ui .messages-bind-menu > summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 10px 0 8px; border-radius:var(--ui-radius); list-style:none; font-size:14px; line-height:20px; cursor:pointer; }
.crm-ui .messages-bind-menu > summary:hover { background:var(--ui-primary-soft); }
.crm-ui .messages-bind-menu > summary .crm-icon { color:var(--ui-muted); }
.crm-ui .messages-bind-menu[open] > summary .crm-icon { transform:rotate(180deg); }
.crm-ui .messages-bind-menu > button { padding:10px 12px 10px 20px; }
.crm-ui #messages-open-links { border:0; margin:0; border-radius:var(--ui-radius); }
.crm-ui .messages-client-reports { margin:6px 0 0; padding:12px 0 0; border-top:1px solid var(--ui-border); }
.crm-ui .messages-client-reports h3 { margin:0 0 4px; padding:0 8px; font-size:13px; line-height:20px; font-weight:600; color:var(--ui-muted); }
.crm-ui .messages-relation-row { display:flex; align-items:flex-start; gap:2px; }
.crm-ui .messages-relation-row > a { flex:1; min-width:0; padding:8px; font-size:13px; line-height:18px; color:var(--ui-primary); }
.crm-ui .messages-relation-row > a span { font-size:12px; line-height:17px; color:var(--ui-muted); }
.crm-ui .messages-settings-menu .messages-relation-remove { margin:0 2px 0 0; }
.crm-ui .messages-settings-menu :is(button,summary,a):focus-visible { outline:2px solid var(--ui-primary); outline-offset:1px; }
@media (pointer:coarse) { .crm-ui .messages-status-row > button,.crm-ui .messages-status-row > details > summary,.crm-ui .messages-settings-menu .messages-relation-remove { width:42px; height:42px; flex-basis:42px; } }