:root{
    --bg:#f4f6f9; --card:#ffffff; --blue:#2563eb;
    --green:#16a34a; --red:#dc2626; --nav:#060b15; --nav2:#1e293b;
    --muted:#6b7280; --radius:14px;
  }
  html, body { height:100%; margin:0; padding:0; overflow-x:hidden; overflow-y:auto; }
  body{ background:var(--bg); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif; }
  .card{border:0;border-radius:var(--radius);box-shadow:0 6px 18px rgba(15,23,42,.08);}
  .small-muted{font-size:.9rem;color:var(--muted)}
  [data-view]{display:none} [data-view].active{display:block}
  header{
    background: linear-gradient(90deg, #1e3a8a, #2563eb);
    color:#fff; display:flex; align-items:center; justify-content:space-between;
    padding:.6rem 1rem !important; box-shadow:0 2px 8px rgba(0,0,0,.15);
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  header h3{font-size:1.1rem;margin:0;font-weight:700;letter-spacing:.5px;}
  #brandHome{cursor:pointer;}
  #brandHome:hover{opacity:.9;text-decoration:underline;}
  #headerSubtitle{color:rgba(255,255,255,.85);font-weight:500;font-size:.9rem}
  .menu-btn{border:0;background:transparent;font-size:1.25rem;line-height:1;color:#fff}
  .menu-btn i{transition:.2s;display:inline-block;}
  .menu-btn:hover i{transform:scale(1.1);color:#fff;}
  .header-icons{display:flex;align-items:center;gap:16px}
  .header-icons i{font-size:1.2rem;cursor:pointer;transition:.2s;color:rgba(255,255,255,.95)}
  .header-icons i:hover{color:#fff;transform:scale(1.1)}
  .low-stock-msg{
    font-size:.78rem;
    padding:.15rem .5rem;
    border-radius:999px;
    background:#facc15;
    color:#000;
    font-weight:700;
    border:1px solid #eab308;
    white-space:nowrap;
    cursor:pointer;
  }
  .low-stock-msg:hover{ filter:brightness(.95); }
  .pending-bar{
    background:#fff3cd;
    color:#7a5b00;
    border-bottom:1px solid #ffe69c;
  }
  .pending-bar .badge{background:#ffec99;color:#7a5b00;border:1px solid #ffe69c;}
  .offcanvas{background:linear-gradient(180deg,var(--nav),var(--nav2));color:#fff}
  .offcanvas-start{ width:220px !important; }
  .offcanvas .btn{display:flex;align-items:center;gap:8px;border-radius:12px;text-align:left;font-weight:700;font-size:.95rem}
  .offcanvas .btn i{ width:18px; text-align:center; }
  .card-head{border-radius:12px 12px 0 0;padding:10px 14px;font-weight:800;color:#fff}
  .head-purple{background:linear-gradient(135deg,#6d28d9,#7c3aed)}
  .head-blue{background:linear-gradient(135deg,#1d4ed8,#2563eb)}
  .kpi-box{border-radius:12px;padding:10px 14px;color:#fff;font-weight:800;text-align:center}
  .kpi-green{background:#16a34a}
  .diff-pos{color:var(--green);font-weight:800}
  .diff-neg{color:var(--red);font-weight:800}
  .no-table{max-height:60vh;overflow:auto}
  .type-card{
    border:1px solid rgba(37,99,235,.25);
    border-top:3px solid var(--blue);
    border-radius:14px;
    box-shadow:0 6px 18px rgba(15,23,42,.08);
  }
  .card-blue-line{
    border:1px solid rgba(37,99,235,.25);
    border-top:3px solid var(--blue);
  }
  .card-blue-strong{
    border:2px solid #050a1a;
    border-top:4px solid #050a1a;
  }
  .card-blue-outline{
    border:1px solid rgba(37,99,235,.45);
  }
  .machine-card-dark{
    background:#0f172a;
    color:#e2e8f0;
    border-color:rgba(59,130,246,.45);
  }
  .machine-card-dark .badge.text-bg-light,
  .machine-card-dark .badge.text-bg-primary-subtle{
    background:rgba(148,163,184,.18) !important;
    color:#e2e8f0 !important;
    border-color:rgba(148,163,184,.4) !important;
  }
  .machine-card-dark .small-muted{
    color:#cbd5f5;
  }
  .machine-card-dark .btn-outline-primary,
  .machine-card-dark .btn-outline-danger{
    transition:none !important;
    box-shadow:none !important;
  }
  .machine-card-dark .btn-outline-primary:hover,
  .machine-card-dark .btn-outline-primary:focus{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
  }
  .machine-card-dark .btn-outline-danger:hover,
  .machine-card-dark .btn-outline-danger:focus{
    background:#dc2626;
    border-color:#dc2626;
    color:#fff;
  }
  .btn-outline-primary,
  .btn-outline-danger{
    transition:none !important;
    box-shadow:none !important;
  }
  .btn-outline-primary:hover,
  .btn-outline-primary:focus{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
  }
  .btn-outline-danger:hover,
  .btn-outline-danger:focus{
    background:#dc2626;
    border-color:#dc2626;
    color:#fff;
  }
  .moves-scroll{
    display:block;
    max-height:320px;
    overflow-y:auto !important;
    overflow-x:auto;
  }
  .product-list-scroll{
    display:block;
    max-height:200px;
    overflow-y:auto !important;
    overflow-x:auto;
  }
  .location-scroll{
    display:block;
    max-height:220px;
    overflow-y:auto !important;
    overflow-x:auto;
  }
  .stock-scroll{
    display:block;
    max-height:220px;
    overflow-y:auto !important;
    overflow-x:auto;
  }
  #productsList{overflow-x:auto;}
  .product-list-item{padding:.45rem .6rem;}
  .product-row{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;min-width:900px;}
  .product-main{display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap;min-width:0;}
  .product-name{font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .product-badge{font-size:.75rem;white-space:nowrap;}
  .product-row .actions{display:flex;gap:.25rem;justify-content:flex-end;}
  @media (max-width: 992px){.product-row{min-width:760px;}.product-name{max-width:160px;}}
  @media (max-width: 576px){.product-row{min-width:640px;}}
  .submenu-sm .btn{
    font-size:.85rem;
    padding:.3rem .6rem;
  }
  #menuCadastrosToggle .bi-chevron-down{
    transition: transform .2s ease;
  }
  #menuCadastrosToggle[aria-expanded="true"] .bi-chevron-down{
    transform: rotate(180deg);
  }
  .type-card .big{font-size:1.2rem;font-weight:800}
  .type-card .muted{color:#64748b}
  .btn-outline-warning{--bs-btn-color:#d97706; --bs-btn-border-color:#d97706; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#d97706; --bs-btn-hover-border-color:#d97706;}
  .small-hint{font-size:.85rem;color:#6b7280;margin-top:2px}
  .content-wrap{padding-top:22px;}
  .content-wrap-tight{padding-top:10px;}
  @media (min-width:768px){ .content-wrap{padding-top:28px;} }
  @media (min-width:768px){ .content-wrap-tight{padding-top:14px;} }
  @media (min-width:1200px){ .content-wrap{padding-top:32px;} }
  @media (min-width:1200px){ .content-wrap-tight{padding-top:16px;} }
  .input-group-blue .input-group-text{
    background:#eff6ff;
    border-color: rgba(37,99,235,.35);
    color:#1d4ed8;
    font-weight:700;
  }
  .input-group-blue .form-control{
    border-color: rgba(37,99,235,.35);
  }
  .input-group-blue .form-select{
    border-color: rgba(37,99,235,.35);
  }
  .input-group-blue .form-control:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);
  }
  .input-group-blue .form-select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);
  }
  .input-blue{
    border-color: rgba(37,99,235,.35);
    background:#f8fafc;
  }
  .input-blue:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);
    background:#fff;
  }
  .machine-form .form-label{
    font-weight:700;
    color:#1f2937;
  }
  .machine-form .form-control,
  .machine-form .form-select{
    border-color: rgba(37,99,235,.35);
    background:#f8fafc;
  }
  .machine-form .form-control:focus,
  .machine-form .form-select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);
    background:#fff;
  }
  .machine-form .form-control::placeholder{
    color:#94a3b8;
  }
  .stock-overview .stock-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:6px 0;
    border-bottom:1px dashed #e5e7eb;
  }
  .stock-overview .stock-row:last-child{ border-bottom:0; }
  .stock-overview .stock-name{
    font-weight:700;
    min-width:160px;
  }
  .stock-overview .stock-meta{
    font-size:.85rem;
    color:#6b7280;
    min-width:100px;
    text-align:right;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
  }
  .stock-meta .stock-qty,
  .stock-meta .stock-min{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-weight:700;
    line-height:1.1;
  }
  .stock-meta .stock-qty{
    color:#0f172a;
    background:#e0f2fe;
    border:1px solid #38bdf8;
  }
  .stock-meta .stock-min{
    color:#92400e;
    background:#fef3c7;
    border:1px solid #f59e0b;
  }
  .stock-meta .stock-qty.low{
    color:#991b1b;
    background:#fee2e2;
    border-color:#ef4444;
  }
  .stock-bar{
    flex:1;
    height:10px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
  }
  .stock-bar-fill{
    height:100%;
    transition:width .2s ease;
  }
  .stock-bar-fill.green{ background:#16a34a; }
  .stock-bar-fill.yellow{ background:#f59e0b; }
  .stock-bar-fill.red{ background:#dc2626; }

  .product-picker{ position:relative; }
  .product-dropdown{
    --dropdown-item-height: 34px;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    margin-top:6px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-shadow:0 12px 24px rgba(15,23,42,.08);
    max-height:calc(var(--dropdown-item-height) * 5);
    overflow-y:auto;
    z-index:20;
    display:none;
  }
  .product-dropdown.show{ display:block; }
  .product-dropdown .dropdown-item{
    width:100%;
    text-align:left;
    padding:6px 10px;
    border:0;
    background:transparent;
    font-size:.92rem;
    min-height:var(--dropdown-item-height);
  }
  .product-dropdown .dropdown-item:hover{ background:#eff6ff; }

  /* ? Segurança: campo inválido */
  .input-invalid{
    border:2px solid #dc2626 !important;
    background:#fff1f2 !important;
  }

  /* Registros: melhoria visual */
  .min-w-0{min-width:0}
  .no-table .card{border-radius:14px}
  .records-chip{font-size:.75rem}
 
  /* ... TODO o CSS que já existe acima ... */

  /* ?? Menu offcanvas — botões brancos com hover azul */
  .offcanvas .btn-outline-light {
    --bs-btn-color: #ffffff;
    --bs-btn-border-color: rgba(255,255,255,0.25);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;
  }
  /* ? Animação suave do menu (offcanvas) */
.offcanvas.offcanvas-start{
  transform: translateX(-100%);           /* estado fechado */
  transition: transform .28s ease, opacity .28s ease;
  opacity: .98;
}

.offcanvas.offcanvas-start.show{
  transform: translateX(0);              /* estado aberto */
  opacity: 1;
}

/* ? Fundo (backdrop) mais suave */
.offcanvas-backdrop{
  transition: opacity .28s ease !important;
  opacity: 0;
}
.offcanvas-backdrop.show{
  opacity: .45;                          /* pode ajustar */
}

/* Login */
.auth-locked header,
.auth-locked #sideMenu,
.auth-locked #pendingBar,
.auth-locked #libWarning{
  display:none !important;
}
.login-screen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem 1.5rem;
  background:
    radial-gradient(1200px 500px at 10% -10%, #dbeafe 0%, rgba(219,234,254,0) 60%),
    radial-gradient(900px 400px at 110% 10%, #bfdbfe 0%, rgba(191,219,254,0) 60%),
    #f8fafc;
}
.login-card{
  width:min(420px, 100%);
  border:1px solid #e2e8f0;
}
.login-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.login-card h4{
  font-weight:700;
  letter-spacing:.2px;
}