/* ==========================================================
   SKU Lookup - the whole look of the page (specs/001-house-look).
   Every value is taken as it is from
   ../warehouse-management/frontend/style.css, read on 2026-10-20;
   its :where(html[data-page=...]) wrappers are dropped, since this
   is a single page. The line each rule comes from is in
   specs/001-house-look/research.md (R1).
   ========================================================== */

@keyframes fadeIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
@keyframes spin {to{transform:rotate(360deg);}}

/* ---------- tokens and base (warehouse-management lines 12-123) ---------- */
/* Dark mode is neutral gray, YouTube's bg and surface (Mustafa, 2026-10-17);
   it was navy-purple (#0f0f1a / #1a1a2e). :root and [data-theme="dark"]
   carry the same values. */
:root {
  --bg: #0f0f0f;
  --surface: #212121;
  --surface2: #181818;
  --border: rgba(255,255,255,0.12);
  --accent: #D5A999;
  --accent-hover: #CC9783;
  --accent-active: #BE8974;
  --accent-light: #D7BFB6;
  --text: #f1f1f1;
  --text-muted: #aaaaaa;
  --text-placeholder: rgba(241,241,241,0.4);
  --text-disabled: rgba(241,241,241,0.3);
  --success: #4ade80;
  --error: #f87171;
  --warning: #fbbf24;
  --info: #c084fc;
  --processing: #60a5fa;
  --overlay: rgba(0,0,0,0.65);
  --disabled-bg: rgba(255,255,255,0.02);
  --disabled-border: rgba(255,255,255,0.06);
  --hover-bg: rgba(255,255,255,0.03);
  --radius: 12px;
  --radius-sm: 8px;
  --on-accent: #0f0f0f;
}
:root {
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease: cubic-bezier(0.4,0,0.2,1);
}
[data-theme="dark"] {
  --bg: #0f0f0f;
  --surface: #212121;
  --surface2: #181818;
  --border: rgba(255,255,255,0.12);
  --accent: #D5A999;
  --accent-hover: #CC9783;
  --accent-active: #BE8974;
  --accent-light: #D7BFB6;
  --text: #f1f1f1;
  --text-muted: #aaaaaa;
  --text-placeholder: rgba(241,241,241,0.4);
  --text-disabled: rgba(241,241,241,0.3);
  --success: #4ade80;
  --error: #f87171;
  --warning: #fbbf24;
  --info: #c084fc;
  --processing: #60a5fa;
  --overlay: rgba(0,0,0,0.65);
  --disabled-bg: rgba(255,255,255,0.02);
  --disabled-border: rgba(255,255,255,0.06);
  --hover-bg: rgba(255,255,255,0.03);
  --radius: 12px;
  --radius-sm: 8px;
  --on-accent: #0f0f0f;
}
[data-theme="light"] {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface2: #F5F3EF;
  --border: #E8E5DF;
  --accent: #B16043;
  --accent-hover: #9B543A;
  --accent-active: #854832;
  --accent-light: #C2795F;
  --text: #1A1A1A;
  --text-muted: #6B6560;
  --text-placeholder: rgba(26,26,26,0.35);
  --text-disabled: rgba(26,26,26,0.3);
  --success: #15803D;
  --error: #DC2626;
  --warning: #B45309;
  --info: #7C3AED;
  --processing: #2563EB;
  --overlay: rgba(0,0,0,0.4);
  --disabled-bg: rgba(0,0,0,0.02);
  --disabled-border: rgba(0,0,0,0.06);
  --hover-bg: rgba(0,0,0,0.02);
  --radius: 12px;
  --radius-sm: 8px;
  --on-accent: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  -webkit-tap-highlight-color: transparent;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
[data-theme="dark"] body {
  background-image: radial-gradient(ellipse at 20% 20%, rgba(192,132,252,0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(213,169,153,0.07) 0%, transparent 50%);
  background-attachment: fixed;
}
svg {
  display: block;
}

/* ---------- scrollbars (131-164) ---------- */
::-webkit-scrollbar, *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track, *::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid var(--surface);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  border-color: var(--surface);
  background-clip: padding-box;
}

/* ---------- page frame: Version 1 of five (Mustafa, 2026-10-20) ---------- */
/* The shared body (140), with this page's own padding and centring. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans',sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  transition: background var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
  padding: 32px 16px 60px;
  display: flex;
  justify-content: center;
}
.container {
  width: 100%;
  max-width: 520px;
}
.header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  animation: fadeIn var(--duration-slow) var(--ease) both;
}
/* The logo is the favicon mark, the one the browser tab shows (Mustafa,
   2026-10-20): drawn as a shape, so it does not wait on a font. Its rounded
   square is in the SVG itself. */
.logo-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: block;
}
.header-text {
  flex: 1;
  min-width: 0;
}
/* .header-text h1 (477) and p (484) */
.header-text h1 {
  font-family: 'Playfair Display',serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  color: var(--text);
}
.header-text p {
  font-family: 'DM Sans',sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-top: 2px;
}
/* The card: the radius of the warehouse dialogs (544). */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.card-section {
  padding: 24px;
}
.card-section + .card-section {
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .card-section {
    padding: 16px;
  }
}

/* ---------- theme button: side menu .sm-theme-btn (353-393) ---------- */
.sm-theme-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-base) ease, background var(--duration-base) ease;
}
.sm-theme-btn:hover {
  color: var(--text);
  background: var(--hover-bg);
}
.sm-theme-btn svg {
  width: 16px;
  height: 16px;
}
/* The icon names the theme that is on. */
.sm-theme-btn .tt-sun {
  display: none;
}
[data-theme="light"] .sm-theme-btn .tt-sun {
  display: block;
}
[data-theme="light"] .sm-theme-btn .tt-moon {
  display: none;
}
/* On a phone, the size the drawer gives it (386). */
@media (max-width: 640px) {
  .sm-theme-btn {
    width: 44px;
    height: 44px;
  }
  .sm-theme-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* ---------- section label: Transfer (2947) and its line (500) ---------- */
.section-label {
  font-family: 'DM Sans',sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---------- the SKU field: Settings .field-label (4107), .field-input (4119) ---------- */
.field-label {
  font-family: 'DM Sans',sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 7px;
  display: block;
}
.field-input {
  width: 100%;
  /* --surface2, not the model's --surface: the field sits on the card, which
     is --surface, as in the frame preview Mustafa chose. */
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'DM Sans',sans-serif;
  font-size: 14px;
  /* The model has 12px 14px; the left side makes room for the search icon. */
  padding: 12px 14px 12px 34px;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-base) ease;
}
.field-input:focus {
  border-color: var(--accent);
}
.field-input::placeholder {
  color: var(--text-placeholder);
}
/* Dashboard .fb-search-icon (1982) */
.search-wrap {
  position: relative;
}
.fb-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  pointer-events: none;
  color: var(--text-muted);
}
.fb-search-icon svg {
  width: 16px;
  height: 16px;
}

/* ---------- suggestion list: Settings .combo-list (4929-4975) ---------- */
/* Settings hangs its list on <body> because a dialog would clip it. Nothing
   clips it here, so it sits under the field. */
.combo {
  position: relative;
}
.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  z-index: 1000;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}
.combo-list.open {
  display: block;
}
.combo-opt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.combo-opt:hover,
.combo-opt.active {
  background: var(--surface2);
}
.combo-empty {
  padding: 10px;
  font-size: 13px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
/* While the SKU list loads: the Dashboard spinner, at the size of the text. */
.combo-loading {
  display: flex;
  align-items: center;
  gap: 8px;
}
.combo-loading .spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
  flex-shrink: 0;
}

/* ---------- search button: Transfer .create-btn (3322, 1709, 1727, 1730, 1757) ---------- */
.create-btn {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-family: 'DM Sans',sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
  transition: background var(--duration-base) ease, opacity var(--duration-base) ease;
  width: 100%;
  margin-top: 14px;
}
.create-btn:hover {
  background: var(--accent-hover);
}
.create-btn:active {
  background: var(--accent-active);
}
.create-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---------- results ---------- */
.results-section {
  display: none;
}
.results-section.visible {
  display: block;
  animation: fadeIn var(--duration-slow) var(--ease) both;
}
.loading-state {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  font-size: 13px;
  color: var(--text-muted);
}
.loading-state.visible {
  display: flex;
}
/* Dashboard .spinner (2607) */
.spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
/* The result line: Version 1 of five (Mustafa, 2026-10-20). A box in the
   tints of the Dashboard .status-pill states (3669, 3674), with an icon. */
.result-status {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-wrap: anywhere;
}
.result-status svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.result-status.success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
}
.result-status.error {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--error) 20%, transparent);
}
/* One branch: Scanner .tp-chip (1062) and .tp-count (1083). Here a <div>,
   since it does nothing on click; it still sets its own colour. */
.rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tp-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* --surface2 on the card, as in the chosen frame preview. */
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.tp-name {
  font-family: 'DM Sans',sans-serif;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tp-count {
  font-family: 'DM Sans',sans-serif;
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 20px;
  color: var(--text-muted);
  background: var(--disabled-bg);
  border: 1px solid var(--disabled-border);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---------- nearby sizes: Version 1 of five (Mustafa, 2026-10-20, specs/002) ---------- */
/* The 001 card. Under the main card on a narrow screen; beside it from 1180px
   (520 + 2 x (16 + 280) + room), placed from the main card so it does not move. */
.cards {
  position: relative;
}
.nearby {
  display: none;
  margin-top: 14px;
  padding: 20px;
  animation: fadeIn var(--duration-slow) var(--ease) both;
}
.nearby.visible {
  display: block;
}
@media (min-width: 1180px) {
  .nearby {
    position: absolute;
    top: 0;
    left: calc(100% + 16px);
    width: 280px;
    margin-top: 0;
  }
}
.nearby .tp-chip {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 14px 16px;
  transition: border-color var(--duration-fast) ease;
}
.nearby .tp-chip:hover {
  border-color: var(--accent-hover);
}
/* The size shown now: Scanner .tp-chip:active (1074). */
.nearby .tp-chip.current {
  border-color: var(--accent);
}
.nearby .tp-name {
  flex: 1;
}
/* The total sits small in the top corner, so the SKU line below the size
   gets the chip's whole width (Mustafa, 2026-10-20). */
.nearby .tp-chip {
  position: relative;
}
.nearby .tp-count,
.nearby .spinner {
  position: absolute;
  top: 8px;
  right: 10px;
}
.nearby .tp-count {
  font-size: 9px;
  padding: 2px 7px;
}
.tp-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A total above 0: the success tint of the result line. */
.tp-count.ok {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 20%, transparent);
}
.nearby .spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
  flex-shrink: 0;
}

/* ---------- Sign Out (specs/004) ---------- */
/* The header holds the theme button and Sign Out side by side. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}