/* The standard mask: the product's own dispatch console.

   This is the record the way the paper Einsatzprotokoll prints it — captions
   beside the boxes, a 12-track grid per card, cards that may share a row —
   and it is the mask every other one inherits its unwritten slots from
   (MASKS-DESIGN §4). It is also the only mask that is always loaded, in the
   Disponent panel and in a detached console window alike.

   Everything is nested inside one block, which is the rule for every mask: a
   mask styles its own ground and nothing else, or two customers on one build
   would fight over `.input`. The record's own classes live here rather than
   in styles.css because they *are* this mask — the app's chrome has no field
   grid.

   The scope is `[data-mask]` — *any* mask root — and this is the one
   stylesheet allowed to say that, because the standard mask is also every
   other mask's fallback (MASKS-DESIGN §4): a mask that writes no `Control`
   gets this one, and it has to be dressed wherever it renders. A customer
   mask scopes to its own id (`[data-mask="munich"]`), is loaded after this
   file and therefore wins the ties — its own markup is untouched by anything
   here either way, because it carries its own class names.

   The tokens the rules read (--panel, --line, --accent …) come from the
   product theme in the panel and from the console base in a console window;
   a mask may override any of them for its own subtree via `tokens:` in
   mask.yaml. */
[data-mask] {
  /* The record's section cards on the same 12 tracks as the fields inside them:
     a category may take half the record instead of a row of its own (the
     Mitteiler with the Termin beside it), which dispatch_form.yaml says per
     category and /api/fields serves as a span. Only the column gap is the
     grid's — the vertical rhythm stays the card's own margin, so a half card
     next to a taller one still sits at the top of its row. */
  .fcards { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 14px;
            align-items: start; }
  .fcards > .c-4 { grid-column: span 4; }
  .fcards > .c-6 { grid-column: span 6; }
  .fcards > .c-8 { grid-column: span 8; }
  .fcards > .c-12 { grid-column: 1 / -1; }
  @media (max-width: 900px) {
    /* Two cards side by side need the width of two forms; below that every
       card takes the record's full width, as it did before it could share. */
    .fcards > .c-4, .fcards > .c-6, .fcards > .c-8 { grid-column: 1 / -1; }
  }

  /* Dispatch-record field grid: 12 tracks. dispatch_form.yaml gives each field
     a fraction width (1/12 … full) which /api/fields serves as a span (w-1 …
     w-12); rows wrap when full, a `new_row` marker (.rb) forces the break
     explicitly. The .rb variants need the full "start / span" form: overriding
     only grid-column-start would drop the span from the shorthand. */
  .fgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px 14px; }
  /* The label sits beside its input, the way the paper Einsatzprotokoll prints
     it ("Straße ____ Nr. __"), not above it. The min-width lines the inputs of
     stacked rows up in one column; a longer label just pushes its own input
     right rather than shrinking it. */
  .fgrid .field { grid-column: span 4; min-width: 0; flex-direction: row; align-items: center; gap: 10px; }
  /* A field of several lines is captioned at its top line, not beside its
     middle — the label reads as the heading of the block it belongs to. */
  .fgrid .field:has(> textarea) { align-items: flex-start; }
  .fgrid .field > :last-child { flex: 1 1 auto; min-width: 0; }
  /* …except a checkbox, which is a box of its size and not of the cell's (the
     OBJ/A marker of the Zielort), centred on the line of the inputs beside it.
     What slack the cell has goes to the caption, so the box ends at the cell's
     edge and nothing but the grid's own column gap separates it from the field
     it marks — and the caption gives up the 68px other labels claim, because a
     checkbox cell is a twelfth wide and would not otherwise fit it. */
  .fgrid .field > input[type='checkbox'] { flex: 0 0 auto; align-self: center; }
  /* The caption of a checkbox never wraps: "OBJ/A" is a name, and "OBJ" over
     "/A" reads as neither. It keeps its one line at any width (no shrink), takes
     what slack the cell has (grow) and gives up the 68px other labels claim, and
     the pair sits closer than a normal label and its input — 44 + 6 + 18 is what
     a twelfth of the narrowest 12-track record still has room for, gutter
     included. */
  .fgrid .field:has(> input[type='checkbox']) { gap: 6px; }
  .fgrid .field:has(> input[type='checkbox']) > label {
    flex: 1 0 auto; min-width: 0; white-space: nowrap;
  }
  /* Dispatch-record labels keep the field name's original casing (the generic
     .field label style uppercases) — long words may still break mid-word
     rather than overflow a narrow cell. */
  .fgrid .field > label {
    flex: 0 0 auto; min-width: 68px;
    overflow-wrap: anywhere; text-transform: none; letter-spacing: 0.04em; font-size: 10.5px;
  }
  /* One class per twelfth (dispatch_form.FIELD_WIDTH_SPANS serves the span),
     so any row of the sheet tiles exactly: a Schlagwort of ten twelfths and the
     Prio box of two end flush with the card, and nothing has to be rounded to
     the nearest third. */
  .fgrid .field.w-1 { grid-column: span 1; }
  .fgrid .field.w-2 { grid-column: span 2; }
  .fgrid .field.w-3 { grid-column: span 3; }
  .fgrid .field.w-4 { grid-column: span 4; }
  .fgrid .field.w-5 { grid-column: span 5; }
  .fgrid .field.w-6 { grid-column: span 6; }
  .fgrid .field.w-7 { grid-column: span 7; }
  .fgrid .field.w-8 { grid-column: span 8; }
  .fgrid .field.w-9 { grid-column: span 9; }
  .fgrid .field.w-10 { grid-column: span 10; }
  .fgrid .field.w-11 { grid-column: span 11; }
  .fgrid .field.w-12 { grid-column: 1 / -1; }
  .fgrid .field.rb { grid-column: 1 / span 4; }
  .fgrid .field.rb.w-1 { grid-column: 1 / span 1; }
  .fgrid .field.rb.w-2 { grid-column: 1 / span 2; }
  .fgrid .field.rb.w-3 { grid-column: 1 / span 3; }
  .fgrid .field.rb.w-4 { grid-column: 1 / span 4; }
  .fgrid .field.rb.w-5 { grid-column: 1 / span 5; }
  .fgrid .field.rb.w-6 { grid-column: 1 / span 6; }
  .fgrid .field.rb.w-7 { grid-column: 1 / span 7; }
  .fgrid .field.rb.w-8 { grid-column: 1 / span 8; }
  .fgrid .field.rb.w-9 { grid-column: 1 / span 9; }
  .fgrid .field.rb.w-10 { grid-column: 1 / span 10; }
  .fgrid .field.rb.w-11 { grid-column: 1 / span 11; }
  .fgrid .field.rb.w-12 { grid-column: 1 / -1; }
  @media (max-width: 900px) {
    /* 8 tracks: 1/3 fields become half rows; 1/2 and wider go full row. */
    .fgrid { grid-template-columns: repeat(8, 1fr); }
    .fgrid .field.w-6, .fgrid .field.w-7, .fgrid .field.w-8, .fgrid .field.w-9,
    .fgrid .field.w-10, .fgrid .field.w-11, .fgrid .field.w-12,
    .fgrid .field.rb.w-6, .fgrid .field.rb.w-7, .fgrid .field.rb.w-8,
    .fgrid .field.rb.w-9, .fgrid .field.rb.w-10,
    .fgrid .field.rb.w-11 { grid-column: 1 / -1; }
    /* Five twelfths is more than half of eight tracks — the half row it wants
       to be is span 4 here. */
    .fgrid .field.w-5 { grid-column: span 4; }
    .fgrid .field.rb.w-5 { grid-column: 1 / span 4; }
  }
  @media (max-width: 560px) {
    /* 4 tracks: the smallest fields share a row in pairs, the rest stack. */
    .fgrid { grid-template-columns: repeat(4, 1fr); }
    .fgrid .field.w-3, .fgrid .field.w-4, .fgrid .field.w-5, .fgrid .field.w-6,
    .fgrid .field.w-7, .fgrid .field.w-8, .fgrid .field.w-9, .fgrid .field.w-10,
    .fgrid .field.w-11, .fgrid .field.w-12,
    .fgrid .field.rb.w-3, .fgrid .field.rb.w-4, .fgrid .field.rb.w-5,
    .fgrid .field.rb.w-6, .fgrid .field.rb.w-7, .fgrid .field.rb.w-8,
    .fgrid .field.rb.w-9, .fgrid .field.rb.w-10,
    .fgrid .field.rb.w-11 { grid-column: 1 / -1; }
    .fgrid .field.w-1, .fgrid .field.w-2 { grid-column: span 2; }
    .fgrid .field.rb.w-1, .fgrid .field.rb.w-2 { grid-column: 1 / span 2; }
  }
  /* "+N more fields" expander under a category's primary fields. */
  .fields-toggle {
    margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer;
    font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted);
  }
  .fields-toggle:hover { color: var(--accent); }

  /* ---- address autocomplete (Einsatzstraße) -------------------------------- */
  .ac-wrap { position: relative; }
  .ac-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    max-height: 280px; overflow-y: auto;
  }
  .ac-item { padding: 7px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
  .ac-item.hi { background: var(--panel-3); }
  .ac-item .ac-name { font-size: 13px; color: var(--text); }
  /* Two lines at most. The address rows put a PLZ and an Ortsteil here and never
     reach it; a Schlagwort row puts the Stichwort the pick writes plus the
     printed Anmerkung, which runs to several sentences — enough of it to tell
     two neighbouring rows apart, without one row filling the dropdown. */
  .ac-item .ac-sub {
    font-size: 11px; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---- the frame of a detached console window ----------------------------- */
  /* No rail, no topbar, no scrollable page behind it: a console window is one
     screen the trainee works on, and the record is what scrolls inside it. */
  .console-page { height: 100%; display: flex; flex-direction: column; min-height: 0; }
  .console-top {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
  }
  .console-body { flex: 1; min-height: 0; overflow: auto; padding: 18px; }
}