/* ==========================================================================
   MGT2E DATAPAD — Manifest module (.mf)
   1. Layout            4. Cargo panel and popover forms
   2. Ships             5. Statistics
   3. Hold gauge        6. Cargo log (table, type icons, container queries)
   ========================================================================== */

@layer modules {

  /* ---------- 1. Layout ---------- */
  /* Ships (top left) and cargo (bottom left) share the left third; the log takes the right */
  .mf {
    display: grid;
    grid-template-columns: var(--split-cols);
    grid-template-rows: auto minmax(0, 1fr); /* ships panel sizes to its content; cargo fills the rest */
    gap: var(--gap);
    min-height: 0;
    position: relative; /* containing block for the ship delete dialog below */
  }

  /* The ship delete dialog sits on .mf rather than inside the ships panel, which clips it when it holds
     few ships. Placed in the panel's grid cell, inset by the panel's 1px border, it starts where it did
     inside the panel, covers at least the panel and grows downward over the cargo panel when taller. */
  .mf > .confirm {
    grid-column: 1 / 2;         /* both lines explicit: for a positioned item an `auto` end line */
    grid-row: 1 / 2;            /* means the grid's far edge, not the end of the cell */
    inset: 1px 1px auto;
    min-height: calc(100% - 2px);
    overflow: visible;
    z-index: 9;                 /* over the Add ship form and Settings panel it may have been opened from */
  }

  .mf-top {
    --ship-row: 58px;           /* height of one ship entry */
    grid-column: 1;
    grid-row: 1;
    max-height: 238px;         /* the whole ships panel, title bar included; the list scrolls inside it */
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* Once the divider below has been dragged, the ships panel takes the height it was given (set by manifest.js) */
  .mf.is-sized .mf-top {
    height: var(--ships-h);
    max-height: none;
  }

  /* Divider between ships and cargo: a faint line centred in the gap between them; it doesn't widen the gap.
     Placed in the cargo panel's cell and lifted up into the gap. */
  .mf-split {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--gap));
    height: var(--gap);
    z-index: 3;
    cursor: row-resize;
    touch-action: none;
  }
  .mf-split::before {
    content: "";
    position: absolute;
    left: 22.5%;
    right: 22.5%;               /* 55% of the column's width, centred */
    top: calc(50% - 1px);      /* nudged up: centred, it looked closer to the cargo panel */
    height: 1px;
    background: var(--glass-border);
  }
  /* Fingers get a taller grab area reaching a little into both panels; the line stays where it is */
  @media (pointer: coarse) {
    .mf-split {
      top: calc(-1 * var(--gap) - 8px);
      height: calc(var(--gap) + 16px);
    }
  }

  .mf-ships,
  .mf-cargo,
  .mf-ledger {
    position: relative; /* anchors the delete confirmation overlay */
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  .mf-cargo  { grid-column: 1; grid-row: 2; }
  .mf-ledger { grid-column: 2; grid-row: 1 / 3; }

  .mf-ship-list,
  .mf-cargo-list,
  .mf-ledger__list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    list-style: none;
  }

  /* ---------- 2. Ships ---------- */
  /* Add ship floats over the ship list, under its title bar. On .mf, as the ships panel clips what's taller than it. */
  .mf-ship-form {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    position: absolute;
    inset: calc(var(--bar-h) + 1px) 1px auto;
    z-index: 7;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface-solid);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop);
  }

  .mf-ship-form[hidden] { display: none; }

  /* The boxes share the first line; the buttons sit together at the right of the second */
  .mf-ship-form input[name="name"]     { flex: 2 1 55%; min-width: 0; }
  .mf-ship-form input[name="capacity"] { flex: 1 1 30%; min-width: 0; }
  .mf-ship-form .btn                   { flex: 0 0 auto; }
  .mf-ship-form .btn[type="submit"]    { margin-left: auto; }

  /* Ship settings float over the ships and the hold: the whole left column */
  .mf-settings {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface-solid);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop);
  }

  .mf-settings[hidden] { display: none; }

  .mf-settings__list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    list-style: none;
  }

  .mf-settings__msg {
    flex: 0 0 auto;
    min-height: 1.4em;
    padding: 6px 12px 0;
  }

  .mf-settings__foot {
    flex: 0 0 auto;
    display: flex;
    padding: 10px 12px;
  }

  .mf-set-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 12px;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--line-faint);
  }

  .mf-set-row__action { flex: 0 0 auto; }

  .mf-set-form {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 10px;
    padding: 6px 0;
  }

  .mf-set-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  .mf-set-form .input { width: 100%; }

  .mf-set-form__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .mf-set-form__actions .btn { flex: 0 0 auto; }

  /* A ship row is a .row laid out as name + load over the hold gauge */
  .row.mf-ship {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    height: var(--ship-row);
    padding: 0 12px;
  }

  .mf-ship__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .mf-ship__load {
    flex: 0 0 auto;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  /* Transaction results and errors, laid over the selected ship's row (or the list's placeholder row).
     manifest.js fades it out after 2.3 s; a new message replaces it. The orange active border stays visible. */
  .mf-ship-list > .empty {
    position: relative;
  }

  .mf-flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    overflow: hidden;
    text-align: center;
    white-space: pre-line;      /* a message may hold a line break (manifest.js note) */
    background: var(--surface-raised);
    pointer-events: none;       /* clicks still reach the ship row underneath */
    /* fade in and out: manifest.js (showFlash), which survives the row being redrawn under it */
  }

  .mf-unit,
  .mf-detail {                  /* a message's lower-case parts: the ton unit, "10t free" after "Not enough space:" */
    text-transform: none;
  }

  /* ---------- 3. Hold gauge ---------- */
  .mf-bar {
    height: 6px;
    background: var(--well);
    border: 1px solid var(--glass-border);
  }

  .mf-bar__fill {
    height: 100%;
    background: linear-gradient(to right, var(--c-ice-dim), var(--c-ice));
    box-shadow: var(--glow-ice);
    transition: width 300ms var(--ease);
  }

  .mf-bar__fill.is-high {
    background: linear-gradient(to right, #a3520c, var(--c-orange));
    box-shadow: var(--glow-orange);
  }

  /* ---------- 4. Cargo panel and popover forms ---------- */
  .mf-cargo__toolbar {
    position: relative;         /* the popover below floats over the cargo list from here */
    display: flex;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--glass-border);
  }

  /* Add / Buy / Mail / Sell / Offload / Deliver forms overlay the cargo list instead of pushing it down */
  .mf-popover {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-drop);
  }

  .mf-popover label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-text-muted);
  }

  /* On desktop the open list, and everywhere the calendar picker, are drawn by the browser; force them dark to match */
  .mf-popover select,
  .mf-popover .mf-date__native {
    color-scheme: dark;
  }

  .mf-popover select option {
    background: #0a1320;
    color: var(--c-ice-bright);
  }

  /* Form rows. minmax(0, …) stops the inputs' default width from pushing the columns past the panel edge. */
  .mf-popover__row {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    min-width: 0;
  }

  .mf-popover__row > label { min-width: 0; }
  .mf-popover__row .input  { width: 100%; }

  /* Cargo type (3/4) with the date (1/4) to its right */
  .mf-popover__row--type  { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  /* Location (2/4) with QTY and Roll / Price sharing the rest */
  .mf-popover__row--loc   { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  /* Split, base price, unit price, total price: tighter than the other rows, to fit four across the left third */
  .mf-popover__row--price {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.95fr) minmax(0, 1.3fr) minmax(0, 1.15fr);
    gap: 6px;
  }

  .mf-popover__row--price > label {
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mf-popover__row--price .mf-price {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 5px;
    font-size: var(--fs-xs);
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
  }
  /* Two equal halves: mail rows */
  .mf-popover__row--half  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Right-aligned price labels: the label and its value sit at the right edge of their box */
  .mf-popover label.mf-field--right {
    align-items: flex-end;
    text-align: right;
  }

  /* Price boxes look and size like the inputs beside them */
  .mf-price {
    align-self: stretch;
    width: 100%;
    padding: 6px 8px;
    text-align: right;
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--c-orange);
    background: var(--well);
    border: 1px solid var(--glass-border);
  }

  /* Fixed cargo type in the sell / offload / deliver forms: shown as text, not an input */
  .mf-popover__fixed {
    padding: 6px 0;
    font-size: var(--fs-sm);
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--c-ice-bright);
  }

  /* Form message (validation and save errors) on the left, the buttons on the right */
  .mf-popover__actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .mf-popover__actions > .btn {
    flex: 0 0 auto;
  }

  .mf-popover__msg {
    flex: 1;
    min-width: 0;
    white-space: pre-line;      /* a message may hold a line break (manifest.js note) */
  }

  /* Date box: a dd/mm text box with a calendar icon; the native date input is transparent on top of it */
  .mf-date {
    position: relative;
    display: block;
  }

  .mf-date__text {
    cursor: pointer;
    padding-right: 28px;
  }

  .mf-date__icon {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--c-text-muted);
    pointer-events: none;
  }

  .mf-date__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mf-date__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    cursor: pointer;
  }

  /* Cargo item: a text block on the left (type and weight on top, origin / split / prices below)
     and the action buttons on the right. */
  .mf-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--line-faint);
  }

  .mf-item__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .mf-item__main,
  .mf-item__detail {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
  }

  .mf-item__note { color: var(--c-text-muted); } /* informational, e.g. the container count after Mail */

  .mf-item__type,
  .mf-item__origin {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mf-item__weight {
    flex: 0 0 auto;
    text-align: right;
    color: var(--c-ice-bright);
  }

  /* The origin takes the spare width, so the unit / total pair sits at the right edge of the text block */
  .mf-item__origin,
  .mf-item__split,
  .mf-item__prices {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .mf-item__split,
  .mf-item__prices {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .mf-item__prices {
    color: var(--c-ice-bright);
  }

  .mf-item__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 6px;
  }

  .mf-item .btn--icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }

  /* ---------- 5. Statistics ---------- */
  /* A full-width button at the foot of the hold opens a panel rising over the hold from the dock's top edge,
     so the button stays visible and toggles it. */
  .mf-cargo__dock {
    position: relative;
    flex: 0 0 auto;
  }

  .mf-cargo__footer {
    display: flex;
    padding: 10px 12px;
    border-top: 1px solid var(--glass-border);
  }

  .mf-stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: 6;
    background: var(--surface-raised);
    border-top: 1px solid var(--glass-border-hi);
    box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.4);
  }

  .mf-stats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
  }

  .mf-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--well);
    border: 1px solid var(--glass-border);
  }

  .mf-stat--total {
    grid-column: 1 / -1;
  }

  .mf-stat dd {
    font-size: var(--fs-md);
    color: var(--c-ice-bright);
  }

  .mf-stat--total dd {
    font-size: var(--fs-lg);
  }

  .mf-stat dd.is-loss {
    color: var(--c-red);
  }

  /* ---------- 6. Cargo log ---------- */
  /* The log's width decides which columns fit (see the container queries at the end) */
  .mf-ledger {
    container: ledger / inline-size;
  }

  /* The title and the ship's name side by side at the left of the bar; the key button at the right */
  .mf-ledger__heading {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
  }

  .mf-ledger__sub {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* What the log's icons mean: three columns of two, over the right of the title bar, covering the key button.
     Any click closes it. */
  .mf-legend {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 6px 18px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    color: var(--c-ice-bright);
    background: var(--surface-solid);
    border: 1px solid var(--glass-border-hi);
    box-shadow: var(--shadow-drop);
  }

  .mf-legend[hidden] { display: none; }

  .mf-legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  /* A column table: the header and rows share one grid so the columns line up */
  .mf-log {
    display: grid;
    grid-template-columns: 42px 36px minmax(190px, 1fr) 110px 44px 64px 56px 85px 85px;
    align-items: center;
    gap: 0 6px;
    padding: 8px 12px;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--line-faint);
  }

  .mf-log--head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking);
    text-transform: uppercase;
    background: rgba(8, 20, 34, 0.9);
    border-bottom-color: var(--glass-border);
  }

  .mf-log__kind,
  .mf-log__cargo,
  .mf-log__place {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Type column: an icon only, inset 5px from the column edge; the header is not inset */
  .mf-log__kind {
    display: flex;
    align-items: center;
  }

  .mf-log:not(.mf-log--head) > .mf-log__kind {
    padding-left: 5px;
  }

  .mf-log__place,
  .mf-log__date {
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .mf-log__qty,
  .mf-log__roll,
  .mf-log__unit,
  .mf-log__total,
  .mf-log__margin {
    text-align: right;
    white-space: nowrap;
    color: var(--c-ice-bright);
  }

  .mf-log__roll,
  .mf-log__unit,
  .mf-log__total,
  .mf-log__margin {
    font-size: var(--fs-xs);
  }

  .mf-log__roll                { color: var(--c-text-muted); }
  .mf-log__margin.is-loss      { color: var(--c-red); }
  .mf-log__margin.is-gain      { color: var(--c-green); }
  .mf-log--head > *            { color: var(--c-text-muted); }

  .mf-log-more {
    display: flex;
    justify-content: center;
    padding: 12px;
  }

  .mf-log-more .btn {
    flex: 0 0 auto;
  }

  /* Type icons. The colours are muted on purpose (each hue mixed toward grey and darkened),
     so the icons don't pull the eye away from the text beside them. */
  .log-icon {
    display: inline-grid;
    width: 14px;
    height: 14px;
  }

  .log-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .log-type--delivered { color: #865a3a; }
  .log-type--bought    { color: #864b57; }
  .log-type--added     { color: #6c538c; }
  .log-type--sold      { color: #2d7760; }
  .log-type--mail      { color: #40827a; }
  .log-type--offload   { color: #40628b; }

  /* Narrower logs (tablets in landscape, roughly 1024–1180px screens): drop Roll and Unit first,
     then Location, so the remaining columns fit without sideways scrolling. */
  @container ledger (max-width: 800px) {
    .mf-log {
      grid-template-columns: 42px 36px minmax(150px, 1fr) 100px 44px 85px 85px;
    }
    .mf-log__roll,
    .mf-log__unit {
      display: none;
    }
  }

  @container ledger (max-width: 620px) {
    .mf-log {
      grid-template-columns: 42px 36px minmax(120px, 1fr) 44px 80px 80px;
    }
    .mf-log__place {
      display: none;
    }
  }
}