/* Novus-appen — en egen, mycket mindre yta än medlemssidorna.
 *
 * Johnny 2026-09-25: «enbart öppna dörren och se sin profil och kunna köpa
 * medlemskap … så enkla menyer så inte allt bara visas direkt. luftigt men ändå
 * så litet så man får plats med mycket men uppdelat på rätt menysystem.»
 *
 * Därav: tre flikar i botten, EN sak per vy, och stora ytor att träffa med
 * tummen. Färgerna och knapparna ärvs från `sajt.css` så appen och sajten inte
 * glider isär.
 */
/* ⛔ LUFTEN FÖR BOTTENMENYN HÖR PÅ INNEHÅLLET, INTE PÅ SIDAN.
   Den satt på `body` — alltså också på inloggningsskärmen, där det inte finns
   någon meny. Resultatet: 844 px innehåll + 76 px tomrum = en sida som rullar
   i en app som inte har något att rulla till. Nu ligger den på `.appmain`, som
   är gömd när man är utloggad, så klarningen finns där menyn finns. */
.appyta { min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column;
  padding: 0; }

.apptopp { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(env(safe-area-inset-top) + .9rem) 1.2rem .9rem; }
.appgym { display: block; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  font-size: .82rem; }
.appstatus { display: block; color: var(--dis); font-size: .86rem; margin-top: .15rem;
  /* En rad, alltid. Ett långt kortnamn knuffade annars «Mer» ur huvudet. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apptopp > div { min-width: 0; }
#dorr-kop { display: flex; justify-content: center; }
.applank { background: none; border: 0; color: var(--dis); font: inherit; font-size: .86rem;
  text-decoration: underline; cursor: pointer; padding: .4rem; }

.appmain { flex: 1; box-sizing: border-box;
  padding: 0 1.2rem calc(76px + env(safe-area-inset-bottom)); }
.appvy { display: flex; flex-direction: column; gap: 1.1rem; padding: 0; }
/* Inloggningen är appens första bild, och den ska se ut som medlemssidornas:
   samma märke, samma foto, samma blå BankID-knapp. Två olika inloggningar till
   samma gym läser som två olika produkter. */
/* ⛔ `border-box`, annars LÄGGS luften till höjden: `min-height: 100dvh` plus
   72 px padding gav en 916 px hög sida i ett 844 px fönster, och då rullar
   inloggningen. Johnny 2026-09-26: *«det går scrolla i appen så något är
   felbyggt»* — en app som gungar när man drar i den läser som en webbsida. */
#vy-in { position: relative; box-sizing: border-box;
  justify-content: center; align-items: center; text-align: center;
  /* ⛔ MÅTTEN KRYMPER MED SKÄRMEN. En fast textstorlek som ryms på en iPhone 15
     rullar på en SE och simär på en Pro Max — Johnny 2026-09-26: *«minska ner
     texten så man inte behöver scrolla, men det är olika på olika telefoner»*.
     `clamp` med `vh` löser det en gång i stället för en bräckpunkt per modell. */
  gap: clamp(.55rem, 2.1vh, 1.3rem); min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + clamp(1rem, 3vh, 2rem)) 1.6rem clamp(1.2rem, 3vh, 2.5rem); }
/* Loggan är det som tar mest plats på en kort skärm. Taket i `vh` gör att den
   viker ner sig i stället för att knuffa knappen under kanten. */
#vy-in .applogga { max-height: 24vh; }
#vy-in #in-text { font-size: clamp(.88rem, 1.9vh, 1rem); margin: 0; }
/* Fotot i eget lager med en slöja över — utan slöjan blir vit text en
   läsbarhetsfråga varje gång kunden byter bild. */
#vy-in::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(6,7,10,.34) 0%, rgba(6,7,10,.18) 42%, rgba(6,7,10,.72) 100%),
    url('/bild/lokalen.jpg') 74% 44% / cover no-repeat; }
#vy-in > * { position: relative; z-index: 1; }
#vy-in .knapp { width: min(100%, 320px); padding: clamp(.62rem, 1.7vh, .95rem) 1.8rem; }
/* Inloggningen: ett fält och en knapp åt gången. ⚠️ `font-size: 16px` är inte
   en smaksak — under det zoomar iOS in sidan när fältet får fokus, och då sitter
   knappen utanför skärmen. */
/* ⛔ ALLT i inloggningen delar EN kolumn. Raden «Inte medlem ännu?» låg utanför
   och blev bredare än fälten — då tappar blocket sin mittlinje och hela sidan
   läser som osymmetrisk, även om varje del för sig är centrerad.
   Johnny 2026-09-26: *«hela första sidan är inte centrerad»*. */
#in-knappar { display: flex; flex-direction: column; align-items: center;
  gap: clamp(.5rem, 1.8vh, 1rem); width: min(100%, 320px); }
#vy-in form { display: flex; flex-direction: column; gap: .7rem; width: 100%; }
.infalt { width: 100%; box-sizing: border-box; padding: clamp(.62rem, 1.7vh, .95rem) 1rem;
  /* ⚠️ 16px är ett GOLV, inte en smaksak: under det zoomar iOS in sidan när
     fältet får fokus, och då hamnar knappen utanför skärmen. */
  font-size: 16px;
  border-radius: 14px; border: 1px solid var(--ram-ljus); background: rgba(6, 7, 10, .72);
  color: var(--vit); font-family: inherit; text-align: center; letter-spacing: .06em; }
.infalt::placeholder { color: var(--dis); letter-spacing: normal; }
#in-kod { letter-spacing: .5em; font-size: clamp(1.1rem, 2.6vh, 1.35rem); font-weight: 700; }
/* Länken på EGEN rad under frågan — på en rad blev det en bruten mening som
   radbröts mitt i. (Johnny: *«lägg bli medlem på Novus Gym under inte medlem än»*.) */
#vy-in .in-webb { margin: .6rem 0 0; }
#vy-in .in-webb a { display: block; margin-top: .3rem; color: var(--vit); }
#in-fel { color: #ff8f8f; }
#vy-in .knapp:not(.tom) { background: var(--blaa); border-color: var(--blaa-ljus); color: var(--vit); }
.applogga { width: min(52vw, 190px); height: auto; color: var(--vit); }
.applogga .lm-namn { font: 700 25px system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
  Arial, sans-serif; letter-spacing: 6.5px; }
.applogga .lm-gym { font: 700 13px system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
  Arial, sans-serif; letter-spacing: 5px; }

/* Dörren: knappen ska gå att träffa utan att titta. */
.dorrknapp { width: min(100%, 320px); max-width: 46dvh; aspect-ratio: 1 / 1;
  margin: .6rem auto .2rem;
  border-radius: 50%; border: 1px solid var(--ram-ljus); background: var(--vit); color: var(--svart);
  font: 800 1.25rem/1.2 inherit; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  display: grid; place-items: center; transition: transform .12s, opacity .2s; }
.dorrknapp:active { transform: scale(.97); }
.dorrknapp:disabled { opacity: .45; cursor: not-allowed; }
.dorrknapp.oppnad { background: #2fbf71; border-color: #2fbf71; }

.appkort { border: 1px solid var(--ram); border-radius: 18px; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .35rem; }
/* ⛔ Egna namn: sajtens `.tal` och `.etikett` bär versaler och ett glödstreck
   (`sajt.css`), och kortet fick ett streck rakt genom undertexten. */
.appkort .apptal { font-size: 2rem; font-weight: 800; line-height: 1; }
.appkort .appunder { color: var(--dis); font-size: .86rem; line-height: 1.45; }

/* Menyn: tre flikar, inget mer. Fler än så och appen blir medlemssidorna igen. */
.appmeny { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(6, 7, 10, .94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--ram); padding-bottom: env(safe-area-inset-bottom); }
.appflik { background: none; border: 0; color: var(--dis); font: inherit; font-size: .74rem;
  padding: .7rem .2rem .8rem; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  cursor: pointer; }
.appflik.aktiv { color: var(--vit); }
.appikon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

.appnotis { position: fixed; left: 1rem; right: 1rem; bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 40; padding: .9rem 1.1rem; border-radius: 14px; font-size: .95rem;
  background: #12301f; color: #bff0cf; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.appnotis.fel { background: #3a1616; color: #ffc9c9; }
.appnotis.varning { background: #3a2f16; color: #ffe6ad; }

/* Närvarokortet. Samma färger som medlemssidornas beläggning (`sajt.css`), så
   grönt betyder samma sak i båda ytorna — men ORDET bär betydelsen, färgen
   förstärker den bara. Var tolfte man ser ingen skillnad på grönt och rött. */
.narvaro .apptal { font-size: 1.5rem; }
.narvaro.gron .apptal { color: #6ee7a8; }
.narvaro.gul .apptal { color: #f2cf6a; }
.narvaro.rod .apptal { color: #ff8f8f; }

/* Ett kort som kräver något av medlemmen — inte ett larm, men inte heller ett
   fält bland andra. */
.appkort.varning { border-color: rgba(242, 207, 106, .45); gap: .6rem; }
.appkort.varning strong { color: #f2cf6a; }
.appkort.varning p { color: var(--dis); font-size: .9rem; margin: 0; }
.appkort.varning .knapp { align-self: flex-start; }

.appvy h2 { font-size: 1.35rem; margin: .4rem 0 0; }
.applankar { display: flex; flex-direction: column;
  border: 1px solid var(--ram); border-radius: 18px; overflow: hidden; }
.applankrad { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.1rem; text-decoration: none; color: var(--vit);
  border-bottom: 1px solid var(--ram); }
.applankrad:last-child { border-bottom: 0; }
.applankrad:active { background: rgba(255, 255, 255, .06); }
.applankrad .pil { color: var(--dis); font-size: 1.2rem; line-height: 1; }
.radera-konto { align-self: flex-start; margin-top: 1.2rem; }
.logga-ut { align-self: flex-start; margin-top: .6rem; opacity: .85; }

.apprad { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--ram); }
.apprad:last-child { border-bottom: 0; }
.apprad .namn { font-weight: 700; }
.apprad .under { color: var(--dis); font-size: .86rem; }
/* Värdet till höger får aldrig knuffa ut namnet: ett långt kortnamn ska brytas,
   inte skjuta datumet utanför skärmen. */
.apprad .varde { text-align: right; }
.appkort .apprad:first-child { padding-top: .2rem; }

@media (min-width: 720px) {
  .appmain, .apptopp { max-width: 560px; margin: 0 auto; width: 100%; }
  .appmeny { max-width: 560px; margin: 0 auto; border-radius: 18px 18px 0 0; }
}

/* Granskningsinloggningen (js/app.js). Liten och diskret — den är till för en
   granskare hos Apple, inte för medlemmar. Ritas bara när servern säger att
   vägen finns. */
#vy-in.med-granskning { justify-content: flex-start; min-height: auto;
  padding-bottom: calc(env(safe-area-inset-bottom) + 3rem); }
.granskaruta { display: flex; flex-direction: column; gap: .5rem; width: min(100%, 320px);
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--ram); }
.granskaruta input { padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--ram);
  background: rgba(6, 7, 10, .7); color: var(--vit); font: inherit; }
.granskaruta .knapp { width: 100%; }