/* SOURCE MODULE: foundation/00-components.css */
/* UI FOUNDATION 0.17.8 — CURRENT RELEASE CONTRACT */
/* UI FOUNDATION MOBILE LAYOUT 0.17.8 */
/* UI FOUNDATION 0.17.1 — LIST METRICS / METRIC REGISTRY CONTRACT */
/* UI FOUNDATION 0.15.3 */
:root{
    --crm-background: #f4f7fb;
    --crm-surface: #ffffff;
    --crm-surface-soft: #f8fafc;
    --crm-border: #dfe6ee;
    --crm-border-strong: #cbd5e1;
    --crm-text: #172033;
    --crm-muted: #68768a;
    --crm-primary: #2468b4;
    --crm-primary-dark: #1d5593;
    --crm-primary-soft: #eaf3ff;
    --crm-success: #16794e;
    --crm-success-soft: #eaf8f1;
    --crm-danger: #b42318;
    --crm-danger-soft: #fff0ee;
    --crm-radius-sm: 8px;
    --crm-radius: 12px;
    --crm-radius-lg: 18px;
    --crm-shadow:
        0 16px 40px rgba(28, 45, 72, 0.08);
}

*{
    box-sizing: border-box;
}

html{
    color-scheme: light;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body{
    min-height: 100vh;
    margin: 0;
    color: var(--crm-text);
    background: var(--crm-background);
}

button,
input{
    font: inherit;
}

a{
    color: inherit;
}

[wire\:cloak]{
    display: none !important;
}

.crm-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--crm-radius-sm);
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        opacity 150ms ease;
}

.crm-button:disabled{
    cursor: wait;
    opacity: 0.65;
}

.crm-button:focus-visible,
input:focus-visible,
a:focus-visible{
    outline: 3px solid rgba(36, 104, 180, 0.25);
    outline-offset: 2px;
}

.crm-button-primary{
    color: #ffffff;
    background: var(--crm-primary);
}

.crm-button-primary:hover{
    background: var(--crm-primary-dark);
}

.crm-button-secondary{
    color: var(--crm-text);
    background: var(--crm-surface);
    border-color: var(--crm-border);
}

.crm-button-secondary:hover{
    background: var(--crm-surface-soft);
    border-color: var(--crm-border-strong);
}

.crm-button-block{
    width: 100%;
}


.crm-eyebrow{
    margin: 0 0 8px;
    color: var(--crm-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.crm-auth-body{
    background:
        radial-gradient(
            circle at top left,
            #eaf3ff 0,
            transparent 38%
        ),
        var(--crm-background);
}

.crm-auth-page{
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 24px;
}

.crm-auth-card{
    width: min(100%, 440px);
    padding: 34px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow);
}

.crm-auth-brand{
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-auth-brand div{
    display: grid;
    gap: 2px;
}

.crm-auth-brand small,
.crm-user-identity small{
    color: var(--crm-muted);
}

.crm-auth-heading{
    padding: 28px 0 22px;
}

.crm-auth-heading h1{
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
}

.crm-auth-heading > p:last-child{
    margin: 12px 0 0;
    color: var(--crm-muted);
    line-height: 1.6;
}

.crm-form{
    display: grid;
    gap: 18px;
}

.crm-field{
    display: grid;
    gap: 7px;
}

.crm-field label{
    font-size: 14px;
    font-weight: 700;
}

.crm-field input{
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    color: var(--crm-text);
    background: var(--crm-surface);
    border: 1px solid var(--crm-border-strong);
    border-radius: var(--crm-radius-sm);
}

.crm-field input:focus{
    border-color: var(--crm-primary);
}

.crm-field-error{
    margin: 0;
    color: var(--crm-danger);
    font-size: 13px;
}

.crm-checkbox{
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--crm-muted);
    font-size: 14px;
    cursor: pointer;
}

.crm-checkbox input{
    width: 16px;
    height: 16px;
}


.crm-user-identity{
    display: grid;
    gap: 2px;
    text-align: right;
    font-size: 13px;
}


.crm-page-heading{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.crm-page-heading h2{
    margin: 0;
    font-size: 28px;
}

.crm-page-heading p:last-child{
    max-width: 680px;
    margin: 10px 0 0;
    color: var(--crm-muted);
    line-height: 1.6;
}

.crm-status-badge{
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.crm-status-badge.is-success{
    color: var(--crm-success);
    background: var(--crm-success-soft);
}

.crm-metric-grid{
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.crm-metric-card,
.crm-panel,
.crm-card{
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: 0 8px 26px rgba(28, 45, 72, 0.04);
}

.crm-metric-card{
    display: grid;
    gap: 7px;
    padding: 20px;
}

.crm-metric-card span,
.crm-metric-card small{
    color: var(--crm-muted);
}

.crm-metric-card strong{
    font-size: 25px;
}

.crm-panel{
    overflow: hidden;
}

.crm-panel-header{
    padding: 22px 24px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-panel-header h3{
    margin: 0;
    font-size: 18px;
}

.crm-panel-header p{
    margin: 7px 0 0;
    color: var(--crm-muted);
}

.crm-definition-list{
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));
    margin: 0;
}

.crm-definition-list div{
    padding: 19px 24px;
    border-right: 1px solid var(--crm-border);
    border-bottom: 1px solid var(--crm-border);
}

.crm-definition-list dt{
    color: var(--crm-muted);
    font-size: 12px;
}

.crm-definition-list dd{
    margin: 7px 0 0;
    font-weight: 750;
}

.crm-card{
    padding: 26px;
}

.crm-title{
    margin: 0;
    font-size: 30px;
}

.crm-description{
    color: var(--crm-muted);
    line-height: 1.6;
}

.crm-status-grid{
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.crm-status{
    padding: 15px;
    background: var(--crm-surface-soft);
    border: 1px solid var(--crm-border);
    border-radius: 9px;
}

.crm-status dt{
    color: var(--crm-muted);
    font-size: 12px;
}

.crm-status dd{
    margin: 6px 0 0;
    font-weight: 750;
}

.crm-test-result{
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    margin-left: 10px;
    padding: 0 13px;
    color: var(--crm-success);
    background: var(--crm-success-soft);
    border-radius: 8px;
    font-weight: 700;
}

.crm-offline{
    padding: 12px;
    background: #fff6e5;
    border-radius: 8px;
}

@media (max-width: 820px) {
    

    

    

    

    .crm-user-identity{
        display: none;
    }

    

    .crm-page-heading{
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .crm-auth-page{
        padding: 12px;
    }

    .crm-auth-card{
        padding: 24px;
    }

    

    .crm-test-result{
        margin: 10px 0 0;
    }
}

/* ==========================================================
   UI Foundation 0.3.0
   ========================================================== */

:root{
    --crm-info: #2468b4;
    --crm-info-soft: #eaf3ff;
    --crm-warning: #a15c00;
    --crm-warning-soft: #fff4dc;
    --crm-danger: #b42318;
    --crm-danger-soft: #fff0ee;
    --crm-neutral-soft: #eef2f6;
    --crm-focus: rgba(36, 104, 180, 0.28);
}

.crm-icon{
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}


.crm-icon-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #526177;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    transition:
        color 150ms ease,
        background 150ms ease,
        border-color 150ms ease;
}

.crm-icon-button:hover,
.crm-icon-button.is-active{
    color: var(--crm-primary-dark);
    background: var(--crm-primary-soft);
    border-color: #d4e6fb;
}

.crm-icon-button:disabled{
    cursor: not-allowed;
    opacity: 0.45;
}

.crm-button{
    gap: 8px;
}

.crm-button-sm{
    min-height: 36px;
    padding-inline: 13px;
    font-size: 13px;
}

.crm-button-md{
    min-height: 42px;
}

.crm-button-ghost{
    color: var(--crm-primary-dark);
    background: transparent;
}

.crm-button-ghost:hover{
    background: var(--crm-primary-soft);
}

.crm-button-danger{
    color: #ffffff;
    background: var(--crm-danger);
}

.crm-button-danger:hover{
    background: #8f1c13;
}


.crm-panel-body{
    padding: 22px 24px;
}

.crm-panel-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.crm-alert{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 18px;
    padding: 15px 17px;
    border: 1px solid;
    border-radius: 10px;
    line-height: 1.5;
}

.crm-alert strong{
    display: block;
    margin-bottom: 3px;
}

.crm-alert.is-info{
    color: #164f86;
    background: var(--crm-info-soft);
    border-color: #cfe3f8;
}

.crm-alert.is-success{
    color: var(--crm-success);
    background: var(--crm-success-soft);
    border-color: #ccebdc;
}

.crm-alert.is-warning{
    color: var(--crm-warning);
    background: var(--crm-warning-soft);
    border-color: #f2d59a;
}

.crm-alert.is-danger{
    color: var(--crm-danger);
    background: var(--crm-danger-soft);
    border-color: #f1c7c1;
}

.crm-alert.is-neutral{
    color: #4d5d72;
    background: var(--crm-neutral-soft);
    border-color: var(--crm-border);
}

.crm-badge{
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.crm-badge.is-neutral{
    color: #536174;
    background: var(--crm-neutral-soft);
}

.crm-badge.is-info{
    color: var(--crm-info);
    background: var(--crm-info-soft);
}

.crm-badge.is-success{
    color: var(--crm-success);
    background: var(--crm-success-soft);
}

.crm-badge.is-warning{
    color: var(--crm-warning);
    background: var(--crm-warning-soft);
}

.crm-badge.is-danger{
    color: var(--crm-danger);
    background: var(--crm-danger-soft);
}

.crm-catalog-summary{
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.crm-catalog-grid{
    display: grid;
    gap: 18px;
}

.crm-preview-block{
    display: grid;
    gap: 18px;
}

.crm-preview-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.crm-tone-selector{
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.crm-tone-selector:focus-visible{
    outline: 3px solid var(--crm-focus);
    outline-offset: 3px;
    border-radius: 999px;
}

.crm-control{
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    color: var(--crm-text);
    background: var(--crm-surface);
    border: 1px solid var(--crm-border-strong);
    border-radius: var(--crm-radius-sm);
}

textarea.crm-control{
    min-height: 110px;
    padding-block: 10px;
    resize: vertical;
}

.crm-control:focus{
    border-color: var(--crm-primary);
    outline: 3px solid var(--crm-focus);
    outline-offset: 1px;
}

.crm-field-help{
    margin: 0;
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.45;
}


.crm-data-table{
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: var(--crm-surface);
}

.crm-data-table th,
.crm-data-table td{
    padding: 14px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--crm-border);
}

.crm-data-table th{
    color: var(--crm-muted);
    background: var(--crm-surface-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.crm-data-table tbody tr:last-child td{
    border-bottom: 0;
}

.crm-data-table tbody tr{
    position: relative;
    transition: background 130ms ease;
}

.crm-data-table tbody tr:hover,
.crm-data-table tbody tr:focus-within{
    background: #f8fbff;
}

.crm-data-table td strong,
.crm-data-table td small{
    display: block;
}

.crm-data-table td small{
    margin-top: 3px;
    color: var(--crm-muted);
}

.crm-row-actions{
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    opacity: 0;
    transform: translateX(5px);
    transition:
        opacity 130ms ease,
        transform 130ms ease;
}

.crm-data-table tr:hover .crm-row-actions,
.crm-data-table tr:focus-within .crm-row-actions{
    opacity: 1;
    transform: translateX(0);
}

.crm-empty-state{
    display: grid;
    justify-items: center;
    padding: 38px 24px;
    text-align: center;
}

.crm-empty-state-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
    border-radius: 14px;
}

.crm-empty-state h3{
    margin: 0;
    font-size: 18px;
}

.crm-empty-state p{
    max-width: 460px;
    margin: 8px 0 0;
    color: var(--crm-muted);
}

.crm-empty-state-actions{
    margin-top: 18px;
}

.crm-settings-grid{
    display: grid;
    gap: 18px;
}

.crm-section{
    overflow: hidden;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
}

.crm-section-header{
    padding: 20px 22px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-section-header h3{
    margin: 0;
    font-size: 17px;
}

.crm-section-header p{
    margin: 6px 0 0;
    color: var(--crm-muted);
}

.crm-section-body{
    padding: 0;
}

.crm-metric-card.is-info{
    border-color: #cfe3f8;
}

.crm-metric-card.is-success{
    border-color: #ccebdc;
}


@media (max-width: 520px) {
    

    

    

    .crm-row-actions{
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================
   Plugin Runtime 0.4.0
   ========================================================== */

.crm-plugin-navigation{
    display: grid;
    gap: 5px;
}

.crm-plugin-grid{
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
}

.crm-plugin-card{
    min-width: 0;
}

.crm-plugin-details{
    display: grid;
    gap: 0;
    margin: 0 0 18px;
    border: 1px solid var(--crm-border);
    border-radius: 9px;
}

.crm-plugin-details div{
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-plugin-details div:last-child{
    border-bottom: 0;
}

.crm-plugin-details dt{
    color: var(--crm-muted);
    font-size: 12px;
}

.crm-plugin-details dd{
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 700;
}

.crm-plugin-details code{
    color: var(--crm-primary-dark);
}

@media (max-width: 520px) {
    .crm-plugin-grid{
        grid-template-columns: 1fr;
    }

    .crm-plugin-details div{
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ==========================================================
   Plugin Installer 0.5.0
   ========================================================== */

[x-cloak]{
    display: none !important;
}

.crm-installer-card{
    margin-bottom: 28px;
}

.crm-installer-form{
    display: grid;
    gap: 18px;
}

.crm-upload-zone{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    background: var(--crm-surface-soft);
    border: 1px dashed var(--crm-border-strong);
    border-radius: 11px;
}

.crm-upload-zone strong{
    display: block;
    margin-bottom: 5px;
}

.crm-upload-zone p{
    margin: 0;
    color: var(--crm-muted);
    font-size: 13px;
}

.crm-file-input{
    width: min(100%, 330px);
    padding: 9px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 9px;
}

.crm-file-input::file-selector-button{
    margin-right: 10px;
    padding: 8px 12px;
    color: var(--crm-primary-dark);
    background: var(--crm-primary-soft);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 750;
}

.crm-upload-progress{
    display: grid;
    gap: 8px;
}

.crm-upload-progress-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--crm-muted);
    font-size: 13px;
}

.crm-upload-progress progress{
    width: 100%;
    height: 10px;
    overflow: hidden;
    accent-color: var(--crm-primary);
    border: 0;
    border-radius: 999px;
}

.crm-installing-state{
    padding: 13px 15px;
    color: var(--crm-info);
    background: var(--crm-info-soft);
    border: 1px solid #cfe3f8;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
}

.crm-selected-package{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 13px;
}

.crm-installer-rules{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.crm-installer-rules span{
    padding: 6px 9px;
    color: var(--crm-muted);
    background: var(--crm-neutral-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.crm-section-spacing{
    margin-top: 30px;
}


.crm-history-error{
    color: var(--crm-danger) !important;
}

@media (max-width: 720px) {
    .crm-upload-zone{
        align-items: stretch;
        flex-direction: column;
    }

    .crm-file-input{
        width: 100%;
    }
}

/* ==========================================================
   UI Foundation 0.4.0 - operational page contracts
   ========================================================== */

:root{
    --crm-space-1: 4px;
    --crm-space-2: 8px;
    --crm-space-3: 12px;
    --crm-space-4: 16px;
    --crm-space-5: 20px;
    --crm-space-6: 24px;
    --crm-space-7: 32px;
    --crm-space-8: 40px;
    --crm-content-padding: clamp(20px, 2.6vw, 44px);
    --crm-control-height: 42px;
}


.crm-stack{
    display: grid;
}

.crm-stack-sm{
    gap: var(--crm-space-3);
}

.crm-stack-md{
    gap: var(--crm-space-5);
}

.crm-stack-lg{
    gap: var(--crm-space-7);
}

.crm-grid{
    display: grid;
    min-width: 0;
}

.crm-grid-gap-sm{
    gap: var(--crm-space-3);
}

.crm-grid-gap-md{
    gap: var(--crm-space-5);
}

.crm-grid-gap-lg{
    gap: var(--crm-space-7);
}

.crm-grid-auto{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.crm-grid-two{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-grid-three{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


.crm-filter-bar{
    display: grid;
    gap: 16px;
    padding: 18px 20px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: 0 7px 24px rgba(28, 45, 72, 0.035);
}

.crm-filter-bar-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.crm-filter-bar-header h3,
.crm-table-toolbar h3,
.crm-form-section-header h3,
.crm-settings-section-header h3{
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
}

.crm-filter-bar-header p,
.crm-table-toolbar p,
.crm-form-section-header p,
.crm-settings-section-header p{
    margin: 4px 0 0;
    color: var(--crm-muted);
    font-size: 13px;
    line-height: 1.5;
}

.crm-filter-bar-settings{
    display: flex;
    align-items: center;
    gap: 6px;
}


.crm-filter-search{
    grid-column: span 2;
}

.crm-filter-bar .crm-field{
    gap: 6px;
}

.crm-filter-bar .crm-field label{
    color: #3c4b61;
    font-size: 12px;
}

.crm-filter-bar .crm-control{
    min-height: var(--crm-control-height);
}

.crm-filter-actions{
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-active-filters{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--crm-border);
}

.crm-filter-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    color: #40516a;
    background: var(--crm-neutral-soft);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.crm-disclosure{
    position: relative;
}

.crm-disclosure > summary{
    list-style: none;
}

.crm-disclosure > summary::-webkit-details-marker{
    display: none;
}

.crm-disclosure[open] > summary{
    color: var(--crm-primary-dark);
    background: var(--crm-primary-soft);
    border-color: #d4e6fb;
}

.crm-disclosure-panel{
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    right: 0;
    width: min(320px, calc(100vw - 40px));
    padding: 16px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    box-shadow: var(--crm-shadow);
}

.crm-disclosure-panel > strong{
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
}

.crm-disclosure-panel .crm-choice-grid{
    grid-template-columns: 1fr;
}

.crm-data-panel > .crm-panel-body{
    padding: 0;
}

.crm-table-toolbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-table-toolbar-main{
    min-width: 0;
}

.crm-table-toolbar-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-table-count{
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}


.crm-data-table{
    min-width: 760px;
}

.crm-data-table th,
.crm-data-table td{
    padding: 15px 18px;
}

.crm-data-table-standard th,
.crm-data-table-standard td{
    padding-block: 15px;
}

.crm-data-table-compact th,
.crm-data-table-compact td{
    padding-block: 10px;
}

.crm-data-table th{
    height: 44px;
    color: #5f6f84;
    background: #f8fafc;
    font-size: 10px;
    letter-spacing: 0.07em;
}

.crm-data-table td{
    color: #263348;
    font-size: 13px;
}

.crm-data-table td:first-child,
.crm-data-table th:first-child{
    padding-left: 20px;
}

.crm-data-table td:last-child,
.crm-data-table th:last-child{
    padding-right: 20px;
}

.crm-data-table .crm-cell-primary{
    color: var(--crm-text);
    font-size: 14px;
    font-weight: 750;
}

.crm-data-table .crm-cell-secondary{
    display: block;
    margin-top: 3px;
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 500;
}

.crm-data-table .crm-cell-code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.crm-actions-column{
    width: 1%;
    white-space: nowrap;
}

.crm-row-actions{
    min-width: 76px;
}

.crm-row-actions form{
    display: inline-flex;
    margin: 0;
}

.crm-row-actions .crm-icon-button{
    width: 34px;
    height: 34px;
}

.crm-pagination{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 12px 20px;
    border-top: 1px solid var(--crm-border);
}

.crm-pagination-summary{
    margin: 0;
    color: var(--crm-muted);
    font-size: 12px;
}

.crm-pagination-controls{
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-pagination-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 11px;
    color: #40516a;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.crm-pagination-button:hover:not(.is-disabled),
.crm-pagination-button:focus-visible{
    color: var(--crm-primary-dark);
    background: var(--crm-primary-soft);
    border-color: #d4e6fb;
}

.crm-pagination-button:disabled,
.crm-pagination-button.is-disabled{
    cursor: not-allowed;
    opacity: 0.45;
}

.crm-pagination-current{
    padding: 0 5px;
    color: var(--crm-muted);
    font-size: 12px;
    white-space: nowrap;
}

.crm-form{
    display: grid;
    gap: 20px;
}

.crm-form-page{
    width: min(100%, 1160px);
}

.crm-form-section,
.crm-settings-section{
    overflow: hidden;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: 0 7px 24px rgba(28, 45, 72, 0.035);
}

.crm-form-section-header,
.crm-settings-section-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    background: #fbfcfe;
    border-bottom: 1px solid var(--crm-border);
}

.crm-form-section-body,
.crm-settings-section-body{
    padding: 20px;
}

.crm-settings-section-actions{
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-form-grid{
    display: grid;
    gap: 18px 20px;
}

.crm-form-grid-one{
    grid-template-columns: minmax(0, 1fr);
}

.crm-form-grid-two{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-form-grid-three{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-field-span-full{
    grid-column: 1 / -1;
}

.crm-control{
    min-height: var(--crm-control-height);
}

textarea.crm-control{
    min-height: 118px;
}

.crm-choice-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 18px;
}

.crm-choice-grid .crm-checkbox{
    min-height: 40px;
    padding: 8px 10px;
    color: #40516a;
    background: var(--crm-surface-soft);
    border: 1px solid var(--crm-border);
    border-radius: 8px;
}

.crm-button-group,
.crm-inline-actions{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}


.crm-validation-list{
    margin: 0;
    padding-left: 18px;
}

.crm-validation-list li + li{
    margin-top: 4px;
}

.crm-file-upload{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, 340px);
    align-items: center;
    gap: 14px;
    min-height: 84px;
    padding: 16px;
    color: #40516a;
    background: var(--crm-surface-soft);
    border: 1px dashed var(--crm-border-strong);
    border-radius: 10px;
    cursor: pointer;
}

.crm-file-upload-copy{
    display: grid;
    gap: 3px;
}

.crm-file-upload-copy span{
    color: var(--crm-muted);
    font-size: 12px;
}

.crm-file-upload-input{
    width: 100%;
    padding: 8px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 8px;
}

.crm-description-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin: 0;
}

.crm-description-item{
    min-width: 0;
    padding: 17px 20px;
    border-right: 1px solid var(--crm-border);
    border-bottom: 1px solid var(--crm-border);
}

.crm-description-item dt{
    color: var(--crm-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.crm-description-item dd{
    min-width: 0;
    margin: 6px 0 0;
    color: var(--crm-text);
    font-size: 14px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.crm-code-block{
    max-width: 100%;
    margin: 0;
    padding: 16px;
    overflow: auto;
    color: #dce7f5;
    background: #172033;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.crm-record-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding: 20px 22px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: 0 7px 24px rgba(28, 45, 72, 0.035);
}

.crm-record-header-main{
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 14px;
}

.crm-record-avatar{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
    border-radius: 13px;
}

.crm-record-title-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.crm-record-header h2{
    margin: 0;
    font-size: 23px;
}

.crm-record-header p{
    margin: 6px 0 0;
    color: var(--crm-muted);
    line-height: 1.5;
}

.crm-record-header-actions{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-timeline{
    position: relative;
    display: grid;
    gap: 0;
}

.crm-timeline-item{
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 22px;
}

.crm-timeline-item::before{
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 6px;
    width: 1px;
    content: "";
    background: var(--crm-border);
}

.crm-timeline-item:last-child::before{
    display: none;
}

.crm-timeline-marker{
    position: relative;
    z-index: 1;
    width: 13px;
    height: 13px;
    margin-top: 4px;
    background: var(--crm-surface);
    border: 3px solid var(--crm-primary);
    border-radius: 999px;
}

.crm-timeline-content{
    min-width: 0;
    padding: 15px 17px;
    background: var(--crm-surface-soft);
    border: 1px solid var(--crm-border);
    border-radius: 10px;
}

.crm-timeline-content header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.crm-timeline-content time,
.crm-timeline-content footer{
    color: var(--crm-muted);
    font-size: 11px;
}

.crm-timeline-body{
    margin-top: 7px;
    color: #40516a;
    line-height: 1.55;
}

.crm-timeline-body > :last-child{
    margin-bottom: 0;
}

.crm-timeline-content footer{
    margin-top: 9px;
}

.crm-empty-table-cell{
    padding: 0 !important;
}

.crm-empty-table-cell .crm-empty-state{
    min-height: 230px;
}


@media (max-width: 980px) {
    .crm-filter-search{
        grid-column: auto;
    }

    .crm-grid-three,
.crm-form-grid-three{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-record-header{
        flex-direction: column;
    }
}

@media (max-width: 720px) {
    

    

    .crm-filter-bar,
.crm-form-section-body,
.crm-settings-section-body{
        padding: 16px;
    }

    .crm-grid-two,
.crm-grid-three,
.crm-form-grid-two,
.crm-form-grid-three{
        grid-template-columns: 1fr;
    }

    .crm-table-toolbar,
.crm-pagination,
.crm-file-upload{
        align-items: stretch;
        flex-direction: column;
    }

    .crm-file-upload{
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .crm-file-upload-input{
        grid-column: 1 / -1;
    }

    .crm-pagination-controls{
        justify-content: space-between;
        width: 100%;
    }

    .crm-pagination-current{
        display: none;
    }

    .crm-row-actions{
        opacity: 1;
        transform: none;
    }

    .crm-record-header-main{
        width: 100%;
    }
}

@media (max-width: 520px) {
    

    .crm-table-toolbar-actions,
.crm-record-header-actions,
.crm-button-group,
.crm-inline-actions{
        align-items: stretch;
        width: 100%;
    }

    .crm-table-toolbar-actions .crm-button,
.crm-record-header-actions .crm-button,
.crm-button-group .crm-button,
.crm-inline-actions .crm-button{
        width: 100%;
    }
}

.crm-loading-state{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 700;
}

.crm-loading-spinner{
    width: 14px;
    height: 14px;
    border: 2px solid var(--crm-border-strong);
    border-top-color: var(--crm-primary);
    border-radius: 999px;
    animation: crm-spin 700ms linear infinite;
}

@keyframes crm-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .crm-loading-spinner{
        animation-duration: 1600ms;
    }
}

.crm-progress{
    display: grid;
    min-width: 150px;
    gap: 6px;
}

.crm-progress-label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--crm-muted);
    font-size: 11px;
}

.crm-progress-track{
    height: 7px;
    overflow: hidden;
    background: var(--crm-neutral-soft);
    border-radius: 999px;
}

.crm-progress-value{
    display: block;
    height: 100%;
    background: var(--crm-primary);
    border-radius: inherit;
}

.crm-settings-layout{
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
    align-items: start;
    gap: 20px;
}

.crm-panel + .crm-panel,
.crm-settings-section + .crm-settings-section{
    margin-top: 0;
}

.crm-data-table a:not(.crm-icon-button):not(.crm-button):not(.crm-record-primary-link){
    color: var(--crm-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.crm-data-table a:not(.crm-icon-button):not(.crm-button):not(.crm-record-primary-link):hover{
    text-decoration: underline;
}

.crm-data-table code,
.crm-description-list code{
    color: #40516a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
}

.crm-data-table td > small,
.crm-data-table td > strong{
    display: block;
}

.crm-data-table td > small{
    margin-top: 4px;
}

.crm-form-note{
    margin: 0;
    color: var(--crm-muted);
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .crm-settings-layout{
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   UI Foundation 0.5.1 - App Shell 2.0 and Record Profile 2.0
   ========================================================== */

:root{
    --crm-background: #f5f7fb;
    --crm-surface: #ffffff;
    --crm-surface-soft: #f8fafc;
    --crm-surface-muted: #f1f4f8;
    --crm-border: #e2e7ef;
    --crm-border-strong: #d4dbe6;
    --crm-text: #141c2b;
    --crm-muted: #6c778a;
    --crm-primary: #245eea;
    --crm-primary-dark: #1948c7;
    --crm-primary-soft: #edf2ff;
    --crm-sidebar: #0d1b31;
    --crm-sidebar-deep: #091426;
    --crm-sidebar-surface: #13243f;
    --crm-sidebar-border: rgba(255, 255, 255, 0.08);
    --crm-sidebar-text: #e9eef8;
    --crm-sidebar-muted: #8fa0b9;
    --crm-success: #109454;
    --crm-success-soft: #e9f8ef;
    --crm-warning: #d78800;
    --crm-warning-soft: #fff7e7;
    --crm-danger: #d43a35;
    --crm-danger-soft: #fff0ef;
    --crm-info: #245eea;
    --crm-info-soft: #edf2ff;
    --crm-purple: #7a42e8;
    --crm-purple-soft: #f2edff;
    --crm-pink: #d93d84;
    --crm-pink-soft: #fff0f7;
    --crm-orange: #e7792a;
    --crm-orange-soft: #fff3ea;
    --crm-teal: #029e83;
    --crm-teal-soft: #e9faf6;
    --crm-radius-sm: 8px;
    --crm-radius: 12px;
    --crm-radius-lg: 16px;
    --crm-radius-xl: 20px;
    --crm-shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.03), 0 8px 24px rgba(16, 24, 40, 0.035);
    --crm-shadow-float: 0 20px 60px rgba(15, 27, 48, 0.16);
    --crm-sidebar-width: 238px;
    --crm-topbar-height: 58px;
    --crm-content-padding: clamp(20px, 2.2vw, 34px);
}

html{
    scroll-behavior: smooth;
}


body.crm-contrast-workspace{
    --crm-background: #eef2f7;
    --crm-border: #d9e0ea;
    --crm-surface-soft: #f4f6f9;
}


.crm-plugin-navigation{
    display: grid;
    gap: 3px;
}


.crm-record-page{
    display: grid;
    gap: 12px;
    min-width: 0;
}

.crm-record-hero{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-width: 0;
    gap: 24px;
    padding: 22px 26px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    box-shadow: var(--crm-shadow-soft);
}

.crm-record-hero-main{
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 20px;
}

.crm-avatar{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: visible;
    color: var(--crm-primary);
    background: linear-gradient(145deg, #eef2ff, #dfe6fb);
    border: 1px solid #e2e8f6;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.crm-avatar img{
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.crm-avatar-sm{ width: 34px; height: 34px; font-size: 12px; }
.crm-avatar-md{ width: 48px; height: 48px; font-size: 16px; }
.crm-avatar-lg{ width: 68px; height: 68px; font-size: 22px; }
.crm-avatar-xl{ width: 88px; height: 88px; font-size: 30px; }

.crm-avatar-presence{
    position: absolute;
    right: 2px;
    bottom: 4px;
    width: 15px;
    height: 15px;
    background: #98a2b3;
    border: 3px solid var(--crm-surface);
    border-radius: 999px;
}

.crm-avatar-presence.is-online{
    background: #13b95c;
}

.crm-record-identity{
    display: grid;
    min-width: 0;
    gap: 5px;
}

.crm-record-identity-heading{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.crm-record-identity-heading h1{
    margin: 0;
    font-size: clamp(24px, 2.2vw, 31px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.crm-record-subtitle{
    margin: 0;
    color: var(--crm-muted);
    font-size: 13px;
}

.crm-record-identifier{
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 5px;
    color: #8a94a5;
    font-size: 11px;
}

.crm-record-identifier > span{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-copy-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0;
    color: #7b8799;
    background: transparent;
    border: 0;
    border-radius: 6px;
}

.crm-copy-button:hover{
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
}

.crm-record-badges,
.crm-record-contacts{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.crm-record-badges{
    margin-top: 3px;
}

.crm-record-contacts{
    margin-top: 3px;
    color: #4e5b6f;
}

.crm-contact-inline{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4e5b6f;
    font-size: 12px;
    text-decoration: none;
}

.crm-contact-inline + .crm-contact-inline::before{
    width: 3px;
    height: 3px;
    margin-right: 1px;
    content: "";
    background: #aeb6c4;
    border-radius: 999px;
}

.crm-contact-inline:hover{
    color: var(--crm-primary);
}

.crm-record-hero-actions{
    display: grid;
    align-content: center;
    width: min(208px, 100%);
    flex: 0 0 auto;
    gap: 8px;
}

.crm-record-hero-actions > .crm-button,
.crm-record-hero-actions > form .crm-button{
    width: 100%;
}

.crm-record-hero-actions-row{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.crm-button{
    min-height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

.crm-button-primary{
    background: linear-gradient(180deg, #2a66f3, #2358dc);
    box-shadow: 0 5px 12px rgba(37, 94, 234, .18);
}

.crm-button-primary:hover{
    background: linear-gradient(180deg, #245eea, #1c4bc7);
}

.crm-button-secondary{
    color: #3b475a;
    background: #ffffff;
    border-color: var(--crm-border-strong);
}

.crm-button-ghost{
    color: #4d5b70;
    background: transparent;
    border-color: transparent;
}

.crm-button-danger{
    color: #ffffff;
    background: var(--crm-danger);
}

.crm-badge{
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.crm-badge.is-neutral{
    color: #5e6879;
    background: #f1f3f6;
    border-color: #e6e9ee;
}

.crm-badge.is-info{
    color: #2858c8;
    background: #edf2ff;
    border-color: #e0e8ff;
}

.crm-badge.is-success{
    color: #13804b;
    background: #eaf8f0;
    border-color: #d7f1e2;
}

.crm-badge.is-warning{
    color: #9d6500;
    background: #fff6df;
    border-color: #fbe8b7;
}

.crm-badge.is-danger{
    color: #b82d2a;
    background: #fff0ef;
    border-color: #f8dcda;
}

.crm-badge.is-purple{
    color: #7140ce;
    background: var(--crm-purple-soft);
    border-color: #e6dcff;
}

.crm-metric-strip{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.crm-metric-card{
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
    min-height: 72px;
    padding: 11px 13px;
    color: var(--crm-text);
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow-soft);
    text-decoration: none;
}

.crm-metric-card.is-link:hover{
    border-color: #cbd7f1;
    transform: translateY(-1px);
}

.crm-metric-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    color: #516177;
    background: #f1f4f8;
    border-radius: 9px;
}

.crm-metric-card.is-info .crm-metric-icon{
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
}

.crm-metric-card.is-success .crm-metric-icon{
    color: var(--crm-success);
    background: var(--crm-success-soft);
}

.crm-metric-card.is-purple .crm-metric-icon{
    color: var(--crm-purple);
    background: var(--crm-purple-soft);
}

.crm-metric-card.is-warning .crm-metric-icon{
    color: var(--crm-warning);
    background: var(--crm-warning-soft);
}

.crm-metric-card.is-pink .crm-metric-icon{
    color: var(--crm-pink);
    background: var(--crm-pink-soft);
}

.crm-metric-copy{
    display: grid;
    min-width: 0;
    gap: 1px;
}

.crm-metric-copy small{
    overflow: hidden;
    color: var(--crm-muted);
    font-size: 10px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-metric-copy strong{
    overflow: hidden;
    color: var(--crm-text);
    font-size: 15px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-metric-copy > span{
    overflow: hidden;
    color: #8992a2;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.crm-record-tab{
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 45px;
    flex: 0 0 auto;
    gap: 7px;
    padding: 0 14px;
    color: #5f6b7d;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.crm-record-tab:hover{
    color: var(--crm-primary);
}

.crm-record-tab.is-active{
    color: var(--crm-primary);
}

.crm-record-tab.is-active::after{
    position: absolute;
    right: 8px;
    bottom: -1px;
    left: 8px;
    height: 2px;
    content: "";
    background: var(--crm-primary);
    border-radius: 2px 2px 0 0;
}

.crm-record-tab-count{
    min-width: 18px;
    padding: 1px 5px;
    color: #586578;
    background: #e9edf3;
    border-radius: 999px;
    font-size: 9px;
    text-align: center;
}

.crm-profile-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.crm-profile-grid-wide-left{
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}

.crm-profile-column{
    display: grid;
    min-width: 0;
    gap: 12px;
}

.crm-profile-panel{
    min-width: 0;
    overflow: hidden;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow-soft);
}

.crm-profile-panel-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 49px;
    gap: 14px;
    padding: 13px 15px 10px;
}

.crm-profile-panel-heading{
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 8px;
}

.crm-profile-panel-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
    border-radius: 7px;
}

.crm-profile-panel h2{
    margin: 0;
    color: var(--crm-text);
    font-size: 13px;
    line-height: 1.35;
}

.crm-profile-panel-header p{
    margin: 3px 0 0;
    color: var(--crm-muted);
    font-size: 10px;
    line-height: 1.4;
}

.crm-profile-panel-actions{
    display: flex;
    align-items: center;
    gap: 6px;
}

.crm-profile-panel-actions .crm-button{
    min-height: 30px;
    padding: 0 10px;
    font-size: 10px;
}

.crm-profile-panel-body{
    min-width: 0;
    padding: 0 15px 14px;
}

.crm-profile-panel.is-flush .crm-profile-panel-body{
    padding: 0;
}

.crm-activity-list,
.crm-identifier-list,
.crm-linked-record-list,
.crm-alert-list{
    display: grid;
}

.crm-activity-item{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    gap: 9px;
    min-height: 48px;
    padding: 7px 0;
    color: var(--crm-text);
    border-top: 1px solid #edf0f4;
    text-decoration: none;
}

.crm-activity-item:first-child{
    border-top: 0;
}

.crm-activity-item:hover .crm-activity-copy strong{
    color: var(--crm-primary);
}

.crm-activity-icon,
.crm-linked-record-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
    border-radius: 999px;
}

.crm-activity-icon.is-success,
.crm-linked-record-icon.is-success{
    color: var(--crm-success);
    background: var(--crm-success-soft);
}

.crm-activity-icon.is-warning,
.crm-linked-record-icon.is-warning{
    color: var(--crm-warning);
    background: var(--crm-warning-soft);
}

.crm-activity-icon.is-purple,
.crm-linked-record-icon.is-purple{
    color: var(--crm-purple);
    background: var(--crm-purple-soft);
}

.crm-activity-copy,
.crm-linked-record-copy{
    display: grid;
    min-width: 0;
    gap: 2px;
}

.crm-activity-copy strong,
.crm-linked-record-copy strong{
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-activity-copy small,
.crm-linked-record-copy small{
    overflow: hidden;
    color: var(--crm-muted);
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-activity-item time{
    color: #8a94a4;
    font-size: 9px;
    white-space: nowrap;
}

.crm-key-value-list{
    display: grid;
    margin: 0;
}

.crm-key-value-row{
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(0, 1.2fr);
    align-items: center;
    min-height: 41px;
    gap: 12px;
    border-top: 1px solid #edf0f4;
}

.crm-key-value-row:first-child{
    border-top: 0;
}

.crm-key-value-row dt{
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
    color: #687386;
    font-size: 10px;
    font-weight: 500;
}

.crm-key-value-row dd{
    min-width: 0;
    margin: 0;
    color: #3e495b;
    font-size: 10px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.crm-identifier-row{
    display: grid;
    grid-template-columns: 24px 72px minmax(0, 1fr) auto auto;
    align-items: center;
    min-width: 0;
    gap: 7px;
    min-height: 38px;
    border-top: 1px solid #edf0f4;
}

.crm-identifier-row:first-child{
    border-top: 0;
}

.crm-identifier-icon{
    display: inline-flex;
    color: var(--crm-primary);
}

.crm-identifier-label{
    color: #6a7588;
    font-size: 9px;
}

.crm-identifier-row > strong{
    min-width: 0;
    overflow: hidden;
    color: #455064;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-identifier-actions{
    display: inline-flex;
}

.crm-identifier-actions .crm-icon-button{
    width: 28px;
    height: 28px;
    border: 0;
}

.crm-linked-record-item{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    min-width: 0;
    gap: 9px;
    min-height: 55px;
    padding: 8px 0;
    color: var(--crm-text);
    border-top: 1px solid #edf0f4;
    text-decoration: none;
}

.crm-linked-record-item:first-child{
    border-top: 0;
}

.crm-linked-record-item > .crm-icon:last-child{
    color: var(--crm-primary);
}

.crm-alert-item{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    gap: 10px;
    min-height: 57px;
    padding: 9px 0;
    border-top: 1px solid #edf0f4;
}

.crm-alert-item:first-child{
    border-top: 0;
}

.crm-alert-item-icon{
    display: inline-flex;
    color: var(--crm-warning);
}

.crm-alert-item.is-danger .crm-alert-item-icon{
    color: var(--crm-danger);
}

.crm-alert-item.is-info .crm-alert-item-icon{
    color: var(--crm-primary);
}

.crm-alert-item-copy{
    display: grid;
    min-width: 0;
    gap: 2px;
}

.crm-alert-item-copy strong{
    color: #3d485b;
    font-size: 10px;
}

.crm-alert-item-copy small{
    color: var(--crm-muted);
    font-size: 9px;
    line-height: 1.35;
}

.crm-alert-item-actions .crm-button{
    min-height: 30px;
    padding: 0 10px;
    font-size: 9px;
}

.crm-dropdown{
    position: relative;
}

.crm-dropdown > summary{
    list-style: none;
}

.crm-dropdown > summary::-webkit-details-marker{
    display: none;
}

.crm-dropdown-menu{
    position: absolute;
    top: calc(100% + 5px);
    z-index: 50;
    display: grid;
    width: 210px;
    padding: 6px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    box-shadow: var(--crm-shadow-float);
}

.crm-dropdown.is-end .crm-dropdown-menu{
    right: 0;
}

.crm-dropdown.is-start .crm-dropdown-menu{
    left: 0;
}

.crm-dropdown-item{
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 35px;
    gap: 8px;
    padding: 0 9px;
    color: #475367;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 10px;
    text-align: left;
    text-decoration: none;
}

.crm-dropdown-item:hover{
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
}

.crm-dropdown-item.is-danger{
    color: var(--crm-danger);
}


.crm-toast{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    color: #364153;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-left: 3px solid var(--crm-primary);
    border-radius: 10px;
    box-shadow: var(--crm-shadow-float);
    font-size: 11px;
}

.crm-toast.is-success{ border-left-color: var(--crm-success); }
.crm-toast.is-danger{ border-left-color: var(--crm-danger); }

.crm-toast strong{
    display: block;
    margin-bottom: 2px;
}

.crm-skeleton{
    display: grid;
    gap: 9px;
    padding: 10px 0;
}

.crm-skeleton span{
    display: block;
    width: var(--crm-skeleton-width, 100%);
    height: 11px;
    background: linear-gradient(90deg, #edf0f4 25%, #f7f8fa 42%, #edf0f4 62%);
    background-size: 300% 100%;
    border-radius: 999px;
    animation: crm-skeleton-shimmer 1.3s ease-in-out infinite;
}

@keyframes crm-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.crm-anchor-target{
    scroll-margin-top: calc(var(--crm-topbar-height) + 56px);
}


@media (max-width: 1180px) {
    .crm-metric-strip{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .crm-profile-grid,
.crm-profile-grid-wide-left{
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    

    

    

    

    

    

    

    

    

    .crm-record-hero{
        flex-direction: column;
    }

    .crm-record-hero-actions{
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .crm-record-page{
        gap: 10px;
    }

    .crm-record-hero{
        gap: 16px;
        padding: 18px;
    }

    .crm-record-hero-main{
        align-items: flex-start;
        gap: 14px;
    }

    .crm-avatar-xl{
        width: 68px;
        height: 68px;
        font-size: 23px;
    }

    .crm-record-identity-heading h1{
        font-size: 23px;
    }

    .crm-record-contacts{
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .crm-contact-inline + .crm-contact-inline::before{
        display: none;
    }

    .crm-record-hero-actions{
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .crm-record-hero-actions > .crm-button:nth-child(n/**/+2),
.crm-record-hero-actions > form:nth-child(n/**/+2){
        grid-column: 1 / -1;
    }

    .crm-metric-strip{
        display: flex;
        margin-right: -16px;
        margin-left: -16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .crm-metric-strip::-webkit-scrollbar{
        display: none;
    }

    .crm-metric-card{
        min-width: 190px;
        scroll-snap-align: start;
    }

    

    .crm-key-value-row{
        grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr);
    }

    .crm-identifier-row{
        grid-template-columns: 22px 62px minmax(0, 1fr) auto;
    }

    .crm-identifier-actions{
        display: none;
    }

    .crm-alert-item{
        grid-template-columns: auto minmax(0, 1fr);
    }

    .crm-alert-item-actions{
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 440px) {
    

    .crm-record-hero{
        padding: 15px;
    }

    .crm-record-hero-main{
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .crm-record-badges,
.crm-record-contacts{
        grid-column: 1 / -1;
    }

    .crm-record-hero-actions{
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .crm-metric-strip{
        margin-right: -12px;
        margin-left: -12px;
    }

    .crm-profile-panel-header,
.crm-profile-panel-body{
        padding-right: 12px;
        padding-left: 12px;
    }

    .crm-key-value-row{
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 9px 0;
    }

    .crm-identifier-row{
        grid-template-columns: 22px minmax(0, 1fr) auto;
        padding: 7px 0;
    }

    .crm-identifier-label{
        display: none;
    }

    .crm-activity-item{
        grid-template-columns: auto minmax(0, 1fr);
    }

    .crm-activity-item time{
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    html{ scroll-behavior: auto; }
    .crm-metric-card,
.crm-skeleton span{ transition: none; animation: none; }
}

/* UI Foundation 0.5.1 — interaction hardening */
.crm-dropdown-menu .crm-form{
    display: contents;
}

.crm-anchor-target{
    scroll-margin-top: calc(var(--crm-topbar-height) + 58px);
}

.crm-record-tab:focus-visible,
.crm-dropdown-item:focus-visible,
.crm-copy-button:focus-visible{
    outline: 3px solid rgba(36, 94, 234, .25);
    outline-offset: 2px;
}


/* UI Foundation 0.5.1 — standardized operational forms */
.crm-form-page{
    width: min(100%, 1320px);
    margin-inline: auto;
}

.crm-form-page-compact{
    width: min(100%, 920px);
}

.crm-form-page-wide{
    width: min(100%, 1320px);
}

.crm-form-hero{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 102px;
    padding: 22px 24px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: 0 7px 24px rgba(28, 45, 72, 0.04);
}

.crm-form-hero-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    color: var(--crm-primary);
    background: linear-gradient(145deg, #edf3ff, #f8fbff);
    border: 1px solid #e3ebfb;
    border-radius: 50%;
}

.crm-form-hero-copy{
    min-width: 0;
}

.crm-form-hero-eyebrow{
    margin: 0 0 5px;
    color: var(--crm-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.crm-form-hero h2{
    margin: 0;
    color: var(--crm-text);
    font-size: clamp(25px, 3vw, 31px);
    line-height: 1.15;
}

.crm-form-hero-copy > p:last-child{
    max-width: 780px;
    margin: 8px 0 0;
    color: var(--crm-muted);
    font-size: 15px;
    line-height: 1.5;
}

.crm-form-hero-actions{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.crm-form{
    display: grid;
    gap: 18px;
}

.crm-form-section{
    overflow: hidden;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius);
    box-shadow: 0 7px 24px rgba(28, 45, 72, 0.035);
}

.crm-form-section-header{
    display: grid;
    grid-template-columns: minmax(180px, 0.9fr) minmax(260px, 1.1fr) auto;
    align-items: center;
    gap: 20px;
    min-height: 64px;
    padding: 15px 20px;
    background: var(--crm-surface);
    border-bottom: 1px solid var(--crm-border);
}

.crm-form-section-title h3,
.crm-form-section-header h3{
    margin: 0;
    color: var(--crm-text);
    font-size: 17px;
    line-height: 1.3;
}

.crm-form-section-description,
.crm-form-section-header > p{
    justify-self: end;
    max-width: 620px;
    margin: 0;
    color: var(--crm-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: right;
}

.crm-form-section-actions{
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-form-section-body{
    padding: 20px;
}

.crm-form-grid{
    gap: 18px 20px;
}

.crm-field > label{
    margin-bottom: 7px;
    color: var(--crm-text);
    font-size: 13px;
    font-weight: 750;
}

.crm-control{
    width: 100%;
    min-height: 44px;
    padding-inline: 13px;
    color: var(--crm-text);
    background: #ffffff;
    border: 1px solid var(--crm-border-strong);
    border-radius: 8px;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background 150ms ease;
}

.crm-control:hover{
    border-color: #aebccd;
}

.crm-control:focus{
    border-color: var(--crm-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(36, 104, 180, 0.13);
}

textarea.crm-control{
    min-height: 118px;
    padding-block: 11px;
}

.crm-choice-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

.crm-choice-grid .crm-checkbox{
    align-items: flex-start;
    min-height: 62px;
    padding: 13px 14px;
    color: var(--crm-text);
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 9px;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease;
}

.crm-choice-grid .crm-checkbox:hover{
    background: #fbfdff;
    border-color: #b9c9df;
}

.crm-choice-grid .crm-checkbox:has(input:checked){
    background: #f3f7ff;
    border-color: #8bb2f4;
    box-shadow: inset 0 0 0 1px rgba(36, 104, 180, 0.07);
}

.crm-checkbox input{
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--crm-primary);
}

.crm-checkbox-copy{
    display: grid;
    gap: 3px;
    min-width: 0;
}

.crm-checkbox-label{
    color: var(--crm-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.crm-checkbox-description{
    color: var(--crm-muted);
    font-size: 12px;
    line-height: 1.45;
}

.crm-button{
    gap: 8px;
}


@media (max-width: 980px) {
    .crm-form-section-header{
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .crm-form-section-description,
.crm-form-section-header > p{
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        text-align: left;
    }
}

@media (max-width: 720px) {
    .crm-form-hero{
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        padding: 18px;
    }

    .crm-form-hero-icon{
        width: 48px;
        height: 48px;
    }

    .crm-form-hero-actions{
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .crm-form-section-header{
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        min-height: 0;
        padding: 15px 16px;
    }

    .crm-form-section-description,
.crm-form-section-header > p{
        text-align: left;
    }

    .crm-choice-grid{
        grid-template-columns: 1fr;
    }

    

    

    
}

/* ==========================================================
   UI Foundation 0.5.2 - compact density and 12-column forms
   ========================================================== */

:root{
    --crm-control-height: 40px;
    --crm-content-padding: clamp(16px, 2vw, 30px);
    --crm-form-max-width: 1280px;
    --crm-form-gap-x: 16px;
    --crm-form-gap-y: 14px;
}


.crm-stack-sm{ gap: 10px; }
.crm-stack-md{ gap: 16px; }
.crm-stack-lg{ gap: 22px; }

.crm-button{
    min-height: 38px;
    padding-inline: 14px;
    font-size: 12px;
}


.crm-form-page,
.crm-form-hero,
.crm-validation-summary{
    width: min(100%, var(--crm-form-max-width));
    margin-inline: auto;
}

.crm-form-page-compact{
    width: min(100%, 880px);
}

.crm-form-page-wide{
    width: min(100%, var(--crm-form-max-width));
}

.crm-form-hero{
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 82px;
    padding: 16px 18px;
}

.crm-form-hero-icon{
    width: 46px;
    height: 46px;
}

.crm-form-hero-icon .crm-icon{
    width: 24px;
    height: 24px;
}

.crm-form-hero-eyebrow{
    margin-bottom: 3px;
    font-size: 10px;
}

.crm-form-hero h2{
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.15;
}

.crm-form-hero-copy > p:last-child{
    max-width: 720px;
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
}

.crm-form{
    gap: 14px;
}

.crm-form-section,
.crm-settings-section{
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(28, 45, 72, 0.03);
}

.crm-form-section-header,
.crm-settings-section-header{
    grid-template-columns: minmax(170px, .85fr) minmax(240px, 1.15fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 11px 16px;
}

.crm-form-section-title h3,
.crm-form-section-header h3,
.crm-settings-section-header h3{
    font-size: 15px;
    line-height: 1.25;
}

.crm-form-section-description,
.crm-form-section-header > p,
.crm-settings-section-header > p{
    max-width: 560px;
    font-size: 12px;
    line-height: 1.4;
}

.crm-form-section-body,
.crm-settings-section-body{
    padding: 16px;
}

.crm-form-grid{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: var(--crm-form-gap-y) var(--crm-form-gap-x);
}

.crm-form-grid-one > :where(.crm-field, .crm-form-fieldset){
    grid-column: span 12;
}

.crm-form-grid-two > :where(.crm-field, .crm-form-fieldset){
    grid-column: span 6;
}

.crm-form-grid-three > :where(.crm-field, .crm-form-fieldset){
    grid-column: span 4;
}

.crm-form-grid-twelve > :where(.crm-field, .crm-form-fieldset){
    grid-column: span 12;
}

.crm-field-span-3{ grid-column: span 3 !important; }
.crm-field-span-4{ grid-column: span 4 !important; }
.crm-field-span-6{ grid-column: span 6 !important; }
.crm-field-span-8{ grid-column: span 8 !important; }
.crm-field-span-12,
.crm-field-span-full{ grid-column: 1 / -1 !important; }

.crm-field{
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 5px;
}

.crm-field > label{
    min-height: 16px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.crm-field-control{
    min-width: 0;
}

.crm-control{
    min-height: var(--crm-control-height);
    padding-inline: 11px;
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.35;
}

select.crm-control{
    padding-right: 34px;
}

textarea.crm-control{
    min-height: 96px;
    padding-block: 9px;
    resize: vertical;
}

.crm-field-help,
.crm-field-error{
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
}

.crm-form-fieldset{
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.crm-form-fieldset > legend{
    min-height: 16px;
    margin: 0 0 5px;
    padding: 0;
    color: var(--crm-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.crm-form-fieldset-description{
    margin: -1px 0 7px;
    color: var(--crm-muted);
    font-size: 11px;
    line-height: 1.35;
}

.crm-form-fieldset-body{
    min-width: 0;
}

.crm-form-fieldset .crm-choice-grid{
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.crm-choice-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
}

.crm-choice-grid .crm-checkbox{
    min-height: 50px;
    padding: 10px 12px;
    border-radius: 8px;
}

.crm-checkbox{
    gap: 8px;
    font-size: 13px;
}

.crm-checkbox input{
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.crm-checkbox-label{
    font-size: 13px;
    line-height: 1.3;
}

.crm-checkbox-description{
    font-size: 11px;
    line-height: 1.35;
}


.crm-record-identity-heading h1{
    font-size: clamp(23px, 2vw, 27px);
}


.crm-profile-panel-header h3,
.crm-panel-header h3,
.crm-table-toolbar h3{
    font-size: 14px;
}

.crm-profile-panel-header p,
.crm-panel-header p,
.crm-table-toolbar p{
    font-size: 11px;
}

.crm-data-table td{
    font-size: 12px;
}

.crm-data-table .crm-cell-primary{
    font-size: 13px;
}

.crm-data-table .crm-cell-secondary{
    font-size: 11px;
}

.crm-data-table th,
.crm-data-table td{
    padding-block: 11px;
}

.crm-metric-card{
    min-height: 68px;
    padding: 12px 14px;
}

@media (max-width: 980px) {
    .crm-form-section-header,
.crm-settings-section-header{
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .crm-form-section-description,
.crm-form-section-header > p,
.crm-settings-section-header > p{
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        text-align: left;
    }

    .crm-field-span-3,
.crm-field-span-4{
        grid-column: span 6 !important;
    }

    .crm-field-span-8{
        grid-column: span 12 !important;
    }
}

@media (max-width: 720px) {
    

    .crm-form-hero{
        grid-template-columns: auto minmax(0, 1fr);
        padding: 14px;
    }

    .crm-form-hero-icon{
        width: 42px;
        height: 42px;
    }

    .crm-form-section-header,
.crm-settings-section-header{
        padding: 11px 14px;
    }

    .crm-form-section-body,
.crm-settings-section-body{
        padding: 14px;
    }

    .crm-form-grid{
        gap: 12px;
    }

    .crm-form-grid > :where(.crm-field, .crm-form-fieldset),
.crm-field-span-3,
.crm-field-span-4,
.crm-field-span-6,
.crm-field-span-8,
.crm-field-span-12{
        grid-column: 1 / -1 !important;
    }

    .crm-choice-grid{
        grid-template-columns: 1fr;
    }

    

    

    
}

/* ==========================================================
   UI Foundation 0.5.3 - fluid operational canvas
   ========================================================== */

:root{
    --crm-control-height: 38px;
    --crm-content-padding: clamp(18px, 1.65vw, 28px);
    --crm-page-rail-max: 1680px;
    --crm-page-rail-compact: 960px;
    --crm-form-gap-x: 14px;
    --crm-form-gap-y: 12px;
    --crm-section-gap: 14px;
}


.crm-stack-sm{ gap: 8px; }
.crm-stack-md{ gap: 14px; }
.crm-stack-lg{ gap: 18px; }

.crm-button,
.crm-control,
.crm-checkbox-label,
.crm-data-table td,
.crm-data-table th{
    font-size: 12px;
}

.crm-field-help,
.crm-field-error,
.crm-checkbox-description,
.crm-form-section-description,
.crm-settings-section-header > p{
    font-size: 11px;
}


.crm-form-page,
.crm-form-page-fluid,
.crm-form-page-wide,
.crm-form-hero,
.crm-validation-summary{
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.crm-form-page-compact{
    width: 100%;
    max-width: var(--crm-page-rail-compact);
    margin-inline: auto;
}

.crm-form-hero{
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 70px;
    padding: 12px 14px;
    border-radius: 9px;
    box-shadow: 0 2px 10px rgba(28, 45, 72, .025);
}

.crm-form-hero-icon{
    width: 40px;
    height: 40px;
}

.crm-form-hero-icon .crm-icon{
    width: 22px;
    height: 22px;
}

.crm-form-hero-eyebrow{
    margin-bottom: 2px;
    font-size: 9px;
}

.crm-form-hero h2{
    font-size: clamp(20px, 1.65vw, 23px);
    line-height: 1.14;
}

.crm-form-hero-copy > p:last-child{
    max-width: 900px;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
}

.crm-form{
    gap: var(--crm-section-gap);
}

.crm-form-layout-sections{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: var(--crm-section-gap);
}


.crm-form-section-span-1{ grid-column: span 1 !important; }
.crm-form-section-span-2{ grid-column: span 2 !important; }
.crm-form-section-span-3{ grid-column: span 3 !important; }
.crm-form-section-span-4{ grid-column: span 4 !important; }
.crm-form-section-span-5{ grid-column: span 5 !important; }
.crm-form-section-span-6{ grid-column: span 6 !important; }
.crm-form-section-span-7{ grid-column: span 7 !important; }
.crm-form-section-span-8{ grid-column: span 8 !important; }
.crm-form-section-span-9{ grid-column: span 9 !important; }
.crm-form-section-span-10{ grid-column: span 10 !important; }
.crm-form-section-span-11{ grid-column: span 11 !important; }
.crm-form-section-span-12{ grid-column: 1 / -1 !important; }

.crm-form-section,
.crm-settings-section{
    min-width: 0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(28, 45, 72, .022);
}

.crm-form-section-header,
.crm-settings-section-header{
    grid-template-columns: minmax(160px, auto) minmax(220px, 520px) auto;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 9px 14px;
}

.crm-form-section-title h3,
.crm-form-section-header h3,
.crm-settings-section-header h3{
    font-size: 14px;
    line-height: 1.25;
}

.crm-form-section-description,
.crm-form-section-header > p,
.crm-settings-section-header > p{
    max-width: 520px;
    justify-self: end;
    color: #64748b;
    line-height: 1.35;
    text-align: right;
}

.crm-form-section-span-1 .crm-form-section-header,
.crm-form-section-span-2 .crm-form-section-header,
.crm-form-section-span-3 .crm-form-section-header,
.crm-form-section-span-4 .crm-form-section-header,
.crm-form-section-span-5 .crm-form-section-header{
    display: block;
}

.crm-form-section-span-1 .crm-form-section-description,
.crm-form-section-span-2 .crm-form-section-description,
.crm-form-section-span-3 .crm-form-section-description,
.crm-form-section-span-4 .crm-form-section-description,
.crm-form-section-span-5 .crm-form-section-description{
    max-width: none;
    margin-top: 3px;
    text-align: left;
}

.crm-form-section-body,
.crm-settings-section-body{
    padding: 13px 14px 14px;
}

.crm-form-grid{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: var(--crm-form-gap-y) var(--crm-form-gap-x);
}

.crm-form-grid-one > :where(.crm-field, .crm-form-fieldset){ grid-column: span 12; }
.crm-form-grid-two > :where(.crm-field, .crm-form-fieldset){ grid-column: span 6; }
.crm-form-grid-three > :where(.crm-field, .crm-form-fieldset){ grid-column: span 4; }
.crm-form-grid-twelve > :where(.crm-field, .crm-form-fieldset){ grid-column: span 12; }

.crm-field-span-1{ grid-column: span 1 !important; }
.crm-field-span-2{ grid-column: span 2 !important; }
.crm-field-span-3{ grid-column: span 3 !important; }
.crm-field-span-4{ grid-column: span 4 !important; }
.crm-field-span-5{ grid-column: span 5 !important; }
.crm-field-span-6{ grid-column: span 6 !important; }
.crm-field-span-7{ grid-column: span 7 !important; }
.crm-field-span-8{ grid-column: span 8 !important; }
.crm-field-span-9{ grid-column: span 9 !important; }
.crm-field-span-10{ grid-column: span 10 !important; }
.crm-field-span-11{ grid-column: span 11 !important; }
.crm-field-span-12,
.crm-field-span-full{ grid-column: 1 / -1 !important; }

.crm-field,
.crm-form-fieldset{
    min-width: 0;
    align-content: start;
}

.crm-field{
    display: grid;
    gap: 4px;
}

.crm-field > label,
.crm-form-fieldset > legend{
    min-height: 15px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.crm-field-control,
.crm-form-fieldset-body{
    min-width: 0;
}

.crm-control{
    min-height: var(--crm-control-height);
    padding-inline: 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.3;
}

textarea.crm-control{
    min-height: 88px;
    padding-block: 8px;
}

.crm-field-help,
.crm-field-error,
.crm-form-fieldset-description{
    margin: 0;
    line-height: 1.3;
}

.crm-form-fieldset{
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
}

.crm-form-fieldset-description{
    color: var(--crm-muted);
}

.crm-form-fieldset .crm-choice-grid,
.crm-choice-grid{
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px 10px;
}

.crm-choice-grid .crm-checkbox{
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 7px;
}

.crm-checkbox{
    gap: 7px;
}

.crm-checkbox input{
    width: 15px;
    height: 15px;
}


.crm-record-identity-heading h1{
    font-size: clamp(20px, 1.7vw, 23px);
}

.crm-panel-header h3,
.crm-profile-panel-header h3,
.crm-table-toolbar h3{
    font-size: 13px;
}

.crm-data-table th,
.crm-data-table td{
    padding-block: 9px;
}

.crm-data-table td,
.crm-data-table th,
.crm-data-table .crm-cell-primary{
    font-size: 12px;
}

.crm-data-table .crm-cell-secondary{
    font-size: 10px;
}

.crm-metric-card{
    min-height: 62px;
    padding: 10px 12px;
}

@media (max-width: 1180px) {
    .crm-form-section-span-1,
.crm-form-section-span-2,
.crm-form-section-span-3,
.crm-form-section-span-4,
.crm-form-section-span-5,
.crm-form-section-span-6,
.crm-form-section-span-7,
.crm-form-section-span-8,
.crm-form-section-span-9,
.crm-form-section-span-10,
.crm-form-section-span-11{
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 820px) {
    :root{
        --crm-content-padding: 16px;
    }

    .crm-form-section-header,
.crm-settings-section-header{
        display: block;
    }

    .crm-form-section-description,
.crm-form-section-header > p,
.crm-settings-section-header > p{
        max-width: none;
        margin-top: 3px;
        justify-self: start;
        text-align: left;
    }

    .crm-field-span-1,
.crm-field-span-2,
.crm-field-span-3,
.crm-field-span-4,
.crm-field-span-5,
.crm-field-span-6,
.crm-field-span-7,
.crm-field-span-8,
.crm-field-span-9,
.crm-field-span-10,
.crm-field-span-11{
        grid-column: span 6 !important;
    }
}

@media (max-width: 620px) {
    :root{
        --crm-content-padding: 12px;
    }

    .crm-form-hero{
        grid-template-columns: auto minmax(0, 1fr);
        min-height: 64px;
        padding: 11px 12px;
    }

    .crm-form-hero-actions{
        grid-column: 1 / -1;
    }

    .crm-field-span-1,
.crm-field-span-2,
.crm-field-span-3,
.crm-field-span-4,
.crm-field-span-5,
.crm-field-span-6,
.crm-field-span-7,
.crm-field-span-8,
.crm-field-span-9,
.crm-field-span-10,
.crm-field-span-11,
.crm-field-span-12{
        grid-column: 1 / -1 !important;
    }

    

    
}

/* ================================================================
   UI Foundation 0.7.0 - operational lists, persistent preferences
   and safe system operations
   ================================================================ */

:root{
    --crm-list-gap: 12px;
    --crm-list-panel-padding: 14px;
    --crm-list-aside-width: 320px;
    --crm-control-height: 36px;
}

.crm-list-page{
    display: grid;
    gap: var(--crm-list-gap);
    width: 100%;
    min-width: 0;
}


.crm-filter-bar{
    padding: 12px 14px;
}

.crm-filter-bar-header{
    align-items: center;
    margin-bottom: 10px;
}

.crm-filter-bar-header h3,
.crm-table-toolbar h3{
    font-size: 13px;
}

.crm-filter-bar-header p,
.crm-table-toolbar p{
    font-size: 11px;
}


.crm-preference-picker{
    position: relative;
}

.crm-preference-picker > summary{
    list-style: none;
    cursor: pointer;
}

.crm-preference-picker > summary::-webkit-details-marker{
    display: none;
}

.crm-preference-picker-panel{
    position: absolute;
    z-index: 72;
    top: calc(100% + 8px);
    right: 0;
    width: min(390px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 140px));
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--crm-border-strong);
    border-radius: 12px;
    background: var(--crm-surface);
    box-shadow: 0 20px 46px rgba(20, 35, 58, 0.16);
}

.crm-preference-picker-panel > header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-preference-picker-panel > header strong{
    display: block;
    font-size: 13px;
}

.crm-preference-picker-panel > header p{
    margin: 3px 0 0;
    color: var(--crm-muted);
    font-size: 11px;
    line-height: 1.4;
}

.crm-link-button{
    padding: 0;
    border: 0;
    color: var(--crm-primary);
    background: transparent;
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.crm-preference-picker-options{
    display: grid;
    gap: 5px;
    padding-top: 9px;
}

.crm-preference-option{
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

.crm-preference-option:hover,
.crm-preference-option:focus-within{
    border-color: var(--crm-border);
    background: var(--crm-surface-soft);
}

.crm-preference-option input{
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--crm-primary);
}

.crm-preference-option span:not(.crm-status){
    display: grid;
    min-width: 0;
}

.crm-preference-option strong{
    color: var(--crm-text);
    font-size: 12px;
    font-weight: 650;
}

.crm-preference-option small{
    color: var(--crm-muted);
    font-size: 10.5px;
}

.crm-data-panel{
    overflow: visible;
}


.crm-data-table-compact th,
.crm-data-table-compact td{
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 11.5px;
}

.crm-data-table-comfortable th,
.crm-data-table-comfortable td{
    padding-top: 13px;
    padding-bottom: 13px;
}


.crm-summary-card{
    overflow: hidden;
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    background: var(--crm-surface);
    box-shadow: 0 5px 18px rgba(28, 45, 72, 0.045);
}

.crm-summary-card > header{
    padding: 12px 13px 10px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-summary-card h3{
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.crm-summary-card header p{
    margin: 3px 0 0;
    color: var(--crm-muted);
    font-size: 10.5px;
    line-height: 1.4;
}

.crm-summary-card-body{
    padding: 12px 13px;
    color: var(--crm-muted);
    font-size: 11.5px;
}

.crm-summary-card-body p{
    margin: 0;
    line-height: 1.45;
}

.crm-operation-nav-link{
    white-space: nowrap;
}


/* ================================================================
   UI Foundation 0.7.0 - dynamic record types and aligned workspaces
   ================================================================ */

:root{
    --crm-list-gap: 10px;
    --crm-list-panel-padding: 12px;
    --crm-form-workspace-aside: 300px;
}

.crm-list-stack,
.crm-record-type-list-stack{
    display: grid;
    gap: 10px;
    width: 100%;
    min-width: 0;
}


.crm-filter-bar{
    padding: 10px 12px 11px;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    background: var(--crm-surface);
}

.crm-filter-bar-header{
    min-height: 34px;
    margin-bottom: 8px;
}

.crm-filter-bar-header p{
    margin-top: 1px;
}


.crm-data-panel{
    border-radius: 10px;
}

.crm-table-toolbar{
    min-height: 58px;
    padding: 10px 12px;
}

.crm-table-toolbar-actions{
    min-width: 0;
    gap: 7px;
}

.crm-table-toolbar-actions > .crm-control,
.crm-table-toolbar-actions > select.crm-control{
    width: auto;
    min-width: 132px;
    max-width: 180px;
}

.crm-table-count{
    margin-right: 2px;
}

.crm-data-table th,
.crm-data-table td{
    padding-inline: 12px;
}

.crm-data-table .crm-cell-technical,
.crm-technical-identifier{
    color: var(--crm-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
}


.crm-form-section,
.crm-settings-section,
.crm-summary-card{
    border-radius: 10px;
}

.crm-form-section-header,
.crm-settings-section-header{
    min-height: 44px;
    padding: 9px 12px;
}

.crm-form-section-body,
.crm-settings-section-body{
    padding: 12px;
}

.crm-form-section-primary{
    border-color: color-mix(in srgb, var(--crm-primary) 24%, var(--crm-border));
}

.crm-form-section-primary .crm-form-section-header{
    background: color-mix(in srgb, var(--crm-primary-soft) 45%, var(--crm-surface));
}


.crm-summary-identity{
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.crm-summary-identity-mark{
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
    font-size: 14px;
    font-weight: 760;
}

.crm-summary-identity strong,
.crm-summary-identity small{
    display: block;
}

.crm-summary-identity strong{
    color: var(--crm-text);
    font-size: 13px;
}

.crm-summary-identity small{
    margin-top: 2px;
    color: var(--crm-muted);
    font-size: 10.5px;
}

.crm-record-type-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 10px;
}

.crm-record-type-card{
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    background: var(--crm-surface);
}

.crm-record-type-card-header{
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.crm-record-type-card-icon{
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
}

.crm-record-type-card h3{
    margin: 0;
    color: var(--crm-text);
    font-size: 14px;
}

.crm-record-type-card p{
    margin: 2px 0 0;
    color: var(--crm-muted);
    font-size: 11px;
    line-height: 1.4;
}

.crm-record-type-card-actions{
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding-top: 2px;
    border-top: 1px solid var(--crm-border);
}

.crm-field-builder-list{
    display: grid;
    gap: 7px;
}

.crm-field-builder-row{
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) minmax(110px, .7fr) repeat(4, auto) auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    background: var(--crm-surface);
}

.crm-field-builder-row small{
    color: var(--crm-muted);
}


@media (max-width: 980px) {
    

    

    .crm-field-builder-row{
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 760px) {
    

    .crm-table-toolbar{
        align-items: stretch;
        flex-direction: column;
    }

    .crm-table-toolbar-actions{
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .crm-table-toolbar-actions > .crm-control,
.crm-table-toolbar-actions > select.crm-control{
        width: 100%;
        max-width: none;
    }
}

/* UI Foundation 0.8.0 — Import Foundation */
.crm-import-wizard{
    margin: 0 0 18px;
}

.crm-import-wizard ol{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-import-wizard li{
    min-width: 0;
}

.crm-import-wizard a,
.crm-import-wizard span{
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    background: var(--crm-surface);
    color: var(--crm-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.crm-import-wizard .is-current a,
.crm-import-wizard .is-current span{
    border-color: var(--crm-primary);
    color: var(--crm-primary);
    box-shadow: inset 0 0 0 1px var(--crm-primary);
}

.crm-import-wizard .is-complete a,
.crm-import-wizard .is-complete span{
    color: var(--crm-success);
}

.crm-source-samples{
    display: grid;
    gap: 12px;
}

.crm-source-sample-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crm-source-sample-tabs a,
.crm-source-sample-tabs span{
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--crm-border);
    border-radius: 999px;
    background: var(--crm-surface);
    color: var(--crm-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.crm-source-sample-tabs .is-active{
    border-color: var(--crm-primary);
    background: color-mix(in srgb, var(--crm-primary) 9%, white);
    color: var(--crm-primary);
}

.crm-source-sample-body{
    min-width: 0;
}

.crm-import-mapping-table th,
.crm-import-mapping-table td{
    vertical-align: top;
}

.crm-import-mapping-table .crm-control{
    min-width: 130px;
}

.crm-import-mapping-example{
    display: block;
    max-width: 280px;
    overflow: hidden;
    color: var(--crm-text-muted);
    font-size: 11px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-import-progress{
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--crm-border);
    border-radius: 14px;
    background: var(--crm-surface);
}

.crm-import-progress header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.crm-import-progress header div{
    display: grid;
    gap: 2px;
}

.crm-import-progress-kicker{
    color: var(--crm-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.crm-import-progress-track{
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--crm-surface-muted);
}

.crm-import-progress-track span{
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--crm-primary);
}

.crm-import-progress dl{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.crm-import-progress dl div{
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 10px;
    border-radius: 10px;
    background: var(--crm-surface-muted);
}

.crm-import-progress dt{
    color: var(--crm-text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.crm-import-progress dd{
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.crm-import-field-list{
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-import-field-list li{
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr);
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--crm-border-subtle);
}

.crm-import-field-list code{
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .crm-import-progress dl{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-import-field-list li{
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* CRM admin navigation 0.11.1 */


/* CRM administration directory 0.11.2 */

.crm-admin-search{ display:flex; gap:1.25rem; align-items:center; justify-content:space-between; padding:1rem 1.1rem; background:var(--crm-surface, #fff); border:1px solid var(--crm-border, #dce3ef); border-radius:var(--crm-radius-lg, 12px); }
.crm-admin-search h2{ margin:0; font-size:1rem; }
.crm-admin-search p{ margin:.2rem 0 0; color:var(--crm-text-muted, #64748b); }
.crm-admin-search-field{ min-width:min(28rem, 48%); display:flex; align-items:center; gap:.65rem; border:1px solid var(--crm-border, #cbd5e1); border-radius:.65rem; padding:.65rem .8rem; background:#fff; }
.crm-admin-search-field:focus-within{ border-color:var(--crm-primary, #2563eb); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.crm-admin-search-field input{ border:0; outline:0; width:100%; min-width:0; background:transparent; }
.crm-admin-directory{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.crm-admin-directory-group{ background:#fff; border:1px solid var(--crm-border, #dce3ef); border-radius:var(--crm-radius-lg, 12px); overflow:hidden; scroll-margin-top:5rem; }
.crm-admin-directory-group > header{ display:flex; gap:.8rem; align-items:flex-start; padding:1rem 1rem .8rem; border-bottom:1px solid var(--crm-border, #e2e8f0); }
.crm-admin-directory-group h2{ margin:0; font-size:1rem; }
.crm-admin-directory-group p{ margin:.2rem 0 0; color:var(--crm-text-muted, #64748b); font-size:.875rem; }
.crm-admin-directory-icon{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:.65rem; color:var(--crm-primary, #2563eb); background:rgba(37,99,235,.08); flex:none; }
.crm-admin-directory-items{ padding:.45rem; }
.crm-admin-directory-items a{ display:grid; grid-template-columns:2rem 1fr auto; align-items:center; gap:.6rem; padding:.7rem .65rem; border-radius:.55rem; text-decoration:none; color:inherit; }
.crm-admin-directory-items a:hover,
.crm-admin-directory-items a:focus-visible{ background:rgba(37,99,235,.07); color:var(--crm-primary, #1d4ed8); }
.crm-admin-directory-items a > span{ display:grid; place-items:center; }
.crm-admin-directory-empty{ padding:.75rem; }
@media (max-width: 900px) { .crm-admin-directory{ grid-template-columns:1fr; } .crm-admin-search{ align-items:stretch; flex-direction:column; } .crm-admin-search-field{ min-width:0; width:100%; } }


/* Administração 0.11.3 — diretório hierárquico e menus contextuais */
.crm-admin-directory-group header h2 a{
    color: inherit;
    text-decoration: none;
}
.crm-admin-directory-group header h2 a:hover,
.crm-admin-directory-group header h2 a:focus-visible{
    color: var(--crm-primary, #2457e6);
    text-decoration: underline;
}
.crm-admin-directory-item-copy{
    display: grid;
    min-width: 0;
    gap: .15rem;
}
.crm-admin-directory-item-copy small{
    color: var(--crm-text-muted, #64748b);
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.35;
}


/* Administração 0.11.4 — alinhamento e ritmo visual */
.crm-admin-directory-items a{
    text-align: left;
}
.crm-admin-directory-items a > span:first-child{
    display: grid;
    place-items: center;
}
.crm-admin-directory-items .crm-admin-directory-item-copy{
    display: grid;
    justify-items: start;
    align-items: start;
    text-align: left;
}
.crm-admin-directory-items .crm-admin-directory-item-copy strong,
.crm-admin-directory-items .crm-admin-directory-item-copy small{
    width: 100%;
    text-align: left;
}
.crm-admin-directory-group > header > div{
    min-width: 0;
    text-align: left;
}


/* Selection and bulk actions — UiFoundation 0.11.8 */
.crm-selection-checkbox{
    inline-size: 14px;
    block-size: 14px;
    min-inline-size: 14px;
    flex: 0 0 14px;
    margin: 0;
    accent-color: var(--crm-primary, #2457d6);
    cursor: pointer;
    opacity: .62;
    transition: opacity .15s ease;
}

.crm-selection-checkbox:hover,
.crm-selection-checkbox:focus-visible,
.crm-selection-checkbox:checked{
    opacity: 1;
}

.crm-table-selection-cell{
    inline-size: 2.75rem;
    text-align: center;
}

.crm-bulk-actions{
    position: sticky;
    bottom: 1rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .75rem 0;
    padding: .75rem 1rem;
    border: 1px solid var(--crm-border, #d9dee8);
    border-radius: .75rem;
    background: var(--crm-surface, #fff);
    box-shadow: 0 .5rem 1.5rem rgb(15 23 42 / .14);
}

.crm-bulk-actions[hidden]{
    display: none;
}

.crm-bulk-actions-summary,
.crm-bulk-actions-controls{
    display: flex;
    align-items: center;
    gap: .75rem;
}

.crm-bulk-actions-summary span{
    color: var(--crm-muted, #667085);
    font-size: .875rem;
}

@media (max-width: 720px) {
    .crm-bulk-actions{
        align-items: stretch;
        flex-direction: column;
    }

    .crm-bulk-actions-controls{
        flex-wrap: wrap;
    }
}


/* Table selection + overlay row actions — UiFoundation 0.12.1 */
.crm-selection-header{
    min-width: 10rem;
}

.crm-selection-header-content,
.crm-selection-primary-cell{
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
}

.crm-selection-primary-cell > :last-child{
    min-width: 0;
}

.crm-data-table tbody tr{
    position: relative;
}

.crm-actions-anchor-cell{
    position: relative;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
}

.crm-actions-overlay{
    position: absolute;
    inset-inline-end: .5rem;
    top: 50%;
    z-index: 8;
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.crm-actions-overlay .crm-row-actions{
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: max-content;
    padding: .3rem;
    border: 1px solid var(--crm-border, #d9dee8);
    border-radius: .625rem;
    background: var(--crm-surface, #fff);
    box-shadow:
        0 0 0 .4rem var(--crm-surface, #fff),
        0 .4rem 1.1rem rgb(15 23 42 / .16);
    white-space: nowrap;
    pointer-events: auto;
}

.crm-data-table tbody tr:hover .crm-actions-overlay,
.crm-data-table tbody tr:focus-within .crm-actions-overlay{
    visibility: visible;
    opacity: 1;
}

.crm-actions-overlay .crm-row-actions,
.crm-actions-overlay .crm-row-actions form{
    position: relative;
    z-index: 1;
}

.crm-actions-overlay .crm-icon-button{
    flex: 0 0 auto;
}

@media (hover: none), (pointer: coarse) {
    .crm-actions-anchor-cell{
        width: 1% !important;
        min-width: max-content !important;
        max-width: none !important;
        padding: .5rem .75rem !important;
    }

    .crm-actions-overlay{
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .crm-actions-overlay .crm-row-actions{
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
}


/* Unified selectable table contract — UiFoundation 0.12.2 */
.crm-selection-header-content,
.crm-selection-primary-cell{
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
}

.crm-selection-primary-content{
    min-width: 0;
}

.crm-record-primary-link{
    color: inherit;
    text-decoration: none;
    text-underline-offset: 2px;
}

.crm-record-primary-link:visited{
    color: inherit;
}

.crm-record-primary-link strong{
    color: inherit;
    font: inherit;
    font-weight: 600;
}

.crm-record-primary-link:hover{
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(
        in srgb,
        var(--crm-primary, #2457d6) 35%,
        transparent
    );
}

.crm-table tbody tr:hover .crm-record-primary-link{
    color: inherit;
}

.crm-record-primary-link:focus-visible{
    outline: 2px solid color-mix(
        in srgb,
        var(--crm-primary, #2457d6) 28%,
        transparent
    );
    outline-offset: 2px;
    border-radius: 3px;
}

.crm-actions-overlay .crm-row-actions{
    background: var(--crm-surface, #fff) !important;
    isolation: isolate;
}

.crm-actions-overlay::before{
    content: "";
    position: absolute;
    inset: -.5rem;
    z-index: -1;
    border-radius: .75rem;
    background: var(--crm-surface, #fff);
}


/* UI Foundation: campos relacionais com criação contextual reutilizável */

/* CRM UI UNIFIED CONTRACTS 0.14.0 */
/* UI FOUNDATION 0.14.0 */
.crm-page-header,
.crm-list-header,
.crm-record-form-heading {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:16px 24px;
}
.crm-page-header-actions,.crm-list-header-actions,.crm-record-form-heading-actions,.crm-form-actions-inner {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px;
}
.crm-form-section-header { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,42%) auto; gap:12px 20px; align-items:start; }
.crm-form-section-description { margin:0; max-width:64ch; }
.crm-form-section-actions { justify-self:end; }
.crm-form-actions { border-top:1px solid var(--crm-border); background:var(--crm-surface,#fff); }
.crm-form-actions.is-sticky { position:sticky; bottom:0; z-index:60; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
.crm-form[data-crm-submitting="true"] [type="submit"] { pointer-events:none; opacity:.68; }
.crm-form[data-crm-submitting="true"] [type="submit"]::after { content:""; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:999px; animation:crm-spin .7s linear infinite; }
@keyframes crm-spin { to { transform:rotate(360deg); } }
.crm-checkbox { display:flex; align-items:flex-start; gap:10px; min-width:0; cursor:pointer; }
.crm-checkbox-control { position:relative; flex:0 0 20px; width:20px; height:20px; margin-top:1px; }
.crm-checkbox-control input { position:absolute; inset:0; width:20px; height:20px; margin:0; opacity:0; cursor:pointer; }
.crm-checkbox-indicator { display:grid; place-items:center; width:20px; height:20px; border:1.5px solid var(--crm-border-strong,#94a3b8); border-radius:6px; background:#fff; }
.crm-checkbox-control input:checked + .crm-checkbox-indicator { border-color:var(--crm-primary,#2563eb); background:var(--crm-primary,#2563eb); }
.crm-checkbox-control input:checked + .crm-checkbox-indicator::after { content:""; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); }
.crm-checkbox-control input:focus-visible + .crm-checkbox-indicator { outline:3px solid color-mix(in srgb,var(--crm-primary,#2563eb) 24%,transparent); outline-offset:2px; }
.crm-table-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px; align-items:start; }
.crm-table-toolbar-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; }
.crm-table-shell { max-width:100%; }
.crm-file-input { max-width:100%; min-width:0; }
.crm-installer-rules { display:flex; flex-wrap:wrap; gap:8px; }
.crm-installer-rules > span { max-width:100%; overflow-wrap:anywhere; }
/* CRM UI UNIFIED CONTRACTS 0.14.0 END */

/* CRM UI HEALTH MARKERS 0.14.0 — AUTO */
/* CRM UI UNIFIED CONTRACTS 0.14.0 */
/* UI FOUNDATION 0.14.0 */
/* UI FOUNDATION MOBILE LAYOUT 0.15.3 */
/* CRM UI HEALTH MARKERS 0.14.0 — AUTO END */

/* =========================================================
   UI FOUNDATION 0.15.1 — RECORD DETAIL TYPOGRAPHY HOTFIX

   Escala confortável exclusiva do UiDetailPage / Record Profile.
   Não altera tabelas, formulários ou painéis fora de .crm-record-page.
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.crm-record-page .crm-record-subtitle {
    font-size: 14px;
    line-height: 1.45;
}

.crm-record-page .crm-record-identifier {
    font-size: 12px;
    line-height: 1.4;
}

.crm-record-page .crm-contact-inline {
    font-size: 13px;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   MÉTRICAS
   --------------------------------------------------------- */

.crm-record-page .crm-metric-copy {
    gap: 2px;
}

.crm-record-page .crm-metric-copy small {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
}

.crm-record-page .crm-metric-copy strong {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.crm-record-page .crm-metric-copy > span {
    font-size: 11px;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   ABAS
   --------------------------------------------------------- */

.crm-record-page .crm-record-tab {
    min-height: 46px;
    font-size: 13px;
    font-weight: 650;
}

.crm-record-page .crm-record-tab-count {
    min-width: 21px;
    min-height: 19px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 17px;
}


/* ---------------------------------------------------------
   PAINÉIS
   --------------------------------------------------------- */

.crm-record-page .crm-profile-panel-header {
    min-height: 54px;
    padding-top: 15px;
    padding-bottom: 12px;
}

.crm-record-page .crm-profile-panel h2 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.crm-record-page .crm-profile-panel-header p {
    font-size: 12px;
    line-height: 1.45;
}

.crm-record-page .crm-profile-panel-actions .crm-button {
    min-height: 34px;
    padding-inline: 11px;
    font-size: 12px;
}


/* ---------------------------------------------------------
   KEY / VALUE
   --------------------------------------------------------- */

.crm-record-page .crm-key-value-row {
    min-height: 48px;
    gap: 14px;
}

.crm-record-page .crm-key-value-row dt {
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.crm-record-page .crm-key-value-row dd {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.crm-record-page .crm-key-value-row dd a {
    font-weight: 500;
}


/* ---------------------------------------------------------
   ATIVIDADE / RELACIONADOS
   --------------------------------------------------------- */

.crm-record-page .crm-activity-item {
    min-height: 56px;
    gap: 10px;
    padding-block: 9px;
}

.crm-record-page .crm-activity-copy strong,
.crm-record-page .crm-linked-record-copy strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.crm-record-page .crm-activity-copy small,
.crm-record-page .crm-linked-record-copy small {
    font-size: 11px;
    line-height: 1.4;
}

.crm-record-page .crm-activity-item time {
    font-size: 11px;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   LISTAS TÉCNICAS DO PERFIL
   --------------------------------------------------------- */

.crm-record-page .crm-identifier-row {
    min-height: 44px;
}

.crm-record-page .crm-identifier-label {
    font-size: 11px;
    line-height: 1.4;
}

.crm-record-page .crm-identifier-value {
    font-size: 12px;
    line-height: 1.45;
}

.crm-record-page .crm-linked-record-label {
    font-size: 11px;
    line-height: 1.4;
}

.crm-record-page .crm-linked-record-meta {
    font-size: 11px;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   MOBILE
   Mantém legibilidade; não volta à microtipografia.
   --------------------------------------------------------- */

@media (max-width: 680px) {
    .crm-record-page .crm-contact-inline {
        font-size: 13px;
    }

    .crm-record-page .crm-key-value-row dt {
        font-size: 12px;
    }

    .crm-record-page .crm-key-value-row dd {
        font-size: 13px;
    }

    .crm-record-page .crm-profile-panel h2 {
        font-size: 15px;
    }

    .crm-record-page .crm-record-tab {
        font-size: 13px;
    }
}

/* UI FOUNDATION 0.15.1 — RECORD DETAIL TYPOGRAPHY HOTFIX END */


/* PRIMARY RECORD LINK CONTRACT — SYSTEM WIDE R4 */

.crm-data-table a.crm-record-primary-link,
.crm-data-table a.crm-record-primary-link:visited{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    color: #252a31;
    font-weight: 400;
    text-decoration: none;
}

.crm-data-table a.crm-record-primary-link strong{
    color: #252a31;
    font-weight: 650;
}

.crm-data-table a.crm-record-primary-link > div,
.crm-data-table a.crm-record-primary-link > small{
    color: var(--crm-text-muted, #667085);
    font-weight: 400;
}

.crm-data-table a.crm-record-primary-link:hover,
.crm-data-table a.crm-record-primary-link:hover strong{
    color: #111418;
    text-decoration: none;
}

.crm-data-table a.crm-record-primary-link:hover strong{
    text-decoration: underline;
    text-decoration-color: #747982;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.crm-data-table a.crm-record-primary-link:focus-visible{
    outline: 2px solid rgba(37, 42, 49, .28);
    outline-offset: 3px;
    border-radius: 3px;
}


/* UI FOUNDATION 0.15.2 — SEMANTIC VALUE PRESENTATION */
.crm-dynamic-value{
    min-width: 0;
    color: inherit;
    line-height: inherit;
}

.crm-dynamic-value.is-empty{
    color: var(--crm-muted, #7a8494);
    font-weight: 400;
}

.crm-dynamic-value-link{
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 5px;
    color: #354052;
    font-weight: 500;
    text-decoration: none;
}

.crm-dynamic-value-link > span{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-dynamic-value-link:hover{
    color: #111827;
    text-decoration: underline;
    text-decoration-color: #9aa2ad;
    text-underline-offset: 2px;
}

.crm-dynamic-value-list{
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.crm-dynamic-value-technical{
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 6px;
}

.crm-dynamic-value-technical code{
    max-width: 100%;
    overflow: hidden;
    color: #3e495b;
    font-size: .92em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-dynamic-value-image-link{
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #e3e7ed;
    border-radius: 10px;
    background: #fff;
}

.crm-dynamic-value-image{
    display: block;
    width: 58px;
    height: 58px;
    object-fit: cover;
}

.crm-data-table .crm-dynamic-value-list{
    flex-wrap: nowrap;
    max-width: 320px;
    overflow: hidden;
}

/* UI FOUNDATION 0.15.2 — SEMANTIC VALUE PRESENTATION END */


/* UI FOUNDATION 0.15.3 — RECORD DETAIL DATA GRID + AVATAR PREVIEW + GEO VALUES */

.crm-record-page .crm-key-value-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
}

.crm-record-page .crm-key-value-row{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 68px;
    gap: 6px;
    padding: 12px 0 13px;
}

.crm-record-page .crm-key-value-row:nth-child(-n + 2){
    border-top: 0;
}

.crm-record-page .crm-key-value-row dt{
    width: 100%;
    gap: 6px;
    margin: 0;
    color: #667085;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
}

.crm-record-page .crm-key-value-row dd{
    width: 100%;
    margin: 0;
    color: #252a31;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.crm-dynamic-value-coordinate{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}

.crm-avatar-preview-trigger{
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: zoom-in;
}

.crm-avatar-preview-trigger:focus-visible{
    outline: 2px solid color-mix(in srgb, var(--crm-primary) 38%, transparent);
    outline-offset: 3px;
}

.crm-avatar-preview-indicator{
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(15, 23, 42, .52);
    border-radius: inherit;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
}

.crm-avatar-preview-trigger:hover .crm-avatar-preview-indicator,
.crm-avatar-preview-trigger:focus-visible .crm-avatar-preview-indicator{
    opacity: 1;
}

.crm-image-preview-modal .crm-modal-body{
    padding: 0;
    background: #0f172a;
}

.crm-image-preview-figure{
    display: grid;
    place-items: center;
    min-height: 260px;
    margin: 0;
    padding: 18px;
}

.crm-image-preview-figure img{
    display: block;
    max-width: 100%;
    max-height: min(76vh, 920px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* UI FOUNDATION 0.15.3 — RECORD DETAIL DATA GRID + AVATAR PREVIEW + GEO VALUES END */

/* RECORD DETAIL TYPOGRAPHY CONTRACT R2 */

/*
 * Visualização de registros:
 * - rótulo acima;
 * - valor abaixo;
 * - duas colunas no desktop;
 * - uma coluna no mobile;
 * - hierarquia tipográfica mais legível.
 */

.crm-record-page .crm-key-value-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1.5rem;
    row-gap:0;
}

.crm-record-page .crm-key-value-row{
    display:block;
    min-width:0;
    padding:.75rem 0 .8rem;
}

.crm-record-page .crm-key-value-row-label{
    display:flex;
    align-items:center;
    gap:.35rem;
    margin:0 0 .3rem;
    color:var(--crm-text-muted,#667085);
    font-size:.78rem;
    line-height:1.3;
    font-weight:500;
}

.crm-record-page .crm-key-value-row-label svg,
.crm-record-page .crm-key-value-row-label .crm-icon{
    opacity:.72;
}

.crm-record-page .crm-key-value-row-value{
    min-width:0;
    color:var(--crm-text,#252a31);
    font-size:.92rem;
    line-height:1.48;
    font-weight:400;
    overflow-wrap:anywhere;
}

.crm-record-page .crm-key-value-row-value strong{
    font-weight:500;
}

.crm-record-page .crm-key-value-row-value a{
    color:inherit;
    font-weight:400;
    text-decoration:none;
}

.crm-record-page .crm-key-value-row-value a:hover{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:2px;
}

.crm-record-page .crm-key-value-row-value .crm-status,
.crm-record-page .crm-key-value-row-value .crm-badge{
    font-size:.76rem;
    font-weight:600;
}

@media (max-width: 767.98px){
    .crm-record-page .crm-key-value-list{
        grid-template-columns:minmax(0,1fr);
    }
}


/* UI FOUNDATION 0.15.4 — UNIFIED FORM EXPERIENCE */
/* UI FOUNDATION 0.15.4 */
/* UI FOUNDATION MOBILE LAYOUT 0.15.4 */

/*
 * Unified Form Experience
 * Pessoas é a referência visual do produto; este contrato promove os mesmos
 * princípios para todos os formulários que usam a UI Foundation.
 */
:root{
    --crm-form-control-height: 42px;
    --crm-form-control-radius: 8px;
    --crm-form-control-font-size: 14px;
    --crm-form-label-font-size: 13px;
    --crm-form-help-font-size: 12px;
    --crm-form-section-title-size: 15px;
    --crm-form-section-description-size: 12px;
}

/* Form page / sections */
.crm-form-workspace{
    align-items:start;
}

.crm-form-section{
    border:1px solid var(--crm-border,#dfe5ee);
    border-radius:10px;
    background:#fff;
    overflow:hidden;
}

.crm-form-section-primary{
    border-color:color-mix(in srgb,var(--crm-primary,#2457d6) 26%,var(--crm-border,#dfe5ee));
    box-shadow:0 0 0 1px color-mix(in srgb,var(--crm-primary,#2457d6) 5%,transparent);
}

.crm-form-section-header{
    min-height:50px;
    padding:12px 14px;
    gap:12px;
    border-bottom:1px solid var(--crm-border,#e6eaf0);
    background:color-mix(in srgb,#f8fafc 88%,transparent);
}

.crm-form-section-title h3,
.crm-form-section-header h3{
    margin:0;
    font-size:var(--crm-form-section-title-size);
    line-height:1.3;
    font-weight:600;
    color:var(--crm-text,#1f2937);
}

.crm-form-section-description,
.crm-form-section-header > p{
    margin:0;
    font-size:var(--crm-form-section-description-size);
    line-height:1.4;
    font-weight:400;
    color:var(--crm-text-muted,#667085);
}

.crm-form-section-body{
    padding:14px;
}

/* Fields */
.crm-field{
    min-width:0;
}

.crm-field > label{
    display:flex;
    align-items:center;
    gap:4px;
    margin:0 0 6px;
    color:var(--crm-text,#273244);
    font-size:var(--crm-form-label-font-size);
    line-height:1.35;
    font-weight:600;
}

.crm-field > label > span[aria-hidden="true"]{
    color:var(--crm-danger,#dc3545);
}

.crm-field-help,
.crm-field-error{
    margin:6px 0 0;
    font-size:var(--crm-form-help-font-size);
    line-height:1.4;
    font-weight:400;
}

.crm-field-help{ color:var(--crm-text-muted,#7b8494); }
.crm-field-error{ color:var(--crm-danger,#dc3545); }

/* Controls — same metrics everywhere */
.crm-form-section .crm-control,
.crm-form-workspace .crm-control{
    min-height:var(--crm-form-control-height);
    height:var(--crm-form-control-height);
    border-radius:var(--crm-form-control-radius);
    border-color:var(--crm-border-strong,#d5dce7);
    background:#fff;
    color:var(--crm-text,#252a31);
    font-size:var(--crm-form-control-font-size);
    line-height:1.35;
    font-weight:400;
    transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}

.crm-form-section textarea.crm-control,
.crm-form-workspace textarea.crm-control{
    height:auto;
    min-height:92px;
    padding-top:10px;
    padding-bottom:10px;
    resize:vertical;
}

.crm-form-section .crm-control:focus,
.crm-form-workspace .crm-control:focus{
    border-color:color-mix(in srgb,var(--crm-primary,#2457d6) 58%,#fff);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--crm-primary,#2457d6) 12%,transparent);
    outline:none;
}

.crm-form-section .crm-control::placeholder,
.crm-form-workspace .crm-control::placeholder{
    color:#98a2b3;
    font-weight:400;
}

/* Auto semantic icons for legacy forms */
.crm-field.is-crm-auto-semantic .crm-field-control{
    position:relative;
}

.crm-field.is-crm-auto-semantic .crm-auto-semantic-icon{
    position:absolute;
    z-index:3;
    inset-inline-start:12px;
    top:calc(var(--crm-form-control-height) / 2);
    width:17px;
    height:17px;
    display:grid;
    place-items:center;
    color:#7a8699;
    pointer-events:none;
    transform:translateY(-50%);
}

.crm-field.is-crm-auto-semantic .crm-auto-semantic-icon svg{
    width:17px;
    height:17px;
    display:block;
    stroke:currentColor;
}

.crm-field.is-crm-auto-semantic .crm-field-control > .crm-control,
.crm-field.is-crm-auto-semantic .crm-field-control > input.crm-input{
    padding-inline-start:38px;
}

/* Components already owning an icon/compound control must remain canonical. */
.crm-field:has(.crm-input-group),
.crm-field:has(.crm-combobox),
.crm-field:has(.crm-date-input),
.crm-field:has(.crm-money-input),
.crm-field:has(.crm-number-input),
.crm-field:has(.crm-masked-input){
    --crm-auto-semantic-disabled:1;
}

/* Standalone legacy boolean -> modern switch appearance */
.crm-checkbox.is-crm-auto-switch{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:var(--crm-form-control-height);
    cursor:pointer;
}

.crm-checkbox.is-crm-auto-switch .crm-checkbox-control{
    position:relative;
    width:38px;
    min-width:38px;
    height:22px;
    display:block;
}

.crm-checkbox.is-crm-auto-switch .crm-checkbox-control input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.crm-checkbox.is-crm-auto-switch .crm-checkbox-indicator{
    position:absolute;
    inset:0;
    width:38px;
    height:22px;
    border:1px solid #cbd3df;
    border-radius:999px;
    background:#e7ebf0;
    box-shadow:none;
    transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.crm-checkbox.is-crm-auto-switch .crm-checkbox-indicator::after{
    content:"";
    position:absolute;
    top:2px;
    left:2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(15,23,42,.22);
    transition:transform .16s ease;
}

.crm-checkbox.is-crm-auto-switch:has(input:checked) .crm-checkbox-indicator{
    border-color:var(--crm-primary,#2457d6);
    background:var(--crm-primary,#2457d6);
}

.crm-checkbox.is-crm-auto-switch:has(input:checked) .crm-checkbox-indicator::after{
    transform:translateX(16px);
}

.crm-checkbox.is-crm-auto-switch:has(input:focus-visible) .crm-checkbox-indicator{
    box-shadow:0 0 0 3px color-mix(in srgb,var(--crm-primary,#2457d6) 16%,transparent);
}

.crm-checkbox.is-crm-auto-switch .crm-checkbox-label{
    font-size:13px;
    font-weight:500;
    color:var(--crm-text,#273244);
}

/* Native switch keeps exactly the same visual hierarchy */
.crm-switch-option{
    min-height:var(--crm-form-control-height);
    align-items:center;
}
.crm-switch-label{
    font-size:13px;
    font-weight:500;
}
.crm-switch-description{
    font-size:12px;
    line-height:1.4;
    font-weight:400;
}

/* Choice cards / fieldsets */
.crm-form-fieldset{
    min-width:0;
}
.crm-form-fieldset > legend,
.crm-form-fieldset-label{
    font-size:13px;
    font-weight:600;
    color:var(--crm-text,#273244);
}
.crm-choice-card{
    min-height:42px;
    border-radius:8px;
    border-color:var(--crm-border,#dfe5ee);
    background:#fff;
}
.crm-choice-card:hover{
    border-color:color-mix(in srgb,var(--crm-primary,#2457d6) 35%,var(--crm-border,#dfe5ee));
    background:color-mix(in srgb,var(--crm-primary,#2457d6) 2.5%,#fff);
}
.crm-choice-card:has(input:checked){
    border-color:color-mix(in srgb,var(--crm-primary,#2457d6) 48%,var(--crm-border,#dfe5ee));
    background:color-mix(in srgb,var(--crm-primary,#2457d6) 5%,#fff);
}
.crm-choice-card-label{
    font-size:13px;
    font-weight:600;
}
.crm-choice-card-description{
    font-size:12px;
    font-weight:400;
}

/* Summary / aside follows the same density as Pessoas */
.crm-form-workspace-aside .crm-summary-card{
    border-radius:10px;
}
.crm-form-workspace-aside .crm-summary-card h3{
    font-size:14px;
    font-weight:600;
}
.crm-form-workspace-aside .crm-summary-card p,
.crm-form-workspace-aside .crm-summary-card small{
    font-size:12px;
    line-height:1.45;
    font-weight:400;
}

/* Compatibility for form views that still render a native control inside the official workspace. */
.crm-form-workspace input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crm-control),
.crm-form-workspace select:not(.crm-control),
.crm-form-workspace textarea:not(.crm-control){
    width:100%;
    min-height:var(--crm-form-control-height);
    border:1px solid var(--crm-border-strong,#d5dce7);
    border-radius:var(--crm-form-control-radius);
    background:#fff;
    color:var(--crm-text,#252a31);
    padding:0 12px;
    font:400 var(--crm-form-control-font-size)/1.35 inherit;
}
.crm-form-workspace textarea:not(.crm-control){
    min-height:92px;
    height:auto;
    padding-top:10px;
    padding-bottom:10px;
}
.crm-form-workspace input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.crm-control):focus,
.crm-form-workspace select:not(.crm-control):focus,
.crm-form-workspace textarea:not(.crm-control):focus{
    border-color:color-mix(in srgb,var(--crm-primary,#2457d6) 58%,#fff);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--crm-primary,#2457d6) 12%,transparent);
    outline:none;
}

/* Buttons in forms */
.crm-record-form-heading .crm-button,
.crm-form-actions .crm-button,
.crm-form-section-actions .crm-button{
    min-height:40px;
    font-size:13px;
    font-weight:600;
    border-radius:8px;
}

@media (max-width:767.98px){
    .crm-form-section-header{
        align-items:flex-start;
    }
    .crm-form-section-body{
        padding:12px;
    }
    .crm-form-section .crm-control,
    .crm-form-workspace .crm-control{
        min-height:44px;
        height:44px;
    }
}
/* UI FOUNDATION 0.15.4 — UNIFIED FORM EXPERIENCE END */

/* CRM DATA GOVERNANCE CONFIDENCE V1 */

.crm-governed-control{
    display:flex;
    align-items:center;
    gap:6px;
    width:100%;
    min-width:0;
}

.crm-governed-control-input{
    flex:1 1 auto;
    min-width:0;
}

.crm-governed-control-input > *{
    width:100%;
}

.crm-confidence-control{
    position:relative;
    display:inline-flex;
    align-items:center;
    flex:0 0 8px;
    width:8px;
}

.crm-confidence-trigger{
    list-style:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:8px;
    height:18px;
    margin:0;
    padding:0;
    border:0;
    border-radius:999px;
    background:transparent;
    cursor:pointer;
}

.crm-confidence-trigger::-webkit-details-marker{
    display:none;
}

.crm-confidence-dot{
    display:block;
    width:6px;
    height:6px;
    border-radius:999px;
    background:transparent;
}

/* High permanece visualmente neutro. */
.crm-confidence-high .crm-confidence-trigger{
    opacity:0;
}

/* Permite alteração manual no hover/focus. */
.crm-field:hover
.crm-confidence-high
.crm-confidence-trigger,
.crm-field:focus-within
.crm-confidence-high
.crm-confidence-trigger{
    opacity:.25;
}

.crm-confidence-medium .crm-confidence-dot{
    background:#d9a514;
}

.crm-confidence-low .crm-confidence-dot{
    background:#e67817;
}

.crm-confidence-very_low .crm-confidence-dot{
    background:#c9362b;
}

.crm-confidence-control:not([open])
> .crm-confidence-menu{
    display:none !important;
}

.crm-confidence-control[open]
> .crm-confidence-menu{
    display:grid;
}

.crm-confidence-menu{
    position:absolute;
    z-index:60;
    top:calc(100% + 6px);
    left:0;
    min-width:200px;
    padding:10px;
    gap:4px;
    border:1px solid var(--crm-border);
    border-radius:10px;
    background:var(--crm-surface);
    box-shadow:0 12px 28px rgb(0 0 0 / .14);
}

.crm-confidence-menu > strong{
    font-size:var(--crm-font-sm);
    color:var(--crm-text);
}

.crm-confidence-menu > small{
    margin-bottom:4px;
    font-size:var(--crm-font-xs);
    color:var(--crm-text-muted);
}

.crm-confidence-option{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 8px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:var(--crm-text);
    text-align:left;
    cursor:pointer;
}

.crm-confidence-option:hover,
.crm-confidence-option[aria-current="true"]{
    background:var(--crm-surface-muted);
}

.crm-confidence-option-dot{
    width:7px;
    height:7px;
    flex:0 0 auto;
    border-radius:999px;
    border:1px solid var(--crm-border);
    background:transparent;
}

.crm-confidence-option-dot-medium{
    background:#d9a514;
    border-color:#d9a514;
}

.crm-confidence-option-dot-low{
    background:#e67817;
    border-color:#e67817;
}

.crm-confidence-option-dot-very_low{
    background:#c9362b;
    border-color:#c9362b;
}

@media(max-width:700px){
    .crm-confidence-menu{
        position:fixed;
        left:16px;
        right:16px;
        bottom:16px;
        top:auto;
        min-width:0;
    }
}

/* CRM DATA GOVERNANCE CONFIDENCE V1 END */


/* --------------------------------------------------------------------------
   List Metrics / Metric Registry — central operational-list contract.
   UI Foundation owns rendering, picker, local draft UX, loading and layout.
   Plugins declare semantic definitions/providers and pass list context only.
   -------------------------------------------------------------------------- */
.crm-list-metrics-shell {
    position: relative;
    display: grid;
    gap: .45rem;
    overflow: visible;
}

.crm-list-metrics-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 30px;
}

.crm-list-metrics-shell .crm-list-metrics {
    min-width: 0;
}

.crm-list-metrics-shell.is-loading .crm-list-metrics {
    opacity: .34;
    pointer-events: none;
}

.crm-list-metrics-loading {
    position: absolute;
    inset: 38px 0 0;
    display: none;
    flex-wrap: wrap;
    gap: 10px;
    pointer-events: none;
    z-index: 2;
}

.crm-list-metrics-shell.is-loading .crm-list-metrics-loading {
    display: flex;
}

.crm-list-metrics-loading > span {
    flex: 1 1 calc((100% - 50px) / 6);
    min-width: 0;
    max-width: 100%;
    min-height: 76px;
    border: 1px solid var(--crm-border, #d9e1ec);
    border-radius: var(--crm-radius-lg, 12px);
    background:
        linear-gradient(100deg, transparent 20%, rgba(255,255,255,.82) 40%, transparent 60%) 0 0 / 220% 100%,
        var(--crm-surface-muted, #f4f7fb);
    animation: crm-list-metric-shimmer 1.1s linear infinite;
}

@keyframes crm-list-metric-shimmer {
    to { background-position: -220% 0, 0 0; }
}

/* Preference popover must remain above the following SmartTable/data panel. */
.crm-list-metrics-shell:has(.crm-metric-picker[open]) {
    z-index: 2200;
}

.crm-list-metrics-shell .crm-metric-picker[open] {
    position: relative;
    z-index: 2210;
}

.crm-list-metrics-shell .crm-metric-picker[open] > .crm-metric-picker-panel {
    z-index: 2220;
}

.crm-metric-picker-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(540px, calc(100vw - 2rem));
    max-height: min(78vh, 700px);
    overflow: hidden;
}

.crm-metric-picker-panel > header {
    position: relative;
    top: auto;
    z-index: 3;
    background: var(--crm-surface, #fff);
}

.crm-metric-picker-catalog-single {
    overflow: auto;
    min-height: 0;
    padding: .65rem .1rem .45rem 0;
}

.crm-metric-picker-group {
    display: grid;
    gap: .5rem;
}

.crm-metric-picker-group + .crm-metric-picker-group {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--crm-border, #d9e1ec);
}

.crm-metric-picker-group > strong {
    font-size: .72rem;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: var(--crm-text-muted, #64748b);
}

.crm-metric-picker-group-options,
.crm-metric-picker-catalog {
    display: grid;
    gap: .35rem;
}

.crm-metric-picker-option.is-catalog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 8px;
    cursor: default;
}

.crm-metric-picker-option.is-catalog > label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.crm-metric-picker-option.is-catalog > label > input {
    margin-top: 2px;
}

.crm-metric-picker-option small {
    display: block;
    margin-top: .1rem;
    color: var(--crm-text-muted, #64748b);
    font-weight: 400;
    line-height: 1.3;
}

.crm-metric-picker-order {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 54px;
}

.crm-metric-picker-order > small {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    margin-top: 1px;
    border-radius: 999px;
    color: var(--crm-text-muted, #64748b);
    background: var(--crm-surface-soft, #f4f7fb);
    font-size: 10px;
    font-weight: 700;
}

.crm-metric-picker-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 -12px -12px;
    padding: 10px 12px;
    border-top: 1px solid var(--crm-border, #d9e1ec);
    background: var(--crm-surface, #fff);
}

@media (max-width: 1200px) {
    .crm-list-metrics-loading > span {
        flex-basis: calc((100% - 30px) / 4);
    }
}

@media (max-width: 900px) {
    .crm-list-metrics-loading > span {
        flex-basis: calc((100% - 10px) / 2);
    }
}

@media (max-width: 600px) {
    .crm-list-metrics-actions {
        justify-content: stretch;
    }

    .crm-list-metrics-actions > * {
        width: 100%;
    }

    .crm-metric-picker-panel {
        width: calc(100vw - 1rem);
    }

    .crm-metric-picker-footer .crm-button {
        flex: 1 1 auto;
    }
}

@media (max-width: 520px) {
    .crm-list-metrics-loading > span {
        flex-basis: 100%;
    }
}

/* CRM UI Foundation 0.17.8 — UiChart ECharts */
.crm-dashboard-grid{
    align-items:start;
}

.crm-chart-panel{
    align-self:start;
    min-width:0;
}

.crm-chart-panel .crm-panel-body,
.crm-chart{
    min-width:0;
}

.crm-chart{
    display:grid;
    gap:12px;
    width:100%;
}

.crm-chart-canvas{
    width:100%;
    height:300px;
    min-height:180px;
}

.crm-chart[data-chart-height="sm"] .crm-chart-canvas{
    height:220px;
}

.crm-chart[data-chart-height="lg"] .crm-chart-canvas{
    height:360px;
}

.crm-chart-error{
    padding:14px 16px;
    border:1px solid var(--crm-border,#dfe5ee);
    border-radius:var(--crm-radius-md,10px);
    background:var(--crm-surface-muted,#f6f8fb);
    color:var(--crm-text-muted,#66758a);
    font-size:var(--crm-font-sm,.8125rem);
}

.crm-chart-error[hidden]{
    display:none;
}

@media(max-width:700px){
    .crm-chart-canvas,
    .crm-chart[data-chart-height="sm"] .crm-chart-canvas,
    .crm-chart[data-chart-height="lg"] .crm-chart-canvas{
        height:240px;
    }
}

/* ==========================================================
   UI Foundation 0.17.10 - compact contextual navigation list
   ========================================================== */

.crm-context-list {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.crm-context-list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    gap: 10px;
    padding: 8px 10px;
    color: var(--crm-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.crm-context-list-item:hover {
    color: var(--crm-text);
    background: var(--crm-surface-soft);
    border-color: var(--crm-border);
    text-decoration: none;
}

.crm-context-list-item:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
}

.crm-context-list-item.is-active {
    color: var(--crm-primary-dark);
    background: var(--crm-primary-soft);
    border-color: var(--crm-primary);
}

.crm-context-list-item-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.crm-context-list-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
    border-radius: 8px;
}

.crm-context-list-item-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.crm-context-list-item-copy strong,
.crm-context-list-item-copy small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-context-list-item-copy strong {
    color: inherit;
    font-size: 12px;
    font-weight: 700;
}

.crm-context-list-item-copy small {
    color: var(--crm-muted);
    font-size: 11px;
    font-weight: 500;
}

.crm-context-list-item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 24px;
    padding: 0 7px;
    color: var(--crm-text);
    background: var(--crm-surface-soft);
    border: 1px solid var(--crm-border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.crm-context-list-item.is-active
.crm-context-list-item-count {
    color: var(--crm-primary-dark);
    background: var(--crm-surface);
    border-color: var(--crm-primary);
}

/* ================================================================
   UI FOUNDATION 0.17.10 — ACTIVITY TABLE CONTENT CONTRACT V1
   Centralized from the canonical activity-table behavior.
   ================================================================ */
/*
             * Truncamento visual da listagem de Atividades.
             *
             * O conteúdo acompanha a largura definida pelo SmartTable:
             * ao reduzir a coluna, o texto recebe ellipsis; ao ampliar,
             * volta a ocupar o espaço disponível.
             *
             * Escopo deliberadamente local para não alterar outras
             * tabelas da UI Foundation.
             */
            .crm-table-truncate-content .crm-data-table tbody > tr > td:not(.crm-actions-column) {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .crm-table-truncate-content .crm-data-table tbody > tr > td:not(.crm-actions-column) > * {
                min-width: 0;
                max-width: 100%;
            }

            .crm-table-truncate-content .crm-data-table tbody > tr > td:not(.crm-actions-column) :is(
                strong,
                small,
                a,
                span
            ) {
                min-width: 0;
                max-width: 100%;
            }

            .crm-table-truncate-content .crm-data-table tbody > tr > td:not(.crm-actions-column) :is(
                strong,
                small
            ) {
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .crm-table-truncate-content .crm-data-table tbody > tr > td:not(.crm-actions-column) > a,
            .crm-table-truncate-content .crm-data-table tbody > tr > td:not(.crm-actions-column) .crm-record-primary-link {
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /*
             * Elementos flex — ícone + texto — precisam permitir que o
             * texto encolha sem empurrar a largura da coluna.
             */
            .crm-table-truncate-content .crm-data-table tbody > tr > td:not(.crm-actions-column) .inline-flex {
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
            }

            .crm-table-truncate-content .crm-data-table tbody > tr > td:not(.crm-actions-column) .inline-flex > span:last-child {
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            /*
             * Linhas compostas por ícone + texto nunca podem quebrar.
             * O ícone mantém sua largura física; somente o texto encolhe.
             */
            .crm-table-truncate-content .crm-inline-icon-line {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 6px !important;
                min-width: 0 !important;
                max-width: 100% !important;
                overflow: hidden !important;
                white-space: nowrap !important;
            }

            .crm-table-truncate-content .crm-inline-icon-fixed {
                display: inline-flex !important;
                flex: 0 0 auto !important;
                align-items: center !important;
                justify-content: center !important;
                min-width: 0;
            }

            .crm-table-truncate-content .crm-inline-icon-text {
                display: block !important;
                flex: 1 1 auto !important;
                min-width: 0 !important;
                max-width: 100% !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
            }

/*
 * Complementos centrais para elementos que anteriormente dependiam
 * de atributos style= dentro de plugins.
 */

.crm-table-truncate-content .crm-inline-icon-line {
    vertical-align:middle;
}

.crm-table-truncate-content .crm-inline-icon-fixed {
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    max-width:15px !important;
    min-height:15px !important;
    max-height:15px !important;
    flex:0 0 15px !important;
}

.crm-table-truncate-content .crm-inline-icon-fixed > svg {
    display:block;
    flex:none;
}

.crm-table-open-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    line-height:1;
}

.crm-table-open-action-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--crm-primary,#2563eb);
}

.crm-table-open-action-icon > svg {
    display:block;
}

.crm-table-cell-nowrap {
    white-space:nowrap;
}

.crm-table-inline-nowrap {
    display:inline-block;
    white-space:nowrap;
}

.crm-origin-line {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
}

.crm-origin-icon {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    max-width:15px !important;
    flex:0 0 15px !important;
    overflow:visible !important;
    color:var(--crm-text-muted);
}

.crm-origin-icon > svg {
    display:block;
    width:15px;
    height:15px;
}

.crm-origin-text {
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.crm-subject-chip {
    display:inline-flex;
    align-items:center;
    max-width:100%;
    padding:2px 7px;
    border:1px solid transparent;
    border-radius:999px;
    font-weight:700;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.crm-subject-chip-tone-1  {background:#DBEAFE;border-color:#93C5FD;color:#1E40AF}
.crm-subject-chip-tone-2  {background:#D1FAE5;border-color:#6EE7B7;color:#065F46}
.crm-subject-chip-tone-3  {background:#FEF3C7;border-color:#FCD34D;color:#92400E}
.crm-subject-chip-tone-4  {background:#FFE4E6;border-color:#FDA4AF;color:#9F1239}
.crm-subject-chip-tone-5  {background:#EDE9FE;border-color:#C4B5FD;color:#5B21B6}
.crm-subject-chip-tone-6  {background:#CFFAFE;border-color:#67E8F9;color:#155E75}
.crm-subject-chip-tone-7  {background:#FFEDD5;border-color:#FDBA74;color:#9A3412}
.crm-subject-chip-tone-8  {background:#CCFBF1;border-color:#5EEAD4;color:#115E59}
.crm-subject-chip-tone-9  {background:#FAE8FF;border-color:#E879F9;color:#86198F}
.crm-subject-chip-tone-10 {background:#ECFCCB;border-color:#BEF264;color:#3F6212}
.crm-subject-chip-tone-11 {background:#E0E7FF;border-color:#A5B4FC;color:#3730A3}
.crm-subject-chip-tone-12 {background:#FCE7F3;border-color:#F9A8D4;color:#9D174D}
.crm-subject-chip-tone-13 {background:#E0F2FE;border-color:#7DD3FC;color:#075985}
.crm-subject-chip-tone-14 {background:#DCFCE7;border-color:#86EFAC;color:#166534}
.crm-subject-chip-tone-15 {background:#FEF9C3;border-color:#FDE047;color:#854D0E}
.crm-subject-chip-tone-16 {background:#FEE2E2;border-color:#FCA5A5;color:#991B1B}
.crm-subject-chip-tone-17 {background:#F3E8FF;border-color:#D8B4FE;color:#6B21A8}
.crm-subject-chip-tone-18 {background:#F0FDFA;border-color:#99F6E4;color:#134E4A}
.crm-subject-chip-tone-19 {background:#FFF7ED;border-color:#FED7AA;color:#7C2D12}
.crm-subject-chip-tone-20 {background:#F1F5F9;border-color:#CBD5E1;color:#334155}

/* UI FOUNDATION MOBILE LAYOUT 0.17.10 — activity content compatibility. */

/* CRM SMARTTABLE V2.7 — VERTICAL SCROLL OWNERSHIP */

/*
 * Contrato de rolagem:
 *
 * - a página é a única dona da rolagem vertical;
 * - a SmartTable cresce naturalmente com as linhas renderizadas;
 * - a SmartTable pode rolar apenas no eixo horizontal;
 * - a lógica existente continua decidindo se overflow horizontal é necessário.
 *
 * Importante:
 * overflow-y: visible não pode ser usado junto de overflow-x auto/scroll,
 * pois o navegador pode computar o eixo vertical como uma área rolável.
 */
.crm-st2-shell {
    height: auto !important;
    max-height: none !important;
    overflow-y: hidden !important;
    overscroll-behavior-y: auto !important;
    scrollbar-gutter: auto;
}

.crm-st2-shell.is-st2-overflowing,
.crm-st2-shell[data-crm-st2-overflow="true"] {
    overflow-y: hidden !important;
}

/* CRM SMARTTABLE V2.7 — VERTICAL SCROLL OWNERSHIP END */

/* CRM_PROFILE_GRID_25_40_35_V3_INDEPENDENT_COLUMNS
   Perfil 360:
   25% + 40% + 35%.

   A diferença desta versão é importante:
   as duas áreas maiores são pilhas verticais independentes.
   Um card alto de uma coluna não empurra os cards da outra.
*/
.crm-profile-slot-columns {
    display: grid;
    gap: var(--crm-space-4, 1rem);
    align-items: start;
}

.crm-profile-slot-columns.is-single {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    .crm-profile-grid.crm-profile-grid-25-40-35 {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 3fr);
        align-items: start;
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    > .crm-profile-column {
        min-width: 0;
        align-self: start;
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    > .crm-profile-column:nth-child(2) {
        display: block;
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    .crm-profile-slot-columns:not(.is-single) {
        grid-template-columns:
            minmax(0, 8fr)
            minmax(0, 7fr);
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    .crm-profile-slot-columns
    > .crm-profile-column {
        min-width: 0;
        align-self: start;
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    > .crm-profile-column:first-child
    .crm-key-value-list {
        grid-template-columns:
            minmax(0, 1fr);
    }
}

/* CRM_COMPACT_DATA_LIST_V1
   Lista compacta para informações curtas de cadastro.

   Objetivos:
   - todos os valores começam no mesmo eixo;
   - rótulo e valor ficam na mesma linha;
   - sem ícone repetitivo por campo;
   - densidade adequada para colunas estreitas;
   - leitura simples para usuário não técnico.
*/

.crm-record-page
.crm-profile-panel.is-compact
.crm-profile-panel-header {
    min-height: 0;
    padding: 0.72rem 0.85rem 0.5rem;
    gap: 0.65rem;
    align-items: center;
}

.crm-record-page
.crm-profile-panel.is-compact
.crm-profile-panel-heading {
    min-width: 0;
    gap: 0.45rem;
    align-items: center;
}

.crm-record-page
.crm-profile-panel.is-compact
.crm-profile-panel-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
}

.crm-record-page
.crm-profile-panel.is-compact
.crm-profile-panel-heading h2 {
    margin: 0;
    line-height: 1.2;
}

.crm-record-page
.crm-profile-panel.is-compact
.crm-profile-panel-body {
    padding: 0.15rem 0.85rem 0.68rem;
}

.crm-record-page
.crm-profile-panel.is-compact
.crm-profile-panel-actions {
    align-self: center;
}

.crm-record-page
.crm-compact-data-list {
    display: block;
    margin: 0;
}

.crm-record-page
.crm-compact-data-row {
    display: grid;
    grid-template-columns:
        minmax(7.35rem, 42%)
        minmax(0, 1fr);

    align-items: baseline;
    column-gap: 0.42rem;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0.42rem 0;

    border-bottom:
        1px solid
        var(
            --crm-border,
            #e5e7eb
        );
}

.crm-record-page
.crm-compact-data-row:last-child {
    border-bottom: 0;
}

.crm-record-page
.crm-compact-data-label {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;

    min-width: 0;
    margin: 0;

    color:
        var(
            --crm-text-muted,
            #64748b
        );

    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
}

.crm-record-page
.crm-compact-data-label > span:first-child {
    min-width: 0;
}

.crm-record-page
.crm-compact-data-colon {
    margin-left: 0.08rem;
}

.crm-record-page
.crm-compact-data-value {
    min-width: 0;
    margin: 0;

    color:
        var(
            --crm-text,
            #172033
        );

    font-size: 0.81rem;
    font-weight: 500;
    line-height: 1.35;

    overflow-wrap: anywhere;
}

.crm-record-page
.crm-compact-data-value > :first-child {
    margin-top: 0;
}

.crm-record-page
.crm-compact-data-value > :last-child {
    margin-bottom: 0;
}

.crm-record-page
.crm-profile-panel.is-compact
.crm-record-badges {
    gap: 0.3rem;
    margin: 0;
}

.crm-record-page
.crm-profile-panel.is-compact
.crm-record-badges
.crm-badge {
    line-height: 1.2;
}

@media (max-width: 900px) {
    .crm-record-page
    .crm-compact-data-row {
        grid-template-columns:
            minmax(0, 1fr);

        row-gap: 0.15rem;
    }
}

/* CRM_COMPACT_DATA_SECTIONS_V1
   Agrupamento semântico da lista compacta.

   Os títulos organizam a leitura sem transformar
   cada grupo em um novo card.
*/
.crm-record-page
.crm-compact-data-section {
    margin: 0;
    padding: 0;
}

.crm-record-page
.crm-compact-data-section
+ .crm-compact-data-section {
    margin-top: 0.42rem;
    padding-top: 0.48rem;

    border-top:
        1px solid
        var(
            --crm-border,
            #e5e7eb
        );
}

.crm-record-page
.crm-compact-data-section-title {
    margin: 0 0 0.16rem;

    color:
        var(
            --crm-text-muted,
            #64748b
        );

    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;

    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.crm-record-page
.crm-compact-data-section-list {
    display: block;
    margin: 0;
}

.crm-record-page
.crm-compact-data-section
.crm-compact-data-row {
    padding: 0.34rem 0;
}

.crm-record-page
.crm-compact-data-section
.crm-compact-data-label {
    font-size: 0.74rem;
}

.crm-record-page
.crm-compact-data-section
.crm-compact-data-value {
    font-size: 0.8rem;
}

.crm-record-page
.crm-compact-data-value a {
    color: inherit;
    text-decoration: none;
}

.crm-record-page
.crm-compact-data-value a:hover {
    color:
        var(
            --crm-primary,
            #2563eb
        );

    text-decoration: underline;
}

/* CRM_ACCORDION_V1
   Disclosure central da UI Foundation.

   Informações secundárias continuam disponíveis,
   mas não competem com a hierarquia principal.
*/
.crm-accordion {
    display: block;

    margin: 0.75rem 0 0;

    border:
        1px solid
        var(
            --crm-border,
            #e5e7eb
        );

    border-radius: 0.55rem;

    background:
        var(
            --crm-surface-subtle,
            #f8fafc
        );

    overflow: hidden;
}

.crm-accordion-summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 0.7rem;

    margin: 0;
    padding: 0.58rem 0.68rem;

    cursor: pointer;

    list-style: none;
    user-select: none;
}

.crm-accordion-summary::-webkit-details-marker {
    display: none;
}

.crm-accordion-summary-copy {
    display: grid;

    min-width: 0;

    gap: 0.08rem;
}

.crm-accordion-title {
    color:
        var(
            --crm-text,
            #172033
        );

    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
}

.crm-accordion-description {
    color:
        var(
            --crm-text-muted,
            #64748b
        );

    font-size: 0.68rem;
    font-weight: 400;
    line-height: 1.3;
}

.crm-accordion-chevron {
    flex: 0 0 auto;

    color:
        var(
            --crm-text-muted,
            #64748b
        );

    font-size: 0.82rem;
    line-height: 1;

    transition:
        transform 160ms ease;
}

.crm-accordion[open]
.crm-accordion-chevron {
    transform:
        rotate(180deg);
}

.crm-accordion[open]
.crm-accordion-summary {
    border-bottom:
        1px solid
        var(
            --crm-border,
            #e5e7eb
        );
}

.crm-accordion-content {
    padding:
        0.25rem
        0.68rem
        0.55rem;
}

.crm-accordion-content
.crm-compact-data-list {
    margin: 0;
}

.crm-accordion-content
.crm-compact-data-row:last-child {
    border-bottom: 0;
}

@media (
    prefers-reduced-motion: reduce
) {
    .crm-accordion-chevron {
        transition: none;
    }
}

/* SOURCE MODULE: foundation/90-responsive-shell.css */
/* ============================================================================
   UI FOUNDATION 0.15.3 — CANONICAL APP SHELL AND RESPONSIVE CONTRACT
   This is the sole authoritative definition for shell, navigation, page rails,
   modal/drawer geometry, relational creation and mobile layout behaviour.
   ============================================================================ */

:root {
    --crm-sidebar-width: 238px;
    --crm-topbar-height: 58px;
    --crm-page-gutter: clamp(18px, 1.65vw, 28px);
    --crm-mobile-gutter: 16px;
    --crm-mobile-gutter-small: 12px;
    --crm-page-rail-max: 1680px;
    --crm-page-rail-compact: 960px;
    --crm-safe-top: env(safe-area-inset-top, 0px);
    --crm-safe-right: env(safe-area-inset-right, 0px);
    --crm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --crm-safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
    width: 100%;
    max-width: 100%;
}

html {
    min-height: 100%;
    overflow-x: clip;
}

body.crm-shell-body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
}

body.crm-shell-sidebar-open,
body.crm-dialog-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.crm-app-shell {
    display: grid;
    grid-template-columns: var(--crm-sidebar-width) minmax(0, 1fr);
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.crm-app-content,
.crm-main-content,
.crm-page-rail,
.crm-page-rail > *,
.crm-list-page,
.crm-list-stack,
.crm-stack,
.crm-list-layout,
.crm-list-layout-main,
.crm-list-layout-aside,
.crm-form-workspace,
.crm-form-workspace-main,
.crm-form-workspace-aside,
.crm-page-header,
.crm-page-header-main,
.crm-page-header-actions,
.crm-list-header,
.crm-list-header-copy,
.crm-list-header-actions,
.crm-filter-bar,
.crm-filter-grid,
.crm-form-grid,
.crm-panel,
.crm-card,
.crm-data-panel,
.crm-profile-grid,
.crm-profile-column,
.crm-record-page,
.crm-record-hero,
.crm-record-hero-main,
.crm-table-shell {
    min-width: 0;
    max-width: 100%;
}

.crm-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: var(--crm-sidebar-width);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 0;
    overflow: hidden;
    color: var(--crm-sidebar-text);
    background:
        radial-gradient(circle at 22% 0%, rgba(54, 101, 190, 0.18), transparent 31%),
        linear-gradient(180deg, var(--crm-sidebar) 0%, var(--crm-sidebar-deep) 100%);
    border: 0;
    border-right: 1px solid var(--crm-sidebar-border);
    box-shadow: 8px 0 28px rgba(9, 20, 38, 0.05);
}

.crm-sidebar-header {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: calc(65px + var(--crm-safe-top));
    padding: calc(10px + var(--crm-safe-top)) 14px 10px;
    border-bottom: 1px solid var(--crm-sidebar-border);
}

.crm-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.crm-brand-mark {
    flex: 0 0 auto;
}

.crm-brand-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.crm-brand-copy strong,
.crm-brand-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-brand-copy strong {
    color: #fff;
    font-size: 13px;
}

.crm-brand-copy small {
    color: var(--crm-sidebar-muted);
    font-size: 10px;
}

.crm-sidebar-close,
.crm-sidebar-trigger {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 10px;
    cursor: pointer;
}

.crm-sidebar-close {
    display: none;
    margin-left: auto;
    color: var(--crm-sidebar-text);
    background: transparent;
    border: 1px solid transparent;
}

.crm-sidebar-close:hover,
.crm-sidebar-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--crm-sidebar-border);
}

.crm-sidebar-scroll {
    min-height: 0;
    padding: 12px 10px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.crm-navigation {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.crm-navigation-label {
    margin: 6px 10px 8px;
    color: var(--crm-sidebar-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.crm-navigation-link {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 42px;
    gap: 10px;
    padding: 0 12px;
    color: var(--crm-sidebar-muted);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}

.crm-navigation-link > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-navigation-link:hover,
.crm-navigation-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(255, 255, 255, 0.06);
}

.crm-navigation-link.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(36, 94, 234, 0.98), rgba(58, 78, 181, 0.92));
    border-color: rgba(114, 151, 255, 0.45);
    box-shadow: 0 8px 22px rgba(16, 48, 135, 0.28);
}

.crm-sidebar-footer {
    position: relative;
    z-index: 2;
    display: grid;
    min-width: 0;
    gap: 10px;
    margin: 0;
    padding: 12px 10px calc(12px + var(--crm-safe-bottom));
    background: linear-gradient(180deg, rgba(9, 20, 38, 0.72), rgba(9, 20, 38, 0.98));
    border-top: 1px solid var(--crm-sidebar-border);
    font-size: 12px;
}

.crm-environment-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    gap: 8px;
    padding: 8px 9px;
    color: var(--crm-sidebar-text);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--crm-sidebar-border);
    border-radius: 11px;
}

.crm-environment-card > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.crm-environment-card small,
.crm-environment-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-environment-card small {
    color: var(--crm-sidebar-muted);
    font-size: 9px;
}

.crm-environment-card strong {
    color: #fff;
    font-size: 10px;
}

.crm-environment-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #8db0ff;
    background: rgba(36, 94, 234, 0.16);
    border-radius: 9px;
}

.crm-sidebar-user {
    position: relative;
    min-width: 0;
}

.crm-sidebar-user > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    min-height: 49px;
    gap: 9px;
    padding: 7px 9px;
    color: var(--crm-sidebar-text);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--crm-sidebar-border);
    border-radius: 11px;
    cursor: pointer;
    list-style: none;
}

.crm-sidebar-user > summary::-webkit-details-marker {
    display: none;
}

.crm-sidebar-user > summary:hover,
.crm-sidebar-user > summary:focus-visible {
    background: rgba(255, 255, 255, 0.07);
}

.crm-sidebar-user-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.crm-sidebar-user-copy strong,
.crm-sidebar-user-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-sidebar-user-copy strong {
    color: #fff;
    font-size: 11px;
}

.crm-sidebar-user-copy small {
    color: var(--crm-sidebar-muted);
    font-size: 9px;
}

.crm-sidebar-user[open] > summary .crm-icon {
    transform: rotate(180deg);
}

.crm-sidebar-user-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 6;
    display: grid;
    max-height: min(34rem, calc(100dvh - 8rem - var(--crm-safe-bottom)));
    gap: 6px;
    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #dfe7f4;
    background: #172841;
    border: 1px solid var(--crm-sidebar-border);
    border-radius: 11px;
    box-shadow: var(--crm-shadow-float);
}

.crm-user-menu-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 6px 7px 9px;
    border-bottom: 1px solid var(--crm-sidebar-border);
}

.crm-user-menu-header > span:last-child {
    display: grid;
    min-width: 0;
}

.crm-user-menu-header strong,
.crm-user-menu-header small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-user-menu-header strong { color: #fff; font-size: 11px; }
.crm-user-menu-header small { color: var(--crm-sidebar-muted); font-size: 9px; }

.crm-user-menu-section {
    display: grid;
    gap: 2px;
}

.crm-user-menu-section > p {
    margin: 4px 8px 3px;
    color: var(--crm-sidebar-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.crm-sidebar-user-menu a,
.crm-sidebar-user-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    gap: 8px;
    padding: 0 9px;
    color: #dfe7f4;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 11px;
    text-align: left;
    text-decoration: none;
}

.crm-sidebar-user-menu a:hover,
.crm-sidebar-user-menu a:focus-visible,
.crm-sidebar-user-menu button:hover,
.crm-sidebar-user-menu button:focus-visible,
.crm-sidebar-user-menu a.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.075);
}

.crm-sidebar-backdrop {
    display: none;
}

.crm-app-content {
    grid-column: 2;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.crm-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    min-height: var(--crm-topbar-height);
    gap: 12px;
    padding: 0 var(--crm-page-gutter);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--crm-border);
    backdrop-filter: blur(16px);
}

.crm-topbar-leading,
.crm-topbar-actions {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.crm-topbar-leading {
    flex: 1 1 auto;
    overflow: hidden;
}

.crm-topbar-actions {
    flex: 0 0 auto;
}

.crm-sidebar-trigger {
    display: none;
    color: var(--crm-text);
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
}

.crm-topbar .crm-icon-button {
    width: 38px;
    height: 38px;
    color: #536074;
    background: #f8fafc;
    border-color: var(--crm-border);
}

.crm-breadcrumb {
    min-width: 0;
    overflow: hidden;
}

.crm-breadcrumb ol {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.crm-breadcrumb li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 0 0 auto;
    gap: 4px;
    color: var(--crm-muted);
    font-size: 12px;
    white-space: nowrap;
}

.crm-breadcrumb li:last-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.crm-breadcrumb li:last-child > *:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-breadcrumb a {
    color: var(--crm-muted);
    text-decoration: none;
}

.crm-breadcrumb li:last-child a,
.crm-breadcrumb li:last-child span {
    color: var(--crm-text);
    font-weight: 700;
}

.crm-main-content {
    width: 100%;
    margin: 0;
    padding: 16px var(--crm-page-gutter) calc(42px + var(--crm-safe-bottom));
}

.crm-page-rail {
    width: 100%;
    max-width: var(--crm-page-rail-max);
    margin-inline: auto;
}

.crm-page-rail-compact {
    max-width: var(--crm-page-rail-compact);
}

.crm-module-nav {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--crm-border);
}

.crm-module-nav-scroll,
.crm-record-tabs-scroll,
.crm-tabs {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.crm-module-nav-scroll::-webkit-scrollbar,
.crm-record-tabs-scroll::-webkit-scrollbar,
.crm-tabs::-webkit-scrollbar {
    display: none;
}

.crm-module-nav-link,
.crm-record-tab,
.crm-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex: 0 0 auto;
    gap: 6px;
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.crm-module-nav-link::after,
.crm-record-tab::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    content: "";
    background: transparent;
    border-radius: 999px 999px 0 0;
}

.crm-module-nav-link:hover,
.crm-module-nav-link:focus-visible,
.crm-module-nav-link.is-active,
.crm-record-tab:hover,
.crm-record-tab:focus-visible,
.crm-record-tab.is-active,
.crm-tab:hover,
.crm-tab:focus-visible,
.crm-tab.is-active {
    color: var(--crm-primary-dark);
}

.crm-module-nav-link.is-active::after,
.crm-record-tab.is-active::after {
    background: var(--crm-primary);
}

.crm-module-nav-count,
.crm-record-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    color: var(--crm-primary-dark);
    background: var(--crm-primary-soft);
    border-radius: 999px;
    font-size: 11px;
}

.crm-page-header,
.crm-list-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    width: 100%;
    gap: 18px;
    margin: 0;
    padding: 2px 0;
    text-align: left;
}

.crm-page-header-main,
.crm-list-header-copy {
    min-width: 0;
}

.crm-page-header h1,
.crm-page-header h2,
.crm-list-header h1 {
    margin: 0;
    color: var(--crm-text);
    font-size: clamp(21px, 1.55vw, 25px);
    font-weight: 720;
    line-height: 1.14;
    letter-spacing: -0.025em;
    text-align: left;
    overflow-wrap: anywhere;
}

.crm-page-header-description,
.crm-list-header p {
    max-width: 820px;
    margin: 5px 0 0;
    color: var(--crm-muted);
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    overflow-wrap: anywhere;
}

.crm-page-header-actions,
.crm-list-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-list-layout,
.crm-form-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    width: 100%;
    gap: 14px;
}

.crm-list-layout.has-aside {
    grid-template-columns: minmax(0, 1fr) minmax(280px, var(--crm-list-aside-width));
}

.crm-list-layout.has-aside.is-aside-left {
    grid-template-columns: minmax(280px, var(--crm-list-aside-width)) minmax(0, 1fr);
}

.crm-form-workspace.has-aside {
    grid-template-columns: minmax(0, 1fr) minmax(270px, var(--crm-form-workspace-aside));
}

.crm-form-workspace.has-aside.is-aside-wide {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 460px);
}

.crm-source-sample-selector {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.crm-list-layout-main,
.crm-list-layout-aside,
.crm-form-workspace-main,
.crm-form-workspace-aside {
    display: grid;
    gap: 12px;
}

.crm-list-layout-aside,
.crm-form-workspace-aside {
    position: sticky;
    top: calc(var(--crm-topbar-height) + 12px);
}

.crm-list-metrics {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
}

.crm-list-metrics > .crm-list-metric {
    flex: 1 1 calc((100% - 50px) / 6);
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.crm-list-metric {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 72px;
    gap: 10px;
    padding: 12px 14px;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(28, 45, 72, 0.045);
}

.crm-list-metric-icon {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: var(--crm-primary);
    background: var(--crm-primary-soft);
    border-radius: 11px;
}

.crm-list-metric-success .crm-list-metric-icon {
    color: var(--crm-success);
    background: var(--crm-success-soft);
}

.crm-list-metric-warning .crm-list-metric-icon {
    color: #a15c00;
    background: #fff5dc;
}

.crm-list-metric-danger .crm-list-metric-icon {
    color: var(--crm-danger);
    background: var(--crm-danger-soft);
}

.crm-list-metric-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.crm-list-metric-copy small,
.crm-list-metric-copy span {
    overflow: hidden;
    color: var(--crm-muted);
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-list-metric-copy strong {
    overflow: hidden;
    color: var(--crm-text);
    font-size: 22px;
    font-weight: 720;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-filter-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    width: 100%;
    gap: 10px;
}

.crm-filter-grid > :where(.crm-field, .crm-form-fieldset) {
    min-width: 0;
}

.crm-table-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.crm-table-shell:focus-visible {
    outline: 3px solid var(--crm-focus);
    outline-offset: 2px;
}

.crm-table-shell[data-crm-overflow="true"]::after {
    position: sticky;
    right: 0;
    display: block;
    width: 44px;
    height: 1px;
    margin-top: -1px;
    margin-left: auto;
    content: "";
    pointer-events: none;
    box-shadow: 18px 0 26px 22px rgba(255, 255, 255, 0.92);
}

.crm-modal,
.crm-drawer {
    padding: 0;
    color: var(--crm-text);
    background: transparent;
    border: 0;
    outline: 0;
}

.crm-modal[open],
.crm-drawer[open] {
    display: grid;
}

.crm-modal::backdrop,
.crm-drawer::backdrop {
    background: rgba(9, 20, 38, 0.55);
    backdrop-filter: blur(3px);
}

.crm-modal {
    width: min(calc(100% - 32px), 620px);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    border-radius: var(--crm-radius-lg);
}

.crm-modal-sm { width: min(calc(100% - 32px), 430px); }
.crm-modal-lg { width: min(calc(100% - 32px), 820px); }
.crm-modal-xl { width: min(calc(100% - 32px), 1120px); }

.crm-modal-surface,
.crm-drawer-surface {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: inherit;
    flex-direction: column;
    overflow: hidden;
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: inherit;
    box-shadow: var(--crm-shadow-float);
}

.crm-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-modal-header > div {
    min-width: 0;
}

.crm-modal-header h2 {
    margin: 0;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.crm-modal-header p {
    margin: 5px 0 0;
    color: var(--crm-muted);
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.crm-modal-body {
    min-width: 0;
    min-height: 0;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.crm-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
    padding: 13px 20px calc(13px + var(--crm-safe-bottom));
    background: var(--crm-surface-soft);
    border-top: 1px solid var(--crm-border);
}

.crm-drawer {
    width: min(100%, 480px);
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
}

.crm-drawer-surface {
    height: 100%;
    border-radius: 0;
}

.crm-toast-region {
    position: fixed;
    right: max(18px, var(--crm-safe-right));
    bottom: max(18px, var(--crm-safe-bottom));
    z-index: 1200;
    display: grid;
    width: min(360px, calc(100% - 36px));
    gap: 8px;
    pointer-events: none;
}

.crm-toast-region .crm-toast {
    pointer-events: auto;
}

.crm-relation-field,
.crm-relation-control,
.crm-relation-select {
    min-width: 0;
    max-width: 100%;
}

.crm-relation-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
}

.crm-relation-select > * {
    width: 100%;
}

.crm-relation-create-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    min-height: var(--crm-control-height);
    padding: 0;
    color: var(--crm-primary-dark);
    background: var(--crm-primary-soft);
    border: 1px solid var(--crm-border-strong);
    border-left: 0;
    border-radius: 0 7px 7px 0;
    cursor: pointer;
}

.crm-relation-create-button:hover,
.crm-relation-create-button:focus-visible {
    color: #fff;
    background: var(--crm-primary);
}

.crm-resource-create-modal .crm-modal-surface {
    height: min(860px, calc(100vh - 32px));
    height: min(860px, calc(100dvh - 32px));
}

.crm-resource-create-modal .crm-modal-body {
    padding: 0;
    overflow: hidden;
}

.crm-resource-create-frame-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: min(560px, calc(100dvh - 170px));
    overflow: hidden;
}

.crm-resource-create-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    background: var(--crm-surface);
}

.crm-resource-create-frame-shell.is-loaded .crm-resource-create-loading {
    display: none;
}

.crm-resource-create-frame {
    width: 100%;
    height: 100%;
    min-height: inherit;
    border: 0;
}

.crm-embedded-body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    background: var(--crm-background);
}

.crm-embedded-content {
    width: 100%;
    max-width: var(--crm-form-max-width);
    margin-inline: auto;
    padding: 16px;
}

.crm-embedded-content .crm-page-header,
.crm-embedded-content .crm-module-nav {
    display: none !important;
}

.crm-form-actions {
    position: static;
    z-index: auto;
    width: 100%;
    margin: 2px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.crm-form-actions.is-sticky {
    position: sticky;
    z-index: 25;
    bottom: 0;
    padding-top: 8px;
    background: linear-gradient(to bottom, transparent, var(--crm-background) 12px);
}

.crm-form-actions-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    flex-wrap: wrap;
    gap: 9px;
    padding: 10px 0 0;
    background: transparent;
    border-top: 1px solid var(--crm-border);
}

.crm-form-actions .crm-button {
    min-width: 112px;
}

/* UI Foundation 0.13.8-r2 — mobile interaction and action contract. */
.crm-select {
    appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23536074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 16px 16px;
}

.crm-preference-picker {
    position: relative;
    isolation: isolate;
}

.crm-filter-bar,
.crm-filter-bar-header,
.crm-table-toolbar {
    overflow: visible;
}

.crm-preference-picker-panel {
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;
    width: min(360px, calc(100vw - (var(--crm-page-gutter) * 2)));
    max-width: calc(100vw - (var(--crm-page-gutter) * 2));
    max-height: var(--crm-preference-panel-max-height, min(520px, calc(100dvh - 128px)));
}

.crm-preference-picker.is-placement-top .crm-preference-picker-panel {
    top: auto;
    bottom: calc(100% + 8px);
}

.crm-table-actions-header {
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
}

.crm-table-actions-header-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.crm-inline-review-form {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto;
    align-items: center;
    min-width: 310px;
    gap: 8px;
}

.crm-plugin-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.crm-plugin-card,
.crm-plugin-details,
.crm-plugin-details div,
.crm-plugin-details dd {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1180px) {
    .crm-list-layout.has-aside,
    .crm-form-workspace.has-aside {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-list-layout-aside,
    .crm-form-workspace-aside {
        position: static;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 900px) {
    :root {
        --crm-page-gutter: var(--crm-mobile-gutter);
        --crm-control-height: 48px;
    }

    .crm-app-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-app-content {
        grid-column: 1;
    }

    .crm-sidebar {
        width: min(86vw, 360px);
        max-width: calc(100vw - 44px);
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform 180ms ease, visibility 180ms ease;
    }

    .crm-shell-sidebar-open .crm-sidebar {
        transform: translateX(0);
        visibility: visible;
    }

    .crm-sidebar-close,
    .crm-sidebar-trigger {
        display: inline-flex;
    }

    .crm-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1030;
        background: rgba(8, 18, 34, 0.54);
        backdrop-filter: blur(2px);
    }

    .crm-shell-sidebar-open .crm-sidebar-backdrop {
        display: block;
    }

    .crm-topbar {
        min-height: 56px;
        padding-right: max(var(--crm-page-gutter), var(--crm-safe-right));
        padding-left: max(var(--crm-page-gutter), var(--crm-safe-left));
    }

    .crm-main-content {
        padding-top: 16px;
        padding-right: max(var(--crm-page-gutter), var(--crm-safe-right));
        padding-bottom: calc(32px + var(--crm-safe-bottom));
        padding-left: max(var(--crm-page-gutter), var(--crm-safe-left));
    }

    .crm-module-nav {
        position: sticky;
        top: 56px;
        z-index: 20;
        background: var(--crm-background);
    }

    .crm-module-nav-scroll {
        gap: 20px;
    }

    .crm-control,
    .crm-file-input {
        min-height: 48px;
        font-size: 16px;
        line-height: 1.35;
        border-radius: 10px;
    }

    .crm-control {
        padding-right: 14px;
        padding-left: 14px;
    }

    .crm-select {
        padding-right: 44px;
        background-position: right 14px center;
    }

    textarea.crm-control {
        min-height: 112px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .crm-field > label,
    .crm-form-fieldset > legend {
        min-height: 0;
        font-size: 14px;
        line-height: 1.3;
    }

    .crm-field-help,
    .crm-field-error,
    .crm-form-fieldset-description {
        font-size: 13px;
        line-height: 1.4;
    }

    .crm-button {
        min-height: 44px;
        padding-right: 14px;
        padding-left: 14px;
        font-size: 14px;
        line-height: 1.2;
    }

    .crm-button-sm {
        min-height: 40px;
        padding-right: 12px;
        padding-left: 12px;
        font-size: 13px;
    }

    .crm-icon-button {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    .crm-button-group,
    .crm-inline-actions {
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .crm-button-group > .crm-button,
    .crm-inline-actions > .crm-button,
    .crm-button-group > form,
    .crm-inline-actions > form {
        min-width: 0;
        flex: 0 1 auto;
    }

    .crm-preference-picker-panel {
        position: absolute;
        inset: auto 0 auto auto;
        top: calc(100% + 8px);
        width: min(360px, calc(100vw - (var(--crm-page-gutter) * 2)));
        max-width: calc(100vw - (var(--crm-page-gutter) * 2));
        max-height: var(--crm-preference-panel-max-height, calc(100dvh - 132px));
    }

    .crm-preference-picker.is-placement-top .crm-preference-picker-panel {
        top: auto;
        bottom: calc(100% + 8px);
    }

    .crm-table-actions-header {
        width: 1% !important;
        min-width: max-content !important;
        max-width: none !important;
        padding: 10px 12px !important;
        overflow: visible;
        border-bottom: 1px solid var(--crm-border) !important;
        text-align: center;
    }

    .crm-table-actions-header-label {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        overflow: visible;
        white-space: nowrap;
    }

    .crm-actions-anchor-cell {
        width: 1% !important;
        min-width: max-content !important;
        max-width: none !important;
        padding: 8px 12px !important;
        border-bottom: 1px solid var(--crm-border) !important;
    }

    .crm-actions-overlay {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .crm-actions-overlay::before {
        display: none;
    }

    .crm-actions-overlay .crm-row-actions {
        visibility: visible;
        opacity: 1;
        padding: 0;
        background: transparent !important;
        border: 0;
        box-shadow: none;
        pointer-events: auto;
    }

    .crm-record-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .crm-record-hero-actions > .crm-button,
    .crm-record-hero-actions > form,
    .crm-record-hero-actions > form .crm-button {
        width: 100%;
        min-width: 0;
        grid-column: auto !important;
    }

    .crm-plugin-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .crm-plugin-details div {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
        padding: 10px 12px;
    }

    .crm-plugin-manager-page .crm-card,
    .crm-plugin-manager-page .crm-installer-card {
        min-width: 0;
        max-width: 100%;
    }

    .crm-plugin-manager-page .crm-upload-zone {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .crm-plugin-manager-page .crm-installer-rules {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-plugin-manager-page .crm-installer-rules span {
        display: flex;
        align-items: center;
        min-width: 0;
        border-radius: 8px;
        white-space: normal;
    }
}

@media (max-width: 720px) {
    .crm-page-header,
    .crm-list-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 0;
    }

    .crm-page-header-actions,
    .crm-list-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .crm-page-header-actions > *,
    .crm-list-header-actions > * {
        max-width: 100%;
    }

    .crm-page-header-actions,
    .crm-list-header-actions,
    .crm-form-hero-actions {
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .crm-page-header-actions > .crm-button,
    .crm-list-header-actions > .crm-button,
    .crm-page-header-actions > form,
    .crm-list-header-actions > form,
    .crm-form-hero-actions > .crm-button,
    .crm-form-hero-actions > form {
        width: auto;
        max-width: 100%;
        flex: 0 1 auto;
    }

    .crm-page-header-actions > form .crm-button,
    .crm-list-header-actions > form .crm-button,
    .crm-form-hero-actions > form .crm-button {
        width: 100%;
    }

    .crm-filter-grid,
    .crm-form-grid-two,
    .crm-form-grid-three,
    .crm-grid-two,
    .crm-grid-three {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-filter-grid > :where(.crm-field, .crm-form-fieldset),
    .crm-form-grid > :where(.crm-field, .crm-form-fieldset),
    [class*="crm-field-span-"] {
        grid-column: 1 / -1 !important;
    }

    .crm-list-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-record-hero,
    .crm-page-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .crm-modal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }

    .crm-modal-header {
        padding: 15px 16px;
    }

    .crm-modal-body {
        padding: 16px;
    }

    .crm-modal-footer {
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 12px 16px calc(12px + var(--crm-safe-bottom));
        overflow-x: auto;
    }

    .crm-modal-footer > .crm-button,
    .crm-modal-footer > form {
        min-width: 0;
        flex: 1 1 0;
    }

    .crm-modal-footer > form .crm-button {
        width: 100%;
    }

    .crm-resource-create-modal .crm-modal-surface {
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
    }

    .crm-resource-create-frame-shell {
        min-height: calc(100dvh - 154px);
    }

    .crm-embedded-content {
        padding: 12px;
    }

    .crm-form-actions-inner {
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .crm-form-actions-inner > .crm-button,
    .crm-form-actions-inner > form {
        min-width: 0;
        max-width: 220px;
        flex: 1 1 0;
    }

    .crm-form-actions-inner > form .crm-button {
        width: 100%;
    }

    .crm-form-actions .crm-button {
        width: auto;
        min-width: 0;
        white-space: normal;
        line-height: 1.15;
        text-align: center;
    }

    .crm-toast-region {
        right: max(10px, var(--crm-safe-right));
        bottom: max(10px, var(--crm-safe-bottom));
        left: max(10px, var(--crm-safe-left));
        width: auto;
    }
}

@media (max-width: 480px) {
    :root {
        --crm-page-gutter: var(--crm-mobile-gutter-small);
    }

    .crm-topbar-actions {
        gap: 6px;
    }

    .crm-topbar .crm-icon-button,
    .crm-sidebar-trigger {
        width: 38px;
        height: 38px;
    }

    .crm-breadcrumb li:first-child:not(:last-child) {
        display: none;
    }

    .crm-list-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-sidebar {
        width: min(92vw, 348px);
        max-width: calc(100vw - 24px);
    }

    .crm-environment-card {
        display: none;
    }

    .crm-form-actions-inner,
    .crm-modal-footer {
        gap: 6px;
    }

    .crm-form-actions .crm-button,
    .crm-modal-footer .crm-button {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 12.5px;
    }

    .crm-plugin-manager-page .crm-installer-rules {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-height: 640px) and (max-width: 900px) {
    .crm-environment-card {
        display: none;
    }

    .crm-sidebar-header {
        min-height: calc(58px + var(--crm-safe-top));
        padding-top: calc(7px + var(--crm-safe-top));
        padding-bottom: 7px;
    }

    .crm-sidebar-scroll {
        padding-top: 8px;
        padding-bottom: 10px;
    }

    .crm-sidebar-footer {
        padding-top: 8px;
    }
}

@media (hover: none), (pointer: coarse) {
    .crm-table-actions-cell .crm-row-actions,
    .crm-actions-overlay .crm-row-actions {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-sidebar,
    .crm-navigation-link {
        transition: none;
    }
}


/* UI Foundation accessibility utility */
.crm-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 9px 12px;
    color: #fff;
    background: var(--crm-primary-dark);
    border-radius: 8px;
    box-shadow: var(--crm-shadow-float);
    transform: translateY(-160%);
    transition: transform 120ms ease;
}

.crm-skip-link:focus {
    transform: translateY(0);
}

/* UI FOUNDATION MOBILE LAYOUT 0.15.3-r2 */

/*
 * Contrato estritamente móvel.
 * Nenhuma regra deste bloco altera html, body ou desktop.
 */
@media (max-width: 900px) {
    :root {
        --crm-safe-area-top: env(safe-area-inset-top, 0px);
        --crm-safe-area-right: env(safe-area-inset-right, 0px);
        --crm-safe-area-bottom: env(safe-area-inset-bottom, 0px);
        --crm-safe-area-left: env(safe-area-inset-left, 0px);
        --crm-mobile-viewport-height: 100dvh;
    }

    .crm-shell,
    .crm-main,
    .crm-main-content,
    .crm-page,
    .crm-page-content,
    .crm-page-header,
    .crm-page-header-main,
    .crm-page-header-actions,
    .crm-list-page,
    .crm-list-stack,
    .crm-panel,
    .crm-card,
    .crm-data-panel {
        min-width: 0;
        max-width: 100%;
    }

    .crm-shell,
    .crm-main {
        min-height: var(--crm-mobile-viewport-height);
    }

    .crm-main {
        width: 100%;
        margin-left: 0;
    }

    .crm-main-content,
    .crm-page,
    .crm-page-content {
        width: 100%;
        padding-right: max(
            var(--crm-page-gutter, 16px),
            var(--crm-safe-area-right)
        );
        padding-bottom: max(
            var(--crm-page-gutter, 16px),
            var(--crm-safe-area-bottom)
        );
        padding-left: max(
            var(--crm-page-gutter, 16px),
            var(--crm-safe-area-left)
        );
    }

    .crm-topbar {
        position: sticky;
        top: 0;
        z-index: 1020;
        width: 100%;
        min-width: 0;
        padding-top: var(--crm-safe-area-top);
    }

    .crm-topbar-inner,
    .crm-topbar-main,
    .crm-topbar-actions {
        min-width: 0;
    }

    .crm-topbar-main {
        flex: 1 1 auto;
        overflow: hidden;
    }

    .crm-breadcrumb {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Mantém o contrato de sidebar já existente.
     * Somente complementa safe areas e altura visual.
     */
    .crm-sidebar {
        height: var(--crm-mobile-viewport-height);
        max-height: var(--crm-mobile-viewport-height);
        padding-top: var(--crm-safe-area-top);
        padding-bottom: var(--crm-safe-area-bottom);
    }

    .crm-sidebar-scroll {
        min-height: 0;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * Evita zoom automático no Safari iOS.
     */
    .crm-input,
    .crm-select,
    .crm-textarea,
    .crm-control,
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        max-width: 100%;
        font-size: 16px;
    }

    .crm-page-header,
    .crm-list-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .crm-page-header-actions,
    .crm-list-header-actions {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
    }

    .crm-page-header-actions > *,
    .crm-list-header-actions > * {
        min-width: 0;
        max-width: 100%;
    }

    .crm-table-toolbar,
    .crm-table-toolbar-main,
    .crm-table-toolbar-actions {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
    }

    .crm-table-toolbar {
        padding: 12px;
    }

    .crm-table-toolbar-main,
    .crm-table-toolbar-actions {
        flex: 1 1 100%;
    }

    .crm-data-panel {
        width: 100%;
        min-width: 0;
    }

    .crm-table-shell {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .crm-table {
        width: max-content;
        min-width: 100%;
    }

    .crm-table-row-actions,
    .crm-row-actions {
        position: static;
        display: inline-flex;
        visibility: visible;
        width: auto;
        min-width: max-content;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .crm-preference-picker-panel,
    .crm-dropdown-menu,
    .crm-popover {
        right: 0;
        left: auto;
        width: min(
            380px,
            calc(
                100vw
                - var(--crm-safe-area-left)
                - var(--crm-safe-area-right)
                - 24px
            )
        );
        max-width: calc(
            100vw
            - var(--crm-safe-area-left)
            - var(--crm-safe-area-right)
            - 24px
        );
        max-height: calc(
            var(--crm-mobile-viewport-height)
            - var(--crm-safe-area-top)
            - var(--crm-safe-area-bottom)
            - 96px
        );
        overflow: auto;
        overscroll-behavior: contain;
    }

    .crm-modal,
    .crm-dialog,
    .crm-resource-create-modal {
        max-width: calc(
            100vw
            - var(--crm-safe-area-left)
            - var(--crm-safe-area-right)
            - 16px
        );
        max-height: calc(
            var(--crm-mobile-viewport-height)
            - var(--crm-safe-area-top)
            - var(--crm-safe-area-bottom)
            - 16px
        );
    }

    .crm-modal-surface,
    .crm-dialog-surface,
    .crm-resource-create-modal-surface {
        max-height: calc(
            var(--crm-mobile-viewport-height)
            - var(--crm-safe-area-top)
            - var(--crm-safe-area-bottom)
            - 16px
        );
        overflow: auto;
        overscroll-behavior: contain;
    }

    .crm-filter-shell {
        height: var(--crm-mobile-viewport-height);
        max-height: var(--crm-mobile-viewport-height);
        padding-top: var(--crm-safe-area-top);
    }

    .crm-filter-surface {
        padding-bottom: var(--crm-safe-area-bottom);
    }

    .crm-filter-actions {
        padding-bottom: max(
            12px,
            var(--crm-safe-area-bottom)
        );
    }
}

@media (max-width: 720px) {
    .crm-main-content,
    .crm-page,
    .crm-page-content {
        padding-right: max(
            12px,
            var(--crm-safe-area-right)
        );
        padding-left: max(
            12px,
            var(--crm-safe-area-left)
        );
    }

    .crm-page-header-actions > .crm-button,
    .crm-page-header-actions > form,
    .crm-page-header-actions > form > .crm-button,
    .crm-list-header-actions > .crm-button,
    .crm-list-header-actions > form,
    .crm-list-header-actions > form > .crm-button {
        width: 100%;
    }

    .crm-table-toolbar-actions > .crm-button,
    .crm-table-toolbar-actions > form,
    .crm-table-toolbar-actions > form > .crm-button {
        flex: 1 1 auto;
    }
}

/* UI FOUNDATION MOBILE LAYOUT 0.15.3-r2 END */


/* CRM UI STABILIZATION WAVE 1 — 0.13.8-r2 */

/* Tabelas: não reservar gutter nem forçar largura maior que o conteúdo no desktop. */
.crm-table-shell {
    scrollbar-gutter: auto;
}
.crm-table-shell:not([data-crm-overflow="true"]) {
    overflow-x: hidden;
}
.crm-table-shell:not([data-crm-overflow="true"]) .crm-data-table {
    width: 100%;
    min-width: 100%;
}
.crm-table-shell[data-crm-overflow="true"] {
    overflow-x: auto;
}

/* Camadas: a navegação móvel sempre está acima de filtros, preferências e conteúdo. */
@media (max-width: 900px) {
    .crm-sidebar-backdrop { z-index: 4900; }
    .crm-sidebar { z-index: 5000; }
    .crm-shell-sidebar-open .crm-filter-mobile-trigger,
    .crm-shell-sidebar-open .crm-filter-shell,
    .crm-shell-sidebar-open .crm-preference-picker-panel {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Cards compactos em duas colunas em telefones usuais. */
    .crm-list-metrics,
    .crm-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .crm-list-metric,
    .crm-metric-card {
        min-height: 92px;
        padding: 12px;
    }

    /* Ações de cabeçalho usam uma grade única; uma ação ocupa tudo, duas ficam lado a lado. */
    .crm-page-header-actions,
    .crm-list-header-actions,
    .crm-form-hero-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 1fr));
        width: 100%;
        gap: 8px;
    }
    .crm-page-header-actions > *,
    .crm-list-header-actions > *,
    .crm-form-hero-actions > * {
        width: 100% !important;
        min-width: 0;
    }

    /* Toolbars móveis sem a funcionalidade de densidade. */
    .crm-table-toolbar-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .crm-table-toolbar-actions > .crm-preference-picker {
        margin-left: auto;
    }

    /* Evita foco de toque persistente no botão hambúrguer no Safari. */
    @media (pointer: coarse) {
        .crm-sidebar-trigger:focus:not(:focus-visible) {
            color: inherit;
            background: var(--crm-surface);
            border-color: var(--crm-border);
            box-shadow: none;
            outline: 0;
        }
    }
}

@media (max-width: 340px) {
    .crm-list-metrics,
    .crm-metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Checkboxes: aparência central previsível em Safari/Chrome. */
.crm-checkbox input[type="checkbox"],
.crm-preference-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    accent-color: var(--crm-primary);
    vertical-align: middle;
}

/* Seções de formulário: título e descrição permanecem juntos e alinhados. */
.crm-form-section-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 16px;
}
.crm-form-section-description {
    grid-column: 1;
    max-width: 72ch;
    margin: 0;
    text-align: left;
}
.crm-form-section-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* CRM UI STABILIZATION WAVE 1 END */

/* CRM UI STABILIZATION WAVE 2 FIX2 — 0.13.8-r2 */

/*
 * A tabela não possui viewport vertical própria.
 * O documento é o único responsável pela rolagem vertical.
 */
.crm-table-shell,
.crm-data-panel .crm-table-shell {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
}

.crm-table-shell:not([data-crm-overflow="true"]) {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.crm-table-shell[data-crm-overflow="true"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/*
 * Cabeçalho canônico:
 * conteúdo | restaurar padrão | fechar.
 */
.crm-preference-picker-panel > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 10px;
}

.crm-preference-picker-panel > header > div {
    min-width: 0;
}

.crm-preference-picker-close {
    flex: 0 0 auto;
}

@media (min-width: 901px) {
    .crm-preference-picker-close {
        display: none !important;
    }
}

@media (max-width: 900px) {
    /*
     * O overlay ocupa toda a viewport e alinha o painel no rodapé.
     * Isso evita o bug do Safari em que o painel ficava parcialmente fora da tela.
     */
    .crm-filter-shell .crm-preference-picker[open] {
        position: fixed !important;
        inset: 0 !important;
        z-index: 6200 !important;

        display: flex !important;
        align-items: flex-end !important;
        justify-content: stretch !important;

        width: 100% !important;
        height: var(--crm-mobile-viewport-height, 100dvh) !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        pointer-events: auto !important;
        visibility: visible !important;
        isolation: isolate;
        background: transparent !important;
    }

    .crm-filter-shell .crm-preference-picker[open]::before {
        position: absolute;
        inset: 0;
        content: "";
        background: rgba(15, 23, 42, 0.42);
    }

    .crm-filter-shell .crm-preference-picker[open] > summary {
        display: none !important;
    }

    .crm-filter-shell
        .crm-preference-picker[open]
        > .crm-preference-picker-panel {
        position: relative !important;
        inset: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        z-index: 1 !important;

        display: flex !important;
        flex-direction: column !important;
        align-self: flex-end !important;
        flex: 0 1 auto !important;

        width: 100% !important;
        max-width: none !important;
        min-height: 240px !important;
        height: auto !important;
        max-height: min(
            84dvh,
            calc(var(--crm-mobile-viewport-height, 100dvh) - 12px)
        ) !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        transform: none !important;

        border-radius: 22px 22px 0 0 !important;
        background: var(--crm-surface, #fff);
        box-shadow: 0 -18px 48px rgba(15, 23, 42, 0.18);
    }

    .crm-filter-shell
        .crm-preference-picker-panel
        > header {
        position: relative !important;
        z-index: 2;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto 40px !important;
        align-items: center !important;
        gap: 8px 10px !important;

        width: 100% !important;
        min-height: 74px !important;

        padding: 14px 12px 13px 16px !important;
        margin: 0 !important;

        border-bottom: 1px solid var(--crm-border);
        background: var(--crm-surface, #fff);
    }

    .crm-filter-shell
        .crm-preference-picker-panel
        > header
        > div {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    .crm-filter-shell
        .crm-preference-picker-panel
        > header
        .crm-link-button {
        grid-column: 2 !important;
        align-self: center !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }

    .crm-filter-shell
        .crm-preference-picker-panel
        > header
        .crm-preference-picker-close {
        grid-column: 3 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        justify-self: end !important;

        position: static !important;
        inset: auto !important;

        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .crm-filter-shell
        .crm-preference-picker-panel
        > header
        p {
        margin: 3px 0 0 !important;
    }

    /*
     * Apenas a lista de opções rola.
     */
    .crm-filter-shell .crm-preference-picker-options {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;

        padding: 8px 16px max(18px, env(safe-area-inset-bottom)) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /*
     * O botão fechar do painel pai não aparece junto com o do picker.
     */
    .crm-filter-shell:has(.crm-preference-picker[open])
        .crm-filter-mobile-close {
        display: none !important;
    }
}

/* CRM UI STABILIZATION WAVE 2 FIX2 END */

/* CRM UI UNIFIED RESPONSIVE CONTRACTS 0.14.0 */
@media (max-width:900px) {
  .crm-page-header,.crm-list-header,.crm-record-form-heading { grid-template-columns:1fr; gap:12px; }
  .crm-page-header-actions,.crm-list-header-actions,.crm-record-form-heading-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); width:100%; }
  .crm-page-header-actions > *,.crm-list-header-actions > *,.crm-record-form-heading-actions > * { width:100%; justify-content:center; }
  .crm-form-section-header { grid-template-columns:1fr; gap:6px; }
  .crm-form-section-description { max-width:none; }
  .crm-form-section-actions { justify-self:start; width:100%; }
  .crm-form-actions-inner { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); width:100%; }
  .crm-form-actions-inner > * { width:100%; justify-content:center; }
  .crm-table-toolbar { grid-template-columns:1fr; }
  .crm-table-toolbar-actions { justify-content:flex-start; width:100%; }
  .crm-plugin-manager-page .crm-page-header-description { overflow-wrap:anywhere; }
  .crm-plugin-manager-page .crm-upload-zone { display:grid; grid-template-columns:1fr; gap:12px; min-width:0; }
  .crm-plugin-manager-page .crm-file-input { display:block; width:100%; font-size:16px; overflow:hidden; }
  .crm-plugin-manager-page .crm-selected-package { display:grid; grid-template-columns:1fr; gap:6px; min-width:0; }
  .crm-plugin-manager-page .crm-selected-package span { overflow-wrap:anywhere; }
  .crm-plugin-grid { grid-template-columns:1fr !important; }
}
@media (max-width:430px) {
  .crm-page-header-actions,.crm-list-header-actions,.crm-record-form-heading-actions,.crm-form-actions-inner { grid-template-columns:1fr; }
}
/* CRM UI UNIFIED RESPONSIVE CONTRACTS 0.14.0 END */

.crm-form-workspace-aside .crm-table td,
.crm-form-workspace-aside .crm-table th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.crm-form-workspace-aside code {
    white-space: normal;
    overflow-wrap: anywhere;
}


/* Import Mapping — lista de campos da origem */
.crm-source-field-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-source-field-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px 2px;
    border-bottom: 1px solid var(--crm-border, #dfe5ee);
    min-width: 0;
}

.crm-source-field-item:last-child {
    border-bottom: 0;
}

.crm-source-field-content {
    min-width: 0;
}

.crm-source-field-label {
    display: block;
    margin: 0 0 4px;
    color: var(--crm-text, #152238);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.crm-source-field-value {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: var(--crm-text-muted, #5f6f85);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.crm-source-field-copy {
    flex: 0 0 auto;
    align-self: start;
}

.crm-form-workspace-aside,
.crm-form-workspace-aside > *,
.crm-source-samples,
.crm-source-sample-body {
    min-width: 0;
    max-width: 100%;
}


/* Import Mapping 2.11.3 — produtividade do editor */
.crm-mapping-fields-panel .crm-profile-panel-body,
.crm-source-fields-panel .crm-profile-panel-body {
    max-height: calc(100vh - 330px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.crm-mapping-fields-panel .crm-table-shell {
    overflow: visible;
}

.crm-mapping-fields-panel .crm-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--crm-surface-muted, #f6f8fb);
    box-shadow: 0 1px 0 var(--crm-border, #dfe5ee);
}

.crm-expression-editor {
    position: relative;
    min-width: 0;
}

.crm-expression-input {
    min-height: var(--crm-control-height, 38px);
    height: var(--crm-control-height, 38px);
    padding-right: 38px;
    resize: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: pre;
}

.crm-expression-editor.is-active .crm-expression-input {
    border-color: var(--crm-primary, #2563eb);
    box-shadow: 0 0 0 2px var(--crm-primary-soft, rgba(37, 99, 235, .12));
}

.crm-expression-editor.is-expanded .crm-expression-input {
    min-height: 116px;
    height: 116px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.crm-expression-expand {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
    min-width: 30px;
}

.crm-expression-editor.is-expanded .crm-expression-expand svg {
    transform: rotate(180deg);
}

.crm-expression-helper {
    display: block;
    margin-top: 4px;
    line-height: 1.25;
}

.crm-source-field-insert {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.crm-source-field-insert:focus-visible {
    outline: 2px solid var(--crm-primary, #2563eb);
    outline-offset: 3px;
    border-radius: 4px;
}

.crm-source-field-item:hover {
    background: var(--crm-primary-soft, rgba(37, 99, 235, .06));
}

.crm-source-field-item {
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 6px;
}

.crm-source-field-value {
    pointer-events: none;
}

@media (max-width: 1180px) {
    .crm-mapping-fields-panel .crm-profile-panel-body,
    .crm-source-fields-panel .crm-profile-panel-body {
        max-height: 52vh;
    }
}


/* Import Mapping 2.11.4 — editor compacto e painéis independentes */
.crm-mapping-fields-panel .crm-profile-panel-body,
.crm-source-fields-panel .crm-profile-panel-body {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.crm-import-mapping-table textarea.crm-control.crm-expression-input,
.crm-expression-editor textarea.crm-control.crm-expression-input {
    min-height: var(--crm-control-height, 38px) !important;
    height: var(--crm-control-height, 38px) !important;
    max-height: var(--crm-control-height, 38px) !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    padding-right: 40px !important;
    line-height: 20px !important;
    resize: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
}

.crm-expression-editor.is-expanded textarea.crm-control.crm-expression-input {
    min-height: 116px !important;
    height: 116px !important;
    max-height: none !important;
    white-space: pre-wrap !important;
    overflow-y: auto !important;
    resize: vertical !important;
}

.crm-expression-editor {
    position: relative;
    min-width: 0;
}

.crm-expression-expand {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 30px;
    min-width: 30px;
    height: 30px;
    z-index: 2;
}

.crm-expression-editor.is-active textarea.crm-expression-input {
    border-color: var(--crm-primary, #2563eb) !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .12) !important;
}

.crm-source-field-insert {
    display: grid;
    gap: 3px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.crm-source-field-item {
    align-items: start;
}

.crm-source-field-item:hover {
    background: color-mix(in srgb, var(--crm-primary, #2563eb) 6%, transparent);
}

@media (max-width: 1180px) {
    .crm-mapping-fields-panel .crm-profile-panel-body,
    .crm-source-fields-panel .crm-profile-panel-body {
        max-height: 52vh;
    }
}


/* UI FOUNDATION 0.15.1 — PREFERENCE PICKER DESKTOP LAYER */

/*
 * Preference picker é um popover da Foundation.
 *
 * Quando aberto dentro de uma listagem operacional,
 * precisa estar acima de tabela e sticky headers.
 */
@media (min-width: 901px) {

    .crm-data-panel:has(.crm-preference-picker[open]) {
        position: relative !important;
        overflow: visible !important;
        z-index: 2000 !important;
        isolation: isolate;
    }

    .crm-data-panel:has(.crm-preference-picker[open])
    .crm-table-toolbar {
        position: relative !important;
        overflow: visible !important;
        z-index: 2010 !important;
    }

    .crm-data-panel
    .crm-preference-picker {
        position: relative;
    }

    .crm-data-panel
    .crm-preference-picker[open] {
        z-index: 2020 !important;
    }

    .crm-data-panel
    .crm-preference-picker[open]
    > .crm-preference-picker-panel {
        z-index: 2030 !important;
    }

    .crm-data-panel:has(.crm-preference-picker[open])
    .crm-table-shell {
        position: relative;
        z-index: 1 !important;
    }

    .crm-data-panel:has(.crm-preference-picker[open])
    .crm-data-table thead {
        z-index: 1 !important;
    }
}

/* UI FOUNDATION 0.15.1 — PREFERENCE PICKER DESKTOP LAYER END */


/* UI FOUNDATION MOBILE LAYOUT 0.15.3 — RECORD DETAIL DATA GRID */
@media (max-width: 720px){
    .crm-record-page .crm-key-value-list{
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .crm-record-page .crm-key-value-row:nth-child(2){
        border-top: 1px solid #edf0f4;
    }

    .crm-image-preview-figure{
        min-height: 180px;
        padding: 10px;
    }

    .crm-image-preview-figure img{
        max-height: 72vh;
    }
}
/* UI FOUNDATION MOBILE LAYOUT 0.15.3 — RECORD DETAIL DATA GRID END */


/* CRM LIST METRICS RESPONSIVE ROW FILL 0.17.1
 * Total unlimited; maximum 6 per row on wide desktop.
 * Flex-grow makes every row consume 100% of available width.
 */
@media (max-width: 1200px) {
    .crm-list-metrics > .crm-list-metric {
        flex-basis: calc((100% - 30px) / 4);
    }
}

@media (max-width: 900px) {
    .crm-list-metrics > .crm-list-metric {
        flex-basis: calc((100% - 10px) / 2);
    }
}

@media (max-width: 520px) {
    .crm-list-metrics > .crm-list-metric {
        flex-basis: 100%;
    }
}

/* CRM_RECORD_MOBILE_OVERFLOW_CONTAINMENT_V1
 *
 * Record Detail mobile containment.
 *
 * O Record Detail permanece limitado à largura disponível.
 * Métricas e abas conservam os próprios scrollers horizontais.
 * Nenhuma máscara de overflow é aplicada ao html/body.
 */
@media (max-width: 680px) {
    .crm-record-page,
    .crm-record-page > *,
    .crm-record-page .crm-record-hero,
    .crm-record-page .crm-record-hero-main,
    .crm-record-page .crm-record-identity,
    .crm-record-page .crm-record-badges,
    .crm-record-page .crm-record-contacts,
    .crm-record-page .crm-profile-grid,
    .crm-record-page .crm-profile-column,
    .crm-record-page .crm-profile-panel,
    .crm-record-page .crm-profile-panel-header,
    .crm-record-page .crm-profile-panel-body,
    .crm-record-page .crm-record-tabs,
    .crm-record-page .crm-record-tabs-scroll {
        box-sizing: border-box;
        min-inline-size: 0;
        max-inline-size: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /*
     * Remove no mobile o full-bleed negativo da faixa de métricas.
     * O scroll horizontal permanece pertencendo à própria faixa.
     */
    .crm-record-page .crm-metric-strip {
        box-sizing: border-box;

        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        margin-inline: 0;
        margin-left: 0;
        margin-right: 0;

        padding-inline: 0;
        padding-left: 0;
        padding-right: 0;

        contain: inline-size;

        overflow-x: auto;
        overflow-y: hidden;

        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .crm-record-page .crm-metric-card {
        flex: 0 0 190px;
        width: 190px;
        min-width: 190px;
        max-width: 190px;
        scroll-snap-align: start;
    }

    /*
     * A soma das abas não participa da largura intrínseca da página.
     */
    .crm-record-page .crm-record-tabs,
    .crm-record-page .crm-record-tabs-scroll {
        box-sizing: border-box;

        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;

        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .crm-record-page .crm-record-tabs-scroll {
        contain: inline-size;

        overflow-x: auto;
        overflow-y: hidden;

        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .crm-record-page .crm-record-tabs-scroll::-webkit-scrollbar {
        display: none;
    }

    .crm-record-page .crm-record-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /*
     * E-mails e identificadores longos quebram dentro do hero.
     */
    .crm-record-page .crm-contact-inline,
    .crm-record-page .crm-contact-inline > *,
    .crm-record-page .crm-record-identifier,
    .crm-record-page .crm-record-identifier > span {
        min-inline-size: 0;
        max-inline-size: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .crm-record-page .crm-contact-inline > a,
    .crm-record-page .crm-contact-inline > span,
    .crm-record-page .crm-record-identifier > span {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* CRM CHANNEL WORKSPACES R1 — NAVIGATION FLYOUT */
.crm-navigation-group{position:relative;min-width:0}
.crm-navigation-group>summary{list-style:none;cursor:pointer}
.crm-navigation-group>summary::-webkit-details-marker{display:none}
.crm-navigation-group>summary.crm-navigation-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto}
.crm-navigation-group>summary.crm-navigation-link>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-navigation-expander{display:inline-flex;align-items:center;justify-content:center;min-width:18px;color:currentColor;transition:transform 140ms ease}
.crm-navigation-group[open]>summary .crm-navigation-expander{transform:rotate(90deg)}
.crm-navigation-flyout{display:none;min-width:0;gap:4px;padding:8px;color:var(--crm-sidebar-text);background:var(--crm-sidebar-surface);border:1px solid var(--crm-sidebar-border);border-radius:10px;box-shadow:var(--crm-shadow-float)}
.crm-navigation-group[open]>.crm-navigation-flyout{display:grid}
.crm-navigation-flyout-link{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;min-height:38px;gap:10px;padding:8px 10px;color:var(--crm-sidebar-muted);border-radius:8px;text-decoration:none}
.crm-navigation-flyout-link>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-navigation-flyout-link:hover,.crm-navigation-flyout-link:focus-visible,.crm-navigation-flyout-link.is-active{color:var(--crm-sidebar-text);background:rgba(255,255,255,.08);text-decoration:none}
@media (min-width:901px) and (hover:hover) and (pointer:fine){.crm-navigation-flyout{position:fixed;z-index:5100;top:var(--crm-navigation-flyout-top,0);left:var(--crm-navigation-flyout-left,calc(var(--crm-sidebar-width) + 8px));width:260px;max-height:min(70vh,640px);overflow-x:hidden;overflow-y:auto}}
@media (max-width:900px),(hover:none),(pointer:coarse){.crm-navigation-flyout{position:static;width:auto;margin:4px 0 8px 30px;padding:5px;background:rgba(255,255,255,.035);border-radius:8px;box-shadow:none}.crm-navigation-flyout-link{min-height:40px}}
@media (prefers-reduced-motion:reduce){.crm-navigation-expander{transition:none}}


/* CRM_PROFILE_GRID_25_40_35_V3_INDEPENDENT_COLUMNS
   Perfil 360:
   25% + 40% + 35%.

   A diferença desta versão é importante:
   as duas áreas maiores são pilhas verticais independentes.
   Um card alto de uma coluna não empurra os cards da outra.
*/
.crm-profile-slot-columns {
    display: grid;
    gap: var(--crm-space-4, 1rem);
    align-items: start;
}

.crm-profile-slot-columns.is-single {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    .crm-profile-grid.crm-profile-grid-25-40-35 {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 3fr);
        align-items: start;
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    > .crm-profile-column {
        min-width: 0;
        align-self: start;
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    > .crm-profile-column:nth-child(2) {
        display: block;
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    .crm-profile-slot-columns:not(.is-single) {
        grid-template-columns:
            minmax(0, 8fr)
            minmax(0, 7fr);
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    .crm-profile-slot-columns
    > .crm-profile-column {
        min-width: 0;
        align-self: start;
    }

    .crm-profile-grid.crm-profile-grid-25-40-35
    > .crm-profile-column:first-child
    .crm-key-value-list {
        grid-template-columns:
            minmax(0, 1fr);
    }
}

/* SOURCE MODULE: foundation/95-filter-contract.css */
/* UI FOUNDATION 0.15.1 — EXPLICIT FILTER SUBMIT */

/*
 * Desktop
 */

.crm-filter-bar {
    position: relative;
    z-index: 2000;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    isolation: auto;
}

.crm-filter-mobile-trigger {
    display: none !important;
}

.crm-filter-mobile-indicator {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
}

.crm-filter-shell {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

.crm-filter-surface {
    width: 100%;
    min-width: 0;
    padding: 18px;
    overflow: visible;
    border: 1px solid var(--crm-border);
    border-radius: var(--crm-radius-lg);
    background: var(--crm-surface);
    box-shadow: var(--crm-shadow-card);
}

.crm-filter-bar-header,
.crm-filter-bar-header-actions,
.crm-filter-bar-settings,
.crm-filter-body,
.crm-filter-grid {
    overflow: visible;
}

.crm-filter-bar-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.crm-filter-bar-settings {
    position: relative;
    z-index: 2010;
}

/*
 * O fechamento pertence somente ao bottom sheet mobile.
 */
.crm-filter-bar
.crm-filter-bar-header-actions
.crm-filter-mobile-close {
    display: none !important;
}

/*
 * Campos sem span explícito nunca ocupam somente 1/12 da grade.
 */
.crm-filter-grid > .crm-field:not([class*="crm-field-span-"]),
.crm-filter-grid > .crm-form-fieldset:not([class*="crm-field-span-"]) {
    grid-column: span 3;
}

/*
 * A ação submit integra a mesma grade no desktop.
 */
.crm-filter-actions {
    display: flex;
    grid-column: span 2;
    align-items: flex-end;
    align-self: end;
    justify-content: flex-end;
    min-width: 0;
}

.crm-filter-actions > .crm-button,
.crm-filter-actions > form,
.crm-filter-actions > form > .crm-button {
    width: 100%;
}

/*
 * Preferências de filtros devem sobrepor tabelas e cards posteriores.
 */
.crm-filter-bar .crm-preference-picker {
    position: relative;
    z-index: 2020;
    overflow: visible;
    isolation: auto;
}

.crm-filter-bar .crm-preference-picker[open] {
    z-index: 2040;
}

.crm-filter-bar .crm-preference-picker-panel {
    position: absolute;
    z-index: 2050;
    overflow: auto;
    isolation: auto;
}

.crm-filter-bar:has(.crm-preference-picker[open]) {
    z-index: 2100;
}

/*
 * A tabela permanece em camada inferior ao filtro.
 */
.crm-filter-bar ~ .crm-data-panel,
.crm-list-stack > .crm-data-panel,
.crm-list-page .crm-data-panel {
    position: relative;
    z-index: 1;
}

.crm-data-panel .crm-table-shell {
    position: relative;
    z-index: 1;
}

/*
 * Estruturas de listagem não podem recortar o seletor.
 */
.crm-list-stack,
.crm-list-page,
.crm-list-page > .crm-stack,
.crm-list-page > .crm-list-stack {
    overflow: visible;
}

/*
 * Mobile
 */


@media (max-width: 900px) {
    .crm-filter-bar {
        z-index: 2000;
    }

    .crm-filter-mobile-trigger {
        display: inline-flex !important;
        width: 100%;
        min-height: 42px;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .crm-filter-shell {
        position: fixed;
        inset: 0;
        z-index: 2200;
        display: flex;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        align-items: flex-end;
        justify-content: center;
        visibility: hidden;
        overflow: hidden;
        background: rgb(15 23 42 / 44%);
        opacity: 0;
        pointer-events: none;
        transition:
            opacity 160ms ease,
            visibility 160ms ease;
    }

    .crm-filter-shell.is-open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .crm-filter-surface {
        display: flex;
        width: 100%;
        max-width: none;
        max-height: min(88dvh, 760px);
        flex-direction: column;
        margin-top: auto;
        padding: 0;
        overflow: hidden;
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -18px 48px rgb(15 23 42 / 24%);
        transform: translateY(24px);
        transition: transform 180ms ease;
    }

    .crm-filter-shell.is-open .crm-filter-surface {
        transform: translateY(0);
    }

    .crm-filter-shell .crm-filter-bar-header {
        flex: 0 0 auto;
        padding: 15px 16px;
        overflow: visible;
        border-bottom: 1px solid var(--crm-border);
    }

    .crm-filter-shell .crm-filter-bar-heading {
        display: block;
    }

    .crm-filter-shell .crm-filter-bar-heading p {
        display: none;
    }

    .crm-filter-bar
    .crm-filter-bar-header-actions
    .crm-filter-mobile-close {
        display: inline-flex !important;
    }

    .crm-filter-body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding:
            16px
            16px
            max(16px, env(safe-area-inset-bottom));
    }

    .crm-filter-grid {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 14px;
    }

    .crm-filter-grid > :where(
        .crm-field,
        .crm-form-fieldset
    ),
    .crm-filter-grid > [class*="crm-field-span-"] {
        grid-column: 1 / -1 !important;
        width: 100%;
        min-width: 0;
    }

    .crm-filter-actions {
        position: sticky;
        bottom: calc(
            -1 * max(
                16px,
                env(safe-area-inset-bottom)
            )
        );
        z-index: 3;
        grid-column: 1 / -1;
        width: calc(100% + 32px);
        margin: 4px -16px 0;
        padding:
            12px
            16px
            max(12px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--crm-border);
        background: var(--crm-surface);
    }

    .crm-filter-actions > .crm-button {
        width: 100%;
        justify-content: center;
    }

    .crm-filter-bar > .crm-active-filters {
        margin-top: 10px;
    }

    .crm-filter-bar .crm-preference-picker {
        z-index: auto;
    }

    .crm-filter-bar .crm-preference-picker-panel {
        position: static;
        z-index: auto;
        width: 100%;
        max-width: none;
        margin-top: 8px;
        overflow: visible;
        box-shadow: none;
    }
}


/* CRM FILTER EXPLICIT SUBMIT LAYOUT */

.crm-filter-submit-form {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
}

/*
 * Todos os filtros, inclusive os que usam Livewire, possuem
 * uma ação explícita de aplicação.
 */
.crm-filter-bar[data-crm-filter-mode="submit"]
.crm-filter-grid {
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 180px), 1fr)
    );
    align-items: end;
}

.crm-filter-bar[data-crm-filter-mode="submit"]
.crm-filter-grid > :where(
    .crm-field,
    .crm-form-fieldset,
    .crm-filter-actions
) {
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
}

.crm-filter-bar[data-crm-filter-mode="submit"]
.crm-filter-actions {
    display: flex;
    min-height: var(--crm-control-height, 42px);
    align-items: flex-end;
    align-self: end;
}

.crm-filter-bar[data-crm-filter-mode="submit"]
.crm-filter-actions > .crm-button {
    width: 100%;
    min-height: var(--crm-control-height, 42px);
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .crm-filter-bar[data-crm-filter-mode="submit"]
    .crm-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .crm-filter-bar[data-crm-filter-mode="submit"]
    .crm-filter-grid > :where(
        .crm-field,
        .crm-form-fieldset,
        .crm-filter-actions
    ) {
        grid-column: 1 / -1 !important;
    }
}

/* CRM FILTER EXPLICIT SUBMIT LAYOUT END */

/* UI FOUNDATION 0.15.1 — EXPLICIT FILTER SUBMIT END */


/* CRM FILTER STABILIZATION WAVE 1 — 0.13.8-r2 */

/* Desktop: a ação integra a última coluna, sem cair sozinha em uma nova linha larga. */
@media (min-width: 901px) {
    .crm-filter-bar[data-crm-filter-mode="submit"] .crm-filter-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .crm-filter-bar[data-crm-filter-mode="submit"] .crm-filter-actions {
        min-width: 150px;
        max-width: 240px;
        justify-self: stretch;
    }
}

@media (max-width: 900px) {
    .crm-filter-bar { z-index: 2800; }
    .crm-filter-shell { z-index: 3000; }

    /* O seletor Campos de filtro vira uma única tela dentro do bottom sheet. */
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-filter-bar-heading,
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-filter-body {
        display: none;
    }
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-filter-bar-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-filter-bar-header-actions,
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-filter-bar-settings {
        width: 100%;
        min-width: 0;
    }
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-filter-bar-settings {
        grid-column: 1;
    }
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-preference-picker > summary {
        display: none;
    }
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-preference-picker-panel {
        display: flex;
        width: 100%;
        max-height: calc(88dvh - 88px);
        flex-direction: column;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-preference-picker-panel > header {
        padding: 0 0 12px;
    }
    .crm-filter-surface:has(.crm-preference-picker[open]) .crm-preference-picker-options {
        overflow-y: auto;
        padding: 4px 2px max(18px, env(safe-area-inset-bottom));
    }
}

/* CRM FILTER STABILIZATION WAVE 1 END */

/* CRM UI PREFERENCE MOBILE PORTAL CSS — FIX3 */

@media (max-width: 900px) {
    body.crm-preference-portal-open {
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: none;
    }

    body.crm-preference-portal-open
        .crm-filter-mobile-close {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /*
     * O portal é filho direto do body. Portanto, não sofre influência
     * de overflow, transform ou contain presentes no filtro pai.
     */
    .crm-preference-mobile-portal {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10000 !important;

        display: flex !important;
        align-items: flex-end !important;
        justify-content: stretch !important;

        width: 100vw !important;
        height: var(--crm-mobile-viewport-height, 100dvh) !important;
        min-height: 100svh !important;

        padding:
            0
            var(--crm-safe-area-right, env(safe-area-inset-right))
            0
            var(--crm-safe-area-left, env(safe-area-inset-left))
            !important;

        overflow: hidden !important;

        background: rgba(15, 23, 42, 0.46);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity 150ms ease,
            visibility 150ms ease;
    }

    .crm-preference-mobile-portal.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .crm-preference-mobile-portal
        > .crm-preference-picker-panel {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        z-index: 1 !important;

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: min(
            78dvh,
            calc(
                var(--crm-mobile-viewport-height, 100dvh)
                - var(--crm-safe-area-top, env(safe-area-inset-top))
                - 16px
            )
        ) !important;

        min-height: 320px !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
        transform: translateY(18px);

        border: 1px solid var(--crm-border);
        border-bottom: 0;
        border-radius: 22px 22px 0 0 !important;

        background: var(--crm-surface, #fff);
        box-shadow: 0 -20px 52px rgba(15, 23, 42, 0.25);

        transition: transform 170ms ease;
    }

    .crm-preference-mobile-portal.is-visible
        > .crm-preference-picker-panel {
        transform: translateY(0);
    }

    .crm-preference-mobile-portal
        .crm-preference-picker-panel
        > header {
        position: relative !important;
        z-index: 2 !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            auto
            40px !important;

        align-items: center !important;
        gap: 8px 10px !important;

        flex: 0 0 auto !important;

        width: 100% !important;
        min-height: 76px !important;

        margin: 0 !important;
        padding: 14px 12px 13px 16px !important;

        overflow: visible !important;

        border-bottom: 1px solid var(--crm-border);
        background: var(--crm-surface, #fff);
    }

    .crm-preference-mobile-portal
        .crm-preference-picker-panel
        > header
        > div {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    .crm-preference-mobile-portal
        .crm-preference-picker-panel
        > header
        strong {
        display: block;
        line-height: 1.25;
    }

    .crm-preference-mobile-portal
        .crm-preference-picker-panel
        > header
        p {
        margin: 3px 0 0 !important;
        line-height: 1.35;
    }

    .crm-preference-mobile-portal
        .crm-preference-picker-panel
        > header
        .crm-link-button {
        grid-column: 2 !important;
        align-self: center !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }

    .crm-preference-mobile-portal
        .crm-preference-picker-close {
        position: static !important;
        inset: auto !important;

        grid-column: 3 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        align-self: center !important;
        justify-self: end !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .crm-preference-mobile-portal
        .crm-preference-picker-options {
        flex: 1 1 auto !important;
        min-height: 0 !important;

        width: 100% !important;

        margin: 0 !important;
        padding:
            8px
            16px
            max(
                20px,
                var(
                    --crm-safe-area-bottom,
                    env(safe-area-inset-bottom)
                )
            )
            !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /*
     * O painel original permanece invisível enquanto está portado.
     * O espaço do acionador não é alterado.
     */
    .crm-preference-picker.is-mobile-portaled {
        isolation: auto !important;
    }
}

/* CRM UI PREFERENCE MOBILE PORTAL CSS — FIX3 END */

/* ============================================================
   UI FOUNDATION 0.16.2 — SMARTTABLE COLUMN RESIZE CONTRACT
   Contextual filters, permanent sorting and reorderable columns.
   ============================================================ */

/* UI FOUNDATION MOBILE LAYOUT 0.16.2 */

.crm-smart-table-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 520px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 16px 15px;
}

.crm-smart-table-search {
    display: block;
    min-width: 0;
}

.crm-smart-table-search .crm-search-control { min-width: 0; }

.crm-smart-table-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.crm-smart-table-count {
    color: var(--crm-text-muted);
    font-size: 11px;
    font-weight: 650;
    white-space: nowrap;
}

.crm-smart-table-active-filters {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-height: 0;
    padding-top: 1px;
}

.crm-smart-table-active-filters:empty { display: none; }

.crm-smart-filter-panel,
.crm-smart-column-menu {
    position: relative;
}

.crm-smart-filter-panel > summary,
.crm-smart-column-menu > summary {
    list-style: none;
}

.crm-smart-filter-panel > summary::-webkit-details-marker,
.crm-smart-column-menu > summary::-webkit-details-marker {
    display: none;
}

.crm-smart-filter-popover {
    position: absolute;
    z-index: var(--crm-z-dropdown, 40);
    top: calc(100% + 8px);
    right: 0;
    width: min(700px, calc(100vw - 40px));
    max-height: min(70vh, 620px);
    overflow: auto;
    padding: 14px;
    border: 1px solid var(--crm-border);
    border-radius: 12px;
    background: var(--crm-surface);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
}

.crm-smart-filter-popover > header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.crm-smart-filter-popover > header > div { display: grid; gap: 2px; }
.crm-smart-filter-popover > header strong { font-size: 13px; }
.crm-smart-filter-popover > header p { margin: 0; color: var(--crm-text-muted); font-size: 11px; }

.crm-smart-filter-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
}

.crm-smart-filter-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--crm-border);
}

.crm-active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
}

.crm-filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    text-decoration: none;
    opacity: .72;
}

.crm-filter-chip-remove:hover,
.crm-filter-chip-remove:focus-visible {
    background: rgba(15, 23, 42, .08);
    opacity: 1;
}

.crm-smart-column-header {
    position: relative;
    vertical-align: middle;
    user-select: none;
}

.crm-smart-column-header.is-dragging { opacity: .45; }
.crm-smart-column-header.is-drag-target { box-shadow: inset 2px 0 0 var(--crm-primary); }

.crm-smart-column-header[data-crm-column-resizable="true"] {
    isolation: auto;
}

.crm-smart-column-resizer {
    position: absolute;
    z-index: 5;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    padding: 0;
    border: 0;
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

.crm-smart-column-resizer::after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 4px;
    width: 1px;
    border-radius: 1px;
    background: transparent;
    transition: background 120ms ease, width 120ms ease;
}

.crm-smart-column-header:hover > .crm-smart-column-resizer::after,
.crm-smart-column-resizer:focus-visible::after,
.crm-smart-column-header.is-resizing > .crm-smart-column-resizer::after {
    width: 2px;
    background: var(--crm-primary);
}

.crm-smart-column-resizer:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--crm-primary) 24%, transparent);
}

body.is-crm-column-resizing,
body.is-crm-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.crm-smart-column-resize-guide {
    position: absolute;
    z-index: calc(var(--crm-z-dropdown, 40) - 2);
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in srgb, var(--crm-primary) 72%, transparent);
    pointer-events: none;
}

.crm-column-picker-reset-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.crm-column-picker-reset-actions .crm-link-button {
    cursor: pointer;
}

.crm-column-width-status {
    display: block;
    min-height: 14px;
    margin-top: 3px;
    color: var(--crm-text-muted);
    font-size: 10px;
    font-weight: 550;
}

.crm-column-width-status[data-tone="success"] { color: var(--crm-success); }
.crm-column-width-status[data-tone="danger"] { color: var(--crm-danger); }

.crm-smart-column-header-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.crm-smart-column-sort,
.crm-smart-column-label {
    min-width: 0;
    flex: 1 1 auto;
}

.crm-smart-column-sort {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.crm-smart-column-header.is-sorted .crm-smart-column-sort { color: var(--crm-primary); }
.crm-smart-column-sort:focus-visible { outline: 2px solid var(--crm-primary); outline-offset: 3px; border-radius: 4px; }

.crm-smart-column-menu { flex: 0 0 auto; }

.crm-smart-column-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    color: var(--crm-text-muted);
    cursor: pointer;
    opacity: .45;
}

.crm-smart-column-header:hover .crm-smart-column-menu-trigger,
.crm-smart-column-header:focus-within .crm-smart-column-menu-trigger,
.crm-smart-column-menu[open] .crm-smart-column-menu-trigger { opacity: 1; background: var(--crm-surface-muted); }

.crm-smart-column-menu-panel {
    position: absolute;
    z-index: var(--crm-z-dropdown, 40);
    top: calc(100% + 6px);
    left: 0;
    width: min(320px, calc(100vw - 36px));
    padding: 7px;
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    background: var(--crm-surface);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    text-transform: none;
    letter-spacing: normal;
    font-size: 12px;
    font-weight: 500;
    color: var(--crm-text);
}

.crm-smart-column-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
    padding: 1px 2px 5px 8px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-smart-column-menu-head > strong {
    min-width: 0;
    overflow: hidden;
    color: var(--crm-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-smart-column-menu-close {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.crm-smart-column-menu-panel > button,
.crm-smart-column-menu-panel > a {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.crm-smart-column-menu-panel > button:hover,
.crm-smart-column-menu-panel > a:hover,
.crm-smart-column-menu-panel > a:focus-visible,
.crm-smart-column-menu-panel > button:focus-visible { background: var(--crm-surface-muted); }

.crm-smart-column-filter {
    display: grid;
    gap: 8px;
    margin: 5px 0;
    padding: 10px 7px;
    border-top: 1px solid var(--crm-border);
    border-bottom: 1px solid var(--crm-border);
}

.crm-smart-column-filter > strong { font-size: 11px; color: var(--crm-text-muted); }
.crm-smart-column-filter .crm-field { margin: 0; }
.crm-smart-column-filter .crm-field > label { font-size: 10px; }


.crm-column-picker-option {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) 54px auto;
    align-items: center;
    gap: 8px;
}

.crm-column-picker-option > label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    cursor: pointer;
}

.crm-column-drag-handle {
    color: var(--crm-text-muted);
    cursor: grab;
    font-size: 11px;
    letter-spacing: -2px;
}

.crm-column-picker-option.is-dragging { opacity: .45; }
.crm-column-picker-option.is-drag-target { box-shadow: inset 0 2px 0 var(--crm-primary); }
.crm-column-picker-option.is-hidden-column .crm-column-drag-handle { opacity: .25; cursor: default; }
.crm-column-picker-option.is-hidden-column > label { grid-column: 2; }
.crm-column-picker-option.is-hidden-column .crm-column-picker-move-placeholder { grid-column: 3; width: 54px; height: 1px; }
.crm-column-picker-option.is-hidden-column > label > span { display: grid; gap: 1px; min-width: 0; }
.crm-column-picker-option.is-hidden-column > label small { color: var(--crm-text-muted); font-size: 10px; font-weight: 500; }

.crm-column-picker-move-buttons {
    display: inline-flex;
    gap: 2px;
}

.crm-column-picker-move-buttons button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--crm-text-muted);
    cursor: pointer;
}

.crm-column-picker-move-buttons button:hover,
.crm-column-picker-move-buttons button:focus-visible { background: var(--crm-surface-muted); color: var(--crm-text); }

@keyframes crm-smart-spin {
    to { transform: rotate(360deg); }
}

.crm-data-panel.is-crm-smart-loading {
    cursor: progress;
}

.crm-data-panel.is-crm-smart-loading [data-crm-smart-table-toolbar] :is(button, a, input, select, textarea),
.crm-data-panel.is-crm-smart-loading .crm-smart-column-header :is(button, a, input, select, textarea),
.crm-data-panel.is-crm-smart-loading .crm-smart-pagination-row :is(button, a, input, select, textarea) {
    pointer-events: none;
}

.crm-smart-loading-layer {
    position: absolute;
    z-index: calc(var(--crm-z-dropdown, 40) - 1);
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 9px;
    min-height: 84px;
    padding: 48px 16px 16px;
    background: rgba(255, 255, 255, .58);
    color: var(--crm-text);
    font-size: 12px;
    font-weight: 650;
    pointer-events: auto;
    backdrop-filter: blur(1px);
}

.crm-smart-loading-spinner,
.is-crm-smart-action-loading::after {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: crm-smart-spin .7s linear infinite;
}

.is-crm-smart-action-loading {
    position: relative;
    cursor: progress !important;
}

.crm-smart-column-sort.is-crm-smart-action-loading > svg,
.crm-smart-column-sort.is-crm-smart-action-loading > .crm-icon {
    display: none;
}

.crm-smart-column-sort.is-crm-smart-action-loading::after,
.crm-filter-chip-remove.is-crm-smart-action-loading::after,
.crm-pagination-button.is-crm-smart-action-loading::after,
.crm-smart-column-menu-panel > .is-crm-smart-action-loading::after,
.crm-smart-table-active-filters .crm-button.is-crm-smart-action-loading::after,
.crm-column-picker-move-buttons button.is-crm-smart-action-loading::after,
.crm-button.is-crm-smart-action-loading::after,
.crm-link-button.is-crm-smart-action-loading::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}

.crm-smart-column-header-inner.is-crm-smart-action-loading::after,
.crm-column-picker-option.is-crm-smart-action-loading::after,
.crm-field.is-crm-smart-action-loading::after,
.crm-search-control.is-crm-smart-action-loading::after {
    content: "";
    position: absolute;
    top: calc(50% - 7px);
    right: 10px;
}

.crm-smart-column-header-inner.is-crm-smart-action-loading::after,
.crm-column-picker-option.is-crm-smart-action-loading::after,
.crm-field.is-crm-smart-action-loading::after,
.crm-search-control.is-crm-smart-action-loading::after {
    animation: crm-smart-spin .7s linear infinite;
}

.crm-search-control.is-crm-smart-action-loading .crm-search-clear {
    visibility: hidden;
}

.crm-column-picker-option.is-crm-smart-action-loading {
    opacity: .72;
}

@media (max-width: 900px) {
    .crm-smart-table-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .crm-smart-table-count { grid-column: 1 / -1; justify-self: end; }
}

@media (max-width: 720px) {
    .crm-smart-table-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding-bottom: 10px;
    }
    .crm-smart-table-toolbar-actions { justify-content: flex-start; }
    .crm-smart-table-count { grid-column: 1; justify-self: start; }
    .crm-smart-filter-panel { position: static; }
    .crm-smart-filter-popover {
        position: fixed;
        z-index: var(--crm-z-modal, 80);
        inset: auto 0 0 0;
        width: 100%;
        max-height: min(82dvh, 720px);
        border-radius: 16px 16px 0 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .crm-smart-filter-grid { grid-template-columns: 1fr; }
    .crm-smart-filter-grid .crm-field { grid-column: 1 / -1 !important; }
    .crm-smart-column-menu-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-height: 72dvh; overflow: auto; }
    .crm-column-drag-handle { display: none; }
    .crm-smart-column-resizer { display: none; }
    .crm-column-picker-reset-actions { flex-wrap: wrap; justify-content: flex-start; }
}
.crm-smart-filter-field-picker { grid-column: 1 / -1; }
.crm-smart-pagination-row { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; width:100%; }
.crm-smart-pagination-row > .crm-field { width:110px; margin:0; }
@media (max-width:720px){ .crm-smart-pagination-row { align-items:stretch; } .crm-smart-pagination-row > .crm-field { width:100%; } }

/* UI FOUNDATION MOBILE LAYOUT 0.17.1 — compatibility validated; mobile rules inherited from SmartTable 0.16.2. */

/* UI FOUNDATION 0.17.8-r1 — SMARTTABLE STICKY HEADER + VIEWPORT COLUMN MENU
 *
 * - sticky header e opt-in por data-crm-sticky-header="true";
 * - menu de coluna desktop usa coordenadas de viewport calculadas pelo crm-ui.js;
 * - nenhuma tabela cria viewport vertical propria;
 * - mobile preserva o bottom-sheet ja homologado.
 */
@media (min-width: 721px) {
    .crm-table-shell[data-crm-sticky-header="true"] .crm-data-table thead th {
        position: sticky;
        top: var(--crm-topbar-height, 58px);
        z-index: 24;
        background: var(--crm-surface);
        box-shadow: inset 0 -1px 0 var(--crm-border);
    }

    .crm-table-shell[data-crm-sticky-header="true"] .crm-data-table thead th.is-crm-column-menu-open {
        z-index: calc(var(--crm-z-dropdown, 40) + 4);
    }

    .crm-smart-column-menu[data-crm-floating="true"] > .crm-smart-column-menu-panel {
        position: fixed !important;
        right: auto !important;
        bottom: auto !important;
        z-index: calc(var(--crm-z-dropdown, 40) + 8) !important;
        max-height: min(72vh, 620px);
        overflow: auto;
        overscroll-behavior: contain;
    }
}

/* UI FOUNDATION 0.17.8-r2 — GLOBAL SMARTTABLE FLOATING HEADER + PAGINATION
 *
 * Objetivos:
 * 1) todas as x-ui.table passam a ter cabeçalho visível durante o scroll da página;
 * 2) não usar position:sticky nos TH dentro do shell horizontal, evitando o gap observado;
 * 3) preservar o scroll horizontal original da tabela;
 * 4) corrigir a composição global de Por página + resumo + navegação.
 */

/* Neutraliza o sticky de TH da r1. O r2 usa uma cópia visual sincronizada via JS. */
.crm-table-shell[data-crm-sticky-header="true"] .crm-data-table thead th {
    position: static !important;
    top: auto !important;
}

/* Camada visual do cabeçalho fixo. Não participa do layout e portanto não cria espaço. */
.crm-table-floating-header {
    position: fixed;
    z-index: calc(var(--crm-z-sticky, 30) + 2);
    display: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: var(--crm-surface, #fff);
    border: 1px solid var(--crm-border, #dfe5ee);
    border-bottom: 0;
    box-shadow: 0 5px 18px rgba(24, 39, 63, .09);
    pointer-events: none;
    contain: layout paint;
}

.crm-table-floating-header.is-active {
    display: block;
}

.crm-table-floating-header-track {
    position: relative;
    width: max-content;
    min-width: 100%;
    will-change: transform;
}

.crm-table-floating-header .crm-data-table {
    margin: 0;
    min-width: 0;
    background: var(--crm-surface, #fff);
}

.crm-table-floating-header .crm-data-table thead th {
    position: static !important;
    top: auto !important;
    background: #f8fafc;
    box-shadow: inset 0 -1px 0 var(--crm-border, #dfe5ee);
}

/*
 * Paginação SmartTable:
 * o container externo passa a ser o único responsável por borda, padding e alinhamento.
 * O x-ui.pagination continua correto quando utilizado sozinho fora de crm-smart-pagination-row.
 */
.crm-smart-pagination-row {
    display: grid;
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 62px;
    padding: 10px 16px;
    border-top: 1px solid var(--crm-border);
    background: var(--crm-surface);
}

.crm-smart-pagination-row > form {
    display: block;
    margin: 0;
}

.crm-smart-pagination-row > form > .crm-field,
.crm-smart-pagination-row > .crm-field {
    display: grid;
    grid-template-columns: auto 76px;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 0;
    margin: 0;
}

.crm-smart-pagination-row > form > .crm-field .crm-field-header,
.crm-smart-pagination-row > .crm-field .crm-field-header {
    margin: 0;
}

.crm-smart-pagination-row > form > .crm-field .crm-field-header label,
.crm-smart-pagination-row > .crm-field .crm-field-header label {
    margin: 0;
    white-space: nowrap;
    font-size: 11px;
}

.crm-smart-pagination-row > form > .crm-field .crm-field-control,
.crm-smart-pagination-row > .crm-field .crm-field-control {
    min-width: 0;
}

.crm-smart-pagination-row > form > .crm-field .crm-select,
.crm-smart-pagination-row > .crm-field .crm-select {
    width: 76px;
    min-width: 76px;
}

.crm-smart-pagination-row > .crm-pagination {
    min-height: 0;
    padding: 0;
    border-top: 0;
    gap: 14px;
}

.crm-smart-pagination-row .crm-pagination-summary {
    margin-right: auto;
    white-space: nowrap;
}

.crm-smart-pagination-row .crm-pagination-controls {
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .crm-smart-pagination-row {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .crm-smart-pagination-row > form > .crm-field,
    .crm-smart-pagination-row > .crm-field {
        grid-template-columns: minmax(0, 1fr) 92px;
        width: 100%;
    }

    .crm-smart-pagination-row > form > .crm-field .crm-select,
    .crm-smart-pagination-row > .crm-field .crm-select {
        width: 92px;
        min-width: 92px;
        justify-self: end;
    }

    .crm-smart-pagination-row > .crm-pagination {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .crm-smart-pagination-row > .crm-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .crm-smart-pagination-row .crm-pagination-summary {
        width: 100%;
        text-align: center;
        white-space: normal;
    }

    .crm-smart-pagination-row .crm-pagination-controls {
        justify-content: space-between;
        width: 100%;
    }
}

/* UI FOUNDATION 0.17.8-r2e — INTERACTIVE FLOATING HEADER
 *
 * O clone visual continua sendo barreira contra hit-through, mas agora
 * funciona como uma superficie de interacao que encaminha as operacoes
 * ao THEAD real da SmartTable.
 */
.crm-table-floating-header {
    pointer-events: auto;
}

.crm-table-floating-header .crm-smart-column-sort,
.crm-table-floating-header .crm-smart-column-menu-trigger {
    pointer-events: auto;
    cursor: pointer;
}

.crm-table-floating-header th[data-crm-smart-column][draggable="true"] {
    cursor: grab;
}

.crm-table-floating-header th[data-crm-smart-column].is-dragging {
    opacity: .55;
    cursor: grabbing;
}

.crm-table-floating-header th[data-crm-smart-column].is-drag-target {
    box-shadow: inset 2px 0 0 var(--crm-primary), inset 0 -1px 0 var(--crm-border);
}

.crm-table-floating-header .crm-smart-column-resizer {
    pointer-events: auto;
    cursor: col-resize;
}


/* UI FOUNDATION 0.17.8-r3 — REAL SMARTTABLE HEADER */
.crm-table-shell[data-crm-sticky-header="true"]
.crm-data-table thead.is-crm-real-floating-header th {
    position: relative !important;
    top: var(--crm-real-header-offset, 0px) !important;
    z-index: calc(var(--crm-z-sticky, 30) + 2);
    background: #f8fafc;
    box-shadow:
        inset 0 -1px 0 var(--crm-border, #dfe5ee),
        0 5px 18px rgba(24, 39, 63, .09);
}

.crm-table-shell[data-crm-sticky-header="true"]
.crm-data-table thead.is-crm-real-floating-header
th.is-crm-column-menu-open {
    z-index: calc(var(--crm-z-dropdown, 40) + 4);
}

.crm-table-floating-header {
    display: none !important;
    pointer-events: none !important;
}

/* UI FOUNDATION 0.17.8-r4 — COLUMN PICKER DRAFT/APPLY */
.crm-column-picker[data-crm-column-picker-draft] .crm-column-picker-option.is-hidden-column {
    opacity: .72;
}

.crm-column-picker[data-crm-column-picker-draft] .crm-column-picker-option.is-hidden-column .crm-column-drag-handle {
    opacity: .25;
    cursor: default;
}

.crm-column-picker[data-crm-column-picker-draft] .crm-column-picker-option.is-hidden-column .crm-column-picker-move-buttons {
    visibility: hidden;
    pointer-events: none;
}

.crm-column-picker-apply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0 0;
    margin-top: 10px;
    border-top: 1px solid var(--crm-border);
}

.crm-column-picker-apply-actions .crm-button {
    min-width: 96px;
}

@media (max-width: 900px) {
    .crm-column-picker-apply-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        margin: 0;
        background: var(--crm-surface, #fff);
        border-top: 1px solid var(--crm-border);
    }

    .crm-column-picker-apply-actions .crm-button {
        width: 100%;
    }
}

/* UI FOUNDATION 0.17.8-r4a — COLUMN PICKER LAYOUT HOTFIX */
.crm-column-picker-panel.crm-column-picker-panel--r4a {
    width: min(460px, calc(100vw - 32px));
    max-height: min(78vh, 760px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.crm-column-picker-panel--r4a .crm-column-picker-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: start;
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--crm-border);
    background: var(--crm-surface, #fff);
}

.crm-column-picker-panel--r4a .crm-column-picker-panel-copy strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.crm-column-picker-panel--r4a .crm-column-picker-panel-copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--crm-text-muted);
    max-width: 30ch;
}

.crm-column-picker-panel--r4a .crm-column-width-status {
    display: block;
    margin-top: 6px;
}

.crm-column-picker-panel--r4a .crm-column-picker-reset-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    align-self: start;
}

.crm-column-picker-panel--r4a .crm-column-picker-reset-actions .crm-link-button {
    white-space: nowrap;
}

.crm-column-picker-panel--r4a .crm-column-picker-options {
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    margin-top: 0;
}

.crm-column-picker-panel--r4a .crm-column-picker-apply-actions--sticky {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 12px 0 0;
    margin-top: 0;
    border-top: 1px solid var(--crm-border);
    background: var(--crm-surface, #fff);
    box-shadow: 0 -10px 24px rgba(15, 23, 42, .06);
}

.crm-column-picker-panel--r4a .crm-column-picker-apply-actions--sticky .crm-button {
    min-width: 112px;
}

@media (max-width: 900px) {
    .crm-column-picker-panel.crm-column-picker-panel--r4a {
        width: min(100vw - 16px, 460px);
        max-height: min(82vh, 760px);
    }

    .crm-column-picker-panel--r4a .crm-column-picker-panel-header {
        grid-template-columns: 1fr auto;
    }

    .crm-column-picker-panel--r4a .crm-column-picker-reset-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .crm-column-picker-panel--r4a .crm-column-picker-panel-copy p {
        max-width: none;
    }

    .crm-column-picker-panel--r4a .crm-column-picker-apply-actions--sticky {
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    }

    .crm-column-picker-panel--r4a .crm-column-picker-apply-actions--sticky .crm-button {
        width: 100%;
    }
}

/* UI FOUNDATION 0.17.8-r4b — COLUMN PICKER VISUAL REFINEMENT */
.crm-column-picker-panel.crm-column-picker-panel--r4b {
    width: min(420px, calc(100vw - 32px));
    max-height: min(76vh, 720px);
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border-radius: 12px;
}

.crm-column-picker-header--r4b {
    display: block;
    padding: 16px 16px 12px;
    margin: 0;
    border-bottom: 1px solid var(--crm-border);
    background: var(--crm-surface, #fff);
}

.crm-column-picker-title-row--r4b {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 12px;
    align-items: start;
}

.crm-column-picker-heading--r4b {
    min-width: 0;
}

.crm-column-picker-heading--r4b > strong {
    display: block;
    margin: 0;
    color: var(--crm-text);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
}

.crm-column-picker-heading--r4b > p {
    max-width: 36ch;
    margin: 5px 0 0;
    color: var(--crm-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.crm-column-picker-close--r4b {
    width: 32px;
    height: 32px;
    margin: -4px -4px 0 0;
    align-self: start;
    justify-self: end;
}

.crm-column-picker-tools--r4b {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    min-height: 24px;
}

.crm-column-picker-tool--r4b {
    appearance: none;
    border: 0;
    padding: 2px 0;
    background: transparent;
    color: var(--crm-primary);
    font: inherit;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
}

.crm-column-picker-tool--r4b:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.crm-column-picker-tool--r4b:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 3px;
    border-radius: 3px;
}

.crm-column-picker-tool--r4b:disabled {
    opacity: .5;
    cursor: default;
    text-decoration: none;
}

.crm-column-picker-status--r4b {
    min-width: 0;
    margin: 0 0 0 auto;
    font-size: 11px;
    line-height: 1.3;
    color: var(--crm-text-muted);
}

.crm-column-picker-scroll--r4b {
    min-height: 0;
    margin: 0;
    padding: 4px 8px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.crm-column-picker-panel--r4b .crm-column-picker-option {
    min-height: 40px;
    padding: 7px 6px;
    border-radius: 7px;
}

.crm-column-picker-panel--r4b .crm-column-picker-option:hover {
    background: var(--crm-muted, #f8fafc);
}

.crm-column-picker-panel--r4b .crm-column-drag-handle {
    width: 14px;
    opacity: .48;
}

.crm-column-picker-panel--r4b .crm-column-picker-option label {
    min-width: 0;
}

.crm-column-picker-panel--r4b .crm-column-picker-option label strong {
    font-size: 12px;
    line-height: 1.25;
}

.crm-column-picker-panel--r4b .crm-column-picker-option label small {
    margin-top: 1px;
    font-size: 10px;
}

.crm-column-picker-panel--r4b .crm-column-picker-move-buttons {
    gap: 2px;
}

.crm-column-picker-panel--r4b .crm-column-picker-move-buttons button {
    width: 26px;
    height: 26px;
}

.crm-column-picker-footer--r4b {
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    border-top: 1px solid var(--crm-border);
    background: var(--crm-surface, #fff);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, .04);
}

.crm-column-picker-footer--r4b .crm-button {
    min-width: 92px;
    justify-content: center;
}

@media (max-width: 900px) {
    .crm-column-picker-panel.crm-column-picker-panel--r4b {
        width: min(100vw - 16px, 420px);
        max-height: min(82vh, 720px);
    }

    .crm-column-picker-header--r4b {
        padding: 14px 14px 10px;
    }

    .crm-column-picker-heading--r4b > p {
        max-width: none;
    }

    .crm-column-picker-tools--r4b {
        margin-top: 8px;
    }

    .crm-column-picker-status--r4b {
        flex-basis: 100%;
        margin-left: 0;
    }

    .crm-column-picker-footer--r4b {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }
}

/* UI FOUNDATION 0.17.8-r4c — COLUMN PICKER SIMPLE HEADER */

.crm-column-picker-panel--r4b .crm-column-picker-header--r4b {
    display: block !important;
    grid-template-columns: none !important;
    width: 100%;
    padding: 14px 16px 12px;
}

.crm-column-picker-panel--r4b .crm-column-picker-title-row--r4b {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px !important;
    width: 100%;
    gap: 8px;
    align-items: start;
}

.crm-column-picker-panel--r4b .crm-column-picker-heading--r4b {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
}

.crm-column-picker-panel--r4b
.crm-column-picker-heading--r4b > strong {
    display: block;
    width: 100%;
    margin: 0;
}

.crm-column-picker-panel--r4b
.crm-column-picker-heading--r4b > p {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
}

.crm-column-picker-panel--r4b .crm-column-picker-tools--r4b {
    display: flex !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    gap: 14px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap;
}

.crm-column-picker-panel--r4b .crm-column-picker-tool--r4b {
    margin: 0 !important;
    padding: 0 !important;
}

.crm-column-picker-panel--r4b .crm-column-picker-status--r4b {
    flex-basis: 100%;
    width: 100%;
    margin: 2px 0 0 !important;
}

.crm-column-picker-panel--r4b
.crm-column-picker-status--r4b:empty {
    display: none;
}

/* UI FOUNDATION 0.17.8-r4d — COMPACT COLUMN PICKER */

.crm-column-picker-panel--r4b .crm-column-picker-header--r4b {
    padding: 11px 14px 10px !important;
}

.crm-column-picker-panel--r4b .crm-column-picker-title-row--r4b {
    gap: 6px !important;
}

.crm-column-picker-panel--r4b
.crm-column-picker-heading--r4b > strong {
    font-size: 15px !important;
    line-height: 1.2 !important;
}

.crm-column-picker-panel--r4b
.crm-column-picker-heading--r4b > p {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    max-width: none !important;
}

.crm-column-picker-panel--r4b .crm-column-picker-close--r4b {
    width: 28px;
    height: 28px;
    margin: -3px -3px 0 0;
}

.crm-column-picker-panel--r4b .crm-column-picker-tools--r4b {
    display: none !important;
}

.crm-column-picker-panel--r4b .crm-column-picker-scroll--r4b {
    padding-top: 3px;
}

.crm-column-picker-footer--r4d {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 9px 10px !important;
}

.crm-column-picker-footer-tools--r4d {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.crm-column-picker-footer-actions--r4d {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.crm-column-picker-footer--r4d
.crm-column-picker-tool--r4b {
    font-size: 10.5px;
    line-height: 1.2;
}

.crm-column-picker-footer--r4d
.crm-column-picker-status--r4b {
    display: none;
}

.crm-column-picker-footer--r4d
.crm-column-picker-footer-actions--r4d
.crm-button {
    min-width: 84px;
}

@media (max-width: 600px) {
    .crm-column-picker-footer--r4d {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .crm-column-picker-footer-tools--r4d {
        justify-content: flex-start;
    }

    .crm-column-picker-footer-actions--r4d {
        width: 100%;
    }

    .crm-column-picker-footer-actions--r4d .crm-button {
        flex: 1 1 0;
    }
}

/* UI FOUNDATION 0.17.8-r4e — SMARTTABLE PERMANENT RESIZER ANCHOR */

.crm-table-shell[data-crm-table-contract]
.crm-data-table
th[data-crm-smart-column][data-crm-column-resizable="true"] {
    position: relative;
}

.crm-table-shell[data-crm-table-contract]
.crm-data-table
th[data-crm-smart-column][data-crm-column-resizable="true"]
.crm-smart-column-resizer {
    z-index: 5;
    pointer-events: auto;
}

/* ========================================================================
 * UI FOUNDATION 0.17.8-r5 — SMARTTABLE HEADER INTERACTION CONTRACT
 * ======================================================================== */
.crm-table-shell[data-crm-table-contract]
.crm-data-table thead:not(.is-crm-real-floating-header)
th[data-crm-smart-column] {
    position: relative !important;
    top: auto !important;
    z-index: 1;
}

.crm-table-shell[data-crm-table-contract]
.crm-data-table thead.is-crm-real-floating-header
th[data-crm-smart-column] {
    position: relative !important;
    top: var(--crm-real-header-offset, 0px) !important;
    z-index: calc(var(--crm-z-sticky, 30) + 2);
}

.crm-smart-column-header { isolation: isolate; }

.crm-smart-column-drag-handle {
    position: absolute;
    z-index: 7;
    top: 50%;
    left: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 24px;
    color: var(--crm-text-muted);
    font-size: 10px;
    line-height: 1;
    letter-spacing: -2px;
    cursor: grab;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 120ms ease, color 120ms ease;
    user-select: none;
}

.crm-smart-column-header:hover > .crm-smart-column-drag-handle,
.crm-smart-column-header:focus-within > .crm-smart-column-drag-handle,
.crm-smart-column-header.is-dragging > .crm-smart-column-drag-handle { opacity: .72; }

.crm-smart-column-header > .crm-smart-column-drag-handle:hover {
    color: var(--crm-primary);
    opacity: 1;
}

.crm-smart-column-header.is-dragging { opacity: .58; }

.crm-smart-column-header.is-drag-target {
    box-shadow: inset 2px 0 0 var(--crm-primary), inset 0 -1px 0 var(--crm-border);
}

.crm-smart-column-header > [data-crm-smart-resize-handle] {
    position: absolute;
    z-index: 8;
    top: 0;
    right: -4px;
    bottom: 0;
    width: 9px;
    height: auto;
    cursor: col-resize;
    pointer-events: auto;
    touch-action: none;
}

.crm-smart-column-header > [data-crm-smart-resize-handle]::after {
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 4px;
    width: 1px;
    content: "";
    background: transparent;
    transition: width 120ms ease, background 120ms ease;
}

.crm-smart-column-header:hover > [data-crm-smart-resize-handle]::after,
.crm-smart-column-header.is-resizing > [data-crm-smart-resize-handle]::after,
.crm-smart-column-header > [data-crm-smart-resize-handle]:focus-visible::after {
    width: 2px;
    background: var(--crm-primary);
}

.crm-smart-column-header > [data-crm-smart-resize-handle]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--crm-primary) 30%, transparent);
    outline-offset: -2px;
}

.crm-table-floating-header {
    display: none !important;
    pointer-events: none !important;
}

@media (max-width: 900px) {
    .crm-smart-column-drag-handle,
    .crm-smart-column-header > [data-crm-smart-resize-handle] {
        display: none;
    }
}

/* ========================================================================
 * UI FOUNDATION 0.17.8-r5.4 — SMARTTABLE FIXED FIRST-PAINT LAYOUT
 * ======================================================================== */
.crm-table-shell[data-crm-table-contract]
.crm-data-table:has(
    thead th[data-crm-initial-column-width]
) {
    table-layout: fixed;
}

.crm-table-shell[data-crm-table-contract]
.crm-data-table:has(
    thead th[data-crm-initial-column-width]
)
thead th[data-crm-initial-column-width] {
    box-sizing: border-box;
}

.crm-table-shell[data-crm-table-contract]
.crm-data-table:has(
    thead th[data-crm-initial-column-width]
)
th,
.crm-table-shell[data-crm-table-contract]
.crm-data-table:has(
    thead th[data-crm-initial-column-width]
)
td {
    min-width: 0;
}

/* ========================================================================
 * UI FOUNDATION 0.17.8-r5.5 — SMARTTABLE STICKY ROW ACTIONS
 * ======================================================================== */

.crm-table-shell[data-crm-table-contract]
.crm-actions-anchor-cell {
    position: sticky !important;
    right: 0;
    z-index: 12;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent;
}

.crm-table-shell[data-crm-table-contract]
.crm-actions-overlay {
    position: absolute;
    inset-inline-end: .5rem;
    z-index: 13;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

.crm-table-shell[data-crm-table-contract]
.crm-actions-overlay .crm-row-actions {
    pointer-events: auto;
}

.crm-table-shell[data-crm-table-contract]
tbody tr:hover .crm-actions-overlay .crm-row-actions,
.crm-table-shell[data-crm-table-contract]
tbody tr:focus-within .crm-actions-overlay .crm-row-actions {
    position: relative;
    z-index: 1;
    background: var(--crm-surface, #fff);
}

@media (hover: none), (pointer: coarse) {
    .crm-table-shell[data-crm-table-contract]
    .crm-actions-anchor-cell {
        position: static !important;
        width: 1% !important;
        min-width: max-content !important;
        max-width: none !important;
        padding: .5rem .75rem !important;
    }

    .crm-table-shell[data-crm-table-contract]
    .crm-actions-overlay {
        position: static;
        max-width: none;
    }
}

/* ========================================================================
 * UI FOUNDATION 0.17.8-r5.6 — SMARTTABLE VIEWPORT ROW ACTIONS
 * ======================================================================== */

@media (hover: hover) and (pointer: fine) {

    .crm-table-shell[data-crm-table-contract]
    .crm-actions-anchor-cell {
        position: relative !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;

        padding: 0 !important;
        border: 0 !important;

        overflow: visible !important;
    }

    .crm-actions-overlay.is-crm-viewport-row-actions {
        position: fixed !important;

        top: var(
            --crm-row-actions-top,
            50%
        ) !important;

        right: auto !important;
        bottom: auto !important;

        left: var(
            --crm-row-actions-left,
            auto
        ) !important;

        z-index:
            calc(
                var(--crm-z-overlay, 50) + 2
            ) !important;

        width: max-content;
        max-width: calc(100vw - 20px);

        transform:
            translateY(-50%) !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: none;
    }

    .crm-actions-overlay.is-crm-viewport-row-actions
    .crm-row-actions {
        pointer-events: auto;
    }
}

/* ========================================================================
 * UI FOUNDATION 0.17.8-r5.6a — ROW ACTIONS WITHOUT PHANTOM SCROLL
 * ======================================================================== */
@media (hover: hover) and (pointer: fine) {

    .crm-table-shell[data-crm-table-contract]
    tbody tr {
        position: relative;
    }

    .crm-table-shell[data-crm-table-contract]
    tbody tr > .crm-actions-anchor-cell {
        position: absolute !important;
        inset-inline-end: 0 !important;
        top: 0 !important;
        bottom: 0 !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;

        padding: 0 !important;
        border: 0 !important;
        margin: 0 !important;

        overflow: visible !important;
        background: transparent !important;
    }

    .crm-table-shell[data-crm-table-contract]
    thead tr > .crm-actions-anchor-cell {
        position: absolute !important;
        inset-inline-end: 0 !important;
        top: 0 !important;
        bottom: 0 !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;

        padding: 0 !important;
        border: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;
        background: transparent !important;
    }
}

/* ========================================================================
 * UI FOUNDATION 0.17.8-r5.6b — REMOVE ACTION CELL FROM TABLE LAYOUT
 * ======================================================================== */
@media (hover: hover) and (pointer: fine) {

    .crm-table-shell[data-crm-table-contract]
    tbody tr > .crm-actions-anchor-cell,
    .crm-table-shell[data-crm-table-contract]
    thead tr > .crm-actions-anchor-cell {
        display: block !important;
        position: absolute !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;

        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .crm-table-shell[data-crm-table-contract]
    tbody tr > .crm-actions-anchor-cell {
        inset-inline-end: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        overflow: visible !important;
    }

    .crm-table-shell[data-crm-table-contract]
    thead tr > .crm-actions-anchor-cell {
        inset-inline-end: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        overflow: hidden !important;
    }
}

/* ========================================================================
 * UI FOUNDATION 0.17.8-r5.7 — OVERFLOW INDICATOR WITHOUT LAYOUT WIDTH
 * ======================================================================== */

.crm-table-shell[data-crm-table-contract][data-crm-overflow="true"]::after {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin-left: auto !important;
    pointer-events: none !important;
}

.crm-table-shell[data-crm-table-contract][data-crm-overflow="false"]::after {
    content: none !important;
}

/* ========================================================================
 * UI FOUNDATION 0.17.8-r5.8 — HIDDEN ROW ACTIONS WITHOUT SCROLL OVERFLOW
 * ======================================================================== */

@media (hover: hover) and (pointer: fine) {

    .crm-table-shell[data-crm-table-contract]
    tbody tr:not(:hover):not(:focus-within)
    .crm-actions-overlay:not(.is-crm-viewport-row-actions)
    .crm-row-actions {
        display: none !important;
    }

    .crm-table-shell[data-crm-table-contract]
    tbody tr:hover
    .crm-actions-overlay
    .crm-row-actions,

    .crm-table-shell[data-crm-table-contract]
    tbody tr:focus-within
    .crm-actions-overlay
    .crm-row-actions,

    .crm-table-shell[data-crm-table-contract]
    .crm-actions-overlay.is-crm-viewport-row-actions
    .crm-row-actions {
        display: inline-flex !important;
    }
}

/* ========================================================================
 * CRM SMARTTABLE V2.0 SAFE
 *
 * Contrato central novo, isolado do legado por namespace crm-st2.
 * Nenhuma regra historica e removida nesta entrega.
 * ======================================================================== */

.crm-st2-shell {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
}

.crm-st2-shell.is-st2-overflowing {
    overflow-x: auto;
    box-shadow: inset -9px 0 9px -10px rgba(15, 23, 42, .38);
}

.crm-st2-shell:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
}

.crm-st2-table {
    width: var(--crm-st2-table-width, 100%);
    min-width: 0;
    max-width: none;
    margin: 0;
}

.crm-st2-shell.is-st2-ready .crm-st2-table {
    table-layout: fixed;
}

.crm-st2-table th,
.crm-st2-table td {
    box-sizing: border-box;
    min-width: 0;
    overflow-wrap: anywhere;
}

.crm-st2-column {
    position: relative !important;
    top: auto;
    z-index: 1;
    overflow: visible !important;
    isolation: isolate;
}

.crm-st2-column-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0;
    overflow: hidden;
}

.crm-st2-sort,
.crm-st2-label {
    min-width: 0;
    flex: 1 1 auto;
}

.crm-st2-sort {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    color: inherit;
    background: transparent;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-decoration: none;
    text-transform: inherit;
    cursor: pointer;
}

.crm-st2-sort > span,
.crm-st2-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-st2-column.is-sorted .crm-st2-sort {
    color: var(--crm-primary);
}

/*
 * V2.1 — interacao natural do cabecalho.
 *
 * Clique curto = sort.
 * Arraste horizontal = reorder.
 * Nao existe grip visual dedicado.
 */
.crm-st2-column[data-crm-st2-draggable="true"]
.crm-st2-column-inner {
    cursor: grab;
}

.crm-st2-column[data-crm-st2-draggable="true"]
.crm-st2-sort {
    cursor: pointer;
}

.crm-st2-column.is-st2-dragging {
    opacity: .65;
}

.crm-st2-column.is-st2-dragging
.crm-st2-column-inner,
.crm-st2-column.is-st2-dragging
.crm-st2-sort {
    cursor: grabbing;
}

.crm-st2-column.is-st2-drag-target {
    box-shadow:
        inset 2px 0 0 var(--crm-primary),
        inset 0 -1px 0 var(--crm-border);
}

/* Resize: divisor independente do sort/menu/drag. */
.crm-st2-resizer {
    position: absolute;
    z-index: 50;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 13px;
    cursor: col-resize;
    pointer-events: auto;
    touch-action: none;
}

.crm-st2-resizer::after {
    position: absolute;
    top: 16%;
    bottom: 16%;
    left: 6px;
    width: 1px;
    content: "";
    background: rgba(100, 116, 139, .35);
    transition:
        width 120ms ease,
        background 120ms ease;
}

.crm-st2-column:hover > .crm-st2-resizer::after,
.crm-st2-column.is-st2-resizing > .crm-st2-resizer::after,
.crm-st2-resizer:focus-visible::after {
    width: 2px;
    background: var(--crm-primary);
}

/* Header real: deslocamento vertical do proprio THEAD, nunca clone. */
.crm-st2-table thead.is-st2-floating th {
    position: relative !important;
    top: var(--crm-st2-header-offset, 0px) !important;
    z-index: calc(var(--crm-z-sticky, 30) + 2);
    background: #f8fafc;
    box-shadow:
        inset 0 -1px 0 var(--crm-border),
        0 5px 18px rgba(24, 39, 63, .09);
}

.crm-st2-table thead.is-st2-floating th.is-st2-menu-open {
    z-index: calc(var(--crm-z-dropdown, 40) + 4);
}

/* Menu de coluna: viewport real. */
.crm-st2-menu {
    position: absolute;
    z-index: 20;
    top: calc(50% - 12px);
    right: 8px;
    margin: 0;

    /*
     * IMPORTANTE:
     *
     * Nao usar transform aqui.
     *
     * Um ancestral transformado passa a ser containing block
     * para o painel position:fixed e faz o popover de filtro
     * ficar preso/clipped dentro do header.
     *
     * O trigger possui 24px, portanto:
     * top: calc(50% - 12px)
     * mantem o mesmo alinhamento visual sem criar containing block.
     */
    transform: none;
}

.crm-st2-menu > summary {
    list-style: none;
}

.crm-st2-menu > summary::-webkit-details-marker {
    display: none;
}

.crm-st2-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--crm-text-muted);
    background: rgba(248, 250, 252, .96);
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 100ms ease,
        background 100ms ease;
}

.crm-st2-column:hover .crm-st2-menu-trigger,
.crm-st2-column:focus-within .crm-st2-menu-trigger,
.crm-st2-menu-trigger:hover,
.crm-st2-menu[open] > .crm-st2-menu-trigger {
    color: var(--crm-text);
    background: rgba(248, 250, 252, .98);
    opacity: 1;
    pointer-events: auto;
}

.crm-st2-menu:not([open]) > .crm-st2-menu-panel {
    display: none !important;
}

.crm-st2-menu-panel {
    position: fixed;
    z-index: calc(var(--crm-z-dropdown, 40) + 8);
    top: var(--crm-st2-menu-top, 0px);
    left: var(--crm-st2-menu-left, 0px);
    display: grid;
    width: min(320px, calc(100vw - 24px));
    max-height: min(72vh, 620px);
    gap: 3px;
    padding: 8px;
    overflow: auto;
    color: var(--crm-text);
    background: var(--crm-surface, #fff);
    border: 1px solid var(--crm-border);
    border-radius: 10px;
    box-shadow: var(--crm-shadow-float);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.crm-st2-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 8px;
    padding: 3px 2px 7px;
    border-bottom: 1px solid var(--crm-border);
}

.crm-st2-menu-panel > button,
.crm-st2-menu-panel > a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 34px;
    gap: 8px;
    padding: 6px 8px;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.crm-st2-menu-panel > button:hover,
.crm-st2-menu-panel > a:hover,
.crm-st2-menu-panel > button:focus-visible,
.crm-st2-menu-panel > a:focus-visible {
    background: var(--crm-surface-muted);
}

.crm-st2-column-filter {
    display: grid;
    gap: 8px;
    padding: 8px 2px;
    border-top: 1px solid var(--crm-border);
}

/* Acoes de linha: fora da geometria horizontal no desktop. */
.crm-st2-table tbody tr {
    position: relative;
}

.crm-st2-actions-head,
.crm-st2-actions-cell {
    position: absolute !important;
    display: block !important;
    inset-inline-end: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

.crm-st2-actions-head {
    top: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
}

.crm-st2-actions-cell {
    top: 0 !important;
    bottom: 0 !important;
}

.crm-st2-actions-overlay {
    display: none;
}

.crm-st2-actions-overlay.is-st2-active {
    position: fixed;
    z-index: calc(var(--crm-z-overlay, 50) + 2);
    top: var(--crm-st2-actions-top, 0px);
    left: var(--crm-st2-actions-left, 0px);
    display: block;
    width: max-content;
    max-width: calc(100vw - 20px);
    padding: 4px;
    transform: translateY(-50%);
    background: var(--crm-surface, #fff);
    border: 1px solid var(--crm-border);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .13);
    pointer-events: none;
}

.crm-st2-actions-overlay.is-st2-active .crm-row-actions {
    position: static;
    display: inline-flex !important;
    width: max-content;
    min-width: max-content;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
}

/* Loading leve reutiliza o contrato visual central ja existente. */
.crm-st2-shell > [data-crm-smart-loading-layer] {
    z-index: calc(var(--crm-z-overlay, 50) + 1);
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
    .crm-st2-resizer {
        display: none;
    }

    .crm-st2-menu-panel {
        top: auto !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
        left: 12px !important;
        width: auto;
        max-height: 72dvh;
    }

    .crm-st2-actions-head,
    .crm-st2-actions-cell {
        position: static !important;
        display: table-cell !important;
        inset: auto !important;
        width: 1% !important;
        min-width: max-content !important;
        max-width: none !important;
    }

    .crm-st2-actions-head {
        padding: 8px 10px !important;
    }

    .crm-st2-actions-cell {
        padding: 8px 10px !important;
    }

    .crm-st2-actions-overlay {
        position: static !important;
        display: block;
        width: auto;
        transform: none;
    }
}

/* CRM SMARTTABLE V2.0 SAFE END */

/* ========================================================================
 * CRM SMARTTABLE V2.4 — MENU + DRAG UX
 * ======================================================================== */

/*
 * A coluna que esta sendo arrastada fica inequivocamente ativa.
 */
.crm-st2-column.is-st24-dragging {
    background:
        color-mix(
            in srgb,
            var(--crm-primary) 8%,
            #f8fafc
        ) !important;

    box-shadow:
        inset 0 -3px 0
        color-mix(
            in srgb,
            var(--crm-primary) 80%,
            transparent
        ) !important;
}

/*
 * Destino do reorder.
 *
 * O destaque precisa ser perceptivel mesmo em tabelas compactas.
 */
.crm-st2-column.is-st24-drop-target {
    background:
        color-mix(
            in srgb,
            var(--crm-primary) 11%,
            #f8fafc
        ) !important;

    box-shadow:
        inset 3px 0 0 var(--crm-primary),
        inset 0 -2px 0
        color-mix(
            in srgb,
            var(--crm-primary) 45%,
            transparent
        ) !important;
}

/*
 * Ghost acompanha o ponteiro durante o drag.
 *
 * Ele nao participa do hit testing e portanto nao interfere
 * no elemento detectado sob o mouse.
 */
.crm-st24-drag-ghost {
    position: fixed;
    z-index: 2147483000;
    top: 0;
    left: 0;

    display: flex;
    align-items: center;

    max-width: min(300px, calc(100vw - 30px));
    min-height: 32px;

    padding: 6px 10px;

    overflow: hidden;

    color: var(--crm-text, #152238);
    background: var(--crm-surface, #fff);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--crm-primary) 52%,
            var(--crm-border)
        );

    border-radius: 7px;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, .18);

    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;

    opacity: .96;
    pointer-events: none;

    transform:
        translate(
            var(--crm-st24-x, -1000px),
            var(--crm-st24-y, -1000px)
        );
}

/*
 * O summary aberto permanece visivel mesmo que o mouse
 * tenha deixado momentaneamente o TH.
 */
.crm-st2-menu[open] > .crm-st2-menu-trigger {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* CRM SMARTTABLE V2.4 — MENU + DRAG UX END */

/* ========================================================================
 * CRM SMARTTABLE V2.5 — FIRST PAINT + HORIZONTAL OVERFLOW
 *
 * Objetivos:
 *
 * 1. larguras persistidas participam do PRIMEIRO layout do browser;
 * 2. o shell nunca cresce horizontalmente junto com a tabela;
 * 3. tabela maior que o viewport produz scroll horizontal real;
 * 4. scrollbar continua ausente quando todas as colunas cabem.
 *
 * Nao altera a engine de resize/reorder/sort/filter.
 * ======================================================================== */


/* ------------------------------------------------------------------------
 * 1. FIRST PAINT
 *
 * O Blade V2 ja entrega:
 *
 * data-crm-st2-initial-width="..."
 * style="width:Xpx; min-width:Xpx; max-width:Xpx"
 *
 * Portanto nao existe motivo para aguardar o JS para habilitar fixed layout.
 *
 * O primeiro frame passa a usar imediatamente o THEAD SSR como geometria.
 * ------------------------------------------------------------------------ */

.crm-st2-table:has(
    thead th[data-crm-st2-initial-width]
) {
    table-layout: fixed;
}

.crm-st2-table:has(
    thead th[data-crm-st2-initial-width]
)
thead th[data-crm-st2-initial-width] {
    box-sizing: border-box;
}


/* ------------------------------------------------------------------------
 * 2. SCROLL CONTAINER REAL
 *
 * inline-size containment impede que a largura intrinseca da TABLE faca o
 * shell crescer junto com ela.
 *
 * O shell continua tendo exatamente a largura disponivel no painel.
 * ------------------------------------------------------------------------ */

.crm-st2-shell {
    display: block;

    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;

    contain: inline-size;

    overflow-x: auto !important;

    /*
     * Neutraliza qualquer contrato global que esconda scrollbar.
     */
    scrollbar-width: auto !important;
}


/* ------------------------------------------------------------------------
 * 3. TABELA PRONTA
 *
 * Quando o runtime calcula 2.400px para as colunas, a TABLE deve realmente
 * possuir pelo menos 2.400px.
 *
 * Ela nao pode voltar a ser comprimida para 100% pelo algoritmo de layout.
 * ------------------------------------------------------------------------ */

.crm-st2-shell.is-st2-ready
.crm-st2-table {
    width:
        var(
            --crm-st2-table-width,
            100%
        ) !important;

    min-width:
        var(
            --crm-st2-table-width,
            100%
        ) !important;

    max-width: none !important;
}


/* ------------------------------------------------------------------------
 * 4. OVERFLOW CONFIRMADO PELO RUNTIME
 *
 * O JS V2 ja define:
 *
 * data-crm-st2-overflow="true"
 *
 * quando tableWidth > shell.clientWidth.
 *
 * Nesse estado a rolagem fica explicitamente habilitada.
 * ------------------------------------------------------------------------ */

.crm-st2-shell[data-crm-st2-overflow="true"] {
    overflow-x: scroll !important;
    overflow-y: visible;

    scrollbar-gutter: stable;

    box-shadow:
        inset -9px 0 9px -10px
        rgba(15, 23, 42, .38);
}

.crm-st2-shell[data-crm-st2-overflow="false"] {
    overflow-x: auto !important;
    box-shadow: none;
}


/* ------------------------------------------------------------------------
 * 5. CHROMIUM / SAFARI
 *
 * O projeto e usado inclusive em navegadores que podem utilizar scrollbar
 * sobreposta. Quando existe overflow, deixamos a pista explicitamente
 * perceptivel.
 * ------------------------------------------------------------------------ */

.crm-st2-shell[data-crm-st2-overflow="true"]::-webkit-scrollbar {
    display: block;
    height: 10px;
}

.crm-st2-shell[data-crm-st2-overflow="true"]::-webkit-scrollbar-track {
    background:
        color-mix(
            in srgb,
            var(--crm-border) 24%,
            transparent
        );

    border-radius: 999px;
}

.crm-st2-shell[data-crm-st2-overflow="true"]::-webkit-scrollbar-thumb {
    background:
        color-mix(
            in srgb,
            var(--crm-text-muted) 58%,
            transparent
        );

    border:
        2px solid transparent;

    border-radius: 999px;

    background-clip: padding-box;
}

.crm-st2-shell[data-crm-st2-overflow="true"]::-webkit-scrollbar-thumb:hover {
    background:
        color-mix(
            in srgb,
            var(--crm-text-muted) 82%,
            transparent
        );

    border:
        2px solid transparent;

    background-clip: padding-box;
}


/* CRM SMARTTABLE V2.5 — FIRST PAINT + HORIZONTAL OVERFLOW END */

/* UI FOUNDATION 0.17.8 — SMARTTABLE FILTER POPOVER LAYOUT V2
 *
 * Anatomia:
 * 1. header = único título + fechar;
 * 2. body = campos, sem divisórias intermediárias;
 * 3. footer = ação secundária à esquerda + Aplicar à direita.
 *
 * Filtros:
 * - 1 field: label visualmente oculto;
 * - 2+ fields: labels visíveis e grid compacto;
 * - mobile estreito: campos compostos voltam a 1 coluna.
 */

.crm-st2-menu-panel .crm-st2-menu-head {
    margin: 0;
    padding: 4px 8px 4px 10px;
    min-height: 0;
    gap: 8px;
}

/*
 * SMARTTABLE POPOVER HEADER DENSITY V1
 *
 * Cabeçalho utilitário: título curto + fechar.
 * Mantém a separação inferior existente, mas elimina altura
 * desnecessária ao redor desses dois elementos.
 */
.crm-st2-menu-panel .crm-st2-menu-head > strong {
    font-size: 12px;
    line-height: 1.2;
}

.crm-st2-menu-panel .crm-st2-menu-head > .crm-icon-button {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    flex: 0 0 30px;
}

.crm-st2-menu-panel .crm-st2-menu-body {
    display: grid;
    gap: 8px;
    padding: 8px 10px 10px;
    margin: 0;
}

.crm-st2-menu-panel .crm-st2-column-filter {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.crm-st2-column-filter-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    min-width: 0;
}

.crm-st2-column-filter-fields > .crm-field {
    grid-column: auto !important;
    margin: 0 !important;
    min-width: 0;
}

.crm-st2-column-filter-fields
    > .crm-field
    .crm-field-control {
    min-width: 0;
}

.crm-st2-column-filter-fields
    > .crm-field
    :is(
        .crm-input,
        .crm-select,
        input,
        select
    ) {
    max-width: 100%;
}

.crm-st2-column-filter-fields:has(> .crm-field)
    :where(*) {
    box-sizing: border-box;
}

/*
 * Um único campo não repete visualmente o título do popover.
 * O conteúdo continua no DOM para leitores de tela.
 */
.crm-st2-column-filter-fields:has(> .crm-field):not(:has(> .crm-field ~ .crm-field))
    > .crm-field
    > .crm-field-header {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/*
 * Com apenas um field usamos toda a largura disponível.
 */
.crm-st2-column-filter-fields:has(> .crm-field):not(:has(> .crm-field ~ .crm-field)) {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Rodapé funcional.
 * Sem nova linha divisória: o agrupamento é feito por espaço,
 * alinhamento e hierarquia dos botões.
 */
.crm-st2-menu-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    margin: 1px 0 0;
}

.crm-st2-menu-actions > .crm-st2-column-hide {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--crm-text-muted);
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    padding: 7px 8px;
    margin-right: auto;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.crm-st2-menu-actions > .crm-st2-column-hide:hover {
    color: var(--crm-text);
    background: var(--crm-surface-muted);
}

.crm-st2-menu-actions > .crm-st2-column-hide:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
}

.crm-st2-menu-actions > .crm-button {
    width: auto !important;
    min-width: 88px;
    flex: 0 0 auto;
}

/*
 * Neutraliza resíduos de contratos antigos de filtro que
 * adicionavam borda acima/abaixo do conteúdo.
 */
.crm-st2-menu-panel .crm-smart-column-filter,
.crm-st2-menu-panel .crm-st2-column-filter {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/*
 * Em telas realmente estreitas, composição volta para uma coluna.
 */
@media (max-width: 480px) {
    .crm-st2-column-filter-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ========================================================================
 * CRM SMARTTABLE V2.6 — PERSISTENT HORIZONTAL SCROLLBAR
 *
 * Controle visual próprio da SmartTable.
 *
 * Não substitui o scroll nativo. Apenas oferece uma pista persistente,
 * independente do comportamento de scrollbars overlay do navegador/SO.
 *
 * A existência do controle depende do overflow real:
 * shell.scrollWidth > shell.clientWidth.
 * ======================================================================== */

.crm-st2-hscroll {
    position: relative;

    box-sizing: border-box;
    display: block;

    width: auto;
    max-width: calc(100% - 20px);
    height: 14px;

    margin: 3px 10px 7px;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--crm-border, #dfe5ee) 58%,
            transparent
        );

    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.crm-st2-hscroll[hidden] {
    display: none !important;
}

.crm-st2-hscroll-thumb {
    position: absolute;

    top: 3px;
    left: 0;

    height: 8px;
    min-width: 56px;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--crm-text-muted, #64748b) 72%,
            transparent
        );

    cursor: grab;
    will-change: transform, width;
}

.crm-st2-hscroll-thumb:hover,
.crm-st2-hscroll.is-dragging
.crm-st2-hscroll-thumb {
    background:
        color-mix(
            in srgb,
            var(--crm-text-muted, #64748b) 96%,
            transparent
        );
}

.crm-st2-hscroll.is-dragging
.crm-st2-hscroll-thumb {
    cursor: grabbing;
}

.crm-st2-hscroll:focus-visible {
    outline: 2px solid var(--crm-primary);
    outline-offset: 2px;
}

/*
 * Em touch continuamos permitindo a rolagem nativa da própria tabela.
 * O controle fica disponível, mas um pouco mais alto para facilitar toque.
 */
@media (pointer: coarse) {
    .crm-st2-hscroll {
        height: 18px;
    }

    .crm-st2-hscroll-thumb {
        top: 4px;
        height: 10px;
    }
}

/* CRM SMARTTABLE V2.6 — PERSISTENT HORIZONTAL SCROLLBAR END */

/* CRM TABLE SCROLL CONTRACT V2.8 */

/*
 * CONTRATO CANÔNICO DE ROLAGEM DAS TABELAS
 *
 * 1. A página é a única responsável pelo scroll vertical.
 * 2. A tabela sempre cresce naturalmente em altura.
 * 3. Não existe viewport vertical interna em listagens.
 * 4. A barra horizontal é nativa do browser.
 * 5. A barra horizontal somente existe quando há overflow horizontal real.
 * 6. A antiga barra artificial crm-st2-hscroll está aposentada.
 */

/*
 * Base comum — vale tanto para o contrato legado x-ui.table
 * quanto para SmartTable V2.
 */
.crm-table-shell,
.crm-data-panel .crm-table-shell,
.crm-st2-shell {
    height: auto !important;
    max-height: none !important;

    overflow-y: hidden !important;

    scrollbar-gutter: auto !important;

    overscroll-behavior-y: auto !important;
    overscroll-behavior-inline: auto;
}

/*
 * Tabela legada / x-ui.table:
 * sem overflow real, não criar sequer um scroll container horizontal.
 */
.crm-table-shell:not([data-crm-overflow="true"]) {
    overflow-x: clip !important;
}

/*
 * Quando a medição central detectar overflow,
 * usar somente a scrollbar horizontal nativa.
 */
.crm-table-shell[data-crm-overflow="true"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/*
 * SmartTable V2:
 * crmSt2Overflow é a fonte autoritativa para a geometria da ST2.
 */
.crm-st2-shell[data-crm-st2-overflow="false"] {
    overflow-x: clip !important;
    overflow-y: hidden !important;
}

.crm-st2-shell[data-crm-st2-overflow="true"],
.crm-st2-shell.is-st2-overflowing {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/*
 * Neutraliza regras antigas que forçavam scrollbar permanente.
 */
.crm-st2-shell[data-crm-st2-overflow="true"] {
    scrollbar-gutter: auto !important;
}

/*
 * Proteção para DOMs que ainda tenham recebido a barra artificial
 * antes da atualização do JavaScript.
 */
.crm-st2-hscroll {
    display: none !important;
}

/* CRM TABLE SCROLL CONTRACT V2.8 END */

/* CRM TABLE HORIZONTAL SCROLL CONTRACT V2.9
 *
 * O browser volta a ser a autoridade do overflow horizontal.
 *
 * Motivo:
 * data-crm-st2-overflow é útil como estado auxiliar para UX, mas não pode
 * decidir se o conteúdo será clipado. Se a geometria do runtime estiver
 * momentaneamente stale, a tabela pode ser maior que o shell enquanto o
 * atributo ainda informa false.
 *
 * Contrato:
 * - página continua sendo a única dona do scroll vertical;
 * - shell nunca cresce com a largura intrínseca da tabela;
 * - overflow horizontal nativo aparece somente quando realmente necessário;
 * - nenhuma scrollbar horizontal artificial;
 * - não depende de data-crm-st2-overflow para habilitar rolagem.
 */

.crm-st2-shell,
.crm-st2-shell[data-crm-st2-overflow="false"],
.crm-st2-shell[data-crm-st2-overflow="true"],
.crm-st2-shell.is-st2-overflowing {
    display: block;

    box-sizing: border-box;

    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    contain: inline-size;

    height: auto !important;
    max-height: none !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: auto !important;
    scrollbar-gutter: auto !important;

    overscroll-behavior-inline: contain;
    overscroll-behavior-y: auto !important;

    -webkit-overflow-scrolling: touch;
}

/*
 * A largura calculada pela ST2 precisa pertencer à TABLE, não ao shell.
 */
.crm-st2-shell.is-st2-ready > .crm-st2-table {
    width: var(--crm-st2-table-width, 100%) !important;
    min-width: var(--crm-st2-table-width, 100%) !important;
    max-width: none !important;
}

/*
 * Chromium/Safari:
 * estiliza a barra nativa quando ela existir.
 * Não cria barra quando não houver overflow real.
 */
.crm-st2-shell::-webkit-scrollbar {
    display: block;
    height: 10px;
}

.crm-st2-shell::-webkit-scrollbar-track {
    background:
        color-mix(
            in srgb,
            var(--crm-border, #dfe5ee) 28%,
            transparent
        );
    border-radius: 999px;
}

.crm-st2-shell::-webkit-scrollbar-thumb {
    background:
        color-mix(
            in srgb,
            var(--crm-text-muted, #64748b) 62%,
            transparent
        );

    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.crm-st2-shell::-webkit-scrollbar-thumb:hover {
    background:
        color-mix(
            in srgb,
            var(--crm-text-muted, #64748b) 82%,
            transparent
        );

    border: 2px solid transparent;
    background-clip: padding-box;
}

/* A barra artificial V2.6 permanece definitivamente aposentada. */
.crm-st2-hscroll {
    display: none !important;
}

/* CRM TABLE HORIZONTAL SCROLL CONTRACT V2.9 END */

/* CRM TABLE PERSISTENT HORIZONTAL SCROLL V2.10 */
.crm-st2-shell,
.crm-st2-shell[data-crm-st2-overflow="false"],
.crm-st2-shell[data-crm-st2-overflow="true"],
.crm-st2-shell.is-st2-overflowing {
    height: auto !important;
    max-height: none !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
}

.crm-st2-shell::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

.crm-st2-hscroll:not([hidden]) {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;

    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    height: 14px !important;
    min-height: 14px !important;

    margin: 4px 10px 8px !important;

    border-radius: 999px !important;

    background:
        color-mix(
            in srgb,
            var(--crm-border, #dfe5ee) 64%,
            transparent
        ) !important;

    cursor: pointer !important;
    user-select: none !important;
    touch-action: none !important;
}

.crm-st2-hscroll[hidden] {
    display: none !important;
}

.crm-st2-hscroll:not([hidden])
.crm-st2-hscroll-thumb {
    position: absolute !important;
    top: 3px !important;
    left: 0 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    height: 8px !important;
    min-width: 56px !important;

    border-radius: 999px !important;

    background:
        color-mix(
            in srgb,
            var(--crm-text-muted, #64748b) 78%,
            transparent
        ) !important;

    cursor: grab !important;
    will-change: transform, width !important;
}

.crm-st2-hscroll:not([hidden])
.crm-st2-hscroll-thumb:hover,
.crm-st2-hscroll.is-dragging
.crm-st2-hscroll-thumb {
    background:
        color-mix(
            in srgb,
            var(--crm-text-muted, #64748b) 96%,
            transparent
        ) !important;
}

.crm-st2-hscroll.is-dragging
.crm-st2-hscroll-thumb {
    cursor: grabbing !important;
}

.crm-st2-hscroll:focus-visible {
    outline:
        2px solid
        var(--crm-primary, #2468b4) !important;

    outline-offset: 2px !important;
}

@media (pointer: coarse) {
    .crm-st2-hscroll:not([hidden]) {
        height: 18px !important;
        min-height: 18px !important;
    }

    .crm-st2-hscroll:not([hidden])
    .crm-st2-hscroll-thumb {
        top: 4px !important;
        height: 10px !important;
    }
}

/* CRM TABLE PERSISTENT HORIZONTAL SCROLL V2.10 END */

/* CRM GLOBAL EXTERNAL TABLE LINK CONTRACT R3
 *
 * Todo link EXTERNO textual dentro de tabelas:
 *
 * - usa a cor normal do CRM;
 * - usa peso regular;
 * - não recebe aparência azul/negrito de link tradicional;
 * - recebe indicador visual external-link;
 * - links internos do CRM não são afetados;
 * - imagens/previews, botões e icon-buttons ficam fora.
 *
 * target="_blank" é o contrato atual para destinos externos.
 */

.crm-data-table
a[target="_blank"]:not(.crm-button):not(.crm-icon-button):not(.crm-table-open-action):not([data-crm-external-link-icon="off"]):not(:has(img)):not(:has(picture)):not(:has(video)):not(:has(iframe)),
.crm-data-table
a[target="_blank"]:not(.crm-button):not(.crm-icon-button):not(.crm-table-open-action):not([data-crm-external-link-icon="off"]):not(:has(img)):not(:has(picture)):not(:has(video)):not(:has(iframe)):visited {
    color: inherit !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    text-underline-offset: 2px;
}

/*
 * record-primary-link normalmente é coluna.
 * Quando for um link externo, precisa ser linha:
 *
 * ícone semântico + texto + indicador externo
 */
.crm-data-table
a.crm-record-primary-link[target="_blank"]:not(.crm-table-open-action) {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
}

.crm-data-table
a[target="_blank"]:not(.crm-button):not(.crm-icon-button):not(.crm-table-open-action):not([data-crm-external-link-icon="off"]):not(:has(img)):not(:has(picture)):not(:has(video)):not(:has(iframe))
strong {
    color: inherit !important;
    font-weight: 400 !important;
}

.crm-data-table
a[target="_blank"]:not(.crm-button):not(.crm-icon-button):not(.crm-table-open-action):not([data-crm-external-link-icon="off"]):not(:has(img)):not(:has(picture)):not(:has(video)):not(:has(iframe)):hover {
    color: inherit !important;

    text-decoration: underline !important;
    text-decoration-color:
        color-mix(
            in srgb,
            var(--crm-text-muted, #667085) 55%,
            transparent
        ) !important;

    text-decoration-thickness: 1px !important;
}

/*
 * Ícone external-link do próprio UiFoundation,
 * aplicado via máscara para não duplicar markup
 * em cada plugin.
 */
.crm-data-table
a[target="_blank"]:not(.crm-button):not(.crm-icon-button):not(.crm-table-open-action):not([data-crm-external-link-icon="off"]):not(:has(img)):not(:has(picture)):not(:has(video)):not(:has(iframe))::before {
    content: "";

    display: inline-block;
    flex: 0 0 13px;

    width: 13px;
    min-width: 13px;
    height: 13px;

    margin-right: 4px;
    margin-left: 0;
    vertical-align: -2px;

    background-color:
        var(--crm-primary, #2563eb);

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3l-9 9'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E")
        center / 13px 13px no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7M21 3l-9 9'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E")
        center / 13px 13px no-repeat;
}

/* CRM GLOBAL EXTERNAL TABLE LINK CONTRACT R3 END */

/* ========================================================================
 * CRM GLOBAL TABLE CELL TRUNCATION CONTRACT R2
 *
 * Contrato de conteúdo das tabelas:
 *
 * - valores não quebram por falta de largura;
 * - excesso horizontal fica oculto;
 * - células de ação, seleção e empty-state ficam fora;
 * - componentes que possuem linhas semânticas próprias continuam podendo
 *   ter mais de uma linha, porém cada valor individual não quebra;
 * - tooltip do valor completo é responsabilidade do runtime R1.
 * ======================================================================== */

.crm-data-table
tbody > tr > td:not([colspan]):not(.crm-actions-column):not(.crm-st2-actions-cell):not(.crm-actions-anchor-cell):not([data-crm-table-truncate="off"]):not(:has(input[type="checkbox"])) {
    min-width: 0 !important;

    overflow: hidden !important;

    text-overflow: ellipsis;

    white-space: nowrap !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
}

.crm-data-table
tbody > tr > td:not([colspan]):not(.crm-actions-column):not(.crm-st2-actions-cell):not(.crm-actions-anchor-cell):not([data-crm-table-truncate="off"]):not(:has(input[type="checkbox"]))
> * {
    min-width: 0;
}

/*
 * Um strong/small/div pode continuar sendo uma linha semântica separada,
 * mas o texto daquela linha nunca quebra.
 */
.crm-data-table
tbody > tr > td:not([colspan]):not(.crm-actions-column):not(.crm-st2-actions-cell):not(.crm-actions-anchor-cell):not([data-crm-table-truncate="off"]):not(:has(input[type="checkbox"])):is(
    a,
    span,
    strong,
    small,
    code,
    time,
    p,
    div
) {
    white-space: nowrap !important;

    overflow-wrap: normal !important;
    word-break: normal !important;
}

/*
 * Linhas flexuais de valor também não podem criar uma segunda linha.
 */
.crm-data-table
tbody > tr > td:not([colspan]):not(.crm-actions-column):not(.crm-st2-actions-cell):not(.crm-actions-anchor-cell):not([data-crm-table-truncate="off"]):is(
    .crm-inline-icon-line,
    .crm-origin-line,
    .crm-dynamic-value,
    .crm-dynamic-value-link,
    .crm-dynamic-value-list,
    .crm-record-contacts,
    .crm-record-badges
) {
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/*
 * Partes textuais conhecidas podem encolher dentro de ícone + texto.
 * Ícones e controles continuam com sua largura física.
 */
.crm-data-table
:is(
    .crm-inline-icon-text,
    .crm-origin-text
) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.crm-data-table
.crm-dynamic-value-link > span,
.crm-data-table
.crm-dynamic-value-technical > code {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.crm-data-table
:is(
    .crm-inline-icon-fixed,
    .crm-icon,
    .crm-copy-button,
    .crm-table-open-action-icon
) {
    flex-shrink: 0;
}

/* CRM GLOBAL TABLE CELL TRUNCATION CONTRACT R2 END */

/* SOURCE MODULE: foundation/98-modern-form-controls.css */
/* ==========================================================
   UI FOUNDATION 0.15.1 — MODERN FORM CONTROLS
   ----------------------------------------------------------
   Central, progressive-enhancement controls for every plugin.
   No plugin CSS/JS is required or allowed for these patterns.
   ========================================================== */

:root{
    --crm-control-bg: var(--crm-surface, #fff);
    --crm-control-bg-hover: #fbfdff;
    --crm-control-border: var(--crm-border-strong, #cbd5e1);
    --crm-control-border-hover: #9fb0c5;
    --crm-control-border-focus: var(--crm-primary, #2468b4);
    --crm-control-placeholder: #8a98aa;
    --crm-control-icon: #607087;
    --crm-control-disabled-bg: #f3f6f9;
    --crm-control-disabled-text: #8b98a8;
    --crm-control-focus-ring: color-mix(in srgb, var(--crm-primary, #2468b4) 16%, transparent);
    --crm-control-menu-shadow: 0 18px 48px rgba(24, 39, 63, .16);
}

.crm-control::placeholder{
    color: var(--crm-control-placeholder);
}

.crm-control:disabled,
.crm-control[readonly]{
    color: var(--crm-control-disabled-text);
    background: var(--crm-control-disabled-bg);
    cursor: not-allowed;
}

.crm-control[aria-invalid="true"],
.crm-field:has(.crm-field-error) .crm-control{
    border-color: color-mix(in srgb, var(--crm-danger, #b42318) 62%, var(--crm-control-border));
}

/* -------------------- Input group -------------------- */
.crm-input-group,
.crm-password-control,
.crm-search-control,
.crm-date-control,
.crm-money-control{
    display:flex;
    align-items:stretch;
    width:100%;
    min-width:0;
    min-height:var(--crm-control-height, 42px);
    color:var(--crm-text);
    background:var(--crm-control-bg);
    border:1px solid var(--crm-control-border);
    border-radius:var(--crm-control-radius, 8px);
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.crm-input-group:hover,
.crm-password-control:hover,
.crm-search-control:hover,
.crm-date-control:hover,
.crm-money-control:hover{
    border-color:var(--crm-control-border-hover);
}

.crm-input-group:focus-within,
.crm-password-control:focus-within,
.crm-search-control:focus-within,
.crm-date-control:focus-within,
.crm-money-control:focus-within{
    border-color:var(--crm-control-border-focus);
    box-shadow:0 0 0 3px var(--crm-control-focus-ring);
}

.crm-input-group > :where(.crm-input-group-leading,.crm-input-group-prefix,.crm-input-group-suffix,.crm-input-group-trailing),
.crm-search-icon,
.crm-date-icon,
.crm-money-prefix{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    color:var(--crm-control-icon);
}

.crm-input-group-leading,
.crm-search-icon,
.crm-date-icon{
    width:calc(var(--crm-control-height, 42px) - 4px);
}

.crm-input-group-prefix,
.crm-input-group-suffix,
.crm-money-prefix{
    padding-inline:11px;
    font-size:var(--crm-control-font-size, 12px);
    font-weight:650;
    white-space:nowrap;
}

.crm-input-group-prefix,
.crm-money-prefix{
    border-right:1px solid var(--crm-border);
}

.crm-input-group-suffix{
    border-left:1px solid var(--crm-border);
}

.crm-input-group-control{
    display:flex;
    align-items:stretch;
    min-width:0;
    flex:1 1 auto;
}

.crm-input-group .crm-control,
.crm-password-control .crm-control,
.crm-search-control .crm-control,
.crm-date-control .crm-control,
.crm-money-control .crm-control{
    width:100%;
    min-width:0;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    background:transparent;
}

.crm-input-group > :first-child,
.crm-input-group > :first-child .crm-control{
    border-top-left-radius:var(--crm-control-radius, 8px);
    border-bottom-left-radius:var(--crm-control-radius, 8px);
}

.crm-input-group > :last-child,
.crm-input-group > :last-child .crm-control{
    border-top-right-radius:var(--crm-control-radius, 8px);
    border-bottom-right-radius:var(--crm-control-radius, 8px);
}

.crm-control-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 var(--crm-control-height, 42px);
    width:var(--crm-control-height, 42px);
    min-height:var(--crm-control-height, 42px);
    padding:0;
    color:var(--crm-control-icon);
    background:transparent;
    border:0;
    border-left:1px solid var(--crm-border);
    cursor:pointer;
}

.crm-control-action:hover{
    color:var(--crm-primary);
    background:var(--crm-primary-soft, #eaf3ff);
}

.crm-control-action:focus-visible{
    position:relative;
    z-index:2;
    outline:3px solid var(--crm-control-focus-ring);
    outline-offset:-3px;
}

/* -------------------- Password -------------------- */
.crm-password-input{
    padding-right:12px;
}

.crm-password-control.is-revealed [data-crm-password-icon="show"]{ display:none; }
.crm-password-control.is-revealed [data-crm-password-icon="hide"]{ display:inline-flex; }

/* -------------------- Search -------------------- */
.crm-search-input{
    appearance:none;
}

.crm-search-input::-webkit-search-cancel-button{
    display:none;
}

.crm-search-clear{
    opacity:0;
    pointer-events:none;
    transition:opacity .12s ease;
}

.crm-search-control.has-value .crm-search-clear{
    opacity:1;
    pointer-events:auto;
}

/* -------------------- Date -------------------- */
.crm-date-control .crm-date-input{
    padding-left:2px;
}

.crm-date-input::-webkit-calendar-picker-indicator{
    cursor:pointer;
    opacity:.64;
}

.crm-date-range{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:end;
    gap:8px;
}

.crm-date-range-part{
    display:grid;
    gap:5px;
    min-width:0;
}

.crm-date-range-part > span{
    color:var(--crm-muted);
    font-size:11px;
    font-weight:650;
}

.crm-date-range-separator{
    display:grid;
    place-items:center;
    min-height:var(--crm-control-height, 42px);
    color:var(--crm-muted);
}

/* -------------------- Money / number -------------------- */
.crm-money-display{
    text-align:right;
    font-variant-numeric:tabular-nums;
}

.crm-money-prefix{
    min-width:46px;
}

/* -------------------- Radio -------------------- */
.crm-radio{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
    cursor:pointer;
}

.crm-radio-control{
    position:relative;
    flex:0 0 20px;
    width:20px;
    height:20px;
    margin-top:1px;
}

.crm-radio-control input{
    position:absolute;
    inset:0;
    width:20px;
    height:20px;
    margin:0;
    opacity:0;
    cursor:pointer;
}

.crm-radio-indicator{
    display:grid;
    place-items:center;
    width:20px;
    height:20px;
    border:1.5px solid var(--crm-border-strong);
    border-radius:50%;
    background:#fff;
}

.crm-radio-control input:checked + .crm-radio-indicator{
    border-color:var(--crm-primary);
}

.crm-radio-control input:checked + .crm-radio-indicator::after{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--crm-primary);
}

.crm-radio-control input:focus-visible + .crm-radio-indicator{
    outline:3px solid var(--crm-control-focus-ring);
    outline-offset:2px;
}

.crm-radio-copy{
    display:grid;
    gap:2px;
    min-width:0;
}

.crm-radio-label{
    color:var(--crm-text);
    font-size:13px;
    font-weight:700;
    line-height:1.3;
}

.crm-radio-description{
    color:var(--crm-muted);
    font-size:11px;
    line-height:1.4;
}

/* -------------------- Choice cards -------------------- */
.crm-choice-card{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    min-width:0;
    min-height:64px;
    padding:12px 13px;
    color:var(--crm-text);
    background:var(--crm-surface);
    border:1px solid var(--crm-border);
    border-radius:10px;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.crm-choice-card:hover{
    background:var(--crm-control-bg-hover);
    border-color:#b5c5d9;
}

.crm-choice-card:has(.crm-choice-card-input:checked){
    background:color-mix(in srgb, var(--crm-primary-soft, #eaf3ff) 66%, #fff);
    border-color:color-mix(in srgb, var(--crm-primary) 52%, #fff);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--crm-primary) 10%, transparent);
}

.crm-choice-card:has(.crm-choice-card-input:focus-visible){
    outline:3px solid var(--crm-control-focus-ring);
    outline-offset:2px;
}

.crm-choice-card:has(.crm-choice-card-input:disabled){
    opacity:.62;
    cursor:not-allowed;
}

.crm-choice-card-input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.crm-choice-card-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    color:var(--crm-primary);
    background:var(--crm-primary-soft);
    border-radius:10px;
}

.crm-choice-card-copy{
    display:grid;
    gap:3px;
    min-width:0;
}

.crm-choice-card-label{
    font-size:13px;
    font-weight:750;
    line-height:1.3;
}

.crm-choice-card-description{
    color:var(--crm-muted);
    font-size:11px;
    line-height:1.4;
}

.crm-choice-card-indicator{
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border:1.5px solid var(--crm-border-strong);
    border-radius:5px;
    background:#fff;
}

.crm-choice-card-input[type="radio"] ~ .crm-choice-card-indicator{
    border-radius:50%;
}

.crm-choice-card-input:checked ~ .crm-choice-card-indicator{
    border-color:var(--crm-primary);
    background:var(--crm-primary);
}

.crm-choice-card-input:checked ~ .crm-choice-card-indicator::after{
    content:"";
    width:8px;
    height:4px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(-45deg) translateY(-1px);
}

.crm-choice-card-input[type="radio"]:checked ~ .crm-choice-card-indicator::after{
    width:8px;
    height:8px;
    border:2px solid #fff;
    border-radius:50%;
    transform:none;
}

.crm-choice-grid:has(.crm-choice-card){
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:10px;
}

/* -------------------- Segmented control -------------------- */
.crm-segmented-control{
    display:inline-flex;
    align-items:stretch;
    min-width:0;
    min-height:var(--crm-control-height,42px);
    margin:0;
    padding:3px;
    background:#eef3f8;
    border:1px solid var(--crm-border);
    border-radius:10px;
}

.crm-segmented-option{
    position:relative;
    margin:0;
    cursor:pointer;
}

.crm-segmented-option input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.crm-segmented-option > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:calc(var(--crm-control-height,42px) - 8px);
    padding:0 13px;
    color:#58687c;
    border-radius:7px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    transition:background .14s ease,color .14s ease,box-shadow .14s ease;
}

.crm-segmented-option input:checked + span{
    color:var(--crm-primary);
    background:#fff;
    box-shadow:0 1px 5px rgba(24,39,63,.1);
}

.crm-segmented-option input:focus-visible + span{
    outline:3px solid var(--crm-control-focus-ring);
    outline-offset:1px;
}

.crm-segmented-option input:disabled + span{
    opacity:.5;
    cursor:not-allowed;
}

/* -------------------- Combobox / multi select -------------------- */
.crm-combobox{
    position:relative;
    width:100%;
    min-width:0;
}

.crm-js .crm-combobox-native{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    min-height:1px !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
}

.crm-combobox-trigger{
    display:flex;
    align-items:center;
    width:100%;
    min-width:0;
    min-height:var(--crm-control-height,42px);
    padding:0 10px 0 var(--crm-control-padding-x,12px);
    color:var(--crm-text);
    background:var(--crm-surface);
    border:1px solid var(--crm-control-border);
    border-radius:var(--crm-control-radius,8px);
    cursor:pointer;
    text-align:left;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.crm-combobox-trigger:hover{
    border-color:var(--crm-control-border-hover);
}

.crm-combobox-trigger:focus-visible,
.crm-combobox.is-open .crm-combobox-trigger{
    border-color:var(--crm-primary);
    outline:0;
    box-shadow:0 0 0 3px var(--crm-control-focus-ring);
}

.crm-combobox-trigger:disabled{
    color:var(--crm-control-disabled-text);
    background:var(--crm-control-disabled-bg);
    cursor:not-allowed;
}

.crm-combobox-value{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:var(--crm-control-font-size,12px);
}

.crm-combobox-value.is-placeholder{
    color:var(--crm-control-placeholder);
}

.crm-combobox-trigger-icon{
    display:inline-flex;
    flex:0 0 auto;
    margin-left:8px;
    color:var(--crm-control-icon);
}

.crm-combobox-panel{
    position:absolute;
    z-index:180;
    top:calc(100% + 7px);
    left:0;
    width:max(100%,260px);
    max-width:min(440px,calc(100vw - 28px));
    padding:7px;
    background:var(--crm-surface);
    border:1px solid var(--crm-border);
    border-radius:11px;
    box-shadow:var(--crm-control-menu-shadow);
}

.crm-combobox-panel[hidden]{ display:none !important; }

.crm-combobox-search-wrap{
    position:relative;
    display:flex;
    align-items:center;
    margin-bottom:6px;
}

.crm-combobox-search-icon{
    position:absolute;
    left:10px;
    display:inline-flex;
    color:var(--crm-control-icon);
    pointer-events:none;
}

.crm-combobox-search{
    width:100%;
    height:36px;
    padding:0 10px 0 34px;
    color:var(--crm-text);
    background:#f8fafc;
    border:1px solid var(--crm-border);
    border-radius:8px;
    font-size:12px;
}

.crm-combobox-search:focus{
    border-color:var(--crm-primary);
    outline:0;
    box-shadow:0 0 0 3px var(--crm-control-focus-ring);
}

.crm-combobox-options{
    display:grid;
    gap:2px;
    max-height:260px;
    overflow:auto;
    overscroll-behavior:contain;
}

.crm-combobox-option{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:38px;
    padding:7px 9px;
    color:var(--crm-text);
    background:transparent;
    border:0;
    border-radius:8px;
    text-align:left;
    cursor:pointer;
}

.crm-combobox-option:hover,
.crm-combobox-option.is-active{
    background:#f3f7fb;
}

.crm-combobox-option.is-selected{
    color:var(--crm-primary);
    background:var(--crm-primary-soft);
    font-weight:700;
}

.crm-combobox-option:disabled{
    opacity:.48;
    cursor:not-allowed;
}

.crm-combobox-option-copy{
    display:grid;
    gap:2px;
    min-width:0;
}

.crm-combobox-option-label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
}

.crm-combobox-option-description{
    color:var(--crm-muted);
    font-size:10px;
    font-weight:500;
    line-height:1.3;
}

.crm-combobox-empty,
.crm-combobox-loading{
    padding:16px 12px;
    color:var(--crm-muted);
    font-size:11px;
    text-align:center;
}

.crm-combobox-clear{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 28px;
    width:28px;
    height:28px;
    margin-left:5px;
    color:var(--crm-muted);
    background:transparent;
    border:0;
    border-radius:7px;
    cursor:pointer;
}

.crm-combobox-clear:hover{
    color:var(--crm-text);
    background:#eef3f8;
}

.crm-multi-select .crm-combobox-trigger{
    min-height:var(--crm-control-height,42px);
    height:auto;
    padding-block:5px;
}

.crm-multi-select .crm-combobox-value{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    overflow:visible;
    white-space:normal;
}

.crm-combobox-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    max-width:180px;
    min-height:25px;
    padding:2px 7px;
    color:#31506f;
    background:#eef4fa;
    border:1px solid #dbe6f0;
    border-radius:999px;
    font-size:10px;
    font-weight:700;
}

.crm-combobox-chip > span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* -------------------- Field status -------------------- */
.crm-field-status{
    display:inline-flex;
    align-items:center;
    gap:5px;
    width:max-content;
    max-width:100%;
    min-height:26px;
    padding:3px 8px;
    border-radius:999px;
    font-size:10px;
    font-weight:750;
    line-height:1.2;
}

.crm-field-status.is-neutral{ color:#59697d; background:#eef2f6; }
.crm-field-status.is-info{ color:var(--crm-info); background:var(--crm-info-soft); }
.crm-field-status.is-success{ color:var(--crm-success); background:var(--crm-success-soft); }
.crm-field-status.is-warning{ color:var(--crm-warning); background:var(--crm-warning-soft); }
.crm-field-status.is-danger{ color:var(--crm-danger); background:var(--crm-danger-soft); }

/* -------------------- Stepper -------------------- */
.crm-stepper{
    width:100%;
    overflow:hidden;
    background:var(--crm-surface);
    border:1px solid var(--crm-border);
    border-radius:11px;
}

.crm-stepper ol{
    display:grid;
    grid-template-columns:repeat(var(--crm-stepper-columns,4),minmax(0,1fr));
    margin:0;
    padding:0;
    list-style:none;
}

.crm-stepper li{
    position:relative;
    min-width:0;
    border-right:1px solid var(--crm-border);
}

.crm-stepper li:last-child{ border-right:0; }

.crm-stepper li > a,
.crm-stepper-item{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:58px;
    padding:9px 13px;
    color:inherit;
    text-decoration:none;
}

.crm-stepper li.is-current{
    background:linear-gradient(90deg,color-mix(in srgb,var(--crm-primary-soft) 72%,#fff),#fff);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--crm-primary) 52%,transparent);
}

.crm-stepper-marker{
    display:grid;
    place-items:center;
    flex:0 0 28px;
    width:28px;
    height:28px;
    color:#58687c;
    background:#edf2f7;
    border-radius:50%;
    font-size:11px;
    font-weight:800;
}

.crm-stepper li.is-current .crm-stepper-marker{
    color:#fff;
    background:var(--crm-primary);
}

.crm-stepper li.is-complete .crm-stepper-marker{
    color:var(--crm-success);
    background:var(--crm-success-soft);
}

.crm-stepper-copy{
    display:grid;
    gap:2px;
    min-width:0;
}

.crm-stepper-copy strong{
    overflow:hidden;
    color:var(--crm-text);
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.crm-stepper-copy small{
    overflow:hidden;
    color:var(--crm-muted);
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.crm-stepper li.is-disabled{ opacity:.5; }

/* -------------------- Repeater -------------------- */
.crm-repeater{
    display:grid;
    gap:10px;
}

.crm-repeater-items{
    display:grid;
    gap:9px;
}

.crm-repeater-item{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:8px;
    padding:10px;
    background:#fbfcfe;
    border:1px solid var(--crm-border);
    border-radius:10px;
}

.crm-repeater-item-body{
    min-width:0;
}

.crm-repeater-remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    color:var(--crm-danger);
    background:transparent;
    border:1px solid transparent;
    border-radius:8px;
    cursor:pointer;
}

.crm-repeater-remove:hover{
    background:var(--crm-danger-soft);
    border-color:color-mix(in srgb,var(--crm-danger) 20%,transparent);
}

.crm-repeater-remove:disabled{
    opacity:.35;
    cursor:not-allowed;
}

.crm-repeater-actions{
    display:flex;
    justify-content:flex-start;
}

/* -------------------- Tooltips / utility -------------------- */
.crm-tooltip-anchor{
    display:inline-flex;
    align-items:center;
}

@media (max-width: 900px){
    .crm-combobox-panel{
        position:fixed;
        z-index:1200;
        left:14px !important;
        right:14px;
        top:auto !important;
        bottom:max(14px,env(safe-area-inset-bottom));
        width:auto;
        max-width:none;
        max-height:min(62vh,520px);
        padding:10px;
        border-radius:14px;
    }

    .crm-combobox-options{
        max-height:min(48vh,380px);
    }

    .crm-combobox-search{
        height:44px;
        font-size:14px;
    }

    .crm-combobox-option{
        min-height:44px;
    }

    .crm-stepper{
        overflow-x:auto;
        scrollbar-width:thin;
    }

    .crm-stepper ol{
        min-width:640px;
    }

    .crm-date-range{
        grid-template-columns:1fr;
        align-items:stretch;
    }

    .crm-date-range-separator{
        display:none;
    }
}

@media (max-width: 620px){
    .crm-choice-grid:has(.crm-choice-card){
        grid-template-columns:1fr;
    }

    .crm-segmented-control{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
        width:100%;
    }

    .crm-segmented-option > span{
        width:100%;
    }
}

@media (prefers-reduced-motion: reduce){
    .crm-choice-card,
    .crm-combobox-trigger,
    .crm-control-action{
        transition:none;
    }
}

/* UI FOUNDATION 0.15.1 — MODERN FORM CONTROLS END */

/* Combobox clear button overlays the trigger without nesting interactive controls. */
.crm-combobox > .crm-combobox-clear{
    position:absolute;
    z-index:3;
    top:calc((var(--crm-control-height,42px) - 28px) / 2);
    right:34px;
}
.crm-combobox > .crm-combobox-clear:not([hidden]) + .crm-combobox-panel ~ *{ }
.crm-combobox:has(> .crm-combobox-clear:not([hidden])) .crm-combobox-trigger{
    padding-right:66px;
}
.crm-combobox:has(> .crm-combobox-clear:not([hidden])) .crm-combobox-trigger-icon{
    position:absolute;
    right:10px;
}

.crm-field-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
}
.crm-field-header > label{
    min-width:0;
    margin:0;
    color:var(--crm-text);
    font-size:12px;
    font-weight:700;
    line-height:1.3;
}
.crm-field-header-status{
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
}
.crm-field.has-error :where(.crm-input-group,.crm-password-control,.crm-search-control,.crm-date-control,.crm-money-control,.crm-combobox-trigger){
    border-color:color-mix(in srgb,var(--crm-danger,#b42318) 62%,var(--crm-control-border));
}

/* Relation field consumes both native select and enhanced combobox with identical metrics. */
.crm-relation-select .crm-combobox-trigger,
.crm-relation-select > .crm-control{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.crm-relation-create-button{
    width:var(--crm-control-height,42px);
    min-width:var(--crm-control-height,42px);
    min-height:var(--crm-control-height,42px);
    border-radius:0 var(--crm-control-radius,8px) var(--crm-control-radius,8px) 0;
}

/* ==========================================================
   UI FOUNDATION 0.15.1 — DECLARATIVE DYNAMIC FIELDS
   ========================================================== */
.crm-choice-card.is-compact{
    min-height:48px;
    gap:9px;
    padding:9px 10px;
    border-radius:8px;
}

.crm-choice-card.is-compact .crm-choice-card-icon{
    width:30px;
    height:30px;
    border-radius:8px;
}

.crm-choice-card.is-compact .crm-choice-card-label{
    font-size:12px;
    font-weight:700;
}

.crm-choice-card.is-compact .crm-choice-card-description{
    font-size:10.5px;
}

.crm-choice-card.is-compact .crm-choice-card-indicator{
    width:17px;
    height:17px;
}

.crm-dynamic-boolean{
    min-height:var(--crm-control-height,42px);
    display:flex;
    align-items:center;
    padding-inline:2px;
}

.crm-dynamic-field-preview{
    display:grid;
    gap:10px;
    margin-top:14px;
    padding:12px;
    background:color-mix(in srgb,var(--crm-primary-soft,#eaf3ff) 32%,var(--crm-surface,#fff));
    border:1px solid var(--crm-border);
    border-radius:10px;
}

.crm-dynamic-field-preview>header{
    display:grid;
    gap:2px;
}

.crm-dynamic-field-preview>header strong{
    font-size:12px;
    line-height:1.35;
    color:var(--crm-text);
}

.crm-dynamic-field-preview>header span{
    font-size:11px;
    line-height:1.4;
    color:var(--crm-muted);
}

.crm-dynamic-field-preview-stage{
    max-width:560px;
}

.crm-dynamic-field-preview [hidden]{
    display:none !important;
}

.crm-dynamic-field-preview .crm-field{
    margin:0;
}

.crm-dynamic-field-preview .crm-control,
.crm-dynamic-field-preview .crm-combobox-trigger,
.crm-dynamic-field-preview .crm-switch-option{
    pointer-events:none;
}

.crm-person-type-grid.crm-choice-grid:has(.crm-choice-card){
    grid-template-columns:repeat(3,minmax(0,1fr));
}

@media (max-width:1100px){
    .crm-person-type-grid.crm-choice-grid:has(.crm-choice-card){
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:720px){
    .crm-person-type-grid.crm-choice-grid:has(.crm-choice-card){
        grid-template-columns:1fr;
    }
}

/* CRM_COMBOBOX_OPTGROUP_CONTRACT_V1
 *
 * Cabeçalhos semânticos de <optgroup> dentro do combobox pesquisável.
 * O grupo é apresentação; somente as options participam da seleção.
 */
.crm-combobox-group {
    padding: 10px 12px 6px;
    color: var(--crm-text-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .055em;
    text-transform: uppercase;
    cursor: default;
    user-select: none;
}

.crm-combobox-group:not(:first-child) {
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px solid var(--crm-border);
}

/* SOURCE MODULE: foundation/99-control-metrics.css */
/* ==========================================================
   UI FOUNDATION 0.14.2 — CANONICAL CONTROL METRICS
   IMPORT-SAFE REVISION
   ----------------------------------------------------------
   Central contract for the vertical rhythm of interactive UI.
   Pages and plugins MUST NOT redefine ordinary control heights.

   Compatibility rule:
   textarea-based single-line expandable editors are semantic
   exceptions: collapsed they align to the current control token;
   expanded they regain textarea behaviour. This preserves the
   Import Foundation expression editor without page-local metrics.
   ========================================================== */

:root{
    --crm-control-height-compact: 36px;
    --crm-control-height-default: 42px;
    --crm-control-height-comfortable: 48px;

    --crm-control-height: var(--crm-control-height-default);
    --crm-control-radius: 8px;
    --crm-control-padding-x: 12px;
    --crm-control-font-size: 12px;
    --crm-control-line-height: 1.35;
}

.crm-density-compact,
[data-crm-density="compact"]{
    --crm-control-height: var(--crm-control-height-compact);
}

.crm-density-default,
[data-crm-density="default"]{
    --crm-control-height: var(--crm-control-height-default);
}

.crm-density-comfortable,
[data-crm-density="comfortable"]{
    --crm-control-height: var(--crm-control-height-comfortable);
}

/* Ordinary single-line controls share one exact visual box. */
.crm-control:not(textarea),
input.crm-control:not([type="checkbox"]):not([type="radio"]),
select.crm-control{
    height: var(--crm-control-height);
    min-height: var(--crm-control-height);
    padding-block: 0;
    padding-inline: var(--crm-control-padding-x);
    border-radius: var(--crm-control-radius);
    font-size: var(--crm-control-font-size);
    line-height: var(--crm-control-line-height);
}

select.crm-control{
    padding-right: max(34px, calc(var(--crm-control-padding-x) + 22px));
}

/* Normal textareas keep semantic multi-line height. */
textarea.crm-control:not(.crm-expression-input):not(.crm-control-singleline-expandable){
    min-height: calc(var(--crm-control-height) * 2.25);
    padding: 9px var(--crm-control-padding-x);
    border-radius: var(--crm-control-radius);
    font-size: var(--crm-control-font-size);
    line-height: 1.4;
}

/*
 * Expandable single-line editors are a Foundation-level semantic control.
 * The Import Foundation currently consumes .crm-expression-input.
 * .crm-control-singleline-expandable is the generic contract for reuse.
 */
textarea.crm-control.crm-expression-input,
textarea.crm-control.crm-control-singleline-expandable{
    min-height: var(--crm-control-height) !important;
    height: var(--crm-control-height) !important;
    max-height: var(--crm-control-height) !important;
    padding: 0 40px 0 var(--crm-control-padding-x) !important;
    border-radius: var(--crm-control-radius);
    font-size: var(--crm-control-font-size);
    line-height: var(--crm-control-line-height) !important;
    resize: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
}

.crm-expression-editor.is-expanded textarea.crm-control.crm-expression-input,
.crm-control-expandable.is-expanded textarea.crm-control.crm-control-singleline-expandable{
    min-height: calc(var(--crm-control-height) * 2.75) !important;
    height: calc(var(--crm-control-height) * 2.75) !important;
    max-height: none !important;
    padding-block: 9px !important;
    line-height: 1.4 !important;
    resize: vertical !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
}

.crm-button,
.crm-button-md{
    min-height: var(--crm-control-height);
    padding-block: 0;
    border-radius: var(--crm-control-radius);
    font-size: var(--crm-control-font-size);
    line-height: var(--crm-control-line-height);
}

.crm-button-sm{
    min-height: var(--crm-control-height-compact);
}

.crm-icon-button{
    width: var(--crm-control-height);
    min-width: var(--crm-control-height);
    height: var(--crm-control-height);
    min-height: var(--crm-control-height);
    border-radius: var(--crm-control-radius);
}

.crm-import-wizard a,
.crm-import-wizard span{
    min-height: var(--crm-control-height);
    padding: 0 var(--crm-control-padding-x);
    border-radius: var(--crm-control-radius);
    font-size: var(--crm-control-font-size);
    line-height: var(--crm-control-line-height);
}

.crm-import-wizard a:focus-visible{
    outline: 3px solid rgba(36, 104, 180, 0.25);
    outline-offset: 2px;
}

.crm-filter-bar{
    --crm-control-height: var(--crm-control-height-compact);
}

.crm-filter-bar .crm-button,
.crm-filter-bar .crm-control,
.crm-filter-bar .crm-icon-button{
    min-height: var(--crm-control-height);
}

@media (max-width: 900px){
    :root{
        --crm-control-height-compact: 44px;
        --crm-control-height-default: 48px;
        --crm-control-height-comfortable: 52px;
        --crm-control-height: var(--crm-control-height-default);
    }

    .crm-button-sm{
        min-height: var(--crm-control-height-compact);
    }

    .crm-filter-bar{
        --crm-control-height: var(--crm-control-height-compact);
    }
}

/* CRM UI CONTROL METRICS CONTRACT 0.14.2 END */

/* SOURCE MODULE: foundation/99-custom-fields-manager.css */
/* CRM UI Foundation — Custom Fields Manager 0.14.3 */
.crm-switch-option{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--crm-border);border-radius:var(--crm-radius-md);background:var(--crm-surface);cursor:pointer;min-width:0}
.crm-switch-option:hover{background:var(--crm-surface-muted)}
.crm-switch-control{display:inline-flex;flex:0 0 auto;padding-top:2px}
.crm-switch-control>input{position:absolute;opacity:0;pointer-events:none}
.crm-switch-track{display:inline-flex;align-items:center;width:38px;height:22px;padding:2px;border-radius:999px;background:var(--crm-border-strong,#b8c3d1);transition:background .16s ease}
.crm-switch-thumb{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.18);transform:translateX(0);transition:transform .16s ease}
.crm-switch-control>input:checked+.crm-switch-track{background:var(--crm-primary)}
.crm-switch-control>input:checked+.crm-switch-track .crm-switch-thumb{transform:translateX(16px)}
.crm-switch-control>input:focus-visible+.crm-switch-track{outline:3px solid color-mix(in srgb,var(--crm-primary) 24%,transparent);outline-offset:2px}
.crm-switch-copy{display:grid;gap:2px;min-width:0}
.crm-switch-label{font-family:inherit;font-size:13px;line-height:1.3;font-weight:750;color:var(--crm-text)}
.crm-switch-description{font-family:inherit;font-size:11px;line-height:1.4;font-weight:400;color:var(--crm-text-muted)}
.crm-custom-field-option-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.crm-custom-field-option-group{display:grid;align-content:start;gap:10px;min-width:0}
.crm-custom-field-option-group>header{display:grid;gap:2px}
.crm-custom-field-option-group h4{margin:0;font-size:var(--crm-font-md);color:var(--crm-text)}
.crm-custom-field-option-group p{margin:0;color:var(--crm-text-muted);font-size:var(--crm-font-sm)}
.crm-custom-field-option-list{display:grid;gap:8px}
.crm-custom-field-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:16px;margin-top:18px;border-top:1px solid var(--crm-border)}
.crm-custom-field-table-name{display:grid;gap:2px}.crm-custom-field-table-name small{color:var(--crm-text-muted)}
@media(max-width:980px){.crm-custom-field-option-groups{grid-template-columns:1fr}.crm-custom-field-modal-actions{position:sticky;bottom:0;background:var(--crm-surface);padding-bottom:4px}}

/* =========================================================
   CRM UI FOUNDATION — CUSTOM FIELDS MANAGER 0.14.3-r3
   Opções booleanas como formulário, nunca como cards/botões.
   ========================================================= */

/* Tipografia alinhada aos demais campos do CRM. */
.crm-custom-field-form .crm-switch-label,
.crm-custom-field-form .crm-checkbox-label {
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
}

.crm-custom-field-form .crm-switch-description,
.crm-custom-field-form .crm-checkbox-description {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
}

/*
 * Um switch representa uma opção de formulário.
 * Não deve parecer um card individual.
 */
.crm-custom-field-form .crm-switch-option {
    min-height: 0;
    padding: 6px 0;
    gap: 9px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.crm-custom-field-form .crm-switch-option:hover {
    background: transparent;
}

.crm-custom-field-form .crm-switch-copy {
    gap: 1px;
}

/*
 * Tipos aplicáveis são um conjunto de checkboxes.
 * Remove o comportamento visual de "cards selecionáveis"
 * somente dentro do Custom Fields Manager.
 */
.crm-custom-field-form .crm-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 18px;
}

.crm-custom-field-form .crm-choice-grid .crm-checkbox {
    min-height: 0;
    padding: 5px 0;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.crm-custom-field-form .crm-choice-grid .crm-checkbox:hover,
.crm-custom-field-form .crm-choice-grid .crm-checkbox:has(input:checked) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Mantém apenas o próprio checkbox como indicação de seleção. */
.crm-custom-field-form .crm-choice-grid .crm-checkbox-control {
    margin-top: 0;
}

/*
 * Grupos Comportamento / Descoberta / Privacidade:
 * aparência de seção de formulário, sem caixas internas.
 */
.crm-custom-field-option-groups {
    gap: 24px;
}

.crm-custom-field-option-group {
    gap: 7px;
}

.crm-custom-field-option-group > header {
    padding-bottom: 4px;
}

.crm-custom-field-option-group > header h4 {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.crm-custom-field-option-group > header p {
    font-size: 11px;
    line-height: 1.4;
}

.crm-custom-field-option-list {
    gap: 4px;
}

/* Tablet/mobile */
@media (max-width: 900px) {
    .crm-custom-field-form .crm-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .crm-custom-field-form .crm-choice-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CRM UI Foundation 0.14.4
   Custom Field Layout — disclosure inline, sem popover
   ============================================================ */

.crm-custom-field-layout {
    display: block;
    width: 100%;
    margin-top: 14px;
    border-top: 1px solid var(--crm-border);
    border-bottom: 1px solid var(--crm-border);
    background: transparent;
}

.crm-custom-field-layout-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 9px 0;
    cursor: pointer;
    list-style: none;
    color: var(--crm-text);
}

.crm-custom-field-layout-summary::-webkit-details-marker {
    display: none;
}

.crm-custom-field-layout-summary-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.crm-custom-field-layout-summary-copy strong {
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
}

.crm-custom-field-layout-summary-copy small {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--crm-text-muted);
}

.crm-custom-field-layout-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: transform .16s ease;
}

.crm-custom-field-layout[open] .crm-custom-field-layout-chevron {
    transform: rotate(180deg);
}

.crm-custom-field-layout-body {
    padding: 4px 0 14px;
}

/*
 * Layout avançado é parte do fluxo normal do formulário.
 * Nunca pode se transformar em popover/painel absoluto.
 */
.crm-custom-field-layout,
.crm-custom-field-layout-body {
    position: static;
    inset: auto;
    z-index: auto;
    box-shadow: none;
}

/*
 * Ajustes finais do Custom Fields Manager:
 * opções booleanas são controles de formulário, não cards.
 */
.crm-custom-field-form .crm-switch-option {
    padding: 5px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.crm-custom-field-form .crm-switch-option:hover {
    background: transparent;
}

.crm-custom-field-form .crm-switch-label {
    font-size: 12px;
    line-height: 1.35;
    font-weight: 650;
}

.crm-custom-field-form .crm-switch-description {
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
}

.crm-custom-field-form .crm-choice-grid .crm-checkbox {
    padding: 5px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.crm-custom-field-form .crm-choice-grid .crm-checkbox:hover,
.crm-custom-field-form .crm-choice-grid .crm-checkbox:has(input:checked) {
    border: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 720px) {
    .crm-custom-field-layout-body .crm-form-grid {
        grid-template-columns: 1fr;
    }
}

/* UI FOUNDATION — TEXT CLAMP
 * Utilitário central reutilizável para conteúdo textual de tabela.
 * O plugin escolhe a semântica; a UI Foundation controla a apresentação.
 */
.crm-data-table .crm-text-clamp-2,
.crm-table-truncate-content .crm-data-table .crm-text-clamp-2 {
    display: -webkit-box !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* CRM_ALERT_READABILITY_V3_START */

/*
 * Alertas da UI Foundation
 *
 * Mantem alertas compactos e coerentes com a densidade visual do CRM.
 * Textos em negrito dentro do corpo continuam na mesma frase e nao
 * devem produzir quebras artificiais de linha.
 */

.crm-alert{
    align-items: start;
    gap: 10px;
    padding: 11px 13px;
    font-size: 12px;
    line-height: 1.45;
}

.crm-alert .crm-alert-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.crm-alert .crm-alert-copy{
    display: grid;
    min-width: 0;
    gap: 2px;
}

.crm-alert .crm-alert-title{
    display: block;
    margin: 0;
    color: inherit;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.35;
}

.crm-alert .crm-alert-body{
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.crm-alert .crm-alert-body strong{
    display: inline;
    margin: 0;
    color: inherit;
    font-weight: 750;
}

.crm-alert .crm-alert-body p{
    margin: 0;
}

.crm-alert .crm-alert-body p + p{
    margin-top: 4px;
}

.crm-alert .crm-alert-body ul,
.crm-alert .crm-alert-body ol{
    margin: 4px 0 0;
    padding-left: 18px;
}

.crm-alert .crm-alert-body li{
    margin: 0;
}

.crm-alert .crm-alert-body li + li{
    margin-top: 2px;
}

/* CRM_ALERT_READABILITY_V3_END */

/* ==========================================================================
   UI CARD SYSTEM 1.0
   Shared surface + compact metric cards
   ========================================================================== */

:root {
    --crm-card-system-radius: 10px;

    --crm-card-system-border:
        var(
            --crm-border,
            #dfe6ee
        );

    --crm-card-system-surface:
        var(
            --crm-surface,
            #ffffff
        );

    --crm-card-system-muted:
        var(
            --crm-muted,
            #64748b
        );

    --crm-card-system-text:
        var(
            --crm-text,
            #111827
        );

    --crm-card-system-kpi-width:
        270px;

    --crm-card-system-kpi-height:
        82px;

    --crm-card-system-gap:
        10px;

    --crm-card-system-icon:
        30px;

    --crm-card-system-shadow:
        0 1px 4px
        rgba(
            15,
            23,
            42,
            .025
        );
}

/*
 * Superficie oficial.
 *
 * Componentes grandes mantem suas dimensoes.
 * O que se unifica aqui e a linguagem visual.
 */

.crm-card,
.crm-panel,
.crm-profile-panel,
.crm-data-panel,
.crm-summary-card,
.crm-choice-card,
.crm-plugin-card,
.crm-installer-card,
.crm-record-type-card,
.crm-environment-card,
.crm-profile-analytic-card,
.crm-profile-relationship-card,
.crm-inbox-profile-modal-card {
    border-color:
        var(
            --crm-card-system-border
        ) !important;

    border-radius:
        var(
            --crm-card-system-radius
        ) !important;

    background:
        var(
            --crm-card-system-surface
        ) !important;

    box-shadow:
        var(
            --crm-card-system-shadow
        ) !important;
}

/*
 * Hover somente onde o card e interativo.
 */

.crm-choice-card:hover,
.crm-plugin-card:hover,
.crm-installer-card:hover,
.crm-record-type-card:hover,
.crm-profile-relationship-card.is-link:hover,
.crm-metric-card.is-link:hover {
    border-color:
        #cbd5e1 !important;

    box-shadow:
        0 3px 10px
        rgba(
            15,
            23,
            42,
            .055
        ) !important;
}

/*
 * ==============================================================
 * KPI CARD
 * metric-card e list-metric passam a usar a mesma geometria.
 * ==============================================================
 */

.crm-metric-strip,
.crm-list-metrics {
    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    gap:
        var(
            --crm-card-system-gap
        ) !important;

    width:
        100% !important;

    max-width:
        100% !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    scroll-snap-type:
        x mandatory;

    overscroll-behavior-x:
        contain;

    touch-action:
        pan-x;

    scrollbar-width:
        none;

    -webkit-overflow-scrolling:
        touch;
}

.crm-metric-strip::-webkit-scrollbar,
.crm-list-metrics::-webkit-scrollbar {
    display:
        none;
}

/*
 * Card KPI comum.
 */

.crm-metric-card,
.crm-list-metric {
    --crm-card-accent:
        #64748b;

    --crm-card-soft:
        #f1f5f9;

    box-sizing:
        border-box !important;

    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        var(
            --crm-card-system-icon
        )
        minmax(
            0,
            1fr
        ) !important;

    column-gap:
        8px !important;

    align-items:
        center !important;

    flex:
        0 0
        var(
            --crm-card-system-kpi-width
        ) !important;

    width:
        var(
            --crm-card-system-kpi-width
        ) !important;

    min-width:
        var(
            --crm-card-system-kpi-width
        ) !important;

    max-width:
        var(
            --crm-card-system-kpi-width
        ) !important;

    height:
        var(
            --crm-card-system-kpi-height
        ) !important;

    min-height:
        var(
            --crm-card-system-kpi-height
        ) !important;

    max-height:
        var(
            --crm-card-system-kpi-height
        ) !important;

    margin:
        0 !important;

    padding:
        8px 10px !important;

    overflow:
        hidden !important;

    border:
        1px solid
        var(
            --crm-card-system-border
        ) !important;

    border-radius:
        var(
            --crm-card-system-radius
        ) !important;

    background:
        var(
            --crm-card-system-surface
        ) !important;

    box-shadow:
        var(
            --crm-card-system-shadow
        ) !important;

    scroll-snap-stop:
        always;
}

/*
 * Tons semanticos.
 */

.crm-metric-card.is-primary,
.crm-metric-card.is-info,
.crm-list-metric-primary,
.crm-list-metric-info {
    --crm-card-accent:
        #2563eb;

    --crm-card-soft:
        #eff6ff;
}

.crm-metric-card.is-success,
.crm-list-metric-success {
    --crm-card-accent:
        #10b981;

    --crm-card-soft:
        #ecfdf5;
}

.crm-metric-card.is-warning,
.crm-list-metric-warning {
    --crm-card-accent:
        #f59e0b;

    --crm-card-soft:
        #fffbeb;
}

.crm-metric-card.is-danger,
.crm-list-metric-danger {
    --crm-card-accent:
        #ef4444;

    --crm-card-soft:
        #fef2f2;
}

.crm-metric-card.is-purple {
    --crm-card-accent:
        #7c3aed;

    --crm-card-soft:
        #f5f3ff;
}

.crm-metric-card.is-pink {
    --crm-card-accent:
        #ec4899;

    --crm-card-soft:
        #fdf2f8;
}

.crm-metric-card.is-neutral,
.crm-list-metric-neutral {
    --crm-card-accent:
        #64748b;

    --crm-card-soft:
        #f1f5f9;
}

/*
 * Icone pastel.
 */

.crm-metric-icon,
.crm-list-metric-icon {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    align-self:
        start !important;

    width:
        var(
            --crm-card-system-icon
        ) !important;

    height:
        var(
            --crm-card-system-icon
        ) !important;

    min-width:
        var(
            --crm-card-system-icon
        ) !important;

    min-height:
        var(
            --crm-card-system-icon
        ) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(
            --crm-card-accent
        ) !important;

    background:
        var(
            --crm-card-soft
        ) !important;

    border:
        0 !important;

    border-radius:
        8px !important;
}

.crm-metric-icon svg,
.crm-list-metric-icon svg {
    width:
        16px !important;

    height:
        16px !important;
}

/*
 * Copia.
 */

.crm-metric-copy,
.crm-list-metric-copy {
    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    gap:
        1px !important;

    min-width:
        0 !important;

    height:
        100% !important;

    margin:
        0 !important;
}

.crm-metric-copy small,
.crm-list-metric-copy small {
    display:
        block !important;

    width:
        100% !important;

    margin:
        0 !important;

    overflow:
        hidden !important;

    color:
        var(
            --crm-card-system-muted
        ) !important;

    font-size:
        10px !important;

    font-weight:
        620 !important;

    line-height:
        1.1 !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

.crm-metric-copy strong,
.crm-list-metric-copy strong {
    display:
        block !important;

    width:
        100% !important;

    margin:
        3px 0 0 !important;

    overflow:
        hidden !important;

    color:
        var(
            --crm-card-system-text
        ) !important;

    font-size:
        19px !important;

    font-weight:
        780 !important;

    line-height:
        1 !important;

    letter-spacing:
        -.035em !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;

    font-variant-numeric:
        tabular-nums;
}

.crm-metric-helper,
.crm-metric-copy > span,
.crm-list-metric-copy > span {
    display:
        block !important;

    width:
        100% !important;

    margin:
        3px 0 0 !important;

    overflow:
        hidden !important;

    color:
        var(
            --crm-card-system-muted
        ) !important;

    font-size:
        8px !important;

    font-weight:
        450 !important;

    line-height:
        1.1 !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

/*
 * Meta / badges pequenos.
 */

.crm-metric-meta {
    display:
        inline-flex !important;

    width:
        auto !important;

    max-width:
        100% !important;

    margin-top:
        3px !important;

    font-size:
        8px !important;

    line-height:
        1 !important;
}

/*
 * ==============================================================
 * LOADER DE LIST METRICS
 *
 * Mantem a geometria exata de 270 x 82.
 * ==============================================================
 */

.crm-list-metrics-loading {
    gap:
        var(
            --crm-card-system-gap
        ) !important;
}

.crm-list-metrics-loading > span {
    box-sizing:
        border-box !important;

    position:
        relative !important;

    flex:
        0 0
        var(
            --crm-card-system-kpi-width
        ) !important;

    width:
        var(
            --crm-card-system-kpi-width
        ) !important;

    min-width:
        var(
            --crm-card-system-kpi-width
        ) !important;

    max-width:
        var(
            --crm-card-system-kpi-width
        ) !important;

    height:
        var(
            --crm-card-system-kpi-height
        ) !important;

    min-height:
        var(
            --crm-card-system-kpi-height
        ) !important;

    max-height:
        var(
            --crm-card-system-kpi-height
        ) !important;

    overflow:
        hidden !important;

    border:
        1px solid
        var(
            --crm-card-system-border
        ) !important;

    border-radius:
        var(
            --crm-card-system-radius
        ) !important;

    background:
        var(
            --crm-card-system-surface
        ) !important;

    box-shadow:
        none !important;
}

/*
 * Skeleton desenha:
 * icone + titulo + KPI + helper
 */

.crm-list-metrics-loading > span::before {
    content:
        "" !important;

    position:
        absolute !important;

    inset:
        8px 10px !important;

    border-radius:
        7px !important;

    background:
        linear-gradient(
            #eef2f6,
            #eef2f6
        )
        0 0 /
        30px 30px
        no-repeat,

        linear-gradient(
            #eef2f6,
            #eef2f6
        )
        38px 1px /
        88px 8px
        no-repeat,

        linear-gradient(
            #e9edf2,
            #e9edf2
        )
        38px 22px /
        62px 17px
        no-repeat,

        linear-gradient(
            #f0f3f6,
            #f0f3f6
        )
        38px 48px /
        108px 6px
        no-repeat !important;
}

.crm-list-metrics-loading > span::after {
    content:
        "" !important;

    position:
        absolute !important;

    inset:
        0 !important;

    transform:
        translateX(
            -100%
        );

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .58
            ),
            transparent
        ) !important;

    animation:
        crm-card-system-shimmer
        1.25s
        ease-in-out
        infinite !important;
}

@keyframes crm-card-system-shimmer {
    100% {
        transform:
            translateX(
                100%
            );
    }
}

/*
 * ==============================================================
 * RELATIONSHIP / ANALYTIC
 *
 * Mesma familia visual,
 * mas sem forcar largura de KPI.
 * ==============================================================
 */

.crm-profile-relationship-card,
.crm-profile-analytic-card {
    border:
        1px solid
        var(
            --crm-card-system-border
        ) !important;

    border-radius:
        var(
            --crm-card-system-radius
        ) !important;

    background:
        var(
            --crm-card-system-surface
        ) !important;

    box-shadow:
        var(
            --crm-card-system-shadow
        ) !important;
}

.crm-profile-relationship-card-icon,
.crm-profile-analytic-card-icon,
.crm-profile-panel-icon,
.crm-record-type-card-icon,
.crm-choice-card-icon {
    width:
        30px !important;

    height:
        30px !important;

    min-width:
        30px !important;

    min-height:
        30px !important;

    border-radius:
        8px !important;
}

.crm-profile-relationship-card-value,
.crm-profile-analytic-card-total {
    font-size:
        19px !important;

    font-weight:
        780 !important;

    letter-spacing:
        -.035em !important;
}

/*
 * ==============================================================
 * CHOICE CARD
 * ==============================================================
 */

.crm-choice-card {
    padding:
        10px 11px !important;

    border:
        1px solid
        var(
            --crm-card-system-border
        ) !important;

    border-radius:
        var(
            --crm-card-system-radius
        ) !important;

    background:
        var(
            --crm-card-system-surface
        ) !important;

    box-shadow:
        none !important;
}

/*
 * ==============================================================
 * CONTAINERS / SUMMARY
 *
 * Mesma superficie, sem transformar
 * paineis em KPIs de 270px.
 * ==============================================================
 */

.crm-panel,
.crm-profile-panel,
.crm-data-panel,
.crm-summary-card {
    border:
        1px solid
        var(
            --crm-card-system-border
        ) !important;

    border-radius:
        var(
            --crm-card-system-radius
        ) !important;

    background:
        var(
            --crm-card-system-surface
        ) !important;

    box-shadow:
        var(
            --crm-card-system-shadow
        ) !important;
}

.crm-panel-header,
.crm-profile-panel-header,
.crm-summary-card > header {
    border-color:
        var(
            --crm-card-system-border
        ) !important;
}

/*
 * ==============================================================
 * CARROSSEL / SNAP
 * ==============================================================
 */

.crm-metric-strip
> .crm-metric-card,
.crm-list-metrics
> .crm-list-metric {
    scroll-snap-align:
        none !important;
}

@media (
    max-width:
    424.98px
) {
    .crm-metric-strip
    > .crm-metric-card:nth-child(2n + 1),

    .crm-list-metrics
    > .crm-list-metric:nth-child(2n + 1) {
        scroll-snap-align:
            start !important;
    }
}

@media (
    min-width:
    425px
) and (
    max-width:
    1023.98px
) {
    .crm-metric-strip
    > .crm-metric-card:nth-child(4n + 1),

    .crm-list-metrics
    > .crm-list-metric:nth-child(4n + 1) {
        scroll-snap-align:
            start !important;
    }
}

@media (
    min-width:
    1024px
) {
    .crm-metric-strip
    > .crm-metric-card:nth-child(10n + 1),

    .crm-list-metrics
    > .crm-list-metric:nth-child(10n + 1) {
        scroll-snap-align:
            start !important;
    }
}

/*
 * Acessibilidade.
 */

@media (
    prefers-reduced-motion:
    reduce
) {
    .crm-list-metrics-loading
    > span::after {
        animation:
            none !important;

        display:
            none !important;
    }

    .crm-metric-strip,
    .crm-list-metrics {
        scroll-behavior:
            auto !important;
    }
}

/* CRM_PEOPLE_LIST_IDENTITY_UI_V5 END */


/* ==========================================================================
   P360_R83_CARD_SYSTEM_START
   Card comportamental consolidado.
   ========================================================================== */

/*
 * Faixa horizontal.
 * Usa largura real de cada card.
 */

html body
.crm-p360-overview-v3
.crm-p360-summary-panel
> .crm-metric-strip.crm-p360-behavior-strip {
    display: flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    justify-content:
        flex-start !important;

    gap:
        10px !important;

    width:
        100% !important;

    max-width:
        100% !important;

    margin:
        0 !important;

    padding:
        7px 9px 9px !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    scrollbar-width:
        none;

    scroll-snap-type:
        x mandatory;

    overscroll-behavior-x:
        contain;

    -webkit-overflow-scrolling:
        touch;
}

html body
.crm-p360-overview-v3
.crm-p360-summary-panel
> .crm-p360-behavior-strip
::-webkit-scrollbar {
    display: none;
}

/*
 * Card.
 */

html body
.crm-p360-overview-v3
.crm-p360-summary-panel
.crm-metric-card.crm-metric-card--behavior.crm-behavior-card {
    --crm-behavior-accent:
        #2563eb;

    --crm-behavior-soft:
        #eff6ff;

    box-sizing:
        border-box !important;

    position:
        relative !important;

    display:
        grid !important;

    grid-template-columns:
        30px
        minmax(0, 1fr) !important;

    grid-template-rows:
        12px
        34px
        10px !important;

    column-gap:
        8px !important;

    row-gap:
        0 !important;

    align-items:
        center !important;

    align-content:
        center !important;

    flex:
        0 0 270px !important;

    width:
        270px !important;

    min-width:
        270px !important;

    max-width:
        270px !important;

    height:
        82px !important;

    min-height:
        82px !important;

    max-height:
        82px !important;

    margin:
        0 !important;

    padding:
        7px 10px !important;

    overflow:
        hidden !important;

    border:
        1px solid
        var(
            --crm-card-system-border,
            #dfe6ee
        ) !important;

    border-radius:
        9px !important;

    background:
        var(
            --crm-card-system-surface,
            #ffffff
        ) !important;

    box-shadow:
        none !important;

    scroll-snap-align:
        start;
}

html body
.crm-p360-overview-v3
.crm-p360-summary-panel
.crm-metric-card--behavior::before {
    display:
        none !important;
}

/*
 * Tons.
 */

.crm-metric-card--behavior[
    data-p360-behavior-card="stores-viewed"
] {
    --crm-behavior-accent: #f97316;
    --crm-behavior-soft: #fff3e8;
}

.crm-metric-card--behavior[
    data-p360-behavior-card="store-interactions"
] {
    --crm-behavior-accent: #7c3aed;
    --crm-behavior-soft: #f4efff;
}

.crm-metric-card--behavior[
    data-p360-behavior-card="instagram-interactions"
] {
    --crm-behavior-accent: #ec4899;
    --crm-behavior-soft: #fdf2f8;
}

.crm-metric-card--behavior[
    data-p360-behavior-card="whatsapp-interactions"
] {
    --crm-behavior-accent: #10b981;
    --crm-behavior-soft: #ecfdf5;
}

.crm-metric-card--behavior[
    data-p360-behavior-card="wifi-accesses"
] {
    --crm-behavior-accent: #0891b2;
    --crm-behavior-soft: #ecfeff;
}

/*
 * Icone.
 */

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-icon {
    grid-column:
        1 !important;

    grid-row:
        1 / 4 !important;

    align-self:
        start !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        30px !important;

    height:
        30px !important;

    min-width:
        30px !important;

    min-height:
        30px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(
            --crm-behavior-accent
        ) !important;

    background:
        var(
            --crm-behavior-soft
        ) !important;

    border:
        0 !important;

    border-radius:
        8px !important;
}

.crm-metric-card--behavior
.crm-behavior-card-icon svg {
    width:
        16px !important;

    height:
        16px !important;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

/*
 * Titulo.
 */

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-head {
    grid-column:
        2 !important;

    grid-row:
        1 !important;

    display:
        block !important;

    width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-title-wrap {
    display:
        block !important;

    width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-title-wrap h3 {
    width:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    color:
        var(
            --crm-card-system-text,
            #111827
        ) !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        12px !important;

    letter-spacing:
        -.01em !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

/*
 * Conteudo.
 */

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-main.crm-behavior-card-body {
    grid-column:
        2 !important;

    grid-row:
        2 !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        60px !important;

    gap:
        5px !important;

    align-items:
        center !important;

    width:
        100% !important;

    min-width:
        0 !important;

    height:
        34px !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

.crm-metric-card--behavior[
    data-p360-behavior-chart="none"
]
.crm-behavior-card-main {
    grid-template-columns:
        minmax(0, 1fr) !important;
}

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-metrics {
    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    flex-wrap:
        nowrap !important;

    gap:
        7px !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-primary,
html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-secondary {
    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        flex-start !important;

    gap:
        1px !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-primary strong,
html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-secondary strong {
    margin:
        0 !important;

    padding:
        0 !important;

    font-size:
        18px !important;

    font-weight:
        780 !important;

    line-height:
        18px !important;

    letter-spacing:
        -.035em !important;

    font-variant-numeric:
        tabular-nums;
}

.crm-metric-card--behavior[
    data-p360-behavior-card="sessions-actions"
]
.crm-behavior-card-primary strong {
    color:
        #f97316 !important;
}

.crm-metric-card--behavior[
    data-p360-behavior-card="sessions-actions"
]
.crm-behavior-card-secondary strong {
    color:
        #2563eb !important;
}

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-primary span,
html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-secondary span {
    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(
            --crm-card-system-muted,
            #64748b
        ) !important;

    font-size:
        7.5px !important;

    font-weight:
        500 !important;

    line-height:
        9px !important;

    white-space:
        nowrap !important;
}

.crm-metric-card--behavior
.crm-behavior-card-metric-separator {
    display:
        none !important;
}

/*
 * Grafico.
 */

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-visual {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        flex-end !important;

    justify-self:
        end !important;

    width:
        60px !important;

    min-width:
        60px !important;

    max-width:
        60px !important;

    height:
        32px !important;

    min-height:
        32px !important;

    max-height:
        32px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;
}

.crm-metric-card--behavior[
    data-p360-behavior-chart="none"
]
.crm-behavior-card-visual {
    display:
        none !important;
}

.crm-metric-card--behavior
.crm-behavior-chart-mini,
.crm-metric-card--behavior
.crm-behavior-real-line,
.crm-metric-card--behavior
.crm-behavior-card-visual svg {
    display:
        block !important;

    width:
        60px !important;

    height:
        30px !important;

    overflow:
        visible !important;
}

.crm-metric-card--behavior
.crm-behavior-line {
    fill:
        none !important;

    stroke-width:
        1.6 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    vector-effect:
        non-scaling-stroke;
}

.crm-metric-card--behavior
.crm-behavior-line.is-orange {
    stroke:
        #f97316 !important;
}

.crm-metric-card--behavior
.crm-behavior-line.is-blue {
    stroke:
        #2563eb !important;
}

.crm-metric-card--behavior
.crm-behavior-real-donut {
    position:
        relative !important;

    display:
        block !important;

    width:
        40px !important;

    height:
        40px !important;

    min-width:
        40px !important;

    min-height:
        40px !important;

    margin:
        0 0 0 auto !important;

    border-radius:
        50% !important;
}

.crm-metric-card--behavior
.crm-behavior-real-donut::after {
    content:
        "" !important;

    position:
        absolute !important;

    inset:
        8px !important;

    border-radius:
        50% !important;

    background:
        var(
            --crm-card-system-surface,
            #ffffff
        ) !important;
}

/*
 * Meta inferior.
 */

html body
.crm-p360-overview-v3
.crm-metric-card--behavior
.crm-behavior-card-detail.crm-behavior-card-meta {
    grid-column:
        2 !important;

    grid-row:
        3 !important;

    display:
        block !important;

    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    color:
        var(
            --crm-card-system-muted,
            #64748b
        ) !important;

    font-size:
        7.5px !important;

    font-weight:
        450 !important;

    line-height:
        10px !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}

/*
 * Skeleton real.
 */

.crm-metric-card--behavior
.crm-behavior-card-skeleton {
    position:
        absolute !important;

    z-index:
        5 !important;

    left:
        48px !important;

    right:
        10px !important;

    top:
        27px !important;

    bottom:
        8px !important;

    display:
        none !important;

    grid-template-columns:
        minmax(0, 1fr)
        60px !important;

    grid-template-rows:
        18px
        6px !important;

    gap:
        6px 8px !important;

    pointer-events:
        none !important;
}

.crm-metric-card--behavior.is-loading
.crm-behavior-card-main,
.crm-metric-card--behavior.is-loading
.crm-behavior-card-detail,
.crm-metric-card--behavior[
    data-p360-behavior-state="loading"
]
.crm-behavior-card-main,
.crm-metric-card--behavior[
    data-p360-behavior-state="loading"
]
.crm-behavior-card-detail {
    visibility:
        hidden !important;
}

.crm-metric-card--behavior.is-loading
.crm-behavior-card-skeleton,
.crm-metric-card--behavior[
    data-p360-behavior-state="loading"
]
.crm-behavior-card-skeleton {
    display:
        grid !important;
}

.crm-metric-card--behavior
.crm-behavior-card-skeleton
> span {
    position:
        relative !important;

    overflow:
        hidden !important;

    border-radius:
        5px !important;

    background:
        #edf1f5 !important;
}

.crm-metric-card--behavior
.crm-behavior-card-skeleton
> span::after {
    content:
        "" !important;

    position:
        absolute !important;

    inset:
        0 !important;

    transform:
        translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .75
            ),
            transparent
        );

    animation:
        crm-card-system-shimmer
        1.15s
        ease-in-out
        infinite;
}

.crm-behavior-card-skeleton
.is-kpi {
    grid-column:
        1;

    grid-row:
        1;

    width:
        80px;

    height:
        18px;
}

.crm-behavior-card-skeleton
.is-chart {
    grid-column:
        2;

    grid-row:
        1;

    justify-self:
        end;

    width:
        54px;

    height:
        22px;
}

.crm-behavior-card-skeleton
.is-meta {
    grid-column:
        1;

    grid-row:
        2;

    width:
        100px;

    height:
        6px;
}

/*
 * Estado indisponivel.
 */

.crm-metric-card--behavior.is-unavailable
.crm-behavior-card-primary strong,
.crm-metric-card--behavior.is-unavailable
.crm-behavior-card-secondary strong {
    color:
        var(
            --crm-card-system-muted,
            #64748b
        ) !important;
}

@media (
    prefers-reduced-motion: reduce
) {
    .crm-metric-card--behavior
    .crm-behavior-card-skeleton
    > span::after {
        animation:
            none !important;
    }
}

/* P360_R83_CARD_SYSTEM_END */

/* ==========================================================
   UI_IDENTITY_MANAGEMENT_ROW_V1
   UI Foundation - identificadores editaveis
   ========================================================== */

.crm-identifier-management-row{
    display:grid;
    grid-template-columns:26px minmax(0,1fr) auto;
    align-items:center;
    gap:6px 10px;
    min-width:0;
    padding:8px 0;
    border-top:1px solid var(--crm-border);
}

.crm-identifier-management-row:first-child{
    border-top:0;
}

.crm-identifier-management-icon{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    color:var(--crm-primary);
    background:var(--crm-primary-soft);
    border-radius:7px;
}

.crm-identifier-management-copy{
    display:grid;
    gap:4px;
    min-width:0;
}

.crm-identifier-management-main{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-width:0;
}

.crm-identifier-management-label{
    flex:0 0 68px;
    color:var(--crm-text-muted);
    font-size:10px;
    font-weight:600;
    line-height:1.25;
}

.crm-identifier-management-value{
    min-width:0;
    color:var(--crm-text);
    font-size:12px;
    font-weight:600;
    line-height:1.35;
    overflow-wrap:anywhere;
}

.crm-identifier-management-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px;
}

.crm-identifier-management-meta .crm-badge{
    font-size:9px;
    line-height:1.15;
}

.crm-identifier-management-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
}

.crm-identifier-management-actions .crm-button{
    white-space:nowrap;
}

@media (max-width:680px){
    .crm-identifier-management-row{
        grid-template-columns:24px minmax(0,1fr);
        align-items:start;
    }

    .crm-identifier-management-main{
        display:grid;
        gap:2px;
    }

    .crm-identifier-management-label{
        flex-basis:auto;
    }

    .crm-identifier-management-actions{
        grid-column:2;
        justify-content:flex-start;
    }
}

/* UI_IDENTITY_MANAGEMENT_ROW_V1_END */

/* ========================================================================
 * CRM_TABLE_NATURAL_ACTIONS_V1
 *
 * Tabelas com smart=false usam geometria HTML normal.
 * Não dependem do runtime SmartTable para exibir ações de linha.
 * ======================================================================== */

.crm-data-table.crm-data-table-natural {
    width: 100%;
    min-width: 100% !important;
    max-width: 100%;
    table-layout: auto;
}

.crm-data-table.crm-data-table-natural
.crm-st2-actions-head,
.crm-data-table.crm-data-table-natural
.crm-st2-actions-cell {
    position: static !important;
    display: table-cell !important;

    inset: auto !important;

    width: 1% !important;
    min-width: 92px !important;
    max-width: none !important;

    padding: 7px 8px !important;
    margin: 0 !important;

    overflow: visible !important;

    white-space: nowrap;
    text-align: right;
}

.crm-data-table.crm-data-table-natural
.crm-st2-actions-head {
    border-bottom: 1px solid var(--crm-border) !important;
    background: #f8fafc !important;
}

.crm-data-table.crm-data-table-natural
.crm-st2-actions-cell {
    border-bottom: 1px solid var(--crm-border) !important;
    background: inherit !important;
}

.crm-data-table.crm-data-table-natural
tbody tr:last-child
.crm-st2-actions-cell {
    border-bottom: 0 !important;
}

.crm-data-table.crm-data-table-natural
.crm-st2-actions-overlay {
    position: static !important;

    display: block !important;

    inset: auto !important;

    width: auto !important;
    max-width: none !important;

    padding: 0 !important;

    transform: none !important;

    visibility: visible !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    pointer-events: auto !important;
}

.crm-data-table.crm-data-table-natural
.crm-st2-actions-overlay
.crm-row-actions {
    justify-content: flex-end;

    visibility: visible;

    pointer-events: auto;
}


/* ---------------------------------------------------------
   FOTO CONTINUA SENDO O ELEMENTO PRINCIPAL
   --------------------------------------------------------- */

.crm-avatar > img {
    position: relative;
    z-index: 1;
}

/* ==========================================================
   CRM UI FOUNDATION
   AVATAR + MARKERS
   P360_R14_2C_AVATAR_CSS_CONSOLIDATED
   ========================================================== */


/* PEOPLE LIST */

table:has(.crm-people-person-identity)
thead tr > :first-child,
table:has(.crm-people-person-identity)
tbody tr > :first-child {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    padding-left: 8px !important;
    padding-right: 4px !important;

    text-align: center;
}


table:has(.crm-people-person-identity)
thead tr > :nth-child(2),
table:has(.crm-people-person-identity)
tbody tr > :nth-child(2) {
    padding-left: 4px !important;
}


.crm-people-person-identity {
    display: flex;
    align-items: center;

    gap: 7px;

    min-width: 0;
    min-height: 46px;

    margin-left: 0 !important;
}


.crm-people-person-identity
> .crm-record-primary-link {
    flex: 1 1 auto;
    min-width: 0;
}


/*
 * R15.1A
 * Mantem exatamente 5px entre o avatar e
 * as divisorias superior/inferior da linha.
 */
table:has(.crm-people-person-identity)
tbody tr > td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    vertical-align: middle !important;
}


.crm-list-person-avatar.crm-avatar {
    --crm-list-person-avatar-size: 46px;

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex:
        0 0
        var(--crm-list-person-avatar-size);

    width:
        var(--crm-list-person-avatar-size);

    height:
        var(--crm-list-person-avatar-size);

    min-width:
        var(--crm-list-person-avatar-size);

    min-height:
        var(--crm-list-person-avatar-size);

    max-width:
        var(--crm-list-person-avatar-size);

    max-height:
        var(--crm-list-person-avatar-size);

    overflow: visible;

    border:
        1px solid
        var(--bs-border-color, #dee2e6);

    border-radius: 50%;

    background:
        var(--bs-body-bg, #ffffff);

    color:
        var(
            --bs-primary-text-emphasis,
            #0a58ca
        );

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    text-align: center;
    text-transform: uppercase;

    box-sizing: border-box;
    user-select: none;
}


.crm-list-person-avatar.crm-avatar
> img {
    position: absolute;

    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background:
        var(--bs-body-bg, #ffffff);

    object-fit: cover;
    object-position: center center;
}


@media (max-width: 767.98px) {
    .crm-list-person-avatar.crm-avatar {
        --crm-list-person-avatar-size: 42px;
    }

    .crm-people-person-identity {
        min-height: 42px;
    }
}


/* MARKERS */

.crm-avatar-marker-host,
.crm-avatar-marker-host.crm-avatar {
    position: relative;
    overflow: visible;
}


.crm-avatar-markers {
    position: absolute;

    inset: 0;

    z-index: 4;

    overflow: visible;

    pointer-events: none;
}


.crm-avatar-marker {
    --crm-avatar-marker-color: #64748b;
    --crm-avatar-marker-size: 12px;
    --crm-avatar-marker-left: -6px;

    position: absolute;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width:
        var(--crm-avatar-marker-size);

    height:
        var(--crm-avatar-marker-size);

    min-width:
        var(--crm-avatar-marker-size);

    min-height:
        var(--crm-avatar-marker-size);

    margin: 0;
    padding: 0;

    color:
        var(--crm-avatar-marker-color);

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;
    filter: none;

    transform: none;

    line-height: 1;

    overflow: visible;

    isolation: isolate;

    pointer-events: auto;
}


/* TYPE STAR */

.crm-avatar-marker.is-person-type,
.crm-avatar-marker.is-entity-type {
    --crm-avatar-marker-size: 12px;
    --crm-avatar-marker-left: -6px;

    bottom: -2px;
    right: auto;
    top: auto;
    left:
        var(--crm-avatar-marker-left);
}


/* STORE */

.crm-avatar-marker.is-store-link {
    --crm-avatar-marker-size: 11px;
    --crm-avatar-marker-left: -5px;

    bottom: auto;
    right: auto;
    top: -2px;
    left:
        var(--crm-avatar-marker-left);
}


/* LISTA DE PESSOAS */

.crm-list-person-avatar.crm-avatar
.crm-avatar-marker.is-person-type,
.crm-list-person-avatar.crm-avatar
.crm-avatar-marker.is-store-link {
    --crm-avatar-marker-left: -7px;
}

.crm-list-person-avatar.crm-avatar
.crm-avatar-marker.is-person-type {
    --crm-avatar-marker-size: 14px;
    bottom: -1px;
}

.crm-list-person-avatar.crm-avatar
.crm-avatar-marker.is-store-link {
    --crm-avatar-marker-size: 16px;
    top: -1px;
}

/* LARGE AVATAR */

.crm-avatar-xl
.crm-avatar-marker.is-person-type,
.crm-avatar-xl
.crm-avatar-marker.is-entity-type {
    --crm-avatar-marker-size: 18px;
    --crm-avatar-marker-left: -8px;

    bottom: -3px;
}


.crm-avatar-xl
.crm-avatar-marker.is-store-link {
    --crm-avatar-marker-size: 16px;
    --crm-avatar-marker-left: -7px;

    top: -3px;
}


/* WHITE OUTLINE */

.crm-avatar-marker-outline,
.crm-avatar-marker-glyph {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;

    pointer-events: none;
}


.crm-avatar-marker-outline {
    z-index: 1;
    color: #ffffff;
}


.crm-avatar-marker-glyph {
    z-index: 2;
    color: inherit;
}


.crm-avatar-marker-outline
> .crm-icon,
.crm-avatar-marker-glyph
> .crm-icon {
    width: 100%;
    height: 100%;

    filter: none;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.crm-avatar-marker-outline
> .crm-icon {
    color: #ffffff;

    stroke: #ffffff;
    stroke-width: 4.8;
}


.crm-avatar-marker-glyph
> .crm-icon {
    color: inherit;

    stroke: currentColor;
    stroke-width: 2.25;
}


/* STAR */

.crm-avatar-marker.is-person-type
.crm-avatar-marker-outline
> .crm-icon {
    fill: #ffffff;
}


.crm-avatar-marker.is-person-type
.crm-avatar-marker-glyph
> .crm-icon {
    fill: currentColor;
}


/* STORE ICON */

.crm-avatar-marker.is-store-link
.crm-avatar-marker-outline
> .crm-icon,
.crm-avatar-marker.is-store-link
.crm-avatar-marker-glyph
> .crm-icon {
    fill: none;
}


/* TONES */

.crm-avatar-marker.is-neutral {
    --crm-avatar-marker-color: #526173;
}

.crm-avatar-marker.is-blue {
    --crm-avatar-marker-color: #155eef;
}

.crm-avatar-marker.is-green {
    --crm-avatar-marker-color: #0b8f4d;
}

.crm-avatar-marker.is-yellow {
    --crm-avatar-marker-color: #e0a100;
}

.crm-avatar-marker.is-purple {
    --crm-avatar-marker-color: #7c3aed;
}

.crm-avatar-marker.is-orange {
    --crm-avatar-marker-color: #e4570a;
}

.crm-avatar-marker.is-red {
    --crm-avatar-marker-color: #d92d20;
}

.crm-avatar-marker.is-teal {
    --crm-avatar-marker-color: #087f73;
}

.crm-avatar-marker.is-pink {
    --crm-avatar-marker-color: #d11665;
}

/* ==========================================================
   END AVATAR + MARKERS
   ========================================================== */

/* ==========================================================
   UI FOUNDATION
   CRM_MODULE_NAV_DESKTOP_VISIBILITY_V1

   Desktop:
   todos os itens precisam permanecer visiveis.
   Se faltar espaco, a navegacao quebra de linha.

   Mobile:
   permanece o comportamento horizontal deslizavel.
   ========================================================== */

@media (min-width: 768px) {
    .crm-module-nav {
        overflow: visible;
    }

    .crm-module-nav-scroll {
        flex-wrap: wrap;

        overflow-x: visible;
        overflow-y: visible;

        row-gap: 0;
    }
}

/* END CRM_MODULE_NAV_DESKTOP_VISIBILITY_V1 */

/* ==========================================================
   P360_TYPE_MARKER_TRASH_V1 - custom avatar marker image
   ========================================================== */

.crm-avatar-marker-custom-icon{
    display: block;
    width: 100%;
    height: 100%;

    background-color: transparent;
    background-image: var(--crm-avatar-marker-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    filter: none;
    opacity: 1;
}

.crm-avatar-marker-outline .crm-avatar-marker-custom-icon{
    display: none;
}

/* SOURCE MODULE: foundation/99z-sidebar-compact.css */
/* CRM_SIDEBAR_COMPACT_V1
   Menu compacto global. Preserva o menu mobile.
*/
.crm-sidebar-compact-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--crm-muted);
    background: var(--crm-surface);
    border: 1px solid var(--crm-border);
    border-radius: 9px;
    cursor: pointer;
}

.crm-sidebar-compact-toggle:hover,
.crm-sidebar-compact-toggle:focus-visible {
    color: var(--crm-primary);
    border-color: var(--crm-primary);
    background: var(--crm-primary-soft);
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    .crm-sidebar-compact-toggle {
        display: inline-flex;
    }

    html.crm-shell-sidebar-compact {
        --crm-sidebar-width: 68px;
    }

    html.crm-shell-sidebar-compact .crm-sidebar-header {
        justify-content: center;
        padding-right: 7px;
        padding-left: 7px;
    }

    html.crm-shell-sidebar-compact .crm-brand {
        width: 100%;
        justify-content: center;
    }

    html.crm-shell-sidebar-compact .crm-brand-copy {
        display: none;
    }

    html.crm-shell-sidebar-compact .crm-sidebar-scroll {
        padding-right: 7px;
        padding-left: 7px;
        scrollbar-gutter: auto;
    }

    html.crm-shell-sidebar-compact .crm-navigation {
        gap: 5px;
    }

    html.crm-shell-sidebar-compact .crm-navigation-label {
        height: 10px;
        padding: 0;
        margin: 8px 12px 8px;
        overflow: hidden;
        color: transparent;
        font-size: 0;
        border-top: 1px solid rgba(255,255,255,.14);
    }

    html.crm-shell-sidebar-compact .crm-navigation-link,
    html.crm-shell-sidebar-compact
    .crm-navigation-group > summary.crm-navigation-link {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: 0;
        gap: 0;
    }

    html.crm-shell-sidebar-compact .crm-navigation-link > span {
        display: none;
    }

    html.crm-shell-sidebar-compact
    .crm-navigation-link > svg.crm-icon {
        flex: 0 0 auto;
        width: 19px;
        height: 19px;
    }

    html.crm-shell-sidebar-compact .crm-sidebar-footer {
        gap: 9px;
        padding-right: 7px;
        padding-left: 7px;
    }

    html.crm-shell-sidebar-compact .crm-environment-card {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 43px;
        padding: 9px 0;
    }

    html.crm-shell-sidebar-compact
    .crm-environment-card > :not(.crm-badge) {
        display: none;
    }

    html.crm-shell-sidebar-compact
    .crm-environment-card > .crm-badge {
        display: block;
        flex: 0 0 auto;
        width: 11px;
        height: 11px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        font-size: 0;
        background: #22bd77;
        box-shadow: 0 0 0 3px rgba(34,189,119,.13);
    }

    html.crm-shell-sidebar-compact
    .crm-sidebar-user > summary {
        display: flex;
        justify-content: center;
        padding: 5px;
    }

    html.crm-shell-sidebar-compact .crm-sidebar-user-copy,
    html.crm-shell-sidebar-compact
    .crm-sidebar-user > summary > svg.crm-icon {
        display: none;
    }

    html.crm-shell-sidebar-compact .crm-sidebar-user-menu {
        position: fixed;
        right: auto;
        bottom: max(12px, var(--crm-safe-bottom));
        left: calc(var(--crm-sidebar-width) + 8px);
        width: min(280px, calc(100vw - 96px));
        max-height: min(70dvh, 570px);
    }

    html.crm-shell-sidebar-compact
    .crm-sidebar-compact-toggle {
        background: var(--crm-primary-soft);
        border-color: #c0d1ff;
        color: var(--crm-primary);
    }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    .crm-app-shell {
        transition: grid-template-columns 150ms ease;
    }

    .crm-sidebar {
        transition: width 150ms ease;
    }
}


/* CRM_SIDEBAR_HANDLE_TOOLTIP_V2 */

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    .crm-sidebar-compact-toggle {
        position: fixed;
        z-index: 1100;
        top: calc(17px + var(--crm-safe-top, 0px));
        left: calc(var(--crm-sidebar-width) - 17px);

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 34px;
        height: 34px;
        min-width: 34px;
        padding: 0;

        border: 1px solid #d1dbea;
        border-radius: 50%;

        background: #fff;
        color: #344769;

        box-shadow: 0 3px 13px rgba(12, 28, 52, .16);
        cursor: pointer;

        transition:
            left 150ms ease,
            background 150ms ease,
            border-color 150ms ease,
            box-shadow 150ms ease;
    }

    .crm-sidebar-compact-toggle:hover,
    .crm-sidebar-compact-toggle:focus-visible,
    html.crm-shell-sidebar-compact .crm-sidebar-compact-toggle:hover,
    html.crm-shell-sidebar-compact .crm-sidebar-compact-toggle:focus-visible {
        color: #1f55d8;
        background: #eef4ff;
        border-color: #7ea2f7;
        box-shadow: 0 3px 16px rgba(36, 87, 214, .22);
    }

    .crm-sidebar-compact-toggle .crm-icon {
        transform: rotate(180deg);
        transition: transform 150ms ease;
    }

    html.crm-shell-sidebar-compact .crm-sidebar-compact-toggle .crm-icon {
        transform: rotate(0deg);
    }
}

.crm-sidebar-menu-tooltip-v2 {
    position: fixed;
    z-index: 6200;

    display: block;
    max-width: min(260px, calc(100vw - 90px));
    padding: 7px 10px;

    border: 1px solid rgba(148, 172, 210, .28);
    border-radius: 8px;

    background: #182a45;
    box-shadow: 0 6px 18px rgba(7, 21, 40, .22);

    color: #fff;

    font: 600 12px/1.35 system-ui, -apple-system,
          BlinkMacSystemFont, 'Segoe UI', sans-serif;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    pointer-events: none;
}

.crm-sidebar-menu-tooltip-v2[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .crm-sidebar-compact-toggle,
    .crm-sidebar-compact-toggle .crm-icon {
        transition: none !important;
    }
}

/* SOURCE MODULE: foundation/99zz-table-headings.css */
/* UI_FOUNDATION_TABLE_HEADERS_REFINED_V1
   Cabecalhos discretos e legiveis em todas as x-ui.table.
   Os textos permanecem como definidos em cada tela.
*/
.crm-table-shell .crm-data-table > thead > tr > th,
.crm-table-floating-header .crm-data-table > thead > tr > th {
    height: auto;
    min-height: 0;
    padding: 8px 10px;
    background: var(--crm-surface-soft, #f8fafc);
    color: var(--crm-muted, #64748b);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    vertical-align: middle;
}

/* Mais delicado nos cards e nas tabelas compactas. */
.crm-st2-shell--compact .crm-data-table > thead > tr > th {
    padding-top: 7px;
    padding-bottom: 7px;
}

/* Menos espaco nas extremidades. */
.crm-table-shell .crm-data-table > thead > tr > th:first-child {
    padding-left: 12px;
}

.crm-table-shell .crm-data-table > thead > tr > th:last-child {
    padding-right: 12px;
}

/* A coluna Abrir nao deve quebrar a palavra. */
.crm-table-shell .crm-data-table > thead > tr > th.crm-profile-link-open-head {
    width: 56px;
    min-width: 56px;
    padding-right: 9px;
    padding-left: 5px;
    text-align: right;
    white-space: nowrap;
}

.crm-table-shell .crm-data-table > tbody > tr > td.crm-profile-link-open-cell {
    width: 56px;
    min-width: 56px;
    padding-right: 9px;
    padding-left: 5px;
    text-align: right;
}

/* O icone de link externo permanece visivel. */
.crm-table-shell .crm-data-table .crm-profile-link-open-cell .crm-row-actions {
    opacity: 1;
    transform: none;
    visibility: visible;
}

/* ================================================================
   PERF_GLOBAL_09B5_NEUTRAL_TABLE_COLORS_V1

   Aparencia neutra para tabelas da UI Foundation.
   Nao altera controles, dados, ordenacao ou comportamento.
   ================================================================ */

/* Titulos das colunas e links de ordenacao. */
.crm-table-shell .crm-data-table > thead > tr > th,
.crm-table-shell .crm-data-table > thead > tr > th .crm-st2-sort,
.crm-table-shell .crm-data-table > thead > tr > th .crm-st2-label,
.crm-table-floating-header .crm-data-table > thead > tr > th,
.crm-table-floating-header .crm-data-table > thead > tr > th .crm-st2-sort {
    color: #667085 !important;
}

/* Texto e icones dos cabecalhos seguem a mesma cor. */
.crm-table-shell .crm-data-table > thead > tr > th .crm-st2-sort > span,
.crm-table-shell .crm-data-table > thead > tr > th .crm-st2-sort svg,
.crm-table-shell .crm-data-table > thead > tr > th .crm-st2-sort i,
.crm-table-floating-header .crm-data-table > thead > tr > th .crm-st2-sort > span,
.crm-table-floating-header .crm-data-table > thead > tr > th .crm-st2-sort svg {
    color: inherit !important;
    stroke: currentColor;
}

/* Ordenacao ativa continua identificada pela seta. */
.crm-table-shell .crm-data-table > thead > tr > th.is-sorted .crm-st2-sort {
    color: #475467 !important;
}

/* Hover discreto dos cabecalhos. */
.crm-table-shell .crm-data-table > thead > tr > th .crm-st2-sort:hover,
.crm-table-shell .crm-data-table > thead > tr > th .crm-st2-sort:focus-visible {
    color: #344054 !important;
}

/* Links comuns nos dados, sem atingir botoes ou acoes especiais. */
.crm-table-shell .crm-data-table > tbody > tr > td
a:not(.crm-icon-button):not(.crm-button):not(.crm-record-primary-link) {
    color: #344054 !important;
    font-weight: 600;
    text-decoration: none;
}

/* Links permanecem reconheciveis ao interagir. */
.crm-table-shell .crm-data-table > tbody > tr > td
a:not(.crm-icon-button):not(.crm-button):not(.crm-record-primary-link):hover {
    color: #1d2939 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Foco visivel para navegacao pelo teclado. */
.crm-table-shell .crm-data-table > tbody > tr > td
a:not(.crm-icon-button):not(.crm-button):not(.crm-record-primary-link):focus-visible {
    color: #1d2939 !important;
    text-decoration: underline;
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* FIM PERF_GLOBAL_09B5_NEUTRAL_TABLE_COLORS_V1 */