/* ==============================
   GPK Sverige – styles.css
   ============================== */

/* --- Design tokens --- */
:root{
  --paper: #f7f6f3;
  --paper-ink: #222;
  --line: #d9d1bd;
  --line-strong: #c4baa0;
  --accent: #111;
  --muted: #7d7460;
  --own-bg: #f2ffe6;    /* ägd rad-markering */
  --card-bg: #ffffff;
  --hover: #faf7ef;
  --danger: #a62020;
  --ok: #0d7a0d;
}

/* --- Bas --- */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--paper-ink);
  background: var(--paper);
}

/* --- Wrapper för centrering av sidor --- */
.wrapper{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* --- Sticky header/top --- */
.top{
  position: sticky;
  top: 0;
  z-index: 100;
  width:100%;
  background: linear-gradient(#fff, var(--paper));
  border-bottom: 2px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

/* --- Navigationsrad (vänsterjusterad i centrerad container) --- */
.top .brand{
  font-weight: 800;
  font-size: 18px;
  padding: 10px 0;
  margin-right: 16px;
}

.tabs{
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 20px;

  display:flex;
  align-items:center;
  gap: 12px;
}
.tabs a{
  text-decoration:none;
  color:#333;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.tabs a:hover{ background: var(--hover); border-color: var(--line); }
.tabs a.active{ background:#e9e6dc; border-color: var(--line-strong); }
.tabs a.disabled{ opacity:.4; pointer-events:none }

/* --- Huvudinnehåll (centrerat) --- */
.content{
  width:100%;
  max-width:1100px;
  margin: 10px auto 40px auto;
  padding: 0 20px;
}

/* ✅ Ny: Centrerad container som flera sidor använder */
.container{
  width:100%;
  max-width:1100px;
  margin: 10px auto 40px auto;
  padding: 0 20px;
}

/* --- Meddelanden --- */
.msg{
  background:#e8f7e8;
  border:1px solid #bfe0bf;
  padding:8px 10px;
  border-radius:8px;
  margin:10px 0;
}
.error{
  background:#fdeeee;
  border:1px solid #f1c1c1;
  color:#7f1d1d;
  padding:8px 10px;
  border-radius:8px;
  margin:10px 0;
}

/* --- Kort och paneler --- */
.card{
  background: var(--card-bg);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin: 10px 0;
}
.card h2{ margin:6px 0 10px 0 }

/* --- Enkla grids --- */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}
.grid5{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 900px){
  .grid3{ grid-template-columns:1fr }
  .grid5{ grid-template-columns:1fr }
}

/* --- Tabeller (adminlistor) --- */
table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
}
th, td{
  border:1px solid #e5dec8;
  padding:8px 10px;
  text-align:left;
}
thead th{
  background:#faf7ef;
  border-bottom:2px solid var(--line-strong);
}

/* --- Admin-blocks --- */
.block{
  border:1px dashed var(--line-strong);
  border-radius: 10px;
  margin:12px 0;
  background:#fff;
}
.block-head{
  padding:8px 10px;
  background:#faf7ef;
  border-bottom:1px dashed var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.block-actions form{ display:inline }

/* --- Pager --- */
.pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.pager a{padding:4px 8px;border:1px solid #d6ccb6;border-radius:6px;background:#fff;text-decoration:none}
.pager a:hover{background:#f7f2e9}
.pager .current{padding:4px 10px;border:1px solid #9dbb90;background:#eaf6e2;border-radius:6px;font-weight:700}
.pager .disabled{color:#9a9487}
.pager .dots{padding:0 4px;color:#9a9487}

/* --- Toolbar/filter --- */
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:8px 0 16px;
  padding:12px;
  border:2px solid var(--line);
  border-radius:10px;
  background:#fff;
}

/* --- Galleri/Samling – grupperingar --- */
.group{
  background:#fff;
  border:2px solid var(--line);
  border-radius:12px;
  margin-bottom:12px;
}
.group-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  font-weight:800;
}

/* Syskonkort-rad */
.sibling{
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line); /* stabil ram */
  overflow: hidden;            /* håller hörn rena */
  transform: translateZ(0);    /* bälte och hängslen mot hairlines */
}

/* När kortet är “ägt” – behåll grön markering + linje */
.sibling.owned{
  background: var(--own-bg);
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 0 0 2px #d4f5bf;
}

.sib-head{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:6px;
  flex-wrap:wrap;
}

/* ===== Badges (A/B) – alltid tydliga oavsett bakgrund ===== */
.badge{
  display:inline-block;
  padding:2px 8px;
  border:1px solid #c9bea6;
  border-radius:999px;
  background:#fff;
  color:#463f33;
  font-weight:700;
  line-height:1.2;
}
.sibling .badge,
.sibling.owned .badge{
  background:#fff;
  color:#463f33;
}
.sibling .kv{ margin:4px 0; }

/* Thumb-bilder */
.thumb{
  flex: 0 0 128px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;         /* så inget sticker utanför */
  background: transparent;  /* ingen beige bakgrund längre */
}

.thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* hela bilden syns */
  display: block;
  background: #fff;         /* vitt “kortpapper” bakom motivet */
  border: 1px solid #e3dac4; 
  border-radius: 8px;       /* rundade hörn */
  box-sizing: border-box;   /* ramen ryms inom 120×180 */
}


/* Variantlistning */
.variant{
  display:flex;
  gap:8px;
  padding:6px 4px;
  border-top:1px dashed #eee;
}
.variant:first-child{ border-top:0 }

.meta{ flex:1 }
.row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:2px 0;
}

.tag{
  background:#eee;
  border:1px solid #ddd;
  border-radius:6px;
  padding:2px 6px;
  font-size:12px;
}

.note-input{
  min-width:200px;
  max-width:100%;
}

.empty{
  padding:24px;
  text-align:center;
  border:2px dashed var(--line);
  border-radius:12px;
  background:#fff;
}

/* --- Buttons --- */
button, .btn-save{
  padding:6px 10px;
  border:1px solid #c9bea6;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  transition: background-color .15s, border-color .15s;
}
button:hover, .btn-save:hover{ background: var(--hover) }
button.danger{ border-color:#e3b1b1; color:#7a1e1e; }
button.danger:hover{ background:#fdeeee; }

/* --- Inputs --- */
input[type="text"], input[type="number"], input[type="file"], textarea, select{
  width:100%;
  max-width:100%;
  padding:6px 8px;
  border:1px solid #d9d1bd;
  border-radius:8px;
  background:#fff;
}
label{ display:inline-flex; gap:6px; align-items:center }

/* --- Små utilities --- */
.text-right{ text-align:right }
.hide{ display:none !important }

.tabs .admin-links a.active{font-weight:700;text-decoration:underline}
.tabs .admin-links a{padding:6px 8px;border-radius:8px;text-decoration:none;border:1px solid transparent}
.tabs .admin-links a:hover{border-color:var(--line);background:#fff}

/* ===== Klickbar skickskala (1–10), rektangulär och tight ===== */
.grade-wrap { display:flex; flex-direction:column; gap:6px }

/* Själva raden med knappar */
.grade-scale {
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden; /* rundar hela raden */
}

/* Enskild knapp */
.grade-box {
  min-width:24px;           /* kompakt */
  padding:5px 5px;
  line-height:1;
  text-align:center;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  background:#fff;
  border-right:1px solid var(--line);
  transition:background-color .1s ease, color .1s ease;
}
.grade-box:last-child { border-right:none; }

/* neutralt läge (alla färgade stängs av) – styrs av JS */
.grade-box.neutral { background:#fff !important; color:inherit !important; }

/* “vald” knapp färgas – färgen sätts inline av JS */
.grade-box[aria-pressed="true"] { color:#fff; border-right:1px solid transparent; }

/* dold formkontroll för värdet */
.grade-hidden-input { display:none }

/* === Anteckningsfält === */
.note-row {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 4px;
}
.note-label {
  font-weight: 600;
  color: #5c5649;
  font-size: 14px;
}
.note-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d5cdb8;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.note-input:focus {
  outline: none;
  border-color: #9b8c63;
  box-shadow: 0 0 0 2px rgba(155, 140, 99, 0.15);
}

/* ===== Admin-kort ===== */
.admin-card { 
  border:0; border-radius:12px; background:#fff; 
  box-shadow: inset 0 0 0 1px var(--line);
  padding:12px; margin:14px 0; 
}
.admin-card .head {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.admin-card .title { font-size:18px; font-weight:800; }
.code-badge{ display:inline-block; padding:2px 8px; border:1px solid #c9bea6; border-radius:999px; background:#fff; font-weight:700; margin-left:6px }

.admin-grid {
  display:grid; grid-template-columns:160px 1fr; gap:14px;
}
@media (max-width:900px){ .admin-grid{ grid-template-columns:1fr } }

.variant-card{
  border:1px dashed #e1d6ba; border-radius:10px; background:#fff; padding:10px; margin:10px 0;
}
.variant-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;
}
.variant-tags{ display:flex; flex-wrap:wrap; gap:6px }
.tag{ display:inline-block; padding:2px 8px; background:#f6f2e6; border:1px solid #e2d6ba; border-radius:999px; font-size:12px }

.inline-upload{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
}
.variant-grid .wide{
  max-width:100%;
  box-sizing:border-box;
}
summary{ cursor:pointer }

/* ===== Admin: variant-layout – stoppa överlapp och 2x2 fältrader ===== */
.variant-grid{
  display:grid;
  grid-template-columns:180px 1fr; /* mer plats för bilden, formulär får resten */
  gap:12px;
  align-items:start;
}
.variant-grid .vf{ grid-column:2 / 3; }
@media (max-width:900px){
  .variant-grid{ grid-template-columns:1fr; }
}

.meta .row{ margin:6px 0; }

.vf .row2col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:700px){
  .vf .row2col{ grid-template-columns:1fr; }
}

/* === Mobile additions (minimal) === */
@media (max-width: 900px) {
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 12px; }
  .card, .variant { padding: 8px; }
  .filters { position: sticky; top: 0; background: #fff; padding: 8px; z-index: 10; border-bottom: 1px dashed #ddd; }
  .filters label { display: block; margin: 6px 0; }
  .card-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; }
  .card img, .variant img { max-width: 100%; height: auto; }
  .form-actions { position: sticky; bottom: 0; background: #fff; padding: 8px; border-top: 1px dashed #ddd; }
  .auth-slot { font-size: 0.95em; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .card-row { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 1.25rem; }
  button, .filters select, .filters input { font-size: 1rem; }
}

/* ======= Top Nav (site-header) ======= */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fffdfa;
  border-bottom: 1px solid #e6e0d3;
  backdrop-filter: saturate(120%) blur(2px);
}
.site-header__bar {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 10px 16px;
}
.site-header__brand {
  display: flex; align-items: center; min-width: 0;
}
.site-header__brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.site-header__brand-mark {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: #f2ede2; color: #8e826e; font-weight: 800; letter-spacing: 0.5px;
  border: 1px dashed #d9d1c1;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.site-header__brand-text {
  color: #5b5243; font-weight: 700; white-space: nowrap;
}

.site-header__nav {
  display: inline-flex; align-items: center; gap: 14px;
  justify-content: center; white-space: nowrap;
}
.site-header__link {
  color: #5b5243; text-decoration: none; padding: 6px 8px; border-radius: 8px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.site-header__link:hover { background: #f7f2e9; color: #3a342a; }
.site-header__link.is-active {
  background: #f2ede2; color: #2f2a22; font-weight: 700;
  box-shadow: inset 0 0 0 1px #e0d8c9;
}

.site-header__divider {
  width: 1px; height: 22px; background: #e6e0d3; display: inline-block; margin: 0 4px;
}

.site-header__account {
  display: inline-flex; align-items: center; gap: 10px; justify-content: end;
}
.site-header__btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 12px; border-radius: 10px;
  background: #5f8e5d; color: #fff; text-decoration: none; font-weight: 700;
  border: 1px solid #4f7a4d; box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .04s ease, filter .15s ease, background .15s ease;
}
.site-header__btn:hover { filter: brightness(1.05); }
.site-header__btn:active { transform: translateY(1px); }
.site-header__btn--ghost {
  background: transparent; color: #5b5243; border: 1px dashed #d9d1c1;
}
.site-header__btn--ghost:hover { background: #f7f2e9; }

.site-header__chip {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 3px 8px; border-radius: 999px; background: #f2ede2; color: #3a342a;
  border: 1px dashed #d9d1c1;
}
.site-header__chip-text { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header__avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: #dfeadf; color: #2c5a2a; font-weight: 800; font-size: 12px;
  display: inline-grid; place-items: center; border: 1px solid #c7dbc7;
}

/* Responsivitet */
@media (max-width: 900px) {
  .site-header__bar { grid-template-columns: 1fr auto; gap: 10px; }
  .site-header__nav { order: 3; grid-column: 1 / -1; justify-content: start; overflow-x: auto; padding-bottom: 6px; }
  .site-header__brand-text { display: none; } /* behåll liten GPK-bricka i mobilen */
  .site-header__chip-text { max-width: 110px; }
}
@media (max-width: 600px) {
  .site-header__link { padding: 6px 10px; }
  .site-header__btn { height: 32px; border-radius: 9px; padding: 0 10px; }
}
/* Om någon förälder har overflow:hidden; låt headern rita ovanför */
.site-header { position: relative; }

/* --- Fix: gör toppmenyn full-bleed oavsett förälder --- */
.site-header{
  /* bredda till full viewport-bredd även om föräldern är centrerad/narrow */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* se till att den inte hamnar bakom annat */
  z-index: 1000;
}

/* Om någon förälder råkar ha overflow: hidden; förhindrar vi sidledsklipp */
.site-header, .site-header * {
  box-sizing: border-box;
}

.grade-title { font-weight: 700; margin: 6px 0 4px; }
.no-variants-msg { margin-top: 8px; }

/* ============================================================
   ✅ NYA FIXAR efter borttagen mobile.css
   - Centrering via .container (se ovan)
   - Rimliga bildmått i grupper (galleri/samling)
   - “Plats för bild” även om fil saknas
   ============================================================ */

/* Bilder ska aldrig explodera i bredd */
.card img { max-width:100%; height:auto; display:block; }

/* I listor/grupper: håll thumb-storlek konsekvent */
.group .lightbox,
.group .thumb { 
  display:inline-block; 
  width:140px; height:180px; 
  background:#faf7ef; 
  border:1px solid #e3dac4; 
  border-radius:8px; 
  overflow:hidden;
}

/* Själva bilden i gruppkorten */
.group .lightbox img { 
  width:100%; height:100%; object-fit:contain; display:block;
}

/* Lite luft runt A/B-rutorna (matchar “biblioteket”) */
.group .card { padding:8px; }

/* Serieheader-bilden får andas men tar inte över – begränsa maxhöjd i toppkortet */
.card > img.lightbox, 
.card > a.lightbox > img { max-height: 340px; }

/* Rubrikstorlekar (dämpa “allt är stort”-känslan lite) */
h1 { font-size: 22px; margin: 12px 0; }
h2 { font-size: 18px; }

/* === Additions for collection/index polish (Oct 2025) === */
.container { max-width: 1080px; margin: 0 auto; padding: 16px; }
.card { background: #fffef8; border: 1px solid #e6e2d9; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); margin-bottom: 16px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.header-card h1 { margin: 0 0 8px; }
.quick-search { display:flex; gap:8px; margin-top:12px; }
.quick-search input[type="text"] { flex:1; padding:8px 10px; border:1px solid #d9d4c9; border-radius:6px; }
.quick-search button { padding:8px 12px; border:1px solid #d9d4c9; background:#faf6ea; border-radius:6px; cursor:pointer; }

.news-list, .facts { padding-left:18px; margin:0; }
.random-card { display:flex; gap:16px; align-items:flex-start; }
.random-card .thumb { width:160px; height:220px; background:#f4efe4; border:1px dashed #ddd; display:flex; align-items:center; justify-content:center; border-radius:8px; overflow:hidden; }
.random-card img { width:100%; height:100%; object-fit:contain; }
.random-card img.img-missing { background:#f8f1dc; content:''; }
.random-card .meta .title { font-weight:600; }
.btn { display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid #d9d4c9; background:#faf6ea; text-decoration:none; }
.btn-primary { background:#e9f7e9; border-color:#b9e0b9; }
.btn-secondary { background:#eef2ff; border-color:#c7d2fe; }

.cards-grid { display:grid; grid-template-columns: 1fr; gap:12px; }
.row-card { display:flex; gap:12px; }
.row-card .thumb { width:120px; height:160px; background:#f4efe4; border:1px dashed #ddd; border-radius:8px; overflow:hidden; flex:0 0 auto; }
.row-card .thumb img { width:100%; height:100%; object-fit:contain; }
.row-card .meta { flex:1; display:flex; flex-direction:column; gap:8px; }
.title small { color:#7a7466; }

.has-checkbox { display:inline-flex; align-items:center; gap:6px; margin-top:4px; }

.grade-scale { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.grade-scale.small { gap:4px; }
.grade-scale .grade-radio { display:none; }
.grade-scale label[data-grade] { 
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; border:1px solid #d0c8b8; cursor:pointer; font-size:12px; user-select:none;
  background: linear-gradient(#fffdf6, #f1ecde);
}
.grade-scale.small label[data-grade] { width:22px; height:22px; font-size:11px; }
.grade-scale .grade-radio:checked + label { 
  outline:2px solid #6aa84f; box-shadow: 0 0 0 2px #c6e3b8 inset; 
}
.grade-scale .grade-clear { font-size:12px; color:#7a7466; display:inline-flex; align-items:center; gap:6px; }
.note input[type="text"] { width:100%; max-width:420px; padding:6px 8px; border:1px solid #d9d4c9; border-radius:6px; }

.variant-list { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.variant-row { display:grid; grid-template-columns: 1fr auto auto 1fr; align-items:center; gap:8px; padding:8px; border:1px dashed #e2dbc9; border-radius:8px; background:#fffcf3; }
.variant-row .v-meta { font-size:14px; }
.tag { display:inline-block; padding:2px 6px; border:1px solid #d9d4c9; border-radius:999px; font-size:11px; background:#f7f4ea; }
.tag-rare { background:#fff4d6; border-color:#f8dc9b; }

.save-bar { position:sticky; bottom:8px; background:transparent; padding:8px 0; }
.flash { padding:10px 12px; border-radius:8px; }
.flash-success { background:#e9f7e9; border:1px solid #b9e0b9; }

/* Placeholder-bilder ska inte klippas */
img { image-rendering:auto; }
img.img-missing { background:#f6f0df; }
.thumb img { object-fit:contain; }

/* Tvingad radbryt i en flex-rad */
.row-break{
  flex-basis: 100%;
  height: 0;          /* tar ingen vertikal plats */
}

/* “Skick:” direkt till vänster om 1–10 */
.grade-title{
  display: inline-block;
  margin: 0 6px 0 0;  /* liten luft före knappraden */
  font-weight: 700;
}