/**
 * FrassieV2 – enhetlig UI-standard (publik + inloggad)
 * Enda källan för design tokens och gemensamma komponenter.
 */

:root {
  --bg: #f4f7f9;
  --surface: #ffffff;
  --surface-soft: #f8fbfc;
  --text: #1f2a37;
  --muted: #5b6b79;
  --border: #d9e3ea;
  --primary: #2f6f7e;
  --primary-dark: #245966;
  --accent: #dfeff2;
  --success: #2f7d57;
  --warning: #9a6700;
  --danger: #b42318;
  --shadow: 0 10px 24px rgba(21, 41, 53, 0.08);
  --radius: 14px;
  --radius-sm: 10px;
  --sidebar-width: 270px;
  --content-max: 1200px;
  /* Samma horisontella inset som topbar + innehåll (sidomeny linjerar med titelraden) */
  --app-pad-x: 1.5rem;
  /* Publik sajt: samma vänster/höger som logotypraden (.public-nav-inner) */
  --public-pad-x: 1.25rem;
  --font: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body.frassie-ui,
body.frassie-ui-public {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

.frassie-ui h1, .frassie-ui-public h1 { font-size: 1.75rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text); }
.frassie-ui h2, .frassie-ui-public h2 { font-size: 1.35rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--text); }
.frassie-ui h3, .frassie-ui-public h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--text); }
.frassie-ui p, .frassie-ui-public p { margin: 0 0 1rem; }
.frassie-ui p:last-child, .frassie-ui-public p:last-child { margin-bottom: 0; }
.frassie-ui .text-muted, .frassie-ui-public .text-muted,
.frassie-ui .metadata, .frassie-ui-public .metadata { color: var(--muted); font-size: 0.875rem; }

.frassie-text-ljusrod {
  color: #c85a52;
}

/* ---------- Publik layout ---------- */
.public-shell { min-height: 100vh; display: flex; flex-direction: column; }

.public-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.public-nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0.75rem var(--public-pad-x);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Publik bredd + samma sidmarginal som toppmenyn (ersätter Bootstrap .container på landningssidor) */
.public-page-inner {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: var(--public-pad-x);
  padding-right: var(--public-pad-x);
}

/* Bootstrap .row har negativ sidmarginal som annars drar herotext vänster om övrig text */
.frassie-ui-public .public-page-inner > .row {
  margin-left: 0;
  margin-right: 0;
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text);
}
/* Samma typografi som h1 på publika sidor / testtextens huvudrubrik */
.public-brand-text {
  margin: 0;
  font-family: inherit;
  font-size: calc(1.75rem * 1.5 * 0.9);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}
.public-brand-mascot {
  height: 48px;
  width: auto;
  flex-shrink: 0;
  object-fit: contain;
}

/* Logga in: samma btn-sm + px-3 som Prova på; bakgrund som .bg-light (rutan Viktigt att tänka på) */
.public-nav .btn.public-nav-btn-light {
  --bs-btn-bg: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: #e9ecef;
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-bg: #e9ecef;
  --bs-btn-active-border-color: var(--border);
  --bs-btn-color: var(--text);
  --bs-btn-hover-color: var(--text);
  --bs-btn-active-color: var(--text);
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.public-nav .btn.public-nav-btn-light:hover,
.public-nav .btn.public-nav-btn-light:focus {
  background-color: #e9ecef !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.public-footer-links {
  font-size: 1rem;
  line-height: 1.55;
}
.public-footer-links a {
  font-size: inherit;
  line-height: inherit;
}
.public-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-left: auto;
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.public-nav-links a:not(.btn) {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 0.35rem 0;
}
.public-nav-links a:not(.btn):hover { color: var(--primary); }

.public-hero {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2rem var(--public-pad-x) 1rem;
}
.public-hero .hero-title {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text);
}
.public-hero .hero-lead {
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.public-hero .hero-cta { margin-top: 0.5rem; }
/* Ingen horisontell padding här – använd .public-page-inner i innehållet så samma marginal som toppmeny/hero */
.public-main {
  flex: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  padding: 1rem 0 3rem;
}
.frassie-ui-public .content-narrow {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Startsidan (/) – all löptext minst --landing-text-min (samma som brödtext).
 * Rubriker/knappar som redan är större (h1, h2, .display-6, .btn-lg, m.m.) sätts inte ned.
 */
.frassie-ui-public.landing-prose {
  --landing-text-min: 1.125rem;
  font-size: var(--landing-text-min);
  line-height: 1.65;
}

/* Bootstrap .small / FAQ / footer – inte mindre än brödtext */
.frassie-ui-public.landing-prose .small,
.frassie-ui-public.landing-prose small {
  font-size: var(--landing-text-min);
  line-height: 1.55;
}
.frassie-ui-public.landing-prose .card-text.small {
  font-size: var(--landing-text-min);
  line-height: 1.5;
}
.frassie-ui-public.landing-prose .text-muted.small {
  font-size: var(--landing-text-min);
  line-height: 1.55;
}

/* Global h3-regel är 1.1rem – under min; kort- och FAQ-rubriker ska vara ≥ min och tydliga */
.frassie-ui-public.landing-prose h3.h5,
.frassie-ui-public.landing-prose h3.h5.card-title {
  font-size: 1.25rem;
  line-height: 1.35;
}
.frassie-ui-public.landing-prose h3.h6 {
  font-size: 1.2rem;
  line-height: 1.45;
  font-weight: 600;
}

/* ---------- App shell (inloggad) ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.app-shell .sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  flex-shrink: 0;
  /* Som Bootstrap .bg-light (t.ex. rutan ”Viktigt att tänka på”) – CDN 5.3: #f8f9fa */
  background: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1rem var(--app-pad-x);
}

.sidebar .brand {
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.sidebar .brand a,
.sidebar .brand a:link,
.sidebar .brand a:visited,
.sidebar .brand a:hover,
.sidebar .brand a:active,
.sidebar .brand a:focus {
  text-decoration: none;
}
.sidebar .brand a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-left: 0;
  color: var(--text);
  font-weight: 400;
  font-size: 1.45rem;
}
.sidebar .brand img { height: 84px; width: auto; }
.sidebar .brand-sub { font-size: 1rem; color: var(--muted); font-weight: 400; margin-top: 0.25rem; margin-left: 1.5rem; }

.menu-wrap { flex: 1; overflow-y: auto; padding: 0; }

/* Sidomeny – samma typsnitt/storlek/rad som brödtext; ingen fetstil, ingen avvikande bakgrund */
.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li { margin: 0; padding: 0; }
.menu a,
.menu a:link,
.menu a:visited,
.menu a:hover,
.menu a:active,
.menu a:focus {
  text-decoration: none;
}
.menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  cursor: pointer;
  background: transparent;
}
.menu a:hover {
  background: transparent;
  color: var(--text);
  text-decoration: none;
}
.menu a.active {
  font-weight: 400;
  background: transparent;
  color: var(--text);
  border-left: none;
  margin-left: 0;
  padding-left: 0.65rem;
  text-decoration: none;
}
.menu a.parent-active:not(.active) {
  font-weight: 400;
  background: transparent;
}
.menu a .menu-col--left,
.menu a .menu-col--right {
  min-width: 1.25em;
  text-align: center;
  font-size: 1em;
  line-height: inherit;
  font-weight: 400;
  color: var(--muted);
}
.menu a .menu-col--text { flex: 1; text-align: left; }

/* Bakåtkompatibilitet: render_sidomeny ... plain=True — samma som standardmeny */
.menu.menu--plain a,
.menu.menu--plain a:hover,
.menu.menu--plain a.active,
.menu.menu--plain a.parent-active {
  font-weight: 400;
  background: transparent;
  color: var(--text);
  border-left: none;
  margin-left: 0;
  padding-left: 0.65rem;
}
.menu.menu--plain a:hover,
.menu.menu--plain a.active {
  text-decoration: none;
}

.sidebar-footer {
  padding: 1rem 0 0;
  margin-top: auto;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}

.app-shell .main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.topbar-inner {
  max-width: var(--content-max);
  /* Vänsterlinjerat i huvudytan (inte centrerat vid bred skärm) */
  margin-left: 0;
  margin-right: auto;
  padding: 1rem var(--app-pad-x) 1rem calc(var(--app-pad-x) * 2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.topbar-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--text);
  white-space: nowrap;
}

.content {
  flex: 1;
  max-width: var(--content-max);
  width: 100%;
  margin-left: 0;
  margin-right: auto;
  padding: 1.25rem var(--app-pad-x) 2.5rem calc(var(--app-pad-x) * 2);
}

/* ---------- Kort ---------- */
.frassie-ui .card,
.frassie-ui-public .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.frassie-ui .card:last-child,
.frassie-ui-public .card:last-child { margin-bottom: 0; }
.frassie-ui .card-header,
.frassie-ui-public .card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.frassie-ui .card-header h2,
.frassie-ui-public .card-header h2 { margin: 0; font-size: 1.1rem; }
/* Korthuvud: länkar som knappar — Bootstrap kan ge transparent bakgrund + länkfärg → osynlig text mot vit yta */
.frassie-ui .card-header .btn,
.frassie-ui-public .card-header .btn {
  flex-shrink: 0;
  text-decoration: none;
}
.frassie-ui .card-header .btn.btn-primary,
.frassie-ui-public .card-header .btn.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.frassie-ui .card-header .btn.btn-primary:hover,
.frassie-ui .card-header .btn.btn-primary:focus,
.frassie-ui-public .card-header .btn.btn-primary:hover,
.frassie-ui-public .card-header .btn.btn-primary:focus {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: #fff !important;
}
.frassie-ui .card-body,
.frassie-ui-public .card-body { padding: 1.25rem; }
.frassie-ui .card-actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.frassie-ui .card-header.flex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Grid / stack ---------- */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-sm { gap: 0.5rem; }
.stack-lg { gap: 1.5rem; }

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.component-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow);
}
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--primary); line-height: 1.2; }
.stat-card .stat-label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 0.25rem; }

/*
 * ---------- Knappar – Frassie-konventioner ----------
 * 1) Standardåtgärder (som på sidan Möten): t.ex. btn btn-primary, btn btn-secondary, btn-outline-*.
 *    Inom .frassie-ui / .frassie-ui-public styrs de till enhetlig Frassie-primary (teal); undantag: btn-link,
 *    btn-close, public-nav-btn-light. Badge utan .btn påverkas inte.
 * 2) Ta bort / destruktiv borttagning: btn btn-frassie-ta-bort (ev. btn-sm). Vit yta, röd ram/text (--danger).
 *    btn-danger i äldre kod ska bytas till btn-frassie-ta-bort; kvarvarande btn-danger får samma utseende som (2).
 */
/* ---------- Knappar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.65rem 1.1rem;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}
.frassie-ui .btn.btn-primary,
.frassie-ui-public .btn.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.frassie-ui .btn.btn-primary:hover,
.frassie-ui-public .btn.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

/* Enhetliga standardåtgärder → solid Frassie primary (samma som Möten). */
.frassie-ui .btn.btn-secondary:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled),
.frassie-ui-public .btn.btn-secondary:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled),
.frassie-ui .btn.btn-success:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui-public .btn.btn-success:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui .btn.btn-warning:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui-public .btn.btn-warning:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui .btn.btn-info:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui-public .btn.btn-info:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui .btn.btn-dark:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui-public .btn.btn-dark:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui .btn.btn-light:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled),
.frassie-ui-public .btn.btn-light:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled),
.frassie-ui .btn[class*="btn-outline-"]:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui-public .btn[class*="btn-outline-"]:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled) {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.frassie-ui .btn.btn-secondary:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled):hover,
.frassie-ui .btn.btn-secondary:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled):focus-visible,
.frassie-ui-public .btn.btn-secondary:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled):hover,
.frassie-ui-public .btn.btn-secondary:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled):focus-visible,
.frassie-ui .btn.btn-success:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui .btn.btn-success:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui-public .btn.btn-success:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui-public .btn.btn-success:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui .btn.btn-warning:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui .btn.btn-warning:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui-public .btn.btn-warning:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui-public .btn.btn-warning:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui .btn.btn-info:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui .btn.btn-info:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui-public .btn.btn-info:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui-public .btn.btn-info:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui .btn.btn-dark:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui .btn.btn-dark:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui-public .btn.btn-dark:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui-public .btn.btn-dark:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui .btn.btn-light:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled):hover,
.frassie-ui .btn.btn-light:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled):focus-visible,
.frassie-ui-public .btn.btn-light:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled):hover,
.frassie-ui-public .btn.btn-light:not(.btn-link):not(.btn-close):not(.public-nav-btn-light):not(:disabled):not(.disabled):focus-visible,
.frassie-ui .btn[class*="btn-outline-"]:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui .btn[class*="btn-outline-"]:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui-public .btn[class*="btn-outline-"]:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui-public .btn[class*="btn-outline-"]:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible {
  background: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: #fff !important;
}
.frassie-ui .btn-group > .btn:not(:first-child),
.frassie-ui-public .btn-group > .btn:not(:first-child) {
  border-inline-start-color: rgba(255, 255, 255, 0.28) !important;
}

.frassie-ui .btn.btn-frassie-ta-bort:not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui-public .btn.btn-frassie-ta-bort:not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui .btn.btn-danger:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled),
.frassie-ui-public .btn.btn-danger:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled) {
  background: var(--surface) !important;
  border: 1px solid var(--danger) !important;
  color: var(--danger) !important;
  font-weight: 600;
}
.frassie-ui .btn.btn-frassie-ta-bort:not(:disabled):not(.disabled):hover,
.frassie-ui .btn.btn-frassie-ta-bort:not(:disabled):not(.disabled):focus-visible,
.frassie-ui-public .btn.btn-frassie-ta-bort:not(:disabled):not(.disabled):hover,
.frassie-ui-public .btn.btn-frassie-ta-bort:not(:disabled):not(.disabled):focus-visible,
.frassie-ui .btn.btn-danger:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui .btn.btn-danger:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible,
.frassie-ui-public .btn.btn-danger:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):hover,
.frassie-ui-public .btn.btn-danger:not(.btn-link):not(.btn-close):not(:disabled):not(.disabled):focus-visible {
  background: rgba(180, 35, 24, 0.1) !important;
  border-color: var(--danger) !important;
  color: #8f1e15 !important;
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover {
  background: var(--surface-soft);
  border-color: var(--muted);
  color: var(--text);
}

/* ---------- Formulär ---------- */
.form-grid {
  display: grid;
  gap: 1.15rem;
  max-width: 42rem;
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.field .help { font-size: 0.8rem; color: var(--muted); }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="url"],
.field select,
.field textarea {
  font-family: var(--font);
  font-size: 1rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--accent);
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

/* Sökfält i kort (erfarenhetsbank m.fl.) */
.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}
.search-row input[type="text"],
.search-row input[type="search"] {
  flex: 1;
  min-width: 200px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

/* ---------- Tabeller ---------- */
.table-wrap {
  overflow-x: auto;
  margin: 0 -0.25rem;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.table-wrap thead th {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 2px solid var(--border);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.table-wrap tbody td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table-wrap tbody tr:hover { background: var(--surface-soft); }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  line-height: 1.3;
  background: var(--surface-soft);
  color: var(--muted);
  border: 1px solid var(--border);
}
.badge-danger { background: #fdecea; color: var(--danger); border-color: #f5c4c0; }

/* Bootstrap 5: .badge.bg-* / .text-bg-* – enhetliga Frassie-färger */
.frassie-ui .badge.bg-info,
.frassie-ui-public .badge.bg-info,
.frassie-ui .badge.text-bg-info,
.frassie-ui-public .badge.text-bg-info {
  background-color: var(--accent) !important;
  color: var(--primary-dark) !important;
  border: 1px solid #c5e3e9;
}
.frassie-ui .badge.bg-warning,
.frassie-ui-public .badge.bg-warning,
.frassie-ui .badge.text-bg-warning,
.frassie-ui-public .badge.text-bg-warning {
  background-color: #fff8e6 !important;
  color: var(--warning) !important;
  border: 1px solid #f5e0a8;
}
.frassie-ui .badge.bg-success,
.frassie-ui-public .badge.bg-success,
.frassie-ui .badge.text-bg-success,
.frassie-ui-public .badge.text-bg-success {
  background-color: #e6f4ea !important;
  color: var(--success) !important;
  border: 1px solid #b7dfc8;
}

/* Föreningsstämma faspunkter – tydlig status med vit text på mörkare badge */
.frassie-ui .frassie-fas-status-badge,
.frassie-ui-public .frassie-fas-status-badge {
  color: #fff !important;
  border: none;
}
.frassie-ui .frassie-fas-status-badge--ej_paborjad,
.frassie-ui-public .frassie-fas-status-badge--ej_paborjad {
  background-color: #6c757d !important;
}
.frassie-ui .frassie-fas-status-badge--paborjad,
.frassie-ui-public .frassie-fas-status-badge--paborjad {
  background-color: var(--primary) !important;
}
.frassie-ui .frassie-fas-status-badge--klar,
.frassie-ui-public .frassie-fas-status-badge--klar {
  background-color: var(--success) !important;
}

/* ---------- List items (artikel/aktivitet) ---------- */
.list-item-card {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.list-item-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.list-item-card .li-title { font-weight: 600; margin-bottom: 0.2rem; }
.list-item-card .li-meta { font-size: 0.85rem; color: var(--muted); }

/* ---------- Page header (ingress) ---------- */
.page-header { margin-bottom: 1.25rem; }
.page-header .page-ingress { color: var(--muted); font-size: 1rem; max-width: 42rem; margin-top: 0.35rem; }
.page-header .page-actions { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Sektionsrubrik i listor (sökresultat m.m.) */
.section-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0.5rem 0 0.35rem;
}
.frassie-ui .card-header .section-label { margin: 0; }

/* ---------- Meddelanden (behåll Bootstrap-alert om laddad) ---------- */
.frassie-ui .alert { border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* ---------- Punktformulär i modal (agendapunkt, möjlig mötespunkt m.fl.): dra i nedre högra hörnet för bredd/höjd; textfält kan också förstoras ---------- */
.frassie-ui .modal-dialog.punkt-form-modal-resizable {
  resize: both;
  /* hidden: rubrik/fot syns; endast .modal-body scrollar vid mycket innehåll */
  overflow: hidden;
  pointer-events: auto; /* Bootstrap sätter pointer-events: none på .modal-dialog; krävs för resize-handtaget */
  min-width: min(18rem, 92vw);
  max-width: min(98vw, 100%);
  width: min(42rem, 94vw);
  min-height: 0;
  max-height: min(90vh, calc(100dvh - 2rem));
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
/* Utan vertikal centrering (t.ex. redigera agenda): dialog tappar inte topp/botten i viewport */
.frassie-ui .modal-dialog.punkt-form-modal-resizable:not(.modal-dialog-centered) {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.frassie-ui .modal-dialog.punkt-form-modal-resizable .modal-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Form som omsluter header+body+footer: annars växer hela blocket och footern klipps (ingen synlig Spara). */
.frassie-ui .modal-dialog.punkt-form-modal-resizable .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.frassie-ui .modal-dialog.punkt-form-modal-resizable .modal-header,
.frassie-ui .modal-dialog.punkt-form-modal-resizable .modal-footer {
  flex-shrink: 0;
}
.frassie-ui .modal-dialog.punkt-form-modal-resizable .modal-body {
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: auto;
  min-height: 0;
}
.frassie-ui .modal-dialog.punkt-form-modal-resizable textarea.form-control {
  resize: both;
  min-height: 5rem;
  min-width: 12rem;
  max-width: 100%;
  box-sizing: border-box;
}

/* Helt sidformulär (t.ex. möjlig punkt från protokoll): textruta går att förstora (hörn); inom kolumnens bredd */
.frassie-ui .punkt-form-page textarea.form-control {
  resize: both;
  min-height: 8rem;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Sidintro + hjälplänk (t.ex. Att-göra, Kalender) */
.frassie-sidintro,
.frassie-sidintro p,
.frassie-sidintro .frassie-help-link {
  font-size: 1rem;
  line-height: 1.55;
}
.frassie-sidintro .frassie-help-link {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.frassie-sidintro .frassie-help-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* Global regel: minsta textstorlek i Frassie är 1rem (om inte uttryckligen undantaget). */
.frassie-ui :where(
  small,
  .small,
  .text-muted,
  .metadata,
  .form-text,
  .field .help,
  .li-meta,
  .stat-label,
  .btn-sm,
  .badge,
  .form-control-sm,
  .form-select-sm,
  .input-group-sm,
  .table-sm,
  [style*="font-size: 0."],
  [style*="font-size:."]),
.frassie-ui-public :where(
  small,
  .small,
  .text-muted,
  .metadata,
  .form-text,
  .field .help,
  .li-meta,
  .stat-label,
  .btn-sm,
  .badge,
  .form-control-sm,
  .form-select-sm,
  .input-group-sm,
  .table-sm,
  [style*="font-size: 0."],
  [style*="font-size:."]) {
  font-size: 1rem !important;
}

/* ---------- Responsiv sidomeny ---------- */
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .app-shell .sidebar {
    width: 100%;
    min-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 50vh;
  }
}

/* ---------- Sidintro (under sidtitel) ---------- */
.frassie-ui .frassie-sidintro,
.frassie-ui-public .frassie-sidintro {
  font-size: 0.95rem;
}
.frassie-ui .frassie-help-link,
.frassie-ui-public .frassie-help-link {
  font-weight: 600;
}