/* Size the CRM by its available workspace, including when the sidebar is visible. */
.developer-crm,.developer-crm .crm-layout,.developer-crm .crm-main{width:100%;min-width:0;max-width:100%}
.developer-crm .crm-main{container-type:inline-size;container-name:crm-workspace}
.developer-crm .crm-main>main,.developer-crm .crm-main>.subscription-shell>main{width:100%;max-width:none;margin:0;padding:clamp(18px,2.3vw,36px)}
.developer-crm .crm-main>.subscription-shell{min-height:0;min-width:0}
.developer-crm :is(.crm-card,.crm-form,.subscription-editor,.crm-profile,.crm-contract-card,.subscription-list-actions,.subscription-search,.subscription-editor-grid>section,.subscription-fields>label,.subscription-category-fields>label,.crm-panel-heading>div){min-width:0;max-width:100%}
.developer-crm :is(.subscription-title h1,.crm-card h2,.crm-contract-card h3,.crm-customer-hero h2,.crm-commercial-summary,.crm-header a){overflow-wrap:anywhere}
.developer-crm .crm-header>a{min-width:0}.developer-crm .crm-header>a svg{flex-shrink:0}
.developer-crm .subscription-metrics{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.developer-crm .subscription-metrics article{min-width:0}.developer-crm .subscription-metrics article div{min-width:0;overflow-wrap:anywhere}
.developer-crm .crm-client-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.developer-crm .subscription-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.developer-crm :is(input:not([type=checkbox]):not([type=radio]),select,textarea){max-width:100%;min-width:0}
.developer-crm :is(.crm-form,.subscription-editor) fieldset{min-width:0}
.developer-crm :is(.crm-form,.subscription-editor) textarea{resize:vertical}
.developer-crm .subscription-fields.subscription-annual-pricing{grid-template-columns:repeat(3,minmax(0,1fr))}
.developer-crm .subscription-list-heading{gap:16px;flex-wrap:wrap}
.developer-crm .subscription-list-actions{display:flex;flex-wrap:wrap;gap:10px}
.developer-crm .subscription-list-actions .subscription-search{flex:1 1 160px}
.developer-crm .subscription-search input{width:100%;min-width:0}
.developer-crm .saas-workspace-toolbar{gap:12px 18px;align-items:center}
.developer-crm .saas-workspace-toolbar label{min-width:0;flex-wrap:wrap}
.developer-crm .crm-table-scroll{width:100%;min-width:0;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.developer-crm .crm-customer-tabs{max-width:100%;overscroll-behavior-x:contain;scrollbar-width:thin}
.developer-crm .subscription-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.developer-crm .crm-profile-form{width:100%;max-width:900px}
.developer-crm .crm-sidebar{scrollbar-width:thin;overscroll-behavior:contain}
@container crm-workspace (max-width:950px){
 .subscription-editor-grid{grid-template-columns:1fr!important;gap:22px}
 .subscription-shell .subscription-plan-grid:has(.catalog-plan-card){grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
 .packs-grid{gap:18px}.pack-card-cover{height:185px}.pack-card-body{padding:20px 20px 0}
 .crm-product-contracts{grid-template-columns:1fr}
}
@container crm-workspace (max-width:650px){
 .subscription-title,.crm-panel-heading{flex-wrap:wrap;gap:16px}
 .subscription-title>div,.crm-panel-heading>div{width:100%}
 .subscription-fields,.subscription-fields.subscription-annual-pricing,.subscription-panel-choices,.crm-detail-grid,.packs-grid,.crm-overview-metrics,.crm-usage-grid,.saas-usage-grid,.crm-entitlements{grid-template-columns:1fr!important}
 .subscription-shell .subscription-plan-grid:has(.catalog-plan-card){grid-template-columns:1fr}
 .subscription-list-actions{width:100%}.subscription-list-heading>.subscription-search{width:100%}
 .saas-workspace-toolbar label{flex:1 1 180px}.saas-workspace-toolbar select{width:100%}
 .crm-panel-heading label{min-width:0;width:100%}
 .crm-customer-hero{padding:22px!important;min-height:0!important}.crm-brand-orbit{display:none}
 .crm-contract-card header{align-items:flex-start}.crm-contract-card header>div{min-width:0;overflow-wrap:anywhere}
 .subscription-title h1{font-size:27px!important}
 .subscription-section-heading{flex-wrap:wrap}.subscription-module-picker-title{flex-wrap:wrap}
 .subscription-module-picker-title button{margin-left:0}
 .subscription-fixed-limits{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
 .developer-crm .crm-layout{display:block;min-height:0}
 .developer-crm .crm-sidebar{position:static;height:auto;overflow:visible;padding:12px}
 .developer-crm .crm-sidebar-brand{margin-bottom:10px;padding:0 6px 12px}
 .developer-crm .crm-sidebar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .developer-crm .crm-sidebar nav button{min-width:0;padding:10px 6px;gap:6px;font-size:12px;justify-content:center;flex-direction:column;line-height:1.4}
 .developer-crm .crm-sidebar nav svg{width:18px;height:18px;flex-shrink:0}
 .developer-crm .crm-header{padding:12px 14px;gap:10px;min-height:68px}
 .developer-crm .crm-header>a{font-size:12px;gap:6px}
 .developer-crm .crm-header-title{display:none}
 .developer-crm .crm-user-menu summary strong{max-width:110px;font-size:12px}
 .developer-crm .crm-main>main,.developer-crm .crm-main>.subscription-shell>main{padding:20px 14px}
 .developer-crm .crm-profile{padding:20px 14px}
 .developer-crm :is(.subscription-editor,.crm-card){padding:18px}
 .developer-crm .catalog-plan-card{padding:0}
 .developer-crm .crm-detail-actions{gap:9px}.developer-crm .crm-detail-actions button{flex:1 1 140px}
 .developer-crm .subscription-editor-footer{flex-wrap:wrap;gap:10px}
 .developer-crm .subscription-editor-footer button{flex:1 1 130px;min-height:44px}
 .developer-crm .subscription-category-fields{grid-template-columns:1fr}
 .developer-crm .subscription-nav{display:flex;flex-wrap:nowrap;overflow:auto;max-width:100%;scrollbar-width:thin}
 .developer-crm .subscription-nav button{flex-shrink:0;min-height:44px}
}
@media(max-width:380px){.developer-crm .crm-user-menu summary strong{display:none}.developer-crm .crm-card dl{grid-template-columns:minmax(70px,.7fr) minmax(0,1fr)}.developer-crm .subscription-list-actions>button{width:100%}}

@media(max-width:720px){.developer-crm :is(.crm-form,.subscription-editor,.crm-profile-form) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}}

.developer-crm .crm-subscriber-table-panel{min-width:0;max-width:100%}.developer-crm .crm-subscriber-scroll{width:100%;min-width:0;max-height:70dvh;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.developer-crm .crm-subscriber-table thead th{position:sticky;top:0;z-index:1}.developer-crm .crm-subscriber-pagination{flex-wrap:wrap;gap:12px}.developer-crm .crm-subscriber-pagination>div{flex-wrap:wrap}