/* ===========================================================================
   INTERTOOL OPS (ERP) — base styles
   Brand carries over from the dealer portal: red #E02020, black #111111,
   Barlow / Barlow Condensed. Shared component classes keep the `it-` prefix so
   the two apps stay visually identical; ERP-specific components use `ops-`.
   Single stylesheet for now — split later only if it grows.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;800&family=Barlow+Condensed:wght@700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* --- carried over from portal.css (keep in sync) ----------------------- */
  --it-red: #E02020;
  --it-black: #111111;
  --it-gray-dark: #555555;
  --it-gray-med: #999999;
  --it-gray-light: #F8F8F8;
  --it-border: #E8E8E8;
  --it-bg: #F5F5F5;
  --it-white: #FFFFFF;
  --it-red-glow: rgba(224, 32, 32, 0.12);

  /* --- ops additions ----------------------------------------------------- */
  /* Monospace for location codes, short codes, SKUs, barcodes. */
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Status pill semantics (generic UI states — distinct from inventory state). */
  --ops-ok: #1B873F;
  --ops-warn: #B26A00;
  --ops-error: #C42B2B;
  --ops-neutral: #6B7280;

  /* Touch target floor for tablet use on the warehouse floor. */
  --ops-tap: 44px;

  /* -----------------------------------------------------------------------
     PLACEHOLDER SLOTS — inventory STATE colors (13 + consumed).
     Deferred to Milestone 1.2: pick these with the state-chip UI in front of
     us, not abstractly. Leave as TBD until then.
     ----------------------------------------------------------------------- */
  --state-sellable:                    /* TBD: pick when state chip UI lands */ ;
  --state-damaged:                     /* TBD */ ;
  --state-used:                        /* TBD */ ;
  --state-sample:                      /* TBD */ ;
  --state-internal_use:                /* TBD */ ;
  --state-missing_component:           /* TBD */ ;
  --state-inbound:                     /* TBD */ ;
  --state-in_transit:                  /* TBD */ ;
  --state-manufacturing:               /* TBD */ ;
  --state-reserved:                    /* TBD */ ;
  --state-returned_pending_inspection: /* TBD */ ;
  --state-discarded:                   /* TBD */ ;
  --state-consumed:                    /* TBD */ ;

  /* -----------------------------------------------------------------------
     PLACEHOLDER SLOTS — ZONE-type colors.
     Deferred to Milestone 1.2 alongside the location browser zone legend.
     ----------------------------------------------------------------------- */
  --zone-rack:        /* TBD */ ;
  --zone-packing:     /* TBD */ ;
  --zone-staging:     /* TBD */ ;
  --zone-receiving:   /* TBD */ ;
  --zone-returns:     /* TBD */ ;
  --zone-used_parts:  /* TBD */ ;
  --zone-consumables: /* TBD */ ;
  --zone-discard:     /* TBD */ ;
  --zone-office:      /* TBD */ ;
  --zone-dock:        /* TBD */ ;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--it-bg);
  color: var(--it-black);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .it-heading {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  margin: 0 0 0.4em;
  line-height: 1.05;
}

a { color: var(--it-red); text-decoration: none; }
a:hover { text-decoration: underline; }

.it-muted { color: var(--it-gray-dark); }
.it-center { text-align: center; }

/* --- top bar ------------------------------------------------------------- */
.it-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--it-black);
  padding: 14px 24px;
  transition: padding 0.2s ease;
}
.it-topbar.is-scrolled { padding: 9px 24px; }
.it-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.it-logo-block { display: flex; align-items: center; gap: 12px; }
.it-topbar img.it-logo { height: 38px; width: auto; display: block; }

/* OPS wordmark badge — the visible "this is the ERP, not the dealer portal" cue. */
.ops-badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--it-white);
  background: var(--it-red);
  padding: 3px 9px;
  border-radius: 5px;
  line-height: 1.2;
}

.it-topbar .it-nav { display: flex; align-items: center; gap: 18px; }
.it-topbar .it-nav a, .it-nav-link {
  color: var(--it-white);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.it-topbar .it-nav a:hover { color: var(--it-red); text-decoration: none; }
.it-nav-link.is-active { color: var(--it-red); }

/* identity cluster on the right of the topbar */
.it-nav-acct { display: flex; align-items: center; gap: 12px; }
.ops-greeting {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* --- hamburger (mobile/tablet) ------------------------------------------- */
.ops-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--ops-tap);
  height: var(--ops-tap);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.ops-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--it-white);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ops-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ops-hamburger.is-open span:nth-child(2) { opacity: 0; }
.ops-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- mobile full-screen overlay nav -------------------------------------- */
.ops-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--it-black);
  display: flex;
  flex-direction: column;
  padding: 80px 32px 32px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.ops-mobile-nav.is-open { transform: translateX(0); }
.ops-mobile-nav__close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: var(--ops-tap);
  height: var(--ops-tap);
  font-size: 32px;
  line-height: 1;
  background: transparent;
  border: none;
  color: var(--it-white);
  cursor: pointer;
}
.ops-mobile-nav .it-mnav-link {
  color: var(--it-white);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 26px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ops-mobile-nav .it-mnav-link.is-active { color: var(--it-red); }
body.ops-nav-open { overflow: hidden; }

/* --- layout -------------------------------------------------------------- */
.it-wrap { max-width: 1320px; margin: 0 auto; padding: 32px 24px; }
.it-card {
  background: var(--it-white);
  border: 1px solid var(--it-border);
  border-radius: 12px;
  padding: 28px;
}

/* --- buttons ------------------------------------------------------------- */
.it-btn {
  display: inline-block;
  font-family: 'Barlow', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  min-height: var(--ops-tap);
  padding: 12px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--it-black);
  color: var(--it-white);
  transition: background 0.2s ease, transform 0.2s ease;
}
.it-btn:hover { background: var(--it-red); text-decoration: none; }
.it-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.it-btn--ghost { background: transparent; color: var(--it-black); border: 1px solid var(--it-border); }
.it-btn--ghost:hover { background: var(--it-bg); color: var(--it-black); }
.it-btn--block { display: block; width: 100%; text-align: center; }

/* --- form fields --------------------------------------------------------- */
.it-field { margin-bottom: 16px; }
.it-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--it-gray-dark);
  margin-bottom: 6px;
}
.it-field input, .it-field select {
  width: 100%;
  min-height: var(--ops-tap);
  padding: 10px 12px;
  font-family: 'Barlow', sans-serif;
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  color: var(--it-black);
  background: var(--it-white);
  border: 1px solid var(--it-border);
  border-radius: 8px;
}
.it-field input:focus, .it-field select:focus {
  outline: none;
  border-color: var(--it-red);
  box-shadow: 0 0 0 3px var(--it-red-glow);
}

/* --- messages ------------------------------------------------------------ */
.it-msg { margin: 12px 0 0; font-size: 14px; font-weight: 600; }
.it-msg--error { color: var(--ops-error); }
.it-msg--ok { color: var(--ops-ok); }

/* ===========================================================================
   OPS-SPECIFIC COMPONENTS
   =========================================================================== */

/* Location codes / short codes / SKUs / barcodes — always monospace. */
.ops-loc-code {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--it-gray-light);
  border: 1px solid var(--it-border);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.92em;
  white-space: nowrap;
}

/* Home-page navigation tiles. */
.ops-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.ops-tile {
  display: block;
  background: var(--it-white);
  border: 1px solid var(--it-border);
  border-radius: 12px;
  padding: 22px;
  color: var(--it-black);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ops-tile:hover {
  text-decoration: none;
  border-color: var(--it-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(17,17,17,0.07);
}
.ops-tile__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 20px;
  margin: 0 0 6px;
}
.ops-tile__desc { font-size: 14px; color: var(--it-gray-dark); margin: 0; }
.ops-tile--disabled { opacity: 0.55; pointer-events: none; }
.ops-tile__soon {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ops-warn);
  margin-top: 10px;
}

/* Status pill — generic neutral/ok/warn/error chip. */
.ops-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--it-white);
  background: var(--ops-neutral);
}
.ops-pill--ok { background: var(--ops-ok); }
.ops-pill--warn { background: var(--ops-warn); }
.ops-pill--error { background: var(--ops-error); }
.ops-pill--role { background: var(--it-black); }

/* Inventory STATE chip — colors come from the placeholder slots above (1.2). */
.ops-statechip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--it-border);
  /* background: var(--state-<name>);  ← wired in Milestone 1.2 */
}

/* ZONE chip — colors come from the placeholder slots above (1.2). */
.ops-zonechip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--it-border);
  /* background: var(--zone-<type>);  ← wired in Milestone 1.2 */
}

/* Filter bar (search + selects). */
.ops-filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.ops-filters input, .ops-filters select {
  min-height: var(--ops-tap);
  padding: 10px 12px;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  color: var(--it-black);
  background: var(--it-white);
  border: 1px solid var(--it-border);
  border-radius: 8px;
}
.ops-filters input { flex: 1 1 240px; }
.ops-filters input:focus, .ops-filters select:focus {
  outline: none;
  border-color: var(--it-red);
  box-shadow: 0 0 0 3px var(--it-red-glow);
}

/* Chip group (allowed states, flags). */
.ops-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Definition list for detail pages. */
.ops-dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; }
.ops-dl dt {
  color: var(--it-gray-dark);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}
.ops-dl dd { margin: 0; }
@media (max-width: 560px) {
  .ops-dl { grid-template-columns: 1fr; gap: 3px 0; }
  .ops-dl dd { margin-bottom: 12px; }
}

/* Data table. */
.ops-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ops-table th, .ops-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--it-border);
}
.ops-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--it-gray-dark);
  font-weight: 700;
}
.ops-table tbody tr:hover { background: var(--it-gray-light); }
.ops-table tr.is-inactive td { color: var(--it-gray-med); }

/* Compact controls inside tables. */
.ops-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.ops-rolesel {
  min-height: 36px;
  padding: 6px 10px;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  color: var(--it-black);
  background: var(--it-white);
  border: 1px solid var(--it-border);
  border-radius: 6px;
}
.ops-rolesel:disabled { opacity: 0.6; cursor: not-allowed; }

/* Responsive form row (e.g. add-staff: name / email / role). */
.ops-form-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 1fr;
  gap: 14px;
}
@media (max-width: 680px) {
  .ops-form-row { grid-template-columns: 1fr; }
}

/* ===========================================================================
   AUTH GATE (auth-guard.js)
   Protected pages hide .ops-app until <body> gets `ops-ready`; the gate overlay
   covers the screen while checking, or shows a denied/error message.
   =========================================================================== */
body:not(.ops-ready) .ops-app { display: none; }
.ops-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--it-bg);
}
body.ops-ready .ops-gate { display: none; }
.ops-gate__box {
  background: var(--it-white);
  border: 1px solid var(--it-border);
  border-radius: 12px;
  padding: 36px 32px;
  max-width: 420px;
  text-align: center;
}
.ops-gate__title { margin: 14px 0 8px; font-size: 22px; }
.ops-gate__body { color: var(--it-gray-dark); font-size: 15px; margin: 0 0 18px; }
.ops-gate__spinner {
  width: 38px; height: 38px;
  margin: 0 auto;
  border: 3px solid var(--it-border);
  border-top-color: var(--it-red);
  border-radius: 50%;
  animation: ops-spin 0.8s linear infinite;
}
@keyframes ops-spin { to { transform: rotate(360deg); } }
.ops-gate__mark {
  width: 44px; height: 44px;
  margin: 0 auto;
  border-radius: 50%;
}
.ops-gate__mark--denied { background: var(--ops-error); }
.ops-gate__mark--error { background: var(--ops-warn); }
@media (prefers-reduced-motion: reduce) {
  .ops-gate__spinner { animation-duration: 2s; }
}

/* --- footer -------------------------------------------------------------- */
.ops-footer {
  border-top: 1px solid var(--it-border);
  padding: 22px 24px;
  text-align: center;
  color: var(--it-gray-med);
  font-size: 12px;
}

/* ===========================================================================
   LABEL PRINTING (6x4 LANDSCAPE thermal, QR of full code)
   One label per (building, face, bay, slot). Normal bays use an ASYMMETRIC grid
   so the three QRs never vertically align (prevents phone mis-scans): HIGH
   top-left, FLOOR bottom-left, MID centered on the RIGHT. Because each side
   stacks at most two QRs, all three fit at 1.2in on a 4in-tall label.
   Pass-through bays show a single HIGH row (QR left). Non-pallet locations show
   one centered QR. The QR encodes the full canonical code for phone scanning.
   One .ops-label = one 6in x 4in page.
   =========================================================================== */
#label-sheet { display: none; }

.ops-label {
  width: 6in;
  height: 4in;
  box-sizing: border-box;
  padding: 0.16in 0.26in;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #000;
  background: #fff;
  overflow: hidden;
}
.ops-label__header { display: flex; justify-content: space-between; align-items: baseline; gap: 10pt; }
.ops-label__sys {
  font-family: var(--font-mono);
  font-size: 9pt;
  letter-spacing: 2px;
  color: #9aa0a6;
  white-space: nowrap;
}
.ops-label__bayid {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13pt;
  letter-spacing: 0.5px;
  text-align: right;
}

/* Pass-through / single-row rack label: one centered row, QR on the left. */
.ops-label__rows { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ops-label__row { display: flex; align-items: center; gap: 0.18in; }

/* Normal bay: asymmetric 2-column grid (HIGH top-left, FLOOR bottom-left,
   MID centered on the right spanning both rows). */
.ops-label__rows--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.ops-label__cell { display: flex; align-items: center; gap: 0.15in; }
.ops-label__cell--high  { grid-column: 1; grid-row: 1; justify-content: flex-start; }
.ops-label__cell--floor { grid-column: 1; grid-row: 2; justify-content: flex-start; }
.ops-label__cell--mid   { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; align-self: center; }

/* QR holder — the generated <svg> fills it. */
.ops-qr { flex: none; }
.ops-qr svg { width: 100%; height: 100%; display: block; }
.ops-qr--bay    { width: 1.2in; height: 1.2in; }
.ops-qr--solo   { width: 1.5in; height: 1.5in; }
.ops-qr--single { width: 1.7in; height: 1.7in; }

.ops-label__rowtext { display: flex; flex-direction: column; }
.ops-label__rowtext--left  { align-items: flex-start; text-align: left; }
.ops-label__rowtext--right { align-items: flex-end; text-align: right; }
.ops-label__level {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 18pt;
  line-height: 1;
  letter-spacing: 1px;
}
.ops-label__code { font-family: var(--font-mono); font-weight: 700; font-size: 13pt; letter-spacing: 0.5px; }
.ops-label__short { font-family: var(--font-mono); font-weight: 500; font-size: 9pt; color: #9aa0a6; }
.ops-label__zone { font-style: italic; font-size: 10pt; color: #666; text-align: center; }

/* Single (non-pallet) label centers one QR on the landscape page. */
.ops-label--single .ops-label__single-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1in;
}

/* On-screen preview: a 6x4 label scaled to half size in a 3x2in frame. */
.ops-label-preview {
  width: 3in;
  height: 2in;
  border: 1px solid var(--it-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.ops-label-preview .ops-label { transform: scale(0.5); transform-origin: top left; }

@media print {
  @page { size: 6in 4in; margin: 0; }
  body { background: #fff; }
  .it-topbar, .ops-mobile-nav, .ops-footer, .ops-app, .ops-gate { display: none !important; }
  #label-sheet { display: block !important; }
  .ops-label { page-break-after: always; }
  .ops-label:last-child { page-break-after: auto; }
}

/* ===========================================================================
   RESPONSIVE — tablet & phone (warehouse floor uses tablets)
   =========================================================================== */
@media (max-width: 860px) {
  .it-topbar .it-nav, .it-nav-acct .ops-greeting { display: none; }
  .ops-hamburger { display: flex; }
}