/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ─── Modern range slider (used by shared/_arrival_filter) ─────────────── */
/* A flat track with no progress fill on either side, and a soft circular
   thumb. Positions are anchors, not magnitudes — so we don't render any
   coloured "gauge" bar. */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  height: 24px;
  cursor: pointer;
  outline: none;
  position: relative; /* sits above the absolutely-positioned SVG wave layer */
}

.range-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: #e5e7eb; /* gray-200 */
  border-radius: 9999px;
}

.range-slider::-moz-range-track {
  height: 4px;
  background: #e5e7eb;
  border-radius: 9999px;
}

/* Firefox draws a filled "progress" segment by default; flatten it. */
.range-slider::-moz-range-progress {
  height: 4px;
  background: #e5e7eb;
  border-radius: 9999px;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 9999px;
  background: #ffffff;
  border: 2px solid #4f46e5; /* indigo-600 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #ffffff;
  border: 2px solid #4f46e5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.range-slider:hover::-webkit-slider-thumb,
.range-slider:focus-visible::-webkit-slider-thumb,
.range-slider:active::-webkit-slider-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.15);
}

.range-slider:hover::-moz-range-thumb,
.range-slider:focus-visible::-moz-range-thumb,
.range-slider:active::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.15);
}

/* ─── Sea-themed arrival slider ────────────────────────────────── */
/* Ocean-gradient track, ship/empty-ship/container thumb (--sea-thumb var). */

/* Thumb image tokens — JS sets --sea-thumb on the <input> element inline style;
   the custom property cascades into ::-webkit-slider-thumb via inheritance,
   sidestepping WebKit's compound-class pseudo-element invalidation quirk. */
:root {
  --sea-thumb-ship: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M 0,17 L 40,17 L 37,25 L 3,25 Z' fill='%23374151'/%3E%3Crect x='3' y='22' width='34' height='3' fill='%23dc2626'/%3E%3Crect x='0' y='17' width='40' height='1.5' fill='%23e2e8f0'/%3E%3Crect x='2' y='8' width='11' height='9' rx='1' fill='%23e2e8f0'/%3E%3Crect x='3' y='3' width='9' height='6' rx='1' fill='%23cbd5e1'/%3E%3Crect x='4' y='4' width='2' height='2' rx='0.5' fill='%2393c5fd'/%3E%3Crect x='7' y='4' width='2' height='2' rx='0.5' fill='%2393c5fd'/%3E%3Crect x='10' y='4' width='2' height='2' rx='0.5' fill='%2393c5fd'/%3E%3Crect x='5' y='0' width='3' height='4' rx='0.5' fill='%236b7280'/%3E%3Crect x='15' y='12' width='6' height='5' fill='%233b82f6'/%3E%3Crect x='22' y='12' width='6' height='5' fill='%23fbbf24'/%3E%3Crect x='29' y='12' width='6' height='5' fill='%2306b6d4'/%3E%3Crect x='36' y='12' width='4' height='5' fill='%23ef4444'/%3E%3Crect x='15' y='6' width='6' height='6' fill='%23fbbf24'/%3E%3Crect x='22' y='6' width='6' height='6' fill='%2306b6d4'/%3E%3Crect x='29' y='6' width='6' height='6' fill='%23ef4444'/%3E%3Crect x='36' y='6' width='4' height='6' fill='%233b82f6'/%3E%3Crect x='15' y='0' width='6' height='6' fill='%2306b6d4'/%3E%3Crect x='22' y='0' width='6' height='6' fill='%23ef4444'/%3E%3Crect x='29' y='0' width='6' height='6' fill='%233b82f6'/%3E%3Crect x='36' y='0' width='4' height='6' fill='%23fbbf24'/%3E%3C/svg%3E");
  --sea-thumb-empty-ship: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M 0,17 L 40,17 L 37,25 L 3,25 Z' fill='%23374151'/%3E%3Crect x='3' y='22' width='34' height='3' fill='%23dc2626'/%3E%3Crect x='0' y='17' width='40' height='1.5' fill='%23e2e8f0'/%3E%3Crect x='2' y='8' width='11' height='9' rx='1' fill='%23e2e8f0'/%3E%3Crect x='3' y='3' width='9' height='6' rx='1' fill='%23cbd5e1'/%3E%3Crect x='4' y='4' width='2' height='2' rx='0.5' fill='%2393c5fd'/%3E%3Crect x='7' y='4' width='2' height='2' rx='0.5' fill='%2393c5fd'/%3E%3Crect x='10' y='4' width='2' height='2' rx='0.5' fill='%2393c5fd'/%3E%3Crect x='5' y='0' width='3' height='4' rx='0.5' fill='%236b7280'/%3E%3Crect x='14' y='10' width='24' height='7' rx='0.5' fill='%234b5563'/%3E%3Cline x1='14' y1='13' x2='38' y2='13' stroke='%236b7280' stroke-width='1'/%3E%3Cline x1='20' y1='10' x2='20' y2='17' stroke='%236b7280' stroke-width='0.5'/%3E%3Cline x1='26' y1='10' x2='26' y2='17' stroke='%236b7280' stroke-width='0.5'/%3E%3Cline x1='32' y1='10' x2='32' y2='17' stroke='%236b7280' stroke-width='0.5'/%3E%3C/svg%3E");
  --sea-thumb-container: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='2' y='5' width='36' height='18' rx='1' fill='%231d4ed8'/%3E%3Crect x='2' y='5' width='36' height='4' rx='1' fill='%233b82f6'/%3E%3Crect x='2' y='19' width='36' height='4' rx='1' fill='%231e3a8a'/%3E%3Cline x1='10' y1='6' x2='10' y2='22' stroke='%231e40af' stroke-width='1'/%3E%3Cline x1='20' y1='6' x2='20' y2='22' stroke='%231e40af' stroke-width='1'/%3E%3Cline x1='30' y1='6' x2='30' y2='22' stroke='%231e40af' stroke-width='1'/%3E%3Crect x='32' y='9' width='2' height='8' rx='0.5' fill='%2393c5fd'/%3E%3Crect x='35' y='9' width='2' height='8' rx='0.5' fill='%2393c5fd'/%3E%3Crect x='2' y='5' width='4' height='4' rx='0.5' fill='%231e40af'/%3E%3Crect x='34' y='5' width='4' height='4' rx='0.5' fill='%231e40af'/%3E%3Crect x='2' y='19' width='4' height='4' rx='0.5' fill='%231e40af'/%3E%3Crect x='34' y='19' width='4' height='4' rx='0.5' fill='%231e40af'/%3E%3C/svg%3E");
}

.sea-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: transparent; /* SVG wave layer provides the visual track */
  border-radius: 9999px;
}

.sea-slider::-moz-range-track {
  height: 6px;
  background: transparent;
  border-radius: 9999px;
}

.sea-slider::-moz-range-progress {
  height: 0;
}

.sea-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 28px;
  margin-top: -11px;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--sea-thumb, var(--sea-thumb-ship));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  box-shadow: none;
  cursor: grab;
  transition: transform 120ms ease;
}

.sea-slider::-moz-range-thumb {
  width: 40px;
  height: 28px;
  border-radius: 0;
  background-color: transparent;
  background-image: var(--sea-thumb, var(--sea-thumb-ship));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  box-shadow: none;
  cursor: grab;
  transition: transform 120ms ease;
}

.sea-slider:hover::-webkit-slider-thumb,
.sea-slider:focus-visible::-webkit-slider-thumb,
.sea-slider:active::-webkit-slider-thumb {
  transform: scale(1.15);
  box-shadow: none;
}

/* ─── Arrival slider waypoint tooltips ─────────────────────────── */
.sea-tip {
  cursor: default;
}

.sea-tip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 9px;
  background: #1f2937;
  color: #f9fafb;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 5px;
  width: max-content;
  max-width: 210px;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
  z-index: 30;
}

.sea-tip:hover::after {
  opacity: 1;
}
/* ─── Packing table "Edit values" mode ─────────────────────────────────── */
/* While editing is active, editable cells show a text cursor and a soft
   hover highlight. Edited cells are indicated via a hover tooltip, not a
   persistent marker. */
.packing-editing .packing-cell {
  cursor: text;
}

.packing-editing .packing-cell:hover {
  background-color: #eff6ff; /* blue-50 */
}

/* A total the validation flags as inconsistent (box count or net weight) gets a
   red wavy underline, like a spell-check error, until it is resolved. */
.total-flagged {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #dc2626; /* red-600 */
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}