/* One responsive contract for business, identity, administration and document views. */
:root{--mobile-viewport-height:100dvh;--mobile-safe-bottom:env(safe-area-inset-bottom,0px)}
.mobile-table-scroll{max-width:100%;overflow:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.mobile-table-scroll:focus-visible,.table-scroll:focus-visible{outline:2px solid #159db5;outline-offset:2px}
@media(max-width:900px){
 html{scroll-padding-top:80px}body{min-width:0}body,main,section,article,form,fieldset{box-sizing:border-box}
 main,main>.view,form,fieldset,.card,.form-grid>*,.grid>*,.work-layout>*{min-width:0}
 fieldset{max-width:100%}input,select,textarea{max-width:100%;box-sizing:border-box}
 img,video,canvas{max-width:100%}iframe,object,embed{max-width:100%}
 button,a,input,select,textarea,summary{-webkit-tap-highlight-color:#23bdd52b}
 button,.button,.navigation-button,summary{touch-action:manipulation}
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),select,textarea{font-size:16px!important;min-height:44px}
 input[type=file]{width:100%;min-width:0;font-size:13px}input[type=checkbox],input[type=radio]{min-height:20px;min-width:20px}
 button,.button,.navigation-button,.back,.text-button{min-height:44px}
 .row-link{min-height:40px}.actions,.toolbar,.inventory-filters,.documents-toolbar,.table-toolbar,.project-toolbar,.sales-list-controls{flex-wrap:wrap;gap:8px;min-width:0}
 .table-scroll,.scroll,.mobile-table-scroll,.document-table-wrap,.project-board{max-width:100%;min-width:0;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
 .table-scroll,.mobile-table-scroll{overflow-x:auto}.table-scroll>table,.mobile-table-scroll>table{margin:0}
 .table-scroll .document-table,.mobile-table-scroll>table{min-width:650px}
 .table-scroll th,.table-scroll td,.mobile-table-scroll th,.mobile-table-scroll td{overflow-wrap:normal}
 body:has(.sidebar)>main{width:100%;margin-left:0;min-width:0}
 body:has(.sidebar) .sidebar{position:fixed!important;inset:0 auto 0 0!important;box-sizing:border-box;width:min(300px,86vw)!important;height:var(--mobile-viewport-height);max-height:100dvh;padding:20px 16px calc(16px + var(--mobile-safe-bottom));overflow-y:auto;overscroll-behavior:contain;z-index:90}
 body:has(.sidebar):not(.sidebar-hidden){overflow:hidden}
 body:has(.sidebar) .sidebar-backdrop{z-index:80;touch-action:none}
 body:has(.sidebar) .view{padding:16px 14px 24px!important}
 body:has(.sidebar) .topbar{height:auto;min-height:64px;padding:10px 14px;gap:10px;flex-wrap:wrap;box-sizing:border-box}
 .topbar-profile,.topbar-identity,.topbar-user-actions,.topbar-date-identity,.topbar-date-role,.topbar-user-info{min-width:0}
 .saas-business .topbar-user-actions{gap:8px;flex:1 1 auto;justify-content:flex-end;min-width:0}
 .saas-business .topbar-date-identity{gap:8px;flex-wrap:wrap;min-width:0}
 .saas-business .topbar-user-email,.saas-business .topbar-user-name{max-width:100%;overflow-wrap:anywhere;white-space:normal;font-size:11px}
 .saas-business .topbar-user-actions .work-draft-button,.business-account-menu>summary{width:44px;min-width:44px;height:44px;min-height:44px}
 .saas-business .workspace-navigation{padding:8px 14px;gap:6px;min-height:54px;z-index:15;align-items:stretch}
 .saas-business .navigation-controls{display:flex;flex-wrap:wrap;gap:6px;min-width:0;max-width:100%}
 #sidebar-toggle{display:inline-flex!important;min-width:44px;min-height:44px}
 #workspace-breadcrumbs{font-size:12px;line-height:1.6;min-width:0;overflow-wrap:anywhere}
 .breadcrumb-part{min-width:0}#workspace-breadcrumbs button{min-height:32px}
 .page-heading,.sales-page-heading,.contact-page-heading,.organization-heading{flex-wrap:wrap;gap:12px;min-width:0}
 .page-heading h1,.project-header h1{font-size:24px!important;max-width:100%;overflow-wrap:anywhere}
 .page-heading>.actions,.page-heading>.heading-summary-controls{margin-left:0;max-width:100%;flex-wrap:wrap}
 .heading-summary-controls,.sales-metrics,.contact-metrics,.module-header-metrics{max-width:100%;min-width:0;flex-wrap:wrap}
 .work-layout,.editor-layout,.editor-grid,.purchase-grid,.settings-grid{grid-template-columns:minmax(0,1fr)!important}
 .work-context,.editor-summary{position:static!important;min-width:0;max-width:100%}
 .editor-summary{order:2}.editor-main{min-width:0}
 .period-filter,.period-picker,.period-active-chip{max-width:100%;box-sizing:border-box}
 .period-picker[open]{max-width:calc(100vw - 32px)!important;z-index:25}
 dialog,dialog.inegocio-dialog{box-sizing:border-box;min-width:0!important;width:min(720px,calc(100vw - 24px));max-width:calc(100vw - 24px)!important;max-height:calc(var(--mobile-viewport-height) - 24px)!important;margin:auto;padding:48px 18px 20px;overflow:auto;overscroll-behavior:contain;scroll-padding:48px 12px 20px}
 dialog.inegocio-dialog{min-height:min(394px,calc(var(--mobile-viewport-height) - 24px))}
 dialog.inegocio-dialog>.inegocio-dialog-close{width:44px;min-width:44px;height:44px;min-height:44px;top:4px;right:4px}
 dialog .form-grid,dialog .grid,dialog .purchase-grid,.digital-parties,.trace-overview{grid-template-columns:minmax(0,1fr)!important}
 dialog form,dialog fieldset,dialog section,dialog article,dialog label{min-width:0;max-width:100%}
 dialog h2,dialog h3{max-width:100%;overflow-wrap:anywhere}dialog .actions{display:flex;flex-wrap:wrap;gap:8px}
 dialog .actions button{flex:1 1 auto}dialog textarea{width:100%}dialog pre{white-space:pre-wrap;overflow-wrap:anywhere}
 dialog iframe{width:100%;height:min(60dvh,520px)}.export-pdf-pages canvas,.export-pdf-pages svg,.export-preview-content img{max-width:100%;height:auto}
 .user-notices,.business-account-options{max-width:calc(100vw - 24px);box-sizing:border-box;overflow-wrap:anywhere}
 .business-account-options{max-height:calc(var(--mobile-viewport-height) - 90px);overflow:auto}
 .saas-header{flex-wrap:wrap;gap:10px;padding:12px 14px}.saas-header .saas-brand{font-size:22px}
 .saas-global-nav{width:100%;min-width:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;max-width:100%}
 .saas-global-nav .saas-nav-link{flex:0 0 auto;min-height:44px}
 .saas-context-bar{padding:10px 14px;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
 body:not(:has(.sidebar)) main{box-sizing:border-box;max-width:100%;padding:18px 14px;min-width:0}
 body:not(:has(.sidebar)) header{box-sizing:border-box;max-width:100%;flex-wrap:wrap}
 .account-tabs,.tabs{max-width:100%;flex-wrap:wrap;gap:6px}.account-tabs button,.tabs button{min-height:44px}
 .account-tabs button{flex:1 1 110px}.space-card,.company-card{min-width:0;max-width:100%}
 .project-board{scroll-snap-type:x proximity}.project-column{scroll-snap-align:start;flex:0 0 min(300px,calc(100vw - 56px));min-width:0}
 .project-toolbar>input,.project-toolbar>select{flex:1 1 150px;max-width:100%;width:auto}
 .project-tabs{max-width:100%;overflow-x:auto}.project-tabs button{flex-shrink:0}
}
@media(max-width:600px){
 .form-grid,.settings-grid,.grid,.usage-grid,.metrics-grid,.digital-totals,.gateway-grid{grid-template-columns:minmax(0,1fr)!important}
 .form-grid .wide,.grid .wide{grid-column:1!important}
 .overview,.documents-summary{max-width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
 .overview-item{min-width:0;overflow-wrap:anywhere}.overview-item strong{font-size:22px}
 .page-heading{align-items:flex-start}.page-heading>.button,.page-heading>.actions{flex:1 1 100%;width:100%}
 .inventory-filters label,.inventory-filters>input,.inventory-filters>select,.toolbar>input,.toolbar>select{max-width:100%;min-width:0;flex:1 1 140px;width:auto}
 .inventory-filters input[type=search],.toolbar input[type=search]{width:100%;flex-basis:100%}
 .sales-list-controls input[type=search]{margin:0;width:100%;flex:1 1 100%}
 .sales-transfer{width:100%;display:flex!important;flex-wrap:wrap;justify-content:flex-start;margin-left:0}
 .sales-transfer .period-filter,.sales-transfer .period-picker,.sales-transfer [data-sales-export]{width:auto;max-width:100%}
 .sales-transfer .period-picker>summary,.sales-transfer [data-sales-export]{min-height:44px;height:auto;width:auto;white-space:normal}
 .sales-stage-tabs,.area-tabs{display:flex;flex-wrap:wrap;max-width:100%;gap:6px}
 .sales-stage-tabs .button,.area-tabs .button{min-height:44px;flex:1 1 auto;text-align:center;justify-content:center}
 .contact-heading-controls,.sales-heading-controls,.contact-heading-controls>*,.heading-summary-controls>*{min-width:0;max-width:100%}
 .crm-board,.kanban-board,.client-grid,.project-grid{grid-template-columns:minmax(0,1fr)!important}
 #items .line-item{grid-template-columns:repeat(3,minmax(0,1fr)) 44px!important;gap:8px;padding:12px 0;border-bottom:1px solid #e1ebf1}
 #items .line-order-controls{grid-column:1/-1;grid-row:auto;display:flex;flex-direction:row;gap:6px}
 #items .line-description{grid-column:1/-1;grid-row:auto;min-width:0}
 #items .item-quantity{grid-column:1;grid-row:auto}#items .item-price{grid-column:2;grid-row:auto}#items .item-tax{grid-column:3;grid-row:auto}#items .remove-line{grid-column:4;grid-row:auto;min-width:44px;width:44px}
 #items input,#items select,#items textarea{font-size:16px!important;min-height:44px;padding:8px;min-width:0}
 #items .line-order-controls button{width:44px;height:44px;min-width:44px}.items-heading{display:none}
 .editor-card .form-grid,.document-dates{grid-template-columns:minmax(0,1fr)}
 .settings-submit,.editor-summary .actions{position:static;display:flex;flex-wrap:wrap;gap:8px}
 .settings-submit .button,.editor-summary .button{min-height:44px}
 .signup-card{padding:22px 16px}.signup-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .signup-steps li{flex-direction:column;text-align:center;min-width:0;font-size:10px}.signup-steps li+li:before{display:none}.signup-steps li>span{flex-shrink:0}.signup-steps strong{white-space:normal}
 .signup-kind,.organization-region{grid-template-columns:minmax(0,1fr)!important}
 .mfa-codes{font-size:12px;overflow-wrap:anywhere}.mfa-qr{width:min(220px,100%)}
 .company-chooser main>h1{font-size:27px}.company-chooser #destinations{grid-template-columns:minmax(0,1fr)}
 #usage .grid,#providers .grid,#rows .grid{grid-template-columns:minmax(0,1fr)!important}
 footer{flex-wrap:wrap;gap:10px;overflow-wrap:anywhere}
}
@media(max-width:900px) and (max-height:500px){dialog,dialog.inegocio-dialog{min-height:0!important;max-height:calc(var(--mobile-viewport-height) - 12px)!important;padding-top:44px}.saas-business .topbar{position:static}.workspace-navigation{position:static}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
.mobile-line-field{display:contents}.mobile-line-caption{display:none}
@media(max-width:600px){
 #items .mobile-line-field{display:flex;flex-direction:column;gap:4px;min-width:0}
 #items .mobile-line-quantity{grid-column:1;grid-row:auto}#items .mobile-line-price{grid-column:2;grid-row:auto}#items .mobile-line-tax{grid-column:3;grid-row:auto}
 #items .mobile-line-caption{display:block;color:#5b7588;font-size:10px;line-height:1.4}
 .crm-board{display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible!important;min-width:0}.crm-column{min-width:0!important;width:auto!important;max-width:100%}
 .contact-filter-icons,.contact-type-filters,.contacts-kind-filters{max-width:100%;flex-wrap:wrap}
 .contact-filter-icon{min-width:0;max-width:100%;flex:1 1 90px}
}
@media(max-width:900px){
 button:not(.column-resize-handle),.button,summary{min-height:44px!important}
 button:not(.column-resize-handle){min-width:44px}
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),select,textarea{min-height:44px!important}
 .payment-toggle{min-height:44px;min-width:44px}
 .target-year{flex-basis:80px!important}.target-year input{max-width:80px!important}
}
@media(max-width:600px){
 .unified-contact-header>nav{flex-wrap:wrap!important;overflow:visible!important;max-width:100%;gap:6px}
 .unified-contact-header>nav>.contact-filter-icon{flex:1 1 calc(50% - 6px)!important;min-width:0;white-space:normal}
 .unified-contact-header>nav>.contact-state-filter{margin-left:0!important}
 .contact-filter-options{box-sizing:border-box;min-width:180px;max-width:calc(100vw - 44px);left:auto;right:0}
 .contact-filter-options label{white-space:normal!important;min-height:44px}
 label.payment-toggle{display:flex;align-items:flex-start;gap:8px;white-space:normal!important;max-width:100%}
 .payment-toggle .ui-label-text{white-space:normal!important;min-width:0;flex:1 1 auto}
 .payment-toggle input{flex:0 0 20px;width:20px!important}
}
.table-bottom-scroll{max-width:100%;overflow-x:auto}
@media(max-width:900px){
 .unified-contact-header>nav{flex-wrap:wrap!important;overflow:visible!important;max-width:100%;gap:6px}
 .crm-board{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important;overflow:visible!important;min-width:0}
 .crm-column{min-width:0!important;width:auto!important;max-width:100%}
 .contact-page-navigation,.contact-paging-toolbar{max-width:100%;flex-wrap:wrap;min-width:0}
}
@media(max-width:600px){
 #items .line-item{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #items .mobile-line-quantity{grid-column:1}#items .mobile-line-price{grid-column:2}#items .mobile-line-tax{grid-column:1}
 #items .remove-line{grid-column:2;justify-self:end;align-self:end}
}
@media(max-width:900px){
 .listing-list,#client-cards.listing-list{display:block!important;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
 .listing-list>table{min-width:650px}
 .unified-header .area-tabs .button,.unified-header .business-create,.unified-header .module-master-actions .button,.unified-header .module-primary-action .button,.unified-contact-header .button{min-height:44px!important;height:auto}
}
@media(max-width:900px){
 body:has(.sidebar) .topbar{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
 body:has(.sidebar) .sidebar{padding-top:max(20px,env(safe-area-inset-top,0px))}
 dialog,dialog.inegocio-dialog{top:max(12px,env(safe-area-inset-top,0px));bottom:auto;margin:0 auto}
 body:not(:has(.sidebar))>header{padding-top:max(12px,env(safe-area-inset-top,0px))}
}
@media(max-width:900px){
 body.sidebar-hidden .sidebar{display:none!important}
 body.sidebar-hidden main,body.saas-business.sidebar-hidden main{margin-left:0;width:100%}
}
@media(max-width:900px){
 .topbar>div:has(#active-seller-name){display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0;max-width:100%;flex:1 1 160px}
 .topbar #active-seller-name{min-width:0;max-width:100%;flex:1 1 130px}
 .period-picker[open]{position:fixed!important;left:12px!important;right:12px!important;top:max(72px,env(safe-area-inset-top,0px))!important;bottom:auto!important;width:auto!important;max-width:calc(100vw - 24px)!important;max-height:calc(var(--mobile-viewport-height) - 96px);overflow:auto;z-index:60;background:#fff;padding:12px;box-shadow:0 12px 40px #08214430}
 .period-months{grid-template-columns:repeat(3,minmax(0,1fr))!important}.period-calendar button{min-width:0;width:100%;padding:4px}
}
@media(max-width:600px){
 body:not(:has(.sidebar)) .toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body:not(:has(.sidebar)) .toolbar>input,body:not(:has(.sidebar)) .toolbar>select{grid-column:1/-1;width:100%;max-width:100%;min-width:0}
 body:not(:has(.sidebar)) .toolbar>button{min-width:0;width:100%;white-space:normal}
}
@media(max-width:900px){
 .period-picker[open]{width:min(400px,calc(100vw - 24px))!important;left:max(12px,calc((100vw - 400px)/2))!important;right:auto!important}
}

/* Keep navigation available without letting a long path fill the phone screen. */
@media(max-width:900px){
 .saas-business .workspace-navigation{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px!important}
 .saas-business .workspace-navigation>.history-controls{grid-column:1;grid-row:1}
 .saas-business .workspace-navigation>.navigation-controls{grid-column:2;grid-row:1;width:auto!important;justify-content:flex-end}
 .saas-business .workspace-navigation>#workspace-breadcrumbs{grid-column:1/-1;grid-row:2;flex-wrap:nowrap!important;margin:0!important;padding:0!important;border-left:0;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
 #workspace-breadcrumbs .breadcrumb-part,#workspace-breadcrumbs .breadcrumb-separator{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:600px){
 .saas-business .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
 .saas-business .topbar-brand{grid-column:1;grid-row:1}
 .saas-business .topbar-user-actions{grid-column:2;grid-row:1;margin:0;max-width:none}
 .saas-business .topbar-date-identity{display:none}
 .saas-business .topbar>:has(>#active-profile-name){grid-column:1/-1;grid-row:2;display:flex;flex-wrap:nowrap;font-size:12px;gap:6px;min-width:0}
 .saas-business .topbar #active-profile-name{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .saas-business .topbar #active-seller-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Long catalogue actions must remain clickable inside their resized column. */
.listing-list td:last-child .row-link{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:600px){
 .saas-business .topbar>:has(>#active-profile-name){width:100%;max-width:100%;margin:0!important}
 .saas-business .topbar .slash{padding:0 4px}
 .saas-business .topbar-brand{min-width:0;max-width:100%}
}
@media(max-width:900px){
 #sidebar-toggle{flex:0 0 auto;white-space:nowrap}
 .saas-business .workspace-navigation>#business-context-metrics{grid-column:1/-1;grid-row:3;min-width:0;width:100%;justify-content:flex-start;flex-wrap:wrap}
}
