/* Laptop/Tablet (1024px) LIGGANDE IPHONE */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
}

/* Tablet Portrait (768px) STÅENDE IPHONE */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
}

/* Phone Landscape (480px) INGET */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
}

/* Phone Portrait (320px) INGET */
@media only screen and (max-width: 320px) {
}

/* Mobilanpassning - baserad pa bredd (max-width), inte orientation.
   Tidigare kordes detta block bara i "orientation: portrait", vilket gjorde
   att en telefon i liggande lage (landscape) aldrig fick nagon mobilanpassning
   alls, samtidigt som stora skarmar i staende lage (t.ex. en portratt-monitor)
   felaktigt fick mobilstilarna. max-width: 768px traffar telefoner oavsett
   rotation, och lamnar surfplattor/datorer i fred. */
@media only screen and (max-width: 768px) {
  /* Har fanns tidigare en regel som satte bas-textstorleken till 1.75x pa
     mobil. Den hade legat i koden lange men aldrig synts: sa lange sidan
     saknade en viewport-meta-tagg zoomade mobila webblasare ut hela sidan for
     att fa plats med det antagna 980px-breda skrivbordslaget, vilket i
     praktiken tog bort effekten oavsett vad som stod har. Nar viewport-taggen
     kom pa plats blev 1.75x av 16px (28px) alldeles for stort. Regeln ar
     borttagen; mobilen anvander samma 15px som resten av sajten. */
  section {
    flex-direction: column;
  }

  h1 {
    font-size: 1.5em;
  }
  .left-column {
    width: 100%;
    border: none;
    padding: 0;
    display: flex;
    margin: 0 0 2em 0;
  }
  .left-column .box {
    flex: 1;
    margin: 0 1em 0 0;
    padding: 1em;
  }
  .left-column .box:last-child {
    margin: 0;
  }


  .previous.left-column, .start.left-column {
    display: block;
    flex: none;
  }
  .previous.left-column .box {
    margin: 0 0 1em;
  }


  .main-column {
    width: 100%;
    border: none;
    padding: 0;
    flex: none;
    margin: 0 0 2em 0;
  }
  .main-column .box {
    margin: 0 0 1em 0;
  }
  .main-column .box:last-child {
    margin: 0;
  }
  .right-column {
    width: 100%;
    border: none;
    padding: 0;
    margin: 0;
  }


  .button {
    padding: 0.25em 0.5em;
  }
  .button img {
    max-height: 1em;
  }

  header {
    flex-direction: column;
  }

  .nameContainer {
    margin-top: 1em;
  }
  .totalContainer {
    margin-top: 1em;
    text-align: right;
  }
  .previousContainer {
    text-align: right;
    flex: 1;
    width: auto;
  }

  .start input {
    font-size: 2em;
    padding: 0.5em;
  }

  .modalBg {
    align-items: baseline;
  }

  .modalWrapper {
    padding: 5em 0 0 0;
    max-width: 100%;
  }

  .modalContent {
    width: 100vw;
    min-height: 50vh;
  }


  .menu_mobile {
    display: block;
  }

  .menu_desktop {
    display: none;
  }


  nav .close {
    top: 1em;
    right: 1em;
  }

  /* Deltagarkortens rad (namn/telefon till vänster, tabell med belopp och
     Swisha-knapp till höger) stod tidigare sida vid sida även på smala
     skärmar - då fick tabellen bara en bråkdel av bredden och klipptes av
     i sidled (t.ex. gick Swisha-knappen inte att se helt). Staplas nu
     istället under varandra, så tabellen får hela kortets bredd. */
  .attendant > .flexRows {
    flex-direction: column;
  }

  /* Säkerhetsnät ifall den första tabellen (Delaktig/Betalat/Ska betala)
     ändå inte får plats - svep i sidled istället för att klippas av tyst.
     Den andra tabellen (med Swisha-knappen) har sin egen .tableScroll-
     wrapper i attendant.php som gör samma sak, se styles.css. */
  .attendant .flex2 {
    overflow-x: auto;
  }

  /* De två tabellerna i deltagarkortet (Delaktig/Betalat/Ska betala, och
     Ska betala till/Belopp/Betalat/Kvar/Swisha-knapp) är för trångt packade
     med fem kolumner på en smal skärm. Istället för att låta dem svepas i
     sidled (vilket gömde Swisha-knappen bakom en skrollbar) görs texten och
     mellanrummen mer kompakta här så att allt får plats direkt. */
  .attendant table.fullWidth {
    font-size: 0.8em;
  }
  .attendant table.fullWidth td {
    padding: 0.4em 0.3em;
  }
  .attendant .tableScroll {
    margin-top: 0.75em;
  }

  /* "Ska betala till"-kolumnen (namnet) hade width:100% via .fullWidth, vilket
     tvingade den att svälja allt ledigt utrymme i raden även när namnet är
     kort ("Lisa") - det var utrymmet som knappen egentligen behövde. Namnet
     får nu bara den bredd det faktiskt behöver, så "Swisha"-texten får plats
     i knappen igen. */
  .attendant .tableScroll td.fullWidth {
    width: auto;
  }

  .attendant .tableScroll .button {
    padding: 0.25em 0.4em;
  }

  /* Kostnadskortets rubrikrad (namn till vänster, belopp+"kr" till höger)
     låg sida vid sida i en 4:1-bredd (.flex4/.flex1) - det förhållandet
     kommer från skrivbordets breda kort, men på en smal telefonskärm blir
     .flex1-kolumnen bara 60-70px medan beloppsfältet (.ajaxNumber, 6em vid
     h3:s 1.25em-textstorlek, dvs ca 110px) plus " kr" behöver betydligt mer.
     Kortet har overflow:hidden, så resten klipptes tyst bort i högerkanten.

     Försökte först stapla namn/belopp under varandra (samma mönster som
     deltagarkortet), men det gav dels oönskad extra luft, dels flyttade bort
     beloppet från sin vanliga plats uppe i högerkanten - inte vad som
     efterfrågades. Behåller nu istället samma rad, och gör som med
     deltagarkortets Swisha-tabell: krymper text och breddar
     belopp-kolumnens andel av utrymmet så att "kr" får plats utan att
     klippas eller radbrytas. */
  .costHeaderRow .flex4 {
    flex: 1;
  }
  .costHeaderRow .flex1 {
    flex: 1;
  }
  .costHeaderRow h3 {
    font-size: 1.1em;
  }
  /* 4.5em räckte så länge belopp visades i hela kronor ("12 345"), men med
     öreprecisionen blev texten tre tecken längre ("12 345,50") och fältet
     hade då bara 0,8 px marginal kvar - ett sexsiffrigt belopp klipptes.
     Uppmätt vid 320, 375 och 390 px: 6em rymmer "123 456,78" med marginal,
     och kostar bara 6 px av namnfältet vid 320 px (inget alls vid 375 px). */
  .costHeaderRow .ajaxNumber {
    width: 6em;
  }
  /* Namnfältet (.costName) har ingen egen bredd satt någonstans, så det
     använde webbläsarens standardbredd för textfält (ca 170-190px,
     bestäms av fältets storleksattribut, oberoende av det faktiska namnet).
     Den bredden krympte inte tillsammans med resten av layouten på en
     smal skärm, vilket tvingade undan beloppskolumnen. Fältet får nu
     istället fylla hela sin kolumn och krymper med den. */
  .costHeaderRow .costName {
    width: 100%;
  }


}