/* ================================================================
   EduCantina 4.0.1 — Layout Base e Dashboard
   Fundação visual segura para a reconstrução módulo por módulo.
   ================================================================ */
:root{
  --ec4-navy-950:#061E33;
  --ec4-navy-900:#0A2E4D;
  --ec4-navy-800:#123B63;
  --ec4-blue-600:#1E6CFB;
  --ec4-blue-100:#EAF2FF;
  --ec4-green-600:#16B84E;
  --ec4-green-100:#E9F9EE;
  --ec4-purple:#7454D8;
  --ec4-orange:#F59E0B;
  --ec4-red:#EF4444;
  --ec4-bg:#F4F7FA;
  --ec4-surface:#FFFFFF;
  --ec4-text:#10233A;
  --ec4-muted:#718196;
  --ec4-border:#E2E9EF;
  --ec4-shadow:0 5px 18px rgba(10,46,77,.055);
  --ec4-radius:14px;

  --primary:var(--ec4-green-600);
  --primary-dark:#10933C;
  --body-bg:var(--ec4-bg);
  --text:var(--ec4-text);
  --muted:var(--ec4-muted);
  --border:var(--ec4-border);
}
html,body,button,input,select,textarea{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
}
body{background:var(--ec4-bg)!important;color:var(--ec4-text)!important}
.layout,.main,.content{background:var(--ec4-bg)!important}

/* Estrutura */
.side{
  background:linear-gradient(180deg,var(--ec4-navy-900),var(--ec4-navy-950))!important;
  border:0!important;
  box-shadow:9px 0 30px rgba(6,30,51,.08)!important;
}
.brandbox{
  min-height:84px!important;
  padding:15px 16px!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
}
.brandbox .brandlogo{
  width:40px!important;height:40px!important;
  border-radius:12px!important;object-fit:contain!important;
}
.brandbox .brand{font-size:15px!important;color:#fff!important;letter-spacing:-.025em!important}
.brandbox .brand small{font-size:6.8px!important;color:#8EA8BA!important;line-height:1.35!important}
.nav-section-label{
  padding:14px 15px 5px!important;
  color:#668399!important;
  font-size:6.8px!important;
  letter-spacing:.14em!important;
}
.menu-link{
  margin:2px 8px!important;
  padding:9px 10px!important;
  border-radius:10px!important;
  color:#D5E0E8!important;
  min-height:41px!important;
  transition:background .15s ease,transform .15s ease!important;
}
.menu-link:hover{
  background:rgba(255,255,255,.06)!important;
  transform:translateX(2px);
}
.menu-link.active{
  background:linear-gradient(90deg,#13A847,#20C55B)!important;
  color:#fff!important;
  box-shadow:0 7px 17px rgba(22,184,78,.18)!important;
}
.menu-link.active .menu-icon{color:#fff!important;background:rgba(255,255,255,.15)!important}
.menu-icon{
  width:29px!important;height:29px!important;border-radius:8px!important;
  background:rgba(255,255,255,.05)!important;color:#9BEAB3!important;
}
.menu-copy strong{font-size:8.8px!important}
.menu-copy small{font-size:6.4px!important;color:#87A0B2!important}
.profilebox{
  margin:9px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.035)!important;
  border-radius:13px!important;
}
.profilebox strong{color:#fff!important}
.profilebox small,.logout-link{color:#A1B6C5!important}

.topbar{
  min-height:68px!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--ec4-border)!important;
  box-shadow:0 4px 18px rgba(10,46,77,.035)!important;
  backdrop-filter:blur(14px);
}
.page-title h1{
  color:var(--ec4-text)!important;
  letter-spacing:-.035em!important;
}
.page-title h1 span{color:var(--ec4-muted)!important}
.menu-toggle,.notify-bell{
  border:1px solid var(--ec4-border)!important;
  background:#fff!important;
  border-radius:10px!important;
}
.mini-avatar,.avatar{
  background:linear-gradient(135deg,var(--ec4-blue-600),var(--ec4-green-600))!important;
  color:#fff!important;
}
.who strong{color:var(--ec4-text)!important}
.who small{color:var(--ec4-muted)!important}
.content{padding-top:18px!important}

/* Componentes */
.panel,.card,.parent-card{
  background:#fff!important;
  border:1px solid var(--ec4-border)!important;
  border-radius:var(--ec4-radius)!important;
  box-shadow:var(--ec4-shadow)!important;
}
.panel-head{
  padding:13px 15px!important;
  border-bottom:1px solid #EDF2F6!important;
}
.panel-head h2{color:var(--ec4-text)!important;letter-spacing:-.02em!important}
.hint,.soft-link{color:var(--ec4-muted)!important}
.soft-link:hover{color:var(--ec4-blue-600)!important}

.btn{
  min-height:39px!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#20C45A,#13A847)!important;
  color:#fff!important;border:0!important;
  font-weight:750!important;
  box-shadow:0 6px 16px rgba(22,184,78,.17)!important;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(22,184,78,.22)!important}
.btn.secondary{
  background:#fff!important;color:var(--ec4-navy-800)!important;
  border:1px solid #D6E2EA!important;box-shadow:none!important;
}
.btn.danger{background:linear-gradient(135deg,#F05A5A,#DA3636)!important}
input,select,textarea{
  border:1px solid #DCE5EC!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--ec4-text)!important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--ec4-blue-600)!important;
  box-shadow:0 0 0 3px rgba(30,108,251,.10)!important;
}
table thead th{background:#F7FAFC!important;color:#627487!important}
table td,table th{border-color:#EAF0F4!important}
table tbody tr:hover{background:#F9FBFD!important}
.status.on{background:var(--ec4-green-100)!important;color:#10803A!important}
.status.low{background:#FFF4DF!important;color:#A45E00!important}
.status.off{background:#FDECEC!important;color:#B42318!important}

/* Dashboard estável: melhora visual sem reescrever HTML */
.premium-page-head{
  align-items:flex-end!important;
  margin-bottom:14px!important;
}
.premium-page-head h2{
  color:var(--ec4-text)!important;
  font-size:27px!important;
  letter-spacing:-.045em!important;
}
.premium-page-head p{color:var(--ec4-muted)!important}
.premium-eyebrow{
  color:var(--ec4-blue-600)!important;
  letter-spacing:.11em!important;
  font-size:7px!important;
}
.premium-kpis{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:11px!important;
  margin-bottom:12px!important;
}
.premium-kpi{
  min-height:111px!important;
  padding:15px!important;
  border:1px solid var(--ec4-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:var(--ec4-shadow)!important;
  transition:transform .15s ease,box-shadow .15s ease!important;
}
.premium-kpi:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(10,46,77,.09)!important;
}
.premium-kpi span{font-size:8px!important;color:#56697C!important}
.premium-kpi strong{font-size:20px!important;color:var(--ec4-text)!important}
.premium-kpi small{font-size:7px!important;color:#8392A2!important}
.premium-kpi i{
  width:38px!important;height:38px!important;border-radius:11px!important;
}
.pk-green{background:var(--ec4-green-100)!important;color:var(--ec4-green-600)!important}
.pk-blue{background:var(--ec4-blue-100)!important;color:var(--ec4-blue-600)!important}
.pk-purple{background:#F1EEFF!important;color:var(--ec4-purple)!important}
.pk-orange{background:#FFF3E1!important;color:var(--ec4-orange)!important}

.premium-dashboard-main{
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.65fr)!important;
  gap:12px!important;
  margin-bottom:12px!important;
}
.premium-chart-panel,.premium-top-products{min-height:340px!important}
.week-chart{height:265px!important}
.week-gridline{border-color:#E8EEF3!important}
.week-ylabels span,.week-col>span{color:#78899B!important}
.week-bar-wrap{background:#F0F4F7!important;border-radius:6px 6px 2px 2px!important}
.week-bar{
  background:linear-gradient(180deg,#20C65B,#119F43)!important;
  border-radius:6px 6px 2px 2px!important;
  box-shadow:0 5px 13px rgba(22,184,78,.16)!important;
}
.rank-number{
  background:var(--ec4-green-100)!important;
  color:#109340!important;
}
.rank-track{background:#EDF2F5!important}
.rank-track i{background:linear-gradient(90deg,#17B74D,#26CA61)!important}

.premium-dashboard-bottom{
  grid-template-columns:minmax(0,1.5fr) minmax(300px,.5fr)!important;
  gap:12px!important;
}
.transaction-row{border-color:#EDF2F6!important}
.transaction-avatar{
  background:linear-gradient(135deg,#EAF2FF,#E9F9EE)!important;
  color:var(--ec4-navy-800)!important;
}
.transaction-copy strong,.transaction-value{color:var(--ec4-text)!important}
.transaction-copy small{color:var(--ec4-muted)!important}
.premium-action{
  min-height:82px!important;border-radius:12px!important;
  border:1px solid transparent!important;
}
.premium-action.green{background:#EAF9EF!important;color:#10913D!important}
.premium-action.blue{background:#EAF2FF!important;color:var(--ec4-blue-600)!important}
.premium-action.purple{background:#F1EEFF!important;color:var(--ec4-purple)!important}
.premium-action.red{background:#FDECEC!important;color:#D83838!important}
.premium-alert-summary a{border-color:#E8EEF3!important}

/* Base responsiva para os próximos módulos */
@media(max-width:1120px){
  .premium-kpis{grid-template-columns:repeat(2,1fr)!important}
  .premium-dashboard-main,.premium-dashboard-bottom{grid-template-columns:1fr!important}
}
@media(max-width:700px){
  .content{padding:12px 11px 84px!important}
  .premium-page-head{align-items:flex-start!important;flex-direction:column!important}
  .premium-head-actions{width:100%!important}
  .premium-head-actions .btn{flex:1!important}
  .premium-kpis{grid-template-columns:1fr 1fr!important}
  .premium-kpi{min-height:102px!important;padding:12px!important}
  .premium-kpi strong{font-size:18px!important}
  .week-chart{height:230px!important}
  .panel,.card{border-radius:13px!important}
}