/* Shipments tab. Extends the locked Optimum app shell (pink #E266A7, teal #67E2E3, Poppins).
   Every colour here resolves to a token already declared in design-manifest.json. No new hexes. */

.ship-wrap { padding: 0 4px 24px; }

/* ── ADD FORM ─────────────────────────────────────────────────────────────── */
.ship-add {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.ship-add-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ship-input {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming the whole page on focus */
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  -webkit-user-select: text;
  user-select: text;
}
.ship-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.ship-row { display: flex; gap: 8px; margin-top: 12px; }
.ship-row > * { flex: 1; }

.ship-btn {
  min-height: 48px;
  padding: 12px 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--card);
  background: var(--pink);   /* solid, never a gradient */
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1), opacity 100ms cubic-bezier(0.2, 0, 0, 1);
}
.ship-btn:active { transform: scale(0.97); opacity: 0.9; }
.ship-btn[disabled] { opacity: 0.4; cursor: default; }
.ship-btn-quiet { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }

/* ── PARSE PREVIEW: what we understood, before anything is saved ──────────── */
.ship-parsed {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--teal-soft);
  border: 1px solid var(--teal);
}
.ship-parsed-line { font-size: 14px; color: var(--ink); margin: 0 0 4px; }
.ship-parsed-line b { font-weight: 600; }
.ship-parsed-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 8px 0 0;
  line-height: 1.4;
}

/* ── THE 5 STATES ─────────────────────────────────────────────────────────── */
.ship-empty, .ship-error, .ship-offline, .ship-success {
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
}
.ship-empty {
  background: var(--card);
  border: 1px dashed var(--line);
  color: var(--ink-soft);
}
.ship-empty-title { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.ship-empty-sub { font-size: 14px; margin: 0 0 16px; line-height: 1.4; }

.ship-error {
  background: var(--card);
  border: 1px solid var(--bad);
  color: var(--ink);
  text-align: left;
}
.ship-error-title { font-size: 15px; font-weight: 600; color: var(--bad); margin: 0 0 4px; }
.ship-error-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.4; }

.ship-offline {
  background: var(--warn);
  color: var(--ink);
  text-align: left;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.ship-offline-sub { font-weight: 400; font-size: 13px; margin: 4px 0 0; }

.ship-success {
  background: var(--ok);
  color: var(--card);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  margin-bottom: 12px;
}

/* Skeleton, shaped like the calendar that is coming so nothing jumps on arrival. */
.ship-loading { padding: 4px 0; }
.ship-skel {
  background: var(--line);
  border-radius: 8px;
  animation: shipPulse 1200ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ship-skel-head { height: 32px; width: 60%; margin: 0 auto 16px; }
.ship-skel-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ship-skel-cell { height: 44px; }
@keyframes shipPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── NEEDS A DATE: the honest bucket ──────────────────────────────────────── */
.ship-nodate {
  background: var(--card);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.ship-nodate-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}

/* ── CALENDAR ─────────────────────────────────────────────────────────────── */
.ship-cal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}
.ship-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ship-cal-month { font-size: 16px; font-weight: 600; color: var(--ink); }
.ship-cal-nav {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
}
.ship-cal-nav:active { transform: scale(0.94); }
.ship-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.ship-cal-dow span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.ship-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ship-cal-day {
  position: relative;
  min-height: 48px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1), border-color 100ms cubic-bezier(0.2, 0, 0, 1);
}
.ship-cal-day:active { transform: scale(0.94); }
.ship-cal-day.ship-blank { background: transparent; cursor: default; }
.ship-cal-day.ship-today { border-color: var(--teal); font-weight: 600; }
.ship-cal-day.ship-has { background: var(--pink-soft); font-weight: 600; }
.ship-cal-day.ship-sel { border-color: var(--pink); }
.ship-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}
.ship-dot-warn { background: var(--warn); }

/* ── DAY DETAIL ───────────────────────────────────────────────────────────── */
.ship-day-panel {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  animation: shipPanelIn 300ms cubic-bezier(0.2, 0, 0, 1) both;
}
@keyframes shipPanelIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.ship-day-title { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 12px; }

.ship-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}
.ship-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.ship-carrier { font-size: 15px; font-weight: 600; color: var(--ink); }
.ship-num {
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  -webkit-user-select: text;
  user-select: text;
}
.ship-qty-line { font-size: 14px; color: var(--ink); margin-top: 8px; }
.ship-qty-line b { font-weight: 600; }
.ship-link {
  font-size: 13px;
  color: var(--pink);
  text-decoration: underline;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  touch-action: manipulation;
}
.ship-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.ship-card-actions > * { flex: 1; }
.ship-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--teal-soft);
  color: var(--ink);
}
.ship-pill-warn { background: var(--warn); }
.ship-pill-ok { background: var(--ok); color: var(--card); }

/* ── DARK PATH ────────────────────────────────────────────────────────────────
   Scoped to [data-theme="dark"], NOT to prefers-color-scheme, and that is deliberate.
   The parent app shell is light only and paints body white unconditionally. Reacting to the
   system setting here would turn this one tab dark inside a light app, which is worse than no
   dark mode at all. When the shell gains a theme toggle this tab is already correct. */
[data-theme="dark"] .ship-add,
[data-theme="dark"] .ship-cal,
[data-theme="dark"] .ship-day-panel,
[data-theme="dark"] .ship-nodate,
[data-theme="dark"] .ship-empty,
[data-theme="dark"] .ship-error {
  background: var(--ink);
  border-color: var(--ink-soft);
  color: var(--bg);
}
[data-theme="dark"] .ship-cal-month,
[data-theme="dark"] .ship-day-title,
[data-theme="dark"] .ship-carrier,
[data-theme="dark"] .ship-empty-title { color: var(--bg); }
[data-theme="dark"] .ship-cal-day { background: var(--ink-soft); color: var(--bg); }
[data-theme="dark"] .ship-input { background: var(--ink-soft); color: var(--bg); border-color: var(--ink-soft); }

/* ── REDUCED MOTION ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── TAB DOCK, 6 TABS ──────────────────────────────────────────────────────────
   Adding Shipments took the dock from 5 tabs to 6. At 375px the row measured 437px
   wide, which pushed Activity 62px off the right edge: a tab that existed and could
   not be reached. The shell sizes each button by its own label width (padding 4px
   14px), so the longest label decides whether the last tab survives.
   Fixing it here rather than in styles.css keeps the change with the tab that caused
   it. Buttons now share the width evenly, so a 7th tab degrades gracefully instead of
   silently dropping one. Touch target stays above the 44px floor: 375/6 = 62px wide. */
.tab-dock { justify-content: space-between; padding-left: 4px; padding-right: 4px; }
.tab-dock-btn { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }
/* The shell sets letter-spacing 0.04em on the label. At 6 tabs that is what pushed the longest
   label ("Shipments", 59px) past its 57px cell and truncated it to an ellipsis. Font size stays
   at 10px: this is read at arm's length, and shrinking type to win 3px is the wrong trade. */
.tab-dock-label {
  max-width: 100%;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}