/* Visual polish layer: keeps the workflow CSS small and easy to revise. */
:root {
  --paper: #f4f7f4;
  --shadow: 0 12px 34px rgba(25, 68, 51, .08);
  --soft-shadow: 0 5px 18px rgba(25, 68, 51, .06);
}
body {
  background:
    radial-gradient(circle at 90% 3%, rgba(216, 238, 225, .55), transparent 22rem),
    var(--paper);
}
.sidebar {
  background: linear-gradient(180deg, #163f30 0%, #1c4a39 100%);
  box-shadow: 7px 0 22px rgba(18, 56, 42, .08);
}
.brand { letter-spacing: .5px; }
.role-chip {
  display: inline-block; padding: 3px 8px; border-radius: 99px;
  background: rgba(255,255,255,.08); color: #c9e2d8;
}
.nav-btn { transition: background .18s ease, transform .18s ease; }
.nav-btn:hover { transform: translateX(2px); }
.main { max-width: 1500px; width: 100%; }
.top { padding-bottom: 13px; border-bottom: 1px solid rgba(216, 226, 220, .8); }
.top h1 { font-size: 25px; letter-spacing: -.5px; }
.top a { color: var(--green); font-weight: 700; }
.card,.panel,.product-card {
  border-color: rgba(222, 231, 226, .9);
  box-shadow: var(--soft-shadow);
}
.card { position: relative; overflow: hidden; }
.card:after {
  content: ""; position: absolute; width: 55px; height: 55px; right: -16px; top: -16px;
  border-radius: 50%; background: var(--green2);
}
.card b { color: var(--green); letter-spacing: -1px; }
.panel { backdrop-filter: blur(8px); }
.primary,.ghost,.small-btn,.reject-btn,.location-plus {
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.primary:hover,.ghost:hover,.small-btn:hover,.reject-btn:hover,.location-plus:hover {
  transform: translateY(-1px);
}
.primary:hover { box-shadow: 0 7px 16px rgba(30,105,76,.2); }
.field input,.field select,.field textarea,.search {
  border-color: #d8e3dd; box-shadow: inset 0 1px 2px rgba(18, 56, 42, .025);
}
.field input:focus,.field select:focus,.field textarea:focus,.search:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,105,76,.1);
}
.table th { background: #f8faf8; }
.table tr:hover td { background: #fbfdfb; }
.tag { font-weight: 700; }
.warehouse-actions button {
  position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease;
}
.warehouse-actions button:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.warehouse-actions button:after {
  content: ""; position: absolute; right: -26px; bottom: -28px; width: 82px; height: 82px;
  border-radius: 50%; background: rgba(227,243,234,.7);
}
.warehouse-actions span,.warehouse-actions b,.warehouse-actions small { position: relative; z-index: 1; }
.product-card { transition: transform .18s ease, box-shadow .18s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.order-summary-card { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.order-summary-card:hover { transform: translateY(-2px); border-color: #b7d7c5; box-shadow: var(--shadow); }
.order-tabs { padding: 4px; border-radius: 12px; background: rgba(255,255,255,.65); }
.order-tabs button { transition: background .16s ease, color .16s ease; }
.inbound-panel { padding: 20px; }
.inbound-tabs { padding: 4px; width: fit-content; border-radius: 12px; background: #f1f5f2; }
.inbound-tabs button { border-color: transparent; }
.location-list span { background: #fafcfb; }
.modal-wrap { backdrop-filter: blur(4px); }
.modal,.confirm-box { animation: pop-in .16s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.login-art { background: linear-gradient(145deg,#143f2e,#287456); }
.login-box { padding: 24px; border-radius: 18px; background: rgba(255,255,255,.74); }
.demo-tip { border: 1px solid #cde4d7; }
@media(max-width:800px) {
  .main { padding: 14px; }
  .mobile-head { background: linear-gradient(100deg,#163f30,#24664c); }
  .mobile-nav { box-shadow: 0 4px 12px rgba(18,56,42,.05); }
  .panel { padding: 15px; }
  .warehouse-actions button { min-height: 126px; }
  .top { padding-bottom: 10px; }
  .top h1 { font-size: 22px; }
}