/* Grouped sidebar navigation */
.sidebar{gap:22px}
nav{display:flex;flex-direction:column;gap:2px}
.nav-item{padding:7px 12px!important;gap:11px;font-size:14px;border-radius:9px;min-height:36px}
.nav-item .nav-icon{flex:none;width:20px;height:20px;font-size:0;display:grid;place-items:center;color:#9a9fa9}
.nav-item .nav-icon svg{width:19px;height:19px}
.nav-item .nav-label{font-size:inherit;width:auto;text-align:left;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item:hover .nav-icon{color:#6c717c}
.nav-item.active .nav-icon{color:#e97913}
.nav-group{margin-top:10px}
.nav-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:none;padding:6px 12px;border-radius:8px;font:700 12px Outfit,'IBM Plex Sans Thai',sans-serif;letter-spacing:0;color:#9a9fa9}
.nav-group-toggle:hover{color:#6c717c;background:#f8f9fa}
.nav-group-toggle .chevron{width:15px;height:15px;transition:transform .15s ease}
.nav-group-toggle[aria-expanded="false"] .chevron{transform:rotate(-90deg)}
.nav-group-items{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.nav-group.collapsed .nav-group-items{display:none}
.nav-group.has-active .nav-group-toggle{color:#e97913}
.nav-divider{height:1px;background:#eff0f2;margin:12px 8px}
/* Icon rail on narrow screens: every item visible, headings become thin dividers */
@media(max-width:900px){
  .nav-item{justify-content:center;padding:9px 0!important}
  .nav-item .nav-label{display:none}
  .nav-item .nav-icon svg{width:21px;height:21px}
  .nav-group{margin-top:6px;padding-top:6px;border-top:1px solid #eff0f2}
  .nav-group-toggle{display:none}
  .nav-group.collapsed .nav-group-items{display:flex}
  .nav-divider{margin:6px 4px}
  .user-chip{justify-content:center}.user-chip>span:last-child{display:none}
}
main{align-self:start;margin:0 auto}
/* "รายงาน" with its reports underneath (wide screens; narrow ones use the picker on the page) */
.nav-item.nav-has-sub{position:relative}
.nav-sub-toggle{margin-left:auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;color:#9a9fa9}
.nav-sub-toggle:hover{background:#eef0f3;color:#5b6070}.nav-sub-toggle .chevron{width:15px;height:15px;transition:transform .15s ease;transform:rotate(-90deg)}
.nav-sub-toggle[aria-expanded="true"] .chevron{transform:none}
.nav-sub{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 22px;padding-left:10px;border-left:1px solid #eceef1}
.nav-sub-cat{font:700 11px 'IBM Plex Sans Thai',sans-serif;color:#a3a7b1;margin:8px 0 2px 8px}
.nav-sub-item{border:0;background:none;text-align:left;padding:6px 8px;border-radius:7px;font-size:13px;color:#5b6070;line-height:1.35}
.nav-sub-item:hover{background:#f6f7f9;color:#30343d}.nav-sub-item.active{background:#fff3e7;color:#d5650f;font-weight:700}.nav-sub-item.tool{font-size:12px;color:#8a8f99}
@media(max-width:900px){.nav-sub,.nav-sub-toggle{display:none!important}}

/* ↻ update the page's data in place */
.topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.reload-button{width:40px;height:40px;font-size:20px;color:#6b7080;background:#fff;border:1px solid #e6e8ed;display:grid;place-items:center}
.reload-button:hover{color:#e07a1b;border-color:#f3c999}
.reload-button.spinning{animation:ew-spin .8s linear infinite;color:#e07a1b}
@keyframes ew-spin{to{transform:rotate(360deg)}}
@media(max-width:620px){.reload-button{width:34px;height:34px;font-size:17px}}