/* ------------------------------
   WMS UI (clean / professional)
   ------------------------------ */

:root{
  --wms-bg: #f3f4f6;
  --wms-panel: #ffffff;
  --wms-border: rgba(15, 23, 42, .10);
  --wms-border-soft: rgba(15, 23, 42, .08);
  --wms-text: #0f172a;
  --wms-muted: #64748b;
  --wms-radius: 16px;

  /* Tipografia */
  /* Conteúdo: fonte mais suave */
  --wms-font-content: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Menu: mantém padrão (system) */
  --wms-font-menu: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(15,23,42,.04), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(15,23,42,.03), transparent 60%),
    linear-gradient(180deg, var(--wms-bg) 0%, #eef1f4 100%);
  color: var(--wms-text);

  /* renderização mais “macia” */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------
   Fonte do conteúdo (sem alterar a fonte do MENU)
   ------------------------------------------------- */

/* Conteúdo + topbar */
.wms-topbar,
main{
  font-family: var(--wms-font-content);
  --bs-body-font-family: var(--wms-font-content);
  --bs-font-sans-serif: var(--wms-font-content);
}

/* Modais também seguem a fonte do conteúdo */
.modal,
.modal *{
  font-family: var(--wms-font-content);
}

/* Menu (desktop + offcanvas) mantém fonte padrão */
.wms-sidenav,
.offcanvas#sidenav{
  font-family: var(--wms-font-menu);
  --bs-body-font-family: var(--wms-font-menu);
  --bs-font-sans-serif: var(--wms-font-menu);
}

.wms-sidenav *,
.offcanvas#sidenav *{
  font-family: inherit;
}

.content-shell{
  max-width: 1400px;
}

@media (max-width: 767px){
  .content-shell{ max-width: 100%; }
  .display-6{ font-size: 2rem; }
}

/* Topbar */
.wms-topbar{
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

.wms-topbar.navbar{ box-shadow: 0 8px 24px rgba(15,23,42,.06); }

/* Sidebar (desktop + offcanvas) */
.wms-sidenav, .offcanvas#sidenav .offcanvas-body{
  background: var(--wms-panel);
}

.wms-sidenav .list-group-item,
.offcanvas#sidenav .list-group-item{
  border: 0;
  border-radius: 12px;
  /* Bootstrap usa width:100% em .list-group-item-action; com margin lateral isso estoura o aside.
     Forçamos width:auto e mantemos o espaçamento via margin. */
  width: auto;
  margin: 2px 10px;
  padding: .70rem .85rem;
  color: rgba(15,23,42,.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wms-sidenav .list-group-item:hover,
.offcanvas#sidenav .list-group-item:hover{
  background: rgba(15,23,42,.04);
}

.wms-sidenav .list-group-item.active,
.offcanvas#sidenav .list-group-item.active{
  background: rgba(13,110,253,.12);
  color: #0b4fbd;
  /* Indicador sem “vazar” pra fora do aside */
  box-shadow: inset 3px 0 0 #0d6efd;
}

/* Cards */
.card{
  border: 1px solid var(--wms-border-soft);
  border-radius: var(--wms-radius);
  box-shadow: 0 6px 18px rgba(15,23,42,.07);
}

/* Keep Bootstrap shadow utility consistent with our cards */
.shadow-sm{ box-shadow: 0 6px 18px rgba(15,23,42,.07) !important; }

.card-header{
  background: rgba(241,245,249,.65);
  border-bottom: 1px solid var(--wms-border-soft);
  border-top-left-radius: calc(var(--wms-radius) - 1px);
  border-top-right-radius: calc(var(--wms-radius) - 1px);
}

/* Tables */
.table{
  --bs-table-bg: rgba(255,255,255,.94);
  border-color: var(--wms-border-soft);
}

.table-responsive{
  border: 1px solid var(--wms-border-soft);
  border-radius: var(--wms-radius);
  overflow: hidden;
  background: rgba(255,255,255,.94);
}

.card .table-responsive{
  border: 0;
  border-radius: 0;
  background: transparent;
}

.table-responsive .table{
  margin-bottom: 0;
}

.table thead th{
  color: rgba(15,23,42,.72);
  font-weight: 400;
  background: rgba(241,245,249,.85);
  border-bottom: 1px solid var(--wms-border-soft);
}

/* Em tabelas, nunca usar negrito (requisito do WMS) */
.table th, .table td{
  font-weight: 400;
}
.table b, .table strong,
.table .fw-bold, .table .fw-semibold{
  font-weight: 400 !important;
}
.table tbody tr:hover{
  background: rgba(13,110,253,.04);
}

/* List groups inside cards */
.card .list-group-item{
  border-color: var(--wms-border-soft);
}
.card .list-group-item:hover{
  background: rgba(13,110,253,.03);
}

/* Inputs & buttons */
.form-control, .form-select{ border-color: rgba(15,23,42,.14); }
.form-control:focus, .form-select:focus{ box-shadow: 0 0 0 .25rem rgba(13,110,253,.15); }
.btn{ border-radius: 12px; }
.btn-sm{ border-radius: 10px; }
.input-group-text{
  background: rgba(241,245,249,.9);
  border-color: rgba(15,23,42,.14);
}

/* Badges */
.badge{ letter-spacing: .2px; }
.badge-tight{ padding: .22em .48em; font-size: .72rem; }

/* Compact page headings */
h1, h2, h3, h4, h5{ color: var(--wms-text); }
.text-muted{ color: var(--wms-muted) !important; }

.card .card-title{ letter-spacing: .2px; }

.card .card-body{ padding: 1.05rem; }

/* Forms */
.form-control, .form-select, .input-group-text{
  border-color: var(--wms-border);
}



/* Subtle separators */
.border, .border-bottom, .border-end{
  border-color: var(--wms-border-soft) !important;
}

.brand-dot { display:inline-block; width:10px; height:10px; background:#0d6efd; border-radius:50%; vertical-align:middle; }

/* Login (Auth) */
.auth-bg{
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(13,110,253,.18), transparent 55%),
    radial-gradient(900px 500px at 90% 20%, rgba(32,201,151,.14), transparent 55%),
    radial-gradient(900px 500px at 20% 90%, rgba(111,66,193,.12), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}
.auth-card{
  border-radius: 1rem;
}
.auth-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.06);
}
.auth-hero{
  color: #0f172a;
}
.auth-hero .muted{ color: #475569; }
.card-kpi { border:1px solid #e9ecef; border-radius:.75rem; }
.kpi-icon { font-size:1.4rem; color:#0d6efd; }
.table-sticky thead th { position: sticky; top:0; z-index: 1; }

/* ------------------------------
   Notificações (dropdown)
   ------------------------------ */
.notif-dropdown{
  width: 400px;
  max-width: calc(100vw - 1.5rem);
  border: 1px solid var(--wms-border-soft);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15,23,42,.18);
}

.notif-card{
  background: var(--wms-panel);
}

.notif-dropdown .nav-tabs{
  border-bottom: 1px solid var(--wms-border-soft);
}

.notif-dropdown .nav-tabs .nav-link{
  border: 0;
  border-bottom: 2px solid transparent;
  color: rgba(15,23,42,.65);
  padding: .5rem 0;
  margin-right: 1.25rem;
}

.notif-dropdown .nav-tabs .nav-link.active{
  color: rgba(15,23,42,.92);
  border-bottom-color: rgba(25,135,84,.85); /* verde estilo do exemplo */
}

.notif-dropdown .list-group-item{
  border: 0;
  border-bottom: 1px solid var(--wms-border-soft);
  padding: .8rem 1rem;
}

.notif-dropdown .list-group-item:last-child{
  border-bottom: 0;
}

.notif-dropdown .list-group-item:hover{
  background: rgba(13,110,253,.04);
}

.notif-dropdown .tab-pane{
  max-height: 60vh;
  overflow: auto;
}

/* Em mobile, fixa o dropdown no viewport para não sair da tela */
@media (max-width: 575.98px){
  .notif-dropdown{
    position: fixed !important;
    top: 60px !important;
    left: .75rem !important;
    right: .75rem !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: 1080;
  }
}
/* Layout da lista de produtos no mobile */
@media (max-width: 767px){
  /* tabela em grid, escondendo o header */
  .catalog-list .table thead { display: none; }

  .catalog-list .table tbody tr{
    display: grid;
    grid-template-columns: 70px 1fr; /* imagem + conteúdo */
    grid-auto-rows: auto;
    column-gap: .75rem;
    row-gap: .25rem;
    padding: .75rem .5rem;
    border-bottom: 1px solid #e9ecef;
  }

  /* 1) Imagem (1ª coluna) ocupa duas/3 linhas */
  .catalog-list td:nth-child(1){
    grid-column: 1 / 2;
    grid-row: 1 / span 3;
  }

  /* 2) Título (3ª coluna) - primeira linha à direita */
  .catalog-list td:nth-child(3){
    grid-column: 2 / 3;
    grid-row: 1;
    font-weight: 600;
    line-height: 1.2;
  }

  /* 3) SKU (2ª coluna) - segunda linha à direita */
  .catalog-list td:nth-child(2){
    grid-column: 2 / 3;
    grid-row: 2;
  }

  /* 4) Endereço principal (5ª coluna) - terceira linha à direita */
  .catalog-list td:nth-child(5){
    grid-column: 2 / 3;
    grid-row: 3;
  }

  /* 5) Esconde as demais colunas no mobile */
  .catalog-list td:nth-child(4),
  .catalog-list td:nth-child(6),
  .catalog-list td:nth-child(7){
    display: none;
  }

  /* Utilitário: limitar título a 2 linhas */
  .clamp-2{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media print{
  nav, aside, .btn, .alert { display:none !important; }
  main { padding:0 !important; }
  body { background:#fff; }
}

@media (max-width: 767px){
  .offcanvas.offcanvas-start { --bs-offcanvas-width: 280px; } /* gaveta mais estreita */
}

/* ------------------------------
   Pedidos
   ------------------------------ */

.orders-table th, .orders-table td { white-space: nowrap; }
.orders-table td:nth-child(2), .orders-table td:nth-child(6) { white-space: normal; }

.orders-stepper{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.5rem;
}
.orders-step{
  position:relative;
  flex:1;
  text-align:center;
  padding-top:.25rem;
}
.orders-step:before{
  content:"";
  position:absolute;
  top:16px;
  left:0;
  right:0;
  height:3px;
  background: rgba(15,23,42,.10);
  z-index:0;
}
.orders-step:first-child:before{ left:50%; }
.orders-step:last-child:before{ right:50%; }
.orders-step .dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background: rgba(15,23,42,.25);
  margin: 10px auto 6px;
  position:relative;
  z-index:1;
}
.orders-step .lbl{
  font-size:.82rem;
  color: rgba(15,23,42,.70);
  font-weight:600;
}
.orders-step.active .dot{ background: #0d6efd; box-shadow: 0 0 0 6px rgba(13,110,253,.12); }
.orders-step.active .lbl{ color:#0b4fbd; }
.orders-step.done:before{ background: rgba(13,110,253,.35); }
.orders-step.done .dot{ background: rgba(13,110,253,.55); }

@media (max-width: 767px){
  .orders-table th:nth-child(1),
  .orders-table td:nth-child(1){ display:none; }
  .orders-table th:nth-child(4),
  .orders-table td:nth-child(4){ display:none; }
  .orders-table th:nth-child(7),
  .orders-table td:nth-child(7){ display:none; }
  .orders-table th:nth-child(5),
  .orders-table td:nth-child(5){ white-space:normal; }
}

@media (max-width: 767px){
  .actions-bar { gap: .5rem !important; }
  .actions-bar .btn {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.2;
  }
}

/* Se algum container estiver causando overflow no mobile, garanta quebra */
@media (max-width: 767px){
  .card, .container, main { overflow-x: hidden; }
}


@media (max-width: 767px){
  .card .form-control-sm{ font-size:.9rem; padding:.35rem .5rem; }
  .card .btn-sm{ padding:.35rem .6rem; font-size:.85rem; }
}

/* Transferências: ajustes de responsividade no mobile (evita overflow quando status é 'Em separação') */
@media (max-width: 767px){
  .transfer-item-footer{
    align-items: flex-start;
  }
  .transfer-item-footer .badge{
    max-width: 100%;
    white-space: normal;
  }
  .transfer-item-actions{
    gap: .4rem !important;
  }
}


/* ------------------------------
   Topbar: mobile responsiveness
   ------------------------------ */
.navbar .container-fluid{ flex-wrap: nowrap; }
.wms-username{ max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px){
  .navbar-brand span{ display:none; }
  .wms-username{ max-width: 110px; }
}

/* ------------------------------
   Pequenos refinamentos globais
   ------------------------------ */

/* Botões de opção (ex: Nova movimentação) */
.wms-option-btn{ padding: .85rem .95rem; }
.wms-option-btn .opt-sub{ opacity: .78; }
.wms-option-btn:hover .opt-sub,
.wms-option-btn:focus .opt-sub{ color: inherit; opacity: .92; }

/* Cards clicáveis */
.card.wms-clickable{ cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.card.wms-clickable:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15,23,42,.10); }

/* Cards de módulos/marketplaces (tela de Integrações > Marketplaces) */
.card.wms-module-card{ border: 1px solid var(--wms-border-soft); border-radius: 18px; }
.wms-module-logo-box{
  width: 150px;
  height: 150px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--wms-border-soft);
  background: rgba(255,255,255,.95);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wms-module-logo{
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
}
.wms-module-actions{ min-width: 260px; display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 768px){
  .wms-module-logo-box{ width: 150px; height: 150px; }
  .wms-module-actions{ width: 100%; min-width: 0; }
}

/* Logos de integrações */
.wms-brand{ display:inline-flex; align-items:center; gap:.55rem; }
.wms-brand-logo{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--wms-border-soft);
  background: rgba(255,255,255,.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wms-brand-logo img{ width: 100%; height: 100%; object-fit: contain; }

/* Usuários: tipografia mais "leve" */
.wms-users-table td.user-cell{ font-weight: 500; }