/* EquipLabel: styles that exist only in this tool. Shared look: ../../shared/css/style.css */

/* Page shell: a one-screen cockpit on desktop; stacked and scrolling below 1024px. */

html, body { min-height: 100%; }

.app-shell { min-height: 100vh; min-height: 100dvh; }

@media (min-width: 1024px) {
  html, body { height: 100%; overflow: hidden; }

  .app-shell { height: 100vh; height: 100dvh; }
}

/* Gear list rows */

.gear-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 3.4rem 1.25rem;
  gap: 6px;
  align-items: center;
}

.gear-head { padding: 0 6px; font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; }

.gear-cell { display: block; min-width: 0; padding: 3px 6px; font-size: 10pt; }

.gear-cell input::placeholder { color: #94a3b8; font-weight: 400; }

.task-btn { color: #94a3b8; font-size: 11pt; line-height: 1; padding: 1px 3px; }
.task-btn:hover { color: #4f46e5; }

.nudge-input { width: 3.4rem; font-size: 9pt; }

/* Inventory CSV preview */

.csv-wrap { overflow-x: auto; }

.csv-table { width: 100%; border-collapse: collapse; font-size: 9pt; color: #1e293b; }

.csv-table th {
  position: sticky; top: 0; text-align: left; padding: 3px 8px; white-space: nowrap;
  font-size: 8.5pt; font-weight: 700; color: #4338ca; background: #eef2ff; border-bottom: 1px solid #c7d2fe;
}

.csv-table td { padding: 3px 8px; white-space: nowrap; border-bottom: 1px solid #f1f5f9; }

/* Sheet preview: the real 8.5 x 11 in sheet, shrunk by features/labels.js to fit the box. */

.sheet-frame { position: relative; width: 100%; overflow: hidden; }

.sheet-frame .sheet {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25), 0 8px 24px -10px rgba(15, 23, 42, 0.35);
}

/* Print Labels puts the sheets in #printArea; on paper nothing else shows. */

#printArea { display: none; }

@media print {
  html, body {
    height: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important;
    display: block !important; background: #fff !important;
  }

  body > *:not(#printArea) { display: none !important; }

  #printArea { display: block; }
}

/* Label sheets. Used on screen, on paper and in the downloaded Labels HTML,
   which carries only the part between the two markers below. All sizes are
   fixed inches or points, so nothing scales and nothing can spill out. */

/* @labels-start */
@page { size: letter; margin: 0; }

.sheet {
  position: relative; box-sizing: border-box; width: 8.5in; height: 11in; overflow: hidden;
  background: #fff; color: #000; font-family: Arial, Helvetica, sans-serif;
  break-after: page; page-break-after: always;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.sheet:last-child { break-after: auto; page-break-after: auto; }

.lbl { position: absolute; box-sizing: border-box; display: flex; overflow: hidden; line-height: 1.15; break-inside: avoid; page-break-inside: avoid; }

.lbl-body { box-sizing: border-box; min-width: 0; min-height: 0; overflow: hidden; }

.lbl-id { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lbl-qr svg { display: block; width: 100%; height: 100%; }

.lbl-txt { min-width: 0; }

.lbl-txt > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.lbl-item { white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: 700; }

/* Avery 5160 / 94200: 2.625 x 1 in, QR on the left, text on the right. */

.lbl-row .lbl-body {
  display: grid; width: 100%; padding: 0.08in 0.1in; column-gap: 0.08in;
  grid-template-columns: 0.78in minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
}

.lbl-row .lbl-qr { grid-column: 1; grid-row: 1 / 3; width: 0.78in; height: 0.78in; align-self: center; }

.lbl-row .lbl-id { grid-column: 2; grid-row: 1; font-size: 11pt; }

.lbl-row .lbl-txt { grid-column: 2; grid-row: 2; }

.lbl-row .lbl-item { font-size: 8pt; }

.lbl-row .lbl-owner, .lbl-row .lbl-call { font-size: 7pt; }

/* Avery 22806 square, and each half of the cable wrap: 2 x 2 in, stacked and centred. */

.lbl-square .lbl-body, .lbl-wrap .lbl-body {
  display: flex; flex-direction: column; align-items: center; text-align: center; width: 2in; height: 2in; padding: 0.08in 0.1in;
}

.lbl-square .lbl-id, .lbl-wrap .lbl-id { max-width: 100%; font-size: 14pt; margin-bottom: 0.03in; }

.lbl-square .lbl-qr, .lbl-wrap .lbl-qr { width: 0.95in; height: 0.95in; flex: none; }

.lbl-square .lbl-txt, .lbl-wrap .lbl-txt { width: 100%; margin-top: 0.03in; }

.lbl-square .lbl-item, .lbl-wrap .lbl-item { font-size: 8.5pt; }

.lbl-square .lbl-owner, .lbl-square .lbl-call, .lbl-wrap .lbl-owner, .lbl-wrap .lbl-call { font-size: 8pt; }

/* Cable wrap: two mirrored halves around a dashed fold line. */

.lbl-wrap .lbl-body + .lbl-body { border-left: 1px dashed #888; }

/* The downloaded Labels HTML page. */

.labels-doc { margin: 0; padding: 16px 0; background: #e2e8f0; }

.labels-doc .sheet { margin: 0 auto 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); }

@media print {
  .labels-doc { padding: 0; background: #fff; }

  .labels-doc .sheet { margin: 0; box-shadow: none; }
}
/* @labels-end */