/* Styling for the Item Master screen (see items.js).
 *
 * Deliberately short. Almost everything on this screen is a shared piece that
 * brings its own styling -- the table, the fields, the popup, the "i". What is
 * left is the bar above the list and the one message that appears when a
 * business has not said what it does yet.
 *
 * If this file ever grows, that is the warning sign: it means this screen is
 * building something the shared layer should own (D21).
 *
 * Every COLOUR and TYPEFACE from a token, and the commit gate refuses one
 * written out (D25). Sizes and spacing are written here, because there is no
 * scale for them in tokens.css yet and nothing checks them.
 */

.k-items__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  min-width: 0;
}

/* **NO WIDTH OF ITS OWN.** It carried `min-width: 140px` from before there
 * was a button system -- so on a phone it stayed 140 wide holding the word
 * "Add", while every button beside it had shrunk to fit its own words. A
 * screen setting its own button size is what D142 exists to stop, and this
 * was the last one left doing it. Hover, focus and disabled below stay: they
 * are about this button being the main one, not about its size. */
.k-items__add {
  font-weight: 600;
}

/* Darkened rather than repainted, matching the shared popup and the shared
 * form. Repainting a filled button to a pale surface on hover leaves white
 * text on near-white. */
/* **THE HOVER IS THE SHARED BUTTON'S NOW.** This one did not replace it, it
 * STACKED on it -- the Add button got the shared colour change and this
 * brightness on top, so the main button on Items hovered to a different shade
 * from the main button on every other screen. Which is the one thing D142
 * exists to stop. */

.k-items__add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Switched off because the business has not said what it does, so the kinds of
 * item it needs are not known. The message beside it says exactly that -- a
 * button that is dead with no explanation reads as the product being broken. */
.k-items__add:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.k-items__not-set-up,
.k-items__said {
  margin: 0;
  padding: 10px 12px;
  /* Takes the whole row on a phone rather than squeezing beside the button. */
  flex: 1 1 100%;
  min-width: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--warn-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow-wrap: break-word;
}

/* Where the form appears when adding or opening an item. Empty until then, and
 * holding no space of its own -- an empty gap above the list reads as something
 * having failed to load. */
.k-items__form:empty {
  display: none;
}

/* ------------------------------------------- the list as a file, and back

/* His ask: *"an option to export the item master and then in order to create
 * also, I should be able to upload... at times we might need to create items in
 * bulk. For that nobody wants to sit and enter one by one."* */

/* **THE FILE CONTROL IS HIDDEN AND THE LABEL IS THE BUTTON.** A browser will
 * not let the wording or the size of a file control be set, so left as it comes
 * it reads "Choose file / no file chosen" at whatever size the browser likes --
 * under the 44px a thumb needs, on a product built for a phone (D67). */

/* NOT `display: none` -- a control that is not displayed cannot be reached from
 * a keyboard at all, so the label above would open nothing for anybody not
 * using a mouse. It is out of sight and still there. */
.k-items__pick {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* WHAT A FILE COULD NOT DO. Several lines long by its nature -- one per refused
 * row -- so it cannot live in the screen's one-line voice. */
/* **WHICH OF THE TWO FILES UPLOAD WANTS.** Quiet -- it is a standing note, not a
 * message about something that just happened, so it must not read as a warning.
 * Under the bar rather than in it: on a phone that bar scrolls sideways, and a
 * sentence dragged off the right edge is a sentence nobody reads. */
.k-items__which-file {
  margin: 8px 0 0;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.k-items__file-report {
  margin: 12px 0 0;
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
}

/* **ON A PHONE THE BAR IS ONE ROW AND SCROLLS SIDEWAYS.**
 *
 * His instruction, 2026-09-01, looking at Products: *"the bill of material also
 * creates a new row in the mobile screen. That should not happen. It should
 * come in the same row."*
 *
 * The bar wrapped, so a fourth button dropped to a line of its own and the
 * screen's buttons read as two groups when they are one. The alternative was to
 * shorten what the buttons say, and that was tried and rejected in his own
 * words the day before: a button called Needs Review says Needs Review
 * everywhere. So the words stay and the row scrolls.
 *
 * Buttons refuse to shrink -- squeezed to fit, their words break across two
 * lines and the bar gets taller instead of shorter, which is the thing this is
 * fixing. */
@media (max-width: 600px) {
  .k-items__bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* **6px, and it is set HERE rather than in shell.css.** shell.css has a
     * phone block for this same bar, but it is loaded BEFORE this file -- so a
     * gap set there loses to the 12px above it, which is a rule doing nothing
     * and this project has paid for that mistake once already. With four
     * buttons on the bar these gaps are the last few pixels between fitting on
     * his screen and having to push the row along. */
    gap: 6px;
  }

  .k-items__bar > * {
    flex: 0 0 auto;
  }
}