/* Kundsidan.
   Samma palett som adminportalen — hylsmässing, asfaltgrönt, blekt papper —
   men lugnare: en spalt, luftigare, och nästan ingen versalsatt mono. Admin är
   en kontrollpanel; det här är någons kväll vid köksbordet.

   Signaturen är annonsnamnet: det slumpas fram när annonsen skapas, ska skrivas
   för hand på lappen i bevisbilden, och är det enda köparen ser. Därför får det
   ta plats. */

:root {
  --botten:   #E4E7E1;
  --yta:      #FBFCFA;
  --yta-sank: #EDF0EA;
  --black:    #1B1E1A;
  --dampad:   #676D63;
  --linje:    #CBD0C5;
  --massing:  #8A7128;
  --massing-ljus: #B79A45;
  --oxid:     #8E3B22;
  --gron:     #3E5C3A;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --brod: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rad: 4px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--botten);
  color: var(--black);
  font: 16px/1.6 var(--brod);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1 { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 0 0 .4rem; }
p { margin: 0 0 .9rem; }
a { color: var(--gron); }

/* --- Topp och fot ---------------------------------------------------------- */

.topp {
  border-bottom: 1px solid var(--linje);
  background: var(--yta);
  padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 60px;
}

.marke-namn {
  font: 13px/1 var(--mono);
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--black); text-decoration: none;
}

.topp nav { display: flex; align-items: center; gap: .3rem; }
.topp nav a {
  font-size: .92rem; color: var(--dampad); text-decoration: none;
  padding: .5rem .7rem; border-radius: var(--rad);
}
.topp nav a:hover { background: var(--yta-sank); color: var(--black); }
.topp nav a[aria-current="page"] { color: var(--black); background: var(--yta-sank); }

.olasta {
  display: inline-block; min-width: 1.3rem; text-align: center;
  background: var(--oxid); color: #fff; border-radius: 999px;
  font: 11px/1 var(--mono); padding: .3rem .35rem; margin-left: .2rem;
}

.topp button {
  background: none; border: 0; cursor: pointer;
  font-size: .92rem; color: var(--dampad); padding: .5rem .7rem;
}
.topp button:hover { color: var(--oxid); }

.fot {
  margin-top: auto; border-top: 1px solid var(--linje);
  padding: 1.5rem; text-align: center;
}
.fot p {
  margin: 0 auto; max-width: 44rem;
  font-size: .82rem; color: var(--dampad);
}

/* --- Innehåll --------------------------------------------------------------- */

.vy { width: 100%; max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
.ledtext { color: var(--dampad); margin-bottom: 2rem; }

.kort {
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: var(--rad);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1rem;
}

.etikett {
  display: block; margin-bottom: .6rem;
  font: 11px/1 var(--mono);
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--dampad);
}

.liten { font-size: .87rem; }
.dampad { color: var(--dampad); }
.mono { font-family: var(--mono); font-size: .88rem; }

/* --- Annonsnamnet: signaturen ------------------------------------------------ */

.annonsnamn {
  display: block;
  font: 600 1.6rem/1.2 var(--brod);
  letter-spacing: -0.01em;
  color: var(--massing);
  padding: 1rem 0 .3rem;
}
.annonsnamn-hjalp { font-size: .87rem; color: var(--dampad); margin: 0; }

.lapp {
  margin: 1.2rem 0;
  padding: 1.1rem 1.2rem;
  background: #F3EEDD;
  border: 1px solid #DDD0A8;
  border-radius: var(--rad);
  transform: rotate(-0.4deg);
}
.lapp-rad { font: 600 1.15rem/1.5 var(--brod); }
.lapp p { margin: .5rem 0 0; font-size: .85rem; color: #6B5A22; }

/* --- Märken ------------------------------------------------------------------ */

.marke {
  display: inline-block;
  font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  padding: .38rem .5rem; border-radius: var(--rad);
  background: var(--yta-sank); color: var(--dampad);
}
.marke-publicerad { background: #DCE6D8; color: var(--gron); }
.marke-granskas   { background: #EFE6CC; color: var(--massing); }
.marke-nekad      { background: #EFDCD5; color: var(--oxid); }
.marke-utkast     { background: var(--yta-sank); color: var(--dampad); }

/* --- Formulär ---------------------------------------------------------------- */

label { display: block; font-size: .87rem; color: var(--dampad); margin: 1.1rem 0 .35rem; }

input[type="text"], input[type="number"], input[type="email"], select, textarea {
  width: 100%; padding: .7rem .8rem;
  border: 1px solid var(--linje); border-radius: var(--rad);
  background: #fff; color: var(--black);
  font: 16px/1.5 var(--brod);
}
textarea { resize: vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--massing); outline-offset: 2px;
}

.knapp {
  font: 500 .95rem/1 var(--brod);
  padding: .8rem 1.2rem; border-radius: var(--rad);
  border: 1px solid var(--black); background: var(--black); color: var(--yta);
  cursor: pointer;
}
.knapp:hover { background: #2A2E28; }
.knapp[disabled] { opacity: .45; cursor: not-allowed; }
.knapp-tyst { background: none; color: var(--dampad); border-color: var(--linje); }
.knapp-tyst:hover { background: var(--yta-sank); color: var(--black); }
.knapp-fara { background: var(--oxid); border-color: var(--oxid); }
.knapp-liten { padding: .5rem .7rem; font-size: .85rem; }

.knapprad { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.3rem; }

/* --- Meddelanden ------------------------------------------------------------- */

.varning {
  border-left: 3px solid var(--massing);
  background: #F3EEDD;
  padding: 1rem 1.1rem; border-radius: var(--rad);
  margin-bottom: 1.2rem; font-size: .93rem;
}
.varning.fara { border-left-color: var(--oxid); background: #F4E4DD; }
.varning.gott { border-left-color: var(--gron); background: #E2EADD; }
.varning p:last-child { margin-bottom: 0; }

.notis {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: var(--black); color: var(--yta);
  padding: .9rem 1.2rem; border-radius: var(--rad);
  font-size: .92rem; z-index: 60; max-width: 34rem;
}
.notis.fel { background: var(--oxid); }

/* --- Listor ------------------------------------------------------------------ */

.annonsrad {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linje);
}
.annonsrad:last-child { border-bottom: 0; padding-bottom: 0; }
.annonsrad:first-child { padding-top: 0; }
.annonsrad h2 { margin-bottom: .2rem; }

.meddelande { padding: 1.1rem 0; border-bottom: 1px solid var(--linje); }
.meddelande:last-child { border-bottom: 0; }
.meddelande.olast { border-left: 3px solid var(--massing); padding-left: .9rem; margin-left: -.9rem; }
.meddelande-text { white-space: pre-wrap; }

.tom { text-align: center; padding: 3rem 1rem; color: var(--dampad); }

[hidden] { display: none !important; }

@media (max-width: 620px) {
  .topp { flex-wrap: wrap; padding: .8rem 1rem; }
  .vy { padding: 1.8rem 1rem 3rem; }
  .annonsrad { flex-direction: column; gap: .5rem; }
}

/* --- Bildval ------------------------------------------------------------------ */

.bildval { margin: 1.2rem 0; }
input[type="file"] {
  width: 100%; padding: .7rem;
  border: 1px dashed var(--linje); border-radius: var(--rad);
  background: #fff; font: .9rem/1.4 var(--brod);
}
input[type="file"]::file-selector-button {
  font: 500 .85rem/1 var(--brod);
  padding: .5rem .8rem; margin-right: .8rem;
  border: 1px solid var(--linje); border-radius: var(--rad);
  background: var(--yta-sank); color: var(--black); cursor: pointer;
}

/* --- Uppladdade bilder --------------------------------------------------------- */

.bildrad { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.bild { margin: 0; }
.bild img {
  display: block; width: 130px; height: 130px; object-fit: cover;
  border: 1px solid var(--linje); border-radius: var(--rad); background: var(--yta-sank);
}
.bild figcaption { font-size: .78rem; color: var(--dampad); margin-top: .3rem; max-width: 130px; }

.klar {
  font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  background: #DCE6D8; color: var(--gron);
  padding: .3rem .4rem; border-radius: var(--rad); margin-left: .4rem;
}

.lankknapp {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--oxid); text-decoration: underline;
}

.besked-text { white-space: pre-wrap; }

/* --- Frågor och svar ------------------------------------------------------------ */

.fragasvar { padding: 1.1rem 0; border-bottom: 1px solid var(--linje); }
.fragasvar:last-child { border-bottom: 0; padding-bottom: 0; }
.fragasvar:first-of-type { padding-top: .2rem; }
.fragasvar h2 { margin-bottom: .5rem; }
.svarstext { white-space: pre-wrap; margin: 0; }

/* --- Torget --------------------------------------------------------------------- */

.vy-bred { max-width: 68rem; }

.filter { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.filter input[type="search"] { flex: 1 1 16rem; }
.filter select { flex: 0 1 12rem; }

.kategoriflikar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem;
  padding-bottom: 1rem; margin-bottom: .6rem;
  border-bottom: 1px solid var(--linje);
}
.nivagrupp { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
.nivanamn {
  font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--dampad); margin: 0 .2rem 0 .6rem;
}

.flik {
  font-size: .87rem; color: var(--dampad); text-decoration: none;
  padding: .45rem .7rem; border-radius: var(--rad);
}
.flik:hover { background: var(--yta-sank); color: var(--black); }
.flik-vald { background: var(--black); color: var(--yta); }
.flik-vald .dampad { color: var(--massing-ljus); }
.flik-last { opacity: .65; }

.torg {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin-bottom: 2rem;
}

.torgkort {
  display: block; text-decoration: none; color: inherit;
  background: var(--yta); border: 1px solid var(--linje);
  border-radius: var(--rad); overflow: hidden;
  transition: border-color .12s;
}
.torgkort:hover { border-color: var(--massing); }
.torgkort h2 { font-size: 1rem; margin: .8rem .9rem .2rem; }
.torgkort p { margin: 0 .9rem .3rem; }
.torgkort p:last-child { margin-bottom: .9rem; }

.torgbild {
  aspect-ratio: 4 / 3; background: var(--yta-sank);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--linje);
}
.torgbild img { width: 100%; height: 100%; object-fit: cover; }
.ingenbild { font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--dampad); }

.torgpris { font-weight: 600; }
.torgpris.stor { font-size: 1.4rem; margin-bottom: 1.2rem; }

.sidrad { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }

.topp nav .knapp-liten { color: var(--yta); text-decoration: none; padding: .5rem .9rem; }
.topp nav .knapp-liten:hover { background: #2A2E28; }
#inloggat { display: contents; }

/* --- Startsidans introduktion ---------------------------------------------------- */

.start { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 1.6rem; }
.startbild { flex: none; width: 150px; height: 150px; }
.starttext { min-width: 0; }
.starttext h1 { font-size: 1.55rem; line-height: 1.25; margin-bottom: .7rem; }
.starttext .ledtext { margin: 0; }

.startetikett {
  font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .14em;
  color: var(--massing); margin: 0 0 .7rem;
}

.startpunkter {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px; background: var(--linje);
  border: 1px solid var(--linje); border-radius: var(--rad);
  overflow: hidden; margin-bottom: 1.6rem;
}
.startpunkter > div { background: var(--yta); padding: .95rem 1.1rem; }
.startpunkter p { margin: 0; }

.punktnamn {
  font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: .35rem !important;
}
.punktnamn.gron { color: var(--gron); }
.punktnamn.massing { color: var(--massing); }
.punktnamn.oxid { color: var(--oxid); }

.antal, .las { color: var(--dampad); font-size: .85em; }

@media (max-width: 620px) {
  .start { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .startbild { width: 110px; height: 110px; }
}

.typval { display: flex; gap: 1.4rem; margin: .3rem 0 .9rem; }
.typval label { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: 1rem; color: var(--black); }
.typval input { width: auto; }

.sidtext h2 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
.sidtext h2:first-child { margin-top: 0; }
.sidtext .svarstext { margin-bottom: 1rem; }
.fot p a { margin: 0 .2rem; }

/* --- Min profil ------------------------------------------------------------------ */

.profilrutor {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px; background: var(--linje);
  border: 1px solid var(--linje); border-radius: var(--rad);
  overflow: hidden; margin: 1.4rem 0;
}
.profilrutor > div { background: var(--yta); padding: .8rem .9rem; }
.profilrutor p { margin: 0; }
.profilvarde { font-size: 1.05rem; font-weight: 600; margin: .2rem 0 !important; }
.profilvarde.gron { color: var(--gron); font-size: .95rem; }

.profilrad {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--linje); font-size: .95rem;
}
.profilrad:last-of-type { border-bottom: 0; }
.profilrad select { width: auto; max-width: 14rem; }
.profilrad .marke { margin-left: .4rem; }

.profilkolumner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem;
}
.profilkolumner .kort { margin-bottom: 0; }

.kort.fara { border-left: 3px solid var(--oxid); border-radius: 0 var(--rad) var(--rad) 0; margin-top: 1rem; }

/* --- Samtal ---------------------------------------------------------------------- */

.samtalsrad {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  padding: .9rem 0; border-bottom: 1px solid var(--linje);
  text-decoration: none; color: inherit;
}
.samtalsrad:last-child { border-bottom: 0; padding-bottom: 0; }
.samtalsrad:hover .samtalsnamn { color: var(--gron); }
.samtalsrad.olast { border-left: 3px solid var(--massing); padding-left: .8rem; margin-left: -.8rem; }
.samtalstext { min-width: 0; }
.samtalsnamn { margin: 0 0 .2rem; font-weight: 600; font-size: .98rem; }
.samtalsutdrag { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.trad {
  background: var(--yta-sank); border: 1px solid var(--linje); border-radius: var(--rad);
  padding: 1.1rem; margin-bottom: 1rem;
  display: grid; gap: .8rem;
}
.bubbelrad { justify-self: start; max-width: 80%; }
.bubbelrad.min { justify-self: end; }
.bubbla {
  background: var(--yta); border: 1px solid var(--linje);
  padding: .65rem .85rem; border-radius: 10px 10px 10px 2px;
  white-space: pre-wrap; font-size: .95rem; line-height: 1.5;
}
.bubbelrad.min .bubbla {
  background: var(--black); color: var(--yta); border-color: var(--black);
  border-radius: 10px 10px 2px 10px;
}
.bubbeltid { margin: .25rem .2rem 0; font-size: .75rem; color: var(--dampad); }
.bubbelrad.min .bubbeltid { text-align: right; }

.marke-sald { background: var(--yta-sank); color: var(--dampad); }

/* --- Priser ---------------------------------------------------------------------- */

.katpris {
  display: block; margin-top: .2rem;
  font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--massing);
}

.pristabell { width: 100%; border-collapse: collapse; }
.pristabell th {
  text-align: left; padding: .4rem 0; border-bottom: 1px solid var(--linje);
  font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--dampad); font-weight: 400;
}
.pristabell td { padding: .55rem 0; border-bottom: 1px solid var(--linje); font-size: .94rem; }
.pristabell tr:last-child td { border-bottom: 0; }
.pristabell th + th, .pristabell td + td { text-align: right; width: 7rem; }

/* --- Personuppgifter -------------------------------------------------------------- */

.rattighet { padding: .9rem 0; border-bottom: 1px solid var(--linje); }
.rattighet:last-child { border-bottom: 0; padding-bottom: 0; }
.rattighet:first-of-type { padding-top: .2rem; }
.rattnamn { margin: 0 0 .25rem; font-weight: 600; font-size: .98rem; }
.rattighet .liten { margin: 0; }
.rattighet .knapprad { margin-top: .7rem; }

.utdrag {
  background: var(--yta-sank); border: 1px solid var(--linje); border-radius: var(--rad);
  padding: .9rem; margin: 0 0 .5rem;
  font: 12px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word;
  max-height: 26rem; overflow: auto;
}