*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Manrope',sans-serif;background:#F6F7F9;-webkit-font-smoothing:antialiased;color:#111827}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:8px}
a{color:#2F5EE8;text-decoration:none}
a:hover{color:#1E3FAE}
input,select,textarea,button{font-family:'Manrope',sans-serif}
input,select,textarea{width:100%;padding:10px 12px;border-radius:9px;border:1px solid #E5E7EB;font-size:13.5px}
input:focus,select:focus,textarea:focus{outline:2px solid #C7D7FC;outline-offset:0;border-color:#2F5EE8}
label{display:block;font-size:12.5px;font-weight:600;color:#374151;margin-bottom:6px}
.field{margin-bottom:14px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:9px;border:none;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none}
.btn-primary{background:#2F5EE8;color:#fff}
.btn-primary:hover{background:#1E3FAE;color:#fff}
.btn-outline{border:1px solid #E5E7EB;background:#fff;color:#374151}
.btn-outline:hover{background:#F9FAFB}
.btn-danger{background:#FEF3F2;color:#F04438;border:1px solid #FECDCA}
.btn-danger-solid{background:#F04438;color:#fff}
.btn-icon{width:34px;height:34px;padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #E5E7EB;background:#fff;color:#6B7280;cursor:pointer}
.btn-icon.danger{color:#F04438}
.badge{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px}
.chip{padding:7px 14px;border-radius:20px;font-size:12.5px;font-weight:700;cursor:pointer;background:#F3F4F6;color:#6B7280}
.chip.active{background:#2F5EE8;color:#fff}

.app-shell{display:flex;min-height:100vh}
.sidebar{width:244px;flex-shrink:0;background:#111827;display:flex;flex-direction:column}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:22px 20px}
.sidebar .brand .logo{width:32px;height:32px;border-radius:9px;background:#2F5EE8;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-weight:800}
.sidebar .brand span{color:#fff;font-weight:800;font-size:15px}
.sidebar .brand span em{color:#6E93F2;font-style:normal}
.sidebar nav{flex:1;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.sidebar nav a,
.sidebar .bottom a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:#9CA3AF;font-size:13.5px;font-weight:600;white-space:nowrap}
.sidebar nav a:hover,
.sidebar .bottom a:hover{color:#fff;background:#1F2937}
.sidebar nav a.active,
.sidebar .bottom a.active{color:#fff;background:#2F5EE8}
.sidebar .bottom{padding:10px 14px;border-top:1px solid #1F2937;display:flex;flex-direction:column;gap:2px}
.logout-btn{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:9px;border:none;background:none;color:#9CA3AF;font-size:13.5px;font-weight:600;font-family:inherit;text-align:left;cursor:pointer}
.logout-btn:hover{color:#F87171;background:#1F2937}

.main-col{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:64px;flex-shrink:0;background:#fff;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.topbar h2{margin:0;font-size:16px;font-weight:700}
.topbar .user{display:flex;align-items:center;gap:8px}
.avatar{width:32px;height:32px;border-radius:9px;background:#EEF2FF;color:#2F5EE8;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;flex-shrink:0}

main.content{flex:1;padding:28px 32px;overflow-y:auto}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:16px}
.page-head h1{margin:0 0 4px;font-size:24px;font-weight:800}
.page-head p{margin:0;color:#6B7280;font-size:14px}

.card{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:20px}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:1fr 1fr}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}

table{width:100%;border-collapse:collapse}
table thead tr{background:#F9FAFB;border-bottom:1px solid #E5E7EB}
table th{text-align:left;padding:10px;font-size:11.5px;color:#9CA3AF;font-weight:700}
table td{padding:12px 10px;font-size:13.5px;color:#374151;border-bottom:1px solid #F3F4F6}
.table-card{background:#fff;border:1px solid #E5E7EB;border-radius:14px;overflow-x:auto;overflow-y:hidden}
.table-toolbar{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #F3F4F6;gap:16px;flex-wrap:wrap}
.search-box{position:relative;flex:1;max-width:320px}
.search-box input{padding-left:34px}

.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.45);display:flex;align-items:center;justify-content:center;z-index:100}
.modal-box{background:#fff;border-radius:16px;width:560px;max-width:92vw;max-height:88vh;overflow-y:auto}
.modal-box.small{width:400px}
.modal-head{padding:22px 26px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between}
.modal-body{padding:22px 26px}
.modal-foot{padding:18px 26px;border-top:1px solid #E5E7EB;display:flex;justify-content:flex-end;gap:10px}

.toast{position:fixed;bottom:24px;right:24px;z-index:200;padding:13px 18px;border-radius:11px;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(16,24,40,.15)}
.toast.success{background:#111827;color:#fff}
.toast.error{background:#F04438;color:#fff}
.toast.warning{background:#F79009;color:#fff}

.tabs{display:flex;gap:6px;background:#F3F4F6;padding:5px;border-radius:11px;width:fit-content;margin-bottom:20px}
.tabs a{padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;color:#6B7280}
.tabs a.active{background:#fff;color:#111827}

.login-wrap{min-height:100vh;display:flex}
.login-aside{flex:1.1;background:linear-gradient(160deg,#132353,#0F1B3D 65%);display:flex;flex-direction:column;justify-content:center;padding:72px;color:#fff}
.login-aside h1{font-size:34px;font-weight:800;line-height:1.25;margin:0 0 16px;max-width:420px}
.login-aside p{font-size:15px;color:#C4CEE8;line-height:1.6;max-width:420px;margin:0 0 32px}
.login-form-col{flex:1;display:flex;align-items:center;justify-content:center;background:#fff;padding:32px}
.login-form{width:100%;max-width:360px}
.alert{padding:12px 14px;border-radius:9px;font-size:13.5px;margin-bottom:16px}
.alert-error{background:#FEF3F2;color:#B42318;border:1px solid #FECDCA}
.alert-success{background:#ECFDF3;color:#067647;border:1px solid #ABEFC6}

footer.app-footer{padding:13px 32px;font-size:12px;color:#9CA3AF;border-top:1px solid #E5E7EB;background:#fff;display:flex;justify-content:space-between;flex-shrink:0;flex-wrap:wrap;gap:6px}

.menu-toggle{display:none;width:36px;height:36px;flex-shrink:0;border-radius:8px;border:1px solid #E5E7EB;background:#fff;align-items:center;justify-content:center;font-size:17px;cursor:pointer;color:#374151}
.sidebar-backdrop{display:none}

/* ===== Responsivo ===== */
@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  .sidebar{position:fixed;top:0;left:0;height:100vh;z-index:120;transform:translateX(-100%);transition:transform .25s ease;box-shadow:0 0 0 rgba(0,0,0,0)}
  .sidebar.open{transform:translateX(0);box-shadow:20px 0 40px rgba(16,24,40,.25)}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:110}
  .sidebar-backdrop.open{display:block}
  .topbar{padding:0 16px}
  .topbar h2{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  main.content{padding:18px}
  footer.app-footer{padding:12px 16px}
}

@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .page-head{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .page-head > div:last-child{width:100%}
  /* Rede de segurança pra qualquer <div style="display:flex;..."> inline
     espalhado pelas páginas (o projeto não usa classes utilitárias pra
     layout) — sem isso, linhas de botões/filtros estourariam a largura da
     tela em vez de quebrar linha num telão pequeno. */
  [style*="display:flex"]{flex-wrap:wrap}
  .topbar .user > div:last-child{display:none}
}

@media (max-width:840px){
  .login-wrap{flex-direction:column;min-height:auto}
  .login-aside{display:none}
  .login-form-col{padding:28px 20px;min-height:100vh}
}