/* DANXIS_SHELL_PROTOTYPE_V1
   Barra lateral e barra superior alinhadas ao protótipo aprovado.
*/
:root{
  --dx-shell-sidebar:276px;
  --dx-shell-sidebar-gradient:linear-gradient(180deg,#042b4c 0%,#063a66 58%,#073459 100%);
  --dx-shell-active-gradient:linear-gradient(90deg,#075c93,#087eac);
  --dx-shell-accent:#18bce5;
  --dx-shell-avatar-start:#0dd8f0;
  --dx-shell-avatar-end:#0b87d5;
}

/* Tipografia exclusiva do shell */
#mainApp .sidebar,
#mainApp .topbar,
#mainApp .sidebar button,
#mainApp .topbar button,
#mainApp .topbar input{
  font-family:"Poppins",Arial,sans-serif!important;
}

/* Estrutura principal */
#mainApp.app{grid-template-columns:var(--dx-shell-sidebar) minmax(0,1fr)!important}
#mainApp.app.sidebar-collapsed{grid-template-columns:0 minmax(0,1fr)!important}
#mainApp .main{grid-column:2!important}
#mainApp.sidebar-collapsed .main{grid-column:1/-1!important}

/* Barra lateral */
#mainApp .sidebar{
  inset:0 auto 0 0!important;
  width:var(--dx-shell-sidebar)!important;
  padding:0!important;
  color:#e7f4ff!important;
  background:var(--dx-shell-sidebar-gradient)!important;
  border-right:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin;
  scrollbar-color:#237aa1 transparent;
}
#mainApp .brand{
  height:82px!important;
  min-height:82px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  padding:0 28px!important;
  border-bottom:1px solid rgba(255,255,255,.05)!important;
}
#mainApp .brand .dx-prototype-brand-mark{
  width:31px;height:31px;border-radius:10px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,#0dd8f0,#0b87d5);
  box-shadow:0 10px 30px rgba(3,204,240,.25);
  font-size:13px;font-weight:800;line-height:1;
}
#mainApp .brand .dx-prototype-brand-name{
  color:#fff!important;font-size:19px!important;font-weight:700!important;letter-spacing:-.3px!important;
}
#mainApp .brand-logo-image{display:none!important}
#mainApp .workspace-card{display:none!important}

#mainApp .menu-label{
  padding:18px 29px 8px!important;
  color:#9fc0d8!important;
  font-size:9.5px!important;
  line-height:1.2!important;
  letter-spacing:1.3px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
}
#mainApp .nav-item{
  width:calc(100% - 32px)!important;
  margin:2px 16px!important;
  padding:11px 12px!important;
  border-radius:12px!important;
  gap:12px!important;
  color:#dbeaf5!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  font-weight:500!important;
  transition:.18s!important;
}
#mainApp .nav-item svg{
  width:18px!important;height:18px!important;stroke:currentColor!important;stroke-width:1.8!important;fill:none!important;flex:0 0 auto;
}
#mainApp .nav-item>span:not(.badge){font-size:12.5px!important;font-weight:500!important;line-height:1.35!important}
#mainApp .nav-item:hover{background:rgba(255,255,255,.06)!important;color:#fff!important;transform:none!important}
#mainApp .nav-item.active{
  background:var(--dx-shell-active-gradient)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(0,0,0,.12)!important;
}
#mainApp .nav-item.active:before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 8px 8px 0;background:#20d5f4;
}
#mainApp .nav-item .badge{
  margin-left:auto!important;min-width:22px!important;height:22px!important;padding:0 6px!important;
  border-radius:20px!important;background:rgba(255,255,255,.10)!important;color:#fff!important;
  display:grid!important;place-items:center!important;font-size:9px!important;font-weight:700!important;
}
#mainApp .nav-item.active .badge{background:rgba(255,255,255,.16)!important}
#mainApp .sidebar-footer{margin-top:auto!important;padding:22px 16px 30px!important}
#mainApp .support-card{
  border:1px solid rgba(255,255,255,.08)!important;border-radius:14px!important;padding:14px!important;
  background:rgba(255,255,255,.05)!important;box-shadow:none!important;
}
#mainApp .support-card .spark{display:none!important}
#mainApp .support-card strong{display:block!important;margin-bottom:5px!important;color:#fff!important;font-size:11.5px!important;font-weight:600!important}
#mainApp .support-card p{margin:0 0 10px!important;color:#a9c9dd!important;font-size:10.5px!important;line-height:1.55!important}
#mainApp .support-card button{
  width:100%!important;padding:8px 10px!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:9px!important;
  background:rgba(255,255,255,.08)!important;color:#fff!important;font-size:10.5px!important;font-weight:600!important;
}

/* Barra superior */
#mainApp .topbar{
  height:76px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  padding:0 27px!important;background:rgba(255,255,255,.93)!important;backdrop-filter:blur(14px)!important;
  border-bottom:1px solid #dce6ee!important;box-shadow:none!important;
}
#mainApp .sidebar-toggle,
#mainApp .mobile-menu{
  width:38px!important;height:38px!important;border-radius:11px!important;border:1px solid #dce6ee!important;
  background:#fff!important;color:#37556d!important;box-shadow:none!important;place-items:center!important;
}
#mainApp .sidebar-toggle:hover,#mainApp .mobile-menu:hover{transform:none!important;background:#f8fbfd!important;box-shadow:none!important}
#mainApp .sidebar-toggle svg{width:17px!important;height:17px!important;stroke-width:1.9!important}
#mainApp .page-heading{min-width:0!important;margin-right:auto!important}
#mainApp .page-heading h1{font-size:13px!important;line-height:1.25!important;margin:0 0 2px!important;font-weight:600!important;letter-spacing:0!important;color:#152236!important}
#mainApp .page-heading p{font-size:10.5px!important;line-height:1.35!important;margin:0!important;font-weight:400!important;color:#000!important}
#mainApp .global-search{display:none!important}
#mainApp .top-actions{display:flex!important;align-items:center!important;gap:10px!important;margin-left:auto!important}
#mainApp .top-actions>.icon-btn:first-child{display:none!important}
#mainApp .icon-btn{
  width:38px!important;height:38px!important;border-radius:11px!important;border:1px solid #dce6ee!important;
  background:#fff!important;color:#37556d!important;box-shadow:none!important;display:grid!important;place-items:center!important;
}
#mainApp .icon-btn:hover{transform:none!important;background:#f8fbfd!important;box-shadow:none!important}
#mainApp .icon-btn .dot{right:-3px!important;top:-4px!important;width:15px!important;height:15px!important;border:2px solid #fff!important;background:#ef4455!important}
#mainApp .user-menu{
  display:flex!important;align-items:center!important;gap:10px!important;padding:5px 9px!important;border-radius:12px!important;
  border:1px solid transparent!important;background:transparent!important;cursor:default!important;
}
#mainApp .user-menu:hover{border-color:#dce6ee!important;background:#f8fbfd!important}
#mainApp .avatar{
  width:38px!important;height:38px!important;border-radius:11px!important;display:grid!important;place-items:center!important;
  color:#fff!important;font-size:11px!important;font-weight:700!important;
  background:linear-gradient(135deg,var(--dx-shell-avatar-start),var(--dx-shell-avatar-end))!important;
  border:2px solid #fff!important;box-shadow:0 0 0 1px #dbe6ee!important;
}
#mainApp .user-meta strong{display:block!important;color:#152236!important;font-size:11.5px!important;line-height:1.25!important;font-weight:600!important}
#mainApp .user-meta span{display:block!important;margin-top:2px!important;color:#000!important;font-size:9.5px!important;line-height:1.25!important;font-weight:400!important}
#mainApp .logout-button{
  width:38px!important;height:38px!important;margin-left:1px!important;padding:0!important;border-radius:11px!important;
  border:1px solid #dce6ee!important;background:#fff!important;color:#37556d!important;font-size:17px!important;
  display:grid!important;place-items:center!important;box-shadow:none!important;
}
#mainApp .logout-button:hover{background:#f8fbfd!important;color:#17344c!important}

/* Paletas do avatar por tema */
body[data-theme="danxis"],body[data-dx-shell-theme="danxis"]{--dx-shell-avatar-start:#0dd8f0;--dx-shell-avatar-end:#0b87d5}
body[data-theme="ocean"],body[data-dx-shell-theme="ocean"]{--dx-shell-avatar-start:#20c7ee;--dx-shell-avatar-end:#176fd0}
body[data-theme="emerald"],body[data-dx-shell-theme="emerald"]{--dx-shell-avatar-start:#34d399;--dx-shell-avatar-end:#0f766e}
body[data-theme="violet"],body[data-dx-shell-theme="violet"]{--dx-shell-avatar-start:#a78bfa;--dx-shell-avatar-end:#6d28d9}
body[data-theme="graphite"],body[data-dx-shell-theme="graphite"]{--dx-shell-avatar-start:#64748b;--dx-shell-avatar-end:#334155}
body[data-theme="sunset"],body[data-dx-shell-theme="sunset"]{--dx-shell-avatar-start:#fb7185;--dx-shell-avatar-end:#f59e0b}
body[data-theme="royal"],body[data-dx-shell-theme="royal"]{--dx-shell-avatar-start:#3b82f6;--dx-shell-avatar-end:#1e40af}

@media(max-width:820px){
  #mainApp.app,#mainApp.app.sidebar-collapsed{grid-template-columns:1fr!important}
  #mainApp .main,#mainApp.sidebar-collapsed .main{grid-column:1!important}
  #mainApp .sidebar{transform:translateX(-100%)!important;transition:.25s!important}
  #mainApp .sidebar.open{transform:none!important}
  #mainApp .sidebar-toggle{display:none!important}
  #mainApp .mobile-menu{display:grid!important}
  #mainApp .topbar{height:72px!important;padding:0 16px!important}
  #mainApp .user-meta{display:none!important}
}
@media(max-width:560px){
  #mainApp .top-actions{gap:6px!important}
  #mainApp .user-menu{padding:3px!important;gap:4px!important}
  #mainApp .logout-button{width:34px!important;height:34px!important}
  #mainApp .page-heading p{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}