:root{
  --navy: #2c313a;
  --navy-2: #23272e;
  --orange: #e8601c;
  --orange-dark: #c94f14;
  --panel: #d7d7d5;
  --panel-2: #c7c7c5;
  --ink: #23272e;
  --ink-soft: #5a5e64;
  --line: #b9b9b6;
  --ok: #2f8f4e;
  --err: #c93a3a;
  --info: #2f6fa8;
  --edit: #7c5cbf;
  --white: #f3f2ef;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--navy);
  color:var(--ink);
}

.app{
  display:grid;
  grid-template-columns:240px 1fr;
}

/* ---------- Sidebar ---------- */
.sidebar{
  background:var(--orange);
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100vh;
  overflow-y:auto;
  position:sticky;
  top:0;
}
/* On short screens, stop reserving space to push Settings to the
   bottom — let it sit in normal flow so nothing gets clipped. */
@media (max-height:640px){
  .nav-spacer{flex:none;height:6px;}
}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:26px;
}
.logo svg, .logo-mark{width:26px;height:26px;flex-shrink:0;}
.logo span{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-style:italic;
  font-size:24px;
  letter-spacing:.02em;
  color:var(--navy-2);
}
.logo-divider{
  font-weight:400;
  font-style:normal;
  font-size:22px;
  color:var(--line);
}
.nav-btn{
  background:var(--navy-2);
  color:var(--white);
  border:none;
  border-radius:3px;
  padding:13px 14px;
  text-align:left;
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s;
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-btn-label{flex:1;}
/* Same viewBox/stroke-width convention across every nav icon (line-art,
   currentColor) so they read as one consistent set despite covering very
   different subjects. Icon always comes first, label after -- same order
   for every button, including Search (it's a nav button, not a search
   input, so it doesn't get the trailing-icon treatment a real search
   field would). */
.nav-icon{width:17px;height:17px;flex-shrink:0;}
.nav-btn:hover{background:#31363f;}
.nav-btn.active{
  background:var(--navy);
  box-shadow:inset 3px 0 0 var(--white);
}
.nav-spacer{flex:1;}

/* ---------- Main ---------- */
main{
  background:var(--navy);
  padding:24px 28px 40px;
  display:flex;
  flex-direction:column;
  /* main is a grid item (.app's "1fr" column) -- grid items default to a
     minimum size equal to their content's intrinsic width, not 0. A wide
     room (e.g. 37 grid-columns = 2220px of fixed-width .grid-2d-content
     buried inside it) was silently forcing that minimum past the actual
     available space, stretching the whole page wider than the viewport
     and producing the horizontal scrollbar -- overflow:hidden on the map
     containers alone can't fix this, since the oversizing happens one
     layout level up, before any of their own clipping ever applies. */
  min-width:0;
}
.page-header{margin-bottom:16px;}
.page-title{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:26px;
  text-transform:uppercase;
  color:var(--white);
  margin:2px 0 0;
}

.content-panel{
  background:var(--panel);
  border-radius:4px;
  padding:26px;
  flex:1;
  min-height:600px;
  max-height:2000px;
  overflow:visible;
  transition:max-height .3s ease;
}
/* Starting state for pages that want to grow into place (e.g. Search,
   before there's anything typed) instead of being a big empty box.
   Animates max-height (content is clipped via overflow:hidden while
   compact) rather than min-height, because min-height doesn't visibly
   animate anything once actual content already exceeds it -- the box
   would just snap to fit instead of growing into view.
   Any panel using this pattern also needs its own min-height:0 override --
   the base rule's min-height:600px isn't part of the transition, so left
   in place it would instantly snap the box to 600px the moment .compact
   is removed, regardless of how far max-height had animated (min-height
   always wins over max-height when the two conflict).
   flex:none overrides the base rule's flex:1, which would otherwise grow
   this panel to fill all leftover vertical space in the sidebar layout
   regardless of how much content is actually in it -- e.g. a single
   result row stretching the box out to fill the whole window. Without
   flex-grow, height comes purely from content, capped by max-height. */
#search-panel{min-height:0;flex:none;}
.content-panel.compact{
  max-height:330px;
  overflow:hidden;
}

/* ---------- Buttons / inputs shared ---------- */
.btn{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:13px;
  border:none;
  border-radius:3px;
  padding:12px 18px;
  cursor:pointer;
  background:var(--orange);
  color:var(--white);
}
.btn:hover{background:var(--orange-dark);}
.btn.ghost{
  background:transparent;
  border:1px solid var(--ink-soft);
  color:var(--ink);
}
/* Same gray-background/white-text look as the sidebar nav buttons. */
.btn.dark{background:var(--navy-2);color:var(--white);border:none;}
.btn.dark:hover{background:#31363f;}
.field-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-soft);
  display:block;
  margin-bottom:6px;
}
.field-input{
  width:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:12px 14px;
  font-family:'IBM Plex Mono',monospace;
  font-size:14px;
  color:var(--ink);
  outline:none;
}
.field-input:focus{border-color:var(--orange);}

table{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:13px;}
th{
  text-align:left;
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:12px;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:10px 12px;
  border-bottom:2px solid var(--line);
}
td{padding:11px 12px;border-bottom:1px solid var(--line);}
tr:hover td{background:var(--panel-2);}

.toolbar{
  display:flex;
  gap:10px;
  margin-bottom:18px;
  flex-wrap:wrap;
  align-items:center;
}

/* A fixed 560px only showed a handful of rows before scrolling was
   needed, with no visual cue there was more below it -- easy to mistake
   for "the inventory is basically empty". Scales with the viewport
   instead (leaves ~340px for header/toolbar/filters above it), same
   scrollable-so-the-page-doesn't-grow-forever behavior otherwise. */
.list-table-wrap{max-height:calc(100vh - 340px);overflow-y:auto;}
.list-table-wrap thead th{position:sticky;top:0;background:var(--panel);z-index:1;}

.pager{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap;}
.pager-btn{
  min-width:32px;
  padding:6px 10px;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:3px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  cursor:pointer;
}
.pager-btn:hover{border-color:var(--orange);}
.pager-btn.active{background:var(--orange);border-color:var(--orange);color:var(--white);}
.pager-ellipsis{
  min-width:32px;
  padding:6px 4px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}
.toolbar select, .toolbar input{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:9px 12px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:var(--ink);
}

/* ---------- Storage map ---------- */
.map-frame{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:18px;
  /* No scrollbars here -- the canvas already pans/zooms internally, and a
     browser scrollbar on top of that (previously overflow:auto with a
     max-height the canvas was right up against) fought with it: once the
     canvas edged past the cap the vertical scrollbar appeared, which then
     ate into the available width and could trigger a horizontal one too.
     overflow:hidden is just a safety net -- .map-canvas below already
     clips its own pannable content, this should never actually engage. */
  overflow:hidden;
}
/* Three groups (room-switcher, room-actions, map-toolbar-actions) spread
   left/center/right by space-between -- +Room/Delete room sit in their own
   middle group specifically so they land between the room switcher and
   Print shelf labels, not tacked onto either end. */
.map-toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.map-toolbar-actions, .room-actions{display:flex;gap:8px;align-items:center;}
#iso-controls{display:inline-flex;gap:8px;}
.map-hint{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);margin-bottom:12px;}

/* Toolbar buttons on the Storage map page, roughly doubled in size vs the
   normal .btn.small used elsewhere (Settings, Search, etc) -- scoped here
   so it doesn't affect those other, smaller contexts. */
.map-toolbar .btn.small{padding:14px 20px;font-size:20px;}
/* "Delete this room" (icon-only, no text) otherwise renders shorter than
   "Print shelf labels" next to it despite sharing the same padding --
   the icon's own line-height is shorter than the text button's, so the
   two buttons need an explicit shared height to actually match. */
.map-toolbar-actions .btn.small{height:52px;box-sizing:border-box;}

/* ---------- Room switcher ---------- */
.room-switcher{display:flex;align-items:center;gap:8px;}
.room-nav-btn{
  width:52px;height:52px;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:3px;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.room-nav-btn:hover{border-color:var(--orange);}
.room-nav-btn:disabled{opacity:.35;cursor:default;}
.room-name{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:20px;
  text-transform:uppercase;
  color:var(--ink);
  min-width:90px;
  text-align:center;
  cursor:pointer;
}
/* Edit page only -- the room name is a real input instead of a display +
   dialog, so renaming is just "click in, select, retype" rather than a
   double-click-to-prompt round trip. */
.room-name-input{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:20px;
  text-transform:uppercase;
  color:var(--ink);
  min-width:140px;
  text-align:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:10px 8px;
}
.room-name-input:focus{border-color:var(--orange);outline:none;}
.room-name-input:disabled{opacity:.5;}

.map-canvas{position:relative;}
.map-canvas.mode-2d{
  background:var(--white);
  border:1px dashed var(--line);
  overflow:hidden;
  cursor:grab;
}
.map-canvas.mode-2d:active{cursor:grabbing;}
.map-canvas.mode-2d.edit-mode{cursor:copy;}
.map-canvas.mode-iso{background:var(--white);border:1px solid var(--line);overflow:hidden;}

/* The pannable/zoomable content living inside the fixed-size 2D viewport --
   background grid pattern lives here (not on .map-canvas) so it pans and
   scales along with everything else instead of staying fixed in place. */
.grid-2d-content{
  position:relative;
  transform-origin:0 0;
  background:
    linear-gradient(var(--line) 2px, transparent 2px),
    linear-gradient(90deg, var(--line) 2px, transparent 2px);
  background-size:60px 60px;
}
/* Outer "walls" of the room, distinct from (and thicker/darker than) the
   per-tile grid lines above. A ::after overlay rather than a real border --
   rack boxes are positioned absolutely against this element's own origin,
   and a real border would shift that origin inward by its width, throwing
   every rack slightly out of alignment with the grid beneath it. */
.grid-2d-content::after{
  content:'';
  position:absolute;
  inset:0;
  border:3px solid #8a8a86;
  pointer-events:none;
}
.map-empty-state{
  padding:60px 20px;
  text-align:center;
  color:var(--ink-soft);
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
}

/* 2D rack blocks -- plain white regardless of fill/occupancy (that
   gradient stays a 3D-only visualization now); the box itself rotates
   per facing (see map-edit.js/map.js), around its own center by default. */
.rack-box2d{
  position:absolute;
  background:var(--panel);
  border:1px solid var(--orange-dark);
  border-radius:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:var(--ink);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.rack-box2d.floor{border-style:dashed;border-radius:50%;}
.map-canvas.mode-2d.edit-mode .rack-box2d{cursor:grab;}
.rack-box2d.selected{outline:2px solid var(--orange-dark);outline-offset:1px;}
.rack-code{pointer-events:none;}

/* Explicit, deliberate grid resize -- one row/column per click, in place
   of the old implicit auto-grow-while-dragging. */
.grid-edge-btn{
  position:absolute;
  width:22px;height:22px;
  border-radius:50%;
  border:1px solid var(--orange-dark);
  background:var(--white);
  color:var(--orange-dark);
  line-height:1;
  font-size:13px;
  cursor:pointer;
  padding:0;
  z-index:3;
}
.grid-edge-btn.minus{border-color:var(--ink-soft);color:var(--ink-soft);}

/* Placed next to a selected rack's empty neighbor cells, to quickly add
   a matching rack there (see renderNeighborAddButtons in map-edit.js). */
.cell-add-btn{
  position:absolute;
  width:22px;height:22px;
  border-radius:50%;
  border:1px dashed var(--orange-dark);
  background:rgba(232,96,28,.08);
  color:var(--orange-dark);
  line-height:1;
  font-size:13px;
  cursor:pointer;
  padding:0;
  z-index:2;
}

/* The box itself rotates now (see the inline transform in map-edit.js/
   map.js), so this just sits at its top edge and rotates along with it --
   no separate rotation wrapper/per-facing classes needed any more. */
.rack-front-arrow{
  position:absolute;
  top:-6px; left:50%;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:7px solid var(--orange-dark);
}
/* ---------- 3D (isometric) SVG view ---------- */
.iso-svg{display:block;cursor:grab;}
.iso-svg:active{cursor:grabbing;}
.rack-stack-svg polygon{transition:filter .1s ease;}
.rack-stack-svg:hover polygon{filter:brightness(1.05);}

/* Edit-map only: wraps the action panel + popover so they stack (action
   panel above, popover below, matching its width) anchored to the same
   bottom-right corner the plain popover (view-only map.js) uses on its
   own. Rotate/delete live here now, not on the rack box itself -- that's
   what stopped the button clicks getting entangled with the box's own
   drag/click handling underneath them. */
.rack-side-panels{
  position:fixed;
  bottom:54px; right:54px;
  display:flex;
  flex-direction:column;
  gap:14px;
  width:380px;
}
.rack-side-panels .shelf-popover{
  position:static;
  width:auto;
}
.rack-action-panel{
  display:flex;
  gap:14px;
  justify-content:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.rack-action-btn{
  width:60px; height:60px;
  border-radius:8px;
  border:1px solid var(--info);
  background:var(--info);
  color:var(--white);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rack-action-btn.danger{border-color:var(--err);background:var(--err);color:var(--white);}
.rack-action-btn.edit{border-color:var(--edit);background:var(--edit);color:var(--white);}
.rack-action-btn .trash-icon{width:26px;height:26px;}

/* Trash icon used wherever a delete button used to be a plain "x" --
   reads as delete rather than "cancel/close" at a glance. */
.trash-icon{width:15px;height:15px;display:block;}
.btn.icon-only{display:inline-flex;align-items:center;justify-content:center;}

.shelf-popover{
  position:fixed;
  bottom:54px; right:54px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:14px 16px;
  width:380px;
  max-height:400px;
  overflow-y:auto;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.popover-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-family:'IBM Plex Mono',monospace;gap:6px;}
.popover-close{background:none;border:none;font-size:16px;cursor:pointer;color:var(--ink-soft);}
.popover-head > .popover-close{margin-left:auto;}
.popover-dims{margin:-4px 0 10px;font-family:'IBM Plex Mono',monospace;}
.popover-story{border-top:1px solid var(--line);padding:8px 0;}
.popover-story:first-of-type{border-top:none;}
.popover-story-head{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;}
.popover-story-open .popover-story-head{color:var(--ink-soft);font-style:italic;}
.popover-item{
  font-size:12px;
  color:var(--ink-soft);
  padding:2px 0 2px 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Add-rack modal */
.rack-kind-toggle{display:flex;gap:8px;}
.kind-btn{
  flex:1;
  padding:10px;
  border:1px solid var(--line);
  background:var(--white);
  border-radius:3px;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:12px;
}
.kind-btn.active{border-color:var(--orange);background:rgba(232,96,28,.12);color:var(--orange-dark);font-weight:600;}
.dims-row{display:flex;gap:8px;}
.dims-row .field-input{width:0;flex:1;}

/* These two modals pack in a lot more (per-story rows) than the plain
   300px .modal-card default fits comfortably -- a bit of extra width
   gives the height field real breathing room instead of squeezing it
   against a fixed-width label and an "Open (walkthrough)" checkbox. */
#rack-modal .modal-card, #dims-modal .modal-card{width:380px;}

/* One row per story in the add-rack/edit-dimensions modals -- a height
   field plus a "leave this level open" checkbox, so a walk-under gap in
   a shelving row (or simply two stories of different height) can be set
   per story instead of one height applying to the whole rack. Stacked
   (label+height on their own line, the checkbox below) rather than all
   three side by side -- crammed into one row, the height input had
   barely enough width left to show a single digit, let alone its
   "Height (cm)" placeholder.*/
.story-config-row{margin-top:10px;padding-bottom:8px;border-bottom:1px solid var(--line);}
.story-config-row:last-child{border-bottom:none;padding-bottom:0;}
.story-config-top{display:flex;align-items:center;gap:8px;}
.story-config-label{width:56px;flex-shrink:0;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);}
.story-height-input{width:0;flex:1;}
.story-open-toggle{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;color:var(--ink);margin-top:6px;padding-left:64px;}
.dims-story-actions{display:flex;gap:8px;margin-top:12px;}

/* ---------- Place product ---------- */
/* Shrinks to fit the card instead of being a big box with the card
   floating in the middle of it, and centers itself in the content area. */
.place-panel{
  flex:none;
  min-height:0;
  align-self:center;
  margin-top:auto;
  margin-bottom:auto;
  width:560px;
  max-width:100%;
}
.place-card{
  max-width:560px;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* Kept out of view without display:none (which would make it
   unfocusable) -- see place.js's mobile branch. */
.scan-catcher{
  position:fixed;
  top:-1000px;
  left:-1000px;
  width:1px;
  height:1px;
  opacity:0;
  border:none;
  padding:0;
}
.place-msg{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  padding:12px 14px;
  border-radius:3px;
  background:rgba(47,143,78,.12);
  border:1px solid rgba(47,143,78,.35);
  color:var(--ok);
}
.place-msg-err{
  background:rgba(201,58,58,.12);
  border-color:rgba(201,58,58,.35);
  color:var(--err);
}
.place-msg-warn{
  background:rgba(232,96,28,.12);
  border-color:rgba(232,96,28,.35);
  color:var(--orange-dark);
}
.place-msg a{color:inherit;font-weight:600;}
.place-success-text{margin-bottom:8px;}
.place-success-actions{display:flex;gap:8px;justify-content:center;}
/* Fixed 44px tall, padding widened +5px per side (+10px total) versus
   the normal .btn.small (7px 10px) they'd otherwise inherit -- desktop
   only, see the mobile media query below which resets these back down.
   Selector needs the extra ".btn.small" specificity to actually beat the
   plain .btn.small rule further down the file (same specificity would
   otherwise lose on source order alone). */
.place-success-actions .btn.small{
  height:44px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.place-cancel-btn{background:var(--err);border-color:var(--err);color:var(--white);}
.place-cancel-btn:hover{background:#a92f2f;border-color:#a92f2f;}
/* Ghost/outline instead of a solid fill -- Cancel stays a strong solid
   red since undoing a placement is the one decisive action here, but
   Add tag is optional/secondary and shouldn't carry the same visual
   weight as a same-size solid-filled button right next to it. */
.place-tag-btn{background:transparent;border-color:var(--info);color:var(--info);}
.place-tag-btn:hover{background:rgba(47,111,168,.1);}
/* Rainbow outline instead of a plain solid border -- a color-bar test
   pattern is exactly what a TV calibration screen looks like, and it
   reads as a distinct, memorable button at a glance instead of just
   another dark button that looks like the nav sidebar. Standard
   gradient-border trick: two background layers, one solid (clipped to
   the padding box, i.e. everything inside the border) and one rainbow
   (clipped to the border box, i.e. only the border ring itself) --
   needs a real transparent border for background-clip to have a ring to
   clip the second layer into. */
.place-tag-preset-calibrated{
  color:var(--white);
  border:3px solid transparent;
  background-color:var(--ink);
  background-image:linear-gradient(var(--ink), var(--ink)), linear-gradient(90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de);
  background-origin:border-box;
  background-clip:padding-box, border-box;
}
.place-tag-preset-calibrated:hover{
  background-image:linear-gradient(#000, #000), linear-gradient(90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de);
}
.place-tag-preset-outlet{background:#e8c11c;border:2px solid var(--ink);color:var(--ink);}
.place-tag-preset-outlet:hover{background:#cfa90f;}
.place-tag-picker{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(47,143,78,.35);
}
/* Pushed to the far right of the picker row, away from the two preset
   buttons, per Stian's request to visually separate "pick a preset" from
   "type your own". */
.place-tag-other-group{display:flex;align-items:center;gap:8px;margin-left:auto;}
.place-tag-other{
  width:120px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  padding:7px 9px;
}

.suggestions-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}
.suggestion-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:9px 12px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  text-align:left;
  cursor:pointer;
}
.suggestion-item:hover{border-color:var(--orange);}

.search-field-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.search-field-row .field-label{margin:0;white-space:nowrap;}
.search-field-row .field-input{flex:1;}

/* A scaled-down live snapshot of the storage map (see IsoRender in
   assets/iso-render.js, used by search.js) -- hidden until an actual
   search has been run, same reveal timing as the result rows. Hovering a
   result row pans this to center that shelf's rack (IsoRender.panTo) and
   blinks the matching shelf face green (.shelf-blink below); every shelf
   currently in the results gets a persistent green outline
   (.shelf-result-highlight). Tall enough that the auto-fit scene (see
   buildScene's fit-to-content math) reads clearly rather than as a thin
   sliver. */
.search-minimap-frame{position:relative;margin-bottom:16px;}
.search-minimap{
  height:448px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
}
.search-minimap-controls{position:absolute;top:8px;right:8px;display:flex;gap:6px;}
/* Transitions on .iso-viewport's transform are applied inline from JS
   now (IsoRender.panTo/resetPan set a .5s glide, the wheel-zoom handler
   explicitly sets 'none' per tick) rather than a blanket CSS rule --
   wheel-zooming needs to feel instant, not animate every scroll tick. */

/* Green outline around every shelf face currently in the search results
   -- overrides the polygon's own inline stroke/fill presentation
   attributes (any CSS rule, even a class selector, beats those). */
.search-minimap .shelf-result-highlight{
  stroke:var(--ok) !important;
  stroke-width:2.5px;
}
/* Slow green blink on the shelf whose result row is currently hovered --
   replaces the fill outright (not blended with the original occupancy
   color) so it reads unambiguously as "this one" against the rest of
   the map. */
.search-minimap .shelf-blink{
  animation:shelf-blink-anim 1.3s ease-in-out infinite;
}
@keyframes shelf-blink-anim{
  0%, 100% { fill:var(--ok); }
  50% { fill:#8fdba8; }
}
/* Dims every OTHER rack (or, for a glued row, everything outside that
   whole group) while a result row is hovered, so the blinking target
   stays visible even when another rack sits in front of it in the iso
   projection -- opacity transition is fine here (unlike the pan/zoom
   transform above) since it only ever fires on hover, not continuously. */
.search-minimap .rack-stack-svg{transition:opacity .3s ease;}
.search-minimap .rack-dimmed{opacity:.03;}
/* Same effect on the Storage map page's own interactive 3D view --
   hovering a rack there fades every other rack (outside its glued group)
   the same way. */
.mode-iso .rack-stack-svg{transition:opacity .3s ease;}
.mode-iso .rack-dimmed{opacity:.03;}

/* ---------- Search result rows ---------- */
/* overscroll-behavior-y:auto is the browser default (lets scroll "chain"
   to the page once this list hits its own top/bottom) -- stated
   explicitly here so it's not accidentally relied on/lost if something
   later sets contain on an ancestor. */
.result-rows{display:flex;flex-direction:column;gap:8px;max-height:640px;overflow-y:auto;overscroll-behavior-y:auto;padding-right:4px;}
.result-row{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:14px;
  transition:border-color .15s;
}
.result-row:hover{border-color:var(--orange);}
.rr-cell{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
.rr-brand{font-weight:600;flex:0.8;}
/* The tag badge lives INSIDE the model cell (not as its own row-level flex
   item) specifically so its presence/absence never shifts any of the
   other columns -- only the model cell's own internal layout changes.
   The text portion truncates on its own; the tag stays fixed-size next
   to it via flex:none below. */
.rr-model{display:flex;align-items:center;gap:6px;}
.rr-model-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.rr-ean{font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);}
.rr-room{flex:0.8;color:var(--ink-soft);}
.rr-shelf{
  flex:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  background:var(--panel-2);
  padding:4px 9px;
  border-radius:3px;
}
.rr-tag{
  flex:none;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--info);
  border:1px solid var(--info);
  padding:3px 8px;
  border-radius:10px;
}
/* Overview's list table isn't a flex row (unlike search's .rr-model), so
   the tag needs its own left margin instead of relying on a flex gap. */
.list-tag{margin-left:6px;}
.rr-remove{flex:none;}
.rr-remove-wrap{flex:none;}
.rr-remove-countdown{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:3px;
  padding:4px 6px 4px 10px;
}
.rr-remove-countdown-text{font-size:12px;color:var(--ink-soft);white-space:nowrap;}
.rr-remove-cancel{
  flex:none;
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid var(--err);
  background:var(--white);
  color:var(--err);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rr-remove-cancel:hover{background:var(--err);color:var(--white);}
.rr-thumb{
  flex:none;
  width:52px;
  height:52px;
  border-radius:4px;
  object-fit:cover;
  background:var(--panel-2);
  border:1px solid var(--line);
}
.rr-thumb-empty{width:52px;height:52px;border-radius:4px;background:var(--panel-2);border:1px solid var(--line);}

/* Fixed column widths (set inline on each <th> in log.html) instead of
   the default auto layout, which re-sized every column to whatever
   content happened to be in the current page/search results -- made
   Shelf ID and everything after it visibly shift left/right on every
   reload even though there was plenty of room to just hold still.
   Product text that's too long to fit now truncates with an ellipsis
   instead of stretching the column. */
.log-table{table-layout:fixed;}
.log-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- Movement log: mobile row list + detail modal ---------- */
/* Hidden outside the mobile media query at the bottom of this file,
   which switches this and .log-table (the desktop table) on and off. */
.log-mobile-list{display:none;flex-direction:column;gap:8px;}
.log-row-mobile{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px 14px;
  cursor:pointer;
}
.log-row-mobile:active{border-color:var(--orange);}
.log-row-icon{
  width:24px;height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13.5px;
  font-weight:700;
  line-height:1;
  color:var(--white);
  flex-shrink:0;
}
.log-icon-plus{background:var(--ok);}
.log-icon-minus{background:var(--err);}
/* Desktop table version -- same badge, scaled down to sit inline with
   the "Placed"/"Removed" text (table font-size is 13px) instead of the
   24px mobile-card size. */
.log-row-icon-inline{
  display:inline-flex;
  width:14px;height:14px;
  font-size:9px;
  vertical-align:middle;
  margin-right:5px;
}
.log-row-main{min-width:0;flex:1;}
.log-row-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.log-row-sub{font-size:12px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;margin-top:2px;}

.log-detail-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
.log-detail-row:last-child{border-bottom:none;}
.log-detail-label{color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;}

/* ---------- List view ---------- */
.print-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  /* Column-gap doubles as the "at least this much room, or wrap" buffer
     Stian asked for -- once the toolbar and button can't both fit with
     50px between them, the button flexes down onto its own row. */
  gap:12px 50px;
}
.print-bar .toolbar{flex:1 1 320px;}
.print-bar .btn{padding:10px 16px;font-size:12px;flex-shrink:0;}

/* #list-include-input/#list-exclude-input intentionally get NO
   dedicated rule -- they live inside .print-bar .toolbar and pick up the
   exact same sizing as the room filter dropdown right next to them via
   the existing ".toolbar select, .toolbar input" rule, per Stian's ask. */
.category-chip-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.category-chip-row{display:flex;flex-wrap:wrap;gap:6px;min-height:0;}
.category-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px 5px 10px;
  border-radius:14px;
  font-size:12px;
  font-family:'Inter',sans-serif;
  color:var(--white);
}
.category-chip.include{background:var(--ok);}
.category-chip.exclude{background:var(--err);}
.category-chip-remove{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.25);
  color:var(--white);
  font-size:10px;
  line-height:1;
  cursor:pointer;
  padding:0;
}
.category-chip-remove:hover{background:rgba(255,255,255,.45);}

/* ---------- Auth gate ---------- */
.auth-gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--navy);
}
.auth-card{
  background:var(--panel);
  border-radius:6px;
  padding:32px 30px;
  width:340px;
  display:flex;
  flex-direction:column;
}
.auth-card .logo{margin-bottom:18px;}
.auth-title{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:20px;
  text-transform:uppercase;
  margin:0 0 18px;
  color:var(--ink);
}
.auth-card .btn{margin-top:20px;}
.auth-toggle-link{
  margin-top:14px;
  text-align:center;
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:var(--ink-soft);
  text-decoration:underline;
}
.auth-toggle-link:hover{color:var(--ink);}
.auth-error{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--err);
  min-height:16px;
  margin-top:10px;
}

/* ---------- Employee bar ---------- */
.employee-bar{
  background:var(--navy-2);
  border-radius:3px;
  padding:11px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.employee-bar .s-sub{color:#9aa0a8;font-size:10px;text-transform:uppercase;letter-spacing:.05em;}
.employee-name{
  color:var(--white);
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  font-weight:600;
}
.btn.small{padding:7px 10px;font-size:11px;}
/* "Edit map" and "Log out" otherwise auto-size to their own (slightly
   different) text length -- a fixed 70px was too tight for "Edit map"
   at this uppercase/letter-spaced size (would clip or wrap), so both get
   90px instead, enough for either label with room to spare. */
#settings-edit-map-btn, #settings-logout-btn{min-width:90px;}
/* Scoped to the (dark) employee bar only -- .btn.ghost elsewhere keeps its
   normal dark-on-light look from the base rule above. */
.employee-bar .btn.ghost{color:var(--white);border-color:#4a4f57;}
.btn.danger{
  background:var(--err);
  border:1px solid var(--err);
  color:var(--white);
}
.btn.danger:hover{background:#a92f2f;border-color:#a92f2f;}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.modal-card{
  background:var(--panel);
  border-radius:6px;
  padding:26px;
  width:300px;
  display:flex;
  flex-direction:column;
}
.modal-title{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:18px;
  text-transform:uppercase;
  margin:0 0 16px;
  color:var(--ink);
}
.modal-actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;}

/* ---------- Print ---------- */
.print-only{display:none;}
@media print{
  /* "body *" below only covers body's DESCENDANTS -- body itself (dark
     navy in the normal app chrome) was never included, so its own
     background kept painting behind everything, wasting ink on every
     printed label sheet. */
  html, body{background:#fff;}
  body *{visibility:hidden;background-color: white;}
  .print-only, .print-only *{visibility:visible;}
  .print-only{display:block;position:absolute;top:0;left:0;width:100%;background-color: white;}
  /* Landscape fits the now-much-bigger shelf-ID labels far better than
     portrait -- printing already looked right when manually switched to
     landscape in the print dialog, so just default to it instead of
     relying on someone remembering to change that setting every time. */
  @page{size:landscape;}
  .print-labels-grid{display:flex;flex-wrap:wrap;gap:8px;}
  .print-label{border:1px dashed #999;padding:10px;break-inside:avoid;box-sizing:border-box;width:calc(33.333% - 6px);}
  /* Shelf-ID labels only -- doubling the text/barcode size (per Stian)
     meant a code like "A3-2" no longer fit the shared 3-per-row column
     width and was wrapping onto two lines. Two per row instead gives it
     roughly 50% more room; white-space:nowrap on the label itself is the
     actual hard guarantee against wrapping either way. */
  .shelf-labels-grid .print-label{width:calc(50% - 6px);}
  .print-label-title{font-weight:600;font-size:32px;}
  /* "Print selected EANs" (list.js) shares .print-label markup with the
     shelf-ID labels (map-edit.js) but needs its own, much smaller title
     size -- these labels also carry a category/shelf subtitle line the
     shelf-ID ones don't, so 32px read as oversized here specifically. */
  .print-label-title.small{font-size:16px;}
  /* Shelf-ID labels only (not the EAN/product ones above) -- 100% bigger
     (32px -> 64px), yellow text, black border box, so the ID reads
     clearly at a glance from a distance on the physical shelf. */
  .print-label-title.shelf-id-label{
    background-color:#cfa90f;
    font-size:128px;
    color:solid #000;
    border:2px solid #000;
    display:inline-block;
    padding:2px 10px;
    border-radius:4px;
    white-space:nowrap;
  }
  .print-label-sub{font-family:monospace;color:#ffff;margin-bottom:6px;}
  .print-label-barcode{display:block;margin-top:4px;}
}

/* ---------- Settings ---------- */
.settings-grid{display:flex;flex-direction:column;gap:22px;max-width:520px;}
.settings-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:3px;
  padding:16px;
}
.settings-row .s-label{font-weight:600;font-size:14px;}
.settings-row .s-sub{font-size:12px;color:var(--ink-soft);margin-top:2px;}

/* ==================================================================
   Mobile (mainly Zebra Android scanners) -- everything above this
   point is the untouched desktop layout. Every rule below only takes
   effect at <=768px, the same breakpoint isMobileViewport() (script.js)
   checks in JS, so CSS and JS agree on what counts as "mobile."
   ================================================================== */
@media (max-width: 768px) {
  /* ---------- App shell: sidebar becomes a top button grid ---------- */
  .app{grid-template-columns:1fr;}
  .sidebar{
    position:static;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    padding:14px;
    gap:8px;
  }
  .sidebar .logo{width:auto;margin-bottom:6px;margin-right:auto;}
  .nav-btn{flex:1 1 calc(50% - 4px);justify-content:center;padding:15px 10px;font-size:14px;}
  .nav-spacer{display:none;}
  /* Sits next to the logo, top right, on the same row -- order:0 (the
     default) ties it with the logo (also order:0), and DOM order then
     puts it after the logo but still ahead of the order:1-6 nav-btns,
     which wrap onto their own row below. */
  .employee-bar{order:0;width:auto;margin-bottom:6px;}

  /* Place product and Search first -- per Stian, that's what a scanner
     is mostly used for. Same buttons as desktop, just reordered via
     `order` (no separate mobile markup to keep in sync). */
  .nav-btn[data-page="pages/place.html"]{order:1;}
  .nav-btn[data-page="pages/search.html"]{order:2;}
  .nav-btn[data-page="pages/log.html"]{order:3;}
  .nav-btn[data-page="pages/map.html"]{order:4;}
  .nav-btn[data-page="pages/list.html"]{order:5;}
  .nav-btn[data-page="pages/settings.html"]{order:6;}

  main{padding:14px;}
  .page-title{font-size:20px;}
  .content-panel{padding:16px;min-height:0;}

  /* Toolbars (Search/Overview/Movement log filter rows) stack full-width
     instead of several narrow controls squeezed onto one line. This also
     covers Overview's new include/exclude category inputs -- they stack
     under Search/Room filter one per row instead of cramming into the
     same line as desktop. */
  .toolbar > *{flex:1 1 100%;}

  /* Overview's category chips: the desktop 16px remove circle is a small
     target to hit with a finger -- bigger both ways on mobile, and the
     chip's own padding/font grows a touch to match instead of looking
     mismatched next to a suddenly-larger remove button. */
  .category-chip{padding:7px 10px 7px 12px;font-size:13px;gap:8px;}
  .category-chip-remove{width:22px;height:22px;font-size:12px;}

  /* A visible edge around the table's own scroll region -- on mobile,
     with no scrollbar rendered by default and the table filling most of
     the screen, there was nothing marking where "scroll the list" ends
     and "scroll the page" begins. */
  .list-table-wrap{border:1px solid var(--line);border-radius:4px;}

  /* Storage map: 3D view dropped for now (see the commented-out line in
     map.js) -- hides the toggle button and its rotate/reset controls so
     there's no way to reach a view that isn't there for mobile yet. */
  #view-toggle-btn, #iso-controls{display:none !important;}

  /* View page's toolbar (.view-only, see map.html) only ever has the room
     switcher on mobile now -- both #view-toggle-btn and #iso-controls
     above are hidden, and Reset view is gone entirely. With nothing left
     on the right, the old justify-content:space-between had nothing to
     balance against and shoved the room switcher flush to the left edge
     instead of centering it. Doesn't touch Edit map's own .map-toolbar
     (+Room/Delete room/Print labels stay real, visible content there on
     mobile, so space-between still does the right thing for it). */
  .map-toolbar.view-only{justify-content:center;}

  /* Edit map's room-switcher: .content-panel is overflow:visible (lets
     pages that WANT to grow past it do so), so anything inside it that's
     too wide doesn't get clipped or scrolled -- it just visibly spills
     out past the panel's edge, which is what Stian was seeing. Three
     things needed together: the switcher itself must never be told it
     has more than 100% of its row to work with; its own two children
     (nav buttons + name input) need to be allowed to wrap onto a second
     line if they truly can't fit side by side, instead of forcing the
     row wider than the screen; and the buttons themselves shrink a
     little so that's rarely necessary in the first place. */
  /* Its own internal justify-content:center only centers the buttons
     WITHIN room-switcher's own (tightly content-sized) box -- that box
     still sits flush-left as a plain flex item inside .map-toolbar's
     space-between. flex:1 1 100% makes it take the whole toolbar row on
     mobile (room-actions/toolbar-actions wrap onto their own line below
     it instead), so centering its own content now actually centers it
     across the visible width of the bar, matching the view page. */
  .room-switcher{min-width:0;max-width:100%;flex:1 1 100%;flex-wrap:wrap;justify-content:center;}
  .room-nav-btn{width:44px;height:44px;font-size:22px;}
  #room-name-input{min-width:0;flex:1 1 140px;max-width:100%;}

  /* Map toolbar: +Room / Delete room / Print shelf labels are sized way up
     on desktop (.map-toolbar .btn.small above, ~2x normal .btn.small) for
     the scanner-friendly big-target feel -- too big to fit three across on
     a phone, so shrink them back down toward the normal .btn.small size. */
  .map-toolbar .btn.small{padding:7px 10px;font-size:12px;}
  .map-toolbar-actions .btn.small{height:auto;}

  /* Place product's Cancel/Add tag buttons are sized up on desktop (see
     .place-success-actions .btn.small above) -- shrink back to normal
     .btn.small size on mobile, same reasoning as the map toolbar buttons
     just above. */
  .place-success-actions .btn.small{height:auto;padding:7px 10px;display:inline-block;}

  /* Edit map, rack selected: the shelf-contents popover doesn't fit a
     phone screen usefully -- drop it and just pin rotate/delete full-width
     at the bottom, big enough to tap reliably. */
  .rack-side-panels .shelf-popover{display:none;}
  .rack-side-panels{
    position:fixed;
    bottom:0; left:0; right:0;
    width:auto;
    gap:0;
  }
  .rack-action-panel{
    border-radius:0;
    border-width:1px 0 0;
    box-shadow:0 -4px 18px rgba(0,0,0,.25);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .rack-action-btn{width:auto;flex:1;height:52px;}

  /* Map: pan-y keeps one-finger vertical scroll working natively (so the
     page can still be scrolled away from the map -- touch-action:none
     previously blocked that entirely) while still leaving pinch-zoom to
     the JS handler in map.js, since pan-y doesn't grant the browser its
     own pinch-zoom gesture. Mobile-only -- leaving this off on desktop
     keeps two-finger trackpad gestures untouched. */
  .map-canvas{touch-action:pan-y;}

  /* Search: minimap dropped for now (see the commented-out loadMinimap()
     call in search.js). */
  .search-minimap-frame{display:none !important;}

  /* Search results: let the cells wrap onto multiple lines instead of
     six-plus columns fighting for a phone-width row. */
  .result-row{flex-wrap:wrap;}
  .rr-cell{flex:1 1 45%;white-space:normal;}
  .rr-thumb, .rr-thumb-empty{order:-1;}
  /* Always its own full-width row, not wherever it happens to fit next
     to the other cells -- without this, switching from the plain
     "Remove from shelf" button to the wider countdown pill changed how
     much space it needed, which pushed it onto a different line than
     before (looked like the whole row jumped). Fixed width/position now,
     regardless of which of the two it's currently showing. */
  .rr-remove-wrap{flex:1 1 100%;order:99;margin-top:4px;}
  .rr-remove, .rr-remove-countdown{width:100%;justify-content:center;}

  /* Modals: never wider than the viewport, even the wider two
     (rack-modal/dims-modal, 380px on desktop). */
  .modal-card, #rack-modal .modal-card, #dims-modal .modal-card{width:92vw;max-width:380px;}
  .auth-card{width:92vw;max-width:340px;}

  /* Movement log: compact tappable rows (see log.js) instead of the
     5-column table, which has no room on a phone screen. */
  .log-table{display:none;}
  .log-mobile-list{display:flex;}

  /* Overview table: Room/Category/EAN deprioritized off-screen -- still
     in the DOM (and still in the printed EAN labels, which read from
     list.js's row data, not this table) but not shown on a phone. */
  .list-table-wrap th:nth-child(3), .list-table-wrap td:nth-child(3),
  .list-table-wrap th:nth-child(5), .list-table-wrap td:nth-child(5),
  .list-table-wrap th:nth-child(6), .list-table-wrap td:nth-child(6){
    display:none;
  }
}

/* ---------- Portrait lock (mobile only) ----------
   Real orientation-lock (screen.orientation.lock()) only works inside an
   installed/fullscreen PWA, not a plain browser tab -- so instead, on a
   phone-sized *and* landscape viewport, #rotate-lock gets counter-rotated
   back to portrait and resized to fill the (now swapped) viewport
   dimensions. The layout itself never sees landscape at all.
   (pointer:coarse) keeps this off an ordinary widened desktop browser
   window, which can also match max-width/orientation:landscape but always
   has a mouse. */
@media (max-width:768px) and (orientation:landscape) and (pointer:coarse){
  html, body{width:100%;height:100%;overflow:hidden;margin:0;}
  #rotate-lock{
    position:fixed;
    top:0;
    left:0;
    width:100vh;
    height:100vw;
    transform-origin:top left;
    transform:rotate(90deg) translateY(-100%);
    overflow-y:auto;
  }
}