@import url('/app.css');
[data-panel="agenda"] { min-height:0; }
/* Only E scrolls; outer A-D and its controls retain their existing dimensions. */
.kiosk-shell .kiosk-content:has([data-panel="agenda"]:not([hidden])){touch-action:pan-y;overscroll-behavior-y:contain;text-align:left;}
.kiosk-shell .kiosk-content>[data-panel="agenda"]{align-content:start;}
#agenda-records{display:flex;flex-direction:column;gap:8px;}
#agenda-records .e-row{flex:none;text-align:left;overflow-wrap:anywhere;}
#next-appointment{overflow-wrap:anywhere;}
#appointment-detail{text-align:left;overflow-wrap:anywhere;}
.kiosk-shell .kiosk-content:has(#appointment-detail:not([hidden])){touch-action:pan-y;overscroll-behavior-y:contain;}
.kiosk-shell .kiosk-content>#appointment-detail{align-content:start;}
#appointment-detail section{margin-block:0 18px;}
#appointment-detail strong{color:var(--row-subject-text);}
#appointment-detail p{white-space:pre-wrap;color:var(--content-text);margin-block:6px 0;}
.clock-appointment-summary article[role="button"][aria-disabled="false"]{cursor:pointer;}
.clock-appointment-summary article[role="button"]:focus-visible{outline:2px solid var(--content-text);outline-offset:-2px;}
.kiosk-shell .clock-appointment-summary{grid-template-columns:minmax(0,1fr);width:100%;}
.kiosk-shell .clock-appointment-summary article{min-width:0;border-left:0;text-align:center;}
.kiosk-shell .clock-appointment-summary #next-appointment{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:clamp(26px,3.2vw,42px);line-height:1.2;}
/* Embedded kiosk owns only its E-content. The host keeps every A-D/composer slot. */
body[data-embedded="true"] .kiosk-shell{display:block!important;height:100%!important;padding:0!important;}
body[data-embedded="true"] .kiosk-shell>:not(.panel-e){display:none!important;}
body[data-embedded="true"] .panel-e{display:block!important;height:100%;}
body[data-embedded="true"] .panel-e>.scroll-button{display:none;}
body[data-embedded="true"] .kiosk-content{height:100%;}
.kiosk-shell #kiosk-home{color:inherit;text-decoration:none;font:inherit}
@font-face{font-family:Antonio;src:url('/fonts/Antonio-VariableFont_wght.ttf')}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#000;color:#f5f6fa;font-family:Antonio,Arial,sans-serif}.kiosk-shell{height:100%;padding:8px;display:grid;grid-template-columns:minmax(150px,24%) 1fr;grid-template-rows:78px 108px minmax(0,1fr);grid-template-areas:'a b' 'c c' 'd e';gap:8px}.panel-a{grid-area:a;background:#9944ff;color:#000;display:grid;place-items:center;text-align:center;font-size:24px;line-height:1.05;border-radius:0 0 0 24px}.panel-b{grid-area:b;background:#111522;padding:8px 20px;display:grid;align-content:center}.panel-b strong{color:#33cc99;font-size:42px;line-height:1}.panel-b span{color:#ffff99;font-size:19px}.panel-c{grid-area:c;display:grid;grid-template-rows:1fr 1fr;gap:8px}.c-row{background:#ffcc66;min-height:0}.panel-d,.panel-e{min-height:0;display:grid;gap:8px}.panel-d{grid-area:d;grid-template-rows:30px minmax(0,1fr) 30px}.panel-e{grid-area:e;grid-template-rows:30px minmax(0,1fr) 30px}.scroll-button{border:0;background:#33cc99;color:#000;font:700 18px Antonio}.scroll-button.unavailable{color:transparent;pointer-events:none}.kiosk-menu,.kiosk-content{min-height:0;overflow-y:auto;scrollbar-width:none}.kiosk-menu::-webkit-scrollbar,.kiosk-content::-webkit-scrollbar{display:none}.kiosk-menu{display:flex;flex-direction:column;gap:8px}.kiosk-menu button{flex:0 0 58px;border:0;background:#ffaa90;color:#000;font:24px Antonio}.kiosk-menu button.active{background:#ffcc66}.kiosk-content{background:#171b2a;padding:16px 22px;text-align:center}.kiosk-content>[data-panel]{min-height:100%;align-content:center}.time{font-size:clamp(86px,15vw,164px);line-height:.9;color:#ffcc66;font-weight:700}.date{font-size:22px;color:#33cc99;margin:10px 0}.summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}.summary article,.forecast-card{background:#10131f;border-left:7px solid #9944ff;padding:10px}.summary article:nth-child(even),.forecast-card:nth-child(even){border-color:#ff7700}.summary strong,.forecast-card strong{display:block;color:#ffcc66;font-size:22px}.summary span,.forecast-card span{display:block;color:#ffff99;font-size:19px}.track{display:block;color:#ffcc66;font-size:clamp(34px,6vw,54px);line-height:1.05}.artist{display:block;color:#ffff99;font-size:30px}.source{display:block;color:#33cc99;font-size:20px;margin-top:8px}.progress{display:grid;grid-template-columns:48px 1fr 48px;gap:10px;align-items:center;margin:16px auto;max-width:720px}.progress i{height:9px;background:#303548;border-radius:9px;overflow:hidden}.progress b{display:block;height:100%;width:0;background:#33cc99}.player-controls{display:flex;justify-content:center;gap:14px}.player-controls button{width:92px;height:58px;border:0;border-radius:10px;background:#ffaa90;color:#000;font:700 28px Antonio}.section-title{display:block;color:#ffcc66;font-size:38px;margin-bottom:12px}#forecast{display:flex;flex-direction:column;gap:8px;text-align:left}video,img{max-width:100%;max-height:58vh;object-fit:contain}#doorbell-status{color:#ffff99;font-size:22px}@media(max-width:620px){.kiosk-shell{grid-template-columns:126px 1fr;grid-template-rows:64px 92px minmax(0,1fr)}.panel-a{font-size:19px}.panel-b strong{font-size:32px}.kiosk-content{padding:12px}.summary{grid-template-columns:1fr}.time{font-size:78px}.kiosk-menu button{font-size:20px}.track{font-size:34px}}
/* Geometry shared with the ordinary web shell; inactive foreground never removes a slot. */
/* Native configureWideLayout dimensions in dp map directly to WebView CSS pixels. */
.kiosk-shell{grid-template-columns:230px minmax(0,1fr);grid-template-rows:76px 104px minmax(0,1fr) 48px;grid-template-areas:'a b' 'bridge c' 'd e' 'microphone composer';gap:8px;padding:8px;height:100dvh;--horizontal-scroll-size:42px}
.kiosk-shell .panel-a{border-radius:0;background:var(--info-button);font-weight:400}
.kiosk-shell .panel-b{background:#000;padding:0 8px}
.kiosk-shell .panel-c{display:grid;grid-template-columns:var(--horizontal-scroll-size) minmax(0,1fr) var(--horizontal-scroll-size);grid-template-rows:48px 48px;gap:8px;height:auto}
.kiosk-shell .c-row{background:var(--orange);display:flex;align-items:center;justify-content:flex-start;padding-inline:var(--kiosk-gap,8px);gap:var(--kiosk-gap,8px);color:#000;min-width:0;overflow:hidden;white-space:nowrap}
.kiosk-shell .c-scroll{background:var(--scroll-control)}
.kiosk-shell .bridge-panel{grid-area:bridge;grid-template-rows:48px 48px}
.kiosk-shell .bridge-piece{padding-block:0;background:var(--name-button);color:#000;font-size:24px;border-radius:0 0 0 28px}
.kiosk-shell .bridge-piece.refresh{background:var(--pet-button);border-radius:28px 0 0 0}
.kiosk-shell .panel-d,.kiosk-shell .panel-e{grid-template-rows:30px minmax(0,1fr) 30px;gap:8px}
.kiosk-shell .kiosk-menu{background:var(--orange)}
.kiosk-shell .kiosk-menu button{flex-basis:54px;background:var(--menu-item);font-weight:400;border:0;border-radius:2px}
.kiosk-shell .kiosk-menu button.active{background:var(--active-menu-item)}
.kiosk-shell .scroll-button{background:var(--scroll-control);font-weight:400}
.kiosk-composer-actions{grid-area:microphone;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kiosk-microphone{background:var(--microphone-button)}
.kiosk-send{background:var(--orange)}
.kiosk-composer{grid-area:composer;background:var(--panel-2)}
@media(max-width:599px){.kiosk-shell{grid-template-columns:132px minmax(0,1fr);grid-template-rows:68px 96px minmax(0,1fr) 48px;--horizontal-scroll-size:28px}.kiosk-shell .panel-c,.kiosk-shell .bridge-panel{grid-template-rows:44px 44px}.kiosk-shell .kiosk-menu button{flex-basis:48px}}
body[data-layout-theme="appsheet"] .kiosk-shell{grid-template-rows:104px 76px minmax(0,1fr) 48px;grid-template-areas:'a c' 'bridge b' 'd e' 'microphone composer'}
@media(max-width:599px){body[data-layout-theme="appsheet"] .kiosk-shell{grid-template-rows:96px 68px minmax(0,1fr) 48px}}
.kiosk-shell .panel-b strong{color:var(--subject-text)}
.kiosk-shell .summary strong,.kiosk-shell .forecast-card strong{color:var(--row-subject-text)}
.kiosk-shell .summary span,.kiosk-shell .forecast-card span{color:var(--content-text)}
body[data-native-expanded="true"] .kiosk-shell{grid-template-columns:230px minmax(0,1fr);grid-template-rows:76px 104px minmax(0,1fr) 48px;--horizontal-scroll-size:42px}
body[data-native-expanded="false"] .kiosk-shell{grid-template-columns:132px minmax(0,1fr);grid-template-rows:68px 96px minmax(0,1fr) 48px;--horizontal-scroll-size:28px}
body[data-native-expanded="true"] .panel-c,body[data-native-expanded="true"] .bridge-panel{grid-template-rows:48px 48px}
body[data-native-expanded="false"] .panel-c,body[data-native-expanded="false"] .bridge-panel{grid-template-rows:44px 44px}
body[data-native-expanded="true"][data-layout-theme="appsheet"] .kiosk-shell{grid-template-rows:104px 76px minmax(0,1fr) 48px}
body[data-native-expanded="false"][data-layout-theme="appsheet"] .kiosk-shell{grid-template-rows:96px 68px minmax(0,1fr) 48px}
.kiosk-shell button{font-family:inherit}
/* Whole-device-pixel geometry supplied by the exact native dp() conversion. */
body[data-native-geometry="true"] .kiosk-shell{height:100%;padding:var(--kiosk-gap);gap:var(--kiosk-gap);grid-template-columns:var(--kiosk-left) minmax(0,1fr);grid-template-rows:var(--kiosk-top) calc(2 * var(--kiosk-bridge) + var(--kiosk-gap)) minmax(0,1fr) var(--kiosk-composer);--horizontal-scroll-size:var(--kiosk-horizontalScroll)}
body[data-native-geometry="true"][data-layout-theme="appsheet"] .kiosk-shell{grid-template-rows:calc(2 * var(--kiosk-bridge) + var(--kiosk-gap)) var(--kiosk-top) minmax(0,1fr) var(--kiosk-composer)}
body[data-native-geometry="true"] .panel-c{grid-template-rows:var(--kiosk-bridge) var(--kiosk-bridge);gap:var(--kiosk-gap)}
body[data-native-geometry="true"] .bridge-panel{grid-template-rows:var(--kiosk-bridge) var(--kiosk-bridge);gap:var(--kiosk-gap)}
body[data-native-geometry="true"] .panel-d,body[data-native-geometry="true"] .panel-e{grid-template-rows:var(--kiosk-verticalScroll) minmax(0,1fr) var(--kiosk-verticalScroll);gap:var(--kiosk-gap)}
body[data-native-geometry="true"] .kiosk-menu{gap:var(--kiosk-gap)}
body[data-native-geometry="true"] .kiosk-menu button{flex-basis:var(--kiosk-menuButton)}
body[data-native-geometry="true"] .kiosk-composer-actions{gap:var(--kiosk-gap)}
.kiosk-shell .panel-a.menu-panel{background:transparent;display:flex;padding:0}
.kiosk-shell .panel-a .menu-square.info{flex:1;height:100%;min-height:0;background:var(--info-button)}
.kiosk-shell .menu-square .filter-label,.kiosk-shell .bridge-piece,.kiosk-shell .kiosk-menu .filter{font-family:inherit;font-size:var(--kiosk-control-text,17px);font-weight:400}
.kiosk-shell .kiosk-menu .filter{border:0;border-radius:2px;padding-block:8px;min-height:0}
.kiosk-shell .kiosk-menu .filter .filter-label{font-size:inherit}
.kiosk-shell .kiosk-menu .filter .filter-icon{font-size:inherit;line-height:1}
.kiosk-shell .info-feed{display:flex;flex-direction:column;gap:8px;text-align:left}
.kiosk-shell .info-feed[hidden]{display:none}
.kiosk-shell .info-row{width:100%;text-align:left}
.kiosk-shell #kiosk-info-detail{text-align:left;font-size:var(--kiosk-control-text,17px);color:var(--content-text)}
@media(max-width:599px){.kiosk-shell{--kiosk-control-text:14px}}
.control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;text-align:left;align-content:start}
.control-card{min-height:112px;border:0;border-left:7px solid var(--violet,#9944ff);background:#10131f;color:var(--info,#ffff99);padding:14px;font:inherit;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:12px}.control-card:nth-child(even){border-left-color:var(--orange,#ff7700)}.control-card strong{color:var(--yellow,#ffcc66);font-size:24px}.control-card.room,.control-card.action,.control-card.scene{cursor:pointer}.control-device-name{border:0;background:transparent;color:var(--yellow,#ffcc66);font:24px Antonio,Arial,sans-serif;text-align:left;cursor:pointer;padding:0}.quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.quick-actions button,.control-parameter button{min-height:42px;border:0;background:var(--menu-item,#ffaa90);color:#000;font:18px Antonio,Arial,sans-serif}.quick-actions button:disabled,.control-card:disabled{opacity:.55}.control-confirmation{min-height:1.2em;color:var(--info,#ffff99)}#control-actions{grid-template-columns:1fr}.control-parameter{min-height:82px;display:grid;grid-template-columns:minmax(150px,1fr) minmax(100px,180px) auto minmax(110px,180px);gap:10px;align-items:center;background:#10131f;border-left:7px solid var(--violet,#9944ff);padding:14px}.control-parameter input{min-height:42px;border:2px solid var(--menu-item,#ffaa90);background:#000;color:var(--info,#ffff99);font:20px Antonio,Arial,sans-serif;padding:0 10px}.control-grid>h2{grid-column:1/-1;margin:8px 0 0;color:var(--yellow,#ffcc66)}@media(max-width:600px){.control-parameter{grid-template-columns:1fr auto}.control-parameter strong{grid-column:1/-1}}

/* Only the clock's E-content changes; no shell or native panel dimensions. */
.kiosk-shell .kiosk-content>[data-panel="clock"]:not([hidden]){display:grid;grid-template-rows:minmax(36px,1fr) auto auto;height:100%;min-height:100%;align-content:stretch;--clock-meta-font:clamp(22px,3.4vw,34px);}
.kiosk-shell [data-panel="clock"] .clock-time-row{display:flex;align-items:center;justify-content:center;min-width:0;min-height:36px;container-type:size;}
.kiosk-shell [data-panel="clock"] .clock-time-row .time{font-size:clamp(24px,min(32cqw,75cqh),164px);max-width:100%;}
.kiosk-shell [data-panel="clock"] .date{font-size:var(--clock-meta-font);line-height:1.2;margin:0;}
.kiosk-shell [data-panel="clock"] .clock-appointment-summary{margin-top:clamp(8px,1.5vh,16px);}
.kiosk-shell [data-panel="clock"] #next-appointment{font-size:var(--clock-meta-font);line-height:1.2;}
.kiosk-shell .clock-appointment-summary #next-appointment .appointment-when{display:inline;font:inherit;color:var(--orange,#ff7700);}
.kiosk-shell .clock-appointment-summary #next-appointment .appointment-subject{display:inline;font:inherit;color:var(--row-subject-text,#ffcc66);}

/* Lampdetails blijven scalar, capability-bound en pas actief na Toepassen. */
.hue-wheel{position:relative;justify-self:center;width:138px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 17%,transparent 18%),conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);touch-action:none;cursor:crosshair}.hue-marker{position:absolute;width:20px;height:20px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 3px #000;transform:translate(-50%,-50%);pointer-events:none}.hue-keyboard-range{grid-column:2;min-height:30px!important}.hue-keyboard-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)!important}.hue-keyboard-range::-moz-range-track{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)!important}@media(max-width:600px){.hue-wheel,.hue-keyboard-range{grid-column:1/-1}}
.control-parameter output{min-width:74px;text-align:center;color:var(--info,#ffff99);font-size:20px}.control-parameter input[type="range"]{appearance:none;-webkit-appearance:none;width:100%;min-height:44px;border:0;background:transparent;padding:0;cursor:pointer}.control-parameter input[type="range"]::-webkit-slider-runnable-track{height:14px;border:2px solid #000;border-radius:9px;background:linear-gradient(90deg,#111,#ffff66)}.control-parameter input[type="range"]::-moz-range-track{height:12px;border:2px solid #000;border-radius:9px;background:linear-gradient(90deg,#111,#ffff66)}.control-parameter input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-10px;border:3px solid #000;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--menu-item,#ffaa90)}.control-parameter input[type="range"]::-moz-range-thumb{width:26px;height:26px;border:3px solid #000;border-radius:50%;background:#fff}.control-parameter input[type="range"]:focus-visible{outline:3px solid var(--info,#ffff99);outline-offset:3px}.control-parameter .kelvin-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#ff8a35,#fff0ba 48%,#d8ecff)}.control-parameter .kelvin-range::-moz-range-track{background:linear-gradient(90deg,#ff8a35,#fff0ba 48%,#d8ecff)}.control-parameter.hue-control{grid-template-columns:minmax(150px,1fr) minmax(140px,220px) auto minmax(110px,180px)}.control-parameter .hue-ring{height:138px!important;border-radius:50%!important;background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)!important;clip-path:circle(50% at 50% 50%);padding:54px 12px!important}.control-parameter .hue-ring::-webkit-slider-runnable-track{height:18px;background:rgba(0,0,0,.72);border-color:#fff}.control-parameter .hue-ring::-moz-range-track{height:16px;background:rgba(0,0,0,.72);border-color:#fff}@media(max-width:600px){.control-parameter.hue-control{grid-template-columns:1fr auto}.control-parameter .hue-ring{height:116px!important;grid-column:1/-1}}