/* ============================================================
   DSL CRM VENDEDOR
   SHELL ISOLADO

   ESTE ARQUIVO NÃO ESTILIZA O DASHBOARD.
   ============================================================ */

html,
body{
  min-height:100%;
}


body.crm-vendedor-ativo{
  overflow:hidden !important;
}


body.crm-vendedor-ativo > .topbar-dsl,
body.crm-vendedor-ativo > .layout{
  visibility:hidden !important;
  pointer-events:none !important;
}


#crmVendedorShell{
  --crm-navy:#102647;
  --crm-blue:#2378da;
  --crm-blue-light:#42a5ff;
  --crm-bg:#f4f7fb;
  --crm-border:#e3e8ef;
  --crm-text:#182230;
  --crm-muted:#667085;

  display:none;

  position:fixed;
  inset:0;

  grid-template-columns:
    288px minmax(0,1fr);

  grid-template-rows:
    76px minmax(0,1fr);

  background:var(--crm-bg);

  z-index:50000;

  overflow:hidden;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


#crmVendedorShell.ativo{
  display:grid;
}


/* SIDEBAR */

.crm-vendedor-sidebar{
  grid-column:1;
  grid-row:1 / 3;

  min-width:0;

  display:flex;
  flex-direction:column;

  background:var(--crm-navy);

  color:#fff;

  overflow-y:auto;
  overflow-x:hidden;
}


.crm-vendedor-brand{
  min-height:134px;

  box-sizing:border-box;

  display:flex;
  align-items:center;

  gap:14px;

  padding:22px 22px 20px;

  border-bottom:
    1px solid rgba(255,255,255,.12);
}


.crm-vendedor-brand img{
  width:52px;
  height:52px;

  flex:0 0 52px;

  object-fit:contain;
}


.crm-vendedor-brand-copy{
  min-width:0;
}


.crm-vendedor-brand-copy strong{
  display:block;

  color:#fff;

  font-size:18px;
  line-height:1.18;
  font-weight:750;
}


.crm-vendedor-brand-copy span{
  display:block;

  margin-top:5px;

  color:var(--crm-blue-light);

  font-size:14px;
  font-weight:700;
}


.crm-vendedor-nav{
  flex:1;

  padding:26px 16px 20px;
}


.crm-vendedor-module{
  width:100%;
  min-height:48px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:0 14px;

  border:0;
  border-radius:8px;

  background:var(--crm-blue);

  color:#fff;

  font:inherit;
  font-size:15px;
  font-weight:700;

  cursor:pointer;
}


.crm-vendedor-module-icon{
  width:18px;

  text-align:center;

  color:#fff;

  font-size:11px;
}


.crm-vendedor-module span:nth-child(2){
  flex:1;

  text-align:left;
}


.crm-vendedor-module b{
  font-size:18px;
}


.crm-vendedor-submenu{
  display:none;

  margin-top:7px;
}


.crm-vendedor-submenu.open{
  display:block;
}


.crm-vendedor-submenu button{
  width:100%;
  min-height:39px;

  display:block;

  margin:2px 0;

  padding:8px 12px 8px 42px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#d5dfec;

  font:inherit;
  font-size:14px;
  font-weight:500;

  text-align:left;

  cursor:pointer;
}


.crm-vendedor-submenu button:hover{
  background:
    rgba(255,255,255,.08);

  color:#fff;
}


.crm-vendedor-submenu button.active{
  background:
    rgba(35,120,218,.95);

  color:#fff;

  font-weight:700;
}


.crm-vendedor-sidebar-footer{
  display:grid;

  grid-template-columns:
    10px 1fr;

  gap:4px 8px;

  padding:18px 24px 20px;

  border-top:
    1px solid rgba(255,255,255,.11);
}


.crm-online-dot{
  width:7px;
  height:7px;

  align-self:center;

  border-radius:50%;

  background:#26c281;
}


.crm-vendedor-sidebar-footer strong{
  color:#dce8f4;

  font-size:12px;
}


.crm-vendedor-sidebar-footer small{
  grid-column:2;

  color:#91a4bb;

  font-size:11px;
}


/* TOPBAR */

.crm-vendedor-topbar{
  grid-column:2;
  grid-row:1;

  min-width:0;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:0 30px;

  box-sizing:border-box;

  background:#fff;

  border-bottom:
    1px solid var(--crm-border);
}


.crm-vendedor-top-left{
  display:flex;
  align-items:center;

  gap:14px;
}


.crm-vendedor-top-title{
  color:#101828;

  font-size:19px;
  font-weight:750;
}


.crm-vendedor-hamburger{
  display:none;

  width:40px;
  height:40px;

  align-items:center;
  justify-content:center;

  border:0;
  border-radius:8px;

  background:#f2f4f7;

  color:#182230;

  font-size:22px;

  cursor:pointer;
}


.crm-vendedor-user{
  display:flex;
  align-items:center;

  gap:13px;

  min-width:0;
}


.crm-vendedor-user-copy{
  min-width:0;

  text-align:right;
}


.crm-vendedor-user-copy strong{
  display:block;

  max-width:320px;

  overflow:hidden;

  color:#101828;

  font-size:13px;
  font-weight:750;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.crm-vendedor-user-copy span{
  display:block;

  max-width:320px;

  margin-top:3px;

  overflow:hidden;

  color:#667085;

  font-size:12px;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.crm-vendedor-avatar{
  width:44px;
  height:44px;

  flex:0 0 44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#1273d4;

  color:#fff;

  font-size:14px;
  font-weight:700;
}


/* CONTEÚDO */

.crm-vendedor-main{
  grid-column:2;
  grid-row:2;

  min-width:0;
  min-height:0;

  overflow:auto;

  background:var(--crm-bg);
}


.crm-vendedor-breadcrumb{
  min-height:51px;

  display:flex;
  align-items:center;

  gap:8px;

  box-sizing:border-box;

  padding:0 34px;

  border-bottom:
    1px solid var(--crm-border);

  background:#fff;

  color:#667085;

  font-size:13px;
}


.crm-vendedor-breadcrumb strong{
  color:#475467;
}


#crmVendedorRoot{
  width:100%;

  box-sizing:border-box;

  padding:32px 34px 46px;

  background:var(--crm-bg);
}


.crm-vendedor-backdrop{
  display:none;
}


/* MOBILE */

@media(max-width:900px){

  #crmVendedorShell{
    grid-template-columns:1fr;

    grid-template-rows:
      66px minmax(0,1fr);
  }


  .crm-vendedor-sidebar{
    position:fixed;

    top:0;
    bottom:0;
    left:0;

    width:280px;

    z-index:3;

    transform:
      translateX(-100%);

    transition:
      transform .2s ease;
  }


  #crmVendedorShell.menu-open
  .crm-vendedor-sidebar{
    transform:
      translateX(0);
  }


  .crm-vendedor-topbar{
    grid-column:1;
    grid-row:1;

    padding:0 14px;
  }


  .crm-vendedor-hamburger{
    display:flex;
  }


  .crm-vendedor-main{
    grid-column:1;
    grid-row:2;
  }


  .crm-vendedor-backdrop{
    position:fixed;
    inset:0;

    z-index:2;

    background:
      rgba(16,24,40,.36);
  }


  #crmVendedorShell.menu-open
  .crm-vendedor-backdrop{
    display:block;
  }


  .crm-vendedor-user-copy{
    display:none;
  }


  #crmVendedorRoot{
    padding:
      22px 14px 90px;
  }


  .crm-vendedor-breadcrumb{
    padding:
      0 15px;
  }
}