/* 29 Oct 2026: phone burger menu (<=768px). Desktop unchanged. */
#burger,#bmenu,#bback{display:none}
@media (max-width:768px){
 header{flex-wrap:nowrap;padding:6px 6px;gap:4px}
 header .brand{white-space:nowrap;font-size:0;flex:0 0 auto}header .brand b{font-size:12px}
 #nav>button{font-size:13px;padding:5px 6px!important}header .brand b{padding:2px 4px!important}#nav>#bell{margin-left:auto}#nav>#burger{padding:5px 8px!important}
 #nav:not([hidden]){display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;align-items:center;gap:3px;scrollbar-width:none;flex:1 1 auto;min-width:0}
 #nav::-webkit-scrollbar{display:none}
 #nav>button{display:none;white-space:nowrap;flex:0 0 auto;margin:0}
 #nav>button[data-v="board"],#nav>button[data-v="tasks"],#nav>button[data-v="projects"],#nav>#bell,#nav>#burger{display:inline-flex;align-items:center}
 #nav>button[hidden]{display:none!important}
 #burger{padding:6px 9px}
 #bback.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}
 #bmenu{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:min(82vw,320px);background:#C8102E;color:#fff;z-index:51;transform:translateX(100%);transition:transform .2s ease;overflow-y:auto;padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
 #bmenu.open{transform:none;box-shadow:-4px 0 18px rgba(0,0,0,.3)}
 #bmenu .bh{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 10px;font-weight:700}
 #bmenu .bx{background:transparent;border:0;color:#fff;font-size:26px;line-height:1;padding:4px 10px;cursor:pointer}
 #bmenu h4{margin:14px 16px 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
 #bmenu .bi{display:block;width:100%;text-align:left;background:transparent;color:#fff;border:0;border-top:1px solid rgba(255,255,255,.15);padding:14px 18px;font-size:16px;min-height:48px;cursor:pointer}
 #bmenu .bi.on{background:rgba(0,0,0,.2)}
 #bmenu .bs{margin-top:auto;border-top:1px solid rgba(255,255,255,.4)}
}

/* 30 Oct 2026: department section headers in the desktop nav */
#nav .dh{display:inline-flex;align-items:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin:0 2px 0 10px;white-space:nowrap}#nav .dh:first-of-type{margin-left:0}
#nav:not([hidden]){display:flex;flex-wrap:wrap;align-items:center}
@media (max-width:768px){#nav .dh{display:none}}

.viewbar{background:#fff4d6;color:#5a4500;font-size:13px;padding:6px 12px;border-bottom:1px solid #f0d98c}

/* 30 Oct 2026 (Marc t1399u): desktop department tiles with dropdowns (>768px). Original buttons stay in the DOM as the source of truth. */
#ntiles{display:none}
@media (min-width:769px){
 #nav:not([hidden]){flex-wrap:nowrap;gap:6px}
 #nav>button:not(#bell):not(#logout),#nav .dh{display:none!important}
 #ntiles{display:flex;gap:6px;align-items:center;order:0}
 #nav>#bell,#nav>#logout{order:999}#nav>#bell{margin-left:10px}
 .nt{position:relative}
 .ntb{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:6px;padding:8px 14px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
 .ntb:hover,.nt.open .ntb{background:rgba(255,255,255,.25)}
 .nt.cur .ntb{background:#fff;color:#C8102E;border-color:#fff}
 .ntb .car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.8}
 .tc{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#fff;color:#C8102E;font-size:11px;font-weight:700;text-align:center;line-height:18px}
 .nt.cur .ntb .tc{background:#C8102E;color:#fff}
 .ndd{display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:210px;background:#fff;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.22);padding:6px 0;z-index:60}
 .nt.open .ndd{display:block}
 .ndi{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:9px 14px;font-size:14px;color:#222;cursor:pointer}
 .ndi:hover,.ndi:focus{background:#fbe9ec;outline:none}.ndi.on{color:#C8102E;font-weight:700;border-left:3px solid #C8102E;padding-left:11px}
 .ndi .tc{background:#C8102E;color:#fff}
}
@media (max-width:768px){
 #bmenu .bacc{border-top:1px solid rgba(255,255,255,.2)}
 #bmenu .bacc summary{list-style:none;display:flex;align-items:center;gap:8px;padding:14px 16px;font-weight:700;font-size:15px;cursor:pointer;min-height:48px;box-sizing:border-box}
 #bmenu .bacc summary::-webkit-details-marker{display:none}
 #bmenu .bacc summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);transition:transform .15s}
 #bmenu .bacc[open] summary::after{transform:rotate(-135deg)}
 #bmenu .bacc .bi{padding-left:30px;background:rgba(0,0,0,.08)}#bmenu .bacc .bi.on{background:rgba(0,0,0,.25)}
 #bmenu .tc{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#fff;color:#C8102E;font-size:11px;font-weight:700;text-align:center;line-height:18px}
}