/* Responsive finishing rules shared by the customer and administration views. */
:is(.portal-heading,.admin-main-header,.checkout-service-header,.order-detail-toolbar,.customer-section-heading)>*{min-width:0}
:is(.portal-heading h2,.checkout-heading h1,.order-detail-heading h2,.admin-main-header h1){overflow-wrap:anywhere;text-wrap:pretty}
:is(.portal-form,.checkout-form,.admin-form-grid) :is(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
.portal-dialog{overscroll-behavior:contain;scrollbar-gutter:stable}
:is(.admin-table-scroll,.history-table-shell,.detail-nav-list){overscroll-behavior:contain}
:is(.admin-main,.portal-dialog,.checkout-card,.customer-profile-page) input[type=checkbox]{accent-color:#316bd9}
:is(.admin-main,.portal-dialog,.checkout-card) :is(button,a):focus-visible{outline:3px solid #729cf4;outline-offset:3px}
.admin-navigation nav{scrollbar-width:thin;scrollbar-color:#c2cee0 transparent;scroll-padding-inline:12px}
.admin-main :is(.admin-card-heading,.admin-main-header) select{max-width:100%;min-width:0}
@media(max-width:700px){
 .admin-navigation{position:relative}
 .admin-navigation nav{padding:4px 0 9px;border-bottom:1px solid var(--adm-line);scroll-snap-type:x proximity}
 .admin-navigation nav button{scroll-snap-align:start;min-height:40px}
 .admin-main :is(.admin-card,.admin-section){padding:18px}
 .admin-main .admin-card-heading{align-items:flex-start;flex-wrap:wrap;gap:12px}
 .portal-dialog{max-height:calc(100dvh - 32px)}
 :is(.portal-form,.checkout-form,.profile-grid,.recharge-form) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
 .order-detail-toolbar{flex-wrap:wrap;align-items:flex-start}
 .order-detail-toolbar>div{flex-wrap:wrap;gap:7px}
 .order-detail-heading h2{font-size:20px;line-height:1.45}
}
@media(max-width:360px){
 .topbar .brand{gap:5px}.topbar-right{gap:3px!important}
 .customer-summary,.history-stats{gap:10px}
 .customer-metric{padding:16px}.customer-metric strong{font-size:23px}
 .hero-copy h1{font-size:29px}
 .order-detail-service{grid-template-columns:minmax(0,1fr)}
 .order-detail-service>div:last-child{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.admin-navigation nav{scroll-behavior:auto!important}}