/* =============================================================================
   styles-v2.css — StroomkaartV2-specific CSS additions
   -----------------------------------------------------------------------------
   This file layers on top of styles-designer.css (the verbatim designer
   stylesheet). Everything in here is a V2-specific addition or override that
   was authored by the engineering team, NOT by the designer.

   Loading order in HTML must be:
     <link rel="stylesheet" href="/assets/css/styles-designer.css">
     <link rel="stylesheet" href="/assets/css/styles-v2.css">

   When the designer pushes a fresh styles.css, drop it in as
   styles-designer.css and leave this file untouched.

   Sections below are grouped by topic. Each block carries the commit / feature
   that introduced it for traceability.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Status palette — V2 semantic rename
   -----------------------------------------------------------------------------
   Designer ships only --sk-status-soon / --sk-status-occupied. The V2 backend
   uses --maintenance / --out_of_service as the canonical status names. We add
   the V2 names as authoritative, then keep the designer's names as aliases so
   any rules still using --sk-status-soon / --sk-status-occupied keep working
   until the designer's stylesheet stops referencing them.
   --------------------------------------------------------------------------- */
:root {
  --sk-status-maintenance:    #d49a1a;
  --sk-status-out_of_service: #b6433a;
  /* Legacy aliases — designer's stylesheet still references these names. */
  --sk-status-soon:           var(--sk-status-maintenance);
  --sk-status-occupied:       var(--sk-status-out_of_service);
}


/* -----------------------------------------------------------------------------
   2. Status classes — V2 semantic rename (filter chip / status tag / marker)
   -----------------------------------------------------------------------------
   Companion to section 1: the markup uses --maintenance / --out_of_service as
   class suffixes. Designer's stylesheet already supplies --soon / --occupied
   variants; these add the V2-named equivalents.
   --------------------------------------------------------------------------- */
.filter-chip__dot--maintenance    { background: var(--sk-status-maintenance); }
.filter-chip__dot--out_of_service { background: var(--sk-status-out_of_service); }

.status-tag--maintenance { background: rgba(212, 154, 26, 0.14); color: #8e6611; }
.status-tag--maintenance::before { background: var(--sk-status-maintenance); }
.status-tag--out_of_service { background: rgba(182, 67, 58, 0.12); color: var(--sk-status-out_of_service); }
.status-tag--out_of_service::before { background: var(--sk-status-out_of_service); }

.sk-marker--maintenance    { background: var(--sk-status-maintenance); }
.sk-marker--out_of_service { background: var(--sk-status-out_of_service); }


/* -----------------------------------------------------------------------------
   3. Map header — search dropdown (autocomplete results)
   -----------------------------------------------------------------------------
   Public-map header search component. Pure V2 — not in designer's stylesheet.
   --------------------------------------------------------------------------- */
.map-search__results {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: var(--sk-white);
  border: 1px solid var(--sk-border-strong);
  box-shadow: 0 12px 28px rgba(10, 42, 92, 0.18);
  max-height: 360px; overflow-y: auto;
  z-index: 1000;
}
.map-search__group {
  padding: 8px 14px 4px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--sk-muted);
  background: var(--sk-surface);
}
.map-search__row {
  display: block; width: 100%;
  padding: 10px 14px;
  border: 0; background: transparent;
  text-align: left; cursor: pointer;
  font-size: 13px; color: var(--sk-navy-800);
  border-bottom: 1px solid var(--sk-border);
}
.map-search__row:last-child { border-bottom: 0; }
.map-search__row:hover,
.map-search__row:focus { background: var(--sk-blue-100); outline: 0; }
.map-search__row-meta { font-size: 11.5px; color: var(--sk-muted); margin-top: 2px; }
.map-search__empty { padding: 14px; font-size: 13px; color: var(--sk-muted); }


/* -----------------------------------------------------------------------------
   4. Admin bar — language switcher recolouring
   -----------------------------------------------------------------------------
   Designer's .lang-switcher is styled for a light background. The admin top
   bar is dark navy, so we recolour the switcher when nested inside .admin-bar.
   --------------------------------------------------------------------------- */
.admin-bar .lang-switcher {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
}
.admin-bar .lang-switcher button {
  color: rgba(255,255,255,0.85);
}
.admin-bar .lang-switcher button + button {
  border-left-color: rgba(255,255,255,0.18);
}
.admin-bar .lang-switcher button:hover {
  background: rgba(255,255,255,0.12);
  color: var(--sk-white);
}
.admin-bar .lang-switcher button.is-active {
  background: var(--sk-blue-300);
  color: var(--sk-navy-900);
}


/* -----------------------------------------------------------------------------
   5. Lang-switcher visibility — make the `hidden` attribute work
   -----------------------------------------------------------------------------
   Designer's rule is `.lang-switcher { display: inline-flex; }` (and similar
   for .nav__lang-switcher-mobile). That high-specificity display value beats
   the user-agent `[hidden] { display: none; }`, so the language switcher stays
   visible even when we set the `hidden` attribute to suppress it for brands
   with only one language (e.g. Bristol). Override with an explicit !important
   on [hidden] so the designer's rule keeps working otherwise.

   Originally introduced in commit ce24350 as `:not([hidden])` qualifiers on
   the designer's rules — moved here as an !important override so it survives
   future designer-stylesheet edits.
   --------------------------------------------------------------------------- */
.lang-switcher[hidden],
.nav__lang-switcher-mobile[hidden] {
  display: none !important;
}


/* -----------------------------------------------------------------------------
   6. Admin auth-pending DOM gate
   -----------------------------------------------------------------------------
   Admin pages set body[data-auth-pending] before Cognito has confirmed the
   user is signed in, so unauthenticated DOM doesn't flash. ::before paints a
   neutral surface, ::after paints a small spinner — both stay visible because
   visibility cascades to children but pseudo-elements can be re-shown
   explicitly. Introduced in commit 9b2b6ff.
   --------------------------------------------------------------------------- */
body[data-auth-pending] { visibility: hidden; }
body[data-auth-pending]::before {
  content: "";
  visibility: visible;
  position: fixed;
  inset: 0;
  background: var(--sk-surface);
  z-index: 9999;
}
body[data-auth-pending]::after {
  content: "";
  visibility: visible;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid var(--sk-border);
  border-top-color: var(--sk-navy-800);
  border-radius: 50%;
  animation: sk-auth-spin 0.8s linear infinite;
  z-index: 10000;
}
@keyframes sk-auth-spin {
  to { transform: rotate(360deg); }
}


/* -----------------------------------------------------------------------------
   7. Admin app-settings — inline editable value cell
   -----------------------------------------------------------------------------
   Used by the admin AppSettings page for inline-edit inputs. Introduced in
   commit 09097e7.
   --------------------------------------------------------------------------- */
.setting-value {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--sk-border-strong);
  background: var(--sk-white);
  color: var(--sk-navy-800);
  outline: none;
}
.setting-value:focus { border-color: var(--sk-navy-700); }


/* -----------------------------------------------------------------------------
   8. Admin tables — inline row actions (Edit / Delete)
   -----------------------------------------------------------------------------
   Compact icon+label buttons used inside admin list-table rows. The danger
   variant is used for Delete. Container <td class="row-actions"> right-aligns
   its children.
   --------------------------------------------------------------------------- */
.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  white-space: nowrap;
}
.row-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  border: 1px solid var(--sk-border-strong);
  background: var(--sk-white);
  color: var(--sk-navy-800);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.row-action:hover {
  background: var(--sk-blue-100);
  border-color: var(--sk-blue-500);
  color: var(--sk-navy-900);
}
.row-action svg {
  width: 12px;
  height: 12px;
}
.row-action--danger { color: var(--sk-status-occupied); }
.row-action--danger:hover {
  background: rgba(182, 67, 58, 0.08);
  border-color: var(--sk-status-occupied);
  color: var(--sk-status-occupied);
}


/* -----------------------------------------------------------------------------
   9. Public-map — detail panel image gallery
   -----------------------------------------------------------------------------
   Horizontal scrolling thumbnail strip shown in the public-map detail panel.
   --------------------------------------------------------------------------- */
.map-detail__gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 14px;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.map-detail__gallery-item {
  flex: 0 0 auto;
  display: block;
  width: 140px;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--sk-border);
  background: var(--sk-blue-100);
}
.map-detail__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 200ms ease;
}
.map-detail__gallery-item:hover img {
  transform: scale(1.04);
}


/* -----------------------------------------------------------------------------
   10. Admin power-station — image gallery + uploader
   -----------------------------------------------------------------------------
   Grid of image tiles with hover-revealed action buttons (delete / promote).
   Used on the admin power-station edit page.
   --------------------------------------------------------------------------- */
.ps-gallery {
  margin-top: 24px;
}
.ps-gallery__hint {
  font-size: 12.5px;
  color: var(--sk-muted);
  margin: 0 0 12px;
}
.ps-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.ps-gallery__empty {
  font-size: 13px;
  color: var(--sk-muted);
  font-style: italic;
  margin: 8px 0 16px;
}
.ps-gallery__tile {
  position: relative;
  margin: 0;
  border: 1px solid var(--sk-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--sk-blue-100);
  aspect-ratio: 4 / 3;
}
.ps-gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-gallery__actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.ps-gallery__tile:hover .ps-gallery__actions,
.ps-gallery__tile:focus-within .ps-gallery__actions {
  opacity: 1;
}
.ps-gallery__btn {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 42, 92, 0.85);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ps-gallery__btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.ps-gallery__btn--danger {
  background: rgba(182, 67, 58, 0.9);
}
.ps-gallery__uploader {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ps-gallery__uploader input[type="file"] {
  font-size: 13px;
}