.btn-orange{
  background-color:#f97316;
  border-color:#f97316;
  color:#fff;
}
.btn-orange:hover{
  background-color:#ea580c;
  border-color:#ea580c;
  color:#fff;
}

/* ==================================
   CSS for the Stepper Component
   ==================================
*/

/* ======  VARIABLES (MODIFIED) ====== */
:root {
  --completed-color: #22c55e; /* Green for completed steps */
  --active-color:    #f97316; /* Orange for the current step */
  --active-dark:     #ea580c; /* Darker orange for current step text */
  --line:            #d1d5db; /* gray-300 */
  --bg:              #ffffff;
  --radius:          999px;
}

/* ======  BASE STYLES (for the component) ====== */
.stepper-container *,
.stepper-container *::before,
.stepper-container *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

/* ======  STEPPER LAYOUT  ====== */
.stepper {
    display: inline-flex;       /* allow width to grow to content */
    width: max-content;         /* make list wider than container when needed */
    list-style: none;
    position: relative;
    font-family: 'Inter', sans-serif;
    padding: 0 1rem;
    gap: 1rem;                  /* spacing between steps */
    overflow: visible !important; /* scrolling handled by wrapper */
    padding-bottom: 1rem;
  }

/* ======  STEP (The LI element) ====== */
  .step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;             /* key change: fixed-basis items so row can overflow */
    min-width: 160px;           /* wide enough to force overflow on phones */
    cursor: pointer;
    scroll-snap-align: start;   /* snap each step cleanly when scrolling */
  }
/* Ensure nothing else overrides the fixed width behavior */
.stepper-container #publicStepper.stepper .step {
    flex: 0 0 auto !important;
    min-width: 160px !important;
  }
  .stepper-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory; /* enable snap scrolling */
  }
/* ====== Horizontal stepper scroll wrapper (smart overflow) ====== */
.stepper-scroll {
  position: relative;
}
/* leave space for overlay buttons */
.stepper-scroll .stepper-container {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.stepper-scroll::before,
.stepper-scroll::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  display: none; /* only show when overflowing */
  z-index: 3;
}
.stepper-scroll.is-overflowing::before {
  display: block;
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
.stepper-scroll.is-overflowing::after {
  display: block;
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}
.stepper-scroll .stepper-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #e9ecef;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: none; /* hidden until overflow */
  align-items: center;
  justify-content: center;
  z-index: 4;
  cursor: pointer;
}
.stepper-scroll .stepper-scroll-btn i { line-height: 1; }
.stepper-scroll .stepper-scroll-btn.prev { left: 6px; }
.stepper-scroll .stepper-scroll-btn.next { right: 6px; }
.stepper-scroll.is-overflowing .stepper-scroll-btn { display: inline-flex; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stepper-scroll .stepper-container { scroll-behavior: auto; }
}
  .stepper-container::-webkit-scrollbar { height: 8px; }
  .stepper-container::-webkit-scrollbar-thumb { background: #e9ecef; border-radius: 4px; }
/* The gray background line connecting steps */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  height: 4px;
  background: var(--line);
  left: 50%;
  width: 100%;
  z-index: 0;
}

/* The green progress fill line (MODIFIED) */
.step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 20px;
    height: 4px;
    background: var(--completed-color); /* Use green for the completed line */
    left: 50%;
    width: var(--bar-w, 0%); /* This width is animated by JS */
    transition: width 0.4s ease;
    z-index: 1;
}

/* =============================
   Desktop overrides (>= 992px)
   ============================= */
@media (min-width: 992px) {
  /* Stop horizontal scrolling on desktop */
  .stepper-container { overflow-x: visible; }

  /* Make the list fill the card instead of stretching beyond it */
  #publicStepper.stepper {
    display: flex;     /* override inline-flex */
    width: 100%;       /* fill available width */
    gap: 2rem;         /* nicer spacing on desktop */
  }

  /* Let steps stretch to fit the row evenly on desktop */
  #publicStepper.stepper .step {
    flex: 1 1 0;       /* allow growth/shrink */
    min-width: 0;      /* remove the fixed 160px so it doesn’t overflow */
  }
}

/* ======  CIRCLE  ====== */
.circle {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  position: relative;
  background: var(--bg);
  transition: border-color 0.4s ease, background 0.4s ease;
  z-index: 2;
}

/* numbers & ticks overlap so we can fade between them */
.num,
.tick {
  grid-column-start: 1;
  grid-row-start: 1;
  font-size: 1rem;
  line-height: 1;
  font-weight: 600;
  color: var(--line);
  transition: opacity 0.25s ease, color 0.4s ease;
}

.tick {
  width: 20px;
  height: 10px;
  border-left: 3px solid var(--bg);
  border-bottom: 3px solid var(--bg);
  transform: rotate(-45deg);
  opacity: 0;
}

/* ====== STATES (MODIFIED) ====== */
/* Completed State */
.step.is-complete .circle {
  background: var(--completed-color);   /* Use green */
  border-color: var(--completed-color); /* Use green */
}
.step.is-complete .num { opacity: 0; }
.step.is-complete .tick {
  border-color: var(--bg);
  opacity: 1;
  transition-delay: 0.15s;
}
.step.is-complete .label {
  color: #1f2937; /* gray-800 */
}

/* Active (Current) State */
.step.is-current .circle {
  border-color: var(--active-color);    /* Use orange */
}
.step.is-current .num { color: var(--active-dark); }     /* Use dark orange */
.step.is-current .label {
    color: var(--active-dark);          /* Use dark orange */
    font-weight: 700;
}

/* Disabled (Future) State */
.step.is-disabled {
    cursor: not-allowed;
    pointer-events: none;
}
.step.is-disabled .label {
    color: #9ca3af; /* gray-400 */
}


/* ======  LABELS  ====== */
.label {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563; /* gray-600 */
  text-align: center;
  max-width: 140px;
  white-space: normal; /* Allow text to wrap */
}

/* Shared Modal Elements (from your original file) */
#shipmentProgressModal .modal-content {
    background-color: #f8f9fa;
}
#shipmentProgressModal .modal-header {
    border-bottom: 1px solid #dee2e6;
    background-color: #ffffff;
}
.border-dashed {
    border: 1px dashed #ced4da;
}


/* Sub-Status Panel Styling */
#peSubStatusPanel .form-check {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease;
    border: 1px solid #e9ecef;
}
#peSubStatusPanel .form-check:not(:last-child) {
    margin-bottom: 0.5rem;
}
#peSubStatusPanel .form-check.next-expected {
    background-color: #f8f9fa;
    border-color: #ced4da;
}
#peSubStatusPanel .form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0;
    cursor: pointer;
}
#peSubStatusPanel .form-check-label {
    flex-grow: 1;
    margin-left: 0.75rem;
    color: #495057;
}
#peSubStatusPanel .date-field {
    width: 150px;
}
#peSubStatusPanel .date-field:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
}
#peSubStatusPanel .info-icon {
    font-size: 1.1rem;
    color: #6c757d;
    cursor: help;
}
#peSubStatusPanel .info-icon:hover {
    color: #f97316;
}

/* Buttons */
.btn-save-update, #peSaveAndNextBtn {
    background-color: #f97316;
    color: #ffffff;
    border-color: #f97316;
}
.btn-save-update:hover, #peSaveAndNextBtn:hover {
    background-color: #ea580c;
    border-color: #ea580c;
    color: #ffffff;
}
.btn-progress {
    background-color: #ff8c00;
    border-color: #ff8c00;
    color: #fff;
}
.btn-progress:hover {
    background-color: #e07b00;
    border-color: #e07b00;
    color: #fff;
}

/* Remark tags below the remarks textarea */
#peRemarkTags .remark-tag {
    display: inline-block;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}
#peRemarkTags .remark-tag button {
    border: none;
    background: none;
    color: #dc3545;
    margin-left: 0.25rem;
    font-weight: bold;
    line-height: 1;
}

/* --- Shipment Details Toggle in Progress Editor --- */
#peDetailsToggle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none;
    border-radius: 0.375rem; /* 6px */
    transition: background-color 0.2s ease;
    min-height: 44px; /* Touch target minimum height */
    font-weight: 500;
    background-color: transparent;
}
#peDetailsToggle:hover {
    background-color: #f3f4f6; /* Light hover tint */
}
#peDetailsToggle i {
    transition: transform 0.2s ease;
}
#peDetailsToggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

#peDetailsToggle .header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#peDetailsContent {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-in, padding-top 0.25s ease-out;
}
#peDetailsContent.show {
    padding-top: 0.5rem;
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.25s ease-in, opacity 0.25s ease-out 0.05s, padding-top 0.25s ease-in;
}

#peDetailsGrid {
    display: grid;
    /* Responsive grid: creates as many 240px columns as fit */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 0.5rem 1.5rem; /* row-gap column-gap */
    font-size: 0.875rem; /* 14px */
    
    /* Animation */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s ease-in, padding-top 0.25s ease-out;
}
#peDetailsGrid.show {
    padding-top: 1rem;
    max-height: 1000px; /* Large enough to not clip content */
    opacity: 1;
    transition: max-height 0.25s ease-in, opacity 0.25s ease-out 0.05s, padding-top 0.25s ease-in;
}
#peDetailsGrid .detail-item .label {
    color: #6c757d; /* Light-grey text for labels */
    font-weight: 500;
}
#peDetailsGrid .grid-divider {
    grid-column: 1 / -1; /* Span all columns */
    border-top: 1px solid #e5e7eb;
    margin: 0.5rem 0;
}
#peDetailsGrid .grid-heading {
    grid-column: 1 / -1;
    font-weight: 600;
    font-size: 0.75rem; /* 12px */
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: -0.25rem;
}
#peDetailsGrid .comments-section {
    grid-column: 1 / -1;
}

#peSaveAndNextBtn.disabled {
    opacity: 0.65;
    pointer-events: none; /* Makes it truly unclickable */
    cursor: not-allowed;
}

/* Style for the completion toggle label */
#milestoneToggleLabel {
    transition: color 0.2s ease-in-out;
}
#milestoneToggleLabel.text-success { color: #198754 !important; }
#milestoneToggleLabel.text-danger { color: #ffffff !important; }