:root{
  --bg:rgb(32,32,31);
  --surface:rgb(37,37,35);
  --surface-2:rgb(43,43,41);
  --line:rgb(66,66,62);
  --text:rgb(238,240,237);
  --muted:rgb(165,170,166);
  --muted-2:rgb(105,110,106);
  --title:rgb(91,188,110);
  --accent:rgb(115,211,126);
  --warm:rgb(224,142,60);
  --orange:var(--warm);
  --danger:rgb(224,92,78);
  --field-focus:rgb(50,50,47);
  --week-line:rgb(104,107,102);
  --appbar-h:60px;
  --datew:112px;
  --agew:78px;
  --weekw:72px;
  --weekdatew:118px;
  font-family:Roboto,Arial,sans-serif;
  color-scheme:dark;
}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{
  --bg:rgb(238,240,237);
  --surface:rgb(231,233,229);
  --surface-2:rgb(216,218,214);
  --line:rgb(165,170,166);
  --text:rgb(32,32,31);
  --muted:rgb(88,94,89);
  --muted-2:rgb(124,130,125);
  --title:rgb(54,143,72);
  --accent:rgb(61,157,80);
  --warm:rgb(190,112,38);
  --danger:rgb(183,65,52);
  --field-focus:rgb(223,226,221);
  --week-line:rgb(118,122,117);
  color-scheme:light;
}
*{box-sizing:border-box;border-radius:0!important}
html,body{margin:0;background:var(--bg);color:var(--text);min-height:100%}
body{font-size:14px;font-family:Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;border-radius:0!important}

/* Hoofdnavigatie */
.appbar{height:var(--appbar-h);background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;gap:30px;position:sticky;top:0;z-index:100}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:.01em}
.brand-copy{display:flex;flex-direction:column;justify-content:center;line-height:1.05}.brand-tagline{margin-top:3px;color:var(--muted);font-size:8px;font-weight:400;white-space:nowrap}
.brand-mark{background:var(--title);color:rgb(22,22,21);font-weight:700;padding:6px 8px;letter-spacing:-.02em}
.brand-mark.big{font-size:22px;padding:9px 11px}
.appbar-flock{display:flex;flex-direction:column;justify-content:center;min-width:0;max-width:min(36vw,430px);padding-left:16px;border-left:1px solid var(--line);line-height:1.15}
.appbar-flock strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--title);font-size:13px;font-weight:600}
.appbar-flock small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:9px;margin-top:3px}
.desktop-nav{display:flex;align-self:stretch;gap:0}
.desktop-nav a{display:flex;align-items:center;padding:0 16px;color:var(--muted);border-left:1px solid transparent;border-right:1px solid transparent}
.desktop-nav a:hover{color:var(--text);background:var(--surface)}
.user-menu{margin-left:auto;position:relative}
.user-menu summary{cursor:pointer;color:var(--text);list-style:none;padding:8px 0}
.user-menu-panel{position:absolute;right:0;top:35px;width:210px;background:var(--surface-2);border:1px solid var(--line);padding:0;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.user-menu-panel a,.user-menu-panel button{display:block;width:100%;padding:11px 12px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--text);cursor:pointer}
.user-menu-panel a:hover,.user-menu-panel button:hover{background:var(--surface)}
[data-pwa-install][hidden]{display:none!important}

.connection-dialog{width:min(520px,calc(100vw - 24px));border-color:var(--orange);z-index:10000}
.connection-dialog::backdrop{background:rgba(0,0,0,.72)}
.connection-dialog-head{border-bottom-color:color-mix(in srgb,var(--orange) 55%,var(--line))}
.connection-dialog-head strong,.connection-dialog-head small{color:var(--orange)}
.connection-dialog-message{margin:0;padding:18px 14px;line-height:1.5}
.connection-dialog-indicator{width:18px;height:18px;border:2px solid color-mix(in srgb,var(--orange) 35%,transparent);border-top-color:var(--orange);border-radius:50%;animation:kp-spin .8s linear infinite;flex:0 0 auto}
.connection-dialog.is-restored{border-color:var(--accent)}
.connection-dialog.is-restored .connection-dialog-head{border-bottom-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.connection-dialog.is-restored .connection-dialog-head strong,.connection-dialog.is-restored .connection-dialog-head small{color:var(--accent)}
.connection-dialog.is-restored .connection-dialog-indicator{border-color:var(--accent);animation:none;position:relative}
.connection-dialog.is-restored .connection-dialog-indicator::after{content:'✓';position:absolute;inset:-5px 0 0 1px;color:var(--accent);font-weight:800;font-size:19px}
@keyframes kp-spin{to{transform:rotate(360deg)}}
.sensor-info-dialog{width:min(390px,calc(100vw - 24px))}.sensor-info-dialog p{padding:8px 14px;white-space:pre-line}

.page{max-width:1500px;margin:0 auto;padding:24px}
.flock-page{max-width:none;padding:0}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.page-head h1{margin:0 0 4px;font-size:27px;font-weight:600;color:var(--text)}
.page-head p{margin:0;color:var(--muted)}
.muted{color:var(--muted)}

.button,.primary{border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:9px 13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:36px}
.button:hover{border-color:var(--accent);color:var(--accent)}
.primary{background:var(--title);border-color:var(--title);color:rgb(22,22,21);font-weight:700}
.primary:hover{background:var(--accent);border-color:var(--accent)}
.primary.large{padding:12px 16px}

/* Dashboard */
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}
.flock-card{background:var(--bg);border:1px solid var(--line);padding:16px;transition:border-color .12s,background .12s}
.flock-card:hover{border-color:var(--accent);background:var(--surface)}
.card-top{display:flex;justify-content:space-between;gap:12px}
.card-top h2{margin:4px 0;font-size:20px;font-weight:600;color:var(--title)}
.age-badge{text-align:right;background:var(--bg);border:1px solid var(--line);padding:7px 9px;font-weight:600}
.age-badge small{color:var(--muted);font-weight:400}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:15px}
.kpi-grid>div{background:var(--bg);padding:10px}
.kpi-grid span{display:block;color:var(--muted);font-size:11px}
.kpi-grid strong{display:block;font-size:18px;margin-top:3px;font-weight:500}
.kpi-grid small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.dashboard-kpis{grid-template-columns:repeat(5,1fr)}
.card-foot{color:var(--muted);font-size:12px;margin-top:12px}

/* Koppelkop: alleen titel + tabs. Geen tweede dynamische rij met dagwaarden. */
.flock-sticky{position:sticky;top:var(--appbar-h);z-index:80;background:var(--bg);border-bottom:1px solid var(--line)}
.flock-title-row{display:flex;align-items:center;gap:8px;min-height:42px;border-bottom:1px solid var(--line);padding:0 14px}
.back{font-size:20px;padding:8px 9px;color:var(--muted);border-right:1px solid var(--line)}
.back:hover{color:var(--accent)}
.flock-title{display:flex;flex-direction:column;min-width:0;padding:5px 0}
.flock-title strong{font-weight:600;color:var(--title);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flock-title span{color:var(--muted);font-size:11px}
.appbar-flock-note,.flock-note-preview{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10px;line-height:1.25}
.view-toggle{display:flex;align-self:stretch;border-left:1px solid var(--line);margin-left:8px}
.view-toggle a{display:flex;align-items:center;padding:0 10px;color:var(--muted);border-right:1px solid var(--line);font-size:11px;white-space:nowrap}
.view-toggle a:hover{color:var(--text);background:var(--surface)}
.view-toggle a.active{color:var(--accent);background:var(--surface);box-shadow:inset 0 -3px var(--accent)}
.flock-actions{display:flex;align-self:stretch;margin-left:auto}
.flock-actions a{display:flex;align-items:center;padding:0 10px;color:var(--muted);border-left:1px solid var(--line)}
.flock-actions a:hover{color:var(--accent);background:var(--surface)}
.flock-nav-row{display:flex;align-items:stretch;min-height:40px}
.flock-tabs{display:flex;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
.flock-tabs::-webkit-scrollbar{display:none}
.flock-tabs a{display:flex;align-items:center;white-space:nowrap;padding:0 13px;color:var(--muted);border-right:1px solid var(--line);border-bottom:3px solid transparent}
.flock-tabs a:hover{color:var(--text);background:var(--surface)}
.flock-tabs a.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--surface)}
.compare-control{display:flex;align-items:center;padding:0 10px;border-left:1px solid var(--line);white-space:nowrap}
.compare-control label{color:var(--muted);font-size:11px}
.compare-control select{margin-left:5px;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:5px 7px}
.compare-pill{font-size:10px;color:var(--accent);margin-left:5px}

/* Tabellen: de tabel zelf scrolt. De kolomkop blijft altijd direct onder de tabs staan. */
.table-wrap{overflow:auto;max-width:100%;padding:0;scrollbar-gutter:stable}
.table-position-pending{visibility:hidden}
.flock-page .table-wrap{height:calc(100vh - var(--appbar-h) - 83px);min-height:220px}
.data-table,.simple-table{border-collapse:separate;border-spacing:0}
.data-table{width:max-content;min-width:max-content}
.simple-table{width:100%}
.data-table th,.data-table td,.simple-table th,.simple-table td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;text-align:right;white-space:nowrap;background:var(--bg)}
.data-table th,.simple-table th{background:var(--surface-2);color:var(--muted);font-weight:500;padding:8px 10px;text-align:center;border-top:0}
.data-table thead th{position:sticky;top:0;z-index:30;box-shadow:0 1px 0 var(--line)}
.data-table th small{display:block;font-size:10px;color:var(--muted);font-weight:400}
.data-table td{height:39px;min-width:0}
.data-table tr:hover td{background:var(--surface)}
.data-table tbody tr.week-start td{border-top:2px solid var(--week-line)}
.data-table .sticky-col{position:sticky;z-index:25}
.data-table thead .sticky-col{z-index:45;background:var(--surface-2)}
.c-date{left:0;text-align:left!important;padding-left:10px!important}
.c-age{left:var(--kp-date-left,0px);text-align:center!important}
.data-table td.c-date,.data-table td.c-age{background:var(--surface)}
.c-age strong{display:block;font-weight:500}
.c-age small{display:block;color:var(--muted);font-size:10px}
.c-week{left:0;text-align:center!important;background:var(--surface)!important}
.c-weekdate{left:var(--kp-week-left,0px);text-align:left!important;padding-left:10px!important;background:var(--surface)!important}
.data-table thead .c-week,.data-table thead .c-weekdate{background:var(--surface-2)!important}
.weekly-table td{padding:0 10px!important}
.cell{display:block;width:100%;min-width:0;box-sizing:border-box;height:38px;border:0;background:transparent;color:var(--text);padding:6px 9px;text-align:right;outline:none}
.cell.wide{min-width:0;text-align:left}
.cell:focus{box-shadow:inset 0 0 0 2px var(--accent);background:var(--field-focus)}
.cell-saving{background:var(--surface-2)!important}
.cell-ok{box-shadow:inset 0 -2px var(--accent)!important}
.cell-error{box-shadow:inset 0 0 0 2px var(--warm)!important;background:color-mix(in srgb,var(--warm) 12%,var(--bg))!important}
.calculated{padding:0 10px!important;background:var(--surface)!important;color:var(--text)}
.compare-value{display:block;box-sizing:border-box;color:var(--accent);font-size:10px;margin-top:1px;text-align:right}
.notes-cell{min-width:0}
.simple-table{width:100%}
.simple-table th,.simple-table td{padding:9px 10px;text-align:left}
.simple-table td{background:var(--bg)}
.simple-table code{white-space:normal;word-break:break-all;color:var(--accent)}
.table-panel{padding:0}
.clickable-row{cursor:pointer}
.clickable-row:hover td,.clickable-row:focus td{background:var(--surface-2)!important;color:var(--text)}
.clickable-row:focus{outline:none}
.clickable-row td:first-child{border-left:3px solid transparent}
.clickable-row:hover td:first-child,.clickable-row:focus td:first-child{border-left-color:var(--accent)}

/* Panelen en formulieren */
.info-strip{margin:10px 14px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--title);padding:9px 11px;color:var(--text)}
.panel{background:var(--bg);border:1px solid var(--line);padding:16px;margin-bottom:14px}
.panel h2{margin-top:0;font-size:18px;font-weight:500;color:var(--title)}
.panel.narrow,.narrow{max-width:650px}
.two-col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);gap:12px}
.two-col.wide-left{grid-template-columns:minmax(0,2fr) minmax(330px,.7fr)}
.stack-form{display:flex;flex-direction:column;gap:12px}
.stack-form p{margin:0}
.stack-form label,.stack-form p label{display:flex;flex-direction:column;gap:5px;color:var(--muted)}
.stack-form input,.stack-form select,.stack-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:10px}
.stack-form input:focus,.stack-form select:focus,.stack-form textarea:focus{outline:2px solid var(--accent);outline-offset:-2px}
.stack-form input:disabled{color:var(--muted);background:var(--surface)}
.stack-form input[type="checkbox"]{width:auto;accent-color:var(--title)}
.stack-form ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.stack-form ul label{display:flex;flex-direction:row;align-items:center;gap:8px;padding:5px 0;color:var(--text)}
.helptext{font-size:11px;color:var(--muted)}
ul.errorlist{margin:4px 0 0;padding:0;list-style:none;color:var(--warm);font-size:12px}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.setting-card{background:var(--bg);border:1px solid var(--line);padding:15px}
.setting-card:hover{border-color:var(--accent);background:var(--surface)}
.setting-card h2{font-size:17px;margin:0 0 7px;color:var(--title);font-weight:500}
.setting-card p{margin:0;color:var(--muted)}
.structure-block{border-bottom:1px solid var(--line);padding:10px 0}
.structure-title,.structure-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.structure-title a,.structure-row a{color:var(--accent);font-size:12px}
.structure-row{padding:7px 12px;color:var(--text);border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}

/* Logboek, meldingen, login */
.event{display:grid;grid-template-columns:100px 1fr;gap:14px;border-bottom:1px solid var(--line);padding:13px 0}
.event time{color:var(--muted)}
.event h3{margin:5px 0;font-weight:500}
.event p{margin:0;color:var(--muted)}
.tag{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--title)}
.messages{position:fixed;right:16px;top:70px;z-index:200;width:min(420px,calc(100vw - 32px))}
.message{background:var(--surface-2);border:1px solid var(--line);padding:10px 12px;margin-bottom:6px;cursor:pointer}
.message.success{border-left:4px solid var(--accent)}
.message.error{border-left:4px solid var(--warm)}
.message.warning{border-left:4px solid #df8a26;color:#f0a03a}
/* Bestaande wachtwoordherstelschermen; login zelf heeft login.css. */
.login-shell{min-height:calc(100vh - 48px);display:grid;place-items:center;padding:20px}
.login-card{width:min(430px,100%);background:var(--bg);border:1px solid var(--line);padding:26px;box-shadow:0 24px 70px rgba(0,0,0,.25)}
.empty{background:var(--bg);border:1px solid var(--line);padding:28px;text-align:center;color:var(--muted)}
.empty h2,.empty h1{color:var(--text)}
.code-result{white-space:pre-wrap;max-height:350px;overflow:auto;background:var(--surface);padding:10px;color:var(--accent);display:none}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.filterbar{display:flex;gap:0;margin:-4px 0 14px;overflow:auto;border:1px solid var(--line);width:max-content;max-width:100%}
.filterbar a{padding:7px 11px;border-right:1px solid var(--line);color:var(--muted)}
.filterbar a:last-child{border-right:0}
.filterbar a.active{color:var(--accent);background:var(--surface);box-shadow:inset 0 -3px var(--accent)}
.mobile-only{display:none!important}

@media(max-width:760px){

  :root{--appbar-h:52px;--datew:98px;--agew:66px}
  .appbar{padding:0 10px;gap:12px}
  .brand{font-size:15px;gap:7px;flex:0 0 auto}.brand-mark{padding:5px 7px}
  .appbar-flock{flex:1;max-width:none;padding-left:9px}
  .appbar-flock strong{font-size:11px}.appbar-flock small{font-size:8px}
  .desktop-nav{display:none}
  .user-menu summary{font-size:0}.user-menu summary:after{content:'☰';font-size:21px}
  .page{padding:12px}.flock-page{padding:0}
  .flock-title-row{min-height:38px;padding:0 6px}
  .flock-title{font-size:12px}.flock-title span{font-size:10px}
  .view-toggle a{font-size:10px;padding:0 7px}
  .flock-nav-row{display:block;min-height:0}
  .flock-tabs{border-bottom:1px solid var(--line)}
  .flock-tabs a{height:34px;padding:0 9px;font-size:11px}
  .compare-control{height:32px;justify-content:flex-end;border-left:0;padding:3px 6px}
  .compare-control select{max-width:165px;font-size:11px;padding:3px 5px}
  .data-table th,.simple-table th{padding:6px 7px;font-size:11px}
  .data-table td{height:37px;min-width:0;font-size:12px}
  .cell{height:36px;padding:5px 7px;font-size:16px}
  .notes-cell,.cell.wide{min-width:0}
  .c-date,.c-age{font-size:11px}
  .dashboard-grid{grid-template-columns:1fr}.kpi-grid,.dashboard-kpis{grid-template-columns:repeat(2,1fr)}
  .two-col,.two-col.wide-left{grid-template-columns:1fr}
  .page-head h1{font-size:22px}.info-strip{margin:7px;font-size:11px}
  .settings-grid{grid-template-columns:1fr}.login-card{padding:20px}
  .event{grid-template-columns:80px 1fr}
  .mobile-only{display:block!important}
}

/* ========================================================================== 
   v0.21 - vaste kolomblokken, compacte sensordrieluiken en gebruiksbeheer
   ========================================================================== */
.column-section-title{display:block;padding:7px 10px 5px;color:var(--title);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
[data-column-list][data-column-section="fixed"]{background:color-mix(in srgb,var(--surface-2) 78%,var(--accent) 22%)}
.compact-data-table .sensor-triple,.compact-data-table .weekly-sensor-triple,
.compact-data-table .compare-triple{grid-template-columns:repeat(3,minmax(46px,1fr))!important;min-width:140px!important}
.sensor-header-triple{grid-template-columns:repeat(3,minmax(46px,1fr))!important}


.ha-history-form{display:grid;grid-template-columns:1.3fr 1.7fr 1.2fr 1fr 1fr;gap:10px;padding:14px}.ha-history-form label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px}.ha-history-form select,.ha-history-form input{width:100%}.ha-history-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:12px}.ha-history-actions p{margin:0}
@media(max-width:900px){.ha-history-form{grid-template-columns:1fr 1fr}.ha-history-actions{grid-column:1/-1}}@media(max-width:600px){.ha-history-form{grid-template-columns:1fr}.ha-history-actions{grid-column:1;align-items:stretch;flex-direction:column}}
.note-cell-button{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.empty-note .note-cell-button{text-align:center}
.norm-week-actions{display:flex;gap:7px;flex-wrap:wrap}
.history-file-label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--title);font-weight:600}
.history-file-label input{min-width:0;color:var(--text)}
.usage-kpis{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:8px;margin-bottom:12px}
.usage-kpis .panel{display:flex;flex-direction:column;padding:13px}.usage-kpis strong{font-size:24px;color:var(--accent)}.usage-kpis span{color:var(--muted);font-size:11px}
.usage-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:12px;margin-top:12px}.usage-panel{padding:0}.usage-panel .panel-title-row{padding:10px 12px;border-bottom:1px solid var(--line)}.usage-panel h2,.usage-panel p{margin:0}.usage-panel code{font-size:10px;color:var(--muted)}
@media(max-width:760px){.usage-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.usage-grid{grid-template-columns:1fr}.norm-week-actions{width:100%}.norm-week-actions .button{flex:1}}

/* Duidelijke weekgrens; bij voltooide levensweken begint de nieuwe week op +1. */
.data-table tbody tr.week-start td{border-top:2px solid var(--week-line)!important}
.data-table tbody tr.week-start td.c-age small{color:var(--muted);font-weight:400}

/* Kolommen per gebruiker instelbaar in het dagoverzicht. */
.col-hidden{display:none!important}
.column-menu{position:relative;align-self:stretch;border-left:1px solid var(--line)}
.column-menu summary{height:100%;display:flex;align-items:center;padding:0 11px;cursor:pointer;color:var(--muted);font-size:11px;list-style:none;white-space:nowrap}
.column-menu summary::-webkit-details-marker{display:none}
.column-menu[open] summary,.column-menu summary:hover{background:var(--surface);color:var(--accent)}
.column-menu-panel{position:absolute;right:0;top:100%;z-index:120;width:min(360px,calc(100vw - 12px));min-width:0;max-width:calc(100vw - 12px);max-height:60vh;overflow:auto;white-space:normal;background:var(--surface-2);border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.35);padding:0}
.column-menu-panel>strong{display:block;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--text)}
.column-menu-panel label{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer;color:var(--text);font-size:12px}
.column-menu-panel label:hover{background:var(--surface)}
.column-menu-panel input{accent-color:var(--accent)}
.column-menu-panel button{width:100%;text-align:left;border:0;background:transparent;color:var(--accent);padding:10px 12px;cursor:pointer}
.column-menu-panel button:hover{background:var(--surface)}

/* Home Assistant koppeling / entiteiten zoeken. */
.inline-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.connection-result{margin-top:8px;padding:9px 10px;border-left:3px solid var(--line);background:var(--bg);color:var(--muted)}
.connection-result.ok{border-left-color:var(--accent);color:var(--text)}
.connection-result.error{border-left-color:var(--warm);color:var(--text)}
.ha-search-panel{margin-bottom:12px}
.ha-search-line{display:flex;gap:0;max-width:900px}
.ha-search-line input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:9px 10px;outline:none}
.ha-search-line input:focus{border-color:var(--accent)}
.ha-search-line .button{border-left:0}
.ha-entity-results{margin-top:8px;max-height:340px;overflow:auto;border-top:1px solid var(--line)}
.ha-entity-row{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(260px,1.8fr) 100px 86px;align-items:center;border-bottom:1px solid var(--line);min-height:40px}
.ha-entity-row>span,.ha-entity-row>code{padding:7px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ha-entity-row code{color:var(--muted)}
.ha-entity-row button{height:100%;border:0;border-left:1px solid var(--line);background:var(--surface-2);color:var(--accent);cursor:pointer}
.ha-entity-row button:hover{background:var(--surface)}
.compact-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}

@media (max-width:700px){
  .column-menu summary{padding:0 8px}
  .column-menu-panel{position:fixed;right:6px;left:6px;top:92px;max-height:60vh}
  .ha-entity-row{grid-template-columns:1fr 78px}
  .ha-entity-row .ha-friendly,.ha-entity-row .ha-unit{display:none}
}


/* v0.7: compacte sensoren en globale kolombreedtes */
.sensor-cell{padding:0 6px!important;vertical-align:middle}
.sensor-triple{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;min-height:38px;overflow:hidden}
.sensor-part{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:1px;border-right:1px solid var(--line);min-width:0;overflow:hidden}
.sensor-part:last-child{border-right:0}
.sensor-part small{display:block;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%}
.sensor-extreme-time{height:9px;font-size:7px;color:var(--muted)}
.sensor-label{font-size:8px;color:var(--muted);text-transform:lowercase}
.sensor-part span{font-size:12px;line-height:14px;white-space:nowrap}
.sensor-mini{height:15px!important;min-width:0!important;padding:0 1px!important;text-align:center;font-size:12px;line-height:14px}
.sensor-single{display:flex;align-items:center;justify-content:flex-end;width:100%;height:100%}
.sensor-single .sensor-live-value{width:100%;text-align:right;padding:0 6px}
.compare-triple{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));box-sizing:border-box;color:var(--accent);font-size:9px;padding:1px 0 3px}
.compare-triple::before{content:none;display:none}
.compare-triple>span{display:block;min-width:0;text-align:center;white-space:nowrap}
.live-sensor{display:block;color:var(--muted);font-size:9px;text-align:right;padding:1px 5px 3px;white-space:nowrap}
.weekly-sensor-triple{min-width:0}
.table-width-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.table-width-item{background:var(--bg);display:grid;grid-template-columns:1fr 88px;align-items:center;gap:10px;padding:9px 10px}
.table-width-item label{color:var(--text)}
.table-width-item input{width:88px;background:var(--bg);color:var(--text);border:1px solid var(--line);padding:7px;text-align:right}
.table-width-item small{display:block;color:var(--muted);font-size:10px}
.sensor-time{font-size:10px;color:var(--muted);white-space:nowrap}


/* v0.9: kolombreedtes in karaktereenheden en dynamische layout. */
.layout-table input{width:100%;min-width:62px;background:var(--bg);color:var(--text);border:1px solid var(--line);padding:7px}
.layout-table td:first-child small{display:block;font-size:10px}
.layout-save{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px;border-top:1px solid var(--line)}
.daily-event-summary{display:block;color:var(--muted);font-size:9px;padding:1px 6px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-actions{display:flex;gap:8px;margin-top:7px}.event-actions a,.event-actions button{font-size:11px;color:var(--accent);background:transparent;border:0;padding:0;cursor:pointer}


/* v0.10: tabelweergave breedte-invoer en compacte eenheid. */
.layout-table .width-input{display:grid;grid-template-columns:minmax(72px,1fr) 28px;align-items:center;gap:6px}
.layout-table .width-input input{min-width:0;width:100%}
.layout-table .width-input span{color:var(--muted);font-size:11px;white-space:nowrap;text-align:left}


/* v0.11: kolombreedtes automatisch op titel + breedste zichtbare inhoud. */
.data-table th,.data-table td{box-sizing:border-box}
.data-table th{white-space:nowrap}
.data-table td{white-space:nowrap}
.data-table .auto-sized-col{overflow:hidden}
.layout-table td:nth-child(2),.layout-table td:nth-child(3){min-width:180px}
@media (max-width:700px){
  .layout-table td:nth-child(2),.layout-table td:nth-child(3){min-width:145px}
}


/* v0.12: min/gem/max sensoren krijgen bewust extra ruimte.
   Eén sensorkolom bevat drie meetblokken; op mobiel mag de tabel daarom
   horizontaal scrollen in plaats van de waarden samen te persen. */
.sensor-cell{padding:0!important}
.sensor-triple{
  display:grid;
  grid-template-columns:repeat(3,minmax(58px,max-content));
  width:max-content;
  min-width:176px;
  align-items:stretch;
  overflow:visible;
  margin:0 auto;
}
.sensor-part{
  min-width:58px;
  padding:3px 5px 4px;
  overflow:visible;
}
.sensor-extreme-time{
  height:12px;
  font-size:8.5px;
  line-height:12px;
  color:var(--muted);
  overflow:visible!important;
}
.sensor-label{
  font-size:9px;
  line-height:11px;
  color:var(--muted);
  overflow:visible!important;
}
.sensor-part span.sensor-live-value,
.sensor-part > span{
  font-size:15px;
  line-height:18px;
  font-weight:600;
  overflow:visible;
}
.sensor-mini{
  width:54px!important;
  min-width:54px!important;
  max-width:54px!important;
  height:19px!important;
  padding:0 2px!important;
  font-size:14px!important;
  line-height:18px!important;
  font-weight:600;
}
.weekly-sensor-triple{
  min-width:176px;
  grid-template-columns:repeat(3,minmax(58px,max-content));
}
@media (max-width:700px){
  .sensor-triple,.weekly-sensor-triple{min-width:176px}
  .sensor-part{min-width:58px}
}

/* v0.13: één compacte, vaste koppelbediening. */
.flock-toolbar{
  min-height:44px;
  display:flex;
  align-items:stretch;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.flock-toolbar .back{display:flex;align-items:center;flex:0 0 auto}
.flock-toolbar .flock-title{padding:5px 12px;justify-content:center;max-width:330px;min-width:180px}
.flock-toolbar .flock-title strong{font-size:14px}
.flock-toolbar .flock-title span{font-size:10px}
.compact-toggle{margin-left:0;border-left:1px solid var(--line);flex:0 0 auto}
.compact-toggle a{padding:0 13px;font-size:12px}
.toolbar-menu{position:relative;align-self:stretch;border-left:1px solid var(--line);flex:0 0 auto}
.toolbar-menu>summary,.toolbar-button{
  height:100%;min-height:43px;display:flex;align-items:center;justify-content:center;
  padding:0 12px;cursor:pointer;color:var(--muted);list-style:none;border:0;border-left:1px solid transparent;
  background:transparent;font-size:12px;white-space:nowrap;
}
.toolbar-menu>summary::-webkit-details-marker{display:none}
.toolbar-menu[open]>summary,.toolbar-menu>summary:hover,.toolbar-button:hover{background:var(--surface);color:var(--accent)}
.toolbar-button.active{color:var(--accent);background:var(--surface);box-shadow:inset 0 -3px var(--accent)}
.toolbar-menu-panel{
  position:absolute;top:100%;left:0;z-index:130;min-width:190px;background:var(--surface-2);
  border:1px solid var(--line);box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.toolbar-menu-panel a{display:block;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--text)}
.toolbar-menu-panel a:hover,.toolbar-menu-panel a.active{background:var(--surface);color:var(--accent)}
.view-menu-panel{min-width:180px}
.compare-menu-panel{min-width:280px;padding:10px;left:auto;right:0}
.compare-menu-panel label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px}
.compare-menu-panel select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:8px}
.compare-menu.is-active>summary{color:var(--accent)}
.more-menu{margin-left:auto}
.more-menu>summary{font-size:20px;padding:0 14px}
.more-menu-panel{left:auto;right:0;min-width:220px}
.flock-toolbar .column-menu{align-self:stretch}
.flock-toolbar .column-menu summary{min-height:43px;height:100%;font-size:12px;padding:0 12px}
.flock-toolbar .column-menu-panel{top:100%;left:auto;right:0}
.menu-caret{margin-left:6px;font-size:9px;color:var(--muted)}

/* Invoermodus: alleen velden die je zelf invult blijven zichtbaar. */
.data-table.input-mode [data-col-key="birds_present"],
.data-table.input-mode [data-col-key="lay_percentage"],
.data-table.input-mode [data-col-key="egg_weight_g"]{display:none!important}

@media(max-width:760px){
  .flock-toolbar{min-height:42px;overflow:visible}
  .flock-toolbar .back{padding:6px 8px}
  .flock-toolbar .flock-title{min-width:0;max-width:none;flex:1;padding:4px 7px}
  .flock-toolbar .flock-title strong{font-size:12px}
  .flock-toolbar .flock-title span{font-size:9px}
  .compact-toggle a{padding:0 8px;font-size:11px}
  .toolbar-menu>summary,.toolbar-button{padding:0 8px;font-size:11px;min-height:41px}
  .view-menu>summary{max-width:112px;overflow:hidden;text-overflow:ellipsis}
  .compare-menu>summary{font-size:0;width:38px;padding:0}
  .compare-menu>summary::before{content:'⇄';font-size:17px}
  .column-menu summary{font-size:0!important;width:38px;padding:0!important}
  .column-menu summary::before{content:'☷';font-size:17px}
  .more-menu>summary{width:34px;padding:0;font-size:20px}
  .toolbar-button{padding:0 7px}
  .toolbar-menu-panel{position:fixed;left:6px!important;right:6px!important;top:calc(var(--appbar-h) + 43px)!important;max-height:70vh;overflow:auto}
  .compare-menu-panel{min-width:0}
}

/* ========================================================================== */
/* v0.14 - vereenvoudigde bediening en compactere legkaart                   */
/* ========================================================================== */
.account-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.kiosk-navigation{display:flex;align-items:stretch;height:38px;border:1px solid var(--line)}.kiosk-navigation button,.kiosk-navigation a{display:grid;width:40px;place-items:center;border:0;border-right:1px solid var(--line);background:var(--surface);color:var(--text);font-size:20px;cursor:pointer}.kiosk-navigation a:last-child{border-right:0}.kiosk-navigation button:hover,.kiosk-navigation a:hover{color:var(--title);background:var(--surface-2)}
.account-actions .user-menu{margin-left:0}
.theme-icon{width:34px;height:34px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:18px;display:grid;place-items:center}
.theme-icon:hover{color:var(--text);background:var(--surface);border-color:var(--line)}

.home-head{margin-bottom:10px}
.home-section{margin-bottom:22px}.home-section>h2{margin:0 0 7px;font-size:15px;color:var(--muted);font-weight:500}
.home-archive{border:0}
.home-archive>summary{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 10px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer;list-style:none}
.home-archive>summary::-webkit-details-marker{display:none}
.home-archive>summary::before{content:'›';font-size:20px;line-height:1;transition:transform .12s}
.home-archive[open]>summary::before{transform:rotate(90deg)}
.home-archive>summary span{font-size:15px;font-weight:600;color:var(--text)}
.home-archive>summary small{margin-left:auto}
.home-archive[open]>summary{border-bottom-color:transparent}
.archive-row{border-left-color:var(--muted)}
.archive-row .home-flock-name strong{color:var(--muted)}
.quick-field-label{display:inline-flex;align-items:baseline;gap:4px}
.quick-field-label small{font-size:10px;color:var(--muted)}
.home-flock-list{border-top:1px solid var(--line)}
.home-flock-row{align-items:stretch;border:1px solid var(--line);border-top:0;border-left:4px solid var(--stall-accent,var(--accent));background:var(--bg);min-height:66px}
.home-flock-row:hover{background:var(--surface)}
.home-flock-main{align-items:stretch;flex:1;min-width:0}
.archive-row .home-flock-main{width:100%}
.home-flock-name,.home-meta{display:flex;flex-direction:column;justify-content:center;padding:8px 12px;border-right:1px solid var(--line);min-width:0}
.home-flock-name strong{color:var(--stall-accent,var(--title));font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-flock-name span,.home-meta span{color:var(--muted);font-size:10px;margin-top:2px}
.home-flock-name .flock-note-preview{margin-top:3px}
.home-meta strong{font-size:13px;font-weight:500;white-space:nowrap}
.quick-input-button{flex:0 0 82px;border:0;border-left:1px solid var(--line);background:var(--surface-2);color:var(--stall-accent,var(--accent));cursor:pointer;font-weight:600}
.quick-input-button:hover{background:var(--surface)}
.compact-empty{padding:16px}

.simple-flock-toolbar{--accent:var(--stall-accent,#73D37E);min-height:43px}
.simple-flock-toolbar .flock-title strong{color:var(--stall-accent,#73D37E)}
.main-view-toggle{display:flex;align-self:stretch;border-left:1px solid var(--line)}
.main-view-toggle a{display:flex;align-items:center;padding:0 14px;color:var(--muted);border-right:1px solid var(--line);font-size:12px}
.main-view-toggle a:hover{background:var(--surface);color:var(--text)}
.main-view-toggle a.active{color:var(--stall-accent,#73D37E);background:var(--surface);box-shadow:inset 0 -3px var(--stall-accent,#73D37E)}
.simple-flock-toolbar .toolbar-menu[open]>summary,.simple-flock-toolbar .toolbar-menu>summary:hover{color:var(--stall-accent,#73D37E)}
.simple-flock-toolbar .more-menu{margin-left:auto}

/* Persoonlijke kolomvolgorde */
.reorder-column-panel{width:min(360px,calc(100vw - 12px));min-width:0;max-width:calc(100vw - 12px)}
.fixed-column-note{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--muted);font-size:10px;white-space:normal;overflow-wrap:anywhere}
.column-choice{display:grid;grid-template-columns:minmax(0,1fr) 68px;align-items:center;border-bottom:1px solid var(--line)}
.column-choice label{border-bottom:0!important;min-width:0}
.column-move{display:grid;grid-template-columns:1fr 1fr;height:100%;border-left:1px solid var(--line)}
.column-move button{padding:0!important;text-align:center!important;color:var(--muted)!important;border-right:1px solid var(--line)!important;min-height:34px}
.column-move button:last-child{border-right:0!important}.column-move button:hover{color:var(--accent)!important}

/* Compactere dag- en weekregels */
.compact-data-table td{height:31px!important;font-size:12px}
.compact-data-table th{padding:5px 8px!important;font-size:11px;line-height:13px}
.compact-data-table .cell{height:30px!important;padding:3px 7px;font-size:13px}
.compact-data-table .c-age strong{font-size:12px;font-weight:600}
.compact-data-table .calculated{padding:0 7px!important}
.compact-data-table .sensor-triple{min-height:30px}
.compact-data-table .sensor-part{padding:1px 4px 2px;min-width:48px}
.compact-data-table .sensor-label{font-size:8px;line-height:9px}
.compact-data-table .sensor-part span.sensor-live-value,.compact-data-table .sensor-part>span{font-size:12px;line-height:15px}
.compact-data-table .sensor-mini{width:46px!important;min-width:46px!important;max-width:46px!important;height:16px!important;font-size:12px!important;line-height:15px!important;padding:0!important}
.compact-data-table .sensor-triple,.compact-data-table .weekly-sensor-triple{grid-template-columns:repeat(3,minmax(48px,max-content));min-width:146px}
.compact-data-table .compare-triple{grid-template-columns:repeat(3,minmax(56px,max-content));width:max-content;min-width:169px;max-width:100%;margin:0 auto}

/* Wekelijkse samenvattingsregel direct onder de dagelijkse regels. */
.week-summary-row td{background:var(--surface-2)!important;border-top:2px solid var(--week-line);font-weight:600;height:30px!important}
.week-summary-row td.c-date,.week-summary-row td.c-age{background:var(--surface-2)!important}
.week-summary-row .sensor-label{font-weight:400}
.week-summary-cell{padding:0 7px!important}
.summary-week-row{cursor:pointer}
.summary-week-row.week-selected td{box-shadow:inset 0 1px var(--accent),inset 0 -1px var(--accent);background:var(--surface)!important}

/* Opmerking is één klikbare cel; invoer gebeurt in een dialoog. */
.note-cell-button{width:100%;height:30px;border:0;background:transparent;color:var(--text);padding:3px 7px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.note-cell-button:hover{background:var(--field-focus)}

/* Dialogen */
.kp-dialog{border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0;width:min(560px,calc(100vw - 24px));box-shadow:0 22px 70px rgba(0,0,0,.5)}
.kp-dialog::backdrop{background:rgba(0,0,0,.55)}
.dialog-shell{padding:0;margin:0}.dialog-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:10px 12px}
.dialog-head>div{display:flex;flex-direction:column}.dialog-head small{color:var(--muted);margin-top:2px}.dialog-close{border:0;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}
.dialog-shell textarea{width:calc(100% - 24px);margin:12px;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:9px;resize:vertical}
.dialog-shell textarea:focus{outline:1px solid var(--accent)}
.dialog-actions{display:flex;justify-content:flex-end;gap:7px;padding:10px 12px;border-top:1px solid var(--line)}
.mortality-cell-editable{cursor:text}.mortality-cell-editable>input{width:100%;height:100%}.mortality-detail-cell{cursor:pointer}.mortality-detail-cell .mortality-detail-value{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}.mortality-dialog [hidden]{display:none!important}.mortality-contributor-list:empty{display:none}.mortality-contributor-list{display:grid;gap:6px;padding:14px 12px}.mortality-contributor-row{display:flex;justify-content:space-between;gap:20px;padding:7px 9px;border:1px solid var(--line);background:var(--surface)}.mortality-own{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;padding:0 12px 12px}.mortality-own label,.mortality-manual label{display:grid;gap:5px}.mortality-own input,.mortality-manual input{min-height:40px;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:7px 9px;font-size:16px}.mortality-manual{padding:0 12px 12px}.mortality-manual small{display:block;margin-top:5px;color:var(--muted)}
.spreadsheet td.cell-locked-other{position:relative;box-shadow:inset 0 0 0 2px var(--orange,#ed8b2f)!important;background:color-mix(in srgb,var(--orange,#ed8b2f) 16%,var(--surface))!important}.spreadsheet td.cell-locked-other::before{position:absolute;z-index:9;top:2px;right:2px;display:grid;width:18px;height:18px;place-items:center;border-radius:50%;background:var(--orange,#ed8b2f);color:#171717;content:attr(data-cell-lock-initials);font-size:10px;font-weight:800;line-height:18px;pointer-events:none}.spreadsheet td.cell-locked-other::after{position:absolute;z-index:10;right:2px;bottom:2px;max-width:calc(100% - 4px);padding:2px 5px;border:1px solid var(--orange,#ed8b2f);background:var(--bg);color:var(--orange,#ed8b2f);content:attr(data-cell-lock-owner);font-size:10px;line-height:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;opacity:0;pointer-events:none}.spreadsheet td.cell-locked-other:hover::after{opacity:1}
.dialog-result{padding:0 12px 8px;color:var(--muted);min-height:16px}


/* Stalkleur in instellingen */
.stall-setting-row{padding:9px 4px;border-bottom:1px solid var(--line)}.stall-color-dot{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:middle}
.summary-check{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:7px;color:var(--text)!important}.summary-check input{width:auto!important;accent-color:var(--accent)}

@media(max-width:760px){
  .account-actions{gap:3px}.theme-icon{width:32px;height:32px}
  .home-flock-row{min-height:0;align-items:stretch}
  .home-meta{padding:7px 9px}.home-updated{grid-column:1/-1}.quick-input-button{flex-basis:62px;writing-mode:vertical-rl;transform:rotate(180deg)}
  .main-view-toggle a{padding:0 9px;font-size:11px}
  .simple-flock-toolbar .flock-title{max-width:190px}
  .simple-flock-toolbar .compare-menu>summary{width:36px;font-size:0}.simple-flock-toolbar .compare-menu>summary:before{content:'⇄';font-size:16px}
  .reorder-column-panel{min-width:0}
  .compact-data-table td{height:32px!important}.compact-data-table .cell,.note-cell-button{height:31px!important}


}


/* ========================================================================== 
   v0.15 - compactere tabellen, duidelijke sensorhoofden en betere invoer
   ========================================================================== */
.compact-data-table td{height:27px!important;min-height:27px!important;vertical-align:middle;text-align:right}
.compact-data-table th{padding:4px 7px!important;font-size:10.5px;line-height:12px;vertical-align:bottom}
.compact-data-table .cell{height:26px!important;padding:2px 6px!important;font-size:12px;text-align:right}
.compact-data-table .note-cell-button{height:26px!important;padding:2px 6px}
.compact-data-table .sensor-triple{min-height:26px}
.compact-data-table .sensor-part{padding:0 5px;min-width:48px;justify-content:center}
.compact-data-table .sensor-part span.sensor-live-value,.compact-data-table .sensor-part>span{font-size:11.5px;line-height:14px}
.compact-data-table .sensor-mini{height:22px!important;line-height:14px!important;font-size:11.5px!important;padding:0 2px!important;text-align:right}
.compact-data-table .c-date{text-align:left!important}.compact-data-table .c-age{text-align:center!important}
.compact-data-table .c-age strong{font-size:12px;font-weight:600}
.compact-data-table .calculated{text-align:right!important}
.week-summary-row td{height:27px!important;text-align:right;background:var(--surface-2)!important}
.week-summary-row td.c-date{text-align:left!important}.week-summary-row td.c-age{text-align:center!important}
.week-summary-row .sensor-part{font-weight:600}
.summary-week-row td{height:27px!important;text-align:right}
.summary-week-row td.c-week{text-align:center!important}.summary-week-row td.c-weekdate{text-align:left!important}

/* Min/gem/max staat één keer boven de sensorkolom, niet in iedere dagcel. */
.sensor-head{padding-bottom:0!important}
.sensor-header-triple{display:grid;grid-template-columns:repeat(3,minmax(48px,1fr));margin:3px -7px 0;border-top:1px solid var(--line);color:var(--muted);font-size:8px;font-weight:400;line-height:13px}
.sensor-header-triple span{padding:1px 4px;border-right:1px solid var(--line);text-align:center}
.sensor-header-triple span:last-child{border-right:0}
.compact-data-table .sensor-triple,.compact-data-table .weekly-sensor-triple{grid-template-columns:repeat(3,minmax(48px,max-content));min-width:146px}
.future-row td{color:var(--muted-2)}
.future-row td.c-date,.future-row td.c-age{background:var(--bg)}
.future-row:hover td{background:var(--surface)!important}
.future-placeholder{color:var(--muted-2)}
.today-row td{box-shadow:inset 0 1px color-mix(in srgb,var(--accent) 45%,transparent),inset 0 -1px color-mix(in srgb,var(--accent) 45%,transparent)}
.partial-week td.c-week strong::after{content:' · lopend';font-size:9px;color:var(--muted);font-weight:400}

/* Palletgewicht is een directe handeling binnen het koppel. */
.pallet-entry-button{border-left:1px solid var(--line);white-space:nowrap;color:var(--muted)}
.pallet-entry-button.active{color:var(--stall-accent,#73D37E);box-shadow:inset 0 -3px var(--stall-accent,#73D37E);background:var(--surface)}


.layout-table select{width:100%;min-width:170px;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:7px}

@media(max-width:760px){
  .compact-data-table td{height:29px!important}.compact-data-table .cell,.compact-data-table .note-cell-button{height:28px!important}
  .quick-input-button{flex-basis:72px;writing-mode:horizontal-tb;transform:none;min-width:72px}


  .pallet-entry-button{font-size:0;width:38px;padding:0!important;justify-content:center}.pallet-entry-button::before{content:'⚖';font-size:16px}
}

/* ========================================================================== 
   v0.16 - grijzere toekomst, sleepbare kolommen en uitgebreidere eiercalculator
   ========================================================================== */
.future-row td{color:color-mix(in srgb,var(--muted-2) 72%,transparent)!important;background:color-mix(in srgb,var(--bg) 96%,var(--surface))!important}
.future-row td *{color:inherit!important}
.future-row:hover td{background:color-mix(in srgb,var(--surface) 72%,var(--bg))!important}

/* Min/gem/max staat uitsluitend in de kolomkop. Eventuele oude labels in tbody
   worden hard verborgen zodat cache/legacy markup geen dubbele labels geeft. */
.compact-data-table tbody .sensor-label{display:none!important}
.compact-data-table tbody .sensor-part::before,.compact-data-table tbody .sensor-part::after{content:none!important;display:none!important}

/* Kolommen slepen in plaats van pijltjestoetsen. */
.column-choice{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;border-bottom:1px solid var(--line);background:var(--bg)}
.column-choice label{border-bottom:0!important;min-width:0;padding-left:4px!important}
.column-drag-handle{height:100%;min-height:36px;border:0;border-right:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:grab;touch-action:none;font-size:15px;line-height:1}
.column-drag-handle:hover{color:var(--accent);background:var(--surface)}
.column-choice.is-dragging{opacity:.64;outline:1px solid var(--accent);position:relative;z-index:4}
.column-choice.is-dragging .column-drag-handle{cursor:grabbing}
body.kp-column-dragging{user-select:none}


/* ==========================================================================
   v0.17 - Ctrl+Z feedback en veilige historie-import
   ========================================================================== */
.kp-undo-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);z-index:5000;background:var(--surface-2);border:1px solid var(--line);color:var(--text);padding:8px 13px;opacity:0;pointer-events:none;transition:.14s ease;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:12px}
.kp-undo-toast.show{opacity:1;transform:translate(-50%,0)}

/* v0.20.2: na het verwijderen van de dubbele koppelkop past Vergelijk op de
   meeste telefoons weer als tekst. Alleen op zeer smalle schermen blijft het
   compacte pijlicoon uit de eerdere mobiele stijl actief. */
@media (min-width:340px) and (max-width:760px){
  .simple-flock-toolbar .compare-menu>summary{width:auto;font-size:11px;padding:0 8px}
  .simple-flock-toolbar .compare-menu>summary::before{content:none}
}
.kp-undo-toast.error{border-color:var(--orange);color:var(--orange)}

.history-import-panel{padding:0;overflow:hidden}
.history-import-top{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(220px,1fr) 150px;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.history-import-top label,.history-paste-label{display:flex;flex-direction:column;gap:5px;background:var(--bg);padding:10px;color:var(--muted);font-size:11px}
.history-import-top select,.history-import-top input,.history-mapping-table select{background:var(--surface);border:1px solid var(--line);color:var(--text);padding:7px;min-width:0}
.history-paste-label{border-bottom:1px solid var(--line)}
.history-paste-label textarea{width:100%;margin:0;background:var(--surface);border:1px solid var(--line);color:var(--text);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:15px;resize:vertical;white-space:pre}
.history-actions{display:flex;gap:7px;padding:10px;border-bottom:1px solid var(--line)}
.history-help{padding:0 10px 9px;margin:0;border-bottom:1px solid var(--line)}
.history-result{padding:9px 10px;min-height:20px;border-bottom:1px solid var(--line)}
.history-mapping-wrap,.history-preview-wrap,.history-check-wrap{padding:10px;border-bottom:1px solid var(--line)}
.history-mapping-wrap h2,.history-preview-wrap h2,.history-check-wrap h2{font-size:14px;margin:0 0 5px}
.history-mapping-table td,.history-mapping-table th{vertical-align:middle}
.history-mapping-table td:first-child{min-width:180px}.history-mapping-table td:first-child small{display:block;color:var(--muted);font-size:9px}
.history-mapping-table select{width:100%;min-width:220px}
.history-preview-scroll{max-height:330px}
.history-preview-table{white-space:nowrap;font-size:10px}
.history-preview-table td,.history-preview-table th{padding:4px 6px}
.history-preview-table .history-header-row td{color:var(--muted);background:var(--surface-2)}
.history-check-stats{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:8px 0}
.history-check-stats>div{background:var(--bg);padding:9px;display:flex;flex-direction:column}.history-check-stats strong{font-size:18px}.history-check-stats span{font-size:9px;color:var(--muted)}
.history-errors{margin:8px 0;padding:8px 8px 8px 28px;border:1px solid var(--orange);color:var(--orange);background:var(--surface)}
.history-change-preview{margin:5px 0 0;padding-left:22px;font-size:10px;color:var(--muted)}
.history-open-flock{margin-left:8px}

@media(max-width:760px){
  .history-import-top{grid-template-columns:1fr}
  .history-actions{overflow-x:auto}.history-actions .button,.history-actions .primary{white-space:nowrap}
  .history-check-stats{grid-template-columns:1fr 1fr}
  .history-mapping-table select{min-width:180px}
}

/* ========================================================================== 
   v0.18 - stabiele snelle invoer + expliciete importkoppelingen
   ========================================================================== */
.history-mapping-summary{margin:7px 0 9px;padding:8px 10px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:10px;line-height:1.55}
.history-mapping-summary strong{color:var(--text);font-weight:600}
.danger-subtle{border-color:color-mix(in srgb,var(--orange) 55%,var(--line))!important;color:var(--orange)!important}
.danger-subtle:hover{background:color-mix(in srgb,var(--orange) 8%,var(--surface))!important}

/* ========================================================================== 
   v0.20.4 - laatste gebruiksvriendelijkheidspunten in Totaal en Invoer
   ========================================================================== */
:root{--sensor-divider:rgb(51,51,49)}
html[data-theme="light"]{--sensor-divider:rgb(194,197,193)}

/* Het kolommenpaneel wordt aan het browservenster verankerd. Daardoor kunnen
   titel, uitleg en sleephandvat nooit links buiten beeld raken bij Windows-zoom. */
.flock-toolbar .column-menu-panel{
  position:fixed;left:6px;right:auto;top:calc(var(--appbar-h) + 42px);
  width:min(360px,calc(100vw - 12px));max-width:calc(100vw - 12px);
  max-height:calc(100vh - var(--appbar-h) - 54px);overflow-y:auto;overflow-x:hidden
}
.reorder-column-panel [data-column-list],.column-choice{width:100%;min-width:0}
.column-drag-handle{display:block!important;min-width:34px}

/* Vergelijkwaarden blijven klein en in stalkleur; een extra pijlsymbool voegt
   niets toe wanneer Vergelijk bovenaan al actief staat. */
.compare-triple::before{content:none!important;display:none!important}

/* Primaire kolomtitels in stalkleur, ondersteunende tekst rustig grijs. */
.compact-data-table thead .col-title{color:var(--accent);font-weight:600}
.sensor-heading{display:block;white-space:nowrap}
.sensor-heading .col-unit{display:inline;margin-left:3px;color:var(--muted);font-weight:400}
.sensor-part,.sensor-header-triple span{border-right-color:var(--sensor-divider)}

/* Alleen de datum blijft zichtbaar op toekomstige regels. Vandaag is juist
   duidelijk gemarkeerd met een zachte stalkleur en een volle linkerrand. */
.future-row td{background:color-mix(in srgb,var(--bg) 98%,var(--surface))!important}
.future-row td:not(.c-date)>*{visibility:hidden!important}
.future-row td:not(.c-date){color:transparent!important}
.future-row td.c-date{color:color-mix(in srgb,var(--muted) 72%,transparent)!important}
.future-row:hover td{background:color-mix(in srgb,var(--bg) 98%,var(--surface))!important}
.today-row td{background:color-mix(in srgb,var(--accent) 7%,var(--bg))!important;box-shadow:inset 0 1px color-mix(in srgb,var(--accent) 78%,transparent),inset 0 -1px color-mix(in srgb,var(--accent) 78%,transparent)}
.today-row td.c-date{color:var(--accent)!important;font-weight:700;box-shadow:inset 4px 0 var(--accent),inset 0 1px color-mix(in srgb,var(--accent) 78%,transparent),inset 0 -1px color-mix(in srgb,var(--accent) 78%,transparent)}

.summary-week-row.week-selected td,.week-summary-row.week-selected td{box-shadow:inset 0 1px var(--accent),inset 0 -1px var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))!important}

/* Automatisch (groen) en handmatig gecorrigeerd (oranje) zijn zichtbaar zonder
   extra tekst in elke compacte tabelcel. */
.sensor-live-value[data-kp-manual="0"]{box-shadow:inset 2px 0 color-mix(in srgb,var(--accent) 72%,transparent)}
.sensor-live-value[data-kp-manual="1"]{box-shadow:inset 2px 0 var(--warm);color:var(--warm)!important;font-weight:600}
.source-dot{display:inline-block;width:7px;height:12px;margin:0 4px 0 10px;vertical-align:-2px;background:var(--accent)}
.source-dot:first-child{margin-left:0}.source-dot.source-manual{background:var(--warm)}
.sensor-source-legend{color:var(--muted);font-size:10px}


/* ========================================================================== 
   v0.20.5 - uniforme weekbediening, invoerdialoog en rustige sensorgroepen
   ========================================================================== */
:root{--sensor-divider:rgb(78,78,74)}
html[data-theme="light"]{--sensor-divider:rgb(188,191,187)}

/* Geen statusstrepen in meetcellen. Bron en meettijd staan alleen in de
   hovertekst, zodat de tabel rustig blijft. */
.sensor-live-value[data-kp-manual="0"],.sensor-live-value[data-kp-manual="1"]{
  box-shadow:none;color:inherit!important;font-weight:inherit
}

/* Kop, dagwaarde, weekwaarde en vergelijkwaarde gebruiken exact hetzelfde
   drieluik. Alleen de interne scheidingen zijn afwijkend grijs. */
.compact-data-table th.sensor-group-head{padding-left:0!important;padding-right:0!important}
.sensor-group-head>.sensor-heading{padding-left:7px;padding-right:7px}
.sensor-heading .col-unit{display:block;margin-left:0;color:var(--muted);font-weight:400}
.sensor-group-head .sensor-heading .col-unit{display:inline;margin-left:3px}
.sensor-header-triple,.compact-data-table .sensor-triple,
.compact-data-table .weekly-sensor-triple,.compact-data-table .compare-triple{
  display:grid;grid-template-columns:repeat(3,minmax(58px,1fr));
  width:100%;min-width:174px;max-width:none;margin-left:0;margin-right:0
}
.sensor-header-triple{margin-top:3px}
.compact-data-table .sensor-part{min-width:0;padding-left:4px;padding-right:4px;border-right:1px solid var(--sensor-divider)}
.compact-data-table .sensor-part:last-child{border-right:0}
.compact-data-table .sensor-part>span,.compact-data-table .sensor-mini{
  width:100%!important;min-width:0!important;max-width:none!important;text-align:center!important
}
.sensor-header-triple span{border-right:1px solid var(--sensor-divider)}
.sensor-header-triple span:last-child{border-right:0}

.partial-week td.c-week strong::after{content:none!important;display:none!important}
.weekday-short{display:inline-block;width:19px;color:var(--muted);font-weight:500;text-transform:lowercase}
.week-summary-row{cursor:pointer}
.day-selected td{background:color-mix(in srgb,var(--accent) 13%,var(--bg))!important}
.quick-toolbar-button{color:var(--stall-accent,var(--accent));border-left:1px solid var(--line)}
.unsaved-dialog{width:min(470px,calc(100vw - 24px))}
.unsaved-dialog p{margin:0;padding:16px 12px;color:var(--text)}

/* ========================================================================== 
   v0.20.6 - rustige meetgroepen, uitgelijnde koppen en actuele week in beeld
   ========================================================================== */
:root{--sensor-inner-line:#666b66;--auto-cell:color-mix(in srgb,var(--surface) 82%,var(--bg))}
html[data-theme="light"]{--sensor-inner-line:#aeb3ae;--auto-cell:color-mix(in srgb,var(--surface) 72%,var(--bg))}

/* Het vergelijkpaneel hoort bij de browser, niet bij het horizontaal
   verschoven tabeldeel. Daardoor kan de eerste tekst op Windows nooit links
   worden afgesneden. */
.flock-toolbar .compare-menu-panel{
  position:fixed;left:6px;right:auto;top:calc(var(--appbar-h) + 42px);
  width:min(360px,calc(100vw - 12px));min-width:0;max-width:calc(100vw - 12px);
  padding:10px;overflow:visible
}
.compare-menu-panel form{display:grid;gap:9px}

/* Binnen een min/gem/max-groep is de scheiding bewust lichter grijs dan de
   gewone tabelranden. Elke waarde en ook elk leeg streepje staat exact midden. */
.sensor-header-triple span,.compact-data-table .sensor-part{
  border-right:1px solid var(--sensor-inner-line)!important;text-align:center!important
}
.sensor-header-triple span:last-child,.compact-data-table .sensor-part:last-child{border-right:0!important}
.compact-data-table .sensor-triple,.compact-data-table .weekly-sensor-triple,.compact-data-table .compare-triple{align-items:stretch}
.compact-data-table .sensor-part{display:flex;align-items:center;justify-content:center;min-height:26px;padding:0 4px!important}
.compact-data-table .sensor-part>span,.compact-data-table .sensor-mini{
  display:block;width:100%!important;margin:0!important;padding-left:0!important;padding-right:0!important;
  text-align:center!important;line-height:26px!important
}
.compact-data-table .lazy-cell{cursor:text;display:flex!important;align-items:center;justify-content:flex-end}
.compact-data-table .sensor-part>.lazy-cell{justify-content:center}
.compact-data-table .compare-triple>span{display:flex;align-items:center;justify-content:center;text-align:center!important}

/* Sensorwaarden en afgeleide waarden hebben dezelfde rustige grijze basis.
   Handmatig/automatisch en meettijd blijven beschikbaar via hovertekst. */
.compact-data-table td.calculated,.compact-data-table td.sensor-cell,
.compact-data-table td.week-summary-cell{background:var(--auto-cell)!important}
.compact-data-table .compare-value{width:100%;padding:0;text-align:inherit}
.compact-data-table td.empty-value{text-align:center!important}
.future-placeholder{display:block;text-align:center!important}
.future-week-summary td{color:var(--muted-2)!important;background:color-mix(in srgb,var(--surface-2) 55%,var(--bg))!important}
.future-week-summary td:not(.c-date)>*{visibility:hidden}

@media(max-width:760px){
  .flock-toolbar .compare-menu-panel{top:calc(var(--appbar-h) + 42px)}
}

/* ========================================================================== 
   v0.20.7 - compacte kop, helder raster en eenvoudige terugnavigatie
   ========================================================================== */
:root{
  --compact-table-line:#50534f;
  --sensor-inner-line:#30322f;
}
html[data-theme="light"]{
  --compact-table-line:#c1c5c0;
  --sensor-inner-line:#8c918b;
  --title:#23743a;
}

.appbar-back{
  display:flex;align-items:center;justify-content:center;align-self:stretch;
  width:34px;margin-left:-12px;color:var(--muted);font-size:24px;line-height:1
}
.appbar-back:hover{color:var(--title);background:var(--surface)}
.appbar-flock{padding-left:0;border-left:0}
.account-actions{margin-left:auto}

/* Gewone cellen hebben een lichter raster; binnen min/gem/max staat juist een
   donkerdere scheiding zodat het drieluik als één groep leest. */
.compact-data-table tbody td{border-right-color:var(--compact-table-line)!important;border-bottom-color:var(--compact-table-line)!important;vertical-align:middle}
.compact-data-table .sensor-part,.sensor-header-triple span{
  border-right-color:var(--sensor-inner-line)!important
}
.sensor-header-triple{border-top-color:var(--sensor-inner-line)!important}
.compact-data-table td.sensor-cell,.compact-data-table td.sensor-value-cell{padding:0!important;vertical-align:middle!important}
.compact-data-table td.sensor-cell>.sensor-triple,
.compact-data-table td.sensor-value-cell>.sensor-triple{
  min-height:26px;height:100%;align-items:center
}
.compact-data-table .sensor-part{height:100%;min-height:26px}
.compact-data-table .compare-triple{min-height:14px;align-items:center}

.compact-data-table .notes-cell,.compact-data-table .empty-note,
.compact-data-table .empty-note-button{text-align:center!important}
.compact-data-table .empty-note-button{display:flex;align-items:center;justify-content:center}

/* Toekomstige regels blijven leeg voor het huidige koppel, maar de kleine
   vergelijkwaarden van een oud koppel of normkaart blijven zichtbaar. */
.comparison-future-row td:not(.c-date)>*{visibility:visible!important}
.comparison-future-row .future-placeholder,
.comparison-future-row .sensor-live-value,
.comparison-future-row .derived-kpi>span:first-child,
.comparison-future-row td.calculated>span:first-child{visibility:hidden!important}
.comparison-future-row .compare-value,
.comparison-future-row .compare-triple,
.comparison-future-row .compare-triple *{visibility:visible!important;color:var(--accent)!important}
.future-summary-week td{color:var(--muted-2)}
.future-summary-week .compare-value,.future-summary-week .compare-triple{color:var(--accent)}
.future-week-summary .compare-value,.future-week-summary .compare-triple,
.future-week-summary .compare-triple *{visibility:visible!important;color:var(--accent)!important}

@media(max-width:760px){
  .appbar-back{width:28px;margin-left:-6px;font-size:21px}
  .simple-flock-toolbar .compare-menu>summary{
    width:104px!important;max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
}

/* ========================================================================== 
   v0.20.8 - normkaartbeheer, volledige stalkleur en compactere invoer
   ========================================================================== */
.stall-themed .brand-mark{background:var(--stall-accent)}
.stall-themed .brand>span:last-child,.stall-themed .appbar-flock strong{color:var(--stall-accent)}
.stall-themed .appbar-back:hover{color:var(--stall-accent)}

/* Ook afgesloten koppels houden hun stalkleur. Grijs zit al in de statusregel
   en het ingeklapte Archief; de kleur blijft nodig om de stal te herkennen. */
.archive-row{border-left-color:var(--stall-accent,var(--accent))}
.archive-row .home-flock-name strong{color:var(--stall-accent,var(--title))}

.c-daynum{left:var(--kp-day-left,0px);z-index:24!important;text-align:center!important}
.data-table thead .c-daynum{z-index:44!important;background:var(--surface-2)}
.data-table td.c-daynum{background:var(--surface)}
.week-summary-row td.c-daynum{background:var(--surface-2)!important}
.week-summary-row .week-label-candidate{display:none}
.week-summary-row .week-label-candidate.week-label-active{display:inline;white-space:nowrap}
.column-fixed-handle{height:100%;min-height:36px;display:grid;place-items:center;border-right:1px solid var(--line);background:var(--surface-2);color:var(--muted-2);font-size:11px}
.column-message{min-height:0;padding:0 10px;color:var(--warm);font-size:10px}
.column-message:not(:empty){padding-top:6px;padding-bottom:6px;border-bottom:1px solid var(--line)}

/* v0.21.1 - optionele verticale kleurverdeling per ingestelde kolom. */
.compact-data-table.heatmap-enabled td.heatmap-cell,
.compact-data-table.heatmap-enabled .sensor-part.heatmap-cell{
  background:var(--kp-heat-color)!important;
  transition:background-color .12s ease
}
.heatmap-toggle{color:var(--muted)}
.heatmap-toggle.active{color:var(--stall-accent,var(--accent));background:var(--surface);box-shadow:inset 0 -3px var(--stall-accent,var(--accent))}
.heatmap-settings-table input[type="color"]{width:42px;height:30px;padding:2px;border:1px solid var(--line);background:var(--bg);cursor:pointer}
.heatmap-settings-table .heatmap-check{text-align:center}
.heatmap-settings-table .heatmap-check input{width:18px;height:18px;accent-color:var(--title)}
@media(max-width:760px){.heatmap-toggle{font-size:10px!important;padding:0 5px!important}}

/* Normkaarten */
.page-head-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.norm-card-list{display:grid;gap:8px}
.norm-list-card{display:flex;justify-content:space-between;align-items:center;gap:18px}
.norm-list-card h2{margin:0 0 4px}.norm-list-card p{margin:0;color:var(--muted)}
.norm-list-meta{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:5px;text-align:right;white-space:nowrap}
.norm-list-meta strong{font-size:18px;color:var(--title)}.norm-list-meta span{font-size:10px;color:var(--muted)}.norm-list-meta small{grid-column:1/-1;color:var(--muted)}
.norm-editor{display:grid;gap:12px}.norm-meta-form{display:grid;grid-template-columns:2fr 1.4fr auto;gap:10px;padding:12px}
.norm-meta-form p{margin:0;display:flex;flex-direction:column;gap:5px}.norm-meta-form input[type="text"]{width:100%}
.norm-meta-form input,.norm-paste-panel textarea,.norm-grid input{background:var(--surface);border:1px solid var(--line);color:var(--text);padding:7px}
.norm-meta-form input:focus,.norm-paste-panel textarea:focus,.norm-grid input:focus{outline:1px solid var(--accent);border-color:var(--accent)}
.norm-meta-form p:last-child{justify-content:center}.norm-meta-form p:last-child label{display:flex;gap:7px;align-items:center}.norm-meta-form input[type="checkbox"]{width:auto}
.norm-meta-form .helptext{font-size:10px;color:var(--muted)}
.norm-paste-panel,.norm-grid-panel{padding:0}.norm-paste-panel .panel-title-row,.norm-grid-panel .panel-title-row{padding:10px 12px;border-bottom:1px solid var(--line)}
.norm-paste-panel h2,.norm-grid-panel h2{margin:0 0 3px;font-size:15px}.norm-paste-panel p,.norm-grid-panel p{margin:0}
.norm-paste-panel textarea{display:block;width:calc(100% - 24px);margin:12px;resize:vertical;white-space:pre;overflow:auto}
.norm-grid-wrap{max-height:58vh}.norm-grid{min-width:1120px}.norm-grid thead th{position:sticky;top:0;z-index:3;white-space:normal;min-width:120px}
.norm-grid thead th:first-child{left:0;z-index:4;min-width:76px}.norm-grid tbody th{position:sticky;left:0;z-index:2;background:var(--surface-2);padding:3px}
.norm-grid td{padding:3px}.norm-grid input{width:100%;min-width:104px;text-align:right}.norm-grid [data-norm-week-input]{min-width:64px;text-align:center;font-weight:600}
.sticky-form-actions{position:sticky;bottom:0;z-index:10;display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;background:var(--bg);border-top:1px solid var(--line)}

@media(max-width:760px){
  .norm-meta-form{grid-template-columns:1fr}.norm-list-card{align-items:flex-start}.page-head-actions{justify-content:flex-start}


}

/* v0.21 definitieve tabeloverride - moet na alle oudere compatibiliteitsregels staan. */
.compact-data-table .sensor-triple,.compact-data-table .weekly-sensor-triple,
.compact-data-table .compare-triple{grid-template-columns:repeat(3,minmax(46px,1fr))!important;min-width:140px!important}
.sensor-header-triple{grid-template-columns:repeat(3,minmax(46px,1fr))!important}

/* Gezamenlijke invoercomponenten, voor pc en telefoon. */
.stall-themed .brand-name{color:var(--text)!important}


/* Exact twee regels: titel + eenheid of min/gem/max. Geen gereserveerde derde regel. */
.compact-data-table thead th{height:34px!important;min-height:0;padding:2px 7px!important;vertical-align:middle!important;border-right-color:var(--compact-table-line)!important;box-shadow:0 1px 0 var(--compact-table-line)!important}
.compact-data-table thead th>.col-title{display:block;height:15px;line-height:15px;margin:0;white-space:nowrap;text-align:center;color:var(--stall-accent,var(--title))!important}
.compact-data-table thead th>.col-title:last-child{margin-bottom:13px!important}
.compact-data-table thead th>.col-unit{display:block;height:13px;line-height:13px;margin:0!important}
.compact-data-table thead th:not(.sensor-head)>span:not(.col-title){display:block;height:28px}
.compact-data-table thead th:not(.sensor-head)>span>.col-title{display:block;height:15px;line-height:15px;white-space:nowrap}
.compact-data-table thead th:not(.sensor-head)>span>.col-unit{display:block;height:13px;line-height:13px;margin:0}
.compact-data-table thead .sensor-heading{display:block;height:15px;line-height:15px;padding:0!important;margin:0;color:var(--title)!important}
.compact-data-table thead .sensor-heading .col-title{color:var(--stall-accent,var(--title))!important}
.compact-data-table thead .sensor-head:not(.sensor-group-head) .sensor-heading{height:28px}
.compact-data-table thead .sensor-head:not(.sensor-group-head) .sensor-heading .col-title{display:block;height:15px;line-height:15px;white-space:nowrap}
.compact-data-table thead .sensor-head:not(.sensor-group-head) .sensor-heading .col-unit{display:block;height:13px;line-height:13px}
.compact-data-table thead .sensor-group-head .sensor-heading .col-title,.compact-data-table thead .sensor-group-head .sensor-heading .col-unit{display:inline!important;line-height:15px!important}
.compact-data-table thead .sensor-header-triple{height:13px;line-height:13px;margin:0!important;border-top:1px solid var(--sensor-inner-line)}
.sensor-header-triple span{height:13px;line-height:13px;padding:0 4px!important}
.heatmap-settings-table input[inputmode="decimal"]{width:110px}
[data-export-choice][hidden]{display:none!important}
#export-confirm-dialog{max-width:min(540px,calc(100vw - 20px))}
#export-confirm-dialog p{padding:0 14px}
.export-option{display:flex;align-items:center;gap:9px;margin:0 14px 14px;color:var(--text)}
.export-option input{width:18px;height:18px;accent-color:var(--title)}

.compact-data-table thead .sensor-group-head .sensor-heading{display:flex!important;align-items:flex-start!important;justify-content:center}
.compact-data-table thead .sensor-group-head .sensor-heading .col-unit{margin-left:3px!important}
.release-list{display:grid;gap:9px;max-width:980px}.release-version{padding:0}.release-version>summary{cursor:pointer;padding:13px 15px;color:var(--title);font-size:16px;font-weight:750}.release-version-body{padding:0 18px 14px;border-top:1px solid var(--line)}.release-version-body h2{margin:14px 0 5px;font-size:14px}.release-version-body ul{margin:10px 0 0;padding-left:20px}.release-version-body li{margin:6px 0;line-height:1.45}