/* FJN System — E2-13 „Miejsca” redrawn (D163, layout of D162); the controls come from fjn-storage-map.css. */

.fjn-places.fjn-map { height: auto; min-height: 0; }
.fjn-places__tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.fjn-places__tile { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: #fff; border: 1px solid var(--fjn-border); border-radius: 8px; color: var(--fjn-text); text-decoration: none; min-width: 0; }
.fjn-places__tile:hover { text-decoration: none; border-color: var(--fjn-brand-600); }
.fjn-places__tile.is-on { border: 2px solid var(--fjn-brand-600); padding: 7px 9px; }
.fjn-places__tile > span { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; white-space: nowrap; }
.fjn-places__tile b { font-size: 15px; }
.fjn-places__tile span span { font-size: 12px; font-weight: 400; color: var(--fjn-text-2); }
.fjn-places__bar { width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--fjn-surface-2); appearance: none; overflow: hidden; }
.fjn-places__bar::-webkit-progress-bar { background: var(--fjn-surface-2); border-radius: 3px; }
.fjn-places__bar::-webkit-progress-value { background: #1E4F8A; border-radius: 3px; }
.fjn-places__bar::-moz-progress-bar { background: #1E4F8A; border-radius: 3px; }
.fjn-places__grid { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; background: #fff; border: 1px solid var(--fjn-border); border-radius: 10px; }
.fjn-places__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fjn-places__head > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fjn-places__head b { font-size: 18px; }
.fjn-places__head > div > span { font-size: 13px; color: var(--fjn-text-2); }
.fjn-places__lines { display: grid; gap: 10px 8px; align-items: center; }
.fjn-places__lines > span:first-child, .fjn-places__lvl { grid-column: 1; }
.fjn-places__rack { text-align: center; font-size: 13px; color: var(--fjn-text-2); }
.fjn-places__lvl { font-size: 13px; color: var(--fjn-text-2); white-space: nowrap; }
.fjn-places__cell.fjn-map__cell { height: 48px; border-radius: 6px; font-size: 14px; }
.fjn-places__cell.is-picked { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #15181C; position: relative; z-index: 1; }
.fjn-places__hint { margin: 0; font-size: 13px; color: var(--fjn-text-2); }
.fjn-map__pline .fjn-map__cell.is-picked { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #15181C; }
.fjn-places__cols-1 { grid-template-columns: 72px repeat(1, minmax(0, 1fr)) 15fr; }
.fjn-places__cols-2 { grid-template-columns: 72px repeat(2, minmax(0, 1fr)) 14fr; }
.fjn-places__cols-3 { grid-template-columns: 72px repeat(3, minmax(0, 1fr)) 13fr; }
.fjn-places__cols-4 { grid-template-columns: 72px repeat(4, minmax(0, 1fr)) 12fr; }
.fjn-places__cols-5 { grid-template-columns: 72px repeat(5, minmax(0, 1fr)) 11fr; }
.fjn-places__cols-6 { grid-template-columns: 72px repeat(6, minmax(0, 1fr)) 10fr; }
.fjn-places__cols-7 { grid-template-columns: 72px repeat(7, minmax(0, 1fr)) 9fr; }
.fjn-places__cols-8 { grid-template-columns: 72px repeat(8, minmax(0, 1fr)) 8fr; }
.fjn-places__cols-9 { grid-template-columns: 72px repeat(9, minmax(0, 1fr)) 7fr; }
.fjn-places__cols-10 { grid-template-columns: 72px repeat(10, minmax(0, 1fr)) 6fr; }
.fjn-places__cols-11 { grid-template-columns: 72px repeat(11, minmax(0, 1fr)) 5fr; }
.fjn-places__cols-12 { grid-template-columns: 72px repeat(12, minmax(0, 1fr)) 4fr; }
.fjn-places__cols-13 { grid-template-columns: 72px repeat(13, minmax(0, 1fr)) 3fr; }
.fjn-places__cols-14 { grid-template-columns: 72px repeat(14, minmax(0, 1fr)) 2fr; }
.fjn-places__cols-15 { grid-template-columns: 72px repeat(15, minmax(0, 1fr)) 1fr; }
.fjn-places__cols-16 { grid-template-columns: 72px repeat(16, minmax(0, 1fr)); }

@media (max-width: 1279px) {
  .fjn-places__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fjn-places__cell.fjn-map__cell { height: 52px; font-size: 13px; }
  .fjn-places__lines { gap: 10px 6px; }
}
@media (max-width: 767px) {
  .fjn-places.fjn-map { height: calc(100vh - var(--fjn-topbar-h-m) - var(--fjn-bottomnav-h)); min-height: 560px; }
  .fjn-places .fjn-map__main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .fjn-map__pline a.fjn-map__cell { text-decoration: none; }
}