/* Phone and tablet layout: preserve the desktop theme and component behavior. */
.mobileTableScroll{display:contents}
@media(max-width:768px){
 html{width:100%;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}body{width:100%;max-width:100%;min-width:0!important}*,*::before,*::after{box-sizing:border-box}
 input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px!important;min-width:0;max-width:100%}button,a{touch-action:manipulation}button:not(.photo-item button):not(.thumb button):not(.photoItem button){min-height:42px}img,canvas{max-width:100%}h1,h2,h3,.sub,.muted{overflow-wrap:anywhere}
 /* The portal owns the header; only the module frame scrolls beneath it. */
 body>header:has(#headerTitle){display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))!important;gap:9px 10px!important;min-height:0!important;flex-wrap:nowrap!important}
 body>header:has(#headerTitle)>div:first-child{grid-column:1/-1!important;grid-row:1!important;min-width:0}body>header #headerTitle{font-size:18px!important;line-height:1.35!important;letter-spacing:0}body>header #headerSubtitle{font-size:11px!important;line-height:1.5}
 body>header #portalAccount{grid-column:1!important;grid-row:2!important;justify-self:start!important;width:auto!important;max-width:150px!important}body>header #portalAccount #accountToggle{width:auto!important;min-height:44px!important;height:auto!important;max-width:150px;padding:5px 8px 5px 6px!important;gap:6px!important}body>header #accountDisplayName{display:block!important;max-width:86px!important;font-size:12px!important}body>header #portalAccount #accountMenu{left:0;right:auto;max-width:calc(100vw - 24px)}
 body>header .header-actions{grid-column:2!important;grid-row:2!important;justify-self:end!important;display:flex!important;width:auto!important;gap:6px!important;flex-wrap:nowrap!important}body>header .header-actions>*{font-size:12px!important;min-height:44px!important;padding:8px 10px!important;flex:0 0 auto!important;line-height:1.3!important}body:not(.in-module)>header .header-actions{display:none!important}
 body.in-module{height:var(--app-height,100dvh)!important;min-height:0!important;display:flex;flex-direction:column;overflow:hidden!important;padding:0!important}body.in-module>header{flex:none!important}body.in-module #workspace.active{display:flex!important;flex:1 1 0!important;flex-direction:column;min-height:0!important;width:100%;overflow:hidden}body.in-module #moduleFrame{display:block!important;flex:1 1 0!important;width:100%!important;height:100%!important;min-height:0!important;max-width:100%;border:0}body.in-module #workspaceHead{display:none!important}
 /* Same compact green navigation bar for every module, including embedded views. */
 html .layout,html .layout.mr-nav-collapsed,html .layout.asset-nav-collapsed{display:block!important;grid-template-columns:minmax(0,1fr)!important;min-width:0!important;min-height:0!important}
 html .layout>aside,html.portal-embedded .layout>.sidebar,body.portal-embedded .layout>.sidebar,html.portal-embedded .layout>aside{position:sticky!important;top:0!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;align-items:center!important;gap:7px!important;padding:8px max(8px,env(safe-area-inset-left))!important;overflow-x:auto!important;overflow-y:hidden!important;z-index:25;overscroll-behavior-x:contain;scrollbar-width:thin;background:#00633f!important}
 .layout>aside .sidebar-title,.layout>aside .sidebar-note,.layout>aside h4,.layout>aside .sideBrand,.layout>aside .sideFoot{display:none!important}.layout>aside .nav,.layout>aside nav{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;flex:1 1 auto;min-width:0;gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;margin:0!important;scrollbar-width:thin}
 .layout>aside .nav button,.layout>aside nav button,.layout>aside button[data-view]{width:auto!important;flex:0 0 auto!important;min-height:42px!important;padding:9px 12px!important;font-size:13px!important;line-height:1.35!important;white-space:nowrap!important;margin:0!important;text-align:center!important;display:inline-flex!important;align-items:center;justify-content:center;gap:7px}
 .layout>aside .mr-nav-head,.layout>aside .asset-nav-head{flex:0 0 auto!important;margin:0!important;padding:0!important}.layout>aside #mrNavToggle,.layout>aside .asset-nav-toggle{width:auto!important;min-width:67px!important;min-height:42px!important;height:42px!important;gap:5px!important;padding:6px 9px!important;flex:0 0 auto!important;font-size:17px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important}.layout>aside #mrNavToggle::after,.layout>aside .asset-nav-toggle::after{content:'เมนู';font:600 12px system-ui}
 .layout.mr-nav-collapsed>.sidebar .nav,.layout.asset-nav-collapsed>aside button[data-view]{display:none!important}.layout:not(.mr-nav-collapsed) .mr-nav-label,.layout:not(.asset-nav-collapsed) .asset-nav-label{display:inline!important}.layout>aside .nav button span,.layout>aside nav button span{font-size:12px!important}.layout>aside #sidebarToggle{display:none!important}
 .layout>main,.layout>.wrap{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:16px max(12px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important}.layout>main .hero{align-items:flex-start!important;gap:12px!important;margin-bottom:16px}.layout>main .hero h2,.layout>main h1{font-size:22px!important;line-height:1.4!important;margin-top:0}
 body>header:not(:has(#headerTitle)){padding:14px 12px!important;gap:12px;flex-wrap:wrap}body>header:not(:has(#headerTitle)) h1{font-size:20px!important;line-height:1.4!important}html.portal-embedded body>header,body.portal-embedded>header{display:none!important}
 .layout .panel,#incidents>.panel{min-width:0!important;max-width:100%!important;padding:16px!important;border-radius:16px!important;margin-block:12px}.layout .grid,.layout .grid2,.layout .formGrid,.layout .filter-grid,.layout .filter-title,.layout .percent-grid,#history .toolbar.history-filters{grid-template-columns:minmax(0,1fr)!important}.layout .charts,.layout .split{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}.layout .field{min-width:0}.layout .toolbar,.layout .actions,.layout .panelHead{flex-wrap:wrap!important;gap:8px!important}.layout .toolbar>*{max-width:100%}.layout .toolbar select,.layout .toolbar input,.filters>input,.filters label{min-width:0!important;width:100%!important;flex:1 1 100%!important}
 #dashboard .cards,.layout main>.cards,.layout .kpis{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}#dashboard .cards .card,.layout main>.cards .card,.layout .kpis article{min-width:0!important;padding:14px 12px!important;border-radius:14px!important}.metric-head{gap:7px!important;align-items:flex-start!important}.metric-title{font-size:12px!important;line-height:1.5!important}.metric-icon{width:29px!important;height:29px!important;flex:0 0 29px!important;font-size:17px!important}.metric-value,.layout .card .value,.layout .kpis strong{font-size:27px!important;line-height:1.3!important}.card .name,.kpis span{font-size:12px!important;line-height:1.5!important}
 /* Wide records and charts scroll inside their own panels, not the whole page. */
 .mobileTableScroll{display:block;max-width:100%;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.mobileTableScroll>table{min-width:540px}.scroll,.preview-list,#registerTable{max-width:100%;overflow:auto!important;-webkit-overflow-scrolling:touch}.scroll>table{min-width:540px}#registerTable{max-height:60dvh!important;scrollbar-gutter:auto}#registerGallery.register-table-wrap{display:block!important;max-height:60dvh!important;max-width:100%;overflow:auto!important}#registerTable th:last-child,#registerTable td:last-child{position:static!important;box-shadow:none!important}#registerTable th:first-child,#registerTable td:first-child{max-width:135px;overflow:hidden;text-overflow:ellipsis}.machine-register-table{min-width:1250px!important}
 #dashboard .chartbox:has(.svg-chart){height:260px!important;min-width:0;overflow:hidden!important}#dashboard .chartbox .svg-chart{overflow:auto!important;height:100%!important;width:100%!important}#dashboard .chartbox .svg-chart svg{min-width:580px;max-width:none!important;width:100%!important;height:230px!important}.percent-chart{overflow:auto!important;height:270px!important}.percent-chart svg{min-width:580px;max-width:none!important;height:240px!important}.percent-head{gap:8px!important;flex-wrap:wrap}.percent-head h3{font-size:16px!important;line-height:1.5!important}.chart-zoom-body{overflow:auto!important}
 #machineFormShortcuts{display:none!important}body:has(#incidents:not(.hidden)) #machineFormShortcuts,body:has(#machines:not(.hidden)) #machineFormShortcuts,body:has(#technicians:not(.hidden)) #machineFormShortcuts{display:flex!important}
 #machineFormShortcuts{gap:7px!important;padding:10px!important}.layout #machineFormShortcuts .btn{flex:1 1 130px;min-height:44px;padding:9px!important;font-size:12px!important}#cloudReload{margin:0 0 0 auto!important;min-height:44px!important;max-width:100%!important;font-size:13px!important}.cloudActions{margin-bottom:12px!important}.filter-title:has(#cloudReload){display:flex!important;align-items:center;gap:10px!important}.filter-title h3{font-size:17px!important}
 #incidents .incident-section{padding:15px 12px 7px!important;max-width:100%;min-width:0}.incident-section-title{align-items:flex-start!important;gap:9px!important}.incident-step-copy{min-width:0}.incident-step-copy strong{font-size:15px!important;line-height:1.5!important}.incident-step-copy small{font-size:12px!important;line-height:1.6!important}.incident-heading h2{font-size:21px!important}.incident-actions{position:static!important;flex-wrap:wrap!important}.incident-actions .btn{width:100%;min-height:46px}.period-picker{max-width:calc(100vw - 48px)!important;left:0!important;right:auto!important}.pretty-menu,.tech-suggestions{max-width:100%;overflow-x:hidden}
 .pretty-menu{min-width:0!important;max-width:100%!important;width:100%!important;left:0!important;right:0!important}.pretty-option{white-space:normal!important;overflow-wrap:anywhere;padding:10px!important;gap:5px!important}.period-picker:not(.hidden){position:fixed!important;left:50%!important;top:50%!important;right:auto!important;transform:translate(-50%,-50%)!important;width:calc(100vw - 24px)!important;max-width:520px!important;max-height:80dvh!important;overflow:auto!important;z-index:1500!important}.period-picker-cols{grid-template-columns:minmax(0,1fr)!important}.dt-popup:not([hidden]){position:fixed!important;left:50%!important;top:50%!important;right:auto!important;transform:translate(-50%,-50%)!important;width:calc(100vw - 24px)!important;max-width:420px!important;max-height:85dvh!important;overflow:auto!important;z-index:1600!important}.dt-actions{flex-wrap:wrap;gap:8px}.dt-actions button{flex:1 1 110px}
 /* Asset card/list/table choices remain available on phones. */
 #register .register-heading{display:flex;flex-direction:column;align-items:stretch;gap:14px}#register .register-heading .actions{display:flex;width:100%;gap:8px}#register .register-heading .actions .btn{flex:1 1 130px;min-height:44px;font-size:13px;padding:9px 10px}#register .register-toolbar{gap:12px;align-items:stretch}#register .register-toolbar>#search{width:100%;flex-basis:100%;max-width:none}#register .register-view-switch{width:100%;display:flex}.register-view-switch button{min-width:0;flex:1!important;padding:9px 5px!important;font-size:13px!important;white-space:nowrap}
 #registerGallery{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}#registerGallery .asset-card{min-width:0!important;padding:15px!important}#registerGallery.register-list .asset-card{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-areas:'identity' 'name' 'meta' 'media' 'actions'!important;gap:9px!important}#registerGallery.register-list .asset-media{width:100%!important;grid-template-columns:1fr 1fr!important}#registerGallery.register-list .asset-buttons{width:100%;justify-self:stretch!important}.asset-media{grid-template-columns:repeat(2,minmax(0,1fr))!important;min-width:0}.asset-media img,.asset-media .empty-photo{height:118px!important}.asset-buttons{flex-wrap:wrap;gap:8px}.asset-buttons button{min-height:44px}.asset-card-head{gap:8px}.asset-name{font-size:15px!important;line-height:1.5!important}.asset-card-head>b{overflow-wrap:anywhere}.status-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.status-tile{min-width:0;padding:12px!important}.bar span{min-width:80px;max-width:120px;font-size:12px}.registry-scroll-controls{padding:8px!important;margin-top:10px!important}
 /* Login, approval, profile and all dialogs use the same mobile spacing. */
 #home{padding:16px 12px!important;max-width:100%}#home .home-banner img{min-height:0!important;height:auto!important;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:14px}#home .cards{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}#home .card{padding:16px!important;border-radius:18px!important}#home .card h2{font-size:23px!important}#home .card-cover{height:auto!important;aspect-ratio:2.1/1;object-fit:cover}#home .filter{display:flex;flex-wrap:wrap;gap:12px}#home #search{width:100%;max-width:100%;min-width:0;font-size:16px}#home footer{font-size:11px;line-height:1.7;padding:20px 8px}
 #authGate{padding:12px!important;padding-top:max(12px,env(safe-area-inset-top))!important;align-items:safe center!important;overflow:auto!important;max-height:var(--app-height,100dvh)}.authCard{width:100%!important;max-width:100%!important;padding:20px 17px!important;border-radius:20px!important;overflow-wrap:anywhere}.authBanner{min-height:144px!important}.authBannerCopy{max-width:90%;padding:17px!important}.authBannerCopy>strong{font-size:21px!important}.authCard input,.authCard select,.authCard textarea{font-size:16px!important;min-height:46px}.authCard .formGrid{grid-template-columns:minmax(0,1fr)!important;gap:0}.authCard .adminTabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:5px;max-width:100%;padding:5px;scrollbar-width:thin}.authCard .adminTabs button{flex:0 0 auto!important;min-height:44px;white-space:nowrap;min-width:110px;font-size:13px!important}.authCard .userRow{display:flex;flex-direction:column;align-items:stretch}.authCard .userRow select,.authCard .userRow button{width:100%!important}.authCard .dialogFooter{flex-wrap:wrap;gap:12px}.authCard .secondaryActions{display:flex;flex-wrap:wrap;gap:10px}.authCard .secondaryActions button{min-height:44px}.authCard .requestActions{display:flex;flex-wrap:wrap}.authCard .requestActions>*{flex:1 1 130px!important}.authCard .segmented:not(.adminTabs) button{padding:9px 7px;font-size:13px}.authCard .copyRow{flex-wrap:wrap}.authCard .copyRow button{width:100%}
 dialog:not(.imageCamera){max-width:calc(100vw - 20px)!important;width:calc(100vw - 20px)!important;max-height:calc(100dvh - 24px)!important;border-radius:18px!important}dialog .dialog-body,.machine-edit-body,.tech-edit-body,#partForm{padding:18px!important;max-height:calc(100dvh - 36px)!important;overflow:auto}.machine-edit-grid,.tech-edit-grid,dialog .fields,dialog .grid2,dialog .formGrid{grid-template-columns:minmax(0,1fr)!important}.dialog-top h2,.dialogHead h2,.machine-edit-top h2,.tech-edit-head h2{font-size:20px!important;line-height:1.4!important}.dialog-actions,.machine-edit-actions,.tech-edit-actions,.formActions{flex-wrap:wrap;gap:9px}.dialog-actions button,.formActions button{min-height:44px;flex:1 1 120px}.viewer-stage{min-height:190px;gap:6px}.viewer-stage img{max-width:calc(100% - 84px)!important;max-height:60dvh}.viewer-nav{width:36px;height:44px;min-height:44px;font-size:23px}.adBody{padding:20px!important}.adActions{padding:0 20px 20px!important;gap:10px}.adActions button{min-height:44px}.adDetails{max-width:100%;overflow-x:auto}
 body[data-mobile-module=maintenance]{padding:12px!important}body[data-mobile-module=maintenance]>.panel{padding:16px!important;margin:0!important;width:100%;border-radius:16px}body[data-mobile-module=maintenance] .grid{grid-template-columns:minmax(0,1fr)}body[data-mobile-module=maintenance] .tag{font-size:13px;padding:7px 11px}
}
@media(min-width:375px) and (max-width:768px){#dashboard .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#dashboard .filter-grid>*{min-width:0!important}}
@media(max-width:360px){body>header #accountDisplayName{display:none!important}body>header #portalAccount #accountToggle{max-width:62px!important}.metric-head{flex-direction:column}.layout .kpis article{padding:12px!important}.imagePickerActions{gap:6px}#home .card h2{font-size:21px!important}}
@media(min-width:600px) and (max-width:768px){#home .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}#registerGallery:not(.register-list){grid-template-columns:repeat(2,minmax(0,1fr))!important}}