/* =========================================================
   === GLOBALA VARIABLER & BASSTYLES ===
   ========================================================= */
:root {
  --bg:#000;
  --surface:#121212;
  --border:#333;
  --text:#fff;
  --muted:#bbb;
  --accent:#a31621;
}

* { box-sizing:border-box }

html, body {
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  overflow-x:hidden;
  touch-action:pan-y;
}

/* =========================================================
   === GLOBALA CONTAINRAR ===
   ========================================================= */
main {
  width:100%;
  max-width:1000px;
  margin:24px auto;
  padding:0 12px;
}

/* =========================================================
   === TOPBAR ===
   ========================================================= */
.topbar {
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:12px;
  border-bottom:1px solid var(--border);
  background:#0a0a0a;
}
.crumb {
  color:var(--muted);
  text-decoration:none;
  margin:0 6px;
  font-weight:500;
}
.crumb:hover { color:var(--text); }
.logout {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  text-decoration:none;
  font-size:15px;
}
.logout:hover { color:var(--text); }

/* =========================================================
   === UTFORSKAR-LISTA ===
   ========================================================= */
.explorer-pane {
  width:100%;
  max-width:800px;
  margin:24px auto;
  padding:0 12px;
}
.folder-list { display:flex; flex-direction:column; gap:6px; }
.row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 2px;
  background:transparent;
  border:none;
  color:var(--text);
  text-decoration:none;
  transition:background .12s ease;
}
.row:hover { background:rgba(255,255,255,.06); }
.row .ico { font-size:20px; width:24px; display:inline-block; }
.row .label { font-weight:600; }

/* =========================================================
   === GALLERI (bilder) ===
   ========================================================= */
.gallery {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  width:100%;
  max-width:1000px;
  margin:16px auto 24px;
  padding:0 8px;
  justify-items:center;
  align-items:start;
  overflow:hidden;
}
@media (min-width:700px){
  .gallery{ grid-template-columns:repeat(3,1fr); gap:10px; }
}
@media (min-width:1024px){
  .gallery{ grid-template-columns:repeat(4,1fr); gap:12px; }
}

.tile {
  width:100%;
  text-align:center;
  background:transparent;
  border:none;
  padding:0;
}
.tile img {
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:center;
  border-radius:10px;
  background:#000;
}
@media (max-width:360px){
  .gallery{ gap:6px; }
  .tile img{ transform:scale(.94); transform-origin:center; }
}
.tile figcaption {
  text-align:center;
  color:var(--muted);
  margin-top:6px;
  font-size:13px;
}

/* =========================================================
   === LÖSENORDSSIDAN (gate) ===
   ========================================================= */
.gate {
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:24px 12px;
}
.gate-card {
  width:100%;
  max-width:560px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  text-align:center;
  margin:0 auto;
}
.gate-card h1 {
  margin:0 0 8px;
  font-size:clamp(22px,3.2vw,34px);
}
.gate-card p { color:var(--muted); margin:0 0 16px; }

#loginForm { display:flex; flex-direction:column; gap:12px; }
#loginForm input {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0c0c0c;
  color:#fff;
}
#loginForm input::placeholder { color:#9aa; }
#loginForm input:focus-visible {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent);
}
#loginForm button {
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:filter .12s ease, transform .06s ease;
}
#loginForm button:hover { filter:brightness(1.08); }
#loginForm button:active { transform:translateY(1px); }
.err { color:#ff6b6b; min-height:1.2em; }

/* =========================================================
   === LIGHTBOX MED PINCH-ZOOM ===
   ========================================================= */
.lightbox[hidden] { display:none; }

.lightbox {
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.88);
  overflow:hidden;
  touch-action:none;
}

.lightbox img {
  max-width:90vw;
  max-height:70vh;
  display:block;
  border-radius:12px;
  background:#000;
  transform-origin:center center;
  transition:transform 0.05s linear;
  touch-action:none;
  will-change:transform;
}

.lightbox .caption {
  color:#bbb;
  margin-top:8px;
  text-align:center;
}

.lightbox .close {
  position:absolute;
  top:14px;
  right:18px;
  font-size:28px;
  background:transparent;
  border:0;
  color:#fff;
  cursor:pointer;
}

/* =========================================================
   === RESPONSIVITET & BUGG-FIX ===
   ========================================================= */
@media (max-width:768px){
  main, .gallery {
    width:100%;
    max-width:100%;
    margin:16px auto 24px;
    padding:0 8px;
  }
  .gallery {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .tile img {
    border-radius:10px;
    background:#000;
  }
}

/* =========================================================
   === EXTRA FÖR SÄKER CENTRERING ===
   ========================================================= */
.gallery {
  justify-content:center;
}
.gallery .tile {
  max-width:100%;
}
.gallery .tile img {
  max-width:100%;
  height:auto;
  display:block;
}

/* =========================================================
   === FÖRHINDRA AVKLIPPNING HÖGERKANT ===
   ========================================================= */
body, html {
  overflow-x:hidden !important;
}
.gallery {
  overflow:hidden !important;
  margin-left:auto !important;
  margin-right:auto !important;
  width:calc(100% - 0px) !important;
}