body { background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%); padding-top: 112px; }
.navbar-brand { font-weight: 700; }
.hero { background: linear-gradient(90deg, #f3e8ff, #ffe4e6); border-radius: 12px; padding: 16px; margin: 12px 0; }
.card { border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.chart-box { margin-top: 12px; }
.mega-menu .dropdown-menu { width: 100%; max-width: 900px; }
.badge-soft { background-color: #f3e8ff; color: #7c3aed; border-radius: 999px; padding: 4px 8px; font-weight: 600; }
.btn-gradient { background: linear-gradient(90deg, #7c3aed, #0ea5e9); color: #fff; border: none; }
.btn-gradient:hover { opacity: .9; }
.grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; }
.product-card .title { font-weight: 700; }
.product-card .unit { color: #555; }
.sticky-toolbar { position: sticky; top: 0; z-index: 1020; background: #ffffff; border-bottom: 1px solid #eee; }
.fixed-toolbar { position: fixed; top: 56px; left: 0; right: 0; z-index: 1020; background: #ffffff; border-bottom: 1px solid #eee; }
.toolbar-spacer { height: 48px; }
.scroll-section { max-height: calc(100vh - 220px); overflow: auto; }
.toolbar-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: #333; }
.toolbar-links a:hover { background-color: #f3e8ff; }
.header-tabs .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; }
.header-tabs .nav-link:hover { background-color: #f3e8ff; }

/* Mobile adjustments for quantity inputs (compound and simple) */
@media (max-width: 600px) {
  .input-group.input-group-sm .form-control {
    font-size: 12px;
    padding: 6px 8px;
  }
  .input-group.input-group-sm .input-group-text {
    font-size: 12px;
    padding: 6px 8px;
  }
  .in-first, .in-second, .out-first, .out-second, .r-first, .r-second {
    min-width: 0;
  }
  .in-simple, .out-simple, .r-simple {
    font-size: 14px;
    padding: 8px 10px;
  }
}

@media (max-width: 400px) {
  body {
    font-size: 0.9rem;
  }
  .navbar-brand {
    font-size: 0.85rem;
  }
  .card .fw-bold {
    font-size: 0.95rem;
  }
  .fs-4 {
    font-size: 1.2rem !important;
  }
  .fs-5 {
    font-size: 1rem !important;
  }
  .btn, .btn-sm {
    font-size: 0.75rem;
  }
}

/* Keep retailer actions reachable on narrow phone screens. */
#retList > .list-group-item {
  flex-wrap: wrap;
  gap: .5rem;
}
#retList > .list-group-item > div:last-child {
  min-width: 0;
  max-width: 100%;
}
#retList > .list-group-item > div:last-child > .d-flex {
  flex-wrap: wrap;
  justify-content: flex-end;
}
#retList .ret-sort-input {
  max-width: 8rem;
}

@media (max-width: 991.98px) {
  #navbarBrand {
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}