/* =============================================================================
   Africa Conglomerate — Customer shell (B2C) + brand-wide Bootstrap mapping
   All colours come from theme.css (--acm-*). Do not hardcode hex here.

   1. Brand-wide: Bootstrap components whose colours are compiled in (not
      driven by --bs-primary) are re-pointed at the brand accent so B2B and
      B2C surfaces use ONE primary.
   2. .acm-customer: the sidebar-less shell B2C customers get instead of the
      operator dashboard — landing-page surfaces, cards and pill buttons.
   ============================================================================= */

/* ── 1. Brand accent for compiled Bootstrap colours ──────────────────────── */
.btn-primary {
  --bs-btn-bg:                   var(--acm-accent);
  --bs-btn-border-color:         var(--acm-accent);
  --bs-btn-hover-bg:             var(--acm-accent-hover);
  --bs-btn-hover-border-color:   var(--acm-accent-hover);
  --bs-btn-active-bg:            var(--acm-accent-active);
  --bs-btn-active-border-color:  var(--acm-accent-active);
  --bs-btn-disabled-bg:          var(--acm-accent);
  --bs-btn-disabled-border-color:var(--acm-accent);
  --bs-btn-focus-shadow-rgb:     var(--acm-accent-rgb);
}
.btn-outline-primary {
  --bs-btn-color:                var(--acm-accent);
  --bs-btn-border-color:         var(--acm-accent);
  --bs-btn-hover-bg:             var(--acm-accent);
  --bs-btn-hover-border-color:   var(--acm-accent);
  --bs-btn-active-bg:            var(--acm-accent-active);
  --bs-btn-active-border-color:  var(--acm-accent-active);
  --bs-btn-disabled-color:       var(--acm-accent);
  --bs-btn-disabled-border-color:var(--acm-accent);
  --bs-btn-focus-shadow-rgb:     var(--acm-accent-rgb);
}
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--acm-accent-rgb), .55);
  box-shadow: 0 0 0 .25rem rgba(var(--acm-accent-rgb), .25);
}
.form-check-input:checked,
.form-check-input:indeterminate {
  background-color: var(--acm-accent);
  border-color: var(--acm-accent);
}
.form-check-input:focus {
  border-color: rgba(var(--acm-accent-rgb), .55);
  box-shadow: 0 0 0 .25rem rgba(var(--acm-accent-rgb), .25);
}
.pagination {
  --bs-pagination-active-bg:           var(--acm-accent);
  --bs-pagination-active-border-color: var(--acm-accent);
}
.progress,
.progress-stacked { --bs-progress-bar-bg: var(--acm-accent); }
.dropdown-menu    { --bs-dropdown-link-active-bg: var(--acm-accent); }
.list-group {
  --bs-list-group-active-bg:           var(--acm-accent);
  --bs-list-group-active-border-color: var(--acm-accent);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--acm-accent); }

/* Pills everywhere (decided 2026-10-02): buttons and badges are rounded on every
   surface, B2B included. Grouped controls keep square corners so their shared
   edges still meet. */
.btn:not(.btn-group > .btn):not(.input-group > .btn):not(.dropdown-toggle-split):not(.h-100):not(.text-start) {
  border-radius: 50rem;
}
.btn-sm:not(.btn-group > .btn):not(.input-group > .btn) { padding-left: .9rem; padding-right: .9rem; }
.badge { border-radius: 50rem; }
/* Option CARDS built from .btn (btn-check + tall label, e.g. the shipping / tours
   profile setup): a pill radius on a tall block makes an oval, so they keep the
   card radius, and the selected card's muted copy must stay readable on the accent. */
.btn.h-100, .btn.text-start { border-radius: .75rem; }
.btn-check:checked + .btn .text-muted,
.btn-check:checked + .btn .text-secondary { color: inherit !important; opacity: .85; }

/* ── 2. Customer shell ───────────────────────────────────────────────────── */
.acm-customer {
  background: var(--acm-surface);
  min-height: calc(100vh - var(--acm-nav-h, 56px));   /* fill under the fixed navbar */
  color: var(--acm-text);
}

/* Horizontal customer nav — the B2C replacement for the operator sidebar */
.customer-nav {
  background: var(--customer-bar-bg);
  border-bottom: 1px solid var(--customer-bar-border);
  position: sticky;
  top: var(--acm-nav-h, 56px);      /* flush under the fixed-top navbar, whatever its height */
  z-index: 1019;                    /* below the navbar (1030), above content */
}
.customer-nav-list {
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: .5rem 0;
  list-style: none;
  overflow-x: auto;                 /* one scrollable row on phones */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.customer-nav-list::-webkit-scrollbar { display: none; }
.customer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  padding: .45rem .95rem;
  border-radius: 50rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--customer-link);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.customer-nav-link:hover {
  background: var(--acm-surface-2);
  color: var(--acm-text);
}
.customer-nav-link.active {
  background: var(--customer-link-active-bg);
  color: var(--customer-link-active);
}

/* Content column — same measure as the landing page sections */
.customer-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
}
@media (max-width: 576px) {
  .customer-main { padding: 1rem 1rem 2.5rem; }
}

/* Landing-page component language inside the shell */
.acm-customer .card {
  background: var(--acm-card);
  border: 1px solid var(--acm-border);
  border-radius: .75rem;
}
.acm-customer .card-header { background: var(--acm-card); border-bottom-color: var(--acm-border); }
.acm-customer .table       { --bs-table-border-color: var(--acm-border-2); }
.acm-customer .form-control,
.acm-customer .form-select      { border-color: var(--acm-border-2); }
.acm-customer .text-muted       { color: var(--acm-text-muted) !important; }
.acm-customer .bg-light         { background-color: var(--acm-surface-2) !important; }