/*
  BRF Höjden — 2026, publika sidor. Samma "emblem" (blått/guld), men
  fördjupat till en mognare, mer "välskött fastighet"-ton: djup marinblå
  istället för klarblå webb-2.0-blå, dovare guld istället för klargul.
  Mobil-först: fast bottentabbar istället för hamburgermeny (bara fem
  sidor - ingen anledning att gömma dem), inloggning flyttad till en liten
  utfällbar panel i headern istället för en stor sidopanel.
*/

:root {
  --navy: #1B6FA8;
  --navy-deep: #135686;
  --navy-tint: #EAF3FA;
  --gold: #C9A227;
  --gold-bright: #F6E400;
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --border: #E3E6EA;
  --border-strong: #CDD3D9;
  --text: #22282E;
  --text-muted: #667080;
  --link: var(--navy);
  --link-hover: var(--navy-deep);
  --danger: #a3352b;
  --danger-bg: #f6e6e2;
  --success: #2f6b4f;
  --success-bg: #e5efe6;

  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --content-width: 760px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 16px rgba(10, 30, 45, 0.08);
  --shadow-sm: 0 1px 3px rgba(10, 30, 45, 0.06);
  --tab-bar-height: 60px;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}

img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-weight: 650; color: var(--navy-deep); line-height: 1.25; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a:link, a:active, a:visited { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link { position: absolute; left: -999px; top: 0; background: #000; color: #fff; padding: 0.6em 1em; z-index: 200; }
.skip-link:focus { left: 0; top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* --- Header --- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Bakgrundsbilden ligger i ett eget lager bakom innehållet, så opacity
   bara påverkar bilden - loggan/menyn ovanpå förblir fullt synliga.
   overflow: hidden ligger på DETTA lager (inte hela .site-header) -
   annars klipper det bort kontomenyns dropdown-panel, som fälls ut
   utanför headerns egna gränser. inset: -20px gör laget större än
   headern så att blur-effekten inte ger en synlig, hård kant; masken
   tonar ut bilden nedåt istället för att klippas av skarpt mot
   border-bottom, och en lätt blur gör att den känns som stämning
   snarare än ett skarpt foto som konkurrerar med texten. */
.site-header__bg {
  position: absolute;
  inset: -20px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.site-header__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/img/cloud.webp') center / cover no-repeat;
  filter: blur(6px);
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.site-header__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.7rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Seriffont ger loggan lite mer karaktär än resten av gränssnittets
     brödtext - systemfontstack istället för t.ex. Google Fonts, av
     samma skäl som Chart.js hostas lokalt: sidan ska se rätt ut även
     när ett externt typsnitts-CDN är blockerat eller nere. */
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.site-brand:hover { text-decoration: none; }
.site-brand__mark { height: 30px; width: auto; flex-shrink: 0; display: block; }

.site-nav { flex: 1; }
.site-nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; }
.site-nav a {
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
/* Understrykning istället för fylld pill - växer in från vänster vid
   hover, står kvar helt utfälld på den aktiva sidan. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 3px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.site-nav a:hover { background: none; color: var(--navy-deep); text-decoration: none; }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] {
  color: var(--navy-deep);
  font-weight: 700;
}
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--navy);
}

.site-account { position: relative; }
.account-menu summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--navy-tint);
  color: var(--navy-deep);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  /* Utan skugga smälte knappen ihop med molnbakgrunden i headern -
     en diskret lyft-effekt håller den läsbar oavsett vad som råkar
     ligga bakom just där. */
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.account-menu summary::-webkit-details-marker { display: none; }
/* Innan fanns ingen visuell hint om att "Logga in"/namnet gick att
   fälla ut - lade till en enkel pil som roterar vid öppning. */
.account-menu summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.account-menu[open] summary::after { transform: rotate(-135deg); }
.account-menu summary:hover { background: #DCEAF1; border-color: var(--gold); }
.account-menu[open] summary { background: var(--navy); color: #fff; }
.account-avatar {
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.account-menu[open] .account-avatar { background: var(--gold); color: var(--navy-deep); }
.account-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  width: 220px;
  z-index: 60;
}
.account-menu__panel a { display: block; padding: 7px 4px; font-size: 14px; }
.account-menu__panel--login input {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13.5px;
}
.account-menu__panel--login .btn { width: 100%; text-align: center; }
.account-menu__links { font-size: 12.5px; margin: 10px 0 0; text-align: center; }

/* --- Kryssruta med etikett, t.ex. "Håll mig inloggad" - används i
   header-panelens inloggningsformulär (.account-menu__panel--login), det
   inbäddade formuläret på mätarsidorna (.inline-login-form, se
   render_login_required() i boende.php) och registreringens
   villkorskryssruta (register.php). Ligger efter formulärens
   "input { width: 100% }"-regler i kaskaden och är mer specifik, så
   kryssrutan själv förblir sin naturliga storlek istället för att dras
   ut i full bredd som text-/lösenordsfälten.
   align-items: flex-start (inte center) + textinnehållet i en egen <span>
   - annars blir varje textbit/länk sitt EGET flex-item (flexbox skapar ett
   item per inline-innehåll, inklusive länkar), och de krymper då var för
   sig för att få plats på en rad istället för att radbryta normalt. Det
   gör ingen skillnad för korta enradstexter (header/mätarsidor) men är
   nödvändigt för registreringens längre text med inbäddad länk. */
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
  margin: -2px 0 10px;
}
.checkbox-field input[type="checkbox"] {
  width: auto;
  margin: 0.15em 0 0;
  accent-color: var(--navy);
  flex: 0 0 auto;
}
.checkbox-field span {
  flex: 1 1 auto;
  min-width: 0;
}
.checkbox-field a { color: var(--link); }

/* --- Sidinnehåll --- */
main { min-height: 60vh; }
.page-header {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.6rem 1.2rem 0;
}
.page-body {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1rem 1.2rem 2.5rem;
}
/* Mätarsidorna (sidopanel + diagram) sätts till page-body--wide av
   layout_header.php - samma 1100px-tak som .boende-hub, istället för
   den smalare läsbara textbredden övriga undersidor använder. */
.page-body--wide { max-width: 1100px; }
/* Under 860px blir .boende-detail enkolumn (samma brytpunkt som
   sidopanelen går liggande på) - innehållet tar då hela bredden, så
   den generösa skrivbordspaddingen bara stjäl onödigt utrymme från
   grafen. Smalnar av den där (kortets egen padding smalnas av separat,
   se .card-regeln längre ner - måste stå efter den i kaskaden). */
@media (max-width: 859px) {
  .page-body { padding-left: 0.5rem; padding-right: 0.5rem; }
}
.page-alert.page-alert { max-width: var(--content-width); margin: 1rem auto 0; padding-left: 1.2rem; padding-right: 1.2rem; }

/* --- Undermeny (pillar) t.ex. under Boende --- */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.4rem; }
.subnav a {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--navy-tint);
  color: var(--navy-deep);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.subnav a:hover { background: #DCEAF1; text-decoration: none; }
.subnav a[aria-current="page"] { background: var(--navy); color: #fff; }

/* --- "För boende": egen hero + bildkort + kedjenavigering --- */
.hero--page { aspect-ratio: 21 / 6; max-height: 320px; }
.boende-hub { max-width: 1100px; margin: 2rem auto 0; padding: 0 1.2rem 2.5rem; }

.lead { color: var(--text-muted); font-size: 15.5px; margin: 0 0 1.8rem; max-width: 62ch; }

.boende-section { margin-top: 2.2rem; }
.boende-section:first-of-type { margin-top: 0; }
.boende-section h2 { margin-bottom: 0.9rem; }

.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.topic-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.topic-card:hover, .topic-card:focus-visible { color: inherit; text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow); }
.topic-card__media { aspect-ratio: 4 / 3; background: var(--navy-tint); display: block; }
.topic-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topic-card__media--icon { display: flex; align-items: center; justify-content: center; }
.topic-card__media--icon svg { width: 34px; height: 34px; color: var(--gold); }
.topic-card__body { padding: 0.9rem 1.1rem 1.1rem; }
.topic-card__body h3 { margin: 0 0 0.25em; font-size: 1rem; }
.topic-card__body p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }

.topic-locked { color: var(--text-muted); font-size: 14px; }
.topic-locked p { margin: 0 0 0.9rem; }
/* Inloggningsprompten som visas i stället för mätardata på skyddade
   sidor (se render_login_required() i boende.php) - fälten sitter på
   en rad på desktop, staplas på smala skärmar. */
.inline-login-form { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 420px; }
.inline-login-form input { width: auto; flex: 1 1 160px; }
.inline-login-form .checkbox-field { flex: 1 1 100%; margin: -0.15rem 0 0.1rem; }
.inline-login-form .btn { flex-shrink: 0; }

.topic-banner { border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; aspect-ratio: 21 / 7; background: var(--navy-tint); }
.topic-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4em; align-items: center; font-size: 13px; color: var(--text-muted); margin-bottom: 0.6rem; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--link-hover); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* --- Boende-undersida: sidopanel + innehåll sida vid sida på desktop --- */
.boende-detail { display: block; }
@media (min-width: 860px) {
  .boende-detail { display: grid; grid-template-columns: 230px 1fr; gap: 2rem; align-items: start; }
}
/* Grid-item har min-width:auto som default, vilket betyder att kolumnen
   aldrig får bli smalare än sitt innehålls "naturliga" bredd - och ett
   <canvas> räknas som väldigt brett innehåll innan Chart.js hunnit mäta
   och skala ner det. Resultatet blev att hela .boende-detail-rutnätet
   (och därmed sidan) blåstes upp bredare än viewporten, med en
   horisontell scrollbar som följd - och eftersom kolumnen aldrig
   krympte följde inte heller diagrammet med när fönstret ändrade
   storlek. min-width: 0 tillåter kolumnen att krympa till den
   tillgängliga bredden, så canvas-wrappern i chart.php (som redan har
   max-width:100%) faktiskt får något att begränsas mot. */
.boende-detail__content { min-width: 0; }

/* Ämnesnavigering: horisontellt scrollande rad på mobil (undviker att
   sju ämnen radbryter till en rörig klump), vertikal sticky sidopanel med
   ikon + etikett per rad på desktop - samma mönster som många moderna
   dashboards (Linear, Notion m.fl.) använder för sektionsnavigering. */
.topic-sidebar {
  display: flex; gap: 0.35rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 0.4rem; margin-bottom: 0.4rem;
}
@media (min-width: 860px) {
  .topic-sidebar { flex-direction: column; overflow: visible; position: sticky; top: 1rem; gap: 0.15rem; padding-bottom: 0; margin-bottom: 0; }
}
.topic-sidebar__item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.8rem 0.5rem 0.6rem; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; flex-shrink: 0; border-left: 3px solid transparent;
}
.topic-sidebar__item:hover { background: var(--navy-tint); text-decoration: none; }
.topic-sidebar__item[aria-current="page"] { background: var(--navy-tint); border-left-color: var(--navy); color: var(--navy-deep); }
.topic-sidebar__icon {
  width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.topic-sidebar__icon img { width: 100%; height: 100%; object-fit: cover; }
.topic-sidebar__icon svg { width: 18px; height: 18px; color: var(--gold); }

@media (max-width: 760px) {
  .hero--page { aspect-ratio: 16 / 9; max-height: 220px; }
}
@media (max-width: 480px) {
  .topic-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Formulär --- */
label { display: block; font-weight: 600; margin: 0.8em 0 0.3em; font-size: 13.5px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="file"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%;
  padding: 0.6em 0.75em;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 15px;
  color: var(--text);
}
textarea { min-height: 8em; resize: vertical; }
.field-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 0.3em; }

.btn {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.65em 1.3em;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--navy-deep); color: #fff; text-decoration: none; }
.btn-secondary { background: #E7EAED; color: var(--text); }
.btn-secondary:hover { background: #DADFE3; color: var(--text); }
.btn-link { background: none; border: none; color: var(--link); padding: 0; cursor: pointer; text-decoration: underline; font-size: inherit; }

/* a:link/a:visited/a:active (rad 61) har högre CSS-specificitet än en ren
   klass som .btn, så knapptexten var osynlig (marinblå text på marinblå
   bakgrund) tills man hovrade - först då vann .btn:hover tack vare sina
   två klasser i specificiteten. Matchande specificitet här löser det för
   gott, oavsett vilken sida en <a class="btn"> dyker upp på. */
a.btn:link, a.btn:visited, a.btn:active { color: #fff; }
a.btn-secondary:link, a.btn-secondary:visited, a.btn-secondary:active { color: var(--text); }

.alert { border-radius: var(--radius-sm); padding: 0.8em 1em; margin-bottom: 1em; font-size: 14px; }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success); }

.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
@media (max-width: 859px) {
  .card { padding-left: 0.6rem; padding-right: 0.6rem; }
}

.post { border-bottom: 1px solid var(--border); padding: 1rem 0; }
.post:first-child { padding-top: 0; }
.post:last-child { border-bottom: none; }
.post__meta { color: var(--text-muted); font-size: 12px; margin-top: 0.4em; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-top: 1rem; font-size: 13px; flex-wrap: wrap; }

.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.6rem; margin-bottom: 0.6rem; }
.view-switch { flex-shrink: 0; }
/* Ersätter h1 på mätarsidorna (min_el/min_lgh) - riktiga "mapp-flikar"
   som sitter fast direkt ovanpå .card (ingen marginal mellan dem),
   istället för att sväva ovanför ämnesmenyn där de bara dubblerade
   den. Aktiv flik är högre (mer padding-top), vit som kortet under och
   har en skugga som lyfter den; inaktiv flik är lägre, grå och sjunker
   undan bakom - align-items:flex-end håller alla flikars underkant i
   liv med varandra (och med kortets överkant) trots olika höjd. */
.metering-tabs { display: flex; align-items: flex-end; gap: 4px; margin: 1.3rem 0 0; }
.metering-tabs__tab {
  padding: 0.4rem 1rem; font-size: 15px; font-weight: 650;
  color: var(--text-muted); background: #EEF1F3;
  border-radius: 10px 10px 0 0; text-decoration: none;
}
.metering-tabs__tab:hover { background: #E3E7EA; color: var(--text); text-decoration: none; }
.metering-tabs__tab--active {
  padding-top: 0.6rem; background: var(--surface); color: var(--navy-deep);
  box-shadow: 0 -3px 10px rgba(10, 30, 45, 0.08); z-index: 1;
}
.metering-tabs + .card { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.chart-total { color: var(--text-muted); font-size: 13px; }
.chart-total strong { color: var(--navy-deep); font-size: 15px; font-weight: 700; }
.chart-nav { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
.chart-nav__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; background: var(--navy-tint);
  color: var(--navy-deep); font-size: 14px; flex-shrink: 0;
}
.chart-nav__arrow:hover { background: #DCEAF1; text-decoration: none; }
.date-picker { display: flex; align-items: center; gap: 0.3rem; }
.date-picker input { font: inherit; font-size: 13px; padding: 0.22em 0.45em; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text); min-width: 11.5em; }
.date-picker .btn { padding: 0.28em 0.7em; font-size: 13px; }

/* Verktygsraden radbryter numera alltid vid behov (flex-wrap: wrap som
   standard ovan) - det förhindrar att långa totaltexter som "12 Augusti
   2026 - Förbrukning: 78,0 kWh ~ 234 kr" rinner ut utanför skärmen på
   smala skärmar. Den här mediefrågan lägger bara till en snyggare,
   centrerad egen rad för totalsumman när det verkligen blir trångt,
   istället för att den hamnar hulligt inklämd mellan pillren och
   pilarna vid den naturliga radbrytningen. */
@media (max-width: 480px) {
  .chart-total { order: 3; flex-basis: 100%; text-align: center; margin-top: 0.15rem; }
}

.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.board-card { display: flex; gap: 0.9rem; }
.board-card img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }

table.data { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.data caption { text-align: left; margin-bottom: 0.5em; font-weight: 600; }
table.data th, table.data td { border-bottom: 1px solid var(--border); padding: 0.55em 0.6em; text-align: right; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }

/* --- Adminsidor: medlemslista (users.php) --- */
/* Tätare variant av table.data för långa listor (t.ex. 80+ medlemmar) där
   överblick väger tyngre än luft mellan raderna. white-space:nowrap håller
   Roll/Status-cellerna på en rad (tabellen kan då bli bredare än
   skärmen - därför overflow-x:auto på wrappern i users.php). */
.table-compact { background: var(--surface); }
.table-compact th, .table-compact td { padding: 0.3em 0.5em; white-space: nowrap; border-bottom: 1px solid var(--border-strong); }
.table-compact tbody tr.is-inactive { background: var(--danger-bg); }
/* Zebra-randning + tydligare avdelare för de aktiva raderna, som annars
   (vit rad på vit tabell) flöt ihop med varandra. */
.table-compact tbody tr:not(.is-inactive):nth-child(even) { background: var(--bg); }
.table-compact tbody tr:not(.is-inactive):hover { background: var(--navy-tint); }

/* Fälten ärver annars den generella formulärstylingen (padding 0.6em/0.75em,
   width:100%) som är gjord för fristående formulär i full bredd - för stor
   för en tabellcell. */
.table-compact input[type="text"],
.table-compact input[type="date"],
.table-compact select {
  width: auto;
  padding: 0.2em 0.4em;
  font-size: 13px;
}

.member-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.member-avatar--sm { width: 20px; height: 20px; }

.member-filter { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.member-filter input[type="search"] { width: 16em; max-width: 100%; }

/* Färgade textknappar där knappens etikett/färg redan säger vad status är
   (Aktivera = grön = f.n. inaktiv, Inaktivera/Ta bort = röd = destruktivt),
   så statusen inte behöver en egen kolumn. */
.btn-link--positive { color: var(--success); }
.btn-link--negative { color: var(--danger); }

canvas { max-width: 100%; }

/* --- Startsidans hero (fullbredd, filmisk) --- */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  max-height: 62vh;
  overflow: hidden;
  background: var(--navy);
}
.hero--empty { display: flex; }
.hero-video, .hero-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-fallback { display: block; }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(7,42,62,0.75) 0%, rgba(7,42,62,0.15) 45%, rgba(7,42,62,0.05) 100%);
  pointer-events: none;
}
.hero-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem 1.2rem 1.8rem;
  max-width: 1100px;
  margin: 0 auto;
  z-index: 1;
}
.hero-eyebrow { color: rgba(255,255,255,0.8); font-weight: 600; font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0.35em 0 0; }
.hero-title { color: #fff; font-size: clamp(1.7rem, 4.5vw, 2.7rem); font-weight: 700; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,0.3); }

/* --- Genvägskort --- */
.quick-links {
  max-width: 1100px;
  margin: -34px auto 0;
  padding: 0 1.2rem;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 6px;
  color: var(--navy-deep);
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.quick-link:hover { color: var(--navy-deep); text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,30,45,0.14); }
.quick-link__icon { width: 24px; height: 24px; color: var(--gold); }
.quick-link__icon svg { width: 100%; height: 100%; }

.home-content { max-width: var(--content-width); margin: 2rem auto 0; padding: 0 1.2rem 2.5rem; }

/* --- Generisk sidhubb (Nyinflyttad/Styrelsen/Om Höjden) - samma bredd/
   marginal som .boende-hub, delad så nya sidor slipper duplicera den --- */
.page-hub { max-width: 1100px; margin: 2rem auto 0; padding: 0 1.2rem 2.5rem; }
.section-footnote { margin-top: 0.9rem; font-size: 13px; color: var(--text-muted); }

/* --- Bildplatshållare: en bild saknas ännu, men sidan ska ändå kännas
   proffsig istället för att visa en trasig bildikon. Samma mörka
   gradient + diskret rutmönster + guld-ikon i heron som i mindre kort. --- */
.photo-placeholder, .hero-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 65%, #051f2e 100%);
  position: relative; overflow: hidden; width: 100%; height: 100%;
}
.photo-placeholder::before, .hero-placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px);
}
.photo-placeholder__icon { width: 26%; min-width: 26px; max-width: 46px; color: var(--gold); opacity: 0.9; position: relative; }
.hero-placeholder__icon { width: 46px; height: 46px; color: var(--gold); opacity: 0.9; position: relative; }
@media (min-width: 760px) { .hero-placeholder__icon { width: 64px; height: 64px; } }

/* --- Funktionskort: en enskild, framhävd åtgärd (t.ex. välkomstbrevet) --- */
.feature-card {
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1.3rem 1.4rem; margin: 1.6rem 0;
}
.feature-card__icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 999px;
  background: var(--navy-tint); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.feature-card__icon svg { width: 22px; height: 22px; }
.feature-card__body h2 { margin-bottom: 0.3em; }
.feature-card__body p { margin: 0 0 0.9em; color: var(--text-muted); font-size: 14px; max-width: 56ch; }
@media (max-width: 480px) { .feature-card { flex-direction: column; align-items: flex-start; } }

/* --- Fristående foto med bildtext, t.ex. sist på Nyinflyttad --- */
.photo-feature { margin: 2.2rem 0 0; }
.photo-feature img, .photo-feature .photo-placeholder {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); display: block;
}
.photo-feature figcaption { margin-top: 0.5em; font-size: 12.5px; color: var(--text-muted); text-align: center; }

/* --- Styrelsen: avatar (foto eller initialer) --- */
.board-card__avatar { width: 68px; height: 68px; border-radius: var(--radius-sm); flex-shrink: 0; overflow: hidden; }
.board-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--gold); font-weight: 700; font-size: 20px; letter-spacing: 0.02em;
}

/* --- Checklistor med bock-ikon istället för punkter, t.ex. "Vad gör
   styrelsen" och "Om Höjden" --- */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.feature-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 14px; }
.feature-list li svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 0.15em; color: var(--gold); }

/* --- Etikett/förklaring-par, t.ex. "vilken uppgift - varför" i
   integritetspolicyn (pages/privacy.php). Vanlig dl/dt/dd - inget
   flexbox här, så texten radbryter helt normalt (till skillnad från
   .feature-list, som är byggd för ikon+text i par och klipper sönder
   längre textpar i separata krympande flex-kolumner om man återanvänder
   den för det här). */
.privacy-terms { margin: 0; }
.privacy-terms dt { font-weight: 700; color: var(--navy); margin: 0.9em 0 0.2em; font-size: 14px; }
.privacy-terms dt:first-child { margin-top: 0; }
.privacy-terms dd { margin: 0; font-size: 14px; color: var(--text); }

.privacy-illustration {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: 1.2rem;
}

/* --- Tvåkolumns informationslayout på desktop, staplat på mobil --- */
.info-columns { display: grid; gap: 1.8rem; margin-top: 2.2rem; }
@media (min-width: 760px) { .info-columns { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }

/* --- Faktaruta, t.ex. adresser/antal lägenheter på Om Höjden --- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.9rem; margin: 1rem 0; }
.stat-box { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem; text-align: center; }
.stat-box strong { display: block; font-size: 1.5rem; color: var(--navy-deep); font-weight: 700; }
.stat-box span { font-size: 12px; color: var(--text-muted); }

/* --- Dokumentlista, t.ex. Om Höjden --- */
.doc-list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 0.5rem; }
.doc-list li { display: flex; align-items: center; gap: 0.7rem; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 0.75rem 0.95rem; font-size: 14px; }
.doc-list li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--gold); }
.doc-list__name { flex: 1; }
.doc-list li form { margin: 0; }

/* --- Dag/Månad/År-växlare på mätarsidorna --- */
.view-switch { display: inline-flex; background: var(--navy-tint); border-radius: 999px; padding: 3px; gap: 2px; }
.view-switch a { padding: 6px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--navy-deep); text-decoration: none; }
.view-switch a:hover { background: #DCEAF1; text-decoration: none; }
.view-switch a[aria-current="page"] { background: var(--navy); color: #fff; }
.chart-hint { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: -0.4rem; }

/* --- Inbäddad PDF (t.ex. välkomstbrevet på Nyinflyttad) --- */
.pdf-embed { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.pdf-embed iframe { display: block; width: 100%; height: 80vh; max-height: 900px; min-height: 420px; border: 0; }

/* --- Sidfot --- */
.site-footer { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.2rem 2rem; text-align: center; color: var(--text-muted); font-size: 12px; }

/* --- Bottentabbar: mobil huvudnavigering, ingen hamburgermeny --- */
.tab-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(10,30,45,0.06);
  z-index: 80;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px 7px;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: none;
}
.tab-bar a svg { width: 21px; height: 21px; }
.tab-bar a[aria-current="page"] { color: var(--navy); }
.tab-bar a:hover { text-decoration: none; color: var(--navy); }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-header__inner { justify-content: space-between; }
  .tab-bar { display: flex; }
  body { padding-bottom: var(--tab-bar-height); }
  .hero { aspect-ratio: 16 / 9; max-height: 34vh; }
  .quick-links { margin-top: -24px; gap: 8px; }
  .quick-link { padding: 12px 4px; font-size: 10.5px; }
  .quick-link__icon { width: 20px; height: 20px; }
}