/* =========================================================================
   shell.css - the redesigned 4-column layout: topbar, collapsible sidebar,
   Telefonkatalog / detail / Valgte telefoner columns.

   Structural decisions are fixed by the wireframe handoff (see
   wireframe.txt / readme.txt in the repo history): 4 regions in a flex
   row below a 60px topbar, sidebar collapsing 150<->64px, columns 2-4
   scrolling independently. Visual styling is ICE's yellow/black language,
   not the wireframe's dashed placeholders.
   ========================================================================= */

html, body{ height:100%; }
body{ margin:0; padding-bottom:0; overflow:hidden; }   /* the shell itself scrolls per-column, not the page */

.app-shell{ display:flex; flex-direction:column; height:100vh; background:var(--paper); }

/* --- Top bar ------------------------------------------------------------- */
.app-topbar{
  flex:none; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:var(--ice-yellow); border-bottom:2px solid var(--ice-black);
}
.app-topbar__left{ display:flex; align-items:center; gap:12px; }
.app-topbar__title{ font-size:19px; font-weight:800; color:var(--ice-black); letter-spacing:-0.01em; }
.app-topbar__store{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--ice-black);
  background:rgba(0,0,0,.08); border-radius:999px; padding:4px 10px;
}
.app-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--ice-black); color:var(--ice-yellow);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700;
  border:0; cursor:pointer;
}

/* --- Body row: sidebar + 3 columns ---------------------------------------- */
.app-body{ flex:1; display:flex; overflow:hidden; min-height:0; }

/* --- Sidebar --------------------------------------------------------------
   Collapses width only - items stay in the same DOM order and position,
   which is what makes the 180ms width transition read as a collapse
   rather than a re-layout. */
.app-sidebar{
  flex:none; width:var(--sidebar-w); transition:width var(--sidebar-transition);
  border-right:1px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column; overflow:hidden;
}
.app-sidebar.collapsed{ width:var(--sidebar-w-collapsed); }

.app-sidebar__nav{ flex:1; padding:14px 10px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.app-nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:var(--radius-shell);
  border:1px solid transparent; background:transparent; cursor:pointer; text-align:left;
  font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--ink);
  transition:background-color .15s, border-color .15s;
}
.app-sidebar.collapsed .app-nav-item{ justify-content:center; padding:10px 4px; }
.app-nav-item:hover{ background:var(--line-soft); }
.app-nav-item.active{ background:var(--ice-yellow); border-color:var(--ice-black); }
.app-nav-item__icon{ flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.app-nav-item__icon svg{ width:18px; height:18px; }
.app-nav-item__label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-sidebar.collapsed .app-nav-item__label{ display:none; }

.app-sidebar__foot{ flex:none; border-top:1px solid var(--line-soft); padding:10px; }

/* --- Shared column chrome -------------------------------------------------- */
.app-col{ display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.app-col + .app-col{ border-left:1px solid var(--line); }
.app-col__head{ flex:none; padding:18px 20px 12px; }
.app-col__head h2{ margin:0 0 10px; font-size:18px; font-weight:800; }
.app-col__body{ flex:1; overflow-y:auto; padding:0 20px 20px; }

/* --- Column 2: Telefonkatalog ---------------------------------------------- */
.col-catalog{ flex:1.3; }

.catalog-search{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--radius-shell);
  padding:9px 12px; background:var(--panel);
}
.catalog-search:focus-within{ border-color:var(--ice-gold); box-shadow:0 0 0 3px rgba(255,185,0,.2); }
.catalog-search svg{ width:16px; height:16px; flex:none; color:var(--ink-soft); }
.catalog-search input{ border:0; outline:0; flex:1; font-family:var(--font-display); font-size:13.5px; background:transparent; }

.catalog-row{
  display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--radius-shell);
  cursor:pointer; border:1px solid transparent; margin-bottom:4px;
}
.catalog-row:hover{ background:var(--line-soft); }
.catalog-row.active{ background:var(--ice-yellow-soft); border-color:var(--ice-gold); }

.catalog-row__photo{
  width:34px; height:34px; flex:none; border-radius:var(--radius-shell); background:var(--line-soft);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--grey-placeholder); font-size:9px;
}
.catalog-row__body{ flex:1; min-width:0; }
.catalog-row__name{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.catalog-row__variant{ font-size:11.5px; color:var(--ink-soft); }
.catalog-row__eol{
  display:inline-block; margin-left:6px; font-size:9.5px; font-weight:800; letter-spacing:.02em;
  color:#fff; background:var(--danger); border-radius:3px; padding:1px 5px; vertical-align:middle;
}
.catalog-row__price{ font-size:13.5px; font-weight:700; flex:none; margin-right:2px; white-space:nowrap; }

.catalog-row__toggle{
  width:28px; height:28px; flex:none; border-radius:50%; border:1.5px solid var(--ice-black);
  background:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700;
  cursor:pointer; transition:background-color .15s, color .15s;
}
.catalog-row__toggle.added{ background:var(--ice-yellow); }
.catalog-row__toggle:hover{ background:var(--ice-yellow-soft); }

.catalog-empty{ font-size:13px; color:var(--ink-soft); padding:20px 4px; }

/* --- Column 3: detail -------------------------------------------------------- */
.col-detail{ flex:1; }

.detail-photo{
  width:96px; height:96px; border-radius:var(--radius-shell); background:var(--line-soft);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color:var(--grey-placeholder); font-size:11px; margin-bottom:14px;
}
.detail-brand{ font-size:12px; color:var(--ink-soft); font-weight:600; }
.detail-name{ font-size:19px; font-weight:800; margin-top:2px; }
.detail-eol-badge{
  display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:11.5px; font-weight:700;
  color:var(--danger); background:#FDECEC; border:1px solid var(--danger); border-radius:999px; padding:4px 10px;
}

.storage-pills{ display:flex; gap:8px; margin:16px 0; flex-wrap:wrap; }
.storage-pill{
  font-family:var(--font-display); font-size:12.5px; font-weight:700; padding:7px 14px;
  border-radius:999px; border:1.5px solid var(--ice-black); background:#fff; cursor:pointer;
  transition:background-color .15s;
}
.storage-pill.active{ background:var(--ice-yellow); }
.storage-pill:hover:not(.active){ background:var(--line-soft); }

.color-dots{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.color-dot{
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); cursor:default;
  position:relative;
}
.color-dot.active{ border-color:var(--ice-black); border-width:2px; }

.detail-price{ font-size:30px; font-weight:800; margin:10px 0 4px; }
.detail-price--muted{ color:var(--ink-soft); font-size:16px; font-weight:600; }

.detail-block{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); }
.detail-block h3{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }

.detail-empty{ font-size:13px; color:var(--ink-soft); padding:40px 4px; text-align:center; }

/* --- Column 4: Valgte telefoner ---------------------------------------------- */
.col-selected{ flex:0.85; min-width:250px; }
.col-selected .app-col__body{ display:flex; flex-direction:column; gap:8px; }

.selected-row{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius-shell);
  padding:8px 10px; background:var(--panel);
}
.selected-row__check{ width:16px; height:16px; flex:none; color:var(--success); }
.selected-row__name{ flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.selected-row__remove{ border:0; background:none; cursor:pointer; color:var(--ink-soft); font-size:15px; line-height:1; padding:2px; }
.selected-row__remove:hover{ color:var(--danger); }

.selected-empty{ font-size:13px; color:var(--ink-soft); }

.app-col__foot{ flex:none; padding:14px 20px 20px; }
.generate-btn{ width:100%; text-align:center; padding:12px 0; font-size:14px; }

/* --- Responsive floor: below this, the 4-column layout stops working
   (min-width:250px alone on column 4 already implies ~900px minimum), so
   match the wireframe's own min-width:1100px rather than pretending this
   is phone-friendly. */
.app-shell{ min-width:1100px; overflow-x:auto; }

/* =========================================================================
   Auth gate: store-number -> (set-pin | pin | pending). Replaces the old
   single-step "crack open" login entirely - four screens now, shown/hidden
   via [data-auth-screen], not a single form.
   ========================================================================= */
.login-gate{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.auth-card{
  width:340px; max-width:90vw; background:#fff; border:2px solid var(--ice-black);
  border-radius:var(--radius-lg); padding:28px 26px; text-align:center;
}
.auth-card img{ width:120px; margin-bottom:14px; }
.auth-card h2{ margin:0 0 18px; font-size:17px; }
.auth-card input[type=text], .auth-card input[type=password]{
  width:100%; box-sizing:border-box; padding:11px 12px; margin-bottom:10px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:15px; text-align:center; letter-spacing:.06em;
}
.auth-card input:focus{ outline:none; border-color:var(--ice-gold); box-shadow:0 0 0 3px rgba(255,185,0,.25); }
.auth-card .btn{ width:100%; margin-top:4px; }
.auth-remembered-chip{
  display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px;
  font-family:var(--font-mono); font-size:14px; background:var(--line-soft); border-radius:999px; padding:8px 14px;
}
.auth-remembered-chip button{ border:0; background:none; color:var(--ink-soft); text-decoration:underline; cursor:pointer; font-size:12px; font-family:var(--font-display); }
.auth-remember-row{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); margin:6px 0 14px; justify-content:center; }
.auth-error{ color:var(--danger); font-size:12.5px; min-height:16px; margin-bottom:8px; }
.auth-pending-note{ font-size:13px; color:var(--ink-soft); margin-bottom:16px; line-height:1.5; }