/* Desktop navigation state */
aside nav a.active{background:#1b3b39;color:#fff}
.mobile-logout{display:none}
.app{min-height:calc(100vh - 54px)}
.site-footer{margin-left:228px;padding:16px 34px 22px;color:#6d7b79;font-size:12px;text-align:center;border-top:1px solid #dfe7e4}

@media (max-width:900px){
  body{padding-bottom:calc(94px + env(safe-area-inset-bottom));overflow-x:hidden}
  aside{position:fixed;inset:auto 0 0 0;width:100%;height:auto;min-height:70px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));background:#102a2af7;border-top:1px solid #31504e;box-shadow:0 -8px 28px #102a2a24;z-index:100}
  aside .brand,aside .profile{display:none}
  aside nav{margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;width:100%;overflow:visible}
  aside nav a,.mobile-logout button{min-width:0;height:56px;padding:6px 1px;border:0;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;color:#a9c2bd;background:transparent;font-size:9px;line-height:1.1;text-align:center;white-space:nowrap}
  aside nav a svg{width:21px;height:21px}
  aside nav a.active{background:#1f4a45;color:#fff}
  aside nav a.active svg{color:#55d6a4}
  .mobile-logout{display:block;margin:0}
  .mobile-logout button{width:100%}
  .app{min-height:auto}
  .site-footer{margin-left:0;padding:18px 14px 24px;font-size:11px}
  .app{margin:0;padding:18px 14px 24px;max-width:none}
  .top{margin-bottom:18px;gap:14px}
  .top h1{font-size:24px}
  .top .actions,.top .filters{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .top .filters input,.top .filters select,.top .filters button,.top .actions .button{width:100%;min-width:0;justify-content:center}
  .top .filters>*:last-child:nth-child(3){grid-column:1/-1}
  .filterbar{display:grid;grid-template-columns:1fr 1fr;padding:12px;gap:9px}
  .filterbar input[type=search]{grid-column:1/-1;width:100%}
  .filterbar input,.filterbar select,.filterbar button{width:100%;min-width:0}
  .filterbar button{grid-column:1/-1;justify-content:center}
  .cards{grid-template-columns:1fr;gap:10px;margin:14px 0}
  .cards article{padding:16px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
  .cards .card-icon{grid-row:1/4;margin:0}
  .cards strong{font-size:23px;margin:3px 0}
  .grid{grid-template-columns:1fr;gap:12px}
  .panel{padding:15px;border-radius:11px}
  .panel-head{margin-bottom:14px}
  .chart{height:190px;gap:5px}
  .bar-group small{font-size:9px}
  .form-card{max-width:none}
  .form-grid{grid-template-columns:1fr;gap:14px}
  .form-grid .full{grid-column:auto}
  .form-footer{align-items:stretch;flex-direction:column;gap:14px}
  .form-footer button{width:100%;justify-content:center}
  .table-wrap{margin:0 -15px;padding:0 15px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:680px}
  th,td{padding:11px 8px}
  .row-actions{white-space:nowrap}
  .pagination{margin:16px 0 4px;gap:14px}
  .login{padding:18px;min-height:100svh}
  .login-card{padding:28px 22px}
}

@media (max-width:420px){
  .app{padding-left:10px;padding-right:10px}
  aside nav a{font-size:9px}
  aside nav a svg{width:20px;height:20px}
  .top .filters{grid-template-columns:1fr}
  .top .filters>*:last-child:nth-child(3){grid-column:auto}
}