/* URS Technologies — corporate application
   Shared stylesheet. Bump ASSET_VERSION in core.js when this changes. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
  /* Surfaces — anodized aluminium, not paper */
  --surface:      #EEF0F1;
  --panel:        #FFFFFF;
  --panel-sunk:   #F6F7F8;
  --hairline:     #D3D8DC;
  --hairline-firm:#B4BBC1;

  /* Ink */
  --ink:          #14171A;
  --ink-soft:     #4A525A;
  --ink-faint:    #7C858D;

  /* The one accent: tripod-collar orange. Focus and mark only. */
  --accent:       #E4571B;

  /* Tally — state, never decoration */
  --tally-available:   #17773F;
  --tally-out:         #C4141F;
  --tally-reserved:    #A96700;
  --tally-maintenance: #4E5B8C;
  --tally-dead:        #5C6469;

  --radius: 3px;
  --pad: 1.25rem;

  --font-ui:   'Archivo', system-ui, -apple-system, sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

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

/* ---------------------------------------------------------- chrome */

.masthead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem var(--pad);
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mark {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.mark::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.5rem;
  background: var(--accent);
  vertical-align: 1px;
}

.masthead nav {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.masthead nav a {
  color: #C8CDD2;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius);
}
.masthead nav a:hover,
.masthead nav a[aria-current='page'] { color: #fff; background: #2B3138; }

.whoami {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--pad);
}

/* ------------------------------------------------------ scan field */

.scanbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: var(--pad);
}
.scanbar input {
  flex: 1;
  font-family: var(--font-data);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  min-width: 0;
}
.scanbar input::placeholder {
  color: var(--ink-faint);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ---------------------------------------- the tally band (signature) */

.tally {
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.5rem var(--pad) 1.35rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.tally[data-state='available']   { background: var(--tally-available); }
.tally[data-state='out']         { background: var(--tally-out); }
.tally[data-state='reserved']    { background: var(--tally-reserved); }
.tally[data-state='maintenance'] { background: var(--tally-maintenance); }
.tally[data-state='retired'],
.tally[data-state='lost']        { background: var(--tally-dead); }

.tally-state {
  font-size: clamp(2.25rem, 11vw, 3.5rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.tally-qualifier {
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0.45rem 0 0;
}

/* Only live custody pulses. Everything else holds still. */
.tally[data-state='out']::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: rgba(255,255,255,0.9);
  animation: tally-pulse 2.4s ease-in-out infinite;
}
@keyframes tally-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tally[data-state='out']::after { animation: none; opacity: 0.7; }
}

/* ------------------------------------------------------------ panel */

.panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--pad);
}
.tally + .panel {
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.asset-name {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  line-height: 1.2;
}
.asset-tag {
  font-family: var(--font-data);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0;
}
.asset-meta {
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin: 0.5rem 0 0;
  letter-spacing: 0.02em;
}

/* The five questions. These labels encode the custody model itself. */
.custody {
  margin: var(--pad) 0 0;
  border-top: 1px solid var(--hairline);
}
.custody div {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}
.custody dt {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.custody dd { margin: 0; font-size: 0.9375rem; }
.custody dd .sub {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.overdue { color: var(--tally-out); font-weight: 600; }

/* ---------------------------------------------------------- actions */

.actions {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--pad);
  flex-wrap: wrap;
}

button, .btn {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.secondary, .btn.secondary {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--hairline-firm);
}
button:disabled, .btn[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}
button:hover:not(:disabled) { background: #2B3138; }
button.secondary:hover:not(:disabled) { background: var(--panel-sunk); }

/* ------------------------------------------------- status messaging */

.notice {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--panel);
  font-size: 0.9375rem;
}
.notice[data-kind='error'] {
  border-color: var(--tally-out);
  color: var(--tally-out);
}
.notice[data-kind='ok'] { border-color: var(--tally-available); }

.empty {
  text-align: center;
  padding: 3rem var(--pad);
  color: var(--ink-soft);
}
.empty p { margin: 0.4rem 0; }
.empty .cue {
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hidden { display: none !important; }

/* ------------------------------------------------------------ forms */

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.field input {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}

.signin {
  max-width: 22rem;
  margin: 4rem auto;
  padding: 0 var(--pad);
}
.signin h1 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.signin p.lede {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
}

/* ====================================================================
   Catalogue — list, filters, and the CSV import.
   Added for app/assets.html and app/asset.html.
   ==================================================================== */

.wide { max-width: 66rem; }

.pagehead {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: var(--pad);
}
.pagehead h1 {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
}
.pagehead .count {
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pagehead .spacer { margin-left: auto; }

/* ---------------------------------------------------------- toolbar */

.toolbar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.toolbar input[type='search'] {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
.toolbar select {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  padding: 0.6rem 0.6rem;
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
.toolbar .toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding: 0 0.4rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------ table */

.listwrap {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow-x: auto;
}
table.list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
table.list th {
  text-align: left;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--hairline-firm);
  white-space: nowrap;
}
table.list td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: baseline;
}
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tbody tr:hover { background: var(--panel-sunk); }
table.list a { color: var(--ink); text-decoration: none; }
table.list a:hover { text-decoration: underline; }
.cell-tag {
  font-family: var(--font-data);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap;
}
.cell-num { font-family: var(--font-data); font-size: 0.8125rem; text-align: right; white-space: nowrap; }
.cell-sub { display: block; font-size: 0.8125rem; color: var(--ink-faint); }
.numeric { text-align: right; }

/* Small state pill. Same palette as the tally band, at label size. */
.chip {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius);
  white-space: nowrap;
  background: var(--tally-dead);
}
.chip[data-state='available']   { background: var(--tally-available); }
.chip[data-state='out']         { background: var(--tally-out); }
.chip[data-state='reserved']    { background: var(--tally-reserved); }
.chip[data-state='maintenance'] { background: var(--tally-maintenance); }

/* Unpriced gear cannot go on a signed agreement. Say so quietly but always. */
.flag-unpriced {
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tally-reserved);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0.1rem 0.35rem;
  white-space: nowrap;
}

/* ----------------------------------------------------------- import */

.slab {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: var(--pad);
}
.slab > h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}
.slab > p.lede {
  color: var(--ink-soft);
  font-size: 0.875rem;
  margin: 0 0 1rem;
}

.field textarea {
  width: 100%;
  font-family: var(--font-data);
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius);
  background: var(--panel-sunk);
  color: var(--ink);
  min-height: 9rem;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.field select,
.field input[type='date'],
.field input[type='number'] {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
.field .hint {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 1rem;
}

/* The diff. Nothing is written until Apply, and the counts say what for. */
.diffsummary {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.diffcount {
  border: 1px solid var(--hairline-firm);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  background: var(--panel);
  min-width: 5.5rem;
}
.diffcount b {
  display: block;
  font-family: var(--font-data);
  font-size: 1.375rem;
  line-height: 1.1;
}
.diffcount span {
  font-family: var(--font-data);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.diffcount[data-kind='new']       { border-left: 3px solid var(--tally-available); }
.diffcount[data-kind='changed']   { border-left: 3px solid var(--tally-reserved); }
.diffcount[data-kind='unchanged'] { border-left: 3px solid var(--hairline-firm); }
.diffcount[data-kind='problem']   { border-left: 3px solid var(--tally-out); }

.diffgroup { margin-bottom: 1.1rem; }
.diffgroup > h3 {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.4rem;
}
.diffgroup > p.note {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
}
.delta {
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--ink-soft);
  display: block;
}
.delta .was { color: var(--tally-out); text-decoration: line-through; }
.delta .now { color: var(--tally-available); }
.rowbad { color: var(--tally-out); }

.willcreate {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
}
.willcreate b { font-weight: 600; color: var(--ink); }

@media (max-width: 34rem) {
  .col-optional { display: none; }
}

/* ====================================================================
   Label sheets — app/labels.html.

   ALL sheet geometry lives in the one block below. To move to different
   stock, change these nine values and nothing else: the preview and the
   printed page are driven from the same numbers, so what is on screen is
   what comes out of the printer.

   Default is Avery 5160 / 8160 — 30 labels per US Letter sheet, 3 across
   and 10 down, no vertical gutter. Common alternatives:

     Avery 5163 (10 per sheet)  --label-w 4in    --label-h 2in
                                --cols 2  --rows 5
                                --margin-top 0.5in --margin-left 0.15625in
                                --gap-x 0.1875in  --gap-y 0

     Avery 5162 (14 per sheet)  --label-w 4in    --label-h 1.33in
                                --cols 2  --rows 7
                                --margin-top 0.83in --margin-left 0.15625in
                                --gap-x 0.1875in  --gap-y 0

   Always print one sheet on plain paper and hold it against the label
   stock before committing a run. Printer margins vary by a millimetre or
   two and that is enough to walk a column off the edge by row ten.
   ==================================================================== */

.sheet {
  --sheet-w: 8.5in;
  --sheet-h: 11in;
  --margin-top: 0.5in;
  --margin-left: 0.1875in;
  --label-w: 2.625in;
  --label-h: 1in;
  --gap-x: 0.125in;
  --gap-y: 0in;
  --cols: 3;
  --rows: 10;

  width: var(--sheet-w);
  min-height: var(--sheet-h);
  padding: var(--margin-top) 0 0 var(--margin-left);
  margin: 0 auto var(--pad);
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--label-w));
  grid-auto-rows: var(--label-h);
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  box-sizing: border-box;
}

.label {
  display: flex;
  align-items: center;
  gap: 0.09in;
  padding: 0.06in 0.1in;
  overflow: hidden;
  box-sizing: border-box;
}
.label svg { display: block; flex: none; }

.label-text { min-width: 0; }
.label-tag {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: 10.5pt;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: #000;
}
.label-name {
  font-family: var(--font-ui);
  font-size: 7pt;
  line-height: 1.2;
  color: #000;
  margin-top: 0.02in;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.label-org {
  font-family: var(--font-data);
  font-size: 5.5pt;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #444;
  margin-top: 0.02in;
}

/* An offset cell is a label already peeled off a part-used sheet. */
.label.spacer { visibility: hidden; }

/* Cut guides on screen only — they must never reach the paper. */
.sheet.guides .label { outline: 1px dashed var(--hairline-firm); outline-offset: -1px; }

.sheetwrap {
  overflow-x: auto;
  background: var(--panel-sunk);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--pad);
  margin-bottom: var(--pad);
}

/* ------------------------------------------------------ asset picker */

.picker {
  max-height: 22rem;
  overflow-y: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
}
.picker label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  font-size: 0.9375rem;
}
.picker label:last-child { border-bottom: 0; }
.picker label:hover { background: var(--panel-sunk); }
.picker input { margin: 0; flex: none; }
.picker .ptag {
  font-family: var(--font-data);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  flex: none;
  width: 6.5rem;
}
.picker .pname { min-width: 0; }
.picker .pmeta { color: var(--ink-faint); font-size: 0.8125rem; }

/* ------------------------------------------------------------ print */

@media print {
  @page { size: 8.5in 11in; margin: 0; }

  html, body { background: #fff; margin: 0; padding: 0; }
  .masthead, .toolbar, .pagehead, .slab, .notice, .sheetwrap > p,
  .actions, .printhide { display: none !important; }

  main, main.wide { max-width: none; margin: 0; padding: 0; }
  .sheetwrap {
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .sheet {
    border: 0;
    box-shadow: none;
    margin: 0;
    break-after: page;
    page-break-after: always;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
  .sheet.guides .label { outline: 0; }
}