/* Component-specific styles. */

/* Toasts */
/* Above the camera overlay (z 70): scan feedback must stay visible. */
.toast-region {
  position: fixed;
  bottom: calc(64px + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(92vw, 26rem);
  /* The region itself should let clicks pass through to the content below. */
  pointer-events: none;
}

.toast-region .toast {
  pointer-events: auto;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-2);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-2);
}

.toast.toast-error {
  background: var(--color-danger);
  color: var(--color-danger-contrast);
}

.toast button {
  font: inherit;
  font-weight: 700;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  min-height: var(--tap-target);
}

/* Modal dialog */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: var(--space-4);
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  width: min(100%, 28rem);
  max-height: 85dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-5);
  /* Long, spaceless text (codes, URLs) must not stretch the modal. */
  overflow-wrap: anywhere;
}

/* The dialog is given programmatic focus on open (for Escape/Tab); don't
   show a focus ring around it — the content/buttons show their own focus. */
.modal:focus {
  outline: none;
}

/* Media in a modal (e.g. the QR SVG and full-size photo) scales with the
   modal width instead of breaking out of it. */
.modal img,
.modal svg {
  max-width: 100%;
  height: auto;
}

.modal h2 {
  margin-top: 0;
}

/* Action buttons stay pinned at the bottom while the modal content scrolls
   (same principle as .action-bar at the page level). */
.modal .btn-row {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  margin-inline: calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5);
}

/* Item cards */
.item-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

.item-card .thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-1);
  object-fit: cover;
  background: var(--color-surface-alt);
}

.item-card .thumb-placeholder {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-1);
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.item-card .item-code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  color: var(--color-primary);
}

.item-card .item-note {
  margin: 2px 0;
}

.item-card .item-path {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Location tree */
.loc-tree ul {
  list-style: none;
  margin: 0;
  padding-left: var(--space-5);
}

.loc-tree > ul {
  padding-left: 0;
}

.loc-node {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-1) 0;
}

.loc-node .loc-toggle {
  background: none;
  border: none;
  cursor: pointer;
  width: var(--tap-target);
  height: var(--tap-target);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.loc-node .loc-name {
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
}

.loc-node .loc-count {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.loc-node .loc-thumb {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-border);
}

/* Photo input */
.photo-preview-wrap {
  position: relative;
  margin-bottom: var(--space-2);
}

.photo-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

.photo-edit {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}

.photo-preview {
  width: 100%;
  max-height: 40dvh;
  object-fit: contain;
  border-radius: var(--radius-2);
  background: var(--color-surface-alt);
  margin-bottom: var(--space-2);
}

.photo-full {
  width: 100%;
  border-radius: var(--radius-2);
}

/* In-app camera */
.camera-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 70;
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-shutter {
  position: absolute;
  bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 5px solid rgb(255 255 255 / 0.55);
  background: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-2);
}

.camera-shutter:active {
  transform: translateX(-50%) scale(0.92);
}

/* Photo editor (crop + rotate) */
.photo-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: rgb(0 0 0 / 0.92);
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  gap: var(--space-3);
}

.photo-editor-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.photo-editor-imgwrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 70dvh;
  line-height: 0;
  /* Confine the selection's dimming shadow to the image, not the whole
     screen (keeps the toolbar bright). */
  overflow: hidden;
  /* Chequerboard so transparency (after "remove background") is visible. */
  background: repeating-conic-gradient(#bbb 0% 25%, #eee 0% 50%) 0 0 / 20px 20px;
}

.photo-editor-img {
  display: block;
  max-width: 100%;
  max-height: 70dvh;
  user-select: none;
  -webkit-user-select: none;
}

.photo-editor-sel {
  position: absolute;
  border: 2px dashed #fff;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.45);
  pointer-events: none;
}

/* Transparent drag surface on top of the image; catches the crop gesture. */
.photo-editor-surface {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: crosshair;
}

.photo-editor-hint {
  color: rgb(255 255 255 / 0.8);
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}

.photo-editor-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* Scan overlay */
.scan-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 70vh, 320px);
  aspect-ratio: 1;
  border: 3px solid rgb(255 255 255 / 0.85);
  border-radius: var(--radius-2);
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.35);
}

.scan-hint {
  position: absolute;
  bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}

/* QR display in the modal */
.qr-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.qr-display svg {
  width: min(70vw, 320px);
  height: auto;
  background: #fff;
  padding: var(--space-2);
  border-radius: var(--radius-1);
}

.camera-close {
  position: absolute;
  top: max(var(--space-3), env(safe-area-inset-top, 0px));
  right: var(--space-3);
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  border-color: transparent;
}

/* Voice input */
.note-with-voice {
  position: relative;
}

.voice-btn {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.voice-btn.recording {
  background: var(--color-danger);
  color: var(--color-danger-contrast);
  border-color: var(--color-danger);
}

.voice-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Code preview */
.code-preview {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--color-surface-alt);
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-3);
  display: inline-block;
}

/* Filter bar */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

@media (min-width: 600px) {
  .filter-bar {
    flex-direction: row;
  }

  .filter-bar > * {
    flex: 1;
  }
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

/* Built-in manual (rendered markdown). */
.prose {
  max-width: 46rem;
}

.prose h1 {
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}

.prose h2 {
  font-size: 1.2rem;
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.prose h3 {
  font-size: 1.05rem;
  margin: var(--space-4) 0 var(--space-2);
}

.prose code {
  background: var(--color-surface-alt);
  border-radius: 4px;
  padding: 0 0.3em;
  font-size: 0.9em;
}

.prose pre {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: var(--space-3);
  overflow-x: auto;
}

.prose pre code {
  background: none;
  padding: 0;
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-3) 0;
}

.prose th,
.prose td {
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-2);
  text-align: left;
}

.prose li {
  margin-bottom: var(--space-1);
}

.prose blockquote {
  border-left: 3px solid var(--color-border);
  margin: var(--space-3) 0;
  padding-left: var(--space-3);
  color: var(--color-text-muted);
}

/* Detail view */
.detail-header-actions {
  display: flex;
  gap: var(--space-2);
  flex-basis: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.detail-desc {
  font-size: 1.05rem;
  margin: 0 0 var(--space-2);
}

/* Row with info on the left and the corresponding action(s) on the right. */
.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.detail-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.detail-row-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.detail-row-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
}

.detail-list dt {
  font-weight: 600;
  color: var(--color-text-muted);
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Item history: rows stacked (not in the detail grid), with the
 * timestamp above the changes and a subtle divider per row. */
.history-list {
  display: block;
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
}

.history-list li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.history-list li:last-child {
  border-bottom: none;
}

.history-list li > span {
  display: block;
  margin-bottom: var(--space-1);
}

.history-list li > div {
  overflow-wrap: anywhere;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li + li::before {
  content: "›";
  margin: 0 var(--space-1);
  color: var(--color-text-muted);
}

/* Bulk mode counter */
.bulk-counter {
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--color-primary-soft);
  color: var(--color-text);
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

/* Status */
.status-badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-1);
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  font-size: 0.78rem;
  font-weight: 600;
}

.status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
}

.status-filter legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0 var(--space-1);
}

.status-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap-target);
}

.status-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}

/* Feature toggle: label on its own line, with the hint neatly below
   (indented to line up under the label text). */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.feature-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  cursor: pointer;
  font-weight: 500;
}

.feature-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}

.feature-hint {
  margin: 0;
  padding-left: calc(20px + var(--space-2));
}

/* Records (typed records on an item, e.g. maintenance). */
.record-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.record-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.record-cells {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.record-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.record-form .form-field {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 10rem;
}

.record-form .form-field input:not([type="file"]),
.record-form .form-field select {
  width: 100%;
  box-sizing: border-box;
}

/* Collapsible block (<details>/<summary>) — no JS. */
.collapsible {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  margin-top: var(--space-3);
}

.collapsible > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
}

.collapsible > summary::-webkit-details-marker {
  display: none;
}

.collapsible > summary::before {
  content: "\25B8";
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.collapsible[open] > summary::before {
  transform: rotate(90deg);
}

.collapsible-body {
  padding: 0 var(--space-3) var(--space-3);
}

/* Neat file-picker button: hide the native input, style the label. */
.file-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
}

.file-btn input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.file-hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-left: var(--space-1);
}

/* Chosen-file feedback next to a .file-btn (documents + maintenance). */
.chosen-file {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  word-break: break-all;
}

.record-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.record-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.record-media:empty {
  display: none;
}

.record-thumb {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-border);
}

.record-doc {
  font-size: 0.85rem;
  padding: var(--space-1) var(--space-2);
}

.record-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.record-editing {
  display: block;
}

.record-edit-media {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.status-manage {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.status-manage li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding: var(--space-1) 0;
}

.status-manage input {
  max-width: 16rem;
}

/* Attribute editor */
.attr-editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-1);
  padding: var(--space-3);
  margin: 0 0 var(--space-4);
}

.attr-editor legend {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0 var(--space-1);
}

.attr-row-input {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.attr-row-input input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: var(--color-primary);
}

/* Warning box */
.warning-box {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-radius: var(--radius-1);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

/* Table preview for CSV/Excel import (ROADMAP.md v1.5) */
.table-scroll {
  overflow-x: auto;
  margin: var(--space-3) 0;
}

.preview-table {
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 100%;
}

.preview-table th,
.preview-table td {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-2);
  text-align: left;
  white-space: nowrap;
}

/* Overview / statistics (ROADMAP.md v2.1) */
.stats-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.stats-row:last-child {
  border-bottom: none;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-primary);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
}

/* OCR panel in the scanner (ROADMAP.md v1.3, text recognition) */
.ocr-panel {
  position: absolute;
  bottom: calc(max(var(--space-6), env(safe-area-inset-bottom, 0px)) + 2.4rem);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
}

.ocr-panel .scan-hint {
  position: static;
}

.ocr-panel .btn-row {
  justify-content: center;
  flex-wrap: wrap;
}

.ocr-panel .muted {
  color: rgb(255 255 255 / 0.75);
}

/* Photo gallery (multiple photos per item) */
.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.gallery-thumb {
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius-1);
  padding: 0;
  cursor: pointer;
}

.gallery-thumb.active {
  border-color: var(--color-primary);
}

.gallery-thumb img,
.gallery-thumb-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-1);
  display: block;
}

.gallery-manage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

/* Tag chips */
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font-size: 0.9rem;
}

.tag-chip button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 0 var(--space-1);
}

/* Ad preview (marketplace listing templates) */
.ad-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: inherit;
  background: var(--color-surface-alt);
  border-radius: var(--radius-1);
  padding: var(--space-3);
  max-height: 40dvh;
  overflow-y: auto;
}

/* Manual code entry in the scanner */
.manual-code input {
  max-width: 12rem;
  text-transform: uppercase;
}

/* Extra-photo thumbnail on the entry form (previously inline style;
   inline isn't allowed under style-src 'self'). */
.extra-photo-thumb {
  height: 3rem;
  border-radius: 4px;
}

/* Photo preview in the product-info dialog (previously inline style). */
.lookup-photo-preview {
  max-width: 8rem;
  max-height: 8rem;
}

/* Reminders section on item/location detail */
.reminders-section {
  margin-top: var(--space-5);
}
.reminder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.reminder-add {
  margin-top: var(--space-3);
}

/* Attention counter on the home screen: eye-catching (amber) and with room below. */
.attention-badge {
  background: var(--color-attention);
  color: var(--color-attention-contrast);
  border-color: var(--color-attention);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-1);
}
.attention-badge:hover {
  filter: brightness(0.95);
}