/* TOTNT — padronizacao estrutural responsiva, outubro 2026 */
html,body,#app{min-height:100%;width:100%}
body{overflow-x:hidden}
.layout{display:flex;align-items:stretch;min-height:100dvh;width:100%;max-width:none}
.sidebar{position:sticky;top:0;height:100dvh;min-height:0;overflow-y:auto;flex:0 0 235px;z-index:5}
.main{flex:1 1 0;min-width:0;width:0;max-width:none;margin:0!important;padding:clamp(20px,2.5vw,42px)!important;align-self:flex-start}
.main>header{align-items:center;margin:0 0 24px;min-height:52px}
.main>header>div{min-width:0}
.main>header h1{font-size:clamp(23px,2.1vw,32px);line-height:1.2;letter-spacing:-.8px;margin:0!important}
.main>header small,.main>header p{display:none!important}
.main>.filters{margin:0 0 22px!important;display:grid;grid-template-columns:minmax(150px,210px) minmax(180px,230px) minmax(220px,1fr);align-items:center;gap:12px}
.main>.filters select,.main>.filters input{min-width:0!important;width:100%!important;margin:0!important;height:44px}
.main>#body{min-width:0;width:100%}
.main #body .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.main #body .panels{grid-template-columns:repeat(2,minmax(0,1fr))}
.main #body .panel,.main #body .tile{min-width:0}
.layout:has(.sidebar .nav[data-page="vacancies"].active) .main>.filters{display:none!important}
.layout:has(.sidebar .nav[data-page="vacancies"].active) .main>header{margin-bottom:25px}

.sidebar nav{margin-top:34px}
.sidebar nav .nav{min-height:45px}
#body .vac-wrap,#body .bi{width:100%;max-width:none}
#body .vac-grid,#body .bi-grid{min-width:0}
#body .vac-panel,#body .bi-panel{min-width:0}
#body .vac-table{min-width:650px}
#body .vac-panel:has(.vac-table){overflow-x:auto}
@media(min-width:1700px){
 .sidebar{flex-basis:260px;padding:30px 20px}
 .main{padding:36px clamp(38px,3vw,64px)!important}
 .main #body .tiles{gap:18px}
 .main #body .panels{gap:18px;margin-top:18px}
}
@media(max-width:1150px){
 .sidebar{flex-basis:210px}
 .main{padding:24px!important}
 .main #body .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .main>.filters{grid-template-columns:repeat(2,minmax(0,1fr))}
 .main>.filters input{grid-column:1/-1}
}
@media(max-width:800px){
 .sidebar{flex-basis:185px;padding:22px 12px}
 .main{padding:20px!important}
 .main #body .panels,.main #body .vac-grid,.main #body .bi-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
 .layout{display:block}
 .sidebar{position:relative;width:100%;height:auto;min-height:0;overflow:visible;padding:15px}
 .sidebar nav{display:flex;gap:5px;overflow-x:auto;margin-top:16px;padding-bottom:5px;scrollbar-width:thin}
 .sidebar nav .nav{width:max-content;min-width:max-content;white-space:nowrap;margin:0;padding:11px 13px}
 .main{width:100%;padding:18px 14px 28px!important}
 .main>header{margin-bottom:20px;align-items:center}
 .main>.filters{grid-template-columns:1fr;gap:9px}
 .main>.filters input{grid-column:auto}
 .main #body .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .main #body .panels{grid-template-columns:1fr}
 .main #body .tile,.main #body .panel{padding:16px}
 .main #body .bi-kpis,.main #body .vac-kpis,.main #body .recruit-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:390px){
 .main #body .tiles,.main #body .bi-kpis,.main #body .vac-kpis,.main #body .recruit-kpis{grid-template-columns:1fr}
}