/* 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;
    }
}

/* 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-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%;
    }
}

/* 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. */

/* 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;
    }
}

/* 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 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 */

/*
 * Estrutura intencional:
 *
 * Título ........................................ [fechar]
 * Texto explicativo ocupando toda a largura
 *
 * Restaurar larguras   Restaurar padrão
 */

.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 */

/* Header reduzido ao essencial. */
.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;
}

/* A antiga faixa utilitária deixa de ocupar espaço no header. */
.crm-column-picker-panel--r4b .crm-column-picker-tools--r4b {
    display: none !important;
}

/* Mais espaço útil para a lista. */
.crm-column-picker-panel--r4b .crm-column-picker-scroll--r4b {
    padding-top: 3px;
}

/* Footer fixo: utilidades à esquerda, ações à direita. */
.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 */

/*
 * O divisor de resize pertence ao TH real e usa posicionamento absoluto.
 * Portanto o TH precisa ser sua containing block independentemente de o
 * cabeçalho estar ou não acompanhando a rolagem vertical.
 */
.crm-table-shell[data-crm-table-contract]
.crm-data-table
th[data-crm-smart-column][data-crm-column-resizable="true"] {
    position: relative;
}

/*
 * Garante que o alvo de ponteiro continue disponível sobre a borda direita
 * da coluna no estado normal e no estado de header flutuante.
 */
.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
 * ======================================================================== */

/*
 * r2 deixou position:static!important no TH normal. R3 so o substituia
 * durante o estado flutuante. R5 define explicitamente os dois estados.
 */
.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;
}

/* O clone r2 deixa de ser superficie funcional. R3/R5 usam o THEAD real. */
.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
 *
 * Quando o usuario possui ao menos uma largura persistida, o servidor ja
 * entrega essa largura no TH via data-crm-initial-column-width.
 *
 * Com table-layout:auto, entretanto, o navegador ainda pode expandir a
 * coluna pelo min-content dos TDs no primeiro layout e so encolher depois
 * quando o JS R5 aplica width/min/max nos demais cells.
 *
 * O contrato correto e: havendo widths SSR, o primeiro layout da tabela usa
 * o header como fonte geometrica. Assim a tabela nasce no tamanho persistido.
 * ======================================================================== */
.crm-table-shell[data-crm-table-contract]
.crm-data-table:has(
    thead th[data-crm-initial-column-width]
) {
    table-layout: fixed;
}

/*
 * Em fixed layout o primeiro row (THEAD) define a geometria das colunas.
 * O conteudo deixa de impor min-content maior do que a preferencia do usuario.
 */
.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;
}

/*
 * Permite que texto/conteudo interno respeite a largura escolhida pelo
 * usuario em vez de forcar novamente a coluna a crescer.
 */
.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
 *
 * As ações pertencem à linha, não à posição horizontal física da última
 * coluna. O anchor fica sticky no limite direito do scroll container.
 *
 * Resultado:
 * - tabela larga: ações continuam dentro da área visível;
 * - scroll horizontal: ações acompanham a borda direita;
 * - não reserva largura artificial para a coluna de ações;
 * - comportamento global para todas as SmartTables.
 * ======================================================================== */

.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;
}

/*
 * Evita que conteúdo de células vizinhas fique visualmente por cima
 * dos botões quando a tabela estiver deslocada horizontalmente.
 */
.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);
}

/*
 * Touch/mobile mantém o contrato existente de ações explícitas.
 */
@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
 *
 * O sticky de TD da R5.5 nao resolve uma ancora zero-width no fim fisico
 * de uma tabela horizontalmente maior que a viewport.
 *
 * R5.6 posiciona somente o overlay em viewport; a linha e o DOM continuam
 * intactos.
 * ======================================================================== */

@media (hover: hover) and (pointer: fine) {

    .crm-table-shell[data-crm-table-contract]
    .crm-actions-anchor-cell {
        /*
         * A celula volta a ser apenas ancora sem geometria visual.
         * O JS R5.6 controla o overlay.
         */
        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
 *
 * O overlay viewport da R5.6 funcionou, mas a célula-âncora continuou
 * participando da geometria da tabela e gerando espaço em branco / scroll
 * horizontal desnecessário no final.
 *
 * A solução é tirar a célula-âncora do fluxo da linha no desktop, tornando
 * a própria TR a referência geométrica. O overlay continua fixo no viewport
 * pela R5.6; aqui apenas removemos o “espaço fantasma”.
 * ======================================================================== */
@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
 *
 * position:absolute nao basta se o elemento continua display:table-cell.
 * O navegador ainda pode manter uma coluna anonima no algoritmo da tabela.
 *
 * No desktop, a ancora de acoes passa a ser um bloco absolutamente
 * posicionado. Assim deixa definitivamente o table formatting context,
 * enquanto o overlay R5.6 continua sendo o elemento visual/interativo.
 * ======================================================================== */
@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
 *
 * O indicador legado de overflow horizontal era um pseudo-elemento sticky
 * com display:block e width:44px dentro do proprio scroll container.
 *
 * Isso acrescentava largura real ao scrollWidth da SmartTable e criava uma
 * faixa vazia depois da ultima coluna.
 *
 * O indicador continua podendo produzir a sombra de borda, mas sua caixa
 * estrutural passa a largura zero e nao cria area horizontal rolavel.
 * ======================================================================== */

.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;

    /*
     * Mantemos o pseudo-elemento sem permitir que a sombra altere
     * a geometria rolavel da tabela.
     */
    pointer-events: none !important;
}

/*
 * Quando nao existe overflow, nenhum indicador deve participar da pintura.
 */
.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
 *
 * Diagnostico DOM:
 *
 * tableOffsetWidth = 1538px
 * tableScrollWidth = 1619px
 * overflow         = 81px
 *
 * .crm-row-actions oculto:
 * width            ~= 84px
 * overflowRight    = 81px
 *
 * visibility:hidden + opacity:0 escondem visualmente, mas o elemento
 * continua existindo geometricamente como inline-flex e aumenta o
 * scrollWidth da SmartTable.
 *
 * No desktop:
 * - linha inativa: row-actions sai completamente do layout;
 * - hover/focus: volta a existir;
 * - R5.6 continua posicionando o overlay no limite visivel do viewport.
 * ======================================================================== */

@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 */