/* =========================================================================
   Components still used by the redesign: popovers, price rows, provider
   toggle, campaign indicator, comparison table.

   Everything that belonged to the pre-redesign UI - result cards, the
   Live/Visjon mode toggle, vision cards, the three-icon queue buttons, the
   side panels, the barcode-remember prompt, the manual PDF dropzone - was
   deleted along with the JS that rendered it. See the redesign chat log if
   you need the old version back for reference.
   ========================================================================= */

/* --- Popovers -------------------------------------------------------------
   Sized for the real target devices - 14"+ laptops, 27" iMacs in store,
   9-11" tablets at the very smallest. Not a mobile-style narrow sheet. */
.popover-backdrop{ position:fixed; inset:0; background:rgba(20,24,28,.45); z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; }
.popover-box{ background:#fff; border:2px solid var(--ice-black); border-radius:var(--radius-lg); padding:22px 26px; width:min(620px, 92vw); max-width:100%; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-popover); }
/* Admin and comparison popovers rebuild their body from scratch on every
   search keystroke / tab switch - without a fixed height, a result set that
   temporarily goes to zero (e.g. a search with no matches) shrinks the
   whole box down to a couple of lines and snaps it back the instant you
   type another character, which reads as the UI glitching rather than
   "no results". A fixed height keeps the box the same size regardless of
   how much is currently inside it; overflow-y on .popover-box already
   handles content that's taller than this. */
.popover-box--wide{ width:min(920px, 94vw); height:min(720px, 85vh); }
.popover__brand{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.popover__name{ font-size:19px; font-weight:800; margin-bottom:12px; }
.popover__note{ font-size:13px; color:var(--ink-soft); margin:0 0 10px; }
.popover__spec{ display:grid; grid-template-columns:150px 1fr; gap:7px 16px; font-size:15px; margin-bottom:14px; }
.popover__spec dt{ color:var(--ink-soft); font-weight:600; }
.popover__spec dd{ margin:0; }

/* --- Price rows (subscription tiers: iceMax / 18GB / 5GB) -----------------
   Redesigned away from the flat olive-beige fill every tier used to share -
   plain white/bordered cards instead, so the eye isn't fighting a solid
   colour block for three rows in a row. The iceMax tier (the one ICE
   actually wants sold) gets a distinct --price-row--primary treatment - a
   soft yellow-to-white wash and a black border - so it reads as the
   recommended option at a glance; 18GB/5GB stay quiet neutral cards
   underneath it. Competitor prices (isIce:false, from renderProviderToggle)
   never get the primary treatment. */
.price-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:13px 16px; margin-bottom:8px; border-radius:var(--radius-lg);
  background:#fff; border:1px solid var(--line); font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.price-row:last-child{ margin-bottom:0; }
.price-row--primary{
  border-color:var(--ice-black);
  background:linear-gradient(135deg, var(--ice-yellow-soft), #fff 65%);
  box-shadow:var(--shadow-float);
}
.price-row__label{ color:var(--ink-soft); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; }
.price-row--primary .price-row__label{ color:var(--ink); }
.price-row__values{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-family:var(--font-mono); }
.price-row__now{ font-weight:800; font-size:17px; color:var(--grey-competitor); }
.price-row__now--ice{ color:var(--ink); }
.price-row--primary .price-row__now--ice{ color:#000; font-size:21px; }
.price-row__save{ font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--success); background:var(--success-soft); padding:1px 7px; border-radius:20px; margin-top:2px; }
.price-row__monthly{ font-family:var(--font-display); font-size:12px; color:var(--ink-soft); font-weight:600; margin-top:2px; }
.price-row__unknown{ color:var(--grey-placeholder); font-size:12.5px; font-style:italic; }

/* --- Provider toggle (ICE / Telia / Telenor) ------------------------------- */
.provider-toggle{ display:flex; gap:8px; margin-bottom:16px; }
.provider-btn{
  flex:1; font-family:var(--font-display); font-weight:700; font-size:13px; border-radius:var(--radius);
  border:2px solid var(--line); background:#fff; color:var(--ink-soft); padding:9px 6px; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.provider-btn:hover{ border-color:var(--ink-soft); }
.provider-btn.active{ background:var(--provider-color); border-color:var(--provider-color); color:var(--provider-text); }

/* --- Admin model cards (Priser tab) -----------------------------------------
   One card per model, one save button per card. The earlier table version
   put price and campaign under two separate "Lagre" buttons with an
   unlabelled MobilBytte checkbox floating between them - technically
   aligned, but nobody could tell what saved what at a glance. A card groups
   everything for one model into clearly-labelled sections (header row for
   identity + MobilBytte, a Fullpris section, a Kampanje section) with a
   single save action at the bottom that writes whatever changed. */
.admin-model-card{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; }
.admin-model-card__header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; background:var(--line-soft); border-bottom:1px solid var(--line);
}
.admin-model-card__name{ font-weight:800; font-size:14.5px; }
.admin-model-card__toggles{ display:flex; align-items:center; gap:14px; flex:none; }
.admin-model-card__toggle{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); white-space:nowrap; cursor:pointer; }
.admin-model-card__body{ padding:12px 14px; }
.admin-model-card__section-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:700; margin-bottom:8px; }
.admin-model-card__section + .admin-model-card__section{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
.admin-model-card__price-row{ display:grid; grid-template-columns:70px 120px; align-items:center; gap:10px; margin-bottom:6px; }
.admin-model-card__price-row:last-child{ margin-bottom:0; }
.admin-model-card__price-row span{ color:var(--ink-soft); font-size:13px; }
.admin-model-card__campaign-fields{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; row-gap:10px; }
.admin-model-card__field{ display:flex; align-items:center; gap:6px; }
.admin-model-card__field label{ font-size:12px; color:var(--ink-soft); white-space:nowrap; }
.admin-model-card__footer{ display:flex; justify-content:flex-end; padding:10px 14px; background:var(--line-soft); border-top:1px solid var(--line); }
.admin-model-card input[type="number"]{ width:100px; padding:6px 8px; }
.admin-model-card input[type="date"]{ padding:6px 6px; }

/* --- Model search + brand groups (Priser tab) --------------------------------
   Search box on its own - the funnel-icon filter this replaced was more UI
   to learn for the same result grouping already gives for free. Each brand
   is a native <details> section (open by default, same collapsible pattern
   as "Globale innstillinger" below), so scanning "just Apple" or "just
   Samsung" is a glance, not a click. */
.admin-model-search{ display:block; width:100%; max-width:320px; padding:8px 10px; margin-bottom:14px; border:1px solid var(--line); border-radius:var(--radius); font-size:14px; }
.admin-brand-group{ margin-bottom:16px; }
.admin-brand-group__summary{
  cursor:pointer; font-weight:800; font-size:14px; padding:8px 2px; list-style:none;
  border-bottom:1px solid var(--line); margin-bottom:10px;
}
.admin-brand-group__summary::-webkit-details-marker{ display:none; }
.admin-brand-group__summary::before{ content:"▸"; display:inline-block; margin-right:6px; color:var(--ink-soft); transition:transform .15s ease; }
.admin-brand-group[open] > .admin-brand-group__summary::before{ transform:rotate(90deg); }

/* --- Comparison table (Pris-sammenligning and Spesifikasjoner outputs) ----- */
.comparison-table{ width:100%; border-collapse:collapse; font-size:13px; }
.comparison-table th, .comparison-table td{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.comparison-table th{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap; width:110px; }
.comparison-table td:first-child, .comparison-table th:first-child{ width:110px; }
.comparison-table .comp-name{ font-weight:800; font-size:14px; }
.comp-price-diff{ font-size:11px; color:var(--ink-soft); font-weight:400; margin-top:2px; }
.comp-price-diff--cheapest{ color:var(--success); font-weight:700; }