/* ────────────────────────────────────────────────────────────
   B2B Embroidery – Order Dashboard Styles
   Brand palette:
     --navy   : #003049  (Primary 1)
     --blue   : #4C87AB  (Primary 2)
     --yellow : #FDD00C  (Secondary)
     --red    : #9F1C20  (Comp 1 – action)
     --orange : #EE4C38  (Comp 2)
     --green  : #1E7C4D  (shipping / complete)
──────────────────────────────────────────────────────────── */

/* === Reset / scope === */
.b2b-dash *,
.b2b-dash *::before,
.b2b-dash *::after {
  box-sizing: border-box;
}

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600&display=swap');

/* ── Root variables ── */
.b2b-dash {
  --navy:        #003049;
  --blue:        #4C87AB;
  --blue-light:  #EBF4FA;
  --yellow:      #FDD00C;
  --yellow-dark: #C9940A;
  --red:         #9F1C20;
  --red-light:   #FAE8E8;
  --orange:      #EE4C38;
  --green:       #1E7C4D;
  --green-light: #E8F5EE;
  --gray-100:    #F7F8FA;
  --gray-200:    #EDEEF2;
  --gray-400:    #9CA3AF;
  --gray-600:    #6B7280;
  --gray-900:    #111827;

  --radius-card: 14px;
  --radius-sm:   8px;
  --shadow-card: 0 2px 8px rgba(0,48,73,.08), 0 0 0 1px rgba(0,48,73,.06);
  --shadow-hover: 0 6px 24px rgba(0,48,73,.14), 0 0 0 1px rgba(0,48,73,.08);

  font-family: 'Barlow', sans-serif;
  color: var(--gray-900);
  max-width: 860px;
}

/* ── Login notice ── */
.b2b-dash-login-notice {
  padding: 1.5rem;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--gray-600);
}
.b2b-dash-error {
  padding: 1.5rem;
  background: #FEF3F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: .9rem;
}

/* ── Dashboard header ── */
.b2b-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.5rem 0 1.25rem;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 1.25rem;
}
.b2b-dash-greeting {
  display: block;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: .2rem;
}
.b2b-dash-title {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.b2b-dash-count {
  text-align: right;
}
.b2b-dash-count-num {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.b2b-dash-count-label {
  font-size: .75rem;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── Alert banner ── */
.b2b-dash-alert {
  display: flex;
  align-items: center;
  gap: .875rem;
  background: var(--red-light);
  border: 1.5px solid var(--red);
  border-radius: var(--radius-sm);
  padding: .875rem 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--red);
  font-size: .9rem;
  animation: b2b-pulse-border 2s ease-in-out infinite;
}
.b2b-dash-alert svg {
  flex-shrink: 0;
}
.b2b-dash-alert strong {
  display: block;
  font-size: 1rem;
  margin-bottom: .1rem;
}
@keyframes b2b-pulse-border {
  0%,100% { box-shadow: 0 0 0 0 rgba(159,28,32,.25); }
  50%      { box-shadow: 0 0 0 5px rgba(159,28,32,.0); }
}

/* ── Orders list ── */
.b2b-dash-orders {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Empty state ── */
.b2b-dash-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--gray-600);
}
.b2b-dash-empty-icon {
  margin-bottom: 1rem;
}
.b2b-dash-empty h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 .5rem;
}
.b2b-dash-empty p {
  margin: 0;
  font-size: .9rem;
}

/* ═══════════════════════════════════════════
   ORDER CARD
═══════════════════════════════════════════ */
.b2b-order-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem 1rem;
  transition: box-shadow .2s ease, transform .2s ease;
  border-left: 4px solid transparent;
}
.b2b-order-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
}

/* State: action needed */
.b2b-order--action {
  border-left-color: var(--red);
  background: linear-gradient(to right, rgba(159,28,32,.04) 0%, #fff 40%);
}
/* State: complete */
.b2b-order--complete {
  border-left-color: var(--green);
  opacity: .85;
}
/* State: active */
.b2b-order--active {
  border-left-color: var(--blue);
}

/* ── Card header ── */
.b2b-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.125rem;
  flex-wrap: wrap;
}
.b2b-order-meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.b2b-order-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b2b-order-date {
  font-size: .75rem;
  color: var(--gray-400);
}

/* ── Status badge ── */
.b2b-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.b2b-badge--complete {
  background: var(--green-light);
  color: var(--green);
}

/* ── Action button ── */
.b2b-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-family: 'Barlow', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, transform .15s, box-shadow .18s;
  white-space: nowrap;
}
.b2b-btn--action {
  background: var(--red);
  color: #fff;
  box-shadow: 0 2px 8px rgba(159,28,32,.35);
  animation: b2b-btn-pulse 2.5s ease-in-out infinite;
}
.b2b-btn--action:hover {
  background: #7E1419;
  box-shadow: 0 4px 14px rgba(159,28,32,.45);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
@keyframes b2b-btn-pulse {
  0%,100% { box-shadow: 0 2px 8px rgba(159,28,32,.35); }
  50%      { box-shadow: 0 2px 18px rgba(159,28,32,.55); }
}

/* ═══════════════════════════════════════════
   PROGRESS TRACKER
═══════════════════════════════════════════ */
.b2b-tracker {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: .25rem 0 .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.b2b-tracker::-webkit-scrollbar {
  display: none;
}

.b2b-tracker-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 64px;
  position: relative;
}

/* Icon + connecting line wrapper */
.b2b-tracker-icon-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  position: relative;
  margin-bottom: .4rem;
}

/* Icon circle */
.b2b-tracker-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: background .25s, box-shadow .25s;
}
.b2b-tracker-icon svg {
  width: 18px;
  height: 18px;
}

/* States */
.b2b-tracker-step--future .b2b-tracker-icon {
  background: var(--gray-200);
  color: var(--gray-400);
}
.b2b-tracker-step--done .b2b-tracker-icon {
  background: var(--navy);
  color: #fff;
}
/* Current: color comes from inline style */
.b2b-tracker-icon--current {
  box-shadow: 0 0 0 4px rgba(0,0,0,.1);
}
.b2b-tracker-icon--done {
  background: var(--navy);
  color: #fff;
}

/* Connecting line */
.b2b-tracker-line {
  flex: 1;
  height: 3px;
  background: var(--gray-200);
  position: absolute;
  top: 50%;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  transform: translateY(-50%);
  z-index: 0;
  transition: background .3s;
}
.b2b-tracker-line--done {
  background: var(--navy);
}

/* Labels */
.b2b-tracker-label {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: 0 2px;
}
.b2b-tracker-label-main {
  font-size: .68rem;
  font-weight: 600;
  color: var(--gray-600);
  line-height: 1.2;
  text-align: center;
}
.b2b-tracker-step--done .b2b-tracker-label-main {
  color: var(--navy);
}
.b2b-tracker-step--current .b2b-tracker-label-main {
  color: var(--step-color, var(--blue));
  font-weight: 700;
}
.b2b-tracker-label-sub {
  font-size: .6rem;
  color: var(--step-color, var(--blue));
  opacity: .85;
  text-align: center;
  line-height: 1.2;
}

/* Pulse on current active step */
.b2b-tracker-step--current .b2b-tracker-icon--current {
  animation: b2b-step-pulse 2s ease-in-out infinite;
}
@keyframes b2b-step-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,0,0,.15), 0 0 0 4px rgba(0,0,0,.06); }
  50%      { box-shadow: 0 0 0 6px rgba(0,0,0,.0), 0 0 0 4px rgba(0,0,0,.06); }
}

/* ── Info bar (ship date / tracking) ── */
.b2b-order-info-bar {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--gray-200);
  margin-top: .75rem;
  padding-top: .75rem;
}
.b2b-info-item {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8rem;
  color: var(--gray-600);
}
.b2b-info-item svg {
  color: var(--blue);
  flex-shrink: 0;
}
.b2b-info-item strong {
  color: var(--gray-900);
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .b2b-dash-title   { font-size: 1.6rem; }
  .b2b-order-card   { padding: 1rem 1rem .875rem; }
  .b2b-order-header { flex-direction: column; align-items: flex-start; }
  .b2b-tracker-icon { width: 34px; height: 34px; }
  .b2b-tracker-icon svg { width: 15px; height: 15px; }
  .b2b-tracker-label-main { font-size: .62rem; }
}

/* ── Pagination ── */
.b2b-dash-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}
.b2b-page-btn {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 600;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  transition: background .18s, transform .15s;
}
.b2b-page-btn:hover {
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.b2b-page-btn--disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  cursor: default;
}
.b2b-page-info {
  font-size: .85rem;
  color: var(--gray-600);
  font-weight: 500;
}

/* ── Search bar ── */
.b2b-dash-search {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.b2b-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 420px;
}
.b2b-search-icon {
  position: absolute;
  left: .75rem;
  color: var(--gray-400);
  pointer-events: none;
  flex-shrink: 0;
}
.b2b-search-input {
  width: 100%;
  padding: .55rem 2.25rem .55rem 2.25rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: 'Barlow', sans-serif;
  font-size: .9rem;
  color: var(--gray-900);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
}
.b2b-search-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(76,135,171,.15);
}
.b2b-search-input::placeholder {
  color: var(--gray-400);
}
/* hide browser native clear button - we have our own */
.b2b-search-input::-webkit-search-cancel-button { display: none; }
.b2b-search-clear {
  position: absolute;
  right: .6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1;
  padding: .2rem .3rem;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.b2b-search-clear:hover {
  color: var(--gray-900);
  background: var(--gray-200);
}
.b2b-search-status {
  font-size: .82rem;
  color: var(--gray-600);
  white-space: nowrap;
}