/* ================================================================
   AUTH.CSS — §10 PATCH — New Order page + Orders table refinements

   Add this block at the end of §10 in auth.css, or at the end of the
   stylesheet that loads after base.css.

   Purpose:
   - Fix low-contrast service stat labels in dark mode.
   - Restore service tag colors in dark mode.
   - Add horizontal fade behavior for the New Order platform selector.
   - Add progress-style status badges inside the Orders table.
   ================================================================ */


/* ================================================================
   1) Service stat label — dark mode contrast fix

   In dark mode, --app-ink-tertiary is too low-contrast on
   --app-surface-1 (#18181B). Using --app-ink-secondary improves
   readability while keeping the label visually secondary.

   Note:
   This selector only applies if the HTML element has .svc-stat-label.
   If your current markup uses only text-body-secondary, add
   .svc-stat-label to those stat-label elements.
   ================================================================ */

[data-bs-theme="dark"] .svc-stat-label {
  color: var(--app-ink-secondary);
}


/* ================================================================
   2) Service tags — dark mode color normalization

   The tag color tokens are already defined in base.css.
   This patch explicitly reapplies those tokens in dark mode so service
   tags remain visible and consistent on dark surfaces.
   ================================================================ */

[data-bs-theme="dark"] .svc-tag-speed {
  background:   var(--tag-speed-bg);
  border-color: var(--tag-speed-border);
  color:        var(--tag-speed-ink);
}

[data-bs-theme="dark"] .svc-tag-refill {
  background:   var(--tag-refill-bg);
  border-color: var(--tag-refill-border);
  color:        var(--tag-refill-ink);
}

[data-bs-theme="dark"] .svc-tag-popular {
  background:   var(--tag-popular-bg);
  border-color: var(--tag-popular-border);
  color:        var(--tag-popular-ink);
}

[data-bs-theme="dark"] .svc-tag-stable {
  background:   var(--tag-stable-bg);
  border-color: var(--tag-stable-border);
  color:        var(--tag-stable-ink);
}


/* ================================================================
   3) New Order platform horizontal scroll

   Used by .neworder-platform-scroll around the platform filter buttons.

   Behavior:
   - Allows horizontal scrolling when buttons overflow.
   - Hides the native scrollbar.
   - Adds a soft fade edge to indicate more content is available.
   - Reverses the fade direction for RTL layouts.
   ================================================================ */

.neworder-platform-scroll {
  position:           relative;
  overflow-x:         auto;
  overflow-y:         hidden;
  scrollbar-width:    none;
  -ms-overflow-style: none;
  padding-block:      1px;

  /* Fade edge for LTR layouts */
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 32px);
          mask-image: linear-gradient(to left, transparent 0%, black 32px);
}

.neworder-platform-scroll::-webkit-scrollbar {
  display: none;
}

html[dir="rtl"] .neworder-platform-scroll {
  /* Fade edge for RTL layouts */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32px);
          mask-image: linear-gradient(to right, transparent 0%, black 32px);
}


/* ================================================================
   4) Orders table progress status badge

   Used with:
   .badge.rounded-pill.badge-status-inprogress.badge-progress-status

   Design intent:
   - Keep the badge compact.
   - Preserve the existing table badge spacing from base.css.
   - Render the progress fill behind the text.
   - Prevent the progress text from expanding the badge width too much.

   Important:
   max-inline-size controls the maximum visual width.
   Increase/decrease it if the badge needs to match your previous width
   more closely.
   ================================================================ */

.table-app td .badge-progress-status {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  inline-size: auto;
  max-inline-size: 105px;
}


/* Progress fill layer behind the badge text */
.table-app td .badge-progress-status .progress-bar {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;

  width: 0;
  height: 100%;

  border-radius: inherit;
  background: currentColor;
  opacity: 0.16;

  z-index: -1;
  transition: width var(--app-dur-slow) var(--app-ease-out);
}


/* Text layer above the progress fill */
.table-app td .badge-progress-status .progress-text {
  position: relative;
  z-index: 1;

  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Numeric percentage styling */
.table-app td .badge-progress-status .progress-percentage {
  font-family: var(--app-font-mono);
  font-weight: 700;
}