/* ============================================================================
 * midnight-editor.css
 *
 * Compact editor for per-day midnight position. Slides up via the
 * existing .sheet infrastructure. Designed for fast repeat entry, not
 * onboarding — small targets where they make sense, not big tappy cards.
 *
 * The DMS lat/long block reuses .dms-input and .hemi-toggle classes
 * defined in position.css.
 * ========================================================================== */

.mn-editor {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 8px;
}

/* ---- Header ---- */

.mn-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-strong);
}

.mn-date {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}

.mn-vessel {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ---- Form rows ---- */

.mn-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Section labels — full text strength so they read clearly against the
   sheet's dark background. The inputs below are visually distinct
   because they sit on --bg-raised (one shade lighter than the sheet's
   --bg-base). */
.mn-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
}

/* ---- Native select dropdown ---- */

.mn-select {
  width: 100%;
  padding: 11px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.95rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b6c5d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}

.mn-select:focus { outline: none; border-color: var(--accent); }

/* ---- Mode toggle (vessel day vs travel day) — PWA-033 ---- */

.mn-mode-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 4px;
  /* Subtle top border that turns signal-amber in travel mode — gives
     the editor a glanceable mode signal so a customer can see at a
     glance which mode they're in. Q's call (2026-05-11): use a
     different colour from cyan, the form is too cyan-saturated.
     Amber reads as "in transit, attention required to verify
     classification". */
  border-top: 2px solid transparent;
  transition: border-color 0.18s, background 0.18s;
}

/* Travel-mode tint: amber top border + a faint amber wash on the
   toggle area. Distinct from cyan so it can't be confused with the
   active-voyage / brand-accent colours used elsewhere. */
.mn-mode-toggle.mn-mode-toggle--travel {
  border-top-color: var(--signal);
  background: rgba(255, 184, 77, 0.06);
}

/* Locked-toggle notice (PWA-033c): appears when editing a saved
   record, explains why the toggle is disabled. */
.mn-mode-locked-notice {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--signal);
  background: rgba(255, 184, 77, 0.08);
  border: 1px solid rgba(255, 184, 77, 0.30);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  font-style: italic;
}

.mn-mode-chips {
  display: flex;
  gap: 6px;
}

.mn-mode-chip {
  flex: 1 1 0;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.mn-mode-chip:hover { background: var(--bg-raised); }

/* Default selected chip — cyan brand accent (used for Vessel mode). */
.mn-mode-chip.selected {
  background: var(--accent-faint);
  border-color: var(--accent);
  color: var(--text);
}

/* When the toggle is in travel mode, the selected Travel chip uses
   amber instead of cyan. Q's call (2026-05-11): the form was too
   cyan-saturated and the modes need to read distinctly at a glance.
   Vessel mode = cyan = "you're working at sea". Travel mode = amber
   = "you're in transit, verify carefully". */
.mn-mode-toggle--travel .mn-mode-chip.selected {
  background: rgba(255, 184, 77, 0.15);
  border-color: var(--signal);
  color: var(--text);
}

/* Locked toggle (PWA-033c): chips look unselectable. The active
   chip retains its colour; the inactive chip gets dimmed and
   gains a not-allowed cursor. Tap is no-op (handled in JS). */
.mn-mode-chip--locked:not(.selected) {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: auto;  /* keep events so we can swallow clicks intentionally */
}
.mn-mode-chip--locked.selected {
  cursor: default;
}

.mn-mode-helper {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0 4px;
  /* Locked min-height so the form doesn't jump when toggling */
  min-height: 18px;
  line-height: 1.4;
}

/* Mode-body container — stable DOM node, contents rebuilt when the
   mode toggle flips. The padding is on the inner row so the rebuild
   doesn't briefly collapse the visual frame. */
.mn-mode-body { display: contents; }

/* ---- Status chips + contextual helper (PWA-031) ---- */

/* The chip group is now wrapped in .mn-chips-group which contains
   both the chip row and a contextual helper that updates on selection.
   The helper carries the disambiguation that prevents customers from
   misclassifying their vessel status — load-bearing copy. */
.mn-chips-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mn-chips {
  display: flex;
  gap: 6px;
}

.mn-chip {
  flex: 1 1 0;
  padding: 9px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.mn-chip:hover { background: var(--bg-raised); }

.mn-chip.selected {
  background: var(--accent-faint);
  border-color: var(--accent);
  color: var(--text);
}

/* Contextual helper line below the chips. Two parts:
   - .mn-chip-sub:     descriptive sub-text in soft tone
   - .mn-chip-warning: visually distinct warning, only present for
                       options that have a load-bearing clarification
                       (currently only "Stationed"). The warning is
                       what catches a customer who'd otherwise tap the
                       wrong chip on intuition. */
.mn-chip-helper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* Locked min-height so the form doesn't jump as the user toggles
     between options with single-line vs two-line helpers. */
  min-height: 48px;
}

.mn-chip-sub {
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.4;
}

.mn-chip-warning {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--signal);
  line-height: 1.4;
  font-style: italic;
}

/* ---- Notes input ---- */

.mn-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.12s ease;
}

.mn-input:focus { border-color: var(--accent); }

.mn-input::placeholder { color: var(--text-muted); }

/* ---- Lat/long disclosure ---- */

.mn-latlong {
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0;
}

.mn-latlong > summary {
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text-soft);
  list-style: none;
  user-select: none;
}

.mn-latlong > summary::-webkit-details-marker { display: none; }

.mn-latlong > summary::before {
  content: "▸ ";
  display: inline-block;
  width: 14px;
  transition: transform 0.15s ease;
}

.mn-latlong[open] > summary::before {
  transform: rotate(90deg);
}

/* PWA-033c: prominent variant of the lat/long section. When closed,
   the box reads as an affordance — dashed cyan border, brighter
   background, larger + indicator. When opened, the dashed border
   becomes solid and the box recedes to normal. Q's catch:
   "make that more visible, it's very hard to see". */
.mn-latlong--prominent {
  background: rgba(0, 224, 255, 0.05);
  border: 1.5px dashed rgba(0, 224, 255, 0.40);
  margin: 4px 0;
  transition: background 0.15s, border-color 0.15s, border-style 0.15s;
}

.mn-latlong--prominent[open] {
  background: var(--bg-base);
  border: 1px solid var(--line);
  border-style: solid;
}

/* When prominent, suppress the default ▸ from .mn-latlong > summary
   in favour of our custom + indicator inside the summary structure. */
.mn-latlong--prominent > .mn-latlong-summary::before {
  content: none;
}

.mn-latlong-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px !important;
  font-family: var(--sans) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
  color: var(--text) !important;
  text-transform: none !important;
}

.mn-latlong-summary-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: var(--accent-fg, #050a14);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.mn-latlong--prominent[open] .mn-latlong-summary-plus {
  transform: rotate(45deg);  /* + becomes × when open */
}

.mn-latlong-summary-text {
  flex: 1 1 auto;
  font-weight: 600;
}

.mn-latlong-summary-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}

/* DMS rows — reuses .dms-input from position.css for the number boxes
   and .hemi-toggle for the N/S/E/W picker. We just need the row layout. */

.mn-dms {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Lock the container's vertical space so toggling between DMS and
     Decimal views doesn't make the sheet jump. Height fits the larger
     of the two views (DMS, with its toggle + two rows + help text). */
  min-height: 156px;
}

/* Both DMS and DD rows lock to the same fixed height so the form
   doesn't shift vertically when switching between views. */
.mn-dms-row,
.mn-dd-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
}

.mn-dms-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  width: 28px;
  flex: 0 0 28px;
}

.mn-dms-sep {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 1px;
}

.mn-dms-row .dms-input {
  width: 48px;
  padding: 7px 4px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
}

.mn-dms-row .hemi-toggle {
  display: flex;
  margin-left: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.mn-dms-row .hemi-btn {
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: none;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.82rem;
  cursor: pointer;
}

.mn-dms-row .hemi-btn.active {
  background: var(--accent-faint);
  color: var(--text);
}

.mn-dms-help {
  padding-top: 2px;
  font-style: italic;
  font-size: 0.75rem;
}

/* ---- Action buttons ---- */

.mn-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.mn-btn,
.mn-btn-cancel,
.mn-btn-delete {
  width: 100%;
  padding: 11px 16px;
  font-size: 0.92rem;
  font-weight: 500;
}

.mn-btn-delete {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 0.82rem;
  background: transparent;
  color: var(--fail);
}

.mn-btn-cancel { margin-top: 4px; }

/* PWA-029: Save+Copy disabled state for last-day-of-voyage. The
   button visually steps back (lower opacity, no hover, not-allowed
   cursor) and a small hint line appears beneath. No modal. */
.mn-btn.mn-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.mn-btn-hint {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: center;
  margin-top: -4px;       /* tuck close to the button it explains */
  margin-bottom: 2px;
  font-style: italic;
}

/* ============================================================================
 * stn-decision — 5-day rule decision sheet (EIM33109).
 * Opened from a notification when a same-location stationed run is detected.
 * ========================================================================== */

.stn-decision {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}

.stn-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--bg-raised);
  border-left: 3px solid var(--signal);
  border-radius: var(--r-sm);
}

.stn-summary-line {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}

.stn-summary-dates {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.stn-body {
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.45;
}

.stn-body p {
  margin: 0 0 10px;
}

.stn-question {
  color: var(--text);
  font-weight: 500;
  margin-top: 12px !important;
}

.stn-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stn-btn {
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: var(--r-md);
}

.stn-btn-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}

.stn-btn-sub {
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.85;
  line-height: 1.2;
}

/* "No — different locations" — keeps days qualifying. Cooler tone. */
.stn-btn-no {
  background: var(--accent-faint);
  border: 1px solid var(--accent);
  color: var(--text);
}

.stn-btn-no:hover {
  background: rgba(0, 224, 255, 0.18);
}

/* "Yes — same location" — invokes the 5-day rule. Warmer tone (the
   answer that costs the customer days). Still accessible, not alarming. */
.stn-btn-yes {
  background: var(--signal-faint);
  border: 1px solid var(--signal);
  color: var(--text);
}

.stn-btn-yes:hover {
  background: rgba(255, 184, 77, 0.20);
}

.stn-reason-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.stn-reason-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.stn-btn-cancel {
  width: 100%;
  margin-top: 4px;
  padding: 10px 16px;
  font-size: 0.88rem;
}

/* ============================================================================
 * Pre-emptive 5-day-rule banner inside the editor
 * ========================================================================== */

.mn-stn-banner {
  padding: 11px 13px;
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-elevated);
  border-left: 3px solid var(--signal);
}

.mn-stn-banner.mn-stn-pending {
  /* Already over threshold — louder signal */
  background: var(--signal-faint);
}

.mn-stn-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  letter-spacing: 0.01em;
}

.mn-stn-body {
  font-size: 0.82rem;
  color: var(--text-soft);
  line-height: 1.4;
}

/* "Currently:" highlight — when reopening the decision sheet to
   change an existing answer, the current choice gets a subtle ring
   so the user can see at a glance what they're changing from. */
.stn-btn-current {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  position: relative;
}

.stn-btn-delete {
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  font-size: 0.85rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fail);
}

.stn-btn-delete:hover {
  background: rgba(255, 84, 112, 0.06);
}

/* ============================================================================
 * DMS / Decimal toggle inside the lat-long form
 * ========================================================================== */

.mn-coord-toggle {
  display: flex;
  margin-bottom: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  width: max-content;
}

.mn-coord-btn {
  padding: 5px 14px;
  background: var(--bg-elevated);
  border: none;
  color: var(--text-soft);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.mn-coord-btn.active {
  background: var(--accent-faint);
  color: var(--text);
}

.mn-coord-btn:hover { background: var(--bg-raised); }

.mn-dd-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* .mn-dd-row layout is defined alongside .mn-dms-row above to keep
   their heights identical (prevents the sheet from resizing when
   toggling DMS↔Decimal). The gap differs slightly: DD rows have
   a label+single-input pair so a touch more space reads naturally. */
.mn-dd-row {
  gap: 8px;
}

.dd-input {
  flex: 1 1 auto;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.9rem;
}

.dd-input:focus {
  outline: none;
  border-color: var(--accent);
}

.dd-input::placeholder { color: var(--text-muted); }