/* Shared containment, without shrinking the working energy table. */
.calendar-day-dialog{box-sizing:border-box;width:min(380px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:80dvh;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);overflow:auto;box-shadow:var(--shadow)}
.calendar-day-dialog::backdrop{background:#0006}
.calendar-day-dialog>header{display:flex;align-items:start;gap:12px;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}
.calendar-day-dialog h2{font-size:18px;line-height:1.4;margin:0;text-transform:capitalize;overflow-wrap:anywhere}
.calendar-day-dialog>header>button{flex:0 0 40px;min-height:40px}
.calendar-day-details{display:grid;gap:12px;padding:18px;min-width:0;overflow-wrap:anywhere}
.calendar-day-details strong{font-size:16px}.calendar-day-details small,.calendar-day-details>span:last-child{font-size:14px;color:var(--muted)}
.calendar-day-details .popover-status{max-width:100%;width:fit-content;white-space:normal;font-size:12px}
.calendar-day-details dl{display:grid;gap:10px;margin:0}.calendar-day-details dl>div{display:flex;justify-content:space-between;gap:16px}.calendar-day-details dd{margin:0;text-align:right}
@media(max-width:960px),(hover:none),(pointer:coarse){
 body .calendar-day .calendar-popover{display:none!important}
 body .calendar-day{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y pinch-zoom}
 body .calendar-day:hover{transform:none}
}
body.login-body .login-form input{font-size:16px!important;line-height:1.4;font-weight:500;min-height:44px;min-width:0;appearance:none;-webkit-appearance:none;caret-color:var(--text);border-radius:0}
body.login-body .login-form input::placeholder{font-weight:400}
body.login-body .login-form .field-control:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
body.login-body .login-form input:is(:autofill,:-webkit-autofill){-webkit-text-fill-color:var(--text);caret-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--canvas-soft) inset}
@media(max-width:960px){
 html:has(body.login-body){height:auto;overflow-x:clip;overflow-y:auto}
 body.login-body{height:auto;min-height:100svh;overflow-y:auto;overflow-x:clip}
 body.login-body .login-shell,body.login-body .login-access{min-height:100svh}
}
.time-entry{display:flex;align-items:stretch;width:100%;min-width:0;min-height:44px}
.time-use-now{justify-self:start;min-height:36px;margin-top:5px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--accent);font:inherit;cursor:pointer;text-transform:none;letter-spacing:normal}
.time-use-now:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.capture-missing-fields{display:grid;gap:5px;margin-top:10px}
.pending-changes-dialog{width:min(460px,calc(100vw - 32px));box-sizing:border-box;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text)}
.pending-changes-dialog h2{margin:0 0 14px;font-size:22px}.pending-changes-dialog p{line-height:1.6;color:var(--muted)}
.pending-changes-dialog footer{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:24px}
.pending-changes-dialog::backdrop{background:#0007}
.capture-missing-fields button{border:0;background:transparent;color:var(--accent);font:inherit;text-align:left;cursor:pointer;padding:4px 0;white-space:normal}
.time-entry>input{flex:1 1 0;width:0;min-width:0!important;font-variant-numeric:tabular-nums}
body .time-entry>.time-meridiem{display:block!important;position:static!important;opacity:1!important;width:76px!important;min-width:76px!important;flex:0 0 76px;height:auto!important;min-height:44px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);padding:0 10px;appearance:auto;font:inherit;cursor:pointer}
.pro-control.is-time:has(.time-entry)>i{display:none}
.pro-control.is-time:has(.time-entry){padding:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--canvas-soft)}
.pro-control.is-time:has(.time-entry):focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
body .time-entry>input{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
.time-entry>input:focus-visible{outline:0}.time-entry>select:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
@media(max-width:960px),(pointer:coarse){
 body .app-frame :is(input,select,textarea),body dialog :is(input,select,textarea){font-size:16px!important}
}
/* Let the browser pan the document for the keyboard; no nested viewport resizing. */
@media(max-width:960px){
 html:has([data-reading-form]){height:auto;overflow-x:clip;overflow-y:auto;scroll-padding-top:80px}
 body.app-body:has([data-reading-form]){height:auto;min-height:100svh;overflow:visible}
 body:has([data-reading-form]) .app-frame{height:auto;min-height:100svh;overflow:visible}
 body:has([data-reading-form]) .workbench{height:auto;min-height:100svh;overflow:visible;grid-template-rows:64px auto}
 body:has([data-reading-form]) .workspace-scroll{height:auto;max-height:none;overflow:visible;min-height:0}
 body:has([data-reading-form]) .command-bar{position:sticky;top:0;z-index:30}
 body:has([data-reading-form]) .workspace{padding-bottom:max(42px,env(safe-area-inset-bottom));min-width:0}
}
body .app-main,body .workspace-scroll,body .workspace,
body .workspace :is(.surface-card,.dashboard-grid,.admin-split,.energy-history-grid,.bi-dashboard,.summary-v2){min-width:0}
body .capture-title{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px}
body .capture-title>div{flex:1 1 220px;min-width:0}
body .capture-title h1{margin:0}
body .capture-title>.scope-bar{display:grid;grid-template-columns:minmax(200px,1.4fr) minmax(160px,1fr);flex:0 1 580px;width:580px;max-width:100%;margin:0 0 0 auto;gap:12px;padding:0;border:0;background:transparent;box-shadow:none}
body .capture-title>.scope-bar label{font-size:12px}
body .workspace :is(.history-table-wrapper,.people-table-scroll,.energy-table-scroll,.v2-detail){max-width:100%;overflow-x:auto}
body :is(.date-popover-pro,.time-popover-pro){max-width:calc(100vw - 24px);box-sizing:border-box}
body .people-drawer{max-width:100vw;max-height:100dvh}
body .people-drawer-body{min-width:0;overflow:auto;overflow-wrap:anywhere}
body .workspace :is(.page-heading,.energy-title-row,.card-heading){min-width:0}
body .workspace :is(.page-heading h1,.card-heading h2,.entity-list strong){overflow-wrap:anywhere}
@media(max-width:1000px){
 body .workspace .energy-title-row{flex-wrap:wrap;gap:16px}
 body .workspace .energy-title-row h1{flex:1 1 100%}
 body .workspace .energy-title-hotel{min-width:0;flex:1 1 220px}
 body .workspace :is(.admin-split,.energy-history-grid){grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 body .app-frame :is(input,select,textarea),body dialog :is(input,select,textarea){font-size:16px!important}
 body .workspace .page-heading .primary-action span{display:inline}
 body .workspace :is(.meter-period-layout,.comparison-card,.meter-period,.pro-control,.capture-stage){min-width:0;max-width:100%;box-sizing:border-box}
 body .capture-title{gap:16px}
 body .capture-title>div{flex-basis:100%}
 body .capture-title>.scope-bar{flex-basis:100%;width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 body .workspace :is(.page-heading,.card-heading){flex-wrap:wrap;gap:12px}
 body .workspace :is(.meter-period-grid,.review-period-grid,.energy-fields){grid-template-columns:minmax(0,1fr)}
 body .workspace :is(.calendar-tools,.calendar-legend,.v2-controls){flex-wrap:wrap;gap:8px}
 body .workspace .v2-controls{width:100%}
 body .workspace .v2-controls label{min-width:0;flex:1 1 150px}
 body .workspace .calendar-header{flex-wrap:wrap;gap:12px}
 body .workspace .calendar-tools{max-width:100%;margin-left:auto}
 body .workspace :is(.calendar-grid,.calendar-weekdays){grid-template-columns:repeat(7,minmax(0,1fr))}
 body .workspace :is(input,select,textarea){max-width:100%;box-sizing:border-box}
 body .people-drawer :is(input,select,textarea){max-width:100%;box-sizing:border-box}
 body .workspace .energy-title-hotel{width:100%}
 body .workspace .energy-title-row>.primary-action{margin-left:auto}
}
@media(max-width:420px){
 body .capture-title>.scope-bar{grid-template-columns:minmax(0,1fr)}
 body .workspace .calendar-tools{justify-content:flex-end}
 body .workspace .calendar-card{padding-inline:10px}
 body .workspace .calendar-grid{gap:3px}
 body .workspace .v2-slot{padding:16px}
 body .workspace .v2-slot strong{font-size:20px}
}