/* Inventory brand layer: a little of the TechnoGames identity on top of the shared tokens.
   tokens.css and layout.css stay identical across apps (ADR-006); this file only overrides tokens
   and restyles the header. The body stays light and dense: this is a tool used all day, in the
   shop, on phones, in bright light. The dark header with the yellow line and the "Inventario" tag
   tell you at a glance that this is the private app, not the public site. */

@font-face { font-family: "Rajdhani"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/rajdhani-latin-700-normal.woff2") format("woff2"); }

:root {
  --brand-yellow: #ffcf25;
  --brand-yellow-soft: #fff4cc;
  --brand-charcoal: #2f2d2d;
  --brand-ink: #131417;
  --font-display: "Rajdhani", "Arial Narrow", system-ui, sans-serif;

  /* Charcoal takes the place of the old indigo everywhere the app used "primary": buttons,
     selected chips and totals (all with white text, still AA), links and the "today" outline. */
  --color-primary: var(--brand-charcoal);
  --color-primary-hover: #1b1a1a;
  --color-primary-soft: var(--brand-yellow-soft);
  --color-bg: #f5f4f0;
  --color-border: #e3e0d8;
  --color-border-strong: #c8c4b9;
  --color-text: #232122;
  --color-text-muted: #5d5a5b;
}

:focus-visible { outline-color: var(--brand-charcoal); }
a { color: #7a5800; }  /* plain links (buttons, tabs and tiles set their own colour) */
a:hover { color: var(--brand-charcoal); }

/* --- Header: dark, logo + "Inventario", yellow line underneath ------------------------------- */
.site-header { background: var(--brand-ink); border-bottom: 0; box-shadow: 0 3px 0 var(--brand-yellow); }
.site-header__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: #fff; text-decoration: none; }
.site-header__logo { display: block; width: auto; height: 2rem; }
.site-header__tag { padding: 0 0.5rem; font: 700 0.78rem/1.35rem var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-ink); background: var(--brand-yellow); border-radius: 4px; }
.site-header__nav a { color: #b5b7c0; }
.site-header__nav a:hover { color: #fff; }
.site-header__nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--brand-yellow); }
.site-header__user, .site-header__user a { color: #d6d8e0; }
.site-header__user a:hover { color: #fff; }
.site-header .button--ghost { color: #fff; background: transparent; border-color: #565a63; }
.site-header .button--ghost:hover { background: #292b31; }

/* --- Titles ---------------------------------------------------------------------------------- */
.page-header__title { font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; letter-spacing: 0.015em; }
.tabs a[aria-current="page"] { color: var(--color-text); border-bottom-color: var(--brand-yellow); }
.table tbody tr:hover { background: var(--brand-yellow-soft); }
.ticket:target .ticket__head th { box-shadow: inset 4px 0 0 var(--brand-yellow); background: var(--brand-yellow-soft); }

/* --- No footer (private app): keep the phone's bottom bar from covering the last row ----------- */
@media (max-width: 63.99rem) {
  body:has(.pos__bar:not([hidden])) .site-main { padding-bottom: 5.5rem; }
}

/* --- Phones: header stays on two rows (logo + tag, then the longer menu) --------------------- */
@media (max-width: 47.99rem) {
  .site-header__logo { height: 1.85rem; }
  .site-header__tag { font-size: 0.72rem; }
}