/* Basvariabler */
:root {
  --header-h: 64px;
  --sidebar-w: clamp(220px, 22vw, 280px);
  --bg: #f6f8fb; --fg: #0f172a; --muted: #475569; --surface: #ffffff; --border: #e2e8f0;
  --accent: #0f6cbd; --accent-contrast: #ffffff;
  --h2-bg: #004993; --h2-fg: #ffffff;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-rows: var(--header-h) 1fr; grid-template-columns: var(--sidebar-w) 1fr; background: var(--bg); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* Header */
header { grid-column: 1 / -1; height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; padding: 0 .75rem; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 5; }
header h1 { grid-column: 2; margin: 0; text-align: center; font-size: clamp(1.1rem, 2.6vw, 2rem); line-height: 1.2; font-weight: 750; }
.menu-toggle { grid-column: 1; justify-self: start; width: 40px; height: 40px; border-radius: .5rem; border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer; }
.header-spacer { grid-column: 3; width: 40px; height: 1px; }

/* Top progress bar */
/*.topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; background: transparent; } */
/*.topbar[hidden] { display: none; } */
/*.topbar__bar { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--accent); transition: width .25s ease; } */
  /* Keep it smooth and cheap (GPU). */
  #topbar { position: fixed; left: 0; top: 0; right: 0; height: 3px; }
  #topbar[hidden] { display: none; }
  .topbar__bar {
    width: 0%;
    height: 100%;
    background: #29d;
    transition: width 220ms cubic-bezier(.22,1,.36,1);
  }


/* Sidebar */
.sidebar { grid-row: 2; grid-column: 1; background: var(--surface); border-right: 1px solid var(--border); overflow: auto; padding: .6rem .5rem 1rem; position: relative; z-index: 3; }

/* Sökfält */
.search { display: grid; grid-template-columns: 1fr auto; gap: .35rem; align-items: center; padding: 0 .5rem .4rem .5rem; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.search input[type="search"] { width: 100%; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: .4rem; font-size: .95rem; }
.search button { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: .4rem; background: var(--surface); cursor: pointer; }
.search-status { padding: 0 .8rem .2rem; color: var(--muted); font-size: .85rem; }

.menu { display: block; }
.sidebar h2 { font-size: .95rem; margin: .9rem .5rem .4rem; font-weight: 700; letter-spacing: .02em; background: var(--h2-bg); color: var(--h2-fg); padding: .35rem .6rem; border-radius: .4rem; }
.sidebar a { display: block; padding: .35rem .6rem; color: var(--fg); text-decoration: none; border-radius: .4rem; }
.sidebar a:hover, .sidebar a:focus-visible { background: rgba(15,108,189,0.12); }
.sidebar a[aria-current="page"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.menu-section-start { margin: .2rem .5rem .5rem; display: inline-block; border: 1px solid var(--border); background: var(--surface); border-radius: .4rem; }

/* Från Manuel */
.sidebar {
  grid-row: unset !important;
  grid-column: unset !important;
}
main {
  grid-row: unset !important;
  grid-column: unset !important;
}

/* Main */
main { grid-row: 2; grid-column: 2; overflow: auto; padding: 1rem 1.25rem 2.5rem; position: relative; }
main h2 { background: var(--h2-bg); color: var(--h2-fg); padding: .4rem .6rem; border-radius: .4rem; margin: 0 0 .8rem 0; font-size: 1.1rem; }
main img { max-width: 100%; height: auto; border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
main.pdf-mode { padding: 0; }
main.pdf-mode .pdf-frame { display: block; width: 100%; height: 100%; border: 0; }

/* Laddindikator */
.loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(246,248,251,.65); backdrop-filter: blur(1px); z-index: 2; }
.loading[hidden] { display: none !important; }
.spinner { width: 42px; height: 42px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
.loading-text { margin-top: .75rem; color: var(--muted); font-size: .95rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hjälpklasser */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.initial-welcome--hidden { display: none !important; }

/* Mobil: smalare off-canvas meny (enligt önskemål) */
@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: var(--header-h) 0 0 0; width: clamp(140px, 55vw, 200px); max-width: 92vw; transform: translateX(-100%); transition: transform .2s ease; z-index: 10; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open::after { content: ""; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(0,0,0,.28); z-index: 9; }
  .menu-toggle { display: inline-grid; place-items: center; }
}

/* Mellanläge */
@media (min-width: 901px) and (max-width: 1280px) { :root { --sidebar-w: clamp(220px, 18vw, 260px); } }

/* Desktop */
@media (min-width: 901px) { .menu-toggle { display: none; } .header-spacer { display: none; } header { grid-template-columns: 1fr; } header h1 { grid-column: 1; } }


/* Från Manuel */
/* Mobil: smalare off-canvas meny (enligt önskemål) */
@media (max-width: 900px) {
 body {
  grid-template-columns: 1fr;
 }

 .sidebar {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  width: clamp(140px, 55vw, 200px);
  max-width: 92vw;
  transform: translateX(-100%);
  transition: transform .2s ease;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
 }

 body.sidebar-open .sidebar {
  transform: translateX(0);
 }

 body.sidebar-open::after {
  content: "";
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0, 0, 0, .28);
  z-index: 9;
 }

 .menu-toggle {
  display: inline-grid;
  place-items: center;
 }

 .sidebar {
  grid-row: unset !important;
  grid-column: unset !important;
 }

 main {
  grid-row: unset !important;
  grid-column: unset !important;
 }

}

/* Mellanläge */
@media (min-width: 901px) and (max-width: 1280px) {
 :root {
  --sidebar-w: clamp(220px, 18vw, 260px);
 }

 .sidebar {
  grid-row: unset !important;
  grid-column: unset !important;
 }

 main {
  grid-row: unset !important;
  grid-column: unset !important;
 }
}

/* Desktop */
@media (min-width: 901px) {
 .menu-toggle {
  display: none;
 }

 .header-spacer {
  display: none;
 }

 header {
  grid-template-columns: 1fr;
 }

 header h1 {
  grid-column: 1;
 }

 .sidebar {
  grid-row: unset !important;
  grid-column: unset !important;
 }

 main {
  grid-row: unset !important;
  grid-column: unset !important;
 }
}