/* ============================================================
   KID.CSS – stil for barnesiden
   ------------------------------------------------------------
   Alt som tidligere lå inline er flyttet hit. Filen er delt i:
   1) Basiskomponenter (kort, knapper, tekst)
   2) Header (hilsen + poeng + kiste)
   3) Oppgaveliste (layout for ikon/knapp/tittel/poeng)
   4) Modal (premiekiste)
   5) Tilpasninger for små skjermer
   ============================================================ */

/* Lås horisontal scrolling/overscroll og tillat kun vertikal panning */
html, body {
  height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

/* Sørg for at bakgrunn og innhold strekker seg helt ned bak home-indicator
   og legg til trygg bunn-padding for safe area */
body{
  min-height: 100vh;
  min-height: 100dvh; /* moderne enheter */
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Ekstra sikring på innpakningene */
#content, .wrap {
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* -------------------------
   1) BASISKOMPONENTER
   ------------------------- */

.wrap { padding: 16px; }

.card{
  background:#111827;
  color:#fff;
  padding:16px;
  border-radius:12px;
}

/* 50% større UI for hele innholdet (ikke navbar) */
#content { font-size: 1.5em; }

.muted { color:#9ca3af; font-size: 0.9em; }

.chip{
  display:inline-block;
  padding:6px 10px;
  border:1px solid #1f2937;
  border-radius:999px;
  color:#9ca3af;
  font-size:12px;
}

.chip.info { color:#60a5fa; }
.chip.warn { color:#fbbf24; }

.btn{
  padding:8px 12px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:700;
}
.btnPrimary{ background:#10b981; color:#052e16; }
.btnSecondary{ background:#334155; color:#e5e7eb; }
.btnTiny{ padding:8px 12px; border-radius:8px; border:none; cursor:pointer; font-weight:700; }
.btnGreen{ background:#10b981; color:#052e16; }
.btnBlue{ background:#3b82f6; color:#082f49; }
.btnDisabled{ opacity:.6; cursor:default; }

.icon{ width:100px; height:100px; margin-right:12px; display:block; }

/* Toppseksjon med tittel + knapp */
.section-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* -------------------------
   2) HEADER
   ------------------------- */

.header-card { margin-bottom:16px; }

/* Grid:
   greeting | points
   chest    | points
*/
.kid-head{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "greeting points"
    "chest    points";
  align-items:center;
  column-gap:16px;
  row-gap:12px;
}

.kid-head .greeting{ grid-area:greeting; margin:0; line-height:1.1; }

.points-stack{
  grid-area:points;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.points-badge{
  width:100px; height:100px; border-radius:50%;
  background:gold; color:#000; font-weight:800; font-size:1.8em;
  display:flex; align-items:center; justify-content:center;
}
.section-title{ font-size:1.1em; }

.treasure-btn{
  grid-area:chest;
  background:transparent; border:0; padding:0; cursor:pointer;
}
.treasure-btn img{ width:72px; height:auto; display:block; }

/* Gruppe for kiste + levelmerke */
.chest-wrap{
  grid-area:chest;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.level-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #1f2937;
  color:#93c5fd; /* blålig for å skille fra poeng */
  font-size: 0.9em;
}

/* -------------------------
   3) OPPGAVELISTE
   ------------------------- */

/* Hver oppgave er et kort med grid-layout:
   [left]  ikon + Ferdig-knapp (vertikalt)
   [right] tittel + poengmynt + status
*/
.task{
  border:1px solid #1f2937;
  border-radius:10px;
  padding:18px 16px;
  margin-bottom:10px;
  background:#0b1020;
}

.taskRow{
  display:grid;
  grid-template-columns: auto 1fr;
  column-gap:16px;
  align-items:center;
}

/* Venstre kolonne: ikon + knapp under */
.taskRow .left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* Høyre kolonne: tittel + coin på samme linje, status under */
.taskRow .right{ display:flex; flex-direction:column; gap:8px; }

.taskRow .topline{
  display:grid;
  grid-template-columns: 1fr auto; /* title | right stack */
  grid-template-rows: auto auto; /* weekday above coin */
  align-items:start;
  gap:8px 12px;
}
/* Place title to span left column across two rows */
.taskRow .topline .title{ grid-column: 1; grid-row: 1 / span 2; }
/* Stack weekday on top of coin at top-right */
.taskRow .topline .weekday-col{ grid-column: 2; grid-row: 1; justify-content: flex-end; }
.taskRow .topline .coin{ grid-column: 2; grid-row: 2; justify-self: end; }

/* Egen kolonne for ukedagslabel */
.taskRow .weekday-col{
  min-width: 46px; /* litt større enn chip min-bredde */
  display:flex;
}

/* Ukedags-chip i liste */
.weekday-chip{
  min-width: 38px;
  text-align: center;
}

.taskRow .title{ font-weight:700; line-height:1.2; font-size: 1.1em; }
/* Reduce only the task title text size (approx -30%) */
.taskRow .task-title{ font-size: .7em; }

/* Late marker badge (⚠️) – simple inline, no background circle */
.late-badge{
  display:inline-flex; /* keep with text, but center SVG */
  align-items:center;
  margin-left:8px; /* space from title */
  font-size:1.4em; /* a bit larger than text */
  line-height:1; /* keep compact */
  color:#f59e0b; /* amber-500 stroke/fill for outline */
  vertical-align:middle;
}
.late-badge svg{ display:block; }

/* Gullmynt for poeng */
.coin{
  width:44px; height:44px; border-radius:50%;
  background:gold; color:#000; font-weight:800; font-size:0.95em;
  display:flex; align-items:center; justify-content:center;
}

.doneBtn{ min-width:120px; }

/* Kun grønn hake ved godkjent */
.ok-check{
  color:#22c55e; font-weight:900;
  font-size: 1.1em;
}

/* -------------------------
   4) MODAL (premiekiste)
   ------------------------- */

.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  padding:20px; z-index:50;
}

.sheet{
  background:#0b1020;
  border:1px solid #1f2937;
  border-radius:20px;
  max-width:672px; width:100%;
  padding:20px; color:#fff;
  font-size: 1.2em; /* ~20% større innhold i modalen */
}

.sheet-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}

/* Knappestørrelser i modalen */
/* Hent premie – IKKE øk tekststørrelse (bind til root med rem) */
.sheet .reward-item .btnTiny {
  font-size: 1rem;
}

/* Lukk-knappen – ~20% større */
#closeRewards.btnTiny {
  font-size: 1.2em;
  padding: 10px 14px; /* ~20% større enn 8px 12px */
  border-radius: 10px;
}

.reward-item{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid #1f2937; border-radius:10px;
  padding:12px 14px; margin-bottom:12px; background:#0b1020;
}

.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid #1f2937; color:#9ca3af; font-size:12px;
}

.need{ color:#fbbf24; font-size:12px; margin-left:8px; }

/* -------------------------
   5) SMÅ SKJERMER
   ------------------------- */

/* På veldig smale skjermer kan vi justere litt spacing */
@media (max-width: 430px){
  .icon{ width:84px; height:84px; }

  .points-badge{ width:88px; height:88px; font-size:1.6em; }

  /* Even smaller 'Ferdig' button on very small screens */
  .doneBtn{ min-width:100px; padding:6px 10px; font-size:.9em; }
}

/* Oppdater-knapp (grønt, rundt ikon) */
.iconBtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:9999px; border:none; cursor:pointer;
}

.btnRefresh{
  background:#10b981; color:#052e16;
  box-shadow:0 2px 12px rgba(16,185,129,.25);
}
.btnRefresh:hover{ filter:brightness(1.05); }
.btnRefresh:active{ transform:scale(.98); }

/* SVG-ikon */
.btnRefresh svg{
  width:22px; height:22px; fill:currentColor;
}

/* Spinner når vi laster */
@keyframes spin{ to { transform: rotate(360deg); } }
.btnRefresh.spinning svg{ animation: spin .8s linear infinite; }