* {
  box-sizing: border-box;
}

/* Any element toggled via .hidden in app.js must actually disappear — but a
   component rule that sets its own `display` (e.g. `.trash-btn { display:
   inline-flex }`) silently overrides the browser's built-in "hidden means
   display:none" default, since a page's own CSS always wins over that
   built-in rule. This keeps [hidden] winning no matter what other display
   value a button gets. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: -apple-system, system-ui, sans-serif;
  background: #14161a;
  color: #e8e8e8;
}

h1 {
  margin: 0;
  padding: 16px;
  font-size: 20px;
  background: #1a1d24;
  color: #f4f4f4;
  border-bottom: 3px solid #33e0c4;
}

footer {
  padding: 20px 16px 32px;
  text-align: center;
}

/* Lefty mode — a per-device preference (app.js, LEFTY_KEY) for holding the
   phone in your left hand. direction: rtl is the same mechanism browsers
   use for right-to-left languages; it re-lays-out every flex row here
   (category headings, item rows, the add-item row) start-to-end in the
   opposite direction with no JS/DOM changes needed, AS LONG AS spacing in
   those rows uses logical properties (margin-inline-end, not
   margin-right) rather than physical ones — see the notes on those rules.
   Scoped to #inventory only, not the whole page: the "Vanventory" title,
   the footer links, and the who's-this picker aren't part of what the
   owner asked to mirror. Item names/category names get text-align: left
   forced back — they're still English text, so only their *position*
   should flip, not which way the text itself reads. */
.lefty #inventory {
  direction: rtl;
}

.lefty .item-name,
.lefty .category-name {
  /* direction, not just text-align: a name that happens to start with a
     digit (e.g. "22-4, White — 100ft") gets its characters visually
     reordered by the browser's bidi algorithm under direction: rtl even
     though plain Latin letters don't — text-align alone doesn't stop that.
     Caught live: names starting with a letter looked fine, only the
     digit-first ones were scrambled, until this was added. */
  direction: ltr;
  text-align: left;
}

.lefty .item-name {
  /* item-name's own padding-inline-end (see the base rule above) now
     resolves against the direction: ltr just forced on this element, i.e.
     physical right — which under the mirror is the row's OUTER edge, not
     the gap toward the +/− buttons on its left. Set the real gap
     explicitly instead of trusting the logical property to keep flipping.
     .category-name doesn't need this — its spacing comes from h2's own
     `gap`, not its own padding, so it isn't affected the same way.
     Caught live as "the name text is crowding the buttons," not assumed
     safe because the base rule looked direction-agnostic on paper. */
  padding-inline-end: 0;
  padding-left: 12px;
}

/* Text you actually TYPE INTO must stay plain left-to-right regardless of
   the mirror — direction: rtl on a live text input doesn't just move it,
   it hands the browser's bidi algorithm control over character order,
   which visibly scrambles ordinary English text mixed with numbers/commas
   (e.g. "22-4, White" rendering as "White ,22-4"). Caught by testing edit
   mode live, not assumed safe from the read-only rows looking fine. */
.lefty .item-name-input,
.lefty .category-name-input,
.lefty .category-select,
.lefty .add-item-input {
  direction: ltr;
  text-align: left;
}

footer a,
footer .import-link {
  color: #8a8f98;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
  margin-right: 16px;
}

h2 {
  margin: 0;
  padding: 10px 16px;
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: #1a1d24;
  border-bottom: 2px solid var(--accent);
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.category-name {
  flex: 1;
}

.category-name-input {
  flex: 1;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: #14161a;
  color: #f4f4f4;
  font-size: 14px;
  font-weight: 700;
  /* h2's uppercase/letter-spacing is presentational only — without this
     override, the input inherits it too and shows what you TYPE in caps,
     which reads like the app silently changed your text. */
  text-transform: none;
  letter-spacing: normal;
}

.category-name-input:focus {
  outline: none;
}

.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #1c1f26;
}

.item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 18px 16px 18px 10px;
  min-height: 44px; /* comfortable phone tap target */
  border-bottom: 2px solid #363c47;
  font-size: 19px;
}

.item-name {
  flex: 1;
  /* A flex item's default minimum width is "as wide as its content," which
     is what let a long name drag the whole row wider than the screen
     instead of wrapping — this overrides that so it can actually shrink. */
  min-width: 0;
  overflow-wrap: break-word;
  /* Logical, not padding-right, so this gap survives lefty mode's
     direction: rtl on #inventory (see below) instead of landing on the
     wrong edge of the row. NOTE: this alone isn't sufficient — .item-name
     itself gets direction: ltr forced back on under .lefty (to stop digit-
     first names from visually scrambling, see that rule), which means
     inline-end resolves against ITS OWN forced-ltr direction, not the
     mirrored row's — so the .lefty override below sets the physical side
     explicitly rather than trusting inline-end here to keep flipping. */
  padding-inline-end: 12px;
  color: #f4f4f4;
}

.item-qty {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 21px;
  /* Fixed, not min-width — min-width let a double-digit count (e.g. 10)
     grow the box wider than a single digit does, which shifted the − and
     + buttons around it left/right depending on the number. A fixed width
     wide enough for two digits plus a little breathing room (so the
     second digit doesn't crowd the + button's border) means the box is
     the same size regardless of the number inside, so neither button ever
     moves. flex-shrink: 0 stops it from being squeezed back down either.
     2.2ch (not the original 1.5ch, not the first fix's 3ch) — just enough
     to fit two digits without crowding + on double digits, without
     pushing the buttons noticeably farther apart than the original
     spacing. */
  width: 2.2ch;
  flex-shrink: 0;
  text-align: center;
  color: #ffffff;
  background: none;
  border: none;
  padding: 0;
  touch-action: manipulation; /* tappable now — avoid iOS double-tap-to-zoom, see qty-btn */
}

.qty-btn {
  width: 44px;
  height: 44px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  touch-action: manipulation;
}

.qty-btn:active {
  background: var(--accent);
  color: #14161a;
}

.edit-btn,
.trash-btn {
  width: 29px;
  height: 29px;
  margin-inline-end: 7px; /* see .item-name's note on logical vs. physical */
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
}

.edit-btn svg,
.trash-btn svg {
  width: 18px;
  height: 18px;
}

.edit-btn {
  /* Deliberately neutral, not var(--accent) — every item row already has
     one of these, so an accent-colored pencil on every single line reads as
     clutter rather than a control. Grey lets it recede until you need it. */
  color: #6b7280;
}

.edit-btn:active {
  opacity: 0.6;
}

.trash-btn {
  color: #ef4444;
}

.trash-btn:active {
  background: rgba(239, 68, 68, 0.2);
}

.item-name-input {
  flex: 1;
  height: 36px;
  padding: 0 8px;
  margin-inline-end: 4px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: #14161a;
  color: #f4f4f4;
  font-size: 17px;
}

.item-name-input:focus {
  outline: none;
}

.confirm-btn {
  width: 36px;
  height: 36px;
  margin-inline-end: 10px; /* separates it from the up/down arrows next to it */
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  touch-action: manipulation;
}

.confirm-btn:active {
  background: var(--accent);
  color: #14161a;
}

.reorder-btn {
  width: 36px;
  height: 36px;
  border: 2px solid #6b7280;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  margin-inline-end: 4px; /* hairline between the up and down buttons — they had none */
  touch-action: manipulation;
}

.reorder-btn:active {
  background: #6b7280;
  color: #14161a;
}

.category-select {
  flex: 1 0 100%; /* forces it onto its own line within the wrapping row */
  height: 40px;
  margin-top: 10px;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: #14161a;
  color: #f4f4f4;
  font-size: 16px;
}

.category-select:focus {
  outline: none;
}

.add-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}

.add-item-input {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #3a3f4a;
  border-radius: 8px;
  background: #14161a;
  color: #e8e8e8;
  font-size: 16px;
}

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

.add-item-btn {
  height: 40px;
  padding: 0 14px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  touch-action: manipulation;
}

.add-item-btn:active {
  background: var(--accent);
  color: #14161a;
}

/* ADR-005 "who's this?" picker — no per-category --accent here, so it uses
   the same cyan as the h1 border. */
.who-heading {
  padding: 24px 16px 8px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #f4f4f4;
}

.user-list {
  list-style: none;
  margin: 0;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-btn {
  height: 48px;
  border: 2px solid #33e0c4;
  border-radius: 8px;
  background: transparent;
  color: #33e0c4;
  font-size: 16px;
  font-weight: 700;
  touch-action: manipulation;
}

.user-btn:active {
  background: #33e0c4;
  color: #14161a;
}

.add-user-row {
  display: flex;
  gap: 8px;
  padding: 16px;
}

.add-user-row input {
  flex: 1;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #3a3f4a;
  border-radius: 8px;
  background: #14161a;
  color: #e8e8e8;
  font-size: 16px;
}

.add-user-row input:focus {
  outline: none;
  border-color: #33e0c4;
}

.add-user-row button {
  height: 44px;
  padding: 0 16px;
  border: 2px solid #33e0c4;
  border-radius: 8px;
  background: transparent;
  color: #33e0c4;
  font-weight: 700;
  touch-action: manipulation;
}

.add-user-row button:active {
  background: #33e0c4;
  color: #14161a;
}