/* ==========================================================
   UmeHus – RealPortal.nu Brand Theme v8 (single file)
   Scope: #portalwrapper   |   Innehåll: ENDAST CSS
   Bas: Blå (hsl(201 100% 18%)), Beige (hsl(36 45% 93%))  |  Accent: Grön (hsl(122 11% 46%)) sparsamt
   ========================================================== */

/* ========== Brand-tokens (lokala) ========== */
#portalwrapper{
  --uh-primary: hsl(201 100% 18%);      /* blå – bas #003B5C */
  --uh-secondary: hsl(36 45% 93%);      /* beige – ytor/sektioner #F5EFE6 */
  --uh-accent: hsl(122 11% 46%);        /* grön – enbart accent/success #678168 */
  --uh-muted: hsl(204 12% 38%);

  --uh-primary-600: hsl(201 100% 14%);  /* mörkare blå #002d47 */
  --uh-primary-100: hsl(201 45% 93%);   /* ljus blå #EAF1F5 */
  --uh-accent-600: hsl(122 11% 38%);    /* mörkare grön #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: hsl(0 0% 100% / 0.92) !important; 
  font-weight: 700 !important;
  padding: 12px 14px !important; 
  border-radius: 8px !important;
  transition: color 0.2s, background 0.2s;
}
#portalwrapper #headermenulinks .nav>li>a.menulink:hover,
#portalwrapper #headermenulinks .nav>li.active>a.menulink{
  color: hsl(0 0% 100%) !important; 
  background: hsl(0 0% 100% / 0.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: hsl(0 0% 100%) !important; 
  font-weight: 700 !important;
}
#portalwrapper #hamburgerMenuLinks .nav>li>a.menulink:hover{
  background: hsl(0 0% 100% / 0.10) !important;
}

/* Login-knapp i header */
#portalwrapper #logindiv .btn.btn-default.dropdown-toggle,
#portalwrapper #logindiv #loginDivBtn #loginBtnPortal{
  background: hsl(0 0% 100%) !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: 0.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: hsl(0 0% 100%) !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: hsl(0 0% 100%) !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: hsl(0 0% 100%) !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: hsl(210 17% 98%) !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 hsl(36 32% 89%) !important; 
  border-radius: 12px !important;
  box-shadow: 0 1px 2px hsl(0 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: hsl(214 15% 66%); 
  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 hsl(201 100% 18% / 0.20) !important;
}
/* Inbyggda statusklasser om portalen sätter dem */
#portalwrapper .has-error .form-control{ 
  border-color: hsl(4 90% 58%) !important; 
  box-shadow: none !important; 
}
#portalwrapper .form-group .help-block{ 
  color: hsl(210 11% 40%) !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 0.2s, border-color 0.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: hsl(0 0% 100%) !important; 
  font-weight: 700 !important; 
}
#portalwrapper tbody tr:hover{ 
  background: hsl(201 100% 18% / 0.04) !important; 
}
#portalwrapper table tbody tr:nth-child(even){ 
  background: hsl(0 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: hsl(0 0% 100%) !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 hsl(201 100% 18% / 0.3); 
  outline-offset: 2px;
}

/* ========== Länkar & footer ========== */
#portalwrapper a:not(.btn):not(.menulink){ 
  color: var(--uh-primary) !important; 
  transition: color 0.2s, border-color 0.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: hsl(0 0% 100% / 0.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 hsl(201 100% 18% / 0.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: hsl(0 0% 73%) !important; 
    background: hsl(0 0% 100%) !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: hsl(0 0% 100%);
  border-radius: 16px;
  padding: 24px 18px;
  margin: 0 auto 16px;
  max-width: 1100px;
  box-shadow: 0 6px 18px hsl(0 0% 0% / 0.15);
}
#portalwrapper .uh-scope .uh-wrap { max-width: 760px; }
#portalwrapper .uh-scope .uh-section {
  background: var(--uh-secondary);
  border: 1px solid hsl(36 32% 89%);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
}

/* Typografi */
#portalwrapper .uh-scope .uh-chip{
  display: inline-block; 
  padding: 8px 12px;
  border: 1px solid hsl(36 45% 93% / 0.35);
  border-radius: 999px; 
  font-weight: 700; 
  font-size: 13px;
  background: hsl(36 45% 93% / 0.12); 
  color: hsl(0 0% 100%);
}
#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: 0.95; 
  font-size: 16px; 
  line-height: 1.5; 
  margin: 0 0 12px; 
}
#portalwrapper .uh-scope .uh-note{ 
  opacity: 0.78; 
  font-size: 12px; 
  margin-top: 8px; 
  color: hsl(0 0% 100%); 
}

/* 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: hsl(0 0% 100%); 
  box-shadow: 0 6px 18px hsl(201 53% 13% / 0.15); 
}
#portalwrapper .uh-scope .uh-btn--accent:hover{ 
  filter: brightness(0.96); 
}

#portalwrapper .uh-scope .uh-chip a{ 
  color: hsl(0 0% 100%); 
  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: hsl(0 0% 100%); 
  border: 1px solid hsl(36 32% 89%); 
  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: hsl(0 0% 100%); 
  text-decoration: none; 
}