:root{--green:#204d2d;--green2:#2f6d3f;--green3:#dce8dd;--yellow:#f4b520;--yellow2:#ffd45f;--cream:#f7f4e8;--ink:#1d2b22;--muted:#66756a;--line:#d9e0da;--white:#fff;--danger:#a33d34;--shadow:0 12px 35px rgba(21,49,29,.09)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#f4f7f4;color:var(--ink)}a{color:inherit;text-decoration:none}.app{display:grid;grid-template-columns:250px 1fr;align-content:start;min-height:100vh}.sidebar{background:linear-gradient(180deg,#173c24,#235333);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;padding:8px 8px 24px}.brand-mark{width:42px;height:42px;border-radius:11px;background:var(--yellow);display:grid;place-items:center;color:#173c24;font-weight:900;font-size:21px;box-shadow:inset 0 -3px rgba(0,0,0,.09)}.brand strong{display:block;font-size:17px}.brand small{color:#d8eadc}.nav{display:grid;gap:7px}.nav a{padding:12px 13px;border-radius:10px;color:#dfece2;font-weight:650}.nav a:hover,.nav a.active{background:rgba(255,255,255,.1);color:#fff}.nav .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-right:10px}.side-foot{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px;border-top:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.14);z-index:2}.main{min-width:0}.topbar{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:5}.topbar h1{font-size:20px;margin:0}.pill{background:#fff8df;border:1px solid #f2d375;color:#77570b;padding:7px 11px;border-radius:999px;font-size:12px;font-weight:700}
.top-actions{display:flex;align-items:center;gap:10px}
.btn-ico{margin-right:6px;vertical-align:-2px}.content{padding:28px;max-width:1540px;margin:auto}.hero{background:linear-gradient(135deg,#214f2f,#367446);color:#fff;border-radius:18px;padding:25px 28px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:22px}.hero h2{margin:0 0 8px;font-size:28px}.hero p{margin:0;color:#dceade;max-width:760px}.hero-badge{background:var(--yellow);color:#183b23;padding:14px 18px;border-radius:14px;font-weight:800;white-space:nowrap}.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 6px 22px rgba(30,62,38,.05)}.card .label{color:var(--muted);font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.07em}.metric{font-size:27px;font-weight:850;margin-top:7px}.accent-top{border-top:4px solid var(--yellow)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:30px 0 12px}.section-head h2{margin:0;font-size:20px}.btn{appearance:none;border:0;border-radius:10px;padding:10px 14px;font:inherit;font-weight:750;cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center}.btn-primary{background:var(--yellow);color:#243618}.btn-secondary{background:#eef4ef;color:#254c2f;border:1px solid #cedbcf}.btn-danger{background:#fff0ee;color:var(--danger);border:1px solid #efd1cd}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.field{display:grid;gap:7px}.field label{font-size:13px;font-weight:750;color:#435348}.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid #cfd9d1;border-radius:9px;background:#fff;font:inherit;color:var(--ink);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#6d9a76;box-shadow:0 0 0 3px rgba(47,109,63,.1)}.field.span2{grid-column:span 2}.field.span3{grid-column:span 3}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 5px 20px rgba(28,57,35,.05)}table{border-collapse:collapse;width:100%;min-width:760px}th{background:#245334;color:#fff;text-align:left;font-size:12px;letter-spacing:.03em;padding:11px 12px;position:sticky;top:0;white-space:nowrap}td{padding:10px 12px;border-bottom:1px solid #e4e9e5;font-size:13px;white-space:nowrap}tbody tr:nth-child(even){background:#f8faf8}tfoot td{font-weight:850;background:#ecf3ed;border-top:2px solid #9cb6a1}.number{text-align:right;font-variant-numeric:tabular-nums}.zero{color:#a1aaa3}.report-table th.date{min-width:105px;text-align:right}.report-table td.total,.report-table th.total{background:#fff2c7;color:#3a3a22;font-weight:850}.report-table tr.grand td{background:#dce9de;font-weight:850}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.toolbar .field{min-width:160px}.notice{padding:12px 14px;border-radius:10px;background:#edf7ef;border:1px solid #c9e0cd;color:#275133;margin-bottom:16px}.muted{color:var(--muted)}.small{font-size:12px}.kpi-row{display:flex;justify-content:space-between;gap:20px;align-items:end}.mobile-bar{display:none}.copy-flash{position:fixed;right:22px;bottom:22px;background:#173d24;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);z-index:20}
@media(max-width:980px){.app{grid-template-columns:1fr}.sidebar{display:none}.mobile-bar{display:flex;align-items:center;gap:12px}.chart-grid{grid-template-columns:1fr}.grid.cards{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.field.span3{grid-column:span 2}.topbar{padding:0 16px}.content{padding:18px}.hero{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.grid.cards{grid-template-columns:repeat(2,1fr);gap:12px}.form-grid{grid-template-columns:1fr}.field.span2,.field.span3{grid-column:span 1}.hero h2{font-size:23px}.topbar h1{font-size:17px}}

/* ---- Login page ---- */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#173c24,#2f6d3f);padding:20px}
.login-wrap{width:100%;max-width:400px}
.login-card{background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:28px 26px}
.login-brand{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.login-brand .brand-mark{width:44px;height:44px;border-radius:12px;background:#f4b520;display:grid;place-items:center;color:#173c24;font-weight:900;font-size:20px;box-shadow:inset 0 -3px rgba(0,0,0,.09)}
.login-brand strong{display:block;font-size:17px}
.login-brand small{color:#66756a}
.login-card h1{margin:0 0 6px;font-size:22px}
.login-card .muted{color:#66756a;font-size:13px;margin:0 0 16px}
.login-card .field{display:grid;gap:6px;margin-bottom:14px}
.login-card .field label{font-size:12px;color:#66756a;font-weight:700}
.login-card .field input,.login-card .field select{min-height:44px;border:1px solid #d9e0da;border-radius:10px;padding:9px 11px;font:inherit}
.login-btn{width:100%;margin-top:4px}
.login-error{margin-bottom:14px}
.login-foot{text-align:center;color:#cfe3d4;font-size:12px;margin-top:16px}

/* ---- Click feedback on all buttons ---- */
.btn,button,.hero-badge,.nav a,.hamburger,.side-out,.pw-eye{transition:transform .12s ease,filter .12s ease,background .12s ease}
.btn:active,button:active,.hero-badge:active,.nav a:active,.hamburger:active,.side-out:active,.pw-eye:active{transform:scale(.94);filter:brightness(.94)}
@media(hover:hover){
.btn-primary:hover,.hero-badge:hover{filter:brightness(1.07);box-shadow:0 5px 14px rgba(150,100,0,.25)}
.btn-secondary:hover{filter:brightness(.95);box-shadow:0 3px 10px rgba(21,49,29,.12)}
.btn-danger:hover{filter:brightness(.9);box-shadow:0 3px 10px rgba(163,61,52,.28)}
.pw-eye:hover{filter:brightness(.93)}
}

/* ---- Password field + eye toggle ---- */
.pw-wrap{display:flex;align-items:center;gap:6px}
.pw-wrap input[type=password],.pw-wrap input[type=text]{flex:1;min-width:0}
.pw-eye{flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#66756a;display:grid;place-items:center;cursor:pointer;padding:0}
.pw-eye:hover{color:var(--ink);border-color:#b9c6bc}

/* The hidden attribute must beat author display rules (e.g. .field{grid}). */
[hidden]{display:none !important}

/* ---- Dynamic staff-username reveal on login ---- */
@keyframes pw-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.login-card #usernameRow:not([hidden]){animation:pw-reveal .18s ease}

/* ---- Modal ---- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(15,30,19,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.3);padding:24px;width:100%;max-width:380px;animation:modal-pop .18s ease}
@keyframes modal-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.modal-card h3{margin:0 0 6px;font-size:18px}
.modal-card .muted{font-size:13px;margin:0 0 16px}
.modal-card .field{display:grid;gap:6px;margin-bottom:16px}
.modal-card .field label{font-size:12px;font-weight:700;color:var(--muted)}
.modal-card .field input{min-height:44px;border:1px solid #d9e0da;border-radius:10px;padding:9px 11px;font:inherit}
.modal-card .actions{justify-content:flex-end}
/* Wide modals use a 6-col grid with labeled field groups */
.modal-card.wide{max-width:640px}
.grid6{grid-template-columns:repeat(6,1fr);gap:14px}
.grid6 .field{margin-bottom:0;margin-left:36px;margin-right:36px}
.grid6 input,.grid6 select,.grid6 textarea{min-width:0;width:100%;box-sizing:border-box}
.grid6 .f1{grid-column:span 1}
.grid6 .f2{grid-column:span 2}
.grid6 .f3{grid-column:span 3}
.grid6 .f6{grid-column:span 6}
.grid6 .glabel{grid-column:1/-1;display:flex;align-items:center;gap:16px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green2);margin-top:20px;margin-bottom:8px}
.grid6 .glabel::before{content:"";flex:0 0 20px;border-top:1px solid #e2eae2}
.grid6 .glabel::after{content:"";flex:1;border-top:1px solid #e2eae2}
.grid6 .glabel:first-child{margin-top:16px}
.grid6 + .actions{margin-right:36px}
.compare-label{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green2);margin:22px 0 10px}
.compare-label::after{content:"";flex:1;border-top:1px solid #e2eae2}
.zone-busy{opacity:.45;pointer-events:none;transition:opacity .15s}
th.sortable{cursor:pointer;user-select:none}
th.sortable::after{content:"↕";margin-left:5px;font-size:10px;opacity:.35}
th.sortable[data-dir=asc]::after{content:"↑";opacity:.95}
th.sortable[data-dir=desc]::after{content:"↓";opacity:.95}
@media(hover:hover){th.sortable:hover{background:#2f6d44}}

/* ---- Collapsible production detail rows ---- */
.det-toggle{width:22px;height:22px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--green);font-weight:800;font-size:13px;line-height:1;cursor:pointer;vertical-align:-4px;margin-right:6px}
.det-toggle:hover{background:#eef4ee;border-color:#b9c6bc}
.det-toggle-sub{margin-right:4px}
tr.det-mill td{background:#f2f7f2;font-weight:600}
tr.det-sub td{color:var(--ink)}
tr.det-sub td:nth-child(2){padding-left:22px}
tr.det-sub2 td{background:#f8faf8;color:#43534a;font-size:13px}
.det-run{padding-left:40px}

/* ---- Print view: letterhead report for PDF / paper ---- */
#print-view{display:none}
.print-opts{display:grid;gap:10px;margin-bottom:18px}
.print-opt{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;cursor:pointer;transition:border-color .12s,background .12s}
.print-opt:hover{border-color:#b9c6bc}
.print-opt:has(:checked){border-color:var(--green2);background:#f3f8f3}
.print-opt input{width:18px;height:18px;accent-color:var(--green2);flex:none}
.print-opt span{font-size:13.5px;font-weight:650}
.print-opt small{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:1px}
@media print{
body{background:#fff}
.app{display:none!important}
#print-view{display:block;color:var(--ink)}
#print-view.friendly{filter:grayscale(1);padding-right:8px}
.pv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:3px solid var(--green);padding-bottom:14px;margin-bottom:18px}
.pv-brand{display:flex;gap:10px;align-items:center}
.pv-brand .brand-mark{width:38px;height:38px;font-size:18px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.pv-brand strong{display:block;font-size:16px}
.pv-brand small{color:var(--muted);font-size:11px}
.pv-meta{text-align:right}
.pv-meta h2{margin:0 0 4px;font-size:19px}
.pv-meta p{margin:0;font-size:12.5px;color:var(--muted)}
#print-view .chart-grid{display:grid!important;grid-template-columns:1.6fr 1fr;gap:14px;margin-bottom:18px}
#print-view .chart-card{break-inside:avoid;box-shadow:none;border:1px solid var(--line)}
#print-view .chart-wrap{overflow:visible}
#print-view .chart-wrap svg{min-width:0}
#print-view .hbar-fill,#print-view .chart-bar,#print-view .pill{print-color-adjust:exact;-webkit-print-color-adjust:exact}
#print-view .table-wrap{overflow:visible;margin-bottom:18px}
#print-view table{width:100%;border-collapse:collapse}
#print-view td,#print-view th{print-color-adjust:exact;-webkit-print-color-adjust:exact}
#print-view .compare-label{margin:16px 0 8px}
.pv-foot{display:flex;justify-content:space-between;margin-top:16px;padding-top:10px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted)}
}
@media(max-width:980px){.grid6{grid-template-columns:repeat(2,1fr)}.grid6 .f2,.grid6 .f3{grid-column:span 1}.grid6 .f6{grid-column:span 2}}

/* ---- Table action cells ---- */
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.row-actions form{display:contents}

/* ---- Button busy state ---- */
.pw-spin{width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:pw-rot .65s linear infinite}
@keyframes pw-rot{to{transform:rotate(360deg)}}
.btn.is-busy,.btn[disabled]{opacity:.75;cursor:wait}

/* ---- Sidebar footer ---- */
.side-user{display:flex;gap:10px;align-items:center}
.side-avatar{width:38px;height:38px;flex:none;border-radius:10px;background:var(--yellow);color:#173c24;display:grid;place-items:center;font-weight:900;font-size:14px;box-shadow:inset 0 -3px rgba(0,0,0,.09)}
.side-user strong{display:block;font-size:13px;color:#fff}
.side-user small{display:block;color:#bcd0c0;font-size:11px;margin-top:2px}
.side-out{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;margin-top:12px;padding:9px 10px;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:#ffd45f;font-weight:700;font-size:12.5px}
.side-out:hover{background:rgba(255,255,255,.08);color:#ffe082}

/* ---- Mobile bar, hamburger, slide-out drawer ---- */
.mobile-bar{position:sticky;top:0;z-index:45;background:linear-gradient(180deg,#173c24,#235333);color:#fff;padding:12px 16px;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.hamburger{width:42px;height:42px;flex:none;position:relative;margin-left:auto;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.06);cursor:pointer;padding:0}
.hamburger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:#fff;transition:top .22s ease,transform .22s ease,opacity .15s ease}
.hamburger span:nth-child(1){top:13px}
.hamburger span:nth-child(2){top:20px}
.hamburger span:nth-child(3){top:27px}
body.nav-open .hamburger span:nth-child(1){top:20px;transform:rotate(45deg)}
body.nav-open .hamburger span:nth-child(2){opacity:0}
body.nav-open .hamburger span:nth-child(3){top:20px;transform:rotate(-45deg)}
.brand-mini{display:flex;align-items:center;gap:10px}
.brand-mini .brand-mark{width:32px;height:32px;border-radius:9px;font-size:15px}
.brand-mini strong{font-size:15px}
.scrim{position:fixed;inset:0;z-index:39;background:rgba(15,30,19,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .22s ease}
.drawer{position:fixed;top:0;bottom:0;left:0;width:276px;max-width:84vw;z-index:40;background:linear-gradient(180deg,#173c24,#235333);color:#fff;padding-top:74px;display:flex;flex-direction:column;transform:translateX(-105%);transition:transform .26s cubic-bezier(.32,.72,.28,1)}
.drawer .brand{display:none}
.drawer-scroll{flex:1;overflow-y:auto;padding:0 16px 16px}
.drawer-foot{flex:none;border-top:1px solid rgba(255,255,255,.16);padding:14px 16px 18px;background:#1d452c}
body.nav-open .drawer{transform:none}
body.nav-open .scrim{opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}

/* ---- Tables: keep every row one line tall ---- */
td.notes{max-width:220px;overflow:hidden;text-overflow:ellipsis}

/* ---- At-a-glance charts ---- */
.chart-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin:18px 0}
.chart-wide{grid-column:1/-1}
.hbars-cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
td.wood-name{padding-left:26px;color:var(--muted);font-size:12.5px;white-space:nowrap}
tr.wood-sub td{background:#fafcfa}
tr.grand.wood-sub td{background:#eef4ee;font-weight:600}
@media(hover:hover){
tbody td{transition:background-color .12s ease}
tbody tr:hover td{background:#eef4ee}
tbody tr.wood-sub:hover td{background:#e4efe4}
tbody tr.grand:hover td{background:#dfe9df}
}
.chart-card h3{margin:0;font-size:15px}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.chart-head-side{display:flex;align-items:center;gap:10px}
.chart-nav{display:flex;gap:4px}
.nav-arrow{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:5px 9px;font-size:14px;line-height:1}
.chart-wrap{overflow-x:auto}
.chart-wrap svg{display:block;width:100%;height:auto;min-width:340px}
.chart-bar{fill:var(--green2)}
.chart-bar:hover{fill:var(--green)}
.chart-val{font-size:12px;font-weight:700;fill:var(--ink);text-anchor:middle}
.chart-lab{font-size:11px;fill:var(--muted);text-anchor:middle}
.chart-dow{font-size:9px;font-weight:700;letter-spacing:.04em;fill:var(--muted);opacity:.75;text-anchor:middle}
.chart-axis{stroke:var(--line);stroke-width:1.5}
.chart-empty{font-size:13px;fill:var(--muted);text-anchor:middle}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1.5px dashed var(--line);border-radius:12px;background:#fafcfa;padding:26px 18px;font-size:13.5px}
.empty-state .empty-ico{font-size:26px;line-height:1}
.empty-state .muted{font-size:12.5px}
.hbars{display:grid;gap:14px;align-content:start}
.hbar-top{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;margin-bottom:5px}
.hbar-top .muted{font-weight:600;font-size:12px}
.hbar-track{height:10px;border-radius:6px;background:#eef2ee;overflow:hidden}
.hbar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--green2),var(--yellow))}
.chart-open-btn{display:none}
.chart-close{display:none}
@media(max-width:980px){
.chart-open-btn{display:inline-flex}
.chart-close{display:inline-flex;align-self:flex-end}
.chart-grid{display:none}
body.charts-open .chart-grid{display:flex;flex-direction:column;position:fixed;inset:0;z-index:60;gap:14px;background:#f4f7f4;padding:16px;overflow-y:auto;margin:0}
}

/* ---- Two-column page layouts (settings, users) ---- */
.two-col{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr)}
@media(max-width:980px){.two-col{grid-template-columns:1fr}}

/* ---- Tables -> individual cards on phones (.m-cards) ---- */
@media(max-width:600px){
.m-cards-wrap{background:transparent;border:0;box-shadow:none;overflow:visible}
table.m-cards{min-width:0}
.m-cards thead{display:none}
.m-cards tbody tr{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-bottom:14px;padding:6px 2px;overflow:hidden}
.m-cards tbody tr:last-child{margin-bottom:0}
.m-cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;white-space:normal;text-align:right;border-bottom:1px solid #eef2ef}
.m-cards td:last-child{border-bottom:0}
.m-cards td::before{content:attr(data-label);flex:none;text-align:left;font-weight:750;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.m-cards td:first-child{background:#f2f7f2;justify-content:flex-start;text-align:left;font-size:14px}
.m-cards td:first-child::before{display:none}
.m-cards .row-actions{margin-left:auto}
}

/* ---- Visually hidden but present for password managers ---- */
.vhide{position:absolute!important;opacity:0;pointer-events:none;height:0;overflow:hidden;margin:0;padding:0;border:0}

/* ---- Topbar: centered wide date pill + far-right print ---- */
.topbar .top-date{position:absolute;left:50%;transform:translateX(-50%);padding:10px 34px;font-size:13.5px;letter-spacing:.02em}
.topbar .btn-print{padding:12px 28px;font-size:13.5px}
@media(max-width:980px){.topbar .top-date{position:static;transform:none;padding:7px 14px;font-size:12px;margin-left:auto}}

/* ---- Searchable size combobox (entry form) ---- */
.combo{position:relative}
.combo .combo-in{width:100%;padding:11px 12px;border:1px solid #cfd9d1;border-radius:9px;background:#fff;font:inherit;color:var(--ink);outline:none}
.combo .combo-in:focus{border-color:#6d9a76;box-shadow:0 0 0 3px rgba(47,109,63,.1)}
.combo-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;max-height:280px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 45px rgba(21,49,29,.18);padding:4px}
.combo-group{position:sticky;top:0;background:#fff;padding:7px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.combo-item{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:13.5px;text-align:left;cursor:pointer;color:var(--ink)}
.combo-item:hover{background:#eef4ee}
.combo-item small{white-space:nowrap}

/* ---- Chart legend ---- */
.chart-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.chart-legend .chip{position:relative;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer;background:#fff;user-select:none;transition:opacity .12s,background .12s}
.chart-legend .chip:hover{background:#f2f7f2}
.chart-legend .chip input{position:absolute;opacity:0;pointer-events:none}
.chart-legend .chip:has(input:not(:checked)){opacity:.38}
.chart-legend .chip i{display:inline-block;width:11px;height:11px;border-radius:3px}
.chart-legend .chip-sep{width:1px;align-self:stretch;background:var(--line);margin:0 6px}
.chart-legend .sw-bf{background:var(--green)}
.chart-legend .sw-pcs{background:var(--green);opacity:.45}
.key-dot{display:inline-block;width:10px;height:10px;border-radius:3px}
@media print{#print-view .chip{cursor:default;border-color:#d5d9d5}}

/* ---- Status pills + checkbox label ---- */
.pill.ok{background:#e8f4ea;border-color:#b9dcc0;color:#20502a}
.pill.off{background:#f1f1ee;border-color:#d5d9d5;color:#8a948c}
.field .check{display:flex;align-items:center;gap:10px;font-weight:650;font-size:13.5px;color:var(--ink)}
.field .check input{width:18px;height:18px;margin:0}

/* ---- Small-screen polish ---- */
@media(max-width:600px){
.section-head{flex-direction:column;align-items:stretch;gap:10px}
.section-head .actions{margin-top:0;width:100%}
.section-head .actions .btn{flex:1 1 45%}
.hero{padding:20px 18px}
.grid.cards .card{padding:14px 16px}
.grid.cards .metric{font-size:22px}
.toolbar .field{flex:1 1 100%}
.toolbar>.btn{width:100%}
}

/* ---- Tip / info callout ---- */
.tip-card{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.tip-icon{width:40px;height:40px;flex:none;border-radius:11px;background:var(--yellow);color:#173c24;display:grid;place-items:center;box-shadow:inset 0 -3px rgba(0,0,0,.09)}
.tip-card strong{display:block;font-size:14.5px;margin-bottom:4px}
.tip-card p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}