:root {
  --sfl-primary: #800020;
  --sfl-secondary: #f58220;
  --sfl-accent: #ffffff;
  --sfl-bg: #f5f5f5;
}

/* Pending Dispatch: compact global AWB signal, safe portalled menus and reminders. */
.sfl-pd-awb-status {
  display:flex;
  align-items:center;
  margin-top:4px;
  min-height:16px;
}
.sfl-pd-signal {
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  vertical-align:middle;
}
.sfl-pd-signal-button {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(15,23,42,.18);
  box-shadow:0 2px 5px rgba(15,23,42,.13);
  cursor:pointer;
  padding:0;
  line-height:1;
}
.sfl-pd-signal-button:focus-visible {
  outline:2px solid #2563eb;
  outline-offset:2px;
}
.sfl-pd-age {
  width:11px;
  height:11px;
  border-radius:999px;
}
.sfl-pd-age-has-text {
  width:auto;
  min-width:11px;
  height:17px;
  padding:0 5px;
  border-radius:999px;
}
.sfl-pd-age-text {
  color:#fff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.01em;
  white-space:nowrap;
}
.sfl-pd-age-green { background:#22c55e; }
.sfl-pd-age-dark-green { background:#15803d; }
.sfl-pd-age-amber { background:#d97706; }
.sfl-pd-age-red { background:#dc2626; }
.sfl-pd-age-maroon { background:#800020; }
.sfl-pd-age-upcoming { background:#94a3b8; }
.sfl-pd-action {
  width:10px;
  height:10px;
  border-radius:3px;
}
.sfl-pd-action-tomorrowdispatch { background:#2563eb; }
.sfl-pd-action-missed { background:#ef4444; }
.sfl-pd-action-customerhold { background:#f59e0b; }
.sfl-pd-action-postponed { background:#7c3aed; }
.sfl-pd-selected-count {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:2px 8px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#f8fafc;
  color:#475569;
  font-size:11px;
  font-weight:800;
}
.sfl-pd-row-menu-button {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:25px;
  height:25px;
  margin-left:4px;
  border:1px solid #cbd5e1;
  border-radius:7px;
  background:#fff;
  color:#334155;
  font-size:18px;
  font-weight:900;
  line-height:1;
  vertical-align:middle;
  cursor:pointer;
}
.sfl-pd-row-menu-button:hover,
.sfl-pd-row-menu-button[aria-expanded="true"] { background:#f1f5f9; border-color:#94a3b8; }
.sfl-pd-row-menu {
  position:fixed;
  z-index:2147483400;
  display:none;
  overflow:auto;
  padding:6px;
  border:1px solid #dbe2ea;
  border-radius:11px;
  background:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,.24);
}
.sfl-pd-menu-item {
  display:block;
  width:100%;
  padding:8px 10px;
  border:0;
  border-radius:7px;
  background:#fff;
  color:#172033;
  text-align:left;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.sfl-pd-menu-item:hover,
.sfl-pd-menu-item:focus { background:#f1f5f9; outline:0; }
.sfl-pd-menu-item.is-tomorrow { color:#1d4ed8; }
.sfl-pd-menu-item.is-missed,
.sfl-pd-menu-item.is-cancelled { color:#b91c1c; }
.sfl-pd-menu-item.is-hold { color:#a16207; }
.sfl-pd-menu-item.is-postponed { color:#6d28d9; }
.sfl-pd-menu-item.is-shoes-na { color:#c2410c; }
.sfl-pd-menu-divider { height:1px; margin:5px 3px; background:#e2e8f0; }
.sfl-pd-detail-popup {
  position:fixed;
  z-index:2147483420;
  display:none;
  overflow:auto;
  max-height:calc(100vh - 16px);
  border:1px solid #dbe2ea;
  border-radius:12px;
  background:#fff;
  box-shadow:0 20px 50px rgba(15,23,42,.25);
}
.sfl-pd-detail-head,
.sfl-pd-action-modal-head,
.sfl-pd-reminder-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sfl-pd-detail-head {
  padding:10px 12px;
  border-bottom:1px solid #e2e8f0;
  color:#3b1722;
  font-size:12px;
}
.sfl-pd-detail-close,
.sfl-pd-action-modal-close,
.sfl-pd-reminder-close {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:29px;
  height:29px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#800020;
  color:#fff;
  font-size:19px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.sfl-pd-detail-body { padding:9px 12px 12px; }
.sfl-pd-detail-row {
  display:grid;
  grid-template-columns:minmax(105px, .8fr) minmax(0, 1.2fr);
  gap:10px;
  padding:5px 0;
  border-bottom:1px dashed #edf0f3;
  font-size:11px;
}
.sfl-pd-detail-row:last-child { border-bottom:0; }
.sfl-pd-detail-row strong { color:#64748b; }
.sfl-pd-detail-row span { color:#172033; overflow-wrap:anywhere; }
.sfl-pd-action-modal {
  position:fixed;
  inset:0;
  z-index:2147483450;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,23,42,.5);
}
.sfl-pd-action-modal-card {
  width:min(430px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 24px 65px rgba(15,23,42,.3);
}
.sfl-pd-action-modal-head {
  padding:11px 14px;
  border-bottom:1px solid #e2e8f0;
  color:#3b1722;
}
.sfl-pd-action-modal-body { padding:14px; }
.sfl-pd-action-modal-body p { margin:0 0 12px; color:#475569; font-size:13px; }
.sfl-pd-action-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.sfl-pd-page-toast {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2147483460;
  max-width:min(360px, calc(100vw - 24px));
  padding:10px 13px;
  border:1px solid #86efac;
  border-radius:10px;
  background:#f0fdf4;
  color:#166534;
  font-size:12px;
  font-weight:800;
  box-shadow:0 14px 35px rgba(15,23,42,.2);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease;
}
.sfl-pd-page-toast.is-error { border-color:#fecaca; background:#fff1f2; color:#9f1239; }
.sfl-pd-page-toast.is-visible { opacity:1; transform:translateY(0); }
.sfl-pd-reminder {
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:2147483300;
  width:min(390px, calc(100vw - 24px));
  padding:12px;
  border:1px solid #fecaca;
  border-left:4px solid #800020;
  border-radius:12px;
  background:#fff;
  color:#172033;
  box-shadow:0 18px 48px rgba(15,23,42,.24);
}
.sfl-pd-reminder-head strong { color:#800020; font-size:13px; }
.sfl-pd-reminder-list { display:grid; gap:3px; margin:9px 0; color:#475569; font-size:11px; }
.sfl-pd-reminder-actions { display:flex; justify-content:flex-end; gap:7px; }
@media (max-width: 575.98px) {
  .sfl-pd-reminder { right:8px; bottom:8px; width:calc(100vw - 16px); }
  .sfl-pd-detail-popup { max-width:calc(100vw - 16px); }
  .sfl-pd-action-modal-actions { flex-wrap:wrap; }
}

body {
  background: var(--sfl-bg);
  font-size: 14px;
  color: #222;
}

.app-shell {
  min-height: 100vh;
}

.app-shell > .flex-grow-1 {
  min-width: 0;
}

.sidebar {
  width: 270px;
  min-height: 100vh;
  background: linear-gradient(180deg, #641128 0%, var(--sfl-primary) 58%, #45000f 100%);
  color: #fff;
  padding: 18px 14px;
  flex: 0 0 270px;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.sidebar-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 8px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.19);
  margin-bottom: 16px;
}

.sidebar-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sfl-secondary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}

.sidebar-title {
  font-weight: 700;
  line-height: 1.1;
}

.sidebar-subtitle {
  font-size: 12px;
  opacity: .72;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  padding: 10px 11px;
  border-radius: 10px;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}

.sidebar-link:hover,
.sidebar-link.active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.sidebar-link.active {
  box-shadow: inset 4px 0 0 var(--sfl-secondary);
  font-weight: 700;
}

.sidebar-link.disabled {
  opacity: .55;
}

.sidebar-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .11);
  flex: 0 0 28px;
}

.sidebar-icon svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 991.98px) {
  .app-shell {
    display: block !important;
  }

  .sidebar {
    width: 100%;
    min-height: auto;
    flex-basis: auto;
    position: static;
  }

  .sidebar-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.topbar {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  min-height: 70px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-title {
  min-width: 190px;
}

.topbar-eyebrow {
  color: #8a8f98;
  font-size: 12px;
  line-height: 1.2;
}

.topbar-search-wrap {
  flex: 1 1 420px;
  max-width: 520px;
  position: relative;
  min-width: 240px;
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f6f7f9;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 7px 13px;
}

.topbar-search svg,
.topbar-icon-button svg {
  width: 18px;
  height: 18px;
}

.topbar-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font-size: 14px;
}

.global-search-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #d8dde5;
  border-top-color: var(--sfl-secondary);
  display: none;
  animation: sfl-spin .7s linear infinite;
  flex: 0 0 14px;
}

.topbar-search.is-loading .global-search-spinner {
  display: inline-block;
}

@keyframes sfl-spin {
  to {
    transform: rotate(360deg);
  }
}

.global-search-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: 72vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .21);
  z-index: 90;
  padding: 10px;
}

.global-search-panel.is-open {
  display: block;
}

.global-search-state {
  padding: 14px;
  color: #6b7280;
  font-size: 13px;
}

.global-search-footer {
  margin-top: 8px;
  padding: 7px 4px 0;
  border-top: 1px solid #edf0f3;
  color: #9ca3af;
  font-size: 11px;
  text-align: right;
}

.global-search-result {
  display: block;
  border: 1px solid #edf0f3;
  border-radius: 12px;
  padding: 11px;
  color: #1f2937;
  text-decoration: none;
  background: #fff;
}

.global-search-result + .global-search-result {
  margin-top: 8px;
}

.global-search-result:hover {
  border-color: rgba(128, 0, 32, .28);
  background: #fff8f5;
}

.global-search-result-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.global-search-result-title strong {
  color: var(--sfl-primary);
}

.global-search-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  background: #f3f4f6;
  color: #374151;
  white-space: nowrap;
}

.global-search-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  font-size: 12px;
}

.global-search-grid span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.global-search-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.global-search-image {
  width: 52px;
  text-align: center;
  font-size: 11px;
  color: #6b7280;
}

.global-search-image img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 1px solid #dee2e6;
  border-radius: 7px;
  display: block;
  margin-bottom: 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
  background: #fff;
  position: relative;
  text-decoration: none;
}

.topbar-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sfl-secondary);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
}

.profile-menu {
  position: relative;
}

.profile-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 6px 3px 3px;
  border-radius: 999px;
}

.profile-menu summary::-webkit-details-marker {
  display: none;
}

.profile-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sfl-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-summary {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 13px;
}

.profile-summary small {
  color: #8a8f98;
}

.profile-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 190px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
  padding: 6px;
  z-index: 80;
}

.profile-menu-list a,
.profile-menu-list button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: #1f2937;
  text-align: left;
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.profile-menu-list a:hover,
.profile-menu-list button:hover {
  background: #f6f7f9;
}

.profile-photo-panel {
  width: 132px;
  height: 132px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--sfl-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 700;
}

.profile-photo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .topbar {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  .topbar-search {
    max-width: none;
  }

  .topbar-search-wrap {
    flex-basis: 100%;
    order: 3;
    max-width: none;
  }

  .global-search-grid {
    grid-template-columns: 1fr;
  }

  .profile-summary {
    display: none;
  }
}

.badge-sfl {
  background: var(--sfl-secondary);
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, #fff 0%, #f7f7f8 48%, #f3ebe9 100%);
}

.login-page {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  min-height: 100vh;
}

.login-brand-panel {
  background: linear-gradient(145deg, var(--sfl-primary), #4b0012);
  color: #fff;
  padding: clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-brand-panel::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 44px solid rgba(245, 130, 32, .26);
  right: -110px;
  bottom: -120px;
}

.login-brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--sfl-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 26px;
}

.login-brand-panel h1 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  margin-bottom: 18px;
}

.login-brand-panel p {
  color: rgba(255, 255, 255, .78);
  max-width: 520px;
}

.login-card-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.login-card {
  width: 100%;
  max-width: 430px;
}

@media (max-width: 900px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .login-brand-panel {
    min-height: 280px;
  }
}


/* Global image zoom lightbox */
.sfl-image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, .86);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sfl-image-lightbox.is-open { display: flex; }
.sfl-image-lightbox-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 94vw;
  max-height: 90vh;
}
.sfl-image-lightbox img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}
.sfl-image-lightbox-caption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  color: #3b1722;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.sfl-image-lightbox button {
  position: absolute;
  border: 0;
  background: #fff;
  color: #3b1722;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.sfl-image-lightbox-close { top: 20px; right: 20px; }
.sfl-image-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.sfl-image-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.js-image-zoom { cursor: zoom-in; }

.sfl-image-paste-zone {
  border: 1px dashed var(--sfl-primary);
  border-radius: 12px;
  background: rgba(128, 0, 32, 0.04);
  padding: 12px 14px;
  cursor: text;
  outline: none;
}

.sfl-image-paste-zone:focus,
.sfl-image-paste-zone:hover {
  background: rgba(245, 130, 32, 0.08);
  border-color: var(--sfl-secondary);
  box-shadow: 0 0 0 0.2rem rgba(245, 130, 32, 0.12);
}

.image-upload-status {
  min-height: 18px;
}


/* Existing order image remove UX */
.existing-image-card {
  transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.existing-image-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  z-index: 2;
}
.existing-image-remove-btn:hover {
  background: #bb2d3b;
}
.existing-image-card.is-marked-remove {
  border-color: #dc3545 !important;
  background: #fff5f5 !important;
}
.existing-image-card.is-marked-remove img {
  opacity: .35;
  filter: grayscale(70%);
}
.existing-image-card.is-marked-remove .existing-image-remove-status {
  color: #dc3545 !important;
  font-weight: 700;
}


/* Phase 1C.6 Operations Portal */
.operations-queue-card {
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.operations-queue-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.10) !important;
}
.operations-queue-active {
  outline: 2px solid #800020;
  outline-offset: 0;
}
.operations-table th,
.operations-table td {
  white-space: nowrap;
  vertical-align: middle;
}
.operations-table td:nth-child(2),
.operations-table td:nth-child(7) {
  white-space: normal;
  min-width: 180px;
}

/* Phase 1C.6.1 Operations action forms */
.operations-action-table th,
.operations-action-table td {
  vertical-align: top;
}
.operations-action-table .ops-field {
  min-width: 120px;
}
.operations-action-table td {
  min-width: 115px;
}
.operations-action-table td:nth-child(2),
.operations-action-table td:nth-child(3) {
  min-width: 170px;
}
.operations-action-table .btn {
  white-space: nowrap;
}

/* Phase 1C.6.2 real operations portal */
.operations-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.operation-date-filter .form-label {
  margin-bottom: .25rem;
}
.operations-table textarea,
.operations-table input,
.operations-table select {
  min-width: 120px;
}
.operation-row-ok td {
  background: rgba(25,135,84,.08) !important;
}
.operation-row-warning td {
  background: rgba(255,193,7,.18) !important;
}
.operation-row-error td {
  background: rgba(220,53,69,.10) !important;
}
.font-monospace {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


/* Global Excel-like column resizing for CRM tables */
.sfl-col-resizer {
  position:absolute;
  top:0;
  right:-3px;
  width:7px;
  height:100%;
  cursor:col-resize;
  user-select:none;
  z-index:8;
}
.sfl-col-resizer:hover,
.sfl-resizing-column .sfl-col-resizer {
  background:rgba(128,0,32,.18);
}
.sfl-resizing-column {
  cursor:col-resize !important;
  user-select:none !important;
}


/* Phase 1C.6.7 global table polish */
th.select-col,
th.ops-select-col,
td.ops-select-col {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  text-align: center !important;
}
.product-image-list,
.ops-thumbs {
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}
.product-thumb-wrap,
.ops-thumb {
  flex: 0 0 auto !important;
}
td.image-cell,
td:has(.ops-thumbs),
td:has(.product-image-list) {
  white-space: nowrap !important;
}
.sfl-resizing-column * {
  cursor: col-resize !important;
}
table.orders-table th,
table.orders-table td,
table.ops-table th,
table.ops-table td,
table.sfl-resizable-table th,
table.sfl-resizable-table td {
  box-sizing: border-box;
}
.ops-cost-input.js-ops-courier-cost[readonly] {
  background: #f8fafc;
  font-weight: 700;
  color: #800020;
}


/* Phase 1C.6.8 table/image/courier sync polish */
.orders-table .image-cell,
.ops-table td:has(.ops-thumbs),
.ops-table td:has(.product-image-list),
table.orders-table td.image-cell {
  white-space: nowrap !important;
  overflow: visible !important;
}
.product-image-list,
.ops-thumbs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: flex-start !important;
  width: max-content !important;
  max-width: none !important;
}
.product-thumb-wrap,
.ops-thumb {
  flex: 0 0 auto !important;
}
.orders-table .col-images,
.ops-table .col-images {
  width: auto !important;
  min-width: 260px !important;
}
.ops-select-col,
.select-col,
.col-checkbox {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  text-align: center !important;
}
table.orders-table th,
table.orders-table td,
table.ops-table th,
table.ops-table td,
table.sfl-resizable-table th,
table.sfl-resizable-table td {
  min-width: 0 !important;
}
table.orders-table input,
table.orders-table select,
table.ops-table input,
table.ops-table select {
  min-width: 0 !important;
}
.sfl-col-resizer {
  right: -4px;
  width: 9px;
}

/* Phase 1C.6.13 dashboard analytics */
.compact-date-filter { display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
.date-field { display:flex; align-items:center; gap:6px; background:#f8f9fa; border:1px solid #e5e7eb; border-radius:999px; padding:5px 8px; }
.date-field span { color:#6b7280; font-size:.74rem; font-weight:700; text-transform:uppercase; }
.date-field .form-select, .date-field .form-control { width:auto; min-width:118px; border:0; background:transparent; padding-top:2px; padding-bottom:2px; box-shadow:none; }
.date-year .form-select { min-width:82px; }
.sfl-dashboard-filter-card { border-radius:14px; }
.sfl-dashboard-range { display:inline-flex; align-items:center; gap:8px; color:#6b7280; background:#fff; border:1px solid #edf0f3; border-radius:999px; padding:7px 12px; font-size:.84rem; box-shadow:0 8px 22px rgba(15,23,42,.04); }
.sfl-dashboard-range-dot { width:9px; height:9px; border-radius:999px; background:var(--sfl-secondary); box-shadow:0 0 0 4px rgba(245,130,32,.20); }
.sfl-metric-card { display:flex; align-items:center; gap:12px; height:100%; min-height:92px; text-decoration:none; background:#fff; border:1px solid #edf0f3; border-radius:16px; padding:14px; box-shadow:0 10px 26px rgba(15,23,42,.06); transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.sfl-metric-card:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(15,23,42,.11); border-color:#e2e8f0; }
.sfl-metric-icon { width:42px; min-width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; }
.sfl-metric-icon svg { width:22px; height:22px; }
.sfl-metric-text { min-width:0; display:flex; flex-direction:column; gap:2px; }
.sfl-metric-label { color:#6b7280; font-size:.77rem; line-height:1.2; }
.sfl-metric-value { color:#111827; font-size:1.36rem; line-height:1.15; font-weight:800; white-space:nowrap; }
.sfl-metric-card.tone-maroon .sfl-metric-icon, .sfl-panel-icon { background:#800020; }
.sfl-metric-card.tone-orange .sfl-metric-icon { background:#f58220; }
.sfl-metric-card.tone-green .sfl-metric-icon { background:#16a34a; }
.sfl-metric-card.tone-red .sfl-metric-icon { background:#dc2626; }
.sfl-metric-card.tone-blue .sfl-metric-icon { background:#2563eb; }
.sfl-metric-card.tone-amber .sfl-metric-icon { background:#d97706; }
.sfl-metric-card.tone-purple .sfl-metric-icon { background:#7c3aed; }
.sfl-metric-card.tone-teal .sfl-metric-icon { background:#0f766e; }
.sfl-metric-card.tone-slate .sfl-metric-icon { background:#475569; }
.sfl-dashboard-panel { background:#fff; border:1px solid #edf0f3; border-radius:16px; padding:16px; box-shadow:0 10px 26px rgba(15,23,42,.06); }
.sfl-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sfl-panel-head h2 { margin:0 0 3px; font-size:1rem; font-weight:800; color:#111827; }
.sfl-panel-head p { margin:0; color:#6b7280; font-size:.82rem; }
.sfl-panel-icon { width:36px; min-width:36px; height:36px; border-radius:12px; color:#fff; display:flex; align-items:center; justify-content:center; }
.sfl-panel-icon svg { width:20px; height:20px; }
.sfl-dashboard-table thead th { background:#f8fafc; color:#3b1722; border-bottom:1px solid #e5e7eb; font-size:.78rem; white-space:nowrap; }
.sfl-dashboard-table td { font-size:.82rem; white-space:nowrap; }
.sfl-compare-cell { min-width:130px; }
.sfl-compare-line { height:7px; background:#f1f5f9; border-radius:999px; overflow:hidden; margin:3px 0; }
.sfl-compare-fill { display:block; height:100%; border-radius:999px; }
.sfl-compare-fill.delivered { background:#16a34a; }
.sfl-compare-fill.rto { background:#dc2626; }
.sfl-status-list { display:flex; flex-direction:column; gap:12px; }
.sfl-status-row { font-size:.82rem; }
.sfl-status-bar { height:10px; background:#f1f5f9; border-radius:999px; overflow:hidden; margin-top:5px; }
.sfl-status-bar span { display:block; height:100%; background:linear-gradient(90deg, #800020, #f58220); border-radius:999px; }
.sfl-trend-chart { min-height:180px; display:flex; align-items:flex-end; gap:12px; overflow-x:auto; padding:10px 4px 4px; }
.sfl-trend-day { min-width:64px; height:170px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; color:#475569; }
.sfl-trend-bars { width:42px; height:118px; display:flex; align-items:flex-end; justify-content:center; background:#f8fafc; border:1px solid #eef2f7; border-radius:14px; padding:5px; }
.sfl-trend-bar { width:100%; min-height:8px; border-radius:10px 10px 6px 6px; background:linear-gradient(180deg, #f58220, #800020); display:block; }
.sfl-trend-day strong { color:#111827; font-size:.86rem; }
.sfl-trend-day small { color:#6b7280; font-size:.72rem; white-space:nowrap; }
.sfl-chart-legend { display:flex; flex-wrap:wrap; gap:12px; color:#6b7280; font-size:.78rem; }
.sfl-chart-legend i { display:inline-block; width:12px; height:8px; border-radius:999px; margin-right:5px; vertical-align:middle; }
.legend-total { background:linear-gradient(90deg, #f58220, #800020); }
@media (max-width: 768px) {
  .date-field { width:100%; border-radius:12px; }
  .date-field .form-select, .date-field .form-control { width:100%; }
  .sfl-metric-value { font-size:1.16rem; }
}

/* Phase 1E.3.51 - Modern login redesign */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background:
    radial-gradient(circle at top left, rgba(245,130,32,.10), transparent 22%),
    linear-gradient(135deg, #fbf8f7 0%, #f4efee 48%, #f8f7f7 100%);
}

.login-page.sfl-login-modern {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
}

.login-page.sfl-login-modern .login-brand-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px);
  background:
    linear-gradient(145deg, #7b001d 0%, #610016 50%, #4a0012 100%);
  color: #fff;
  display: flex;
  align-items: center;
}

.login-page.sfl-login-modern .login-brand-panel::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  border: 42px solid rgba(245, 130, 32, .22);
}

.login-brand-shape {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.login-brand-shape-a {
  width: 220px;
  height: 220px;
  top: -70px;
  right: 12%;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 72%);
}

.login-brand-shape-b {
  width: 180px;
  height: 180px;
  left: -50px;
  bottom: 12%;
  background: radial-gradient(circle, rgba(245,130,32,.25) 0%, rgba(245,130,32,0) 72%);
}

.login-brand-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.login-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  border-radius: 24px;
  margin-bottom: 24px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
}

.login-brand-logo {
  display: block;
  width: min(100%, 430px);
  height: auto;
}

.login-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.21);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}

.login-page.sfl-login-modern .login-brand-panel h1 {
  margin: 0 0 18px;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.05;
  font-weight: 800;
  max-width: 12ch;
}

.login-lead {
  color: rgba(255,255,255,.86);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 620px;
  margin-bottom: 22px;
}

.login-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.login-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.21);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
}

.login-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.login-feature-card {
  height: 100%;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.19);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.login-feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f58220 0%, #ffbc76 100%);
  color: #5b0017;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .86rem;
  font-weight: 900;
  margin-bottom: 14px;
}

.login-feature-card h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 10px;
}

.login-feature-card p {
  margin: 0;
  color: rgba(255,255,255,.80);
  font-size: .9rem;
  line-height: 1.6;
}

.login-quote-card {
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  color: #47101d;
  max-width: 620px;
  box-shadow: 0 14px 45px rgba(0,0,0,.12);
}

.login-quote-card strong {
  display: block;
  margin-bottom: 7px;
  color: #800020;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.login-quote-card p {
  margin: 0;
  line-height: 1.7;
  font-weight: 600;
  color: #5f3340;
}

.login-page.sfl-login-modern .login-card-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(26px, 4vw, 48px);
}

.login-page.sfl-login-modern .login-card-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(128,0,32,.06), transparent 20%),
    radial-gradient(circle at bottom left, rgba(245,130,32,.10), transparent 22%);
}

.login-page.sfl-login-modern .login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
}

.login-card-modern .card {
  border-radius: 28px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 24px 60px rgba(42, 17, 24, .14) !important;
  overflow: hidden;
}

.login-card-modern .card-body {
  padding: clamp(28px, 4vw, 42px) !important;
}

.login-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(128,0,32,.08);
  color: #800020;
  font-weight: 800;
  font-size: .86rem;
}

.login-card-title {
  margin: 0 0 10px;
  font-size: 2rem;
  color: #1f2937;
  font-weight: 800;
}

.login-card-subtitle {
  margin-bottom: 26px;
  color: #6b7280;
  line-height: 1.7;
}

.login-form-modern .form-label {
  color: #42101f;
  font-weight: 700;
  margin-bottom: 8px;
}

.login-form-modern .form-control {
  min-height: 54px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #fcfcfd;
  box-shadow: none;
  padding: 0 16px;
}

.login-form-modern .form-control:focus {
  border-color: rgba(128,0,32,.45);
  box-shadow: 0 0 0 .22rem rgba(128,0,32,.10);
  background: #fff;
}

.login-submit-btn {
  min-height: 54px;
  border: 0;
  border-radius: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #800020 0%, #b2103b 100%);
  box-shadow: 0 16px 30px rgba(128,0,32,.22);
}

.login-submit-btn:hover,
.login-submit-btn:focus {
  background: linear-gradient(135deg, #6a001b 0%, #9d0f35 100%);
  color: #fff;
}

.login-card-footer-note {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b7280;
  font-size: .92rem;
  font-weight: 600;
}

.login-card-footer-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f58220 0%, #800020 100%);
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .login-page.sfl-login-modern {
    grid-template-columns: 1fr;
  }

  .login-page.sfl-login-modern .login-brand-panel {
    min-height: auto;
  }

  .login-page.sfl-login-modern .login-brand-panel h1 {
    max-width: 100%;
  }
}

@media (max-width: 860px) {
  .login-feature-grid {
    grid-template-columns: 1fr;
  }

  .login-logo-wrap {
    padding: 14px 16px;
  }

  .login-brand-logo {
    width: min(100%, 320px);
  }
}

@media (max-width: 560px) {
  .login-page.sfl-login-modern .login-brand-panel,
  .login-page.sfl-login-modern .login-card-panel {
    padding: 20px;
  }

  .login-page.sfl-login-modern .login-brand-panel h1 {
    font-size: 2rem;
  }

  .login-kicker {
    font-size: .75rem;
  }

  .login-card-title {
    font-size: 1.65rem;
  }

  .login-quote-card {
    padding: 16px;
  }
}

/* Phase 1E.3.52 - Login page compact polish */
.login-page.sfl-login-modern.sfl-login-compact {
  grid-template-columns: minmax(0, 1fr) minmax(410px, .78fr);
  min-height: 100vh;
  overflow: hidden;
}

.login-page.sfl-login-modern.sfl-login-compact .login-brand-panel {
  padding: clamp(26px, 4vw, 46px);
  background: linear-gradient(145deg, #89001f 0%, #70001a 48%, #520014 100%);
}

.login-page.sfl-login-modern.sfl-login-compact .login-brand-panel::after {
  right: -100px;
  bottom: -120px;
  width: 440px;
  height: 440px;
  border: 0;
  background: linear-gradient(145deg, #ffd15c 0%, #f5a623 100%);
  border-radius: 62% 0 0 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.21);
}

.login-page.sfl-login-modern.sfl-login-compact .login-brand-content {
  max-width: 500px;
}

.compact-logo-wrap {
  padding: 10px 16px;
  border-radius: 18px;
  margin-bottom: 16px;
  width: fit-content;
  max-width: 100%;
  background: rgba(255,255,255,.98);
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
}

.compact-logo {
  width: min(100%, 255px);
  max-height: 86px;
  object-fit: contain;
}

.login-page.sfl-login-modern.sfl-login-compact .login-kicker {
  margin-bottom: 12px;
  padding: 7px 12px;
  font-size: .72rem;
  letter-spacing: .07em;
}

.login-page.sfl-login-modern.sfl-login-compact .login-brand-panel h1 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
  max-width: none;
}

.compact-lead {
  max-width: 420px;
  margin-bottom: 16px;
  font-size: .98rem;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}

.compact-feature-list {
  display: grid;
  gap: 10px;
  max-width: 420px;
}

.login-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 17px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

.login-feature-row .login-feature-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin-bottom: 0;
  border-radius: 12px;
  font-size: .8rem;
}

.login-feature-row h3 {
  margin: 0 0 3px;
  font-size: .92rem;
  line-height: 1.25;
  font-weight: 800;
}

.login-feature-row p {
  margin: 0;
  font-size: .82rem;
  color: rgba(255,255,255,.82);
  line-height: 1.45;
}

.login-page.sfl-login-modern.sfl-login-compact .login-card-panel {
  padding: clamp(22px, 3vw, 34px);
}

.login-page.sfl-login-modern.sfl-login-compact .login-card {
  max-width: 430px;
}

.login-page.sfl-login-modern.sfl-login-compact .login-card-modern .card {
  border-radius: 26px;
}

.login-page.sfl-login-modern.sfl-login-compact .login-card-modern .card-body {
  padding: clamp(25px, 3.5vw, 36px) !important;
}

.login-page.sfl-login-modern.sfl-login-compact .login-card-badge {
  padding: 7px 12px;
  margin-bottom: 12px;
  font-size: .82rem;
}

.login-page.sfl-login-modern.sfl-login-compact .login-card-title {
  font-size: 1.68rem;
  margin-bottom: 8px;
}

.login-page.sfl-login-modern.sfl-login-compact .login-card-subtitle {
  margin-bottom: 20px;
  font-size: .9rem;
  line-height: 1.55;
}

.login-page.sfl-login-modern.sfl-login-compact .login-form-modern .form-label {
  font-size: .9rem;
  margin-bottom: 7px;
}

.login-page.sfl-login-modern.sfl-login-compact .login-form-modern .form-control {
  min-height: 48px;
  border-radius: 14px;
  font-size: .94rem;
}

.login-page.sfl-login-modern.sfl-login-compact .login-submit-btn {
  min-height: 48px;
  border-radius: 14px;
}

.sfl-password-wrap {
  position: relative;
}

.sfl-password-wrap .form-control {
  padding-right: 50px;
}

.sfl-password-eye {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: rgba(128,0,32,.07);
  color: #800020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.sfl-password-eye:hover,
.sfl-password-eye:focus {
  background: rgba(128,0,32,.12);
  outline: none;
}

.sfl-password-eye .sfl-eye-hide {
  display: none;
}

.sfl-password-wrap.is-visible .sfl-eye-show {
  display: none;
}

.sfl-password-wrap.is-visible .sfl-eye-hide {
  display: inline;
}

.login-page.sfl-login-modern.sfl-login-compact .login-card-footer-note {
  margin-top: 15px;
  font-size: .88rem;
}

@media (max-width: 1180px) {
  .login-page.sfl-login-modern.sfl-login-compact {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .login-page.sfl-login-modern.sfl-login-compact .login-brand-panel::after {
    width: 270px;
    height: 270px;
    right: -45px;
    bottom: -70px;
  }
}

@media (max-width: 640px) {
  .compact-logo {
    width: min(100%, 225px);
    max-height: 76px;
  }

  .login-page.sfl-login-modern.sfl-login-compact .login-brand-panel,
  .login-page.sfl-login-modern.sfl-login-compact .login-card-panel {
    padding: 18px;
  }

  .login-page.sfl-login-modern.sfl-login-compact .login-brand-panel h1 {
    font-size: 2rem;
  }

  .compact-feature-list {
    gap: 9px;
  }

  .login-feature-row {
    padding: 10px 12px;
  }
}


/* Phase 1E.3.54 - restore Supplier View, hide image select text */
.sfl-image-share-select span { display:none !important; }
.sfl-image-share-select { gap:0 !important; padding:3px !important; min-width:0 !important; }
.sfl-image-share-select .form-check-input { margin:0 !important; }

.supplier-view-page { max-width:1180px; margin:0 auto; }
.supplier-view-total { background:#fff; border:1px solid #edf0f3; border-radius:999px; padding:8px 14px; font-weight:800; color:#3b1722; box-shadow:0 10px 26px rgba(15,23,42,.06); }
.supplier-view-toolbar { border-radius:18px; }
.supplier-period-tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.supplier-period-tab { flex:0 0 auto; text-decoration:none; color:#3b1722; background:#f8fafc; border:1px solid #e5e7eb; border-radius:999px; padding:8px 12px; font-weight:800; font-size:.85rem; }
.supplier-period-tab.active { background:var(--sfl-primary, #800020); color:#fff; border-color:var(--sfl-primary, #800020); }
.supplier-search-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.supplier-search-form .form-control { border-radius:999px; flex:1 1 320px; }
.supplier-search-form .btn { border-radius:999px; font-weight:800; }
.supplier-type-filter { width:auto; min-width:190px; border-radius:999px; font-weight:800; }
.supplier-order-list { display:flex; flex-direction:column; gap:16px; }
.supplier-order-card { background:#fff; border:4px solid #3b1722 !important; border-radius:20px; padding:16px; box-shadow:0 14px 34px rgba(15,23,42,.12) !important; overflow:hidden; }
.supplier-order-card.sfl-order-state-future-pending { background:#00ffef !important; border-color:#008e86 !important; }
.supplier-order-card.sfl-order-state-future-confirmed { background:#d9d4e3 !important; border-color:#756e8d !important; }
.supplier-order-card.sfl-order-state-delivered { background:#d2e9af !important; border-color:#6f913e !important; }
.supplier-order-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.supplier-order-id { font-size:1.08rem; font-weight:900; letter-spacing:.02em; color:#111827; }
.supplier-order-meta { color:#475569; font-size:.84rem; font-weight:700; }
.supplier-mini-badge { display:inline-flex; align-items:center; margin-left:6px; padding:2px 8px; border-radius:999px; background:rgba(128,0,32,.12); color:#3b1722; font-size:.72rem; font-weight:900; }
.supplier-order-time { color:#64748b; font-size:.72rem; text-align:right; line-height:1.25; }
.supplier-order-time strong { color:#111827; font-size:.78rem; }
.supplier-image-strip { display:flex; gap:12px; overflow-x:auto; padding:4px 0 12px; margin-bottom:8px; }
.supplier-image-card { position:relative; flex:0 0 auto; width:240px; background:rgba(255,255,255,.76); border:1px solid rgba(15,23,42,.08); border-radius:16px; padding:8px; }
.supplier-product-image { display:block; width:100%; height:240px; object-fit:cover; border-radius:12px; background:#fff; cursor:zoom-in; }
.supplier-size-badge { position:static !important; left:auto !important; bottom:auto !important; transform:none !important; z-index:auto !important; margin-top:8px !important; display:inline-flex !important; width:100% !important; min-width:0 !important; min-height:32px !important; align-items:center !important; justify-content:center !important; padding:7px 12px !important; border-radius:999px !important; background:#facc15 !important; color:#111827 !important; border:2px solid rgba(17,24,39,.92) !important; box-shadow:0 6px 14px rgba(15,23,42,.14) !important; font-size:.95rem !important; font-weight:900 !important; line-height:1 !important; }
.supplier-no-image { min-height:110px; display:flex; align-items:center; justify-content:center; padding:18px; border:1px dashed rgba(128,0,32,.35); border-radius:16px; background:rgba(128,0,32,.04); color:#800020; font-weight:800; width:100%; }
.supplier-info-grid { display:grid; grid-template-columns:1fr 260px; gap:14px; align-items:start; }
.supplier-info-main { background:rgba(255,255,255,.72); border:1px solid rgba(15,23,42,.06); border-radius:16px; padding:12px; }
.supplier-customer-line { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:1rem; }
.supplier-risk-badge { display:inline-flex; align-items:center; border-radius:999px; background:#3b1722; color:#fff; padding:3px 8px; font-size:.72rem; font-weight:900; }
.supplier-contact-line { display:flex; flex-wrap:wrap; gap:10px; color:#007a5a; font-weight:900; margin-top:4px; }
.supplier-address-line { color:#111827; margin-top:8px; line-height:1.45; }
.supplier-order-summary { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.supplier-order-summary div { background:rgba(255,255,255,.76); border:1px solid rgba(15,23,42,.06); border-radius:14px; padding:10px; }
.supplier-order-summary span { display:block; color:#64748b; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.supplier-order-summary strong { display:block; color:#111827; font-size:.96rem; margin-top:2px; }
.supplier-status-awb-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.supplier-status-box, .supplier-awb-box { background:rgba(255,255,255,.76); border:2px solid rgba(15,23,42,.12); border-radius:16px; padding:11px 12px; }
.supplier-status-box span, .supplier-awb-box span { display:block; color:#64748b; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px; }
.supplier-status-box strong, .supplier-awb-box strong { display:block; color:#111827; font-weight:900; font-size:.92rem; line-height:1.35; }
.supplier-status-box small, .supplier-awb-box small { display:block; color:#475569; font-weight:700; margin-top:4px; line-height:1.35; }
.supplier-future-line, .supplier-notes, .supplier-activity-line { margin-top:10px; background:rgba(255,255,255,.72); border:1px solid rgba(15,23,42,.06); border-radius:14px; padding:10px 12px; color:#111827; }
.supplier-activity-line { border-style:dashed; color:#334155; font-size:.84rem; font-weight:700; }
.supplier-notes { line-height:1.45; }
.supplier-view-page .supplier-image-card .sfl-image-share-select { top:10px !important; left:10px !important; min-height:auto !important; border-radius:8px !important; background:rgba(128,0,32,.92) !important; border:2px solid rgba(255,255,255,.95) !important; box-shadow:0 8px 22px rgba(15,23,42,.30) !important; }
.supplier-view-page .supplier-image-card .sfl-image-share-select .form-check-input { width:18px !important; height:18px !important; min-width:18px !important; }

@media (max-width: 768px) {
  .supplier-view-page { max-width:100%; }
  .supplier-search-form { flex-direction:column; }
  .supplier-type-filter, .supplier-search-form .form-control, .supplier-search-form .btn { width:100%; min-height:42px; border-radius:14px; }
  .supplier-order-card { border-radius:16px; padding:12px; }
  .supplier-order-head { flex-direction:column; }
  .supplier-order-time { text-align:left; }
  .supplier-image-strip { display:flex !important; flex-direction:column !important; overflow-x:visible !important; gap:14px !important; }
  .supplier-image-card { width:100% !important; max-width:none !important; }
  .supplier-product-image { width:100% !important; height:auto !important; max-height:none !important; object-fit:contain !important; }
  .supplier-info-grid { grid-template-columns:1fr; }
  .supplier-order-summary { grid-template-columns:1fr 1fr; }
  .supplier-status-awb-grid { grid-template-columns:1fr; }
  .supplier-size-badge { margin-top:10px !important; min-height:38px !important; font-size:1rem !important; }
}
@media (max-width: 420px) { .supplier-order-summary { grid-template-columns:1fr; } .supplier-period-tab { font-size:.78rem; padding:7px 10px; } }


/* Phase 1E.3.55 - emergency supplier view + zoom share + image select fix */
.sfl-image-share-select span,
.global-search-image .sfl-image-share-select span,
.supplier-view-page .sfl-image-share-select span,
.product-thumb-wrap .sfl-image-share-select span,
.staff-thumb .sfl-image-share-select span,
.ops-thumb .sfl-image-share-select span {
  display: none !important;
}
.sfl-image-share-select {
  gap: 0 !important;
  min-width: 0 !important;
  padding: 3px !important;
}
.sfl-image-share-select .form-check-input {
  margin: 0 !important;
}

.supplier-view-page {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-bottom: 24px !important;
}
.supplier-view-page .supplier-view-total {
  background:#fff !important;
  border:1px solid #edf0f3 !important;
  border-radius:999px !important;
  padding:8px 14px !important;
  font-weight:800 !important;
  color:#3b1722 !important;
  box-shadow:0 10px 26px rgba(15,23,42,.06) !important;
}
.supplier-view-page .supplier-view-toolbar {
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 10px 30px rgba(15,23,42,.06) !important;
}
.supplier-view-page .supplier-period-tabs {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  overflow-x:visible !important;
  padding-bottom:0 !important;
}
.supplier-view-page .supplier-period-tab {
  flex:0 0 auto !important;
  text-decoration:none !important;
  color:#3b1722 !important;
  background:#f8fafc !important;
  border:1px solid #e5e7eb !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  font-weight:800 !important;
  font-size:.85rem !important;
}
.supplier-view-page .supplier-period-tab.active {
  background:var(--sfl-primary, #800020) !important;
  color:#fff !important;
  border-color:var(--sfl-primary, #800020) !important;
}
.supplier-view-page .supplier-search-form {
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
}
.supplier-view-page .supplier-search-form .form-control {
  border-radius:999px !important;
  flex:1 1 320px !important;
  min-height:42px !important;
}
.supplier-view-page .supplier-search-form .btn {
  border-radius:999px !important;
  font-weight:800 !important;
  min-height:42px !important;
}
.supplier-view-page .supplier-type-filter {
  width:auto !important;
  min-width:190px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  min-height:42px !important;
}
.supplier-view-page .supplier-order-list {
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}
.supplier-view-page .supplier-order-card {
  display:block !important;
  background:#fff !important;
  border:4px solid #3b1722 !important;
  border-radius:20px !important;
  padding:16px !important;
  box-shadow:0 14px 34px rgba(15,23,42,.12) !important;
  overflow:hidden !important;
}
.supplier-view-page .supplier-order-card.sfl-order-state-future-pending { background:#00ffef !important; border-color:#008e86 !important; }
.supplier-view-page .supplier-order-card.sfl-order-state-future-confirmed { background:#d9d4e3 !important; border-color:#756e8d !important; }
.supplier-view-page .supplier-order-card.sfl-order-state-delivered { background:#d2e9af !important; border-color:#6f913e !important; }
.supplier-view-page .supplier-order-head {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin-bottom:12px !important;
}
.supplier-view-page .supplier-order-id { font-size:1.08rem !important; font-weight:900 !important; letter-spacing:.02em !important; color:#111827 !important; }
.supplier-view-page .supplier-order-meta { color:#475569 !important; font-size:.84rem !important; font-weight:700 !important; }
.supplier-view-page .supplier-mini-badge { display:inline-flex !important; align-items:center !important; margin-left:6px !important; padding:2px 8px !important; border-radius:999px !important; background:rgba(128,0,32,.12) !important; color:#3b1722 !important; font-size:.72rem !important; font-weight:900 !important; }
.supplier-view-page .supplier-order-time { color:#64748b !important; font-size:.72rem !important; text-align:right !important; line-height:1.25 !important; }
.supplier-view-page .supplier-order-time strong { color:#111827 !important; font-size:.78rem !important; }
.supplier-view-page .supplier-image-strip { display:flex !important; gap:12px !important; overflow-x:auto !important; padding:4px 0 12px !important; margin-bottom:8px !important; }
.supplier-view-page .supplier-image-card { position:relative !important; flex:0 0 auto !important; width:240px !important; background:rgba(255,255,255,.76) !important; border:1px solid rgba(15,23,42,.08) !important; border-radius:16px !important; padding:8px !important; }
.supplier-view-page .supplier-product-image { display:block !important; width:100% !important; height:240px !important; object-fit:cover !important; border-radius:12px !important; background:#fff !important; cursor:zoom-in !important; }
.supplier-view-page .supplier-size-badge { position:static !important; left:auto !important; bottom:auto !important; transform:none !important; z-index:auto !important; margin-top:8px !important; display:inline-flex !important; width:100% !important; min-width:0 !important; min-height:32px !important; align-items:center !important; justify-content:center !important; padding:7px 12px !important; border-radius:999px !important; background:#facc15 !important; color:#111827 !important; border:2px solid rgba(17,24,39,.92) !important; box-shadow:0 6px 14px rgba(15,23,42,.14) !important; font-size:.95rem !important; font-weight:900 !important; line-height:1 !important; }
.supplier-view-page .supplier-no-image { min-height:110px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:18px !important; border:1px dashed rgba(128,0,32,.35) !important; border-radius:16px !important; background:rgba(128,0,32,.04) !important; color:#800020 !important; font-weight:800 !important; width:100% !important; }
.supplier-view-page .supplier-info-grid { display:grid !important; grid-template-columns:1fr 260px !important; gap:14px !important; align-items:start !important; }
.supplier-view-page .supplier-info-main { background:rgba(255,255,255,.72) !important; border:1px solid rgba(15,23,42,.06) !important; border-radius:16px !important; padding:12px !important; }
.supplier-view-page .supplier-customer-line { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:8px !important; font-size:1rem !important; }
.supplier-view-page .supplier-risk-badge { display:inline-flex !important; align-items:center !important; border-radius:999px !important; background:#3b1722 !important; color:#fff !important; padding:3px 8px !important; font-size:.72rem !important; font-weight:900 !important; }
.supplier-view-page .supplier-contact-line { display:flex !important; flex-wrap:wrap !important; gap:10px !important; color:#007a5a !important; font-weight:900 !important; margin-top:4px !important; }
.supplier-view-page .supplier-address-line { color:#111827 !important; margin-top:8px !important; line-height:1.45 !important; }
.supplier-view-page .supplier-order-summary { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
.supplier-view-page .supplier-order-summary div { background:rgba(255,255,255,.76) !important; border:1px solid rgba(15,23,42,.06) !important; border-radius:14px !important; padding:10px !important; }
.supplier-view-page .supplier-order-summary span { display:block !important; color:#64748b !important; font-size:.72rem !important; font-weight:800 !important; text-transform:uppercase !important; }
.supplier-view-page .supplier-order-summary strong { display:block !important; color:#111827 !important; font-size:.96rem !important; margin-top:2px !important; }
.supplier-view-page .supplier-status-awb-grid { display:grid !important; grid-template-columns:1fr 1fr !important; gap:10px !important; margin-top:12px !important; }
.supplier-view-page .supplier-status-box, .supplier-view-page .supplier-awb-box { background:rgba(255,255,255,.76) !important; border:2px solid rgba(15,23,42,.12) !important; border-radius:16px !important; padding:11px 12px !important; }
.supplier-view-page .supplier-status-box span, .supplier-view-page .supplier-awb-box span { display:block !important; color:#64748b !important; font-size:.72rem !important; font-weight:900 !important; text-transform:uppercase !important; letter-spacing:.02em !important; margin-bottom:4px !important; }
.supplier-view-page .supplier-status-box strong, .supplier-view-page .supplier-awb-box strong { display:block !important; color:#111827 !important; font-weight:900 !important; font-size:.92rem !important; line-height:1.35 !important; }
.supplier-view-page .supplier-status-box small, .supplier-view-page .supplier-awb-box small { display:block !important; color:#475569 !important; font-weight:700 !important; margin-top:4px !important; line-height:1.35 !important; }
.supplier-view-page .supplier-future-line, .supplier-view-page .supplier-notes, .supplier-view-page .supplier-activity-line { margin-top:10px !important; background:rgba(255,255,255,.72) !important; border:1px solid rgba(15,23,42,.06) !important; border-radius:14px !important; padding:10px 12px !important; color:#111827 !important; }
.supplier-view-page .supplier-activity-line { border-style:dashed !important; color:#334155 !important; font-size:.84rem !important; font-weight:700 !important; }
.supplier-view-page .supplier-notes { line-height:1.45 !important; }
.supplier-view-page .supplier-image-card .sfl-image-share-select { top:10px !important; left:10px !important; min-height:auto !important; border-radius:8px !important; background:rgba(128,0,32,.92) !important; border:2px solid rgba(255,255,255,.95) !important; box-shadow:0 8px 22px rgba(15,23,42,.30) !important; }
.supplier-view-page .supplier-image-card .sfl-image-share-select .form-check-input { width:18px !important; height:18px !important; min-width:18px !important; }

.sfl-image-lightbox { padding:16px !important; }
.sfl-image-lightbox-frame { max-width:94vw !important; max-height:calc(100vh - 34px) !important; gap:10px !important; justify-content:center !important; }
.sfl-image-lightbox img { max-width:92vw !important; max-height:calc(100vh - 190px) !important; object-fit:contain !important; }
.sfl-image-lightbox-caption { flex:0 0 auto !important; }
.sfl-image-lightbox-actions { display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; gap:10px !important; position:relative !important; z-index:10080 !important; width:auto !important; max-width:92vw !important; padding-bottom:4px !important; }
.sfl-image-lightbox-action { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:118px !important; min-height:42px !important; padding:9px 16px !important; border:0 !important; border-radius:999px !important; background:#fff !important; color:#3b1722 !important; text-decoration:none !important; font-weight:900 !important; box-shadow:0 10px 30px rgba(0,0,0,.22) !important; cursor:pointer !important; }
.sfl-image-lightbox-action:hover { background:#fff8fb !important; color:#3b1722 !important; }

@media (max-width: 768px) {
  body.sfl-supplier-view-body main { padding:10px !important; }
  .supplier-view-page { max-width:100% !important; }
  .supplier-view-page > .d-flex { margin-bottom:10px !important; }
  .supplier-view-page h1.h4 { font-size:1.2rem !important; }
  .supplier-view-page p.text-muted { font-size:.86rem !important; line-height:1.35 !important; }
  .supplier-view-page .supplier-period-tabs { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .supplier-view-page .supplier-period-tab { display:flex !important; align-items:center !important; justify-content:center !important; min-height:40px !important; padding:8px 10px !important; text-align:center !important; white-space:normal !important; line-height:1.15 !important; font-size:.78rem !important; }
  .supplier-view-page .supplier-period-tab:last-child { grid-column:1 / -1 !important; }
  .supplier-view-page .supplier-search-form { flex-direction:column !important; gap:10px !important; }
  .supplier-view-page .supplier-type-filter, .supplier-view-page .supplier-search-form .form-control, .supplier-view-page .supplier-search-form .btn { width:100% !important; min-height:42px !important; border-radius:14px !important; flex:auto !important; }
  .supplier-view-page .supplier-order-card { border-radius:18px !important; padding:13px !important; border-width:3px !important; }
  .supplier-view-page .supplier-order-head { flex-direction:column !important; gap:8px !important; }
  .supplier-view-page .supplier-order-time { text-align:left !important; }
  .supplier-view-page .supplier-image-strip { display:flex !important; flex-direction:column !important; overflow-x:visible !important; gap:14px !important; padding-bottom:8px !important; }
  .supplier-view-page .supplier-image-card { width:100% !important; max-width:none !important; padding:10px !important; border-radius:18px !important; }
  .supplier-view-page .supplier-product-image { width:100% !important; height:auto !important; max-height:70vh !important; object-fit:contain !important; border-radius:14px !important; }
  .supplier-view-page .supplier-info-grid { grid-template-columns:1fr !important; gap:10px !important; }
  .supplier-view-page .supplier-order-summary { grid-template-columns:1fr 1fr !important; }
  .supplier-view-page .supplier-status-awb-grid { grid-template-columns:1fr !important; }
  .supplier-view-page .supplier-size-badge { margin-top:10px !important; min-height:36px !important; font-size:1rem !important; }
  .sfl-image-lightbox { padding:10px !important; align-items:center !important; }
  .sfl-image-lightbox img { max-height:calc(100vh - 210px) !important; }
  .sfl-image-lightbox-actions { width:100% !important; }
  .sfl-image-lightbox-action { flex:1 1 0 !important; min-width:0 !important; }
}
@media (max-width: 420px) {
  .supplier-view-page .supplier-order-summary { grid-template-columns:1fr !important; }
}

/* Phase 1E.3.56 - floating selected image share button */
#sflImageShareBar.sfl-image-share-bar {
  position: fixed !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translate(-50%, 120%) !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 280px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #800020 0%, #b1123a 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .34) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .22s ease, opacity .22s ease !important;
}

#sflImageShareBar.sfl-image-share-bar.is-open {
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sflImageShareBar.sfl-image-share-bar strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: .88rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#sflImageShareBar.sfl-image-share-bar #sflImageShareCount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: #ffd23f !important;
  color: #3b1722 !important;
  font-weight: 900 !important;
}

#sflImageShareBar.sfl-image-share-bar #sflImageShareButton {
  min-height: 38px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #800020 !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.18) !important;
}

#sflImageShareBar.sfl-image-share-bar #sflImageShareButton::before {
  content: "↗ " !important;
}

#sflImageShareBar.sfl-image-share-bar #sflImageShareClear {
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  font-weight: 800 !important;
}

#sflImageShareBar.sfl-image-share-bar #sflImageShareButton:disabled {
  opacity: .75 !important;
  cursor: wait !important;
}

#sflImageShareStatus.sfl-image-share-status {
  position: fixed !important;
  left: 50% !important;
  bottom: 86px !important;
  transform: translate(-50%, 12px) !important;
  z-index: 2147483001 !important;
  max-width: min(520px, calc(100vw - 28px)) !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: rgba(15,23,42,.94) !important;
  color: #fff !important;
  box-shadow: 0 14px 40px rgba(15,23,42,.28) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .2s ease, opacity .2s ease !important;
  text-align: center !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
}

#sflImageShareStatus.sfl-image-share-status.is-open {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

.sfl-image-share-select {
  cursor: pointer !important;
}

/* keep only checkbox visible on image selector */
.sfl-image-share-select span,
.global-search-image .sfl-image-share-select span,
.supplier-view-page .sfl-image-share-select span,
.product-thumb-wrap .sfl-image-share-select span,
.staff-thumb .sfl-image-share-select span,
.ops-thumb .sfl-image-share-select span {
  display: none !important;
}

.sfl-image-share-select {
  gap: 0 !important;
  min-width: 0 !important;
  padding: 3px !important;
}

.sfl-image-share-select .form-check-input {
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  #sflImageShareBar.sfl-image-share-bar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(120%) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px !important;
  }

  #sflImageShareBar.sfl-image-share-bar.is-open {
    transform: translateY(0) !important;
  }

  #sflImageShareBar.sfl-image-share-bar strong {
    font-size: .78rem !important;
  }

  #sflImageShareBar.sfl-image-share-bar #sflImageShareButton {
    flex: 1 1 auto !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
  }

  #sflImageShareBar.sfl-image-share-bar #sflImageShareClear {
    min-height: 42px !important;
    padding: 9px 11px !important;
  }

  #sflImageShareStatus.sfl-image-share-status {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Phase 1E.3.57 - mobile floating share + restore global order colors */
:root {
  --sfl-order-future-pending: #00ffef;
  --sfl-order-future-confirmed: #d9d4e3;
  --sfl-order-delivered: #d2e9af;
}

/* Restore global row color system */
table tbody tr.sfl-order-state-future-pending > *,
.table tbody tr.sfl-order-state-future-pending > * {
  background-color: var(--sfl-order-future-pending) !important;
}
table tbody tr.sfl-order-state-future-confirmed > *,
.table tbody tr.sfl-order-state-future-confirmed > * {
  background-color: var(--sfl-order-future-confirmed) !important;
}
table tbody tr.sfl-order-state-delivered > *,
.table tbody tr.sfl-order-state-delivered > * {
  background-color: var(--sfl-order-delivered) !important;
}
table tbody tr.sfl-order-state-future-pending:hover > *,
table tbody tr.sfl-order-state-future-confirmed:hover > *,
table tbody tr.sfl-order-state-delivered:hover > *,
.table tbody tr.sfl-order-state-future-pending:hover > *,
.table tbody tr.sfl-order-state-future-confirmed:hover > *,
.table tbody tr.sfl-order-state-delivered:hover > * {
  filter: brightness(.985);
}

/* Restore order colors in preview, order popup/detail, search, supplier cards */
.sfl-order-preview-surface.sfl-order-state-future-pending,
.order-detail-surface.sfl-order-state-future-pending,
.global-search-result.sfl-order-state-future-pending,
.supplier-order-card.sfl-order-state-future-pending,
.sfl-order-card.sfl-order-state-future-pending {
  background-color: var(--sfl-order-future-pending) !important;
}
.sfl-order-preview-surface.sfl-order-state-future-confirmed,
.order-detail-surface.sfl-order-state-future-confirmed,
.global-search-result.sfl-order-state-future-confirmed,
.supplier-order-card.sfl-order-state-future-confirmed,
.sfl-order-card.sfl-order-state-future-confirmed {
  background-color: var(--sfl-order-future-confirmed) !important;
}
.sfl-order-preview-surface.sfl-order-state-delivered,
.order-detail-surface.sfl-order-state-delivered,
.global-search-result.sfl-order-state-delivered,
.supplier-order-card.sfl-order-state-delivered,
.sfl-order-card.sfl-order-state-delivered {
  background-color: var(--sfl-order-delivered) !important;
}
.sfl-order-preview-surface.sfl-order-state-future-pending,
.sfl-order-preview-surface.sfl-order-state-future-confirmed,
.sfl-order-preview-surface.sfl-order-state-delivered,
.order-detail-surface.sfl-order-state-future-pending,
.order-detail-surface.sfl-order-state-future-confirmed,
.order-detail-surface.sfl-order-state-delivered {
  border: 1px solid rgba(31, 14, 21, .12) !important;
  border-radius: 16px;
}
.order-detail-surface.sfl-order-state-future-pending,
.order-detail-surface.sfl-order-state-future-confirmed,
.order-detail-surface.sfl-order-state-delivered {
  padding: 16px;
}
.order-detail-surface.sfl-order-state-future-pending .card,
.order-detail-surface.sfl-order-state-future-confirmed .card,
.order-detail-surface.sfl-order-state-delivered .card {
  background-color: rgba(255,255,255,.72) !important;
}
.global-search-result.sfl-order-state-future-pending,
.global-search-result.sfl-order-state-future-confirmed,
.global-search-result.sfl-order-state-delivered {
  border-color: rgba(31,14,21,.16) !important;
  box-shadow: inset 4px 0 0 rgba(128,0,32,.18);
}

table tbody tr.sfl-order-state-future-pending .form-control,
table tbody tr.sfl-order-state-future-pending .form-select,
table tbody tr.sfl-order-state-future-confirmed .form-control,
table tbody tr.sfl-order-state-future-confirmed .form-select,
table tbody tr.sfl-order-state-delivered .form-control,
table tbody tr.sfl-order-state-delivered .form-select {
  background-color: rgba(255,255,255,.70) !important;
}

/* Supplier View color borders also restored */
.supplier-view-page .supplier-order-card.sfl-order-state-future-pending {
  background:#00ffef !important;
  border-color:#008e86 !important;
}
.supplier-view-page .supplier-order-card.sfl-order-state-future-confirmed {
  background:#d9d4e3 !important;
  border-color:#756e8d !important;
}
.supplier-view-page .supplier-order-card.sfl-order-state-delivered {
  background:#d2e9af !important;
  border-color:#6f913e !important;
}

/* Keep only checkbox visible on image selectors */
.sfl-image-share-select span,
.global-search-image .sfl-image-share-select span,
.supplier-view-page .sfl-image-share-select span,
.product-thumb-wrap .sfl-image-share-select span,
.staff-thumb .sfl-image-share-select span,
.ops-thumb .sfl-image-share-select span {
  display: none !important;
}
.sfl-image-share-select {
  gap: 0 !important;
  min-width: 0 !important;
  padding: 3px !important;
}
.sfl-image-share-select .form-check-input {
  margin: 0 !important;
}

/* Floating selected image share button - fixed above mobile browser bars */
#sflImageShareBar.sfl-image-share-bar {
  position: fixed !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translate(-50%, 130%) !important;
  z-index: 2147483600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 280px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #800020 0%, #b1123a 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .34) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .22s ease, opacity .22s ease !important;
}
#sflImageShareBar.sfl-image-share-bar.is-open {
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#sflImageShareBar.sfl-image-share-bar strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: .88rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
#sflImageShareBar.sfl-image-share-bar #sflImageShareCount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: #ffd23f !important;
  color: #3b1722 !important;
  font-weight: 900 !important;
}
#sflImageShareBar.sfl-image-share-bar #sflImageShareButton {
  min-height: 38px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #800020 !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.18) !important;
}
#sflImageShareBar.sfl-image-share-bar #sflImageShareButton::before {
  content: "↗ " !important;
}
#sflImageShareBar.sfl-image-share-bar #sflImageShareClear {
  min-height: 38px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  font-weight: 800 !important;
}
#sflImageShareBar.sfl-image-share-bar #sflImageShareButton:disabled {
  opacity: .75 !important;
  cursor: wait !important;
}
#sflImageShareStatus.sfl-image-share-status {
  position: fixed !important;
  left: 50% !important;
  bottom: 86px !important;
  transform: translate(-50%, 12px) !important;
  z-index: 2147483601 !important;
  max-width: min(520px, calc(100vw - 28px)) !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  background: rgba(15,23,42,.94) !important;
  color: #fff !important;
  box-shadow: 0 14px 40px rgba(15,23,42,.28) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform .2s ease, opacity .2s ease !important;
  text-align: center !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
}
#sflImageShareStatus.sfl-image-share-status.is-open {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

@media (max-width: 767.98px) {
  #sflImageShareBar.sfl-image-share-bar {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(160%) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }
  #sflImageShareBar.sfl-image-share-bar.is-open {
    transform: translateY(0) !important;
  }
  #sflImageShareBar.sfl-image-share-bar strong {
    font-size: .78rem !important;
  }
  #sflImageShareBar.sfl-image-share-bar #sflImageShareButton {
    flex: 1 1 auto !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
  }
  #sflImageShareBar.sfl-image-share-bar #sflImageShareClear {
    min-height: 42px !important;
    padding: 9px 11px !important;
  }
  #sflImageShareStatus.sfl-image-share-status {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: calc(100vw - 24px) !important;
  }
}


/* Phase 1E.3.58 - emergency mobile floating share + zoom share + future display fix */
.sfl-image-lightbox-download,
.js-sfl-lightbox-download {
  display: none !important;
}

.sfl-image-lightbox-actions {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  z-index: 2147483642 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  max-width: calc(100vw - 28px) !important;
  padding: 0 !important;
}

.js-sfl-lightbox-share {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 150px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #800020 !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.28) !important;
}

#sflImageShareBar.sfl-image-share-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 24px !important;
  transform: translate(-50%, 130%) !important;
  z-index: 2147483640 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 280px !important;
  max-width: calc(100vw - 28px) !important;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #800020 0%, #b1123a 100%) !important;
  color: #fff !important;
  box-shadow: 0 20px 55px rgba(15,23,42,.38) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#sflImageShareBar.sfl-image-share-bar.is-open {
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sflImageShareButton {
  min-height: 40px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #fff !important;
  color: #800020 !important;
  font-weight: 900 !important;
}

#sflImageShareClear {
  min-height: 40px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.sfl-image-share-select span,
.global-search-image .sfl-image-share-select span,
.supplier-view-page .sfl-image-share-select span,
.product-thumb-wrap .sfl-image-share-select span,
.staff-thumb .sfl-image-share-select span,
.ops-thumb .sfl-image-share-select span {
  display: none !important;
}

.sfl-image-share-select {
  gap: 0 !important;
  min-width: 0 !important;
  padding: 3px !important;
}

.sfl-image-share-select .form-check-input {
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  #sflImageShareBar.sfl-image-share-bar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: translateY(130%) !important;
  }

  #sflImageShareBar.sfl-image-share-bar.is-open {
    transform: translateY(0) !important;
  }

  #sflImageShareButton {
    flex: 1 1 auto !important;
    min-height: 44px !important;
  }

  #sflImageShareClear {
    min-height: 44px !important;
  }

  .sfl-image-lightbox-actions {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .js-sfl-lightbox-share {
    min-width: 180px !important;
    min-height: 46px !important;
  }

  .sfl-image-lightbox img {
    max-height: calc(100vh - 210px) !important;
  }
}


/* Phase 1E.3.59 - mobile floating share + restore customer history popup */
#sflImageShareBar.sfl-image-share-bar {
  z-index: 2147483600 !important;
}

#sflImageShareBar.sfl-image-share-bar.is-open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sflImageShareStatus.sfl-image-share-status {
  z-index: 2147483601 !important;
}

@media (max-width: 900px) {
  #sflImageShareBar.sfl-image-share-bar {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #800020 0%, #b1123a 100%) !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.42) !important;
    color: #fff !important;
  }

  #sflImageShareBar.sfl-image-share-bar strong {
    font-size: .76rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  #sflImageShareBar.sfl-image-share-bar #sflImageShareButton {
    flex: 1 1 auto !important;
    min-height: 42px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #800020 !important;
    border: 0 !important;
    font-weight: 900 !important;
  }

  #sflImageShareBar.sfl-image-share-bar #sflImageShareClear {
    min-height: 42px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
  }
}

.sfl-history-trigger {
  cursor: help !important;
}

.sfl-history-trigger:hover {
  text-decoration: underline !important;
}

.sfl-customer-history-popup {
  position: fixed !important;
  z-index: 2147483500 !important;
  display: none !important;
  width: 360px !important;
  max-width: calc(100vw - 18px) !important;
  max-height: min(430px, calc(100vh - 28px)) !important;
  overflow: auto !important;
  padding: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(128, 0, 32, .16) !important;
  border-radius: 18px !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .24) !important;
  font-family: inherit !important;
  color: #1f2937 !important;
}

.sfl-customer-history-popup.is-open {
  display: block !important;
}

.sfl-history-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 4px 2px 10px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 9px !important;
}

.sfl-history-head strong {
  display: block !important;
  color: #3b1722 !important;
  font-size: .92rem !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

.sfl-history-head span {
  display: block !important;
  color: #64748b !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}

.sfl-history-head b {
  display: inline-flex !important;
  align-items: center !important;
  background: #800020 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.sfl-history-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.sfl-history-row {
  display: block !important;
  padding: 10px 11px !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  color: inherit !important;
  text-decoration: none !important;
}

.sfl-history-row:hover {
  background: #fff7ed !important;
  border-color: rgba(245,130,32,.38) !important;
  text-decoration: none !important;
}

.sfl-history-row.is-active {
  background: #fff7ed !important;
  border-color: #f97316 !important;
}

.sfl-history-row.is-delivered {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}

.sfl-history-row.is-bad {
  background: #fff1f2 !important;
  border-color: #fda4af !important;
}

.sfl-history-row > div,
.sfl-history-row div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.sfl-history-row strong {
  color: #800020 !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
}

.sfl-history-row span {
  background: #111827 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
}

.sfl-history-row > div b,
.sfl-history-row div b {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  background: rgba(15,23,42,.08) !important;
  color: #1f2937 !important;
  font-size: .68rem !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.sfl-history-row.is-delivered > div b,
.sfl-history-row.is-delivered div b {
  background: rgba(22,163,74,.14) !important;
  color: #166534 !important;
}

.sfl-history-row.is-active > div b,
.sfl-history-row.is-active div b {
  background: rgba(245,130,32,.16) !important;
  color: #9a3412 !important;
}

.sfl-history-row.is-bad > div b,
.sfl-history-row.is-bad div b {
  background: rgba(220,38,38,.13) !important;
  color: #991b1b !important;
}

.sfl-history-row p {
  margin: 3px 0 0 !important;
  font-size: .76rem !important;
  color: #334155 !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

.sfl-history-row small {
  display: block !important;
  margin-top: 2px !important;
  color: #64748b !important;
  font-size: .7rem !important;
  line-height: 1.4 !important;
}

.sfl-history-row em {
  display: block !important;
  margin-top: 3px !important;
  color: #7c2d12 !important;
  font-size: .72rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.sfl-history-loading,
.sfl-history-empty {
  padding: 14px !important;
  color: #64748b !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  text-align: center !important;
}

@media (max-width: 767.98px) {
  .sfl-customer-history-popup {
    width: calc(100vw - 18px) !important;
    left: 9px !important;
    right: 9px !important;
    max-height: min(420px, calc(100vh - 90px)) !important;
  }
}

@keyframes sfl-risk-soft-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,130,32,0) !important; filter: brightness(1) !important; }
  50% { box-shadow: 0 0 0 4px rgba(245,130,32,.32) !important; filter: brightness(1.08) !important; }
}

.sfl-risk-attention {
  animation: sfl-risk-soft-flash 1.45s ease-in-out infinite !important;
}


/* Phase 1E.3.60 - final mobile supplier share + zoom share clarity */
@media (max-width: 900px) {
  body.sfl-mobile-share-dock-active #sflImageShareBar,
  body.sfl-mobile-share-dock-active .sfl-image-share-bar:not(#sflMobileImageShareDock),
  body.sfl-lightbox-dock-active .sfl-image-lightbox-actions {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

#sflMobileImageShareDock {
  position: fixed !important;
  left: 14px !important;
  right: 14px !important;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147483646 !important;
  display: none !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #800020 0%, #b1123a 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 52px rgba(15,23,42,.45) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  font-family: inherit !important;
  transform: translateY(120%) !important;
  opacity: 0 !important;
  transition: transform .18s ease, opacity .18s ease !important;
}

#sflMobileImageShareDock.is-open {
  display: flex !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sflMobileImageShareDock .sfl-mobile-share-count {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-weight: 900 !important;
  font-size: .82rem !important;
  white-space: nowrap !important;
}

#sflMobileImageShareDock .sfl-mobile-share-count b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 26px !important;
  height: 26px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: #ffd23f !important;
  color: #34151f !important;
  font-weight: 1000 !important;
}

#sflMobileImageShareDock .sfl-mobile-share-main {
  flex: 1 1 auto !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #800020 !important;
  font-weight: 1000 !important;
  font-size: .96rem !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
}

#sflMobileImageShareDock .sfl-mobile-share-clear {
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  font-size: 1.15rem !important;
}

#sflMobileImageShareDock .sfl-mobile-share-main:disabled {
  opacity: .75 !important;
  cursor: wait !important;
}

#sflLightboxMobileShareDock {
  position: fixed !important;
  left: 18px !important;
  right: 18px !important;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147483647 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #800020 0%, #b1123a 100%) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  font-size: 1rem !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.46) !important;
}

#sflLightboxMobileShareDock.is-open {
  display: inline-flex !important;
}

.sfl-image-lightbox-download,
.js-sfl-lightbox-download {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 900px) {
  .sfl-image-lightbox.is-open #sflGlobalImageLightboxImg,
  #sflGlobalImageLightbox.is-open #sflGlobalImageLightboxImg {
    max-height: calc(100vh - 180px) !important;
  }

  .sfl-image-lightbox-caption {
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Phase 1E.3.61 - global table inner scroll fix
   Purpose: long CRM tables scroll inside their own box so horizontal scrollbar is available without going to the last record. */

:root {
  --sfl-table-inner-max-height: calc(100vh - 345px);
  --sfl-table-inner-max-height-compact: calc(100vh - 250px);
}

/* Main global table scroll containers */
.table-responsive,
.sfl-table-scroll,
.sfl-table-wrap,
.sfl-orders-table-wrap,
.sfl-scroll-table,
.orders-table-wrap,
.orders-table-scroll,
.staff-table-wrap,
.staff-orders-table-wrap,
.operations-table-wrap,
.operations-scroll-table {
  max-height: var(--sfl-table-inner-max-height) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable both-edges !important;
  border-radius: 12px;
}

/* Keep data tables wide enough so horizontal scrollbar behaves correctly */
.table-responsive > table,
.sfl-table-scroll > table,
.sfl-table-wrap > table,
.sfl-orders-table-wrap > table,
.sfl-scroll-table > table,
.orders-table-wrap > table,
.orders-table-scroll > table,
.staff-table-wrap > table,
.staff-orders-table-wrap > table,
.operations-table-wrap > table,
.operations-scroll-table > table {
  min-width: max-content;
}

/* Sticky header inside the table box while scrolling rows */
.table-responsive > table > thead,
.sfl-table-scroll > table > thead,
.sfl-table-wrap > table > thead,
.sfl-orders-table-wrap > table > thead,
.sfl-scroll-table > table > thead,
.orders-table-wrap > table > thead,
.orders-table-scroll > table > thead,
.staff-table-wrap > table > thead,
.staff-orders-table-wrap > table > thead,
.operations-table-wrap > table > thead,
.operations-scroll-table > table > thead {
  position: sticky;
  top: 0;
  z-index: 15;
}

.table-responsive > table > thead th,
.sfl-table-scroll > table > thead th,
.sfl-table-wrap > table > thead th,
.sfl-orders-table-wrap > table > thead th,
.sfl-scroll-table > table > thead th,
.orders-table-wrap > table > thead th,
.orders-table-scroll > table > thead th,
.staff-table-wrap > table > thead th,
.staff-orders-table-wrap > table > thead th,
.operations-table-wrap > table > thead th,
.operations-scroll-table > table > thead th {
  background: #f3f4f6 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .12);
}

/* Make scrollbars easier to catch on desktop */
.table-responsive::-webkit-scrollbar,
.sfl-table-scroll::-webkit-scrollbar,
.sfl-table-wrap::-webkit-scrollbar,
.sfl-orders-table-wrap::-webkit-scrollbar,
.sfl-scroll-table::-webkit-scrollbar,
.orders-table-wrap::-webkit-scrollbar,
.orders-table-scroll::-webkit-scrollbar,
.staff-table-wrap::-webkit-scrollbar,
.staff-orders-table-wrap::-webkit-scrollbar,
.operations-table-wrap::-webkit-scrollbar,
.operations-scroll-table::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

.table-responsive::-webkit-scrollbar-track,
.sfl-table-scroll::-webkit-scrollbar-track,
.sfl-table-wrap::-webkit-scrollbar-track,
.sfl-orders-table-wrap::-webkit-scrollbar-track,
.sfl-scroll-table::-webkit-scrollbar-track,
.orders-table-wrap::-webkit-scrollbar-track,
.orders-table-scroll::-webkit-scrollbar-track,
.staff-table-wrap::-webkit-scrollbar-track,
.staff-orders-table-wrap::-webkit-scrollbar-track,
.operations-table-wrap::-webkit-scrollbar-track,
.operations-scroll-table::-webkit-scrollbar-track {
  background: #eef0f3;
  border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-thumb,
.sfl-table-scroll::-webkit-scrollbar-thumb,
.sfl-table-wrap::-webkit-scrollbar-thumb,
.sfl-orders-table-wrap::-webkit-scrollbar-thumb,
.sfl-scroll-table::-webkit-scrollbar-thumb,
.orders-table-wrap::-webkit-scrollbar-thumb,
.orders-table-scroll::-webkit-scrollbar-thumb,
.staff-table-wrap::-webkit-scrollbar-thumb,
.staff-orders-table-wrap::-webkit-scrollbar-thumb,
.operations-table-wrap::-webkit-scrollbar-thumb,
.operations-scroll-table::-webkit-scrollbar-thumb {
  background: #8f949b;
  border-radius: 999px;
  border: 3px solid #eef0f3;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.sfl-table-scroll::-webkit-scrollbar-thumb:hover,
.sfl-table-wrap::-webkit-scrollbar-thumb:hover,
.sfl-orders-table-wrap::-webkit-scrollbar-thumb:hover,
.sfl-scroll-table::-webkit-scrollbar-thumb:hover,
.orders-table-wrap::-webkit-scrollbar-thumb:hover,
.orders-table-scroll::-webkit-scrollbar-thumb:hover,
.staff-table-wrap::-webkit-scrollbar-thumb:hover,
.staff-orders-table-wrap::-webkit-scrollbar-thumb:hover,
.operations-table-wrap::-webkit-scrollbar-thumb:hover,
.operations-scroll-table::-webkit-scrollbar-thumb:hover {
  background: #6b7078;
}

/* Firefox scrollbar */
.table-responsive,
.sfl-table-scroll,
.sfl-table-wrap,
.sfl-orders-table-wrap,
.sfl-scroll-table,
.orders-table-wrap,
.orders-table-scroll,
.staff-table-wrap,
.staff-orders-table-wrap,
.operations-table-wrap,
.operations-scroll-table {
  scrollbar-width: auto;
  scrollbar-color: #8f949b #eef0f3;
}

/* Do not trap small/simple tables unnecessarily */
.table-responsive:has(table tbody tr:nth-child(-n+4):last-child),
.sfl-table-scroll:has(table tbody tr:nth-child(-n+4):last-child),
.sfl-table-wrap:has(table tbody tr:nth-child(-n+4):last-child),
.sfl-orders-table-wrap:has(table tbody tr:nth-child(-n+4):last-child),
.sfl-scroll-table:has(table tbody tr:nth-child(-n+4):last-child),
.orders-table-wrap:has(table tbody tr:nth-child(-n+4):last-child),
.orders-table-scroll:has(table tbody tr:nth-child(-n+4):last-child),
.staff-table-wrap:has(table tbody tr:nth-child(-n+4):last-child),
.staff-orders-table-wrap:has(table tbody tr:nth-child(-n+4):last-child),
.operations-table-wrap:has(table tbody tr:nth-child(-n+4):last-child),
.operations-scroll-table:has(table tbody tr:nth-child(-n+4):last-child) {
  max-height: none !important;
}

/* All Orders / Operations pages: use more screen height when filters/export bars are above */
body:has(.orders-filter-card) .table-responsive,
body:has(.operations-queue) .table-responsive,
body:has(.staff-shell) .table-responsive {
  max-height: var(--sfl-table-inner-max-height) !important;
}

/* Pages with less top content can use taller box */
body:has(.supplier-view-page) .table-responsive,
body:has(.settings-page) .table-responsive {
  max-height: var(--sfl-table-inner-max-height-compact) !important;
}

/* Mobile/tablet: table box should still scroll inside, but not hide too much page */
@media (max-width: 991.98px) {
  :root {
    --sfl-table-inner-max-height: calc(100dvh - 260px);
    --sfl-table-inner-max-height-compact: calc(100dvh - 210px);
  }

  .table-responsive,
  .sfl-table-scroll,
  .sfl-table-wrap,
  .sfl-orders-table-wrap,
  .sfl-scroll-table,
  .orders-table-wrap,
  .orders-table-scroll,
  .staff-table-wrap,
  .staff-orders-table-wrap,
  .operations-table-wrap,
  .operations-scroll-table {
    max-height: var(--sfl-table-inner-max-height) !important;
  }
}

/* Very small phones */
@media (max-width: 575.98px) {
  :root {
    --sfl-table-inner-max-height: calc(100dvh - 230px);
    --sfl-table-inner-max-height-compact: calc(100dvh - 190px);
  }
}

/* Phase 1E.3.62 - compact mobile selected image share dock */
@media (max-width: 900px) {
  #sflMobileImageShareDock.sfl-mobile-share-compact,
  #sflMobileImageShareDock {
    width: auto !important;
    min-width: 218px !important;
    max-width: calc(100vw - 34px) !important;
    min-height: 46px !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    gap: 7px !important;
    background: linear-gradient(135deg, #800020 0%, #b1123a 100%) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .34) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
  }

  #sflMobileImageShareDock.sfl-mobile-share-compact .sfl-mobile-share-count {
    gap: 5px !important;
    font-size: .78rem !important;
    line-height: 1 !important;
  }

  #sflMobileImageShareDock.sfl-mobile-share-compact .sfl-mobile-share-count b {
    min-width: 25px !important;
    width: 25px !important;
    height: 25px !important;
    padding: 0 !important;
    font-size: .86rem !important;
  }

  #sflMobileImageShareDock.sfl-mobile-share-compact .sfl-mobile-share-count span {
    font-size: .76rem !important;
    font-weight: 850 !important;
  }

  #sflMobileImageShareDock.sfl-mobile-share-compact .sfl-mobile-share-main {
    flex: 0 0 auto !important;
    min-width: 92px !important;
    min-height: 34px !important;
    padding: 7px 18px !important;
    border-radius: 999px !important;
    font-size: .88rem !important;
    line-height: 1 !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.16) !important;
  }

  #sflMobileImageShareDock.sfl-mobile-share-compact .sfl-mobile-share-clear {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: .98rem !important;
    border-width: 1px !important;
  }
}

/* Phase 1E.3.63 - global order table scroll everywhere
   Applies inner vertical + horizontal scroll to order-style tables across CRM. */
.sfl-global-order-scrollbox,
.sfl-force-order-scrollbox,
.table-responsive.sfl-global-order-scrollbox {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: var(--sfl-order-scroll-height, calc(100vh - 320px)) !important;
  overflow: auto !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable both-edges !important;
  border: 1px solid rgba(148, 163, 184, .35) !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.sfl-global-order-scrollbox > table,
.sfl-force-order-scrollbox > table,
.table-responsive.sfl-global-order-scrollbox > table {
  width: max-content !important;
  min-width: 100% !important;
  margin-bottom: 0 !important;
}

.sfl-global-order-scrollbox table thead,
.sfl-force-order-scrollbox table thead,
.table-responsive.sfl-global-order-scrollbox table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
}

.sfl-global-order-scrollbox table thead th,
.sfl-force-order-scrollbox table thead th,
.table-responsive.sfl-global-order-scrollbox table thead th {
  background: #f3f4f6 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .16) !important;
}

/* Make first checkbox/action column easier while horizontal scrolling */
.sfl-global-order-scrollbox table thead th:first-child,
.sfl-global-order-scrollbox table tbody td:first-child,
.sfl-force-order-scrollbox table thead th:first-child,
.sfl-force-order-scrollbox table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 12;
}

.sfl-global-order-scrollbox table thead th:first-child,
.sfl-force-order-scrollbox table thead th:first-child {
  z-index: 35;
}

.sfl-global-order-scrollbox table tbody td:first-child,
.sfl-force-order-scrollbox table tbody td:first-child {
  background: inherit;
}

/* visible desktop scrollbars */
.sfl-global-order-scrollbox::-webkit-scrollbar,
.sfl-force-order-scrollbox::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.sfl-global-order-scrollbox::-webkit-scrollbar-track,
.sfl-force-order-scrollbox::-webkit-scrollbar-track {
  background: #eef0f3;
  border-radius: 999px;
}

.sfl-global-order-scrollbox::-webkit-scrollbar-thumb,
.sfl-force-order-scrollbox::-webkit-scrollbar-thumb {
  background: #858b94;
  border-radius: 999px;
  border: 3px solid #eef0f3;
}

.sfl-global-order-scrollbox::-webkit-scrollbar-thumb:hover,
.sfl-force-order-scrollbox::-webkit-scrollbar-thumb:hover {
  background: #626975;
}

.sfl-global-order-scrollbox,
.sfl-force-order-scrollbox {
  scrollbar-width: auto;
  scrollbar-color: #858b94 #eef0f3;
}

/* Do not make tiny informational tables feel trapped unless JS marks them as order tables. */
.sfl-global-order-scrollbox.sfl-short-table {
  max-height: none !important;
}

/* mobile/tablet adjustments */
@media (max-width: 991.98px) {
  .sfl-global-order-scrollbox,
  .sfl-force-order-scrollbox,
  .table-responsive.sfl-global-order-scrollbox {
    max-height: var(--sfl-order-scroll-height, calc(100dvh - 255px)) !important;
  }
}

@media (max-width: 575.98px) {
  .sfl-global-order-scrollbox,
  .sfl-force-order-scrollbox,
  .table-responsive.sfl-global-order-scrollbox {
    max-height: var(--sfl-order-scroll-height, calc(100dvh - 220px)) !important;
  }
}

/* Phase 1E.3.64 - global order table height correction
   Fixes Phase 1E.3.63 table boxes being too short at page top. */
.sfl-global-order-scrollbox:not(.sfl-short-table),
.sfl-force-order-scrollbox:not(.sfl-short-table),
.table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) {
  max-height: var(--sfl-order-scroll-height, calc(100vh - 165px)) !important;
}

/* Give long order tables enough working height, but still let page scroll normally. */
@media (min-width: 992px) {
  .sfl-global-order-scrollbox:not(.sfl-short-table),
  .sfl-force-order-scrollbox:not(.sfl-short-table),
  .table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) {
    min-height: min(560px, calc(100vh - 210px)) !important;
  }
}

/* Medium screens */
@media (max-width: 991.98px) {
  .sfl-global-order-scrollbox:not(.sfl-short-table),
  .sfl-force-order-scrollbox:not(.sfl-short-table),
  .table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) {
    max-height: var(--sfl-order-scroll-height, calc(100dvh - 135px)) !important;
    min-height: min(480px, calc(100dvh - 190px)) !important;
  }
}

/* Phones */
@media (max-width: 575.98px) {
  .sfl-global-order-scrollbox:not(.sfl-short-table),
  .sfl-force-order-scrollbox:not(.sfl-short-table),
  .table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) {
    max-height: var(--sfl-order-scroll-height, calc(100dvh - 120px)) !important;
    min-height: min(420px, calc(100dvh - 170px)) !important;
  }
}

/* Phase 1E.3.65 - table scroll flicker stabilizer
   Fixes flicker/jump when page is scrolled down and order table becomes full-screen work area.
   CSS-only override: does not touch JS/controllers/views/database. */

/* Stop height recalculation from visually changing the table while scrolling.
   Earlier patches update --sfl-order-scroll-height during scroll; this override no longer depends on that variable. */
body .sfl-global-order-scrollbox:not(.sfl-short-table),
body .sfl-force-order-scrollbox:not(.sfl-short-table),
body .table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) {
  height: min(720px, calc(100vh - 128px)) !important;
  max-height: min(720px, calc(100vh - 128px)) !important;
  min-height: min(560px, calc(100vh - 190px)) !important;
  overflow: auto !important;
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior: contain !important;
  contain: layout paint !important;
  will-change: auto !important;
}

/* Keep horizontal scrollbar stable and always reachable inside the visible table box. */
body .sfl-global-order-scrollbox:not(.sfl-short-table) > table,
body .sfl-force-order-scrollbox:not(.sfl-short-table) > table,
body .table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) > table {
  width: max-content !important;
  min-width: 100% !important;
  margin-bottom: 0 !important;
}

/* Avoid sticky header flicker while internal scrolling. */
body .sfl-global-order-scrollbox:not(.sfl-short-table) table thead,
body .sfl-force-order-scrollbox:not(.sfl-short-table) table thead,
body .table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  transform: translateZ(0) !important;
}

body .sfl-global-order-scrollbox:not(.sfl-short-table) table thead th,
body .sfl-force-order-scrollbox:not(.sfl-short-table) table thead th,
body .table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) table thead th {
  background: #f3f4f6 !important;
  backface-visibility: hidden !important;
}

/* Keep small/simple tables natural. */
body .sfl-global-order-scrollbox.sfl-short-table,
body .sfl-force-order-scrollbox.sfl-short-table,
body .table-responsive.sfl-global-order-scrollbox.sfl-short-table {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Tablets */
@media (max-width: 991.98px) {
  body .sfl-global-order-scrollbox:not(.sfl-short-table),
  body .sfl-force-order-scrollbox:not(.sfl-short-table),
  body .table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) {
    height: min(660px, calc(100dvh - 112px)) !important;
    max-height: min(660px, calc(100dvh - 112px)) !important;
    min-height: min(480px, calc(100dvh - 170px)) !important;
  }
}

/* Phones */
@media (max-width: 575.98px) {
  body .sfl-global-order-scrollbox:not(.sfl-short-table),
  body .sfl-force-order-scrollbox:not(.sfl-short-table),
  body .table-responsive.sfl-global-order-scrollbox:not(.sfl-short-table) {
    height: min(600px, calc(100dvh - 105px)) !important;
    max-height: min(600px, calc(100dvh - 105px)) !important;
    min-height: min(410px, calc(100dvh - 155px)) !important;
  }
}

/* Phase 1E.3.66 - mobile share dock flicker lock
   Locks selected-image mobile share dock to one compact size.
   Does not touch order tables, colors, risk popup, supplier cards, controllers, views, or database. */

@media (max-width: 900px) {
  body #sflMobileImageShareDock,
  body #sflMobileImageShareDock.sfl-mobile-share-compact,
  body #sflImageShareBar.sfl-image-share-bar,
  body #sflImageShareBar.sfl-image-share-bar.is-open {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translate3d(-50%, 0, 0) !important;
    width: auto !important;
    min-width: 206px !important;
    max-width: calc(100vw - 42px) !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: 50px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    gap: 7px !important;
    border-radius: 999px !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #800020 0%, #b1123a 100%) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .32) !important;
    z-index: 2147483646 !important;
    transition: opacity .12s ease !important;
    animation: none !important;
    will-change: opacity !important;
    contain: paint !important;
  }

  body #sflMobileImageShareDock.is-open,
  body #sflImageShareBar.sfl-image-share-bar.is-open {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body #sflMobileImageShareDock .sfl-mobile-share-count,
  body #sflImageShareBar.sfl-image-share-bar strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    font-size: .76rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  body #sflMobileImageShareDock .sfl-mobile-share-count b,
  body #sflImageShareBar.sfl-image-share-bar #sflImageShareCount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #ffd23f !important;
    color: #3b1722 !important;
    font-size: .82rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
  }

  body #sflMobileImageShareDock .sfl-mobile-share-count span {
    font-size: .74rem !important;
    font-weight: 850 !important;
  }

  body #sflMobileImageShareDock .sfl-mobile-share-main,
  body #sflImageShareBar.sfl-image-share-bar #sflImageShareButton {
    flex: 0 0 auto !important;
    min-width: 86px !important;
    width: auto !important;
    min-height: 32px !important;
    max-height: 34px !important;
    padding: 7px 17px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #800020 !important;
    font-size: .84rem !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.15) !important;
  }

  body #sflMobileImageShareDock .sfl-mobile-share-clear,
  body #sflImageShareBar.sfl-image-share-bar #sflImageShareClear {
    flex: 0 0 auto !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: .95rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}



/* Phase 1E.3.69H - Global Queue Cleanup + Shoes NA red state */
:root {
  --sfl-order-shoes-na: #FCBBA1;
}

table tbody tr.sfl-order-state-shoes-na > *,
.table tbody tr.sfl-order-state-shoes-na > * {
  background-color: var(--sfl-order-shoes-na) !important;
}

table tbody tr.sfl-order-state-shoes-na:hover > *,
.table tbody tr.sfl-order-state-shoes-na:hover > * {
  filter: brightness(.985);
}

.sfl-order-preview-surface.sfl-order-state-shoes-na,
.order-detail-surface.sfl-order-state-shoes-na,
.global-search-result.sfl-order-state-shoes-na,
.supplier-order-card.sfl-order-state-shoes-na,
.sfl-order-card.sfl-order-state-shoes-na {
  background-color: var(--sfl-order-shoes-na) !important;
}

.sfl-order-preview-surface.sfl-order-state-shoes-na,
.order-detail-surface.sfl-order-state-shoes-na {
  border: 1px solid rgba(31, 14, 21, .12) !important;
  border-radius: 16px;
}

.order-detail-surface.sfl-order-state-shoes-na {
  padding: 16px;
}

.global-search-result.sfl-order-state-shoes-na {
  border-color: rgba(31,14,21,.16) !important;
  box-shadow: inset 4px 0 0 rgba(128,0,32,.18);
}

table tbody tr.sfl-order-state-shoes-na .form-control,
table tbody tr.sfl-order-state-shoes-na .form-select {
  background-color: rgba(255,255,255,.70) !important;
}

.supplier-view-page .supplier-order-card.sfl-order-state-shoes-na {
  background:#FCBBA1 !important;
  border-color:#b95035 !important;
}

/* Phase 1E.3.69J Staff Rules Editable Settings + Modern UI */
.rules-page--modern {
  --rules-maroon: var(--sfl-primary, #800020);
  --rules-orange: var(--sfl-secondary, #f58220);
  --rules-ink: #172033;
  --rules-muted: #667085;
  --rules-soft: #fff7ed;
  --rules-border: rgba(128, 0, 32, .12);
}
.staff-rules-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  margin-bottom: 18px;
  border: 1px solid rgba(128, 0, 32, .12);
  border-radius: 26px;
  background:
    radial-gradient(circle at 16% 20%, rgba(245, 130, 32, .20), transparent 30%),
    linear-gradient(135deg, #fff 0%, #fff7ed 52%, #fff 100%);
  box-shadow: 0 20px 50px rgba(16, 24, 40, .08);
}
.staff-rules-hero__glow {
  position: absolute;
  right: -80px;
  top: -100px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: rgba(128, 0, 32, .08);
}
.staff-rules-hero__content,
.staff-rules-scorecard {
  position: relative;
  z-index: 1;
}
.staff-rules-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(128, 0, 32, .08);
  color: var(--rules-maroon);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.staff-rules-hero h1 {
  margin: 14px 0 8px;
  color: var(--rules-ink);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -.04em;
}
.staff-rules-hero p {
  max-width: 860px;
  color: var(--rules-muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}
.staff-rules-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.staff-rules-hero__chips span {
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(128, 0, 32, .10);
  color: #344054;
  font-size: 12px;
  font-weight: 700;
}
.staff-rules-scorecard {
  min-width: 235px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, var(--rules-maroon), #5f0018);
  box-shadow: 0 18px 42px rgba(128, 0, 32, .22);
}
.staff-rules-scorecard span {
  font-size: 12px;
  opacity: .78;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
}
.staff-rules-scorecard strong {
  font-size: 30px;
  line-height: 1.1;
  margin: 7px 0;
}
.staff-rules-scorecard small {
  opacity: .82;
}
.staff-rules-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.staff-rules-stat {
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(16, 24, 40, .05);
}
.staff-rules-stat span {
  display: block;
  color: var(--rules-muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.staff-rules-stat strong {
  color: var(--rules-ink);
  font-size: 18px;
  font-weight: 900;
}
.staff-rules-stat--alert strong {
  color: var(--rules-maroon);
}
.staff-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.staff-rules-panel {
  background: #fff;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(16, 24, 40, .07);
  overflow: hidden;
}
.staff-rules-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(16, 24, 40, .06);
}
.staff-rules-panel__head span {
  display: block;
  color: var(--rules-orange);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.staff-rules-panel__head h2 {
  margin: 0;
  color: var(--rules-ink);
  font-size: 20px;
  font-weight: 900;
}
.staff-rules-panel__icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--rules-maroon), var(--rules-orange));
  font-weight: 900;
  font-size: 18px;
}
.staff-rules-list {
  padding: 16px 22px 6px;
  display: grid;
  gap: 10px;
}
.staff-rule-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  background: #fbfcfe;
  border: 1px solid rgba(16, 24, 40, .06);
}
.staff-rule-row__number {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rules-maroon);
  background: rgba(128, 0, 32, .08);
  font-size: 12px;
  font-weight: 900;
}
.staff-rule-row__text {
  color: #26334d;
  font-size: 14px;
  line-height: 1.55;
  padding-top: 5px;
}
.staff-rule-row--soft .staff-rule-row__number {
  color: #b45309;
  background: #fff7ed;
}
.staff-rules-mini-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 22px 0;
}
.staff-rules-mini-cards div {
  padding: 12px;
  border-radius: 16px;
  background: #fff7ed;
  border: 1px solid rgba(245, 130, 32, .18);
}
.staff-rules-mini-cards span {
  display: block;
  color: var(--rules-muted);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
}
.staff-rules-mini-cards strong {
  color: #9a3412;
  font-size: 15px;
  font-weight: 900;
}
.staff-rules-note {
  margin: 16px 22px 22px;
  padding: 15px;
  border-radius: 18px;
  background: rgba(128, 0, 32, .06);
  color: #344054;
  font-size: 14px;
  line-height: 1.6;
}
.staff-rules-note strong {
  display: block;
  color: var(--rules-maroon);
  margin-bottom: 4px;
}
.staff-rules-note--warning {
  background: #fff7ed;
}
.staff-rules-note--warning strong {
  color: #9a3412;
}
.staff-rules-settings-hero {
  background: linear-gradient(135deg, #fff 0%, #fff7ed 100%);
}
.staff-rules-big-textarea {
  min-height: 360px;
  line-height: 1.55;
}
.staff-rules-help-list {
  display: grid;
  gap: 12px;
}
.staff-rules-help-list div {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #fbfcfe;
  border: 1px solid rgba(16, 24, 40, .06);
}
.staff-rules-help-list strong {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: var(--sfl-primary, #800020);
}
.staff-rules-help-list span {
  color: #344054;
  line-height: 1.45;
}
.staff-rules-editor-preview {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(128, 0, 32, .08), rgba(245, 130, 32, .10));
}
.staff-rules-editor-preview span {
  display: block;
  color: #667085;
  font-size: 12px;
  margin-bottom: 5px;
}
.staff-rules-editor-preview strong {
  color: var(--sfl-primary, #800020);
  font-size: 18px;
}
@media (max-width: 1199px) {
  .staff-rules-grid,
  .staff-rules-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .staff-rules-hero {
    flex-direction: column;
  }
  .staff-rules-scorecard {
    min-width: 0;
  }
}
@media (max-width: 767px) {
  .staff-rules-hero {
    padding: 20px;
    border-radius: 20px;
  }
  .staff-rules-stats,
  .staff-rules-grid,
  .staff-rules-mini-cards {
    grid-template-columns: 1fr;
  }
  .staff-rule-row {
    grid-template-columns: 38px 1fr;
  }
}

/* Phase 1E.3.70S2-D - RTO Received global display */
:root {
  --sfl-order-rto-received-bg: #D3D3D3;
  --sfl-order-rto-received-text: #A9A9A9;
}

table tbody tr.sfl-order-state-rto-received > *,
.table tbody tr.sfl-order-state-rto-received > * {
  background-color: var(--sfl-order-rto-received-bg) !important;
  color: var(--sfl-order-rto-received-text) !important;
}

table tbody tr.sfl-order-state-rto-received:hover > *,
.table tbody tr.sfl-order-state-rto-received:hover > * {
  background-color: var(--sfl-order-rto-received-bg) !important;
  filter: brightness(.985);
}

table tbody tr.sfl-order-state-rto-received .form-control,
table tbody tr.sfl-order-state-rto-received .form-select,
.table tbody tr.sfl-order-state-rto-received .form-control,
.table tbody tr.sfl-order-state-rto-received .form-select {
  background-color: rgba(255,255,255,.45) !important;
  color: var(--sfl-order-rto-received-text) !important;
  border-color: rgba(169,169,169,.65) !important;
}

table tbody tr.sfl-order-state-rto-received a,
table tbody tr.sfl-order-state-rto-received button,
table tbody tr.sfl-order-state-rto-received span,
table tbody tr.sfl-order-state-rto-received strong,
table tbody tr.sfl-order-state-rto-received small,
.table tbody tr.sfl-order-state-rto-received a,
.table tbody tr.sfl-order-state-rto-received button,
.table tbody tr.sfl-order-state-rto-received span,
.table tbody tr.sfl-order-state-rto-received strong,
.table tbody tr.sfl-order-state-rto-received small {
  color: var(--sfl-order-rto-received-text) !important;
}

.sfl-order-preview-surface.sfl-order-state-rto-received,
.order-detail-surface.sfl-order-state-rto-received,
.global-search-result.sfl-order-state-rto-received,
.supplier-order-card.sfl-order-state-rto-received,
.sfl-order-card.sfl-order-state-rto-received {
  background-color: var(--sfl-order-rto-received-bg) !important;
  color: var(--sfl-order-rto-received-text) !important;
}

.sfl-order-preview-surface.sfl-order-state-rto-received,
.order-detail-surface.sfl-order-state-rto-received {
  border: 1px solid rgba(169,169,169,.7) !important;
  border-radius: 16px;
}

/* SFL PATCH: FOLLOW-UP CANCELLATION REVERSAL + GLOBAL CANCELLED COLOUR
   A follow-up cancellation is a reversible visual/status override. */
:root {
  --sfl-order-cancelled-bg: #e5e7eb;
  --sfl-order-cancelled-text: #4b5563;
}

table tbody tr.sfl-order-state-cancelled > *,
.table tbody tr.sfl-order-state-cancelled > * {
  background-color: var(--sfl-order-cancelled-bg) !important;
  color: var(--sfl-order-cancelled-text) !important;
}

table tbody tr.sfl-order-state-cancelled:hover > *,
.table tbody tr.sfl-order-state-cancelled:hover > * {
  background-color: var(--sfl-order-cancelled-bg) !important;
  filter: brightness(.985);
}

table tbody tr.sfl-order-state-cancelled .form-control,
table tbody tr.sfl-order-state-cancelled .form-select,
.table tbody tr.sfl-order-state-cancelled .form-control,
.table tbody tr.sfl-order-state-cancelled .form-select {
  background-color: rgba(255,255,255,.58) !important;
  color: var(--sfl-order-cancelled-text) !important;
  border-color: #9ca3af !important;
}

table tbody tr.sfl-order-state-cancelled a:not(.btn),
table tbody tr.sfl-order-state-cancelled span:not(.badge),
table tbody tr.sfl-order-state-cancelled strong,
table tbody tr.sfl-order-state-cancelled small,
.table tbody tr.sfl-order-state-cancelled a:not(.btn),
.table tbody tr.sfl-order-state-cancelled span:not(.badge),
.table tbody tr.sfl-order-state-cancelled strong,
.table tbody tr.sfl-order-state-cancelled small {
  color: var(--sfl-order-cancelled-text) !important;
}

.sfl-order-preview-surface.sfl-order-state-cancelled,
.order-detail-surface.sfl-order-state-cancelled,
.global-search-result.sfl-order-state-cancelled,
.supplier-order-card.sfl-order-state-cancelled,
.sfl-order-card.sfl-order-state-cancelled {
  background-color: var(--sfl-order-cancelled-bg) !important;
  color: var(--sfl-order-cancelled-text) !important;
}

.sfl-order-preview-surface.sfl-order-state-cancelled,
.order-detail-surface.sfl-order-state-cancelled {
  border: 1px solid #9ca3af !important;
  border-radius: 16px;
}

.global-search-result.sfl-order-state-cancelled {
  border-color: #9ca3af !important;
  box-shadow: inset 4px 0 0 #6b7280;
}

.supplier-view-page .supplier-order-card.sfl-order-state-cancelled {
  background: var(--sfl-order-cancelled-bg) !important;
  border-color: #9ca3af !important;
  color: var(--sfl-order-cancelled-text) !important;
}

/* SFL PATCH V4: GLOBAL ORDER / EXCHANGE STATUS BACK-STAMPS
   Live stylesheet: public/assets/css/app.css
   Presentation only. No workflow, status, database, route, auth, or security logic. */
.sfl-status-stamp-order-new { --sfl-status-stamp-text: "NEW ORDER"; --sfl-status-stamp-color: rgba(128, 0, 32, .18); }
.sfl-status-stamp-order-future-pending { --sfl-status-stamp-text: "FUTURE ORDER"; --sfl-status-stamp-color: rgba(0, 92, 102, .20); }
.sfl-status-stamp-order-future-confirmed { --sfl-status-stamp-text: "FUTURE CONFIRMED"; --sfl-status-stamp-color: rgba(76, 29, 149, .18); }
.sfl-status-stamp-order-dispatched { --sfl-status-stamp-text: "DISPATCHED"; --sfl-status-stamp-color: rgba(30, 64, 175, .18); }
.sfl-status-stamp-order-delivered { --sfl-status-stamp-text: "DELIVERED"; --sfl-status-stamp-color: rgba(22, 101, 52, .19); }
.sfl-status-stamp-order-rto { --sfl-status-stamp-text: "RTO"; --sfl-status-stamp-color: rgba(185, 28, 28, .21); }
.sfl-status-stamp-order-rto-received { --sfl-status-stamp-text: "RTO RECEIVED"; --sfl-status-stamp-color: rgba(55, 65, 81, .21); }
.sfl-status-stamp-order-cancelled { --sfl-status-stamp-text: "CANCELLED"; --sfl-status-stamp-color: rgba(185, 28, 28, .20); }
.sfl-status-stamp-order-refund { --sfl-status-stamp-text: "REFUND"; --sfl-status-stamp-color: rgba(180, 83, 9, .20); }
.sfl-status-stamp-order-closed { --sfl-status-stamp-text: "CLOSED"; --sfl-status-stamp-color: rgba(55, 65, 81, .19); }
.sfl-status-stamp-order-shoes-na { --sfl-status-stamp-text: "SHOES NA"; --sfl-status-stamp-color: rgba(154, 52, 18, .21); }
.sfl-status-stamp-order-deleted { --sfl-status-stamp-text: "DELETED"; --sfl-status-stamp-color: rgba(55, 65, 81, .20); }
.sfl-status-stamp-exchange-pending { --sfl-status-stamp-text: "EXCHANGE PENDING"; --sfl-status-stamp-color: rgba(128, 0, 32, .18); }
.sfl-status-stamp-exchange-pickup { --sfl-status-stamp-text: "PICKUP IN PROCESS"; --sfl-status-stamp-color: rgba(180, 83, 9, .19); }
.sfl-status-stamp-exchange-outbound { --sfl-status-stamp-text: "NEW SHOES DISPATCHED"; --sfl-status-stamp-color: rgba(30, 64, 175, .18); }
.sfl-status-stamp-exchange-rts { --sfl-status-stamp-text: "PICKUP + DISPATCH"; --sfl-status-stamp-color: rgba(126, 34, 206, .18); }
.sfl-status-stamp-exchange-delivered { --sfl-status-stamp-text: "DELIVERED"; --sfl-status-stamp-color: rgba(22, 101, 52, .19); }
.sfl-status-stamp-exchange-closed { --sfl-status-stamp-text: "CLOSED"; --sfl-status-stamp-color: rgba(55, 65, 81, .19); }
.sfl-status-stamp-exchange-rto { --sfl-status-stamp-text: "RTO"; --sfl-status-stamp-color: rgba(185, 28, 28, .21); }
.sfl-status-stamp-exchange-cancelled { --sfl-status-stamp-text: "CANCELLED"; --sfl-status-stamp-color: rgba(185, 28, 28, .20); }

/* V4 table refinement: keep several stamps across a wide row, but not inside every
   column. Starting from column 2, a stamp appears every fourth cell (2, 6, 10, 14...).
   The stamps alternate vertically, use smaller type and a slight rotation so they do
   not sit directly beneath the normal order text. */
table tbody tr.sfl-status-stamped > td,
.table tbody tr.sfl-status-stamped > td {
  position: relative !important;
  isolation: isolate;
}

/* Hide the V3 stamp in ordinary cells. */
table tbody tr.sfl-status-stamped > td::before,
.table tbody tr.sfl-status-stamped > td::before {
  content: none;
}

/* Shared appearance for the spaced stamps: columns 2, 6, 10, 14... */
table tbody tr.sfl-status-stamped > td:nth-child(8n + 2)::before,
table tbody tr.sfl-status-stamped > td:nth-child(8n + 6)::before,
.table tbody tr.sfl-status-stamped > td:nth-child(8n + 2)::before,
.table tbody tr.sfl-status-stamped > td:nth-child(8n + 6)::before {
  content: var(--sfl-status-stamp-text, "");
  position: absolute;
  left: 50%;
  z-index: -1;
  display: block;
  width: max-content;
  max-width: calc(100% - 12px);
  overflow: hidden;
  padding: 1px 4px;
  color: var(--sfl-status-stamp-color, rgba(31, 41, 55, .13));
  font-size: .56rem;
  font-weight: 850;
  letter-spacing: .055em;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}

/* Alternate the vertical position so the marks do not form one busy straight line. */
table tbody tr.sfl-status-stamped > td:nth-child(8n + 2)::before,
.table tbody tr.sfl-status-stamped > td:nth-child(8n + 2)::before {
  top: 76%;
  transform: translate(-50%, -50%) rotate(-8deg);
}

table tbody tr.sfl-status-stamped > td:nth-child(8n + 6)::before,
.table tbody tr.sfl-status-stamped > td:nth-child(8n + 6)::before {
  top: 24%;
  transform: translate(-50%, -50%) rotate(-8deg);
}

/* Non-table order lists/cards: Supplier View, global search, previews and Staff Dashboard. */
.supplier-order-card.sfl-status-stamped,
.global-search-result.sfl-status-stamped,
.sfl-order-preview-surface.sfl-status-stamped,
.sfl-dashboard-order-stamp.sfl-status-stamped {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.supplier-order-card.sfl-status-stamped::before,
.global-search-result.sfl-status-stamped::before,
.sfl-order-preview-surface.sfl-status-stamped::before,
.sfl-dashboard-order-stamp.sfl-status-stamped::before {
  content: var(--sfl-status-stamp-text, "");
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: var(--sfl-status-stamp-color, rgba(31, 41, 55, .13));
  font-size: clamp(1rem, 3vw, 2.25rem);
  font-weight: 900;
  letter-spacing: .10em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
}
/* END SFL PATCH V4: GLOBAL ORDER / EXCHANGE STATUS BACK-STAMPS */


/* BEGIN SFL PATCH: SUPPLIER VIEW DESKTOP IMAGE + COMPACT DETAILS V1 */
/* Desktop only. Mobile/tablet rules at 768px and below remain untouched. */
@media (min-width: 769px) {
  .supplier-view-page .supplier-image-strip {
    gap: 14px !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
  }

  .supplier-view-page .supplier-image-card {
    width: 282px !important;
    padding: 8px !important;
  }

  .supplier-view-page .supplier-product-image {
    height: 282px !important;
  }

  .supplier-view-page .supplier-info-grid {
    grid-template-columns: minmax(0, 1fr) 250px !important;
    gap: 8px !important;
  }

  .supplier-view-page .supplier-info-main {
    padding: 9px 10px !important;
    border-radius: 12px !important;
  }

  .supplier-view-page .supplier-customer-line {
    gap: 6px !important;
    font-size: .96rem !important;
    line-height: 1.25 !important;
  }

  .supplier-view-page .supplier-contact-line {
    gap: 8px !important;
    margin-top: 2px !important;
    line-height: 1.25 !important;
  }

  .supplier-view-page .supplier-address-line {
    margin-top: 5px !important;
    line-height: 1.3 !important;
  }

  .supplier-view-page .supplier-order-summary {
    gap: 6px !important;
  }

  .supplier-view-page .supplier-order-summary div {
    padding: 7px 8px !important;
    border-radius: 10px !important;
  }

  .supplier-view-page .supplier-order-summary span {
    font-size: .66rem !important;
  }

  .supplier-view-page .supplier-order-summary strong {
    font-size: .88rem !important;
    margin-top: 1px !important;
    line-height: 1.2 !important;
  }

  .supplier-view-page .supplier-order-summary small {
    font-size: .70rem !important;
    line-height: 1.15 !important;
  }

  .supplier-view-page .supplier-status-awb-grid {
    gap: 8px !important;
    margin-top: 7px !important;
  }

  .supplier-view-page .supplier-status-box,
  .supplier-view-page .supplier-awb-box {
    padding: 7px 9px !important;
    border-width: 1px !important;
    border-radius: 12px !important;
  }

  .supplier-view-page .supplier-status-box span,
  .supplier-view-page .supplier-awb-box span {
    margin-bottom: 2px !important;
    font-size: .66rem !important;
  }

  .supplier-view-page .supplier-status-box strong,
  .supplier-view-page .supplier-awb-box strong {
    font-size: .84rem !important;
    line-height: 1.2 !important;
  }

  .supplier-view-page .supplier-status-box small,
  .supplier-view-page .supplier-awb-box small {
    margin-top: 2px !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
  }

  .supplier-view-page .supplier-future-line,
  .supplier-view-page .supplier-notes,
  .supplier-view-page .supplier-activity-line {
    margin-top: 7px !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    line-height: 1.3 !important;
  }
}
/* END SFL PATCH: SUPPLIER VIEW DESKTOP IMAGE + COMPACT DETAILS V1 */

/* BEGIN SFL PATCH: SUPPLIER VIEW DESKTOP CENTRED HEADER + SINGLE DETAILS ROW V2
   Desktop presentation only. Mobile/tablet rules at 768px and below remain unchanged. */
@media (min-width: 769px) {
  .supplier-view-page .supplier-order-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: initial !important;
    column-gap: clamp(24px, 6vw, 92px) !important;
    margin-bottom: 12px !important;
  }

  .supplier-view-page .supplier-order-head > div:first-child {
    grid-column: 2 !important;
    text-align: center !important;
  }

  .supplier-view-page .supplier-order-id {
    font-size: 1.65rem !important;
    line-height: 1.05 !important;
    letter-spacing: .035em !important;
  }

  .supplier-view-page .supplier-order-meta {
    margin-top: 5px !important;
    font-size: .90rem !important;
    line-height: 1.2 !important;
  }

  .supplier-view-page .supplier-order-time {
    grid-column: 3 !important;
    position: static !important;
    min-width: 126px !important;
    padding-left: 24px !important;
    border-left: 1px solid rgba(100, 116, 139, .24) !important;
    text-align: center !important;
    font-size: .75rem !important;
    line-height: 1.25 !important;
  }

  .supplier-view-page .supplier-order-time strong {
    font-size: .88rem !important;
    line-height: 1.25 !important;
  }

  .supplier-view-page .supplier-image-strip {
    gap: 16px !important;
    padding: 5px 0 10px !important;
    margin-bottom: 2px !important;
  }

  .supplier-view-page .supplier-image-card {
    width: 360px !important;
    padding: 9px !important;
    border-radius: 17px !important;
  }

  .supplier-view-page .supplier-product-image {
    height: 360px !important;
    border-radius: 13px !important;
  }

  .supplier-view-page .supplier-size-badge {
    min-height: 36px !important;
    font-size: 1.02rem !important;
  }

  .supplier-view-page .supplier-info-main,
  .supplier-view-page .supplier-order-summary,
  .supplier-view-page .supplier-status-box,
  .supplier-view-page .supplier-awb-box {
    height: 100% !important;
    min-height: 0 !important;
  }

  .supplier-view-page .supplier-info-main {
    padding: 10px 11px !important;
  }

  .supplier-view-page .supplier-order-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: stretch !important;
  }

  .supplier-view-page .supplier-order-summary div {
    min-width: 0 !important;
    padding: 8px 9px !important;
  }

  .supplier-view-page .supplier-order-summary > div:nth-child(2) strong {
    color: var(--sfl-primary, #800020) !important;
    font-size: 1.18rem !important;
    line-height: 1.1 !important;
  }

  .supplier-view-page .supplier-status-box,
  .supplier-view-page .supplier-awb-box {
    padding: 9px 10px !important;
  }

  .supplier-view-page .supplier-activity-line,
  .supplier-view-page .supplier-future-line,
  .supplier-view-page .supplier-notes {
    grid-column: 1 / -1 !important;
  }

  .supplier-view-page .supplier-notes {
    margin-top: 0 !important;
  }
}

@media (min-width: 1100px) {
  .supplier-view-page .supplier-order-card {
    display: grid !important;
    grid-template-columns:
      minmax(270px, 1.75fr)
      minmax(210px, 1.15fr)
      minmax(190px, 1fr)
      minmax(245px, 1.35fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .supplier-view-page .supplier-order-head {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .supplier-view-page .supplier-image-strip {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .supplier-view-page .supplier-info-grid,
  .supplier-view-page .supplier-status-awb-grid {
    display: contents !important;
  }

  .supplier-view-page .supplier-info-main {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .supplier-view-page .supplier-order-summary {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  .supplier-view-page .supplier-status-box {
    grid-column: 3 !important;
    grid-row: 3 !important;
  }

  .supplier-view-page .supplier-awb-box {
    grid-column: 4 !important;
    grid-row: 3 !important;
  }

  .supplier-view-page .supplier-activity-line,
  .supplier-view-page .supplier-future-line,
  .supplier-view-page .supplier-notes {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }
}
/* END SFL PATCH: SUPPLIER VIEW DESKTOP CENTRED HEADER + SINGLE DETAILS ROW V2 */

/* BEGIN SFL PATCH: SUPPLIER VIEW MOBILE COMPACT DETAILS V3
   Mobile/tablet presentation only. Image dimensions and desktop layout are unchanged. */
@media (max-width: 768px) {
  .supplier-view-page .supplier-order-card {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  .supplier-view-page .supplier-order-head {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin: 0 0 4px !important;
    text-align: center !important;
  }

  .supplier-view-page .supplier-order-head > div:first-child {
    width: 100% !important;
    text-align: center !important;
  }

  .supplier-view-page .supplier-order-id {
    font-size: 1.55rem !important;
    line-height: 1.05 !important;
    letter-spacing: .025em !important;
  }

  .supplier-view-page .supplier-order-meta {
    margin-top: 2px !important;
    font-size: .86rem !important;
    line-height: 1.15 !important;
  }

  .supplier-view-page .supplier-order-time {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: center !important;
    font-size: .68rem !important;
    line-height: 1.15 !important;
  }

  .supplier-view-page .supplier-order-time strong {
    font-size: .82rem !important;
    line-height: 1.15 !important;
  }

  /* Keep the existing mobile image dimensions exactly as they are. */
  .supplier-view-page .supplier-image-strip {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-bottom: 1px !important;
    padding-bottom: 5px !important;
    gap: 10px !important;
  }

  /* Flatten only the detail wrappers so the information can form two compact rows. */
  .supplier-view-page .supplier-info-grid,
  .supplier-view-page .supplier-order-summary,
  .supplier-view-page .supplier-status-awb-grid {
    display: contents !important;
  }

  /* Row 1: customer details + quantity + price. */
  .supplier-view-page .supplier-info-main {
    grid-column: 1 / 8 !important;
    grid-row: 3 !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .supplier-view-page .supplier-order-summary > div:nth-child(1) {
    grid-column: 8 / 10 !important;
    grid-row: 3 !important;
  }

  .supplier-view-page .supplier-order-summary > div:nth-child(2) {
    grid-column: 10 / 13 !important;
    grid-row: 3 !important;
  }

  /* Row 2: page + staff + delivery + AWB. */
  .supplier-view-page .supplier-order-summary > div:nth-child(3) {
    grid-column: 1 / 4 !important;
    grid-row: 4 !important;
  }

  .supplier-view-page .supplier-order-summary > div:nth-child(4) {
    grid-column: 4 / 7 !important;
    grid-row: 4 !important;
  }

  .supplier-view-page .supplier-status-box {
    grid-column: 7 / 10 !important;
    grid-row: 4 !important;
  }

  .supplier-view-page .supplier-awb-box {
    grid-column: 10 / 13 !important;
    grid-row: 4 !important;
  }

  .supplier-view-page .supplier-customer-line {
    gap: 5px !important;
    font-size: .92rem !important;
    line-height: 1.18 !important;
  }

  .supplier-view-page .supplier-risk-badge {
    padding: 2px 6px !important;
    font-size: .64rem !important;
  }

  .supplier-view-page .supplier-contact-line {
    gap: 5px !important;
    margin-top: 3px !important;
    font-size: .82rem !important;
    line-height: 1.18 !important;
  }

  .supplier-view-page .supplier-address-line {
    margin-top: 5px !important;
    font-size: .82rem !important;
    line-height: 1.22 !important;
    overflow-wrap: anywhere !important;
  }

  .supplier-view-page .supplier-order-summary > div,
  .supplier-view-page .supplier-status-box,
  .supplier-view-page .supplier-awb-box {
    min-width: 0 !important;
    height: 100% !important;
    padding: 7px 6px !important;
    border-width: 1px !important;
    border-radius: 11px !important;
    overflow-wrap: anywhere !important;
  }

  .supplier-view-page .supplier-order-summary span,
  .supplier-view-page .supplier-status-box span,
  .supplier-view-page .supplier-awb-box span {
    margin-bottom: 2px !important;
    font-size: .61rem !important;
    line-height: 1.05 !important;
    letter-spacing: .01em !important;
  }

  .supplier-view-page .supplier-order-summary strong,
  .supplier-view-page .supplier-status-box strong,
  .supplier-view-page .supplier-awb-box strong {
    margin-top: 1px !important;
    font-size: .76rem !important;
    line-height: 1.16 !important;
    overflow-wrap: anywhere !important;
  }

  .supplier-view-page .supplier-order-summary > div:nth-child(1) strong {
    font-size: .92rem !important;
  }

  .supplier-view-page .supplier-order-summary > div:nth-child(2) strong {
    color: var(--sfl-primary, #800020) !important;
    font-size: 1.08rem !important;
    line-height: 1.05 !important;
  }

  .supplier-view-page .supplier-order-summary small,
  .supplier-view-page .supplier-status-box small,
  .supplier-view-page .supplier-awb-box small {
    margin-top: 2px !important;
    font-size: .64rem !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere !important;
  }

  /* Every optional detail remains visible below the two compact rows. */
  .supplier-view-page .supplier-activity-line,
  .supplier-view-page .supplier-future-line,
  .supplier-view-page .supplier-notes {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    font-size: .78rem !important;
    line-height: 1.22 !important;
  }
}
/* END SFL PATCH: SUPPLIER VIEW MOBILE COMPACT DETAILS V3 */

/* BEGIN SFL PATCH: SUPPLIER VIEW MOBILE DETAIL ROWS + UPDATED BADGE V4
   Mobile layout only, except the compact UPDATED indicator which is safe on all Supplier View sizes.
   Existing mobile image dimensions and desktop detail layout are unchanged. */
.supplier-view-page .supplier-update-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 5px;
}

.supplier-view-page .supplier-updated-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 4px 12px;
  border: 1px solid rgba(128, 0, 32, .32);
  border-radius: 999px;
  background: #c81445;
  color: #fff;
  box-shadow: 0 4px 12px rgba(128, 0, 32, .18);
  font-size: .70rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .085em;
  text-align: center;
  animation: sflSupplierUpdatedPulse 1.35s ease-in-out infinite;
}

.supplier-view-page .supplier-update-indicator small {
  display: block;
  color: #64748b;
  font-size: .64rem;
  font-weight: 800;
  line-height: 1.12;
  text-align: center;
}

.supplier-view-page .supplier-update-indicator.is-settled .supplier-updated-button {
  min-width:0;
  padding:3px 8px;
  border-color:#d1d5db;
  background:#e5e7eb;
  color:#4b5563;
  box-shadow:none;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:0;
  animation:none !important;
  transform:none !important;
}

@keyframes sflSupplierUpdatedPulse {
  0%, 100% {
    background: #c81445;
    box-shadow: 0 4px 12px rgba(128, 0, 32, .18);
    transform: scale(1);
  }
  50% {
    background: #f58220;
    box-shadow: 0 5px 16px rgba(245, 130, 32, .28);
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .supplier-view-page .supplier-updated-button {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .supplier-view-page .supplier-order-card {
    gap: 5px !important;
  }

  .supplier-view-page .supplier-order-id {
    font-size: 1.66rem !important;
  }

  .supplier-view-page .supplier-update-indicator {
    margin-top: 4px !important;
  }

  .supplier-view-page .supplier-updated-button {
    min-width: 86px !important;
    padding: 5px 13px !important;
    font-size: .72rem !important;
  }

  .supplier-view-page .supplier-update-indicator small {
    font-size: .63rem !important;
  }

  /* Thin second row: Page + Staff. */
  .supplier-view-page .supplier-order-summary > div.supplier-summary-page {
    grid-column: 1 / 7 !important;
    grid-row: 4 !important;
    min-height: 46px !important;
    padding: 5px 8px !important;
  }

  .supplier-view-page .supplier-order-summary > div.supplier-summary-staff {
    grid-column: 7 / 13 !important;
    grid-row: 4 !important;
    min-height: 46px !important;
    padding: 5px 8px !important;
  }

  .supplier-view-page .supplier-order-summary > div.supplier-summary-page span,
  .supplier-view-page .supplier-order-summary > div.supplier-summary-staff span {
    margin-bottom: 1px !important;
    font-size: .59rem !important;
  }

  .supplier-view-page .supplier-order-summary > div.supplier-summary-page strong,
  .supplier-view-page .supplier-order-summary > div.supplier-summary-staff strong {
    font-size: .79rem !important;
    line-height: 1.12 !important;
  }

  .supplier-view-page .supplier-order-summary > div.supplier-summary-page small,
  .supplier-view-page .supplier-order-summary > div.supplier-summary-staff small {
    margin-top: 1px !important;
    font-size: .61rem !important;
  }

  /* Clear third row: Delivery + AWB with enough width for full content. */
  .supplier-view-page .supplier-status-box {
    grid-column: 1 / 7 !important;
    grid-row: 5 !important;
    min-height: 0 !important;
    padding: 8px 9px !important;
  }

  .supplier-view-page .supplier-awb-box {
    grid-column: 7 / 13 !important;
    grid-row: 5 !important;
    min-height: 0 !important;
    padding: 8px 9px !important;
  }

  .supplier-view-page .supplier-status-box span,
  .supplier-view-page .supplier-awb-box span {
    font-size: .62rem !important;
    line-height: 1.06 !important;
  }

  .supplier-view-page .supplier-status-box strong,
  .supplier-view-page .supplier-awb-box strong {
    font-size: .80rem !important;
    line-height: 1.18 !important;
  }

  .supplier-view-page .supplier-status-box small,
  .supplier-view-page .supplier-awb-box small {
    font-size: .65rem !important;
    line-height: 1.16 !important;
  }
}
/* END SFL PATCH: SUPPLIER VIEW MOBILE DETAIL ROWS + UPDATED BADGE V4 */


/* BEGIN SFL PATCH: SUPPLIER DESKTOP 3-COLUMN IMAGE WRAP + UPDATED BADGE V5
   Desktop only. Mobile image sizing and mobile layout remain unchanged. */
@media (min-width: 769px) {
  /* Never hide extra shoes to the right: show a maximum of three per row. */
  .supplier-view-page .supplier-image-strip {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-items: start !important;
    gap: 16px !important;
    width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
  }

  .supplier-view-page .supplier-image-strip::-webkit-scrollbar {
    display: none !important;
  }

  .supplier-view-page .supplier-image-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .supplier-view-page .supplier-product-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  /* Keep the existing order-update alert clearly visible on computer view too. */
  .supplier-view-page .supplier-update-indicator {
    display: flex !important;
    margin-top: 6px !important;
  }

  .supplier-view-page .supplier-updated-button {
    min-width: 102px !important;
    padding: 5px 14px !important;
    font-size: .74rem !important;
  }

  .supplier-view-page .supplier-update-indicator small {
    margin-top: 1px !important;
    font-size: .68rem !important;
  }
}
/* END SFL PATCH: SUPPLIER DESKTOP 3-COLUMN IMAGE WRAP + UPDATED BADGE V5 */

/* SFL fast selected-image share chooser v1 */
.sfl-share-options-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 900;
  cursor: pointer;
}
.sfl-share-options-button:hover,
.sfl-share-options-button:focus-visible {
  background: rgba(255,255,255,.26);
  color: #fff;
  outline: none;
}

.sfl-fast-share-choice {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(4px);
}
.sfl-fast-share-choice.is-open { display: flex; }
.sfl-fast-share-card {
  position: relative;
  width: min(440px, calc(100vw - 30px));
  padding: 24px;
  border: 1px solid rgba(128,0,32,.16);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15,23,42,.28);
  color: #172033;
}
.sfl-fast-share-card h3 {
  margin: 0 38px 4px 0;
  font-size: 1.2rem;
  font-weight: 900;
}
.sfl-fast-share-count-text {
  margin: 0 0 16px;
  color: #667085;
  font-size: .9rem;
}
.sfl-fast-share-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f2f4f7;
  color: #344054;
  font-size: 1.25rem;
  line-height: 1;
}
.sfl-fast-share-option {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 0 0 10px;
  padding: 15px 16px;
  border: 1px solid #e4e7ec;
  border-radius: 16px;
  background: #fff;
  color: #172033;
  text-align: left;
  cursor: pointer;
}
.sfl-fast-share-option:hover,
.sfl-fast-share-option:focus-visible {
  border-color: #800020;
  box-shadow: 0 0 0 3px rgba(128,0,32,.08);
  outline: none;
}
.sfl-fast-share-option strong { font-size: 1rem; font-weight: 900; }
.sfl-fast-share-option span { color: #667085; font-size: .82rem; }
.sfl-fast-share-whatsapp {
  border-color: rgba(18,140,126,.3);
  background: rgba(18,140,126,.045);
}
.sfl-fast-share-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #475467;
  font-size: .86rem;
  font-weight: 700;
}
.sfl-fast-share-remember input { width: 17px; height: 17px; }

@media (max-width: 900px) {
  #sflMobileImageShareDock .sfl-share-options-button {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    border-color: rgba(255,255,255,.45) !important;
    font-size: 1rem !important;
  }
  .sfl-fast-share-choice {
    align-items: flex-end;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .sfl-fast-share-card {
    width: 100%;
    padding: 20px;
    border-radius: 22px 22px 18px 18px;
  }
  .sfl-fast-share-option { min-height: 62px; }
}

/* Contact validation + exact field-error focus (2026-07-27). */
.sfl-contact-mode-check {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.72rem;
  line-height:1.2;
  color:#6b7280;
  cursor:pointer;
  white-space:normal;
}
.sfl-contact-mode-check .form-check-input { margin:0; flex:0 0 auto; }
@keyframes sflFieldErrorPulse {
  0%,100% { box-shadow:0 0 0 .12rem rgba(220,53,69,.18); }
  50% { box-shadow:0 0 0 .32rem rgba(220,53,69,.34); }
}
.sfl-field-error-flash {
  border-color:#dc3545 !important;
  background:#fff7f7 !important;
  animation:sflFieldErrorPulse .65s ease-in-out 3;
}
.sfl-field-error-wrap {
  border-color:#dc3545 !important;
  background:#fffafa !important;
}
.sfl-inline-field-error {
  margin-top:.28rem;
  color:#b42318;
  font-size:.78rem;
  font-weight:700;
}


/* Contact warning for orders without a valid UAE mobile number. */
@keyframes sflContactPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 194, 42, .15); }
  50% { box-shadow: 0 0 0 5px rgba(245, 194, 42, .35); }
}
.sfl-contact-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  background: #fff3a3;
  border: 1px solid #d4a600;
  border-radius: 7px;
  padding: 2px 6px;
  font-weight: 800;
  color: #392800;
  animation: sflContactPulse 1.35s ease-in-out infinite;
}
.sfl-contact-warning-value {
  white-space: nowrap;
}
.sfl-contact-warning-badge {
  font-size: .68rem;
  line-height: 1;
  border-radius: 999px;
  background: #7a5300;
  color: #fff;
  padding: 2px 5px;
  letter-spacing: .02em;
}

/* Inline address save box (Operations Manager/Admin only). */
.sfl-inline-address {
  position: relative;
  min-width: 180px;
  max-width: 100%;
}
.sfl-inline-address-input {
  width: 100%;
  min-height: 38px;
  resize: vertical;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(255,255,255,.62);
  padding: 7px 48px 7px 8px;
  color: inherit;
  font: inherit;
  line-height: 1.35;
  overflow: hidden;
}
.sfl-inline-address-input:hover,
.sfl-inline-address-input:focus {
  border-color: rgba(128,0,32,.28);
  background: #fff;
  box-shadow: 0 0 0 .14rem rgba(128,0,32,.08);
  outline: 0;
}
.sfl-inline-address.is-dirty .sfl-inline-address-input {
  background: #fff9e6;
  border-color: #f0b429;
}
.sfl-inline-address-save {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
  border-radius: 999px;
  background: #800020;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 6px 8px;
  box-shadow: 0 8px 16px rgba(128,0,32,.18);
}
.sfl-inline-address-save:disabled {
  opacity: .65;
  cursor: wait;
}
.sfl-inline-address-status {
  display: none;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 800;
}
.sfl-inline-address.is-saved .sfl-inline-address-status,
.sfl-inline-address.is-error .sfl-inline-address-status {
  display: block;
}
.sfl-inline-address.is-saved .sfl-inline-address-status { color: #137333; }
.sfl-inline-address.is-error .sfl-inline-address-status { color: #b42318; }


/* Clean inline Order Price editing for Operations Manager/Admin only. */
.sfl-inline-price {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 104px;
  max-width: 100%;
  line-height: 1.2;
}
.sfl-inline-price-currency {
  flex: 0 0 auto;
  margin-right: 4px;
  white-space: nowrap;
}
.sfl-inline-price-input {
  width: 68px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  padding: 3px 4px;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
}
.sfl-inline-price-input:hover,
.sfl-inline-price-input:focus {
  border-color: rgba(128,0,32,.28);
  background: #fff;
  box-shadow: 0 0 0 .14rem rgba(128,0,32,.08);
  outline: 0;
}
.sfl-inline-price.is-dirty {
  padding-right: 42px;
}
.sfl-inline-price.is-dirty .sfl-inline-price-input {
  background: #fff9e6;
  border-color: #f0b429;
}
.sfl-inline-price-save {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: #800020;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 6px;
  box-shadow: 0 6px 12px rgba(128,0,32,.16);
}
.sfl-inline-price-save:disabled { opacity: .65; cursor: wait; }
.sfl-inline-price-status {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 5;
  margin-top: 2px;
  padding: 2px 5px;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 5px 12px rgba(15,23,42,.12);
}
.sfl-inline-price.is-saved .sfl-inline-price-status,
.sfl-inline-price.is-error .sfl-inline-price-status { display: block; }
.sfl-inline-price.is-saved .sfl-inline-price-status { color: #137333; }
.sfl-inline-price.is-error .sfl-inline-price-status { color: #b42318; }

/* Automatic Partial Delivery note warning. */
.sfl-order-note { white-space: normal; }
.sfl-order-note-partial {
  display: inline-block;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #dc3545;
  border-radius: 8px;
  background: #ffe5e8;
  color: #9f1239;
  font-weight: 900;
  line-height: 1.35;
}

/* Simple Partial Delivery Update popup. */
.sfl-partial-delivery-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  padding: 20px;
  overflow: auto;
  background: rgba(15,23,42,.62);
}
.sfl-partial-delivery-backdrop.is-open { display: block; }
.sfl-partial-delivery-dialog {
  width: min(760px, 100%);
  margin: 20px auto;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15,23,42,.38);
}
.sfl-partial-delivery-head,
.sfl-partial-delivery-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.sfl-partial-delivery-foot {
  border-top: 1px solid #e5e7eb;
  border-bottom: 0;
}
.sfl-partial-delivery-body { padding: 16px; }
.sfl-partial-delivery-close {
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 24px;
  line-height: 1;
}
.sfl-partial-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.sfl-partial-summary > div {
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
}
.sfl-partial-summary span { display: block; color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.sfl-partial-summary strong { display: block; margin-top: 3px; color: #111827; font-size: 18px; }
.sfl-partial-image-list { display: grid; gap: 12px; }
.sfl-partial-image-card {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}
.sfl-partial-image-card.is-removed { background: #fff1f2; border-color: #fda4af; }
.sfl-partial-image-card img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #d1d5db;
  border-radius: 9px;
}
.sfl-partial-image-card.is-removed img { opacity: .35; filter: grayscale(1); }
.sfl-partial-size-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.sfl-partial-size-unit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
}
.sfl-partial-size-unit.is-removed { opacity: .55; text-decoration: line-through; background: #fee2e2; border-color: #fca5a5; }
.sfl-partial-size-toggle,
.sfl-partial-image-toggle {
  border: 0;
  border-radius: 999px;
  background: #dc3545;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
}
.sfl-partial-size-unit.is-removed .sfl-partial-size-toggle,
.sfl-partial-image-card.is-removed .sfl-partial-image-toggle { background: #475569; }
.sfl-partial-note-preview {
  margin-top: 14px;
  padding: 9px 11px;
  border: 1px solid #dc3545;
  border-radius: 9px;
  background: #ffe5e8;
  color: #9f1239;
  font-weight: 900;
}
.sfl-partial-error { min-height: 20px; margin-top: 9px; color: #b42318; font-weight: 800; }
@media (max-width: 575.98px) {
  .sfl-partial-summary { grid-template-columns: 1fr; }
  .sfl-partial-image-card { grid-template-columns: 82px minmax(0,1fr); }
  .sfl-partial-image-card img { width: 72px; height: 72px; }
}

/* SFL image editor v1 — compact Admin/Operations editor in the global image viewer. */
.sfl-image-lightbox-image-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: calc(100vh - 180px);
}
.sfl-image-editor-corner {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  z-index: 10090 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 50% !important;
  background: rgba(17,24,39,.78) !important;
  color: #fff !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.32) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  backdrop-filter: blur(5px);
}
.sfl-image-editor-corner:hover,
.sfl-image-editor-corner:focus-visible {
  background: #111827 !important;
  outline: 2px solid rgba(255,255,255,.65) !important;
  outline-offset: 2px !important;
}
.sfl-image-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(2,6,23,.94);
}
.sfl-image-editor-overlay.is-open { display: flex; }
body.sfl-image-editor-open { overflow: hidden !important; }
.sfl-image-editor-shell {
  position: relative;
  width: min(1180px, 100%);
  height: min(94vh, 940px);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: #070b14;
  box-shadow: 0 28px 80px rgba(0,0,0,.62);
}
.sfl-image-editor-floating-bar {
  position: relative;
  z-index: 9;
  flex: 0 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 52px 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(7,11,20,.94);
  backdrop-filter: blur(10px);
}
.sfl-image-editor-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}
.sfl-image-editor-icon,
.sfl-image-editor-colour,
.sfl-image-editor-text-bg-toggle,
.sfl-image-editor-shape-menu button {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  min-height: 48px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 5px 4px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: #e5e7eb;
  cursor: pointer;
  user-select: none;
}
.sfl-image-editor-icon > span,
.sfl-image-editor-colour > span,
.sfl-image-editor-text-bg-toggle > span,
.sfl-image-editor-shape-menu button > span {
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.sfl-image-editor-icon small,
.sfl-image-editor-colour small,
.sfl-image-editor-text-bg-toggle small,
.sfl-image-editor-shape-menu small {
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
}
.sfl-image-editor-icon:hover,
.sfl-image-editor-icon:focus-visible,
.sfl-image-editor-colour:hover,
.sfl-image-editor-colour:focus-within,
.sfl-image-editor-text-bg-toggle:hover,
.sfl-image-editor-text-bg-toggle:focus-within,
.sfl-image-editor-shape-menu button:hover,
.sfl-image-editor-shape-menu button:focus-visible {
  border-color: rgba(250,204,21,.72);
  background: rgba(250,204,21,.12);
  color: #fff;
  outline: none;
}
.sfl-image-editor-icon.is-active,
.sfl-image-editor-text-bg-toggle.is-active,
.sfl-image-editor-shape-menu button.is-active {
  border-color: #facc15;
  background: rgba(250,204,21,.17);
  color: #fef08a;
  box-shadow: 0 0 0 1px rgba(250,204,21,.18) inset;
}
.sfl-image-editor-icon:disabled { opacity: .35; cursor: default; }
.sfl-image-editor-shape-wrap { position: relative; flex: 0 0 auto; }
.sfl-image-editor-shape-menu {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  z-index: 30;
  display: none;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(15,23,42,.98);
  box-shadow: 0 18px 38px rgba(0,0,0,.46);
  transform: translateX(-50%);
}
.sfl-image-editor-shape-menu.is-open { display: flex; }
.sfl-image-editor-shape-menu button { width: 64px; }
.sfl-image-editor-colour { overflow: hidden; }
.sfl-image-editor-colour input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sfl-image-editor-colour > span {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 50%;
  background: var(--sfl-editor-colour, #000000);
  box-shadow: 0 0 0 1px rgba(0,0,0,.65);
}
.sfl-image-editor-text-bg-toggle { overflow: hidden; }
.sfl-image-editor-text-bg-toggle[hidden],
.sfl-image-editor-bg-colour[hidden] { display: none !important; }
.sfl-image-editor-text-bg-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sfl-image-editor-bg-colour > span {
  background: var(--sfl-editor-bg-colour, #ffffff);
}
.sfl-image-editor-opacity {
  flex: 0 0 auto;
  width: 132px;
  min-height: 48px;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: #e5e7eb;
  background: rgba(255,255,255,.045);
}
.sfl-image-editor-opacity[hidden] { display: none !important; }
.sfl-image-editor-opacity small {
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}
.sfl-image-editor-opacity input { width: 100%; accent-color: #facc15; }
.sfl-image-editor-cancel-crop,
.sfl-image-editor-apply-crop {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 8px 13px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.sfl-image-editor-cancel-crop {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.sfl-image-editor-apply-crop {
  border: 1px solid #facc15;
  background: #facc15;
  color: #111827;
}
.sfl-image-editor-cancel-crop[hidden],
.sfl-image-editor-apply-crop[hidden] { display: none !important; }
.sfl-image-editor-close {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.sfl-image-editor-close:hover,
.sfl-image-editor-close:focus-visible { background: rgba(239,68,68,.22); border-color: rgba(248,113,113,.72); outline: none; }
.sfl-image-editor-workspace {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 40%, rgba(51,65,85,.38), transparent 55%),
    #030712;
}
.sfl-image-editor-overlay.is-crop-mode .sfl-image-editor-workspace {
  overflow: hidden;
}
.sfl-image-editor-overlay.is-crop-mode .sfl-image-editor-stage {
  max-width: none;
}
.sfl-image-editor-stage {
  --sfl-editor-natural-width: 900px;
  position: relative;
  width: min(100%, var(--sfl-editor-natural-width));
  max-width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 34px rgba(0,0,0,.68);
}
.sfl-image-editor-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
#sflImageEditorBaseCanvas { z-index: 1; }
#sflImageEditorDrawCanvas { z-index: 2; pointer-events: none; }
#sflImageEditorGuideCanvas { z-index: 3; cursor: default; touch-action: none; }
.sfl-image-editor-text-input {
  position: absolute;
  z-index: 5;
  min-width: 150px;
  max-width: min(72%, 520px);
  padding: 7px 9px;
  border: 2px solid #facc15;
  border-radius: 8px;
  background: rgba(15,23,42,.94);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.42);
  font-size: 15px;
  font-weight: 800;
  outline: none;
}
.sfl-image-editor-text-input[hidden] { display: none !important; }
.sfl-image-editor-status {
  flex: 0 0 auto;
  min-height: 29px;
  padding: 7px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #94a3b8;
  background: #070b14;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}
.sfl-image-editor-status.is-error { color: #fda4af; }
.sfl-image-editor-status.is-success { color: #86efac; }
.sfl-image-editor-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 9px 12px 12px;
  background: #070b14;
}
.sfl-image-editor-secondary,
.sfl-image-editor-primary {
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.sfl-image-editor-secondary {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #fff;
}
.sfl-image-editor-primary {
  border: 1px solid #facc15;
  background: #facc15;
  color: #111827;
}
.sfl-image-editor-footer button:hover,
.sfl-image-editor-footer button:focus-visible { filter: brightness(1.08); outline: none; }
.sfl-image-editor-footer button:disabled { opacity: .5; cursor: default; }
@media (max-width: 767.98px) {
  .sfl-image-lightbox-image-shell { max-height: calc(100vh - 180px); }
  .sfl-image-editor-overlay { padding: 0; align-items: stretch; }
  .sfl-image-editor-shell { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .sfl-image-editor-floating-bar { min-height: 58px; justify-content: flex-start; padding: 6px 48px 6px 6px; overflow: visible; }
  .sfl-image-editor-tools { justify-content: flex-start; gap: 5px; overflow-x: auto; overflow-y: visible; padding-bottom: 2px; scrollbar-width: thin; }
  .sfl-image-editor-icon,
  .sfl-image-editor-colour,
  .sfl-image-editor-text-bg-toggle { width: 47px; min-height: 44px; border-radius: 10px; }
  .sfl-image-editor-icon > span,
  .sfl-image-editor-colour > span,
  .sfl-image-editor-text-bg-toggle > span { font-size: 20px; }
  .sfl-image-editor-opacity { width: 112px; min-height: 44px; }
  .sfl-image-editor-shape-menu { position: fixed; top: 62px; left: 8px; transform: none; }
  .sfl-image-editor-workspace { padding: 7px; }
  .sfl-image-editor-status { font-size: 10px; }
  .sfl-image-editor-footer { padding: 8px; }
  .sfl-image-editor-footer button { flex: 1 1 50%; min-width: 0; padding-left: 7px; padding-right: 7px; }
}

/* Main dashboard mobile layout — isolated from desktop and Operations dashboard. */
@media (max-width: 767.98px) {
  .sfl-main-dashboard-page > .d-flex:first-child {
    margin-bottom: .65rem !important;
  }
  .sfl-main-dashboard-page > .d-flex:first-child h1 {
    margin-bottom: 0 !important;
  }
  .sfl-main-dashboard-page > .d-flex:first-child p.text-muted {
    display: none !important;
  }

  .sfl-main-dashboard-page .sfl-dashboard-filter-card {
    margin-bottom: .65rem !important;
    border-radius: 12px;
  }
  .sfl-main-dashboard-page .sfl-dashboard-filter-card .card-body {
    padding: 10px;
  }
  .sfl-main-dashboard-page .sfl-dashboard-filter-card form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end !important;
    gap: 7px !important;
  }
  .sfl-main-dashboard-page .sfl-dashboard-filter-card form > div:first-child {
    min-width: 0;
  }
  .sfl-main-dashboard-page .compact-date-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
  }
  .sfl-main-dashboard-page .date-field {
    width: auto;
    min-width: 0;
    min-height: 38px;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 10px;
  }
  .sfl-main-dashboard-page .date-field:first-child {
    grid-column: 1 / -1;
  }
  .sfl-main-dashboard-page .date-field span {
    flex: 0 0 auto;
    font-size: .62rem;
  }
  .sfl-main-dashboard-page .date-field .form-select,
  .sfl-main-dashboard-page .date-field .form-control {
    width: 100%;
    min-width: 0;
    padding: 1px 2px;
    font-size: .76rem;
  }
  .sfl-main-dashboard-page .sfl-dashboard-filter-card form > .d-flex:last-child {
    align-self: stretch;
    flex-direction: column;
    gap: 6px !important;
  }
  .sfl-main-dashboard-page .sfl-dashboard-filter-card form > .d-flex:last-child .btn {
    min-width: 58px;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    font-size: .76rem;
  }

  .sfl-main-dashboard-page .sfl-dashboard-range {
    display: none !important;
  }

  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 {
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .5rem;
    margin-bottom: .75rem !important;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"] {
    flex: 0 0 auto;
    width: 33.333333%;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:first-of-type {
    width: 100%;
  }
  .sfl-main-dashboard-page .sfl-metric-card {
    min-height: 94px;
    padding: 8px 4px;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(15,23,42,.055);
  }
  .sfl-main-dashboard-page .sfl-metric-icon {
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .sfl-main-dashboard-page .sfl-metric-icon svg {
    width: 17px;
    height: 17px;
  }
  .sfl-main-dashboard-page .sfl-metric-text {
    align-items: center;
    gap: 2px;
    width: 100%;
  }
  .sfl-main-dashboard-page .sfl-metric-label {
    min-height: 2.35em;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    font-size: .66rem;
    line-height: 1.16;
  }
  .sfl-main-dashboard-page .sfl-metric-value {
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:first-of-type .sfl-metric-card {
    min-height: 88px;
    padding: 13px 16px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    text-align: left;
    border-color: rgba(128,0,32,.18);
    background: linear-gradient(120deg, rgba(128,0,32,.10), rgba(245,130,32,.13));
    box-shadow: 0 9px 22px rgba(128,0,32,.10);
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:first-of-type .sfl-metric-icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 15px;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:first-of-type .sfl-metric-icon svg {
    width: 25px;
    height: 25px;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:first-of-type .sfl-metric-text {
    align-items: flex-start;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:first-of-type .sfl-metric-label {
    min-height: 0;
    padding: 0;
    justify-content: flex-start;
    color: #5f2332;
    font-size: .82rem;
    font-weight: 700;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:first-of-type .sfl-metric-value {
    color: #520014;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
  }

  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3:not(.mb-4) {
    --bs-gutter-x: .5rem;
    --bs-gutter-y: .65rem;
  }
  .sfl-main-dashboard-page .sfl-dashboard-panel {
    padding: 11px;
    border-radius: 13px;
    box-shadow: 0 7px 18px rgba(15,23,42,.055);
  }
  .sfl-main-dashboard-page .sfl-panel-head {
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .sfl-main-dashboard-page .sfl-panel-head h2 {
    margin: 0;
    font-size: .93rem;
  }
  .sfl-main-dashboard-page .sfl-panel-head p {
    display: none;
  }
  .sfl-main-dashboard-page .sfl-panel-icon {
    width: 31px;
    min-width: 31px;
    height: 31px;
    border-radius: 10px;
  }
  .sfl-main-dashboard-page .sfl-panel-icon svg {
    width: 17px;
    height: 17px;
  }
  .sfl-main-dashboard-page .sfl-dashboard-table thead th,
  .sfl-main-dashboard-page .sfl-dashboard-table td {
    padding: .34rem .38rem;
    font-size: .7rem;
  }
  .sfl-main-dashboard-page .sfl-status-list {
    gap: 8px;
  }
  .sfl-main-dashboard-page .sfl-status-row {
    font-size: .76rem;
  }
  .sfl-main-dashboard-page .sfl-status-bar {
    height: 7px;
    margin-top: 4px;
  }
  .sfl-main-dashboard-page .sfl-trend-chart {
    min-height: 142px;
    gap: 8px;
    padding: 6px 2px 2px;
  }
  .sfl-main-dashboard-page .sfl-trend-day {
    min-width: 52px;
    height: 136px;
    gap: 3px;
  }
  .sfl-main-dashboard-page .sfl-trend-bars {
    width: 34px;
    height: 92px;
    border-radius: 11px;
    padding: 4px;
  }
  .sfl-main-dashboard-page .sfl-chart-legend {
    margin-top: 8px !important;
    font-size: .7rem;
  }
}

/* Dashboard Future Orders + staff order selector V1. */
.sfl-staff-orders-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(128,0,32,.12);
  background:
    radial-gradient(circle at top right, rgba(245,130,32,.12), transparent 34%),
    linear-gradient(135deg, #fff 0%, #fffaf7 100%);
}
.sfl-staff-orders-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #800020, #f58220);
}
.sfl-staff-orders-icon { background: linear-gradient(135deg, #800020, #b3133d); }
.sfl-staff-orders-form {
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sfl-staff-orders-form > label {
  color: #5f2332;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.sfl-staff-orders-select-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sfl-staff-orders-select-row .form-select {
  min-width: 0;
  border-color: #e5d5da;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(31,14,21,.04);
}
.sfl-staff-orders-result {
  display: grid;
  grid-template-columns: minmax(210px, 1.2fr) repeat(2, minmax(170px, .9fr));
  gap: 12px;
}
.sfl-staff-orders-person,
.sfl-staff-orders-count {
  min-height: 104px;
  border: 1px solid #eee4e7;
  border-radius: 15px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(15,23,42,.045);
}
.sfl-staff-orders-person {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px;
}
.sfl-staff-orders-avatar {
  width: 50px;
  min-width: 50px;
  height: 50px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #800020, #f58220);
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 9px 20px rgba(128,0,32,.18);
}
.sfl-staff-orders-person div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sfl-staff-orders-person span:not(.sfl-staff-orders-avatar),
.sfl-staff-orders-count span {
  color: #6b7280;
  font-size: .75rem;
  font-weight: 700;
}
.sfl-staff-orders-person strong { color: #27141a; font-size: 1rem; overflow-wrap: anywhere; }
.sfl-staff-orders-count {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
}
.sfl-staff-orders-count strong { color: #111827; font-size: 2rem; line-height: 1; font-weight: 900; margin: 5px 0; }
.sfl-staff-orders-count small { color: #7b8491; font-size: .72rem; }
.sfl-staff-orders-count.today { border-color: rgba(15,118,110,.18); background: linear-gradient(135deg, rgba(15,118,110,.08), #fff); }
.sfl-staff-orders-count.today strong { color: #0f766e; }
.sfl-staff-orders-count.range { border-color: rgba(128,0,32,.16); background: linear-gradient(135deg, rgba(128,0,32,.07), #fff); }
.sfl-staff-orders-count.range strong { color: #800020; }
.sfl-staff-orders-empty {
  padding: 14px;
  border: 1px dashed #dfd2d6;
  border-radius: 12px;
  color: #6b7280;
  background: rgba(255,255,255,.72);
  font-size: .84rem;
}

@media (max-width: 767.98px) {
  .sfl-staff-orders-panel { padding: 12px; }
  .sfl-staff-orders-form { grid-template-columns: 1fr; gap: 6px; margin-bottom: 10px; }
  .sfl-staff-orders-select-row { align-items: stretch; }
  .sfl-staff-orders-select-row .form-select { min-height: 42px; font-size: .82rem; }
  .sfl-staff-orders-select-row .btn { display: inline-flex; align-items: center; justify-content: center; padding-left: 10px; padding-right: 10px; }
  .sfl-staff-orders-result { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sfl-staff-orders-person { grid-column: 1 / -1; min-height: 76px; padding: 10px; }
  .sfl-staff-orders-avatar { width: 42px; min-width: 42px; height: 42px; border-radius: 13px; }
  .sfl-staff-orders-count { min-height: 92px; padding: 10px; }
  .sfl-staff-orders-count strong { font-size: 1.65rem; }
  .sfl-staff-orders-count small { overflow-wrap: anywhere; }

  /* With the new Future Orders card, keep the final money KPI from becoming a narrow orphan. */
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:last-child {
    width: 100%;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:last-child .sfl-metric-card {
    min-height: 76px;
    padding: 10px 14px;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:last-child .sfl-metric-text {
    align-items: flex-start;
  }
  .sfl-main-dashboard-page .sfl-dashboard-analytics > .row.g-3.mb-4 > [class*="col-"]:last-child .sfl-metric-label {
    min-height: 0;
    justify-content: flex-start;
  }
}


/* Online/Prepaid Payment V1 — compact global price warning and form panel. */
.sfl-price-with-payment-tag {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .38rem;
  max-width: 100%;
}
.sfl-online-payment-tag-link {
  display: inline-flex;
  text-decoration: none;
  vertical-align: middle;
}
.sfl-online-payment-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #b87900;
  background: #ffd44d;
  color: #4b2b00;
  font-size: .64rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .025em;
  white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(255, 190, 0, .55);
  animation: sfl-online-payment-pulse 1.25s ease-in-out infinite;
}
.sfl-online-payment-tag-link:hover .sfl-online-payment-tag,
.sfl-online-payment-tag-link:focus-visible .sfl-online-payment-tag {
  background: #ffc928;
  color: #281600;
}
@keyframes sfl-online-payment-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 190, 0, .58); transform: translateZ(0) scale(1); }
  50% { box-shadow: 0 0 0 5px rgba(255, 190, 0, 0); transform: translateZ(0) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .sfl-online-payment-tag { animation: none; }
}
.sfl-online-payment-control {
  border: 1px solid #f1cf7b;
  background: linear-gradient(135deg, #fffdf6, #fff7dc);
  border-radius: 12px;
  padding: .8rem .9rem;
}
.sfl-online-payment-control .form-check-label {
  font-weight: 800;
  color: #5b3300;
}
.sfl-online-payment-upload[hidden] { display: none !important; }
.sfl-online-payment-upload {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px dashed #ddb85d;
}
.sfl-online-payment-existing {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .45rem;
  font-size: .78rem;
  font-weight: 700;
}
.sfl-online-payment-preview {
  display: none;
  width: 96px;
  height: 96px;
  margin-top: .55rem;
  border-radius: 9px;
  border: 1px solid #d8c183;
  object-fit: cover;
  background: #fff;
}


/* Future Order visibility badges V1 — isolated display-only enhancement. */
.sfl-future-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  vertical-align: middle;
}
.sfl-future-badges-dashboard {
  display: flex;
  margin: 8px 0 5px;
}
.sfl-future-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid rgba(13, 43, 48, .28);
  border-radius: 999px;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .14);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sfl-future-badge-order {
  background: #006f72;
  border-color: #004d50;
  color: #fff;
}
.sfl-future-badge-date {
  background: #0b3340;
  border-color: #061f27;
  color: #fff;
}
.sfl-future-badge-pending {
  background: #ffd53d;
  border-color: #ad7b00;
  color: #342400;
}
.sfl-future-badge-confirmed {
  background: #148647;
  border-color: #0b5f31;
  color: #fff;
}
.sfl-future-badge-pulse {
  animation: sflFutureBadgePulse 1.25s ease-in-out infinite;
}
@keyframes sflFutureBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 187, 0, .18), 0 2px 7px rgba(15, 23, 42, .14); }
  50% { transform: scale(1.025); box-shadow: 0 0 0 4px rgba(255, 187, 0, .28), 0 3px 10px rgba(15, 23, 42, .18); }
}
.staff-task-order-row.sfl-dashboard-future-task {
  background-color: var(--sfl-order-future-pending, #00ffef) !important;
  border: 1px solid rgba(0, 91, 96, .28) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin-bottom: 8px;
}
.staff-task-order-row.sfl-dashboard-future-task:hover {
  background-color: var(--sfl-order-future-pending, #00ffef) !important;
  filter: brightness(.985);
}
table .sfl-future-badges,
.table .sfl-future-badges {
  min-width: 132px;
}
.supplier-order-card .sfl-future-badges,
.order-detail-surface .sfl-future-badges,
.sfl-order-preview-surface .sfl-future-badges,
.global-search-result .sfl-future-badges {
  margin-top: 7px;
}
@media (max-width: 767.98px) {
  .sfl-future-badge { font-size: .67rem; padding: 4px 7px; white-space: normal; text-align: center; }
  .sfl-future-badges-dashboard { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sfl-future-badge-pulse { animation: none; }
}

/* Cancelled-order attribution badge — intentionally subtle and display-only. */
.sfl-cancelled-by-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 5px;
  padding: 2px 7px;
  border: 1px solid #6b7280;
  border-radius: 999px;
  background: #6b7280;
  color: #fff;
  font-size: .64rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.15;
  white-space: normal;
  box-shadow: none;
}

/* Partial Delivery visibility — preserved booked-vs-delivered evidence. */
.sfl-partial-delivery-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border: 1px solid #8b1e16;
  border-radius: 999px;
  background: #b42318;
  color: #fff;
  padding: 3px 8px;
  font-size: .68rem;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.sfl-partial-delivery-badge.is-cost-pending {
  animation: sflPartialDeliveryCostPulse 1.25s ease-in-out infinite;
}
@keyframes sflPartialDeliveryCostPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,.12); }
  50% { box-shadow: 0 0 0 4px rgba(180,35,24,.24); }
}
@media (prefers-reduced-motion: reduce) {
  .sfl-partial-delivery-badge.is-cost-pending { animation: none; }
}

/* Compact modal Order History — summary line under Notes, full history only on demand. */
.sfl-compact-history {
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid #e5e7eb;
}
.sfl-history-summary-line {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  font-size:.72rem;
  line-height:1.2;
}
.sfl-history-summary-title { color:#111827; font-weight:900; white-space:nowrap; }
.sfl-history-summary-count { color:#6b7280; font-weight:700; white-space:nowrap; }
.sfl-history-open {
  margin-left:auto;
  min-height:30px;
  padding:4px 10px;
  border:1px solid rgba(128,0,32,.22);
  border-radius:999px;
  background:#fff;
  color:#800020;
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  touch-action:manipulation;
}
.sfl-history-open:hover,
.sfl-history-open:focus-visible { background:#fff5f7; border-color:#800020; outline:none; }

.sfl-order-history-modal {
  position:fixed;
  inset:0;
  z-index:30020;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.58);
}
.sfl-order-history-modal.is-open { display:flex; }
.sfl-order-history-dialog {
  width:min(980px, 96vw);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #dbe2ea;
  border-radius:14px;
  background:#fff;
  box-shadow:0 24px 70px rgba(15,23,42,.26);
}
.sfl-order-history-head {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border-bottom:1px solid #e5e7eb;
}
.sfl-order-history-head > div { display:flex; align-items:baseline; gap:7px; min-width:0; }
.sfl-order-history-head strong { color:#111827; font-size:.9rem; font-weight:900; }
.sfl-order-history-head span { color:#6b7280; font-size:.66rem; font-weight:700; white-space:nowrap; }
.sfl-order-history-close {
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #d1d5db;
  border-radius:999px;
  background:#fff;
  color:#374151;
  font-size:1.25rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.sfl-order-history-close:hover,
.sfl-order-history-close:focus-visible { color:#800020; border-color:#800020; outline:none; }
.sfl-order-history-body {
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:10px;
  -webkit-overflow-scrolling:touch;
}
.sfl-history-section {
  border:1px solid #e5e7eb;
  border-radius:11px;
  overflow:hidden;
  background:#fff;
}
.sfl-history-section + .sfl-history-section { margin-top:9px; }
.sfl-history-section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 9px;
  background:#f8fafc;
  border-bottom:1px solid #e5e7eb;
}
.sfl-history-section-head strong { color:#111827; font-size:.74rem; font-weight:900; }
.sfl-history-section-head span { color:#6b7280; font-size:.62rem; font-weight:700; white-space:nowrap; }
.sfl-history-section-body { padding:0 9px; }
.sfl-history-event-row {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:7px 0;
  border-bottom:1px solid #eef2f7;
}
.sfl-history-event-row:last-child { border-bottom:0; }
.sfl-history-event-content { flex:1 1 auto; min-width:0; }
.sfl-history-event-line {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:3px 6px;
  min-width:0;
  color:#374151;
  font-size:.67rem;
  line-height:1.28;
}
.sfl-history-event-line strong { color:#1f2937; font-weight:850; white-space:nowrap; }
.sfl-history-event-time { color:#6b7280; white-space:nowrap; }
.sfl-history-event-change { color:#111827; font-weight:700; }
.sfl-history-event-change::before { content:'·'; color:#9ca3af; margin-right:6px; }
.sfl-history-type {
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  padding:2px 6px;
  border-radius:999px;
  background:#eef2f7;
  color:#374151;
  font-size:.57rem;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
}
.sfl-history-type-followup { background:#e0f2fe; color:#075985; }
.sfl-history-type-created { background:#ecfdf5; color:#065f46; }
.sfl-history-event-note {
  margin-top:2px;
  color:#6b7280;
  font-size:.62rem;
  line-height:1.3;
  white-space:normal;
  overflow-wrap:anywhere;
}
.sfl-history-event-media {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:4px;
  max-width:150px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.sfl-history-thumb {
  flex:0 0 auto;
  width:42px;
  padding:0;
  overflow:hidden;
  border:1px solid #d1d5db;
  border-radius:7px;
  background:#fff;
  cursor:zoom-in;
  text-align:center;
  box-shadow:none;
}
.sfl-history-thumb img {
  display:block;
  width:40px;
  height:34px;
  object-fit:cover;
  background:#f3f4f6;
}
.sfl-history-thumb small {
  display:block;
  padding:1px 1px 2px;
  color:#4b5563;
  font-size:.46rem;
  font-weight:800;
  line-height:1.02;
}
.sfl-history-thumb:hover,
.sfl-history-thumb:focus-visible { border-color:#800020; outline:none; }
.sfl-history-empty-box {
  margin:7px 0;
  padding:6px 8px;
  border:1px dashed #d1d5db;
  border-radius:8px;
  background:#fafafa;
  color:#6b7280;
  font-size:.64rem;
  line-height:1.25;
}

/* History image lightbox sits above the history modal without losing either scroll position. */
.sfl-history-lightbox {
  position:fixed;
  inset:0;
  z-index:30050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(3,7,18,.9);
}
.sfl-history-lightbox.is-open { display:flex; }
.sfl-history-lightbox-inner {
  position:relative;
  width:min(1100px, 96vw);
  height:min(88vh, 900px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.sfl-history-lightbox-image {
  display:block;
  max-width:100%;
  max-height:calc(88vh - 44px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  background:#fff;
  box-shadow:0 18px 60px rgba(0,0,0,.4);
}
.sfl-history-lightbox-caption {
  max-width:90%;
  margin-top:8px;
  color:#fff;
  font-size:.74rem;
  font-weight:800;
  text-align:center;
}
.sfl-history-lightbox-close {
  position:fixed;
  top:12px;
  right:12px;
  z-index:30060;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.6);
  border-radius:999px;
  background:rgba(0,0,0,.58);
  color:#fff;
  font-size:1.6rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.sfl-history-lightbox-close:hover,
.sfl-history-lightbox-close:focus-visible { background:rgba(128,0,32,.9); outline:none; }

@media (max-width: 767.98px) {
  .sfl-compact-history { margin-top:6px; padding-top:6px; }
  .sfl-history-summary-line { gap:5px; font-size:.67rem; }
  .sfl-history-summary-count { font-size:.61rem; }
  .sfl-history-open { min-height:34px; padding:5px 10px; font-size:.65rem; }
  .sfl-order-history-modal { padding:7px; align-items:stretch; }
  .sfl-order-history-dialog { width:100%; max-height:96vh; margin:auto 0; border-radius:12px; }
  .sfl-order-history-head { padding:9px 10px; }
  .sfl-order-history-head strong { font-size:.82rem; }
  .sfl-order-history-close { width:38px; height:38px; font-size:1.35rem; }
  .sfl-order-history-body { padding:7px; }
  .sfl-history-section + .sfl-history-section { margin-top:7px; }
  .sfl-history-section-head { padding:6px 7px; }
  .sfl-history-section-body { padding:0 7px; }
  .sfl-history-event-row { gap:5px; padding:6px 0; }
  .sfl-history-event-line { gap:2px 5px; font-size:.61rem; line-height:1.24; }
  .sfl-history-event-note { font-size:.58rem; line-height:1.25; }
  .sfl-history-event-media { max-width:96px; gap:3px; }
  .sfl-history-thumb { width:38px; }
  .sfl-history-thumb img { width:36px; height:31px; }
  .sfl-history-thumb small { font-size:.42rem; }
  .sfl-history-lightbox { padding:7px; }
  .sfl-history-lightbox-inner { width:100%; height:95vh; }
  .sfl-history-lightbox-image { max-width:100%; max-height:calc(95vh - 46px); border-radius:8px; }
  .sfl-history-lightbox-close { top:7px; right:7px; width:40px; height:40px; }
}


/* History UI correction V3 — desktop inline full Order View, modal Supplier/mobile, safe top-layer modal. */
.sfl-compact-history.is-inline-desktop .sfl-history-summary-line {
  display:none;
}
.sfl-compact-history.is-inline-desktop .sfl-history-inline {
  display:block;
}
.sfl-compact-history.is-modal-only .sfl-history-inline {
  display:none;
}
.sfl-history-inline {
  margin-top:2px;
}
.sfl-history-inline .sfl-history-section + .sfl-history-section {
  margin-top:8px;
}

/* Modal is portalled to <body> by JS; these values deliberately sit above every CRM card/header. */
body > .sfl-order-history-modal {
  z-index:2147483000 !important;
  isolation:isolate;
}
body > .sfl-order-history-modal .sfl-order-history-dialog {
  position:relative;
  z-index:1;
}
body > .sfl-history-lightbox {
  z-index:2147483500 !important;
  isolation:isolate;
}
body > .sfl-history-lightbox .sfl-history-lightbox-close {
  z-index:2147483550 !important;
}

/* Historical images are recognizable thumbnails without cropping the old shoe/proof. */
.sfl-history-thumb {
  width:54px;
}
.sfl-history-thumb img {
  width:52px;
  height:46px;
  object-fit:contain;
  background:#fff;
}
.sfl-history-event-media {
  max-width:190px;
}

@media (max-width: 767.98px) {
  /* Full Order/Exchange View becomes modal-only on mobile; Supplier is modal-only at all sizes. */
  .sfl-compact-history.is-inline-desktop .sfl-history-summary-line {
    display:flex;
  }
  .sfl-compact-history.is-inline-desktop .sfl-history-inline {
    display:none;
  }

  body > .sfl-order-history-modal {
    padding:8px !important;
    align-items:stretch !important;
  }
  body > .sfl-order-history-modal .sfl-order-history-dialog {
    width:100% !important;
    max-width:none !important;
    max-height:calc(100dvh - 16px) !important;
    margin:auto 0 !important;
  }
  .sfl-history-thumb {
    width:48px;
  }
  .sfl-history-thumb img {
    width:46px;
    height:41px;
    object-fit:contain;
  }
  .sfl-history-event-media {
    max-width:116px;
  }
}


/* SFL UI3 V1 — clickable Updated history, Customer Risk tap/preview, Supplier mobile header search support. */
.supplier-view-page .supplier-updated-button {
  appearance:none;
  -webkit-appearance:none;
  font-family:inherit;
  cursor:pointer;
}
.supplier-view-page .supplier-updated-button:focus-visible {
  outline:2px solid rgba(245,130,32,.85);
  outline-offset:2px;
}
.sfl-customer-risk-trigger {
  cursor:pointer !important;
}
.sfl-customer-risk-trigger:focus-visible {
  outline:2px solid rgba(245,130,32,.75) !important;
  outline-offset:2px !important;
}

.sfl-history-head-actions {
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  flex:0 0 auto !important;
}
.sfl-customer-history-close {
  appearance:none !important;
  -webkit-appearance:none !important;
  width:28px !important;
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:1px solid #e5e7eb !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#374151 !important;
  font-family:inherit !important;
  font-size:1rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.sfl-customer-history-close:hover,
.sfl-customer-history-close:focus-visible {
  border-color:rgba(128,0,32,.28) !important;
  background:#fff3f6 !important;
  color:#800020 !important;
  outline:none !important;
}

/* Clicking an order inside Customer Risk opens a same-page detail overlay.
   The underlying Supplier/Order View never navigates or loses its scroll position. */
.sfl-risk-order-modal {
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  background:rgba(3,7,18,.72);
}
.sfl-risk-order-modal.is-open {
  display:flex;
}
.sfl-risk-order-dialog {
  position:relative;
  width:min(1180px, 96vw);
  height:min(92vh, 900px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.55);
  border-radius:16px;
  background:#fff;
  box-shadow:0 26px 80px rgba(0,0,0,.38);
}
.sfl-risk-order-modal-head {
  flex:0 0 auto;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px 8px 14px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}
.sfl-risk-order-modal-head strong {
  color:#3b1722;
  font-size:.9rem;
  font-weight:900;
}
.sfl-risk-order-modal-close {
  appearance:none;
  -webkit-appearance:none;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid #d1d5db;
  border-radius:999px;
  background:#fff;
  color:#374151;
  font-family:inherit;
  font-size:1.35rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.sfl-risk-order-modal-close:hover,
.sfl-risk-order-modal-close:focus-visible {
  border-color:#800020;
  color:#800020;
  outline:none;
}
.sfl-risk-order-modal-loading {
  position:absolute;
  inset:48px 0 0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:#fff;
  color:#64748b;
  font-size:.84rem;
  font-weight:800;
}
.sfl-risk-order-modal-loading[hidden] {
  display:none !important;
}
.sfl-risk-order-frame {
  flex:1 1 auto;
  width:100%;
  min-height:0;
  border:0;
  background:#f8fafc;
}

@media (max-width: 767.98px) {
  .sfl-customer-history-popup {
    top:50% !important;
    bottom:auto !important;
    left:50% !important;
    right:auto !important;
    width:calc(100vw - 18px) !important;
    max-height:min(72dvh, 560px) !important;
    transform:translate(-50%, -50%) !important;
    border-radius:16px !important;
    overscroll-behavior:contain !important;
  }
  .sfl-history-head {
    position:sticky !important;
    top:-12px !important;
    z-index:3 !important;
    margin-left:-2px !important;
    margin-right:-2px !important;
    padding:10px 2px 9px !important;
    background:#fff !important;
  }
  .sfl-customer-history-close {
    width:34px !important;
    height:34px !important;
    font-size:1.18rem !important;
  }
  .sfl-risk-order-modal {
    padding:6px;
    align-items:stretch;
  }
  .sfl-risk-order-dialog {
    width:100%;
    height:calc(100dvh - 12px);
    max-height:none;
    margin:auto 0;
    border-radius:13px;
  }
  .sfl-risk-order-modal-head {
    min-height:46px;
    padding:6px 8px 6px 11px;
  }
  .sfl-risk-order-modal-close {
    width:38px;
    height:38px;
  }
}

/* Pending Dispatch compact queue follow-up (2026-08-10). */
.ops-modern-shell .sfl-pd-filter-card .card-body,
.ops-modern-shell .sfl-pd-toolbar-card .card-body {
  padding:10px 12px !important;
}
.sfl-pd-filter-form {
  display:flex;
  flex-wrap:nowrap;
  align-items:flex-end;
  gap:10px;
}
.sfl-pd-filter-form .compact-date-filter {
  flex:0 1 auto;
  flex-wrap:nowrap;
  min-width:0;
}
.sfl-pd-filter-form .date-field {
  padding:3px 7px;
}
.sfl-pd-filter-form .date-field .form-control {
  min-width:112px;
}
.sfl-pd-filter-search {
  flex:1 1 300px;
  min-width:220px;
}
.sfl-pd-filter-actions {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
}
.sfl-pd-toolbar {
  display:flex !important;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sfl-pd-toolbar-actions,
.sfl-pd-toolbar-meta {
  display:flex;
  align-items:center;
  gap:8px;
}
.sfl-pd-toolbar-actions {
  flex:1 1 auto;
  min-width:0;
}
.sfl-pd-toolbar-meta {
  flex:0 0 auto;
  margin-left:auto;
  white-space:nowrap;
}
.sfl-pd-pending-table col.col-customer {
  width:145px;
}
.sfl-pd-pending-table .sfl-pd-customer-status {
  margin-top:6px;
  min-height:20px;
}
.sfl-pd-pending-table .sfl-pd-age {
  width:14px;
  height:14px;
}
.sfl-pd-pending-table .sfl-pd-age-has-text {
  width:auto;
  min-width:14px;
  height:21px;
  padding:0 7px;
}
.sfl-pd-pending-table .sfl-pd-age-text {
  font-size:9px;
}
.sfl-pd-pending-table .sfl-pd-action {
  width:12px;
  height:12px;
}
.sidebar-link.menu-pending_dispatch {
  border:1px solid rgba(245,130,32,.24);
  background:rgba(245,130,32,.08);
  box-shadow:inset 2px 0 0 rgba(245,130,32,.78);
}
.sidebar-link.menu-pending_dispatch .sidebar-icon {
  background:rgba(245,130,32,.22);
}
.sidebar-link.menu-pending_dispatch:hover,
.sidebar-link.menu-pending_dispatch.active {
  border-color:rgba(245,130,32,.48);
  background:rgba(255,255,255,.19);
  box-shadow:inset 4px 0 0 var(--sfl-secondary), 0 0 18px rgba(245,130,32,.12);
}
.sfl-pd-reminder {
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  max-height:calc(100dvh - 24px);
  overflow:auto;
  transform:translate(-50%, -50%) !important;
}
@media (max-width: 1199.98px) {
  .sfl-pd-filter-form,
  .sfl-pd-toolbar {
    flex-wrap:wrap;
  }
  .sfl-pd-toolbar-meta {
    margin-left:0;
  }
}

/* Courier AWB + Pending Dispatch visual-only logistics helpers (2026-08-10). */
.sfl-queue-helper-table col.col-page {
  width:150px;
}
.sfl-queue-helper-table col.col-staff {
  width:170px;
}
.sfl-queue-helper-table col.col-customer {
  width:155px;
}
.sfl-queue-helper-table col.col-city {
  width:96px;
}
.sfl-queue-helper-table tbody tr.sfl-queue-exported-row > td,
.sfl-queue-helper-table tbody tr.sfl-queue-exported-row:nth-child(even) > td,
.sfl-queue-helper-table tbody tr.sfl-queue-exported-row:hover > td {
  background:#fff3ad !important;
}
.sfl-queue-export-marker {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  margin-top:5px;
}
.sfl-queue-export-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:100%;
  min-height:21px;
  padding:2px 3px 2px 7px;
  border:1px solid #d6a400;
  border-radius:999px;
  background:#ffd84d;
  color:#4a3300;
  box-shadow:0 3px 8px rgba(130,86,0,.15);
  font-size:10px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  cursor:help;
}
.sfl-queue-export-badge:focus-visible {
  outline:2px solid #2563eb;
  outline-offset:2px;
}
.sfl-queue-export-dismiss,
.sfl-queue-sticky-clear {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border:0;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  line-height:1;
}
.sfl-queue-export-dismiss {
  width:16px;
  height:16px;
  padding:0;
  background:rgba(74,51,0,.14);
  color:#4a3300;
  font-size:12px;
}
.sfl-queue-export-dismiss:hover {
  background:#800020;
  color:#fff;
}
.sfl-queue-export-detail-popup {
  position:fixed;
  z-index:2147483100;
  width:min(290px, calc(100vw - 20px));
  padding:9px 11px;
  border:1px solid rgba(128,0,32,.2);
  border-radius:10px;
  background:#fff;
  color:#3b1722;
  box-shadow:0 14px 32px rgba(15,23,42,.22);
  font-size:11px;
  font-weight:700;
  line-height:1.38;
  white-space:normal;
  pointer-events:none;
}
.sfl-queue-helper-status {
  min-height:0;
  color:#64748b;
  font-size:9px;
  font-weight:800;
  line-height:1.1;
}
.sfl-queue-helper-status.is-error {
  color:#b42318;
}
.sfl-queue-staff-note-cell {
  white-space:normal !important;
  min-width:160px !important;
}
.sfl-queue-staff-name {
  margin:0 0 4px;
  color:#334155;
  font-size:10px;
  font-weight:750;
  line-height:1.15;
}
.sfl-queue-sticky-wrap {
  position:relative;
  width:154px;
  max-width:100%;
}
.sfl-queue-sticky-input {
  display:block;
  width:100%;
  min-height:28px;
  max-height:78px;
  resize:none;
  overflow:auto;
  padding:6px 24px 6px 7px;
  border:1px dashed #cbd5e1;
  border-radius:7px;
  outline:0;
  background:#fff;
  color:#334155;
  box-shadow:none;
  font:inherit;
  font-size:10px;
  line-height:1.25;
  white-space:pre-wrap;
  transition:background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.sfl-queue-sticky-input::placeholder {
  color:#94a3b8;
}
.sfl-queue-sticky-input:focus {
  border-color:#a16207;
  box-shadow:0 0 0 2px rgba(245,158,11,.14);
}
.sfl-queue-sticky-wrap.has-note .sfl-queue-sticky-input {
  border:1px solid #e3b341;
  border-radius:2px 9px 2px 7px;
  background:linear-gradient(135deg,#fff7a8 0%,#ffec7a 100%);
  color:#493800;
  box-shadow:2px 3px 0 rgba(158,112,0,.12);
  font-weight:750;
}
.sfl-queue-sticky-clear {
  position:absolute;
  top:5px;
  right:5px;
  width:16px;
  height:16px;
  padding:0;
  background:rgba(73,56,0,.14);
  color:#5f4600;
  font-size:12px;
}
.sfl-queue-sticky-clear:hover {
  background:#800020;
  color:#fff;
}
.sfl-queue-sticky-wrap .sfl-queue-helper-status {
  display:block;
  margin-top:2px;
}
.sfl-queue-city-emphasis {
  font-size:.9rem !important;
  font-weight:900 !important;
  color:#271019;
}
@keyframes sfl-queue-overdue-badge-pulse {
  0%, 100% { transform:scale(1); box-shadow:0 2px 5px rgba(128,0,32,.22); filter:brightness(1); }
  50% { transform:scale(1.055); box-shadow:0 4px 12px rgba(220,38,38,.38); filter:brightness(1.12); }
}
.sfl-queue-helper-table .sfl-pd-customer-status {
  margin-top:6px;
  min-height:25px;
}
.sfl-queue-helper-table .sfl-pd-age {
  width:18px;
  height:18px;
}
.sfl-queue-helper-table .sfl-pd-age-has-text {
  width:auto;
  min-width:76px;
  height:25px;
  padding:0 10px;
  animation:sfl-queue-overdue-badge-pulse 1.5s ease-in-out infinite;
}
.sfl-queue-helper-table .sfl-pd-age-text {
  font-size:11px;
  letter-spacing:.015em;
}
.sfl-queue-helper-table .sfl-pd-action {
  width:14px;
  height:14px;
}
@media (prefers-reduced-motion: reduce) {
  .sfl-queue-helper-table .sfl-pd-age-has-text {
    animation:none;
  }
}
@media (max-width: 767.98px) {
  .sfl-queue-sticky-wrap {
    width:142px;
  }
}
@media (max-width: 767.98px) {
  .sfl-pd-filter-form .compact-date-filter,
  .sfl-pd-filter-search,
  .sfl-pd-toolbar-actions,
  .sfl-pd-toolbar-meta {
    width:100%;
    flex-wrap:wrap;
  }
  .sfl-pd-filter-form .compact-date-filter {
    flex:1 1 100%;
  }
  .sfl-pd-filter-actions {
    width:100%;
  }
  .sfl-pd-toolbar-meta {
    white-space:normal;
  }
  .sfl-pd-reminder {
    width:calc(100vw - 16px);
  }
}

/* SFL 2026-08-19 — compact order-list row density V1
   Presentation only. Applies only to Admin/Operations row-based order tables.
   Keeps row data readable while reducing image/badge-driven vertical height. */
@media (min-width: 768px) {
  /* Let the content, not generous cell padding, define the row height. */
  html body.sfl-compact-table-workspace table.orders-table tbody > tr > td,
  html body.sfl-compact-table-workspace table.ops-table tbody > tr > td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.08 !important;
  }

  /* Product thumbnail groups: smaller footprint, tighter gaps. */
  html body.sfl-compact-table-workspace table.orders-table .product-image-list,
  html body.sfl-compact-table-workspace table.ops-table .ops-thumbs {
    gap: 4px !important;
    align-items: flex-start !important;
  }

  html body.sfl-compact-table-workspace table.orders-table .product-thumb-wrap {
    position: relative !important;
    width: 50px !important;
    min-width: 50px !important;
    flex: 0 0 50px !important;
    padding: 0 !important;
  }

  html body.sfl-compact-table-workspace table.orders-table .order-thumb {
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto 1px !important;
    border-radius: 5px !important;
  }

  html body.sfl-compact-table-workspace table.ops-table .ops-thumb {
    position: relative !important;
    width: 50px !important;
    min-width: 50px !important;
    flex: 0 0 50px !important;
    padding: 0 !important;
    font-size: 8.2px !important;
    line-height: 1.05 !important;
  }

  html body.sfl-compact-table-workspace table.ops-table .ops-thumb img {
    width: 46px !important;
    height: 46px !important;
    margin: 0 auto 1px !important;
    border-radius: 5px !important;
  }

  /* Size chips stay clear but no longer add unnecessary row height. */
  html body.sfl-compact-table-workspace table.orders-table .size-pill,
  html body.sfl-compact-table-workspace table.ops-table .ops-thumb > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    max-width: 50px !important;
    margin-top: 1px !important;
    padding: 1px 4px !important;
    border-radius: 999px !important;
    font-size: 8.2px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  /* Image selection belongs on the image itself, not above it. */
  html body.sfl-compact-table-workspace table.orders-table .product-thumb-wrap > .sfl-image-share-select,
  html body.sfl-compact-table-workspace table.ops-table .ops-thumb > .sfl-image-share-select {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    z-index: 8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    margin: 0 !important;
    padding: 1px !important;
    border: 1px solid rgba(128, 0, 32, .45) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .18) !important;
  }

  html body.sfl-compact-table-workspace table.orders-table .product-thumb-wrap > .sfl-image-share-select .form-check-input,
  html body.sfl-compact-table-workspace table.ops-table .ops-thumb > .sfl-image-share-select .form-check-input {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Compact row-only status/future/partial-delivery chips. */
  html body.sfl-compact-table-workspace table.orders-table tbody .badge,
  html body.sfl-compact-table-workspace table.ops-table tbody .badge,
  html body.sfl-compact-table-workspace table.orders-table tbody .sfl-future-badge,
  html body.sfl-compact-table-workspace table.ops-table tbody .sfl-future-badge,
  html body.sfl-compact-table-workspace table.orders-table tbody .sfl-partial-delivery-badge,
  html body.sfl-compact-table-workspace table.ops-table tbody .sfl-partial-delivery-badge {
    min-height: 0 !important;
    padding: 1px 4px !important;
    border-radius: 999px !important;
    font-size: 7.9px !important;
    line-height: 1.05 !important;
    letter-spacing: .01em !important;
    box-shadow: none !important;
  }

  html body.sfl-compact-table-workspace table.orders-table tbody .sfl-future-badges,
  html body.sfl-compact-table-workspace table.ops-table tbody .sfl-future-badges {
    min-width: 0 !important;
    gap: 2px !important;
  }

  html body.sfl-compact-table-workspace table.orders-table tbody .d-flex.flex-column.align-items-start.gap-1.mt-1:has(.sfl-future-badge),
  html body.sfl-compact-table-workspace table.ops-table tbody .d-flex.flex-column.align-items-start.gap-1.mt-1:has(.sfl-future-badge) {
    gap: 2px !important;
    margin-top: 2px !important;
  }

  /* Smaller row actions so the action column cannot inflate a row. */
  html body.sfl-compact-table-workspace table.orders-table tbody .order-actions-menu summary,
  html body.sfl-compact-table-workspace table.ops-table tbody .order-actions-menu summary {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 5px !important;
    font-size: 9px !important;
  }

  /* The neutral status watermarks remain visible but visually lighter/smaller in dense rows. */
  html body.sfl-compact-table-workspace table.orders-table tbody tr.sfl-status-stamped > td:nth-child(8n + 2)::before,
  html body.sfl-compact-table-workspace table.orders-table tbody tr.sfl-status-stamped > td:nth-child(8n + 6)::before,
  html body.sfl-compact-table-workspace table.ops-table tbody tr.sfl-status-stamped > td:nth-child(8n + 2)::before,
  html body.sfl-compact-table-workspace table.ops-table tbody tr.sfl-status-stamped > td:nth-child(8n + 6)::before {
    padding: 0 2px !important;
    font-size: .46rem !important;
    letter-spacing: .035em !important;
    line-height: 1 !important;
  }
}