/* ================================================================
   Egrannar Design System - Fas 1
   Tokens, typography, topnav, sidebar
   ================================================================ */

/* ----------------------------------------------------------------
   1. Design Tokens
   ---------------------------------------------------------------- */
:root {
  /* Green palette */
  --g900: #152b20;
  --g800: #1e3d2d;
  --g700: #1e5c3a;
  --g500: #2d8653;
  --g400: #3aa06a;
  --g300: #6dbf91;
  --g100: #e8f5ee;
  --g50:  #f4fbf7;

  /* Neutrals */
  --text:   #111827;
  --text2:  #4b5563;
  --text3:  #9ca3af;
  --border: #e5e7eb;
  --bg:     #f9fafb;
  --white:  #ffffff;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow-md: 0 4px 20px rgba(0,0,0,.11);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.15);

  /* Radii */
  --r:    12px;
  --r-sm:  8px;

  /* Sidebar */
  --sidebar-w: 248px;
  --icon-menu: var(--text3);

  /* Brand defaults (overridden per-BRF via theme.css) */
  --brand-primary:      #2d8653;
  --brand-primary-text: #ffffff;
  --brand-link:         #2d8653;
  --brand-button:       #2d8653;
  --brand-section:      #f3f2f1;
  --brand-section-text: #111827;
}

/* ----------------------------------------------------------------
   2. Typography
   ---------------------------------------------------------------- */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  color: var(--text2);
  line-height: 1.75;
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  line-height: 1.3;
}

h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 16px;
}

h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
}

h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

h5 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

a {
  color: var(--brand-link);
  text-decoration: none;
}

a:hover {
  color: var(--g700);
}

/* ----------------------------------------------------------------
   3. Top Navigation
   ---------------------------------------------------------------- */
.eg-topnav {
  height: 62px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--shadow-sm);
}

.eg-topnav-logo {
  display: flex;
  align-items: center;
  margin-right: 24px;
  text-decoration: none;
}

.eg-topnav-logo img {
  height: 32px;
}

/* BRF name in topnav */
.eg-topnav-brfname {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  padding: 0 16px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.eg-topnav-brfname:hover {
  color: var(--g700);
}

.eg-topnav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.eg-topnav-links a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.eg-topnav-links a:hover {
  background: var(--bg);
  color: var(--text);
}

.eg-topnav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Login button (public view) */
.eg-btn-login {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: var(--brand-primary);
  color: var(--brand-primary-text) !important;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: opacity .15s;
}

.eg-btn-login:hover {
  opacity: 0.9;
  color: var(--brand-primary-text) !important;
}

/* Icon buttons (notifications, messages) */
.eg-topnav-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text2);
  font-size: 20px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
}

.eg-topnav-icon:hover {
  background: var(--bg);
  color: var(--text);
}

.eg-topnav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: white;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Avatar chip */
.eg-avatar-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}

.eg-avatar-chip:hover {
  background: var(--bg);
}

.eg-avatar-chip img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.eg-avatar-chip-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Dropdown menu */
.eg-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 300;
  display: none;
}

.eg-dropdown.show {
  display: block;
}

.eg-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--text2);
  text-decoration: none;
}

.eg-dropdown a:hover {
  background: var(--g50);
  color: var(--g700);
}

.eg-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ----------------------------------------------------------------
   4. Sidebar
   ---------------------------------------------------------------- */
.eg-sidebar {
  width: var(--sidebar-w);
  background: var(--menu-bg, var(--white));
  border-right: 1px solid var(--menu-border, var(--border));
  padding: 16px 12px;
  overflow-y: auto;
  flex-shrink: 0;
  font-feature-settings: "tnum", "lnum";
}

/* BRF chooser */
.eg-brf-chooser {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--menu-border, var(--border));
  border-radius: var(--r-sm);
  cursor: pointer;
  margin-bottom: 0;
  transition: border-color .15s, box-shadow .15s;
}
.eg-brf-chooser[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: var(--g100);
}

.eg-brf-chooser:hover {
  border-color: var(--menu-border, var(--g300));
  box-shadow: var(--shadow-sm);
}

.eg-brf-chooser-icon {
  font-size: 20px;
  color: var(--menu-icon, var(--brand-primary));
}

.eg-brf-chooser-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--menu-text, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eg-brf-chooser-arrow {
  font-size: 16px;
  color: var(--menu-text-muted, var(--text3));
  transition: transform .2s;
}

.eg-brf-chooser[aria-expanded="true"] .eg-brf-chooser-arrow {
  transform: rotate(180deg);
}

/* BRF list dropdown */
#eg-brf-list {
  margin-bottom: 16px;
}
.eg-brf-list {
  padding: 4px 4px 8px;
  border: 1px solid var(--border);
  border-top: none;
  border-bottom-left-radius: var(--r-sm);
  border-bottom-right-radius: var(--r-sm);
  background: #fff;
}

.eg-brf-list-item {
  display: block;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text2);
  text-decoration: none;
  transition: background .12s, color .12s;
}

.eg-brf-list-item:hover {
  background: var(--g50);
  color: var(--g700);
  text-decoration: none;
}
.eg-brf-list-item.active {
  background: var(--g50);
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.eg-brf-filter {
  display: block;
  width: calc(100% - 8px);
  padding: 6px 8px;
  margin: 4px 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.eg-brf-filter:focus {
  border-color: var(--brand-primary);
}

/* Section labels */
.eg-section-label {
  display: block;
  padding: 8px 10px 4px;
  margin-top: 16px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text3);
}

.eg-section-label:first-child {
  margin-top: 0;
}

/* Sidebar links */
.eg-slink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text2);
  font-size: 13.5px;
  font-weight: 450;
  text-decoration: none;
  transition: background .12s, color .12s;
  line-height: 1.3;
}

.eg-slink:hover {
  background: var(--g50);
  color: var(--g700);
  text-decoration: none;
}

.eg-slink.active {
  background: var(--g100);
  color: var(--g700);
  font-weight: 600;
}

.eg-slink i,
.eg-slink .eg-slink-icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
  color: var(--brand-primary);
  flex-shrink: 0;
}

.eg-slink .eg-slink-arrow {
  margin-left: auto;
  font-size: 14px;
  color: var(--text3);
}

.eg-slink-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--g100);
  color: var(--g700);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Sub-links (accordion children) */
.eg-sub-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 36px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text2);
  text-decoration: none;
  transition: background .12s, color .12s;
}

.eg-sub-link:hover {
  background: var(--g50);
  color: var(--g700);
  text-decoration: none;
}

.eg-sub-link.active {
  color: var(--g700);
  font-weight: 600;
}

/* Sidebar CTA (public view) */
.eg-sidebar-cta {
  margin-top: 24px;
  padding: 20px 16px;
  background: var(--g50);
  border: 1px solid var(--g100);
  border-radius: var(--r);
  text-align: center;
}

.eg-sidebar-cta p {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 12px;
}

.eg-sidebar-cta .eg-btn-login {
  width: 100%;
  justify-content: center;
  margin-bottom: 8px;
}

.eg-sidebar-cta .eg-btn-outline {
  display: block;
  width: 100%;
  padding: 8px 16px;
  background: var(--white);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background .15s;
}

.eg-sidebar-cta .eg-btn-outline:hover {
  background: var(--g50);
}

/* ----------------------------------------------------------------
   5. Layout - main content
   ---------------------------------------------------------------- */
.eg-layout {
  display: flex;
  min-height: calc(100vh - 62px);
}

.eg-main {
  flex: 1;
  min-width: 0;
  padding: 0;
}
#content {
  overflow: visible;
}

.eg-content {
  padding: 24px 32px;
}

/* BRF header banner */
.eg-brf-banner {
  width: 100%;
  position: relative;
}

.eg-brf-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.eg-brf-banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: white;
}

.eg-brf-banner-name {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Simple BRF header (no banner image) */
.eg-brf-header-simple {
  padding: 24px 32px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.eg-brf-header-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.3px;
}

/* ----------------------------------------------------------------
   6. Cards (generic)
   ---------------------------------------------------------------- */
.eg-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

.eg-card-body {
  padding: 20px 24px;
}

/* ----------------------------------------------------------------
   7. Buttons
   ---------------------------------------------------------------- */

/* Base reset - shared by all .btn */
.btn {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 16px !important;
  line-height: 1.4 !important;
  border: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  transition: filter .15s, box-shadow .15s !important;
  white-space: nowrap;
  text-decoration: none !important;
}

.btn-sm {
  font-size: 12px !important;
  padding: 4px 12px !important;
}

.btn-lg {
  font-size: 15px !important;
  padding: 10px 22px !important;
}

.btn-block {
  display: flex !important;
  width: 100%;
  justify-content: center;
}

/* Primary - uses --brand-button so BRF theme.css can override the color */
.btn-primary,
.btn.btn-primary,
.btn-success,
.btn.btn-success,
.btn-egrannar {
  background-color: var(--brand-button) !important;
  color: var(--brand-primary-text) !important;
  border-color: transparent !important;
}

.btn-primary i,
.btn.btn-primary i,
.btn-success i,
.btn-egrannar i {
  color: inherit !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-success:hover,
.btn.btn-success:hover,
.btn-egrannar:hover {
  filter: brightness(0.9);
  color: var(--brand-primary-text) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Secondary / default */
.btn-secondary,
.btn-default,
.btn.btn-default {
  background-color: var(--white) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none;
}

.btn-secondary:hover,
.btn-default:hover,
.btn.btn-default:hover {
  background-color: var(--g50) !important;
  color: var(--text) !important;
  border-color: var(--text3) !important;
}

/* Danger */
.btn-danger,
.btn.btn-danger {
  background-color: #dc2626 !important;
  color: #fff !important;
  border-color: transparent !important;
}

.btn-danger:hover,
.btn.btn-danger:hover {
  filter: brightness(0.88);
  color: #fff !important;
}

/* Warning */
.btn-warning,
.btn.btn-warning {
  background-color: #f59e0b !important;
  color: #fff !important;
  border-color: transparent !important;
}

.btn-warning:hover,
.btn.btn-warning:hover {
  filter: brightness(0.9);
  color: #fff !important;
}

/* Outline variants */
.btn-outline-secondary {
  background-color: transparent !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--g50) !important;
  color: var(--text) !important;
}

.btn-outline-warning {
  background-color: transparent !important;
  color: #92400e !important;
  border: 1px solid #f59e0b !important;
}

.btn-outline-warning:hover {
  background-color: #fef3c7 !important;
}

/* Disabled state */
.btn.disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* User avatar button - reset generic .btn override */
.btn-user,
.btn.btn-user,
.btn.btn-transparent.btn-user {
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-block !important;
  position: relative !important;
  transition: opacity .15s !important;
  vertical-align: middle;
}

.btn-user:hover,
.btn.btn-user:hover {
  filter: none;
  opacity: 0.85;
  box-shadow: none !important;
}

/* Replace Bootstrap's inline caret with a small badge overlay inside button bounds */
.btn-user.dropdown-toggle::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 1px !important;
  right: 1px !important;
  width: 14px !important;
  height: 14px !important;
  background-color: var(--white) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-size: 9px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 50% !important;
  /* Override Bootstrap's border-triangle approach */
  border-top: 1.5px solid var(--border) !important;
  border-right: 1.5px solid var(--border) !important;
  border-left: 1.5px solid var(--border) !important;
  margin: 0 !important;
  vertical-align: 0 !important;
  pointer-events: none;
}

/* Caret span is removed from PHP but keep rule for safety */
.btn-user span.caret {
  display: none;
}

/* ----------------------------------------------------------------
   User avatar / badge (.userImg)
   ---------------------------------------------------------------- */
.userImg {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-color: var(--g100);  /* fallback if no avatar */
  margin: 0 !important;           /* remove old -10px hack */
  position: relative;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: inline-block;
}

/* User dropdown positioning - own toggle system, no Bootstrap/Popper */
.user-dropdown {
  position: relative;
  display: inline-block;
}

.user-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1050;
  min-width: 160px;
}

.user-dropdown .dropdown-menu.show {
  display: block;
}
.user-dropdown.dropdown-open,
.user-dropdown:has(.dropdown-menu.show) {
  z-index: 1050;
}

/* Dropdown menu styling */
.btn-user + .dropdown-menu,
.user-dropdown .dropdown-menu {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  padding: 4px;
  min-width: 160px;
}

.dropdown-menu .header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px 4px;
}

.dropdown-menu li > a,
.dropdown-menu .dropdown-item {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--text);
  padding: 7px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background .1s;
}

.dropdown-menu li > a:hover,
.dropdown-menu .dropdown-item:hover {
  background: var(--g50);
  color: var(--text);
  text-decoration: none;
}

.dropdown-menu li.divider {
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

/* ============================================================
   Section 12 - Sub-tabs (nested nav-tabs inside tab panes)
   ============================================================ */

.tab-pane .nav-tabs .nav-link {
  color: var(--text2, #555);
}
.tab-pane .nav-tabs .nav-link.active {
  color: var(--text, #333);
}
.tab-pane .nav-tabs .nav-link:hover:not(.active) {
  color: var(--text, #333);
}

/* Reduce top margin on first form-group after headings so
   the label sits close to its heading, not far below it.
   canvasaddons2.css sets .form-group { margin-top: 25px } globally. */
h4 + .form-group,
h5 + .form-group,
h5 + .row .form-group:first-child {
  margin-top: 8px;
}

/* ============================================================
   Section 13 - FAQ block
   ============================================================ */

.faq-block {
  background: var(--g50);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-top: 16px;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.faq-block-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.faq-block-header h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.faq-block-header > i {
  font-size: 17px;
  color: var(--brand-primary);
  line-height: 1;
  flex-shrink: 0;
}

.faq-block-desc {
  font-size: 12px;
  color: var(--text3);
  margin: 0 0 10px 0;
}

.faq-block-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px 8px;
}

.faq-block-list li a {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: var(--brand-primary);
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .1s;
}

.faq-block-list li a:hover {
  background: var(--g100);
  text-decoration: none;
}

.faq-block-list li a > i {
  font-size: 13px;
  opacity: .6;
  flex-shrink: 0;
  margin-top: 2px;
}

.faq-block-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-primary);
  text-decoration: none;
}

.faq-block-more:hover {
  text-decoration: underline;
}

.faq-block-more > i {
  font-size: 12px;
}

/* Legacy .eg-btn - same as .btn-primary */
.eg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--r-sm);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: filter .15s, box-shadow .15s;
  text-decoration: none;
}

.eg-btn-primary {
  background: var(--brand-button);
  color: var(--brand-primary-text);
}

.eg-btn-primary:hover {
  filter: brightness(0.9);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.eg-btn-secondary {
  background: var(--white);
  color: var(--text2);
  border: 1px solid var(--border) !important;
}

.eg-btn-secondary:hover {
  background: var(--g50);
  border-color: var(--text3) !important;
}

/* ----------------------------------------------------------------
   8. Alerts (new design)
   ---------------------------------------------------------------- */
.eg-alert {
  padding: 13px 16px;
  border-radius: var(--r);
  border: 1px solid;
  border-left-width: 4px;
  margin-bottom: 16px;
}

.eg-alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left-color: #3b82f6;
}

.eg-alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  border-left-color: #f59e0b;
}

.eg-alert-error {
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #ef4444;
}

.eg-alert-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-left-color: #22c55e;
}

/* ----------------------------------------------------------------
   9. Sidebar menu overrides (existing _mainmenu_item classes)
   ---------------------------------------------------------------- */
/* Section headings - same styling as eg-section-trigger */
.eg-sidebar .menuHeading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  border: none;
}

.eg-sidebar .menuSection:first-child .menuHeading {
  margin-top: 0;
}

/* Menu item links */
.eg-sidebar .nav-item {
  list-style: none;
  margin-bottom: 2px;
}

.eg-sidebar .nav-link {
  padding: 0;
  border: none;
}

.eg-sidebar .nav-link.menuHeading {
  color: var(--menu-text, var(--text)) !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1.3 !important;
}

.eg-sidebar .nav-item a,
.eg-sidebar .nav-link a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  color: var(--menu-text, var(--text2));
  font-size: 14px;
  font-weight: 450;
  text-decoration: none;
  transition: background .12s, color .12s;
  line-height: 1.3;
}

.eg-sidebar .nav-item a > span,
.eg-sidebar .nav-link a > span {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  min-width: 0;
}

.eg-sidebar .nav-item a:hover,
.eg-sidebar .nav-link a:hover {
  background: var(--menu-hover, var(--g50));
  color: var(--menu-text, var(--g700));
  text-decoration: none;
}

.eg-sidebar .nav-item.current > .nav-link a,
.eg-sidebar .nav-item a.enlight {
  background: var(--menu-active, var(--g100));
  color: var(--menu-text, var(--g700));
  font-weight: 600;
}

/* Menu icons - !important needed to override style.css legacy rules.
   All menu icons use --icon-menu so BRFs can brand them later. */
.eg-sidebar .menuIcon,
.eg-sidebar .menuHeading .menuIcon,
.eg-sidebar .eg-section-trigger .menuIcon {
  font-size: 18px !important;
  width: 22px;
  text-align: center;
  color: var(--menu-icon, var(--icon-menu)) !important;
  flex-shrink: 0;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-start;
  margin-top: 2px !important;
}


.eg-sidebar .lockIcon {
  font-size: 11px;
  color: var(--menu-text-muted, var(--text3));
  position: relative;
  top: -2px;
}

/* Submenu items */
.eg-sidebar .menuItems {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.eg-sidebar .menuItems .nav-item a {
  padding-left: 8px;
  font-size: 13px;
  color: var(--menu-text-muted, var(--text3));
}

/* Collapse arrow */
.eg-sidebar .open-sub-menu {
  float: right;
  font-size: 14px;
  color: var(--menu-text-muted, var(--text3));
  margin-top: 2px;
}

/* Remove old nav borders/backgrounds */
.eg-sidebar .sideMenu {
  padding: 0;
  margin: 0;
}

.eg-sidebar .menuSection {
  padding: 0;
  margin-bottom: 6px !important;
  border: none;
  background: none;
}

/* ----------------------------------------------------------------
   9b. Flyout navigation (pages with sub-pages)
   ---------------------------------------------------------------- */
.eg-flyout-parent {
  position: relative;
}

.eg-flyout-parent > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  color: var(--menu-text, var(--text2));
  font-size: 13.5px;
  font-weight: 450;
  text-decoration: none;
  transition: background .12s, color .12s;
  line-height: 1.3;
}

.eg-flyout-parent > a:hover {
  background: var(--menu-hover, var(--g50));
  color: var(--menu-text, var(--g700));
  text-decoration: none;
}

.eg-flyout-parent > a .eg-flyout-label {
  flex: 1;
}

.eg-flyout-arrow {
  font-size: 12px;
  color: var(--menu-text-muted, var(--text3));
  margin-left: auto;
  flex-shrink: 0;
}

.eg-flyout-panel {
  display: none;
  position: fixed;
  min-width: 200px;
  max-width: 280px;
  background: var(--menu-bg, var(--white));
  border: 1px solid var(--menu-border, var(--border));
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 1000;
}

.eg-flyout-panel.visible {
  display: block;
}

/* Invisible bridge covering the gap between sidebar and panel,
   so the mouse doesn't trigger mouseleave when crossing */
.eg-flyout-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 100%;
}

/* Arrow nub pointing back to sidebar */
.eg-flyout-panel::after {
  content: '';
  position: absolute;
  left: -6px;
  top: var(--nub-top, 12px);
  width: 12px;
  height: 12px;
  background: var(--menu-bg, var(--white));
  border-left: 1px solid var(--menu-border, var(--border));
  border-bottom: 1px solid var(--menu-border, var(--border));
  transform: rotate(45deg);
}

.eg-flyout-header {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--menu-text-muted, var(--text3));
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.eg-flyout-item {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--menu-text, var(--text2));
  text-decoration: none;
  transition: background .1s, color .1s;
}

.eg-flyout-item:hover {
  background: var(--menu-hover, var(--g50));
  color: var(--menu-text, var(--g700));
  text-decoration: none;
}

.eg-flyout-item.active {
  background: var(--menu-active, var(--g100));
  color: var(--menu-text, var(--g700));
  font-weight: 600;
}

/* Menu badge (unread counts) */
.eg-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brand-primary, #0d6efd);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  margin-left: auto;
}

/* Menu "Ny" tag (updated pages) */
.eg-menu-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brand-primary, #0d6efd);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* Section flyout triggers */
.eg-section-flyout > a.eg-section-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  color: var(--menu-text, var(--text));
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  transition: background .12s, color .12s;
  line-height: 1.3;
}

.eg-section-flyout > a.eg-section-trigger:hover {
  background: var(--menu-hover, var(--g50));
  color: var(--menu-text, var(--g700));
  text-decoration: none;
}

/* Sub-group label inside flyout panel */
.eg-flyout-group {
  padding: 8px 10px 3px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.eg-flyout-group:first-child {
  border-top: none;
  margin-top: 0;
}

.eg-flyout-sub {
  padding-left: 16px;
}

/* Raw HTML items inside flyout (e.g. grannskap BRF list) */
.eg-flyout-html {
  padding: 0;
  margin: 0;
  list-style: none;
}

.eg-flyout-html li.brfNameItem {
  list-style: none;
}

.eg-flyout-html a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text2);
  text-decoration: none;
  transition: background .1s, color .1s;
}

.eg-flyout-html a:hover {
  background: var(--g50);
  color: var(--g700);
  text-decoration: none;
}

.eg-flyout-html a.selected {
  background: var(--g100);
  color: var(--g700);
  font-weight: 600;
}

/* Hide grannskap slider/script inside flyout */
.eg-flyout-html .grannskap_menu,
.eg-flyout-html script {
  display: none;
}

/* Flyout notice (multiline info message) */
.eg-flyout-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin: 4px 6px;
  border-radius: 6px;
  background: var(--g50);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text2);
}

.eg-flyout-notice i {
  color: var(--text3);
  flex-shrink: 0;
  margin-top: 1px;
}

.eg-flyout-notice a {
  color: var(--brand-link);
  font-weight: 500;
}

/* ----------------------------------------------------------------
   9c. Content pages (sida.php) — image cards, gallery, video
   ---------------------------------------------------------------- */

/* Image cards — shared by gallery grid and side gallery */
.eg-image-card {
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  transition: box-shadow .15s, transform .15s;
  margin-bottom: 0;
}

.eg-image-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

/* Cards with captions get a background */
.eg-image-card:has(.eg-image-caption) {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.eg-image-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.eg-image-card img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

/* Cards with captions: crop to uniform height */
.eg-image-card:has(.eg-image-caption) img {
  object-fit: cover;
  aspect-ratio: 4/3;
  border-radius: 0;
}

.eg-image-card .eg-image-caption {
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text3);
  line-height: 1.4;
}

/* Gallery grid (intGallery == 1): 3 columns */
.eg-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .eg-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* Side gallery (intGallery == 0): 2 columns in sidebar */
.eg-side-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.eg-side-gallery .eg-image-card:has(.eg-image-caption) img {
  aspect-ratio: 3/2;
}

/* Responsive video wrapper */
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  margin: 16px 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ----------------------------------------------------------------
   9d. DMS / Document tree — modern overrides for jqTree
   ---------------------------------------------------------------- */

/* Header row */
#documentListAllPageHeader h2 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 8px;
}

/* Container — only style when jqTree is present (view mode) */
#documentListAllPage:has(.jqtree-tree) {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px 6px;
  margin-bottom: 16px;
  overflow: hidden;
}

/* Edit mode (Nestable dd-list): ensure pull-right works */
#documentListAllPage .dd-item {
  position: relative;
}

#documentListAllPage .dd-item .pull-right {
  float: right !important;
}

#documentListAllPage .dd-item .fileinfo {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text3);
}

/* Reset old jqtree borders and sizing */
#documentListAllPage ul.jqtree-tree {
  margin: 0;
  padding: 0;
}

#documentListAllPage div.jqtree_common,
#documentListAllPage li.jqtree_common {
  border-bottom: none;
  min-height: auto;
  height: auto;
}

#documentListAllPage div.jqtree_common:hover,
#documentListAllPage li.jqtree_common:hover {
  border-color: transparent;
}

/* Tree node element - the clickable row (view mode only) */
.Sida #documentListAllPage .jqtree-element,
.Dokumentbank #documentListAllPage .jqtree-element {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  height: auto !important;
  border-radius: 6px;
  margin: 1px 4px;
  transition: background .12s;
  cursor: pointer;
  gap: 4px;
}

.Sida #documentListAllPage .jqtree-element:hover,
.Dokumentbank #documentListAllPage .jqtree-element:hover {
  background: var(--g50);
}

/* Selected state (view mode) */
.Sida #documentListAllPage li.jqtree-selected > .jqtree-element,
.Sida #documentListAllPage li.jqtree-selected > .jqtree-element:hover,
.Dokumentbank #documentListAllPage li.jqtree-selected > .jqtree-element,
.Dokumentbank #documentListAllPage li.jqtree-selected > .jqtree-element:hover {
  background: var(--g100);
  box-shadow: none;
}

/* Edit mode: keep float layout working, style rows */
.SidaRedigera #documentListAllPage .jqtree-element {
  padding: 6px 10px;
  height: auto !important;
  transition: background .12s;
}

.SidaRedigera #documentListAllPage .jqtree-element:hover {
  background: var(--g50);
}

/* Toggler chevron */
#documentListAllPage .jqtree-toggler {
  color: var(--text3) !important;
  font-size: 11px !important;
  margin-right: 4px;
  border-bottom: none !important;
  transition: color .12s;
  flex-shrink: 0;
}

#documentListAllPage .jqtree-toggler:hover {
  color: var(--text2) !important;
}

/* Title text */
#documentListAllPage .jqtree-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 0 !important;
  min-width: 0;
}

/* File icons */
#documentListAllPage .dms-file-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  flex-shrink: 0;
  opacity: 0.8;
}

#documentListAllPage .dms-folder-icon {
  width: 20px;
  height: 20px;
}

/* Folder badge */
#documentListAllPage .dms-folder-badge {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  background: var(--g100);
  color: var(--g700);
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 6px;
  opacity: 1;
}

/* File metadata (size + download icon) */
#documentListAllPage .small-info {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--text3);
  margin-left: auto;
  white-space: nowrap;
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

#documentListAllPage .small-info .la-download {
  font-size: 16px;
  color: var(--text3);
  transition: color .12s;
}

#documentListAllPage .small-info .la-download:hover {
  color: var(--g500);
}

/* Nested folders indentation */
#documentListAllPage ul.jqtree_common {
  margin-left: 0;
  padding-left: 0;
}

/* Empty folder placeholder */
#documentListAllPage .jqtree-element .jqtree-title[style*="italic"] {
  font-size: 12.5px !important;
}

/* ----------------------------------------------------------------
   10. Page Submenu (#page-menu)
   ---------------------------------------------------------------- */

#page-menu {
  margin-bottom: 24px;
  height: auto !important;
}

#page-menu-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  height: auto !important;
  position: static !important;
  top: auto !important;
  box-shadow: none !important;
}

#page-menu-wrap .container {
  display: flex !important;
  align-items: center;
  padding: 10px 16px !important;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 100%;
}

#page-menu .menu-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  float: none !important;
}

#page-menu nav {
  float: none !important;
  position: static !important;
  display: block !important;
  margin-left: auto;
  background: transparent !important;
}

#page-menu nav > ul {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  height: auto !important;
  margin: 0;
  padding: 0;
  list-style: none;
  background: none !important;
}

#page-menu nav li {
  float: none !important;
  position: relative;
}

#page-menu nav li > a {
  display: flex !important;
  align-items: center;
  gap: 6px;
  height: auto !important;
  line-height: 1.4 !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2) !important;
  background: rgba(0,0,0,.03) !important;
  border: 1px solid var(--border);
  transition: background .12s, color .12s, border-color .12s;
  text-decoration: none;
  white-space: nowrap;
}

#page-menu nav li > a i {
  font-size: 15px;
  opacity: 0.75;
  text-decoration: none;
}

#page-menu nav li:hover > a,
#page-menu nav li > a:hover {
  background: var(--brf-primary-contrast, var(--white)) !important;
  color: var(--brf-primary, var(--primary)) !important;
  border-color: var(--brf-primary, var(--primary));
  text-decoration: none;
}

#page-menu nav li:hover > a i,
#page-menu nav li > a:hover i {
  color: inherit !important;
  opacity: 1;
  text-decoration: none;
}

#page-menu nav li.current > a {
  background: var(--brf-primary, var(--brand-primary)) !important;
  color: var(--brf-primary-contrast, var(--brand-primary-text)) !important;
  border-color: var(--brf-primary, var(--brand-primary));
}

#page-menu nav li.current > a i {
  opacity: 1;
}

/* Dropdown submenu */
#page-menu nav > ul > li {
  position: relative;
}

#page-menu ul ul {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0;
  min-width: 160px;
  background: var(--white) !important;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
  z-index: 150;
  padding: 4px;
  padding-top: 8px;
  margin-top: 0 !important;
}

#page-menu ul ul::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}

#page-menu li:hover > ul {
  display: block;
}

#page-menu ul ul li {
  float: none !important;
  list-style: none !important;
}

#page-menu ul ul a {
  border-radius: 6px !important;
  height: auto !important;
  padding: 7px 12px !important;
  font-size: 13px;
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
}

#page-menu ul ul li:hover > a {
  background: var(--g50) !important;
}

/* Mobile trigger */
#page-submenu-trigger {
  display: none;
  position: static !important;
  margin-left: auto;
  width: 32px !important;
  height: 32px !important;
  min-height: 0 !important;
  line-height: 32px !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  cursor: pointer;
  color: var(--text2) !important;
  background: transparent !important;
  font-size: 16px !important;
  transition: background .12s;
  opacity: 1 !important;
  pointer-events: auto !important;
  text-align: center;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
}

#page-submenu-trigger:hover {
  background: var(--g50);
}

@media (max-width: 991px) {
  #page-menu-wrap .container {
    position: relative;
    min-height: 40px;
    flex-wrap: wrap;
  }

  #page-submenu-trigger {
    display: flex !important;
    position: absolute !important;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    float: none !important;
    margin: 0 !important;
    z-index: 2;
  }

  #page-menu.pagemenu-active #page-submenu-trigger {
    top: 10px;
    transform: none;
  }

  #page-menu nav {
    display: none !important;
    width: 100% !important;
  }

  #page-menu.pagemenu-active nav {
    display: block !important;
    width: 100% !important;
  }

  #page-menu.pagemenu-active nav > ul {
    flex-direction: column;
    padding: 4px 0 8px;
  }

  #page-menu.pagemenu-active nav li,
  #page-menu.pagemenu-active nav > ul > li {
    display: block !important;
  }

  #page-menu.pagemenu-active nav > ul > li > a {
    border-radius: 8px !important;
    background: rgba(0,0,0,.03) !important;
    color: var(--text2) !important;
    border: 1px solid var(--border) !important;
    padding: 8px 14px !important;
    font-size: 13px;
  }

  #page-menu.pagemenu-active nav > ul > li:hover > a,
  #page-menu.pagemenu-active nav > ul > li > a:hover {
    background: var(--brf-primary-contrast, var(--white)) !important;
    color: var(--brf-primary, var(--primary)) !important;
    border-color: var(--brf-primary, var(--primary)) !important;
  }

  /* Collapsible submenus - hidden by default */
  #page-menu.pagemenu-active ul ul {
    position: static !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 2px 0 4px 20px !important;
    margin-top: 0 !important;
  }

  /* Show submenu when parent has .submenu-open */
  #page-menu.pagemenu-active li.submenu-open > ul {
    display: block !important;
  }

  /* Arrow indicator for items with submenus */
  #page-menu.pagemenu-active nav > ul > li.has-submenu > a::after {
    content: '\25B8';
    margin-left: auto;
    font-size: 11px;
    transition: transform .15s;
  }

  #page-menu.pagemenu-active nav > ul > li.has-submenu.submenu-open > a::after {
    transform: rotate(90deg);
  }

  #page-menu.pagemenu-active nav > ul > li.has-submenu > a {
    display: flex !important;
    justify-content: space-between;
    cursor: pointer;
  }

  #page-menu.pagemenu-active ul ul a {
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--text2) !important;
    border: none !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }

  #page-menu.pagemenu-active ul ul li:hover > a {
    background: var(--g50) !important;
  }

  #page-menu nav li > a {
    border-radius: 8px !important;
  }
}

/* ----------------------------------------------------------------
   11. Issues (Ärenden)
   ---------------------------------------------------------------- */

/* Issue card - override canvasaddons2 dashed border */
.issue {
  background: var(--white);
  border: 1px solid var(--border) !important;
  border-style: solid !important;
  border-radius: var(--r);
  margin-bottom: 10px;
  padding: 0;
  position: relative;
}

/* Issue card header - flex layout replacing Bootstrap col-sm-3/7/2 grid */
.issue-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px 10px;
}

.issue-header-main {
  flex: 1;
  min-width: 0;
}

.issue-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.issue-header-side {
  flex: 0 0 auto;
  text-align: right;
  font-size: 12px;
  color: var(--text3);
}

.issue-header-date {
  white-space: nowrap;
  display: block;
}

.issue-header-moods {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 6px;
}

/* Status badge - change from position:absolute (sticks out) to inline */
.issue .issuestatus {
  position: static !important;
  left: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--g100);
  color: var(--g700);
}

.issue .issuestatus.issuestatus0 { background: var(--g100); color: var(--g600); }
.issue .issuestatus.issuestatus1 { background: #d1fae5; color: #065f46; }
.issue .issuestatus.issuestatus2 { background: #e0f2fe; color: #075985; }
.issue .issuestatus.issuestatus3 { background: #fee2e2; color: #991b1b; }

/* Issue number */
.issue .issue-number {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
  display: inline-flex;
  align-items: center;
}

.issue .issue-number small {
  font-size: 10px;
  margin-right: 1px;
}

.issue .issueid {
  font-size: inherit !important;
  font-weight: inherit;
  color: inherit;
  margin-top: 0 !important;
  display: inline;
}

/* Issue title */
.issue .issuename {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.issue a:hover .issuename {
  color: var(--primary);
}

/* Issue description */
.issue .issuedescription {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--text2);
  display: block;
  margin-top: 4px;
}

/* "Läs mer"-länk - made more prominent so users notice they're seeing a preview
   and can judge how much more content is hidden */
.issue .readmorebtn,
.response .readmorebtn {
  display: inline-block;
  margin-left: 4px;
  font-weight: 600;
  font-size: 13px;
  color: var(--brf-primary, var(--brand-primary));
  text-decoration: none;
  white-space: nowrap;
}
.issue .readmorebtn:hover,
.response .readmorebtn:hover {
  text-decoration: underline;
}

/* Footer row */
.issue .issuefooter {
  background: var(--g50) !important;
  border-top: 1px solid var(--border);
  font-size: 12.5px !important;
  padding: 0;
  margin-top: 12px;
  border-radius: 0 0 var(--r) var(--r);
}

.issue .issuefooter small {
  font-size: 11px !important;
  color: var(--text3);
  display: inline;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Meta row - flex-based footer replacing Bootstrap grid */
.issue-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 10px;
  padding: 10px 16px;
}

.issue-meta-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-shrink: 1;
}

.issue-meta-field small {
  font-size: 10px !important;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
}

.issue-meta-field b {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  display: block;
}

.issue-meta-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.issue-meta-dates {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: right;
  flex-shrink: 0;
}

.issue-meta-date-row {
  font-size: 11.5px;
  color: var(--text3);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.issue-meta-date-row i {
  font-size: 12px;
  opacity: 0.6;
}

/* Keep date + help-icon on same line in responses */
.issuepassed {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.issue-meta-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 8px;
}

/* Last response section */
.issue-last-response {
  border-top: 1px solid var(--border);
  background: var(--g50) !important;
  border-radius: 0 0 var(--r) var(--r);
}

.issue-last-response-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 16px 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.issue-last-response-label i {
  font-size: 13px;
  color: var(--brand-primary);
}

/* Issue title row - keeps title + help icon on same line */
.issue-title-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

.issue-title-row a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section headings in issue view */
.issue-section-heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 0 8px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--border);
}

.issue-section-heading i {
  color: var(--brand-primary);
  font-size: 15px;
}

/* Reply form section */
.issue-reply-section {
  margin-top: 4px;
}
.issue-reply-section .form-group {
  margin-top: 6px;
}

/* Reply form layout */
.reply-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: flex-start;
  margin: 10px 0;
}

.reply-meta-mood,
.reply-meta-attach {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reply-meta-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 3px;
}

.reply-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.reply-status-change {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reply-status-select {
  width: auto !important;
  min-width: 130px;
}

/* Noto Color Emoji - mood images */
img.emoji {
  height: 1.2em;
  width: 1.2em;
  vertical-align: -0.15em;
}

.moods img.emoji {
  height: 28px;
  width: 28px;
  vertical-align: middle;
}

.moodIcon img.emoji {
  height: 20px;
  width: 20px;
  vertical-align: -0.15em;
}

/* Other issues from same user */
.user-issues-section {
  margin-top: 4px;
}

.user-issues-empty {
  font-size: 13px;
  color: var(--text3);
  margin: 0;
  padding: 4px 0 8px;
}

/* All responses - separator between items */
.issue-all-responses {
  border-top: 1px solid var(--border);
}

.issue-all-responses .response + .response {
  border-top: 1px solid var(--border);
}

/* Compact select dropdowns in issue meta row (view mode) */
.issue-meta-row select.form-control {
  font-size: 12.5px;
  height: 30px;
  padding: 2px 24px 2px 8px;
  min-width: 85px;
  max-width: 130px;
  width: auto;
}

.btnInfoHelp {
  margin-right: 4px !important;
  vertical-align: middle;
}

/* Fix negative margin on small-user that pushes avatar off-screen */
.small-user {
  margin-left: 0 !important;
}

/* Avatar + name: prevent line 2 from wrapping under avatar
   ----------------------------------------------------------------
   Pattern 1 (float layout): .small-user floated left + .nameContent sibling
   Fix: overflow:hidden on .nameContent creates a BFC that sits beside the float */
.nameContent {
  display: block;
  overflow: hidden;
}

/* Pattern 2 (inline-block + span): user-dropdown + span.small in same container
   Fix: flex layout on the response user column */
.response .col-sm-2 {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.response .col-sm-2 .user-dropdown {
  flex-shrink: 0;
}

.response .col-sm-2 > span {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.4;
}

/* General utility: wrap avatar + name in this div for correct wrapping everywhere */
.user-avatar-name {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.user-avatar-name .user-dropdown {
  flex-shrink: 0;
}

.user-avatar-name > span,
.user-avatar-name > small,
.user-avatar-name > a {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  padding-top: 8px;
  line-height: 1.4;
}

/* Checkbox & radio - center the checkmark */
/* Form switch toggle - brand colors */
.form-check-input:checked {
  background-color: var(--brand-primary, #0d6efd);
  border-color: var(--brand-primary, #0d6efd);
}
.form-check-input:not(:checked) {
  background-color: var(--g200, #e5e7eb);
  border-color: var(--g300, #d1d5db);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb, 13,110,253), 0.25);
  border-color: var(--brand-primary, #0d6efd);
}

input[type=checkbox]:not(.form-check-input)::after,
input[type=radio]:not(.form-check-input)::after {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

/* Priority */
.issue .issuepriority { font-weight: 500; }
.issue .issuepriority0 { color: var(--text3); }
.issue .issuepriority1 { color: #065f46; }
.issue .issuepriority2 { color: #92400e; }
.issue .issuepriority3 { color: #991b1b; }

/* Dates */
.issue .issuedates {
  font-size: 12px;
  color: var(--text3);
}

/* "Visa"/"Svara" button - scale down slightly */
.issue .issuefooter .btn.btn-primary.btn-sm {
  font-size: 12px;
  padding: 4px 14px;
}

/* Responses section */
.issue .responses {
  background: var(--white);
  border-top: 2px solid var(--border);
  padding: 14px 16px 4px;
  margin: 0;
  border-radius: 0 0 var(--r) var(--r);
}

.issue .responses.well {
  background: var(--white) !important;
  border: none !important;
  border-top: 2px solid var(--border) !important;
  box-shadow: none !important;
  padding: 14px 16px 8px !important;
  margin: 0 !important;
  border-radius: 0 0 var(--r) var(--r) !important;
}

.issue .responses small {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Admin: status select in issuestatus span */
.issue .issuestatus select.ajax {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
}

/* Search/sort bar */
.well.heading {
  background: var(--white);
  border: 1px solid var(--border) !important;
  border-radius: var(--r);
  padding: 12px 16px !important;
  margin-bottom: 16px;
  box-shadow: none !important;
}

/* Search input group */
.well.heading .input-group {
  display: flex;
}

.well.heading .input-group .form-control {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--r) 0 0 var(--r) !important;
  padding: 7px 12px;
  height: auto;
  box-shadow: none;
  color: var(--text);
  background: var(--white);
}

.well.heading .input-group .form-control:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: none;
}

.well.heading .input-group .btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 0 var(--r) var(--r) 0 !important;
  height: auto;
  white-space: nowrap;
}

/* Sort links */
.sorting {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.sorting small {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 6px;
  white-space: nowrap;
}

.sorting .sortBy {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--text2);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: background .12s, color .12s;
}

.sorting .sortBy:hover {
  background: var(--g50);
  color: var(--text);
}

.sorting label {
  font-size: 12.5px;
  color: var(--text2);
  margin-left: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

/* ----------------------------------------------------------------
   13. Issue filter panel
   ---------------------------------------------------------------- */

.issue-filter {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 16px;
  overflow: hidden;
}

.issue-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--g50);
}

.issue-filter-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.issue-filter-title > i {
  font-size: 15px;
  color: var(--brand-primary);
}

.mood-filter-chip.selected {
  background: var(--g100);
  border-color: var(--brand-primary);
  transform: scale(1.1);
}

.issue-filter-clear {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background .1s, color .1s;
  text-decoration: none !important;
}

.issue-filter-clear:hover {
  background: #fee2e2;
  color: #991b1b;
}

.issue-filter-body {
  padding: 10px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: flex-start;
}

.issue-filter-group {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.issue-filter-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding-top: 4px;
  min-width: 68px;
}

.issue-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-chip {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: var(--text2);
  background: var(--g100);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .1s, color .1s, border-color .1s;
  user-select: none;
  white-space: nowrap;
}

.filter-chip:hover {
  background: var(--g200);
  color: var(--text);
}

.filter-chip.selected {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  font-weight: 500;
}

.filter-chip.selected:hover {
  opacity: 0.88;
}

.filter-chip-count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
}

.filter-chip.selected .filter-chip-count {
  opacity: 0.9;
}

/* Mood filter chips */
.issue-filter-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.mood-filter-chip {
  font-size: 17px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  transition: background .1s, border-color .1s, transform .1s;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mood-filter-chip:hover {
  background: var(--g100);
  transform: scale(1.12);
}

.mood-filter-count {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--brand-primary);
  color: #fff;
  border-radius: 10px;
  padding: 0 3px;
  min-width: 14px;
  text-align: center;
  line-height: 14px;
  height: 14px;
}

/* Override old well-filters (safety net) */
.well.well-filters {
  border: 1px solid var(--border) !important;
  background: var(--white) !important;
  box-shadow: none !important;
}

/* ----------------------------------------------------------------
   12. Hide old Canvas header (replaced by eg-topnav)
   ---------------------------------------------------------------- */
#header {
  display: none !important;
}

/* ----------------------------------------------------------------
   Mobile offcanvas menu
   ---------------------------------------------------------------- */
.eg-mobile-offcanvas {
  max-width: 300px;
  font-family: 'Inter', system-ui, sans-serif;
}

.eg-mobile-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
}

.eg-mobile-quicklinks {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.eg-mobile-quicklink {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  transition: background .12s;
}

.eg-mobile-quicklink:hover {
  background: var(--g50);
  color: var(--text);
  text-decoration: none;
}

.eg-mobile-quicklink i {
  font-size: 18px;
}

.eg-mobile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: white;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
}

/* Mobile BRF chooser */
.eg-mobile-brf-chooser {
  border-bottom: 1px solid var(--border);
}
.eg-mobile-brf-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.eg-mobile-brf-current i:first-child {
  font-size: 18px;
  color: var(--brand-primary);
}
.eg-mobile-brf-item {
  display: block;
  padding: 8px 16px 8px 42px;
  font-size: 13px;
  color: var(--text2);
  text-decoration: none;
}
.eg-mobile-brf-item:hover {
  background: var(--g50);
  color: var(--text);
  text-decoration: none;
}
.eg-mobile-brf-item.active {
  font-weight: 600;
  color: var(--brand-primary);
}

.eg-mobile-sidemenu {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

/* Override flyout behavior inside offcanvas - collapsible sections */
.eg-mobile-sidemenu .eg-flyout-panel {
  display: none !important;
  position: static !important;
  min-width: auto;
  max-width: none;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 4px 12px;
  z-index: auto;
  margin: 0;
}

.eg-mobile-sidemenu .eg-flyout-parent.expanded > .eg-flyout-panel {
  display: block !important;
}

.eg-mobile-sidemenu .eg-flyout-panel::before,
.eg-mobile-sidemenu .eg-flyout-panel::after {
  display: none;
}

.eg-mobile-sidemenu .eg-flyout-header {
  display: none;
}

.eg-mobile-sidemenu .menuIcon {
  font-size: 18px !important;
  width: 22px;
  text-align: center;
  color: var(--menu-icon, var(--icon-menu)) !important;
  flex-shrink: 0;
}

.eg-mobile-sidemenu .eg-flyout-arrow {
  font-size: 14px;
  color: var(--text3);
  transition: transform .2s;
  padding: 4px;
  margin: -4px;
  margin-left: auto;
}

.eg-mobile-sidemenu .expanded > a .eg-flyout-arrow,
.eg-mobile-sidemenu .expanded > .eg-section-trigger .eg-flyout-arrow {
  transform: rotate(90deg);
}

.eg-mobile-sidemenu .eg-flyout-item {
  padding: 6px 10px;
  font-size: 13px;
}

.eg-mobile-sidemenu .eg-flyout-group {
  padding: 6px 10px 2px;
  margin-top: 2px;
  border-top: none;
}

/* Make section triggers clickable (JS handles toggle) */
.eg-mobile-sidemenu .eg-section-trigger {
  cursor: pointer;
}

.eg-mobile-sidemenu .eg-section-heading .menuHeading,
.eg-mobile-sidemenu .eg-section-flyout .eg-section-trigger {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 8px 8px 4px;
}

.eg-mobile-usermenu {
  padding: 8px;
  border-bottom: 1px solid var(--border);
}

.eg-mobile-links {
  padding: 8px;
}

.eg-mobile-menuitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--text2);
  text-decoration: none;
  transition: background .12s;
}

.eg-mobile-menuitem:hover {
  background: var(--g50);
  color: var(--text);
  text-decoration: none;
}

.eg-mobile-menuitem i {
  font-size: 17px;
  width: 20px;
  text-align: center;
  color: var(--text3);
}

/* ----------------------------------------------------------------
   9d. Messages / Mailbox
   ---------------------------------------------------------------- */

/* Tabs */
.eg-msg-tabs {
  display: flex;
  gap: 4px;
  padding: 0;
  margin: 0 0 20px;
  list-style: none;
  border-bottom: 2px solid var(--border);
}

.eg-msg-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}

.eg-msg-tabs a:hover {
  color: var(--text);
}

.eg-msg-tabs a.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
  font-weight: 600;
}

.eg-msg-tabs a i {
  font-size: 16px;
}

/* Search bar */
.eg-msg-search {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.eg-msg-search input {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}

.eg-msg-search input:focus {
  outline: none;
  border-color: var(--g400);
  box-shadow: 0 0 0 3px rgba(45,134,83,.12);
}

.eg-msg-search button {
  padding: 8px 18px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--brand-button);
  color: var(--brand-primary-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .15s;
}

.eg-msg-search button:hover {
  opacity: .88;
}

/* Message list */
.eg-msg-list {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

/* Single message row */
.eg-msg-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  color: var(--text2);
  transition: background .1s;
}

.eg-msg-row:last-child {
  border-bottom: none;
}

.eg-msg-row:hover {
  background: var(--g50);
  color: var(--text2);
  text-decoration: none;
}

.eg-msg-row.unread {
  background: var(--white);
}

.eg-msg-row.unread .eg-msg-subject {
  font-weight: 600;
  color: var(--text);
}

.eg-msg-row.unread .eg-msg-sender {
  font-weight: 600;
  color: var(--text);
}

/* Avatar in message row */
.eg-msg-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--g100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g500);
  font-size: 18px;
}

.eg-msg-avatar img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

/* Message content area */
.eg-msg-body {
  flex: 1;
  min-width: 0;
}

.eg-msg-sender {
  font-size: 13.5px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eg-msg-subject {
  font-size: 14px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eg-msg-preview {
  font-size: 12.5px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* Date column */
.eg-msg-date {
  font-size: 12.5px;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

/* Checkbox */
.eg-msg-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

/* Bulk actions footer */
.eg-msg-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
}

.eg-msg-actions select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: var(--white);
  flex: 1;
  max-width: 260px;
}

.eg-msg-actions .eg-btn {
  padding: 6px 16px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--brand-button);
  color: var(--brand-primary-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.eg-msg-actions label {
  font-size: 13px;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: pointer;
}


/* Compose form */
.eg-compose {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 24px;
}

.eg-compose h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.eg-compose h2 i {
  font-size: 20px;
  color: var(--g500);
}

.eg-compose .form-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.eg-compose .form-group label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text2);
  min-width: 60px;
}

.eg-compose .form-control {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  font-size: 14px;
}

.eg-compose .form-control:focus {
  border-color: var(--g400);
  box-shadow: 0 0 0 3px rgba(45,134,83,.12);
}

.eg-compose .message-content {
  margin-top: 16px;
}

.eg-compose .message-content label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 6px;
  display: block;
}

.eg-compose-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.eg-compose-attach {
  font-size: 13.5px;
  color: var(--text2);
}

.eg-compose-attach i {
  margin-right: 4px;
}

.eg-compose-attach input[type="file"] {
  margin-top: 6px;
  font-size: 13px;
}

/* Thread view - light touch */
.eg-thread-header {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.eg-thread-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}

.eg-thread-meta {
  font-size: 13px;
  color: var(--text3);
  line-height: 1.4;
}

.eg-thread-meta strong {
  color: var(--text2);
}

.eg-thread-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.eg-thread-actions .btn {
  font-size: 13px;
}

/* Toastr fix - Bootstrap 5 .toast conflicts with toastr .toast */
#toast-container {
  position: fixed;
  z-index: 999999;
  pointer-events: none;
}

#toast-container > div {
  pointer-events: auto;
}

#toast-container.toast-top-right {
  top: 12px;
  right: 12px;
}

#toast-container > .toast {
  opacity: 1;
  max-width: 350px;
  width: auto;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  margin: 0 0 8px;
  background-color: #333;
  color: #fff;
}

#toast-container > .toast-success {
  background-color: var(--brand-primary);
}

#toast-container > .toast-info {
  background-color: #2f96b4;
}

#toast-container > .toast-error {
  background-color: #bd362f;
}

#toast-container > .toast-warning {
  background-color: #f89406;
}

#toast-container .toast-title {
  font-weight: 600;
  font-size: 13px;
}

#toast-container .toast-message {
  font-size: 13px;
}

/* Chat time tooltip */
.eg-chat-tooltip {
  position: absolute;
  background: var(--g900);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Chat bubbles - conversation view */
.eg-chat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.eg-chat-msg {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  max-width: 75%;
}

.eg-chat-msg.eg-chat-mine {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.eg-chat-msg.eg-chat-other {
  align-self: flex-start;
}

.eg-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.eg-chat-avatar-placeholder {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--g100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g500);
  font-size: 14px;
  flex-shrink: 0;
}

.eg-chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.eg-chat-bubble p {
  margin: 0;
}

.eg-chat-bubble p + p {
  margin-top: 6px;
}

.eg-chat-other .eg-chat-bubble {
  background: var(--g100);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.eg-chat-mine .eg-chat-bubble {
  background: var(--brand-primary);
  color: var(--brand-primary-text);
  border-bottom-right-radius: 4px;
}

.eg-chat-mine .eg-chat-bubble a {
  color: var(--brand-primary-text);
  text-decoration: underline;
}

.eg-chat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding-left: 2px;
}

.eg-chat-mine .eg-chat-meta {
  justify-content: flex-end;
  padding-left: 0;
  padding-right: 2px;
}

.eg-chat-sender {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
}

.eg-chat-time {
  font-size: 11.5px;
  color: var(--text3);
}

/* Chat attachments */
.eg-chat-attachments {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.eg-chat-attachments img {
  max-width: 240px;
  max-height: 180px;
  border-radius: 8px;
  cursor: pointer;
}

.eg-chat-attachments a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  padding: 4px 10px;
  background: rgba(0,0,0,.06);
  border-radius: var(--r-sm);
}

.eg-chat-mine .eg-chat-attachments a {
  background: rgba(255,255,255,.2);
  color: var(--brand-primary-text);
}

/* Chat blocked message */
.eg-chat-blocked {
  background: var(--g50);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text3);
  margin: 4px 0;
}


/* Empty state */
.eg-msg-empty {
  padding: 40px;
  text-align: center;
  color: var(--text3);
  font-size: 14px;
}

.eg-msg-empty i {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 767px) {
  .eg-msg-row {
    padding: 10px 12px;
    gap: 10px;
  }

  .eg-msg-avatar {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .eg-msg-avatar img {
    width: 32px;
    height: 32px;
  }

  .eg-msg-date {
    font-size: 11.5px;
  }

  .eg-msg-tabs {
    flex-wrap: wrap;
    gap: 0;
  }

  .eg-msg-tabs a {
    padding: 6px 10px;
    font-size: 12.5px;
  }

  .eg-msg-tabs a i {
    display: none;
  }

  .eg-compose {
    padding: 16px;
  }

  .eg-compose .form-group {
    flex-direction: column;
    gap: 4px;
  }

  .eg-compose-footer {
    flex-direction: column;
    gap: 12px;
  }

  .eg-compose-footer .btn {
    width: 100%;
    text-align: center;
  }

  .eg-thread-header {
    padding: 14px 16px;
  }

  .eg-thread-title {
    font-size: 16px;
  }

  .eg-thread-actions .btn {
    padding: 4px 10px;
    font-size: 12px;
  }

  .eg-chat-msg {
    max-width: 88%;
    gap: 6px;
  }

  .eg-chat-avatar,
  .eg-chat-avatar-placeholder {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .eg-chat-bubble {
    padding: 8px 12px;
    font-size: 13.5px;
  }


  .eg-chat-attachments img {
    max-width: 180px;
    max-height: 140px;
  }
}

/* ----------------------------------------------------------------
   10. Responsive
   ---------------------------------------------------------------- */
@media (max-width: 991px) {
  .eg-sidebar {
    display: none;
  }

  .eg-topnav-links {
    display: none;
  }

  .eg-topnav {
    padding: 0 12px;
  }

  .eg-content {
    padding: 16px;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 18px;
  }

  body {
    font-size: 14px;
  }
}

/* ----------------------------------------------------------------
   10. Anslagstavla (bulletin board)
   ---------------------------------------------------------------- */

/* Post card container */
.eg-post {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin-bottom: 16px;
  transition: box-shadow .15s;
  max-width: 83.333%;
  scroll-margin-top: 80px;
}
@media (max-width: 1199px) {
  .eg-post { max-width: 91.667%; }
}
@media (max-width: 991px) {
  .eg-post { max-width: 100%; }
}
.eg-post:hover {
  box-shadow: var(--shadow-md);
}

/* Post header: avatar + author info + actions */
.eg-post-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.eg-post-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--g300);
}
.eg-post-author {
  flex: 1;
  min-width: 0;
}
#content .eg-post-author-name {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
#content .eg-post-time {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px;
  color: var(--text3);
  margin-left: 8px;
}

/* Post title */
.eg-post-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
  line-height: 1.3;
  text-transform: none;
}

/* Pinned post card */
.eg-post.eg-post--pinned {
  background: #fffde7;
  border-color: #f5d98a;
  border-left: 4px solid #e8a317;
}

/* Hide "Nytt meddelande" when form is open */
#newMessageBtn.hidden {
  display: none !important;
}

/* Pinned badge */
.eg-badge-pinned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #b45309;
  background: #fef3c7;
  padding: 2px 10px;
  border-radius: 99px;
  vertical-align: middle;
  margin-left: 6px;
}
.eg-badge-pinned i {
  font-size: 14px;
}

/* Post actions row */
.eg-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
#content .eg-post-actions .eg-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px;
  color: var(--text3);
  padding: 3px 10px;
  border-radius: 99px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .12s;
  text-decoration: none;
  white-space: nowrap;
}
.eg-post-actions .eg-action:hover {
  color: var(--text2);
  background: var(--g50);
  border-color: var(--g300);
}
.eg-post-actions .eg-action i {
  font-size: 15px;
}
#content .eg-post-actions .eg-action-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px;
  color: var(--text3);
  cursor: default;
  white-space: nowrap;
}
.eg-post-actions .eg-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  margin: 0 2px;
}

/* Post body content */
.eg-post-body {
  color: var(--text2);
  line-height: 1.7;
  margin-top: 12px;
}
.eg-post-body p:last-child {
  margin-bottom: 0;
}

/* Image gallery grid */
.eg-post-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.eg-post-gallery a {
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.eg-post-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s;
}
.eg-post-gallery a:hover img {
  transform: scale(1.04);
}

/* Attachments */
.eg-post-attachments {
  margin-top: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 16px;
}
#content .eg-post-attachments-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
#content .eg-post-attachment {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13.5px;
}
.eg-post-attachment i {
  color: var(--text3);
  font-size: 16px;
  flex-shrink: 0;
}
.eg-post-attachment a {
  color: var(--brand-link);
  text-decoration: none;
}
.eg-post-attachment a:hover {
  text-decoration: underline;
}

/* Comments section */
.eg-comments {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.eg-comments-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 12px;
}
.eg-comments-title span {
  color: var(--text3);
}

/* Single comment */
.eg-comment {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
}
.eg-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 2px;
}
.eg-comment-body {
  flex: 1;
  min-width: 0;
}
.eg-comment-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.eg-comment-like {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
#content .eg-comment-author {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
#content .eg-comment-time {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
}
.eg-comment-text {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
}
.eg-comment-text p:last-child {
  margin-bottom: 0;
}
.eg-comment-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.eg-comment-images a {
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.eg-comment-images img {
  max-width: 140px;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .12s;
}
.eg-comment-images a:hover img {
  opacity: 0.85;
}
.eg-comment-docs {
  margin-top: 8px;
  font-size: 13px;
}
.eg-comment-docs a {
  color: var(--brand-link);
}
#content .eg-comment-delete {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px;
  color: var(--text3);
  cursor: pointer;
  border: none;
  background: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all .12s;
  text-decoration: none;
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
}
.eg-comment-delete:hover {
  color: #dc2626;
  background: #fef2f2;
}
#content .eg-comment-like .eg-action-sm {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px;
  color: var(--text3);
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--r-sm);
  border: none;
  transition: color 0.15s, background 0.15s;
}
.eg-comment-like .eg-action-sm:hover {
  color: var(--text2);
  background: var(--g50);
  border-color: var(--g300);
}
.eg-comment-like .eg-action-sm i {
  font-size: 13px;
}
.eg-comment-like .like {
  font-size: 12px;
}

/* Comment form */
.eg-comment-form {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.eg-comment-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  resize: vertical;
  transition: border-color .12s;
  background: var(--white);
}
.eg-comment-form textarea:focus {
  outline: none;
  border-color: var(--g400);
  box-shadow: 0 0 0 3px rgba(45, 134, 83, 0.1);
}
#content .eg-comment-form .eg-attach-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px;
  color: var(--text3);
  margin-top: 8px;
  cursor: pointer;
  transition: color .12s;
  text-decoration: none;
}
.eg-comment-form .eg-attach-link:hover {
  color: var(--text2);
}
.eg-comment-form .eg-attach-link i {
  font-size: 16px;
}
.eg-comment-form button[type="submit"] {
  margin-top: 10px;
}

/* New post compose box */
.eg-compose {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.eg-compose-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.eg-compose-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text2);
  margin: 0;
}

/* Board header */
.eg-board-header {
  margin-bottom: 20px;
}
.eg-board-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px 0;
}
.eg-board-desc {
  font-size: 14px;
  color: var(--text3);
  margin: 0;
}
.eg-board-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

/* Override old canvas styles when inside new layout */
.eg-post .entry,
.eg-post .entry-content,
.eg-post .entry-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.eg-post .single-post {
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .eg-post {
    padding: 16px;
    border-radius: var(--r-sm);
  }
  .eg-post-title {
    font-size: 17px;
  }
  .eg-post-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
  }
  .eg-post-actions .eg-action {
    padding: 2px 8px;
    font-size: 12px;
  }
  .eg-comment {
    padding: 10px 12px;
  }
  .eg-comments {
    margin-left: 0;
  }
}

/* ============================================
   11. Lightbox overrides
   ============================================ */
.lb-nav a.lb-prev,
.lb-nav a.lb-next {
  opacity: 1 !important;
}

/* ============================================
   12. Pagination
   ============================================ */
.eg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0 8px;
  font-family: 'Inter', system-ui, sans-serif;
}

.eg-pagination-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border1);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.eg-pagination-btn:hover {
  background: var(--surface3);
  color: var(--text1);
  text-decoration: none;
}

.eg-pagination-pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.eg-pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.eg-pagination-page:hover {
  background: var(--surface2);
  color: var(--text1);
  text-decoration: none;
}

.eg-pagination-page--active {
  background: var(--brand-primary, var(--green));
  color: #fff;
  border-color: var(--brand-primary, var(--green));
  font-weight: 600;
}

.eg-pagination-page--active:hover {
  background: var(--brand-primary, var(--green));
  color: #fff;
}

/* ============================================
   13. Bookings (Mina bokningar)
   ============================================ */
.eg-bookings-group {
  margin-bottom: 16px;
}
.eg-bookings-group-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px;
}
.eg-booking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.eg-booking-item:last-child {
  border-bottom: 0;
}
.eg-booking-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}
.eg-booking-date i {
  color: var(--text3);
  font-size: 16px;
}
.eg-booking-info {
  min-width: 0;
}
.eg-booking-time {
  font-weight: 600;
}
.eg-booking-comment {
  font-size: 13px;
  color: var(--text2);
  padding-left: 24px;
  margin-top: 2px;
}

/* Resource link grid */
.eg-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.eg-resource-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  white-space: normal;
  min-height: 40px;
}
.eg-resource-btn-label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Empty state */
.eg-empty-state {
  text-align: center;
  padding: 48px 24px;
}
.eg-empty-state i {
  font-size: 48px;
  color: var(--text3);
  margin-bottom: 12px;
  display: block;
}
.eg-empty-state p {
  font-size: 15px;
  color: var(--text2);
  margin: 0 0 16px;
}

/* ============================================
   14. Confirm modal (replaces window.confirm)
   ============================================ */
.eg-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.35);
  align-items: center;
  justify-content: center;
}
.eg-modal-overlay.eg-modal-open {
  display: flex;
}
.eg-modal {
  background: var(--white);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  width: 90%;
  max-width: 400px;
  animation: eg-modal-in 0.15s ease-out;
}
@keyframes eg-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.eg-modal-body {
  padding: 28px 24px 16px;
  text-align: center;
}
.eg-modal-icon {
  font-size: 40px;
  color: #ef4444;
  display: block;
  margin-bottom: 12px;
}
.eg-modal-message {
  font-size: 15px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}
.eg-modal-footer {
  display: flex;
  gap: 8px;
  padding: 12px 24px 20px;
  justify-content: center;
}
.eg-modal-hidden {
  display: none !important;
}
.eg-modal-footer .btn {
  min-width: 100px;
  text-align: center;
  justify-content: center;
}

/* ============================================
   15. Profile page (Mina uppgifter)
   ============================================ */
.eg-profile-card {
  margin-bottom: 16px;
}
.eg-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eg-card-title i {
  font-size: 20px;
  color: var(--brand-primary, var(--g600));
}
.eg-profile-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.eg-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.eg-avatar-img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--g200);
}
.eg-avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--g100);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--g200);
}
.eg-avatar-placeholder i {
  font-size: 40px;
  color: var(--g400);
}
.eg-avatar-btn {
  cursor: pointer;
  font-size: 12px !important;
  white-space: nowrap;
}
.eg-avatar-fileinput {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.eg-avatar-wrap {
  position: relative;
  display: inline-block;
}
.eg-avatar-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s;
}
.eg-avatar-remove:hover {
  background: #b91c1c;
}
.eg-avatar-warn {
  font-size: 12px;
  color: #dc2626;
  margin-top: 4px;
  text-align: center;
}
.eg-crop-modal {
  max-width: 520px;
}
.eg-crop-container {
  max-height: 400px;
  overflow: hidden;
}
.eg-crop-container img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}
.eg-profile-fields {
  flex: 1;
  min-width: 0;
}
.eg-profile-hint {
  display: block;
  color: var(--text3);
  margin-top: 4px;
}
.eg-profile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.eg-profile-footer .trisoftStarForm {
  margin: 0;
}
@media (max-width: 767px) {
  .eg-profile-header {
    flex-direction: column;
    align-items: center;
  }
  .eg-profile-fields {
    width: 100%;
  }
}

/* ─────────────────────────────────────
   16. Sort spinner
   ───────────────────────────────────── */
.eg-sort-spinner {
  text-align: center;
  padding: 12px;
  color: var(--text3);
  font-size: 14px;
}
.eg-sort-spinner i {
  font-size: 18px;
  margin-right: 6px;
}

/* ─────────────────────────────────────
   17. Profile view (public profile)
   ───────────────────────────────────── */
.eg-profile-view-card {
  margin-bottom: 16px;
}
.eg-profile-view-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 24px;
}
.eg-profile-view-avatar-wrap {
  margin-bottom: 16px;
}
.eg-profile-view-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--g200);
}
.eg-profile-view-avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--g100);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--g200);
}
.eg-profile-view-avatar-placeholder i {
  font-size: 48px;
  color: var(--g400);
}
.eg-profile-view-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.eg-profile-view-location {
  color: var(--text2);
  font-size: 14px;
  margin: 0 0 2px;
}
.eg-profile-view-location i {
  font-size: 16px;
  vertical-align: -1px;
}
.eg-profile-view-brfs {
  color: var(--text3);
  font-size: 13px;
  margin: 0;
}
.eg-profile-view-actions {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.eg-profile-view-stats {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.eg-profile-view-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.eg-profile-view-stat-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.eg-profile-view-stat-label {
  font-size: 12px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.eg-profile-view-about {
  color: var(--text2);
  line-height: 1.6;
}
.eg-profile-view-tag-group {
  margin-bottom: 16px;
}
.eg-profile-view-tag-group:last-child {
  margin-bottom: 0;
}
.eg-profile-view-tag-group-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.eg-profile-view-tag-row {
  margin-bottom: 10px;
}
.eg-profile-view-tag-row:last-child {
  margin-bottom: 0;
}
.eg-profile-view-tag-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 4px;
}
.eg-profile-view-tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.eg-profile-view-badge {
  display: inline-block;
  background: var(--g100);
  color: var(--text);
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
@media (max-width: 767px) {
  .eg-profile-view-hero {
    padding: 24px 16px 20px;
  }
  .eg-profile-view-stats {
    gap: 16px;
  }
  .eg-profile-view-stat-value {
    font-size: 14px;
  }
}

/* ----------------------------------------------------------------
   Min lägenhet
   ---------------------------------------------------------------- */
.apt-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}
.apt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--g50);
}
.apt-card-label {
  display: block;
  font-size: 12px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.apt-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.apt-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
}
.apt-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.apt-info-item:nth-child(4n) {
  border-right: none;
}
.apt-info-item:nth-last-child(-n+4) {
  border-bottom: none;
}
.apt-info-label {
  font-size: 12px;
  color: var(--text3);
}
.apt-info-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}
.apt-owners-section {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
}
.apt-owners-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.apt-owner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: background .15s;
}
.apt-owner-row:hover {
  background: var(--bg);
}

/* Add apartment section */
.apt-add-section {
  margin-top: 16px;
}
.apt-add-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  margin-top: 12px;
}
.apt-add-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 6px;
}
.apt-add-form select {
  margin-bottom: 14px;
}
.apt-add-form-buttons {
  display: flex;
  gap: 8px;
}

@media (max-width: 991px) {
  .apt-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .apt-info-item:nth-child(4n) {
    border-right: 1px solid var(--border);
  }
  .apt-info-item:nth-child(2n) {
    border-right: none;
  }
  .apt-info-item:nth-last-child(-n+4) {
    border-bottom: 1px solid var(--border);
  }
  .apt-info-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}
@media (max-width: 575px) {
  .apt-info-grid {
    grid-template-columns: 1fr;
  }
  .apt-info-item {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .apt-info-item:last-child {
    border-bottom: none;
  }
  .apt-card-header {
    padding: 12px 16px;
  }
}

/* ----------------------------------------------------------------
   Form card & alerts (andralosenord, etc.)
   ---------------------------------------------------------------- */
.eg-form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}
.eg-form-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.eg-form-help {
  background: var(--g50);
  border-radius: var(--r-sm);
  padding: 16px;
  font-size: 14px;
  color: var(--text2);
  line-height: 1.5;
}
.eg-form-help p:last-child {
  margin-bottom: 0;
}
.eg-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  font-size: 15px;
  margin-bottom: 20px;
}
.eg-alert i {
  font-size: 20px;
  flex-shrink: 0;
}
.eg-alert-success {
  background: var(--g100);
  color: var(--g700);
  border: 1px solid var(--g300);
}
.eg-alert-warning {
  background: #fff8e1;
  color: #7a5d00;
  border: 1px solid #ffe082;
}
@media (max-width: 767px) {
  .eg-form-card {
    padding: 16px;
  }
  .eg-form-help {
    margin-top: 16px;
  }
}

/* ----------------------------------------------------------------
   Bokningsöversikt - resurslista
   ---------------------------------------------------------------- */
.eg-resource-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.eg-resource-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  margin-top: -1px;
  color: var(--text);
  text-decoration: none;
  transition: background .15s;
}
.eg-resource-item:first-child {
  border-radius: var(--r) var(--r) 0 0;
}
.eg-resource-item:last-child {
  border-radius: 0 0 var(--r) var(--r);
}
.eg-resource-item:only-child {
  border-radius: var(--r);
}
.eg-resource-item:hover {
  background: var(--g50);
  color: var(--text);
  text-decoration: none;
}
.eg-resource-item i:first-child {
  font-size: 20px;
  color: var(--g500);
}
.eg-resource-item span {
  flex: 1;
  font-weight: 500;
}
.eg-resource-arrow {
  color: var(--text3);
  font-size: 16px;
}

/* ─────────────────────────────────────
   Import wizard
   ───────────────────────────────────── */
.breadCrumbsImport {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.breadcrumbImport {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 4px;
}
.breadcrumbImport li {
  display: flex;
  align-items: center;
}
.breadcrumbImport li + li::before {
  content: '\203A';
  margin-right: 4px;
  color: #999;
}
.breadcrumbImport li a {
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--g100, #e9ecef);
  color: var(--text, #333);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.breadcrumbImport li a:hover {
  background: var(--g200, #dee2e6);
}
.breadcrumbImport li label {
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--brand-button, var(--brand-primary));
  color: var(--brand-primary-text, #fff);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: default;
}
.scrollablePreviewContent {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 12px;
  margin: 8px 0;
}

/* ----------------------------------------------------------------
   BRF Footer + Egrannar footer
   ---------------------------------------------------------------- */
.brffooter {
  background: var(--brand-section, #f3f2f1);
  color: var(--brand-section-text, #111827);
}
.brffooter h5 {
  color: var(--brand-section-text, #111827);
}
.brffooter b {
  color: var(--brand-section-text, #111827);
}
.brffooter p,
.brffooter .brf-footer-custom-text {
  color: var(--brand-section-text, #111827);
  opacity: 0.85;
}
.footersocialmenu {
  background: #f3f2f1;
  padding: 10px 0;
  font-size: small;
}
.footersocialmenu .btn {
  font-size: small;
}

/* Larger bullet glyphs in user-authored content. Scoped to <ul> only
   because numbered list markers look chunky when scaled up. Email
   templates pull their own styles, so this does not affect outgoing
   notifications. The multiplier is tuned per context because each
   container inherits a different base font-size, and ::marker scales
   relative to that. */
.eg-post-body ul li::marker {
  font-size: 1.45em;
}
.eg-text-body ul li::marker,
.rx-content ul li::marker {
  font-size: 1.25em;
}

/* Multi-level bullet lists: keep the edit view (.rx-content) and the
   published/presentation views (.eg-post-body / .eg-text-body) looking
   identical. Two things are normalised here:

   1. Indent. With list-style-position:outside the marker sits in the
      list's left padding. The presentation lists only had ~7px there,
      so the enlarged bullet glyph (see ::marker rule above) hung out
      past the text column's left edge. Redactor's own CSS is the mirror
      image - it zeroes padding and uses margin-left:20px !important,
      which puts the marker in the margin instead. We give both a real
      left padding (1.6em) and no left margin, so the marker always
      lands inside the text column and both views line up.
   2. Glyph per level. Browsers default to disc -> circle -> square,
      which the presentation already showed, but Redactor forces
      list-style:disc on every <ul> level so the edit view rendered all
      levels filled. We restate the per-level glyphs for all three
      containers so edit and presentation match exactly. (ul ul li wins
      over Redactor's ul li on specificity; ul ul ul li wins over that.)
   ol keeps its own numbering from Redactor's rules. */
.eg-post-body ul, .eg-post-body ol,
.eg-text-body ul, .eg-text-body ol {
  padding-left: 1.6em;
  margin-left: 0;
}
.rx-content ul, .rx-content ol {
  padding-left: 1.6em !important;
  margin-left: 0 !important;
}
.eg-post-body ul ul li,
.eg-text-body ul ul li,
.rx-content ul ul li {
  list-style-type: circle;
}
.eg-post-body ul ul ul li,
.eg-text-body ul ul ul li,
.rx-content ul ul ul li {
  list-style-type: square;
}

/* ----------------------------------------------------------------
   Body text bump 15 -> 16px (trial, 2026-05-10).
   Aligns the actual default with the brf_font_size setting label
   ("Standard (16px)") and gives content-heavy views a more readable
   baseline. h4 is bumped from 15 to 16 in lockstep so it does not
   become smaller than body text. h5 stays at 14 (label-style use).
   The selector also includes 'p' because canvasaddons2.css has its
   own 'body, p { font-size: 14px }' rule that targets <p> directly,
   so inheritance from body alone does not reach paragraphs.
   To revert: comment out this entire block.
   ---------------------------------------------------------------- */
body, p {
  font-size: 16px;
}
h4 {
  font-size: 16px;
}
/* ---------------------------------------------------------------- */