/* ==========================================================
   UmeHus – RealPortal.nu Brand Theme v8 (single file)
   Scope: #portalwrapper   |   Innehåll: ENDAST CSS
   Bas: Blå (#003B5C), Beige (#F5EFE6)  |  Accent: Grön (#678168) sparsamt
   ========================================================== */

/* ========== Brand-tokens (lokala) ========== */
#portalwrapper{
  --uh-primary:#003B5C;      /* blå – bas */
  --uh-secondary:#F5EFE6;    /* beige – ytor/sektioner */
  --uh-accent:#678168;       /* grön – enbart accent/success */
  --uh-muted:#6B7280;

  --uh-primary-600:#002d47;
  --uh-primary-100:#EAF1F5;
  --uh-accent-600:#566f5a;

  /* ev. interna variabler som Real läser */
  --colorTheme:var(--uh-primary);
  --colorTheme2:var(--uh-primary-100);
}

/* ========== Bas-typografi (fallback om Poppins saknas) ========== */
#portalwrapper, #portalwrapper *{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ========== Header, logotyp, toppmeny ========== */
#portalwrapper #header{ background:var(--uh-primary) !important; }
#portalwrapper #headerlogo img{ filter:brightness(0) invert(1); }

/* Desktopmeny */
#portalwrapper #headermenulinks .nav>li>a.menulink{
  color:rgba(255,255,255,.92) !important; font-weight:700 !important;
  padding:12px 14px !important; border-radius:8px !important;
  transition:color .2s, background .2s;
}
#portalwrapper #headermenulinks .nav>li>a.menulink:hover,
#portalwrapper #headermenulinks .nav>li.active>a.menulink{
  color:#fff !important; background:rgba(255,255,255,.12) !important;
}
/* Kompaktläge (sätts av portalens JS) */
#portalwrapper #headermenulinks.smallerItems .nav>li>a.menulink{
  font-size:13px !important; padding:10px 12px !important;
}

/* Mobilmeny */
#portalwrapper #hamburgerMenuLinks{ background:var(--uh-primary) !important; }
#portalwrapper #hamburgerMenuLinks .nav>li>a.menulink{
  color:#fff !important; font-weight:700 !important;
}
#portalwrapper #hamburgerMenuLinks .nav>li>a.menulink:hover{
  background:rgba(255,255,255,.10) !important;
}

/* Login-knapp i header */
#portalwrapper #logindiv .btn.btn-default.dropdown-toggle,
#portalwrapper #logindiv #loginDivBtn #loginBtnPortal{
  background:#fff !important; color:var(--uh-primary) !important;
  border:none !important; border-radius:10px !important; font-weight:800 !important;
}

/* ========== Knappar ========== */
#portalwrapper .btn{ border-radius:12px !important; font-weight:700 !important; }
#portalwrapper .btn:active{ transform:translateY(1px); }
#portalwrapper .btn.disabled, #portalwrapper .btn:disabled{ opacity:.55 !important; cursor:not-allowed !important; }

/* Primär = BLÅ */
#portalwrapper .btn-primary,
#portalwrapper button[type="submit"].btn-primary,
#portalwrapper input[type="submit"].btn-primary{
  background:var(--uh-primary) !important; border-color:var(--uh-primary) !important; color:#fff !important;
}
#portalwrapper .btn-primary:hover,
#portalwrapper .btn-primary:focus{
  background:var(--uh-primary-600) !important; border-color:var(--uh-primary-600) !important;
}

/* Sekundär/outline */
#portalwrapper .btn-default{
  background:#fff !important; color:var(--uh-primary) !important; border:1px solid var(--uh-primary) !important;
}

/* Success/BankID – grön som accent (sparsamt) */
#portalwrapper .btn-success,
#portalwrapper a[href*="bankid"],
#portalwrapper button[id*="bankid"]{
  background:var(--uh-accent) !important; border-color:var(--uh-accent) !important; color:#fff !important; font-weight:800 !important;
}
#portalwrapper .btn-success:hover,
#portalwrapper a[href*="bankid"]:hover,
#portalwrapper button[id*="bankid"]:hover{
  background:var(--uh-accent-600) !important; border-color:var(--uh-accent-600) !important;
}

/* Länknapp */
#portalwrapper .btn-link{
  background:transparent !important; border-color:transparent !important; color:var(--uh-primary) !important; padding:0 !important;
}
#portalwrapper .btn-link:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ========== Paneler, sektioner ========== */
#portalwrapper .panel{ border-radius:12px !important; }
#portalwrapper .panel-heading{
  background:#f8f9fa !important; font-weight:800 !important;
  border-top-left-radius:12px !important; border-top-right-radius:12px !important;
}
#portalwrapper .panel-title{ color:var(--uh-primary) !important; font-weight:800 !important; }

/* Beige block/”well” */
#portalwrapper .well, 
#portalwrapper section.soft, 
#portalwrapper .uh-soft{
  background:var(--uh-secondary) !important; border:1px solid #E8E5DE !important; border-radius:12px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* ========== Formulär ========== */
#portalwrapper label, #portalwrapper .control-label{ font-weight:700 !important; color:var(--uh-muted) !important; }
#portalwrapper input[type="text"],
#portalwrapper input[type="email"],
#portalwrapper input[type="tel"],
#portalwrapper input[type="password"],
#portalwrapper input[type="number"],
#portalwrapper textarea, #portalwrapper select{
  border-radius:10px !important; min-height:40px;
}
#portalwrapper ::placeholder{ color:#9aa3ab; opacity:1; }
#portalwrapper input[type="text"]:focus,
#portalwrapper input[type="email"]:focus,
#portalwrapper input[type="tel"]:focus,
#portalwrapper input[type="password"]:focus,
#portalwrapper input[type="number"]:focus,
#portalwrapper textarea:focus, #portalwrapper select:focus{
  border-color:var(--uh-primary) !important; outline:none !important;
  box-shadow:0 0 0 3px rgba(0,59,92,.20) !important;
}
/* Inbyggda statusklasser om portalen sätter dem */
#portalwrapper .has-error .form-control{ border-color:#B3261E !important; box-shadow:none !important; }
#portalwrapper .form-group .help-block{ color:#5f6368 !important; font-size:12px; margin-top:6px; }
#portalwrapper .has-success .form-control{ border-color:var(--uh-accent) !important; box-shadow:none !important; }

/* ========== Tabs ========== */
#portalwrapper .nav-tabs>li>a{ font-weight:700 !important; transition:color .2s, border-color .2s; }
#portalwrapper .nav-tabs>li.active>a,
#portalwrapper .nav-tabs>li.active>a:focus,
#portalwrapper .nav-tabs>li.active>a:hover{
  color:var(--uh-primary) !important; font-weight:800 !important;
  border-bottom:2px solid var(--uh-primary) !important;
}

/* ========== Tabeller ========== */
#portalwrapper .table td, #portalwrapper .table th{ vertical-align:middle; padding:10px 12px; }
#portalwrapper table thead{ background:var(--uh-primary) !important; }
#portalwrapper thead th{ color:#fff !important; font-weight:700 !important; }
#portalwrapper tbody tr:hover{ background:rgba(0,59,92,.04) !important; }
#portalwrapper table tbody tr:nth-child(even){ background:rgba(0,0,0,.015); }
#portalwrapper td.num, #portalwrapper th.num{ text-align:right; }

/* Sticky header om tabell ligger i .table-responsive */
#portalwrapper .table-responsive{ overflow:auto; }
#portalwrapper .table-responsive thead th{
  position:sticky; top:0; z-index:2;
  background:var(--uh-primary) !important; color:#fff !important;
}

/* Valbar rad (om portalen sätter klass) */
#portalwrapper tbody tr.is-clickable{ cursor:pointer; }
#portalwrapper tbody tr.is-selected{
  background:var(--uh-primary-100) !important; outline:2px solid var(--uh-primary-100);
}

/* ========== Alerts, badges, pagination ========== */
#portalwrapper .alert-info{ border-left:4px solid var(--uh-primary) !important; }
#portalwrapper .alert-success{ border-left:4px solid var(--uh-accent) !important; }

#portalwrapper .badge, #portalwrapper .label{ border-radius:999px !important; font-weight:700 !important; }
#portalwrapper .label-info,  #portalwrapper .badge-info{ background:var(--uh-primary) !important; }
#portalwrapper .label-success,#portalwrapper .badge-success{ background:var(--uh-accent) !important; }

#portalwrapper .pagination>li>a, #portalwrapper .pagination>li>span{
  min-width:36px; min-height:36px; line-height:36px; border-radius:10px;
}
#portalwrapper .pagination>li>a:focus-visible{
  outline:3px solid rgba(0,59,92,.3); outline-offset:2px;
}

/* ========== Länkar & footer ========== */
#portalwrapper a:not(.btn):not(.menulink){ color:var(--uh-primary) !important; transition:color .2s, border-color .2s; }
#portalwrapper a:not(.btn):not(.menulink):hover{ color:var(--uh-primary-600) !important; text-decoration:underline; text-underline-offset:2px; }

#portalwrapper footer, #portalwrapper .page-footer{
  background:var(--uh-primary) !important; color:rgba(255,255,255,.92) !important;
}

/* ========== Tillgänglighet & rörelse ========== */
#portalwrapper a:focus-visible,
#portalwrapper button:focus-visible,
#portalwrapper input:focus-visible,
#portalwrapper select:focus-visible{
  outline:3px solid rgba(0,59,92,.30) !important; outline-offset:2px !important;
}
@media (prefers-reduced-motion: reduce){
  #portalwrapper *{ transition:none !important; animation:none !important; }
}

/* ========== “Green guard” – inga stora gröna bakgrunder ========== */
#portalwrapper header, 
#portalwrapper footer, 
#portalwrapper .panel, 
#portalwrapper .well{ background-color:initial; }
#portalwrapper header, #portalwrapper footer{ background:var(--uh-primary) !important; }
#portalwrapper .panel,  #portalwrapper .well{ background:var(--uh-secondary) !important; }

/* ========== Print – rena utskrifter (avier/ärenden) ========== */
@media print{
  #portalwrapper #header,
  #portalwrapper .page-footer,
  #portalwrapper .nav,
  #portalwrapper .pagination,
  #portalwrapper .btn{ display:none !important; }
  #portalwrapper .panel, #portalwrapper .well{
    box-shadow:none !important; border-color:#bbb !important; background:#fff !important;
  }
}

---


/* =========================================
   UmeHus komponent-kit v8.1 (för sid-HTML)
   Scope: #portalwrapper .uh-scope { … }
   ========================================= */

#portalwrapper .uh-scope { font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }

/* Sektioner */
#portalwrapper .uh-scope .uh-banner {
  background: var(--uh-primary);
  color: #fff;
  border-radius: 16px;
  padding: 24px 18px;
  margin: 0 auto 16px;
  max-width: 1100px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
#portalwrapper .uh-scope .uh-wrap { max-width: 760px; }
#portalwrapper .uh-scope .uh-section {
  background: var(--uh-secondary);
  border: 1px solid #E8E5DE;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
}

/* Typografi */
#portalwrapper .uh-scope .uh-chip{
  display:inline-block; padding:8px 12px;
  border:1px solid rgba(245,239,230,.35);
  border-radius:999px; font-weight:700; font-size:13px;
  background:rgba(245,239,230,.12); color:#fff;
}
#portalwrapper .uh-scope .uh-title{ font-weight:800; font-size:28px; line-height:1.2; margin:10px 0 6px; }
#portalwrapper .uh-scope .uh-lead{ opacity:.95; font-size:16px; line-height:1.5; margin:0 0 12px; }
#portalwrapper .uh-scope .uh-note{ opacity:.78; font-size:12px; margin-top:8px; color:#fff; }

/* Knappar & chips-rad */
#portalwrapper .uh-scope .uh-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:6px 0 2px; }
#portalwrapper .uh-scope .uh-btn{
  display:inline-block; text-decoration:none; border-radius:12px; padding:10px 14px;
  font-weight:800;
}
#portalwrapper .uh-scope .uh-btn--accent{ background: var(--uh-accent); color:#fff; box-shadow:0 6px 18px rgba(16,35,49,.15); }
#portalwrapper .uh-scope .uh-btn--accent:hover{ filter:brightness(.96); }

#portalwrapper .uh-scope .uh-chip a{ color:#fff; text-decoration:none; }

/* Grid/kort (om du vill lägga små rutor) */
#portalwrapper .uh-scope .uh-grid{ display:grid; gap:12px; }
@media (min-width:720px){ #portalwrapper .uh-scope .uh-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
#portalwrapper .uh-scope .uh-card{
  background:#fff; border:1px solid #e8e5de; border-radius:12px; padding:14px;
}
#portalwrapper .uh-scope .uh-card h3{ margin:0 0 6px; font-size:18px; font-weight:700; color:var(--uh-primary); }
#portalwrapper .uh-scope .uh-card p{ margin:0; line-height:1.5; }

/* Små hjälpare */
#portalwrapper .uh-scope .uh-cta-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
#portalwrapper .uh-scope .uh-cta-row a{ color:#fff; text-decoration:none; }