/* Freight Planner: only what the shared HYSEC page parts (hysec-universe-ui.css: page head, tabs, segments, toolbar,
   tables, chips, editor rows, badges, states) do not cover: the page frame, the side panel, the editor in place, the
   container chips, the stop list and the 3D hold. */

.fp-app {
  --hsu-page-pad-y: 28px;
  --hsu-page-pad-x: 36px;
  --mud-typography-default-family: "Jura", sans-serif;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: var(--hsu-page-pad-y) var(--hsu-page-pad-x) 64px;
  background: var(--hsu-bg);
  color: var(--hsu-text);
  font-family: "Jura", sans-serif;
  font-size: 0.9375rem;
  container-type: inline-size;
}
.fp-app :is(.hsu-tab, .hsu-segment-item, .hsu-row-link, .hsu-crumb-back, .hsu-link-button):focus-visible { outline: 2px solid var(--hsu-accent); outline-offset: 2px; }
.fp-app .hsu-table .hsu-actions { text-align: right; }
.fp-app .hsu-table th .fp-swatch { margin-right: 8px; }
/* The file upload wraps its button in a field control; the button stands in the header actions like "Neuer Plan". */
.fp-app .fp-upload { display: contents; }

/* Fields: the Universe's outlined dense field (hysec-universe-lab.css on .hss-shell), here on the planner and its
   dialogs. Every input of the planner is one (FreightCombobox draws the same classes): 44 px high, radius 10 px, the
   label in the border, or in a table no label under its column. Buttons and segments beside fields are as high. */
:is(.fp-app, .fp-dialog) { --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --field-placeholder: #aaa69d; --field-border-bg: transparent; }
:is(.fp-app, .fp-dialog) :is(.mud-input, .mud-input-label, .mud-button) { font-family: inherit; }
:is(.fp-app, .fp-dialog) .mud-input { color: var(--hsu-text-strong); }
:is(.fp-app, .fp-dialog) input::placeholder { color: #a9a49b; opacity: 1; }
:is(.fp-app, .fp-dialog) .mud-input-outlined { background-color: #0f1115; border-radius: 10px; }
:is(.fp-app, .fp-dialog) .mud-button { text-transform: none; letter-spacing: normal; }
/* Mud gives a labelled field 8 px above and 4 px below; centred beside a button that is 2 px off. Rows space themselves. */
:is(.fp-app, .fp-dialog) :is(.mud-input-control, .mud-input-control.mud-input-control-margin-dense, .mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label) { margin-top: 0; margin-bottom: 0; }
:is(.fp-app, .fp-dialog) .mud-button-root.mud-button:not(.mud-button-size-small):not(.mud-input *) { min-height: 44px; }
.fp-app .hsu-segment { box-sizing: border-box; height: 44px; }
.fp-app .hsu-toolbar-actions { align-items: center; }

/* Ship and Standort of a plan, above its tabs. */
.fp-setup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-4); margin: var(--hsu-space-2) 0 var(--hsu-space-2); }
.fp-setup > .fpc { flex: 0 1 320px; }
.fp-facts { display: flex; gap: var(--hsu-space-5); margin: 0; }
.fp-facts div { display: grid; }
.fp-facts dt { color: var(--hsu-text-faint); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.fp-facts dd { margin: 0; color: var(--hsu-text-strong); font-weight: 600; }
.fp-tab { padding-top: var(--hsu-space-4); }
.fp-alert { margin: 0 0 var(--hsu-space-3); }
.fp-alert .mud-alert-message { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.fp-alert-violet { border-color: rgba(var(--hsu-violet-rgb), 0.5); }
.fp-blocked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--hsu-space-3); }
.fp-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; vertical-align: baseline; }
.fp-dialog-fields { display: grid; gap: var(--hsu-space-4); padding-top: var(--hsu-space-2); }
.fp-dialog-fields > .hsu-segment { justify-self: start; }
.fp-warn { color: var(--hsu-warn); }
.fp-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-4) var(--hsu-space-3); margin: var(--hsu-space-2) 0 var(--hsu-space-4); }
.fp-search > * { flex: 0 0 auto; width: auto; margin: 0; }
/* One width for every filter field; a row too narrow wraps instead of squeezing some of them. */
/* MudSelect wraps its field in div.mud-select (flex 1 0 auto); the width goes on whatever stands in the row. */
.fp-app .fp-search > :is(.mud-select, .mud-input-control.fp-search-field, .fpc) { flex: 0 0 200px; width: 200px; min-width: 0; max-width: 200px; }
.fp-run-stops { display: grid; gap: 2px; margin: 8px 0 0; padding-left: 18px; color: var(--hsu-text-muted); font-size: var(--hsu-text-xs); }
.fp-goods :is(th, td) { vertical-align: middle; }
.fp-goods .fp-good-name { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.fp-goods .fp-good-name > .fpc { flex: 1 1 auto; }
.fp-goods .fp-scu-field { width: 110px; }
.fp-goods td.num .mud-input-control.fp-scu-field { margin-left: auto; }
.fp-system-select { flex: 0 0 200px; width: 200px; }
.fp-hold-select { flex: 0 0 260px; width: 260px; }

/* Tab and side panel: "Handel finden" and other buyers beside the tab, like the inspector of the fleet page. */
.fp-work.has-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr); gap: var(--hsu-space-5); align-items: start; }
.fp-work.has-side.is-wide { grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr); }
.fp-side { min-width: 0; margin-top: var(--hsu-space-4); padding: var(--hsu-space-4) var(--hsu-space-5) var(--hsu-space-5); border: 1px solid var(--hsu-line); border-radius: var(--hsu-radius); background: var(--hsu-surface-raised); }
.fp-side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--hsu-space-2); margin: 0 0 var(--hsu-space-3); }
.fp-side-head h2 { margin: 0; color: var(--hsu-text-strong); font-size: var(--hsu-text-md); font-weight: 700; }

/* Cargo table: set column widths; the editor's fields fill their cells without a width of their own, so they stand
   under the columns and opening the editor moves none. */
.fp-cargo { min-width: 760px; }
.fp-col-ware { width: 20%; }
.fp-col-scu { width: 11%; }
.fp-col-place { width: 19%; }
.fp-col-kind { width: 10%; }
.fp-col-value { width: 12%; }
.fp-col-actions { width: 9%; }
.fp-cargo td.num small { white-space: normal; }

/* Contract editor (FreightContractEditor.razor): rows of the cargo table, at its top or under the edited contract. */
.fp-app .fp-editor-rows > tr > td { padding: 6px 12px; border-bottom-color: transparent; vertical-align: middle; }
/* Numbers stand right, in their field as in the column. */
.fp-app .hsu-table td.num input { text-align: right; }
.fp-app .fp-editor-rows > tr:first-child > td { padding-top: 14px; }
.fp-app .fp-editor-rows > tr:last-child > td { padding-bottom: 14px; border-bottom-color: var(--hsu-line); }
.fp-app .fp-editor-rows :is(.mud-input-control, .fpc) { width: 100%; min-width: 0; }
.fp-editor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fp-editor-head > .fpc { flex: 0 1 360px; width: 360px; }
.fp-editor-actions { align-items: center; }

/* Container chips: the largest size of a contract; the containers of a loot line (click adds, right click takes away). */
.fp-app .fp-containers { margin: 0; }
.fp-app .hsu-chip.is-on { border-color: var(--hsu-accent-line); background: var(--hsu-accent-soft); color: var(--hsu-accent); }
.fp-app .hsu-chip em { color: var(--hsu-text-strong); font-style: normal; }
.fp-app .hsu-chip.is-nofit { opacity: 0.45; }
.fp-app .hsu-chip.is-on.is-nofit { opacity: 0.8; }
.fp-goods .fp-boxes-cell { width: 330px; min-width: 330px; }
.fp-boxes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fp-boxes .hsu-chip { padding: 2px 8px; }
.fp-boxes-note { min-height: 20px; margin-top: 4px; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.fp-boxes-note .hsu-chip { padding: 1px 8px; color: var(--hsu-accent); }

/* Stop list: route and sale route. */
.fp-stops { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hsu-line); }
.fp-stop { padding: 10px 0 12px; border-bottom: 1px solid var(--hsu-line); }
.fp-stop.is-done { opacity: 0.62; }
.fp-stop.is-next { box-shadow: inset 2px 0 var(--hsu-accent); padding-left: 10px; }
.fp-stop.is-origin { padding: 8px 0; }
.fp-stop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.fp-stop-head strong { color: var(--hsu-text-strong); font-size: var(--hsu-text-md); }
.fp-stop-head small { color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.fp-stop-head .fp-done { margin-left: auto; }
.fp-stop-no { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border: 1px solid var(--hsu-line-strong); border-radius: 50%; color: var(--hsu-text-muted); font-size: 0.75rem; font-weight: 700; }
.fp-stop.is-next .fp-stop-no { border-color: var(--hsu-accent); color: var(--hsu-accent); }
.fp-stop.is-origin .fp-stop-no { min-width: 10px; width: 10px; height: 10px; margin: 0 6px; }
.fp-acts { display: grid; gap: 2px; margin: 6px 0 0 32px; padding: 0; list-style: none; font-size: var(--hsu-text-sm); }
.fp-acts > li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 28px; }
.fp-acts strong { color: var(--hsu-text-strong); font-variant-numeric: tabular-nums; }
.fp-acts small { color: var(--hsu-text-faint); }
.fp-verb { min-width: 72px; color: var(--hsu-text-faint); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fp-verb.out { color: #e9b989; }
.fp-verb.in { color: #9ec6e6; }
.fp-acts .fp-record-field { flex: 0 0 170px; width: 170px; margin: 4px 0; }
.fp-less { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex-basis: 100%; padding: 6px 0 8px; }
.fp-less > .mud-input-control { flex: 0 0 220px; width: 220px; }
.fp-rest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex-basis: 100%; color: var(--hsu-warn); }
.fp-stop-rest { margin: 4px 0 2px 32px; }
.fp-stop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0 32px; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.fp-hop { margin: 0 0 6px 32px; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.fp-hop .fp-arrival { color: var(--hsu-text); }
.fp-hop .fp-light.is-dark { color: var(--hsu-info); }
.fp-round { padding: 10px 0 4px; color: var(--hsu-accent); font-size: var(--hsu-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* Hold: the 3D view (freight-hold-viewer.js) and what is on board beside it. */
.fp-hold { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--hsu-space-5); }
.fp-hold-stage-wrap { position: relative; min-width: 0; }
.fp-hold-viewer { position: relative; height: min(58vh, 560px); min-height: 340px; overflow: hidden; border: 1px solid var(--hsu-line); border-radius: var(--hsu-radius); background: radial-gradient(ellipse at 50% 40%, #171b21 0%, #0c0e12 75%); }
.fp-hold-stage { position: absolute; inset: 0; }
.fp-hold-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.fp-hold-canvas:active { cursor: grabbing; }
.fp-hold-tooltip { position: absolute; z-index: 5; max-width: 280px; padding: 5px 8px; border: 1px solid var(--hsu-line-strong); border-radius: 5px; background: rgba(13, 15, 19, 0.94); color: var(--hsu-text-strong); font-size: 12px; pointer-events: none; }
.fp-hold-fallback { position: absolute; inset: auto 16px 16px; margin: 0; color: var(--hsu-text-muted); font-size: 13px; }
.fp-hold-key { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: grid; gap: 3px; margin: 0; padding: 6px 9px; border: 1px solid var(--hsu-line); border-radius: 6px; background: rgba(11, 13, 16, 0.8); color: var(--hsu-text-muted); font-size: 11px; list-style: none; pointer-events: none; }
.fp-hold-key li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.fp-key-mark { flex: none; width: 18px; height: 10px; border: 1.5px solid #c39b5b; border-radius: 2px; }
.fp-key-mark.open { border-color: #e0c48e; }
.fp-key-mark.door { background: rgba(195, 155, 91, 0.3); }
.fp-key-mark.reachable { border-style: dashed; }
.fp-key-mark.unknown { border-style: dashed; border-color: #9a8f86; }
.fp-key-mark.blocked { border-color: #ff4d3d; background: rgba(255, 77, 61, 0.15); }
.fp-key-mark.noaccess { border-color: #c77dff; background: rgba(199, 125, 255, 0.15); }
.fp-hold-side { min-width: 0; }
.fp-hold-side .hsu-section { margin-bottom: var(--hsu-space-5); }
.fp-fixes { display: flex; flex-wrap: wrap; gap: var(--hsu-space-2); margin: 0 0 var(--hsu-space-4); }

@container (max-width: 1000px) {
  .fp-work.has-side, .fp-work.has-side.is-wide { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fp-side { order: -1; }
}

@container (max-width: 900px) {
  .fp-hold { grid-template-columns: 1fr; }
  .fp-hold-viewer { height: 360px; }
}

@container (max-width: 640px) {
  .fp-app { --hsu-page-pad-y: 18px; --hsu-page-pad-x: 16px; }
  .fp-setup > .fpc { flex-basis: 100%; }
  .fp-acts, .fp-stop-foot, .fp-hop, .fp-stop-rest { margin-left: 0; }
}