/* =========================================================================
   Nordic Night — tema för 360.thinsz.se
   ========================================================================= */
:root {
  --bg-base: #0B0C0E;
  --bg-surface: #15171A;
  --bg-elevated: #1E2125;
  --border: #2A2D31;
  --border-hover: #3A3E43;
  --text-primary: #F4F5F7;
  --text-body: #C8CCD1;
  --text-muted: #8A8F96;
  --accent: #4FC3F7;
  --radius: 12px;
  --shadow: 0 12px 32px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg-base); color: var(--text-body);
  font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }

/* Auth-bar (R5): login-länk / inloggad + logga ut, uppe till höger */
.authbar {
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  max-width: 1680px; margin: 0 auto; padding: 12px 24px 0;
  font-size: 13px; color: var(--text-muted);
}
.authbar-who strong { color: var(--text-body); font-weight: 600; }
/* Admin-länk på användarnamnet (authbaren) — bara när inloggad är admin */
.authbar-who a.authbar-admin { text-decoration: none; }
.authbar-who a.authbar-admin strong { color: var(--accent); }
.authbar-who a.authbar-admin:hover strong { text-decoration: underline; }
.authbar-form { margin: 0; }
.authbar-login,
.authbar button {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-body);
  border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  text-decoration: none;
}
.authbar-login:hover,
.authbar button:hover { border-color: var(--border-hover); color: var(--text-primary); }

/* skippa-länk för tangentbordsanvändare */
.skiplink {
  position: absolute; left: -9999px; top: auto; padding: 8px 14px;
  background: var(--accent); color: #000; border-radius: 6px; z-index: 100;
}
.skiplink:focus { left: 16px; top: 16px; }

/* Header */
.site-header {
  padding: 48px 24px 24px;
  max-width: 1680px; margin: 0 auto;
  position: relative;              /* ankare för .map-globe (uppe till höger) */
}
/* Jordglob-ingång till kartvyn (map.php) — uppe till höger i sidhuvudet, båda vyerna */
.map-globe {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--text-muted); background: var(--bg-surface);
  border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s;
}
.map-globe:hover { color: var(--accent); border-color: var(--border-hover); background: var(--bg-elevated); }
.map-globe:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-header h1 {
  font-size: clamp(28px, 5vw, 48px); font-weight: 600;
  letter-spacing: -.02em; color: var(--text-primary);
  margin: 0 0 8px;
}
.site-header .tagline { color: var(--text-muted); margin: 0; }

/* Logotyp — mörk version (transparent bakgrund), direkt på temat.
   Rotvyn: centrerad och större. Albumvyn: till vänster om rubriken,
   höjd = rubrikens fontstorlek (samma clamp som .site-header h1). */
.site-header .brand { margin: 0; line-height: 0; text-align: center; }
.site-header .brand img {
  width: clamp(180px, 30vw, 260px); height: auto;
  display: inline-block;
}
/* Albumvyn: stor logotyp som vänsterkolumn, spänner över titel + tagline */
.album-head { display: flex; align-items: center; gap: 20px; }
.album-head h1 { margin: 0 0 6px; line-height: 1.1; }
.album-head .tagline { margin: 0; }
.album-head .album-logo { line-height: 0; flex-shrink: 0; }
.album-head .album-logo img {
  height: clamp(88px, 14vw, 128px); width: auto; display: block;
}

/* Galleri-grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 24px;
  max-width: 1680px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .gallery { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 16px; }
}

.empty { grid-column: 1/-1; color: var(--text-muted); text-align: center; padding: 48px; }
.empty code { background: var(--bg-surface); padding: 4px 8px; border-radius: 4px; }

/* Kort */
.card {
  position: relative;
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s, border-color .2s;
  color: inherit;
}
.card:hover, .card:focus-visible {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
}
.card:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

.card figure { margin: 0; position: relative; }
.card img {
  width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  filter: brightness(.92);
  transition: transform .6s ease-out, filter .4s;
}
.card--video img { aspect-ratio: 16 / 9; }

/* Platshållare när thumbnail saknas (t.ex. video före R2-pipelinen) */
.thumb-pending {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 2 / 1;
  background: var(--bg-elevated); color: var(--text-muted);
  font-size: 13px;
}

/* Låst (lösenordsskyddat) album — R3. Läcker inget innehåll. */
.thumb-pending.locked { color: var(--text-body); font-weight: 500; letter-spacing: .02em; }
.card--locked { border-style: dashed; }
.card--locked .badge {
  background: rgba(79,195,247,.18); border-color: rgba(79,195,247,.45); color: #cdebfb;
}

/* Hover-zoom — respekterar reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .card:hover { transform: translateY(-2px); }
  .card:hover img { transform: scale(1.04); filter: brightness(1); }
}

/* Badge "Album"/"🔒 Skyddat" (text) samt ikon-varianten (360-orbit + foto/video) */
.badge {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 10px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.badge--icons { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; }
.badge--icons svg { width: 18px; height: 18px; display: block; }

/* Synlighets-badge (albumkort) — samma blobbar/färgkodning (pill-vis-*) som admin.php,
 * men "Skyddad"/"Olistad"/"Dold" ska INTE skrikas ut i versaler (2026-08-19). */
.badge--vis { text-transform: none; letter-spacing: normal; font-weight: 600; }

/* GPS-status (albumvyn) — top-vänster: ingen position (rödtonad) / interpolerad/ungefärlig (gul) */
.badge--gps {
  left: 12px; right: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
}
.badge--gps svg { width: 14px; height: 14px; display: block; }
.badge--gps-none   { background: rgba(176,42,42,.72);  border-color: rgba(255,140,140,.45); color: #ffe3e3; }
.badge--gps-interp { background: rgba(150,110,18,.74); border-color: rgba(245,200,90,.5);   color: #fff1d2; }

/* Play-triangel för video */
.play::before {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.play::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
  margin-left: calc(50% - 6px);
}

/* Figcaption */
figcaption {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-surface);
  font-size: 14px;
}
figcaption .title { color: var(--text-primary); font-weight: 500; }
figcaption time, figcaption .meta {
  color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums;
}
figcaption .meta { display: inline-flex; align-items: center; }

/* Album-kort: stretched-link (kortet = <div>) täcker hela kortet → öppnar albumet.
   Jordgloben (.meta-globe) efter antalet ligger ovanpå (z-index) och är egen länk till kartan. */
.card--album .card-link { position: absolute; inset: 0; z-index: 1; }
.card--album .card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.meta-globe {
  position: relative; z-index: 2;                  /* över stretched-länken → klickbar */
  display: inline-flex; align-items: center; margin-left: 8px;
  color: var(--text-muted); transition: color .15s;
}
.meta-globe svg { width: 16px; height: 16px; display: block; }
.meta-globe:hover { color: var(--accent); }
.meta-globe:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Footer */
.site-footer {
  padding: 32px 24px 48px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 48px;
}
.site-footer a { color: var(--text-body); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

/* About-sidan (about.php) — publik berättelse på engelska, samma Nordic Night-tema.
   .site-header är delad med index.php (max-width 1680px, gallerilayout) — smalnas av
   här så rubrik/tagline linjerar med brödtextens 760px-kolumn i stället för att flyta
   fritt mot vänsterkanten på breda skärmar. */
.about-header { max-width: 760px; padding-left: 24px; padding-right: 24px; }
/* Kontaktraden under taglinen — samma dämpade ton, tight radavstånd (default p-margin är 1em) */
.about-header .about-contact { color: var(--text-muted); margin: 10px 0 0; }
.about {
  max-width: 760px; margin: 0 auto; padding: 8px 24px 24px;
  color: var(--text-body); line-height: 1.75;
}
.about h2 {
  font-size: 20px; color: var(--text-primary); font-weight: 600;
  letter-spacing: -.01em; margin: 36px 0 10px;
}
.about p { margin: 0 0 14px; }
.about ul { margin: 0 0 14px; padding-left: 22px; }
.about li { margin-bottom: 10px; }
.about li strong { color: var(--text-primary); font-weight: 600; }
.about a { color: var(--accent); }
.about-back { margin-top: 36px; }
.about-note { font-size: 13px; color: var(--text-muted); margin: 0 0 24px; }
/* Skärmdumpar i förminskad skala; länken öppnar fullversionen. figure har egen
   UA-margin (1em 40px) — nollas så bilden linjerar med brödtexten. */
.about .about-figure { margin: 14px 0 4px; }
.about .about-figure img {
  max-width: min(420px, 100%);
  border: 1px solid var(--border); border-radius: 8px;
}
.about .about-figure a:hover img { border-color: var(--border-hover); }
.about .about-figure figcaption {
  font-style: italic; font-size: 13px; color: var(--text-muted);
  margin-top: 8px; max-width: 420px;
}
/* Reklamfilmen: full spaltbredd (skärmdumparnas 420px-tak gäller inte), samma ram som de */
.about .about-figure--video video {
  display: block; width: 100%; background: var(--bg-base);
  border: 1px solid var(--border); border-radius: 8px;
}
.about .about-figure--video figcaption { max-width: 100%; }
/* Logotypen: centrerad, utan skärmdumparnas ram */
.about .about-logo { text-align: center; margin: 20px 0 8px; }
.about .about-logo img { border: 0; margin: 0 auto; }
/* Vänsterjusterad figur utan skärmdumparnas ram (t.ex. terminal-gif med egen svart bakgrund) */
.about .about-figure--noborder img { border: 0; }
/* Porträttbild som flyter till höger om intro-stycket; staplas på smala skärmar */
.about .about-figure--float { float: right; margin: 0 0 12px 20px; max-width: 150px; }
.about .about-figure--float img { max-width: 150px; }
.about .about-figure--float figcaption { max-width: 150px; }
@media (max-width: 480px) {
  .about .about-figure--float { float: none; margin: 14px auto; }
}

/* =========================================================================
   Admin (R4.5/R5)
   Delad styling för admin.php (album-/fil-CRUD + loggvyer) och
   admin-users.php (user management). Tidigare duplicerad i båda filernas
   inline <style>-block — nu en sanningskälla här. `.adm` = sidcontainer;
   tabell-/form-/flash-reglerna delas, `.ut-*`/`.ue-*` hör till
   admin-users.php:s användartabell + redigeringspanel (redesign 2026-08-26).
   ========================================================================= */
.adm { max-width: 1100px; margin: 0 auto; padding: 24px; }
.adm h1 { font-size: 26px; margin: 0 0 4px; }
.adm h2 { font-size: 19px; margin: 28px 0 10px; }

/* Tabeller — admin.php (album-/fil-listor, loggvyer) */
.adm table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm th, .adm td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: middle;
}

/* Formulärkontroller — delade */
.adm input[type=text], .adm input[type=password], .adm input[type=date], .adm select {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 6px; padding: 7px 9px; font: inherit; min-width: 0;
}
.adm input.gps { width: 215px; }   /* admin.php: gps-fält */
.adm form.inline { display: inline-flex; gap: 8px; align-items: center; margin: 0; flex-wrap: wrap; }
/* Inline-kvittens för per-fil-GPS-spara (fetch, ingen sidomladdning) */
.adm .inline-msg { font-size: 13px; white-space: nowrap; }
.adm .inline-msg.ok { color: #81c784; }
.adm .inline-msg.err { color: #ef9a9a; }

/* Knapphierarki: primär (accent) · sekundär/genpw · destruktiv (.warn) */
.adm button {
  background: var(--accent); border: 0; color: #00222e; border-radius: 6px;
  padding: 7px 13px; font: inherit; font-weight: 600; cursor: pointer;
  transition: filter .15s, background .15s, border-color .15s, color .15s;
}
.adm button:hover { filter: brightness(1.08); }
.adm button.warn { background: #b71c1c; color: #fff; }
.adm button.warn:hover { background: #c62828; filter: none; }
.adm button.genpw {
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-body); font-weight: 400; padding: 7px 10px;
}
.adm button.genpw:hover { border-color: var(--border-hover); color: var(--text-primary); filter: none; }
/* Trimma-länk (admin.php filtabell, endast videorader) — blå knapp-look à la referens */
.adm a.btn-trim {
  display: inline-block; background: #2f7ff0; color: #fff; text-decoration: none;
  border-radius: 6px; padding: 7px 13px; font-size: 14px; font-weight: 600;
  transition: filter .15s;
}
.adm a.btn-trim:hover { filter: brightness(1.12); }

/* Meddelanden + märken */
.note { color: var(--text-muted); font-size: 13px; }
.flash { padding: 10px 14px; border-radius: 8px; margin: 14px 0; font-size: 14px; }
.flash.ok { background: rgba(46,125,50,.25); border: 1px solid rgba(76,175,80,.4); }
.flash.err { background: rgba(183,28,28,.3); border: 1px solid rgba(244,67,54,.4); }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); }

/* Loggvyer — admin.php (?view=audit|access) */
.audit-log {
  background: var(--bg-base); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px; font-size: 12px; line-height: 1.5; overflow: auto; max-height: 70vh;
  white-space: pre-wrap; word-break: break-word; color: var(--text-body);
}
.log-nav { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: 14px; }
.log-nav a { color: var(--accent); text-decoration: none; }
.log-nav a:hover { text-decoration: underline; }
.log-nav .disabled { color: var(--text-muted); opacity: .5; }

/* -------------------------------------------------------------------------
   admin-users.php — kompakt användartabell + redigeringspanel
   (redesign 2026-08-26: "överblick först – redigering vid behov")
   .ut-* = listvyn (toolbar + tabell), .ue-* = redigeringspanelen (slide-over).
   ------------------------------------------------------------------------- */
.adm-wide { max-width: 1280px; }
.adm-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 10px; font-size: 14px; }
.adm-nav strong { color: var(--text-primary); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Toolbar: sök · rollfilter · album-grant-filter · ny användare */
.ut-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin: 18px 0 10px;
}
.ut-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0; }
.ut-field { display: flex; flex-direction: column; gap: 4px; }
.ut-field-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ut-field input[type=search] {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 6px; padding: 7px 9px; font: inherit; min-width: 220px;
}
.ut-clear { font-size: 13px; align-self: center; }
.ut-count { color: var(--text-muted); font-size: 13px; margin: 0 0 10px; }
.ut-count strong { color: var(--text-primary); font-size: 15px; }
.adm a.btn-primary, .adm .btn-sec {
  display: inline-block; border-radius: 6px; padding: 7px 13px;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.adm a.btn-primary { background: var(--accent); color: #00222e; }
.adm a.btn-primary:hover { filter: brightness(1.08); }
.adm .btn-sec {
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-body); font-weight: 400; cursor: pointer;
}
.adm .btn-sec:hover { border-color: var(--border-hover); color: var(--text-primary); }

/* Tabellen: en kompakt rad per användare */
.ut { width: 100%; border-collapse: collapse; font-size: 14px; }
.ut th, .ut td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.ut thead th {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px;
}
.ut-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.ut-sort:hover { color: var(--text-primary); }
.ut-sort.is-active { color: var(--accent); }
.ut-row:hover { background: var(--bg-surface); }
.ut-row.editing { background: rgba(79,195,247,.08); }
.ut-cell-name { font-weight: 400; }
.ut-name { font-weight: 600; color: var(--text-primary); }
.ut-name:hover { color: var(--accent); }
.ut-cell-name .pill { margin-left: 6px; }
.ut-alb-all { color: var(--text-muted); }
.ut-alb-none, .ut-never { color: var(--text-muted); font-style: italic; }
.ut-alb-one { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.ut-alb-n { border-bottom: 1px dotted var(--border-hover); cursor: help; }
.ut-cell-last { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ut-cell-act { text-align: right; white-space: nowrap; }
.ut-cell-act .btn-sec, .ut-menu { vertical-align: middle; }
.ut-empty { color: var(--text-muted); padding: 18px 12px; }

/* [hidden] måste vinna över klassreglernas display: flex/inline-block nedan —
   annars visas stängda paneler, dolda albumlistor och bortfiltrerade rader. */
.ue[hidden], .ue-albums[hidden], .ue-alb[hidden], .ut-row[hidden],
.adm .btn-sec[hidden], .adm a.btn-primary[hidden] { display: none; }

/* Slide-over: redigeringspanelen. Server-renderad per användare, öppen bara för
   ?edit=<user> (JS öppnar/stänger utan navigering). */
.ue {
  position: fixed; inset: 0 0 0 auto; width: min(460px, 100%); z-index: 40;
  background: var(--bg-surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow); padding: 20px 22px 32px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.ue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ue-head h2 { margin: 0; font-size: 21px; color: var(--text-primary); }
.ue-head .note { margin: 4px 0 0; }
.ue-close { font-size: 20px; line-height: 1; color: var(--text-muted); padding: 4px 8px; }
.ue-close:hover { color: var(--text-primary); }
.ue-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ue-field { display: flex; flex-direction: column; gap: 6px; }
.ue-field > label, .ue-albums legend {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; padding: 0;
}
.ue-warn { font-size: 13px; color: #ffcc80; margin: 0; }
.ue-albums { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ue-albums .ue-count { color: var(--accent); }
.ue-albumsearch {
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 6px; padding: 7px 9px; font: inherit;
}
.ue-albumlist {
  max-height: 260px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px; display: flex; flex-direction: column;
}
.ue-alb {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px;
  font-size: 14px; cursor: pointer;
}
.ue-alb:hover { background: var(--bg-elevated); }
.ue-alb input { accent-color: var(--accent); width: 16px; height: 16px; }
.ue-alb span { overflow-wrap: anywhere; }
.ue-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  border-top: 1px solid var(--border); padding-top: 14px;
}
.adm .ue-save:disabled { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; filter: none; }
.adm .dlg button:disabled { background: #4a2020; color: var(--text-muted); cursor: not-allowed; filter: none; }
.ue-sec { border-top: 1px solid var(--border); padding-top: 14px; }
.ue-sec h3 {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.ue-sec form.inline { flex-wrap: wrap; gap: 8px; }
.ue-sec input[type=password], .ue-sec input[type=text] { flex: 1 1 180px; }
.ue-secrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.adm .btn-danger {
  display: inline-block; border-radius: 6px; padding: 7px 13px; font-size: 14px;
  background: transparent; border: 1px solid rgba(229,115,115,.5); color: #e57373;
}
.adm .btn-danger:hover { background: rgba(183,28,28,.25); color: #ffcdd2; }

/* ⋯-meny per rad: <details> = tangentbord och klick utan JS */
.ut-menu { display: inline-block; position: relative; margin-left: 6px; }
.ut-menu > summary {
  list-style: none; cursor: pointer; padding: 4px 9px; border-radius: 6px;
  color: var(--text-muted); border: 1px solid transparent; line-height: 1;
}
.ut-menu > summary::-webkit-details-marker { display: none; }
.ut-menu > summary:hover { color: var(--text-primary); border-color: var(--border); }
.ut-menu[open] > summary { color: var(--text-primary); border-color: var(--border-hover); }
.ut-menu-pop {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column;
}
.ut-menu-pop a { padding: 7px 10px; border-radius: 6px; color: var(--text-body); font-size: 14px; }
.ut-menu-pop a:hover { background: var(--bg-surface); color: var(--text-primary); }
.ut-menu-pop a.danger { color: #e57373; }
.ut-menu-pop a.danger:hover { background: rgba(183,28,28,.22); color: #ffcdd2; }

/* Dialoger: lösenordsbyte + radering. Modala med JS (showModal), annars öppna
   sektioner via ?dialog= — därav både :modal- och [open]-styling. */
.dlg {
  background: var(--bg-surface); color: var(--text-body);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px; width: min(460px, 92vw);
}
.dlg::backdrop { background: rgba(0,0,0,.6); }
.dlg h3 { margin: 0 0 10px; font-size: 18px; color: var(--text-primary); text-transform: none; letter-spacing: 0; }
.dlg p { font-size: 14px; margin: 0 0 12px; }
.dlg label { display: block; font-size: 13px; color: var(--text-muted); margin: 0 0 6px; }
.dlg input[type=text], .dlg input[type=password] { width: 100%; }
.dlg-form { display: block; margin: 0; }
.dlg-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dlg-row input { flex: 1 1 200px; }
.dlg-hint { margin: 10px 0 0; }
.dlg-actions {
  display: flex; justify-content: flex-end; gap: 10px; align-items: center;
  border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px;
}
.dlg-danger h3 { color: #e57373; }

/* Backdrop bakom panelen (länk = stäng, funkar utan JS) */
.ue-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 30; display: none; }
body.ue-open .ue-backdrop { display: block; }

@media (max-width: 760px) {
  .ue { width: 100%; border-left: 0; }
  .ut thead { display: none; }
  .ut, .ut tbody, .ut tr, .ut td, .ut th { display: block; width: 100%; }
  .ut-row {
    border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 10px; padding: 8px 4px;
  }
  .ut th, .ut td { border-bottom: 0; padding: 4px 12px; }
  .ut-cell-act { text-align: left; }
}

/* Generisk panel — tydligt avgränsad yta (admin.php:s formulär-sektioner). */
.admin-panel {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin: 4px 0;
}

/* -------------------------------------------------------------------------
   admin.php — album-kort + paneler (redesign, samma språk som user-korten)
   ------------------------------------------------------------------------- */
/* Album-listan som responsivt kort-grid (galleriets minmax()-språk) */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 10px 0 8px;
}
@media (max-width: 640px) { .album-grid { grid-template-columns: 1fr; } }
.album-grid .note { grid-column: 1 / -1; }   /* tom-tillstånd spänner hela radbredden */
.admin-card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.admin-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow); }
.admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); word-break: break-all; }
a.admin-card-title:hover { color: var(--accent); }
.admin-card-sub { color: var(--text-body); font-size: 13px; margin: 0; }
.admin-card-meta { display: flex; gap: 18px; margin: 0; font-size: 12px; }
.admin-card-meta dt { color: var(--text-muted); }
.admin-card-meta dd { margin: 0; color: var(--text-body); font-variant-numeric: tabular-nums; word-break: break-all; }
.admin-card-actions {
  display: flex; gap: 14px; margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--border); font-size: 13px;
}

/* Synlighets-pills (färgkodade som roll-pills) */
.pill-vis-public    { color: #bfe6c4; border-color: rgba(120,200,130,.45); background: rgba(76,175,80,.14); }
.pill-vis-protected { color: #ffd9b0; border-color: rgba(255,167,80,.5);   background: rgba(255,140,40,.14); }
.pill-vis-hidden    { color: var(--text-muted); }
.pill-vis-unlisted  { color: #d9c8f5; border-color: rgba(171,130,255,.5);  background: rgba(124,77,255,.14); }

/* Hemlig länk (unlisted, D11): utgångsstatus + delningslänk-rad i admin */
.expiry-expired { color: #ff8a80; font-weight: 700; letter-spacing: .04em; }
.share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.share-row code {
  padding: 4px 8px; background: rgba(255,255,255,.05);
  border: 1px solid var(--border); border-radius: 6px; word-break: break-all;
}
.btn-copy { font-size: 12px; padding: 2px 8px; margin-left: 8px; }

/* Metadata-/skapa-formulär med etiketterade fält */
.field-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.field-actions { margin-left: auto; }

/* Danger-sektion (radera album) — destruktiv, tydligt avskild */
.admin-danger {
  border: 1px solid rgba(183,28,28,.4); border-radius: var(--radius);
  padding: 4px 18px 16px; margin: 4px 0; background: rgba(183,28,28,.06);
}
.admin-danger h2 { color: #e57373; }
/* Not utan ytter-marginal (t.ex. ensam not i en panel) */
.note-flush { margin: 0; }