/* byggpass:app.css */
:root{
      --bg:#f6f7f9;
      --card:#ffffff;
      --text:#111;
      --muted:#6b7280;
      --border:#e5e7eb;
      --primary:#111;
      --primaryText:#fff;
      --radius:16px;
      --danger:#b91c1c;
      --success:#166534;
      --warn:#b45309;
    }
    * { box-sizing: border-box; }
    body{
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
      background: var(--bg);
      color: var(--text);
      max-width: 1020px;
      margin: 16px auto;
      padding: 0 14px;
      line-height: 1.35;
    }
    a{ color: inherit; }
    a.link{ color:#2563eb; text-decoration:none; }
    a.link:hover{ text-decoration: underline; }
    .top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom: 10px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 240px;
    }
    .logo{
      width:40px; height:40px;
      border-radius: 12px;
      background:#111;
      display:flex; align-items:center; justify-content:center;
      color:#fff;
      font-weight:800;
      letter-spacing:-0.02em;
      user-select:none;
    }
    h1{ margin:0; font-size: 1.35rem; line-height: 1.15; }
    h2{ margin:0 0 10px 0; font-size: 1.15rem; }
    .subtitle{ color: var(--muted); font-size: 0.95rem; margin-top:2px; }
    .nav{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
      justify-content:flex-end;
    }
    .card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      margin: 12px 0;
      box-shadow: 0 1px 0 rgba(0,0,0,0.03);
      overflow-wrap: anywhere;
    }
    .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    label{ display:block; font-weight:650; margin-top: 10px; }
    input, textarea, select{
      width:100%;
      padding: 11px 12px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background:#fff;
      font-size: 1rem;
    }
    textarea{ min-height: 120px; }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--primary);
      background: var(--primary);
      color: var(--primaryText);
      text-decoration:none;
      cursor:pointer;
      font-weight:650;
      white-space: nowrap;
    }
    .btn.secondary{ background:#fff; color: var(--primary); border:1px solid var(--border); }
    .btn.danger{ background: var(--danger); border-color: var(--danger); }
    .muted{ color: var(--muted); font-size: 0.95rem; }
    .flash{
      background:#fff7ed;
      border:1px solid #fed7aa;
      padding: 10px 12px;
      border-radius:12px;
      margin: 10px 0;
    }
    code{ background:#f3f4f6; padding:2px 6px; border-radius: 8px; }
    table{
      width:100%;
      border-collapse: collapse;
      display:block;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
    }
    thead, tbody{ display: table; width:100%; }
    th, td{
      text-align:left;
      border-bottom:1px solid #f1f5f9;
      padding:10px 8px;
      vertical-align: top;
      word-break: break-word;
    }
    th{ font-size:0.92rem; color: var(--muted); font-weight:700; }
    .pill{
      display:inline-block;
      padding:4px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      font-size:0.9rem;
    }
    .pill.ok{ border-color:#bbf7d0; background:#f0fdf4; color: var(--success); }
    .pill.warn{ border-color:#fed7aa; background:#fff7ed; color: var(--warn); }
    .pill.danger{ border-color:#fecaca; background:#fef2f2; color: var(--danger); }
    .grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    .kpi{ font-size: 1.4rem; font-weight: 800; }
    .kpi-label{ color: var(--muted); font-size: 0.9rem; }
    /* Loading overlay for uploads/imports */
    #overlay{
      position: fixed;
      inset:0;
      background: rgba(17,17,17,0.55);
      display:none;
      align-items:center;
      justify-content:center;
      z-index: 9999;
      padding: 20px;
    }
    #overlay .box{
      background: #fff;
      border-radius: 18px;
      padding: 18px 16px;
      width: min(520px, 100%);
      border: 1px solid var(--border);
      text-align: center;
    }
    #overlay .spinner{
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 3px solid #e5e7eb;
      border-top-color: #111;
      margin: 0 auto 10px auto;
      animation: spin 1s linear infinite;
    }
    @keyframes spin{ to { transform: rotate(360deg); } }

    /* Mobile */
    @media (max-width: 720px){
      body{ margin: 12px auto; padding: 0 12px; }
      .row{ grid-template-columns: 1fr; }
      .grid3{ grid-template-columns: 1fr; }
      .top{ flex-direction: column; align-items: flex-start; gap: 10px; }
      input, textarea, select { font-size: 16px; } /* iOS zoom fix */
      .btn{ width: 100%; }
      table{ display:block; overflow-x:auto; }
      th, td{ white-space: nowrap; }
    }

.overlay-title{ font-weight:700; }
.overlay-subtitle{ margin-top:6px; }


/* byggpass:landing:v1 */
.hero { padding: 18px; }
.kicker { color: var(--muted); font-weight: 650; }
.hero-headline { font-size: 1.4rem; font-weight: 850; letter-spacing: -0.02em; margin-top: 6px; }
.hero-sub { margin-top: 8px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.hero-note { margin-top: 10px; }

.steps { display:flex; flex-direction:column; gap:12px; margin-top: 10px; }
.step { display:flex; gap:12px; align-items:flex-start; padding: 10px 0; border-top: 1px solid #f1f5f9; }
.step:first-child { border-top: 0; padding-top: 0; }
.step-badge { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border); display:flex; align-items:center; justify-content:center; font-weight: 750; }
.step-title { font-weight: 750; }

.faq { border-top: 1px solid #f1f5f9; padding-top: 10px; margin-top: 10px; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq summary:focus{ outline:none; }
.faq summary:focus-visible{ box-shadow: 0 0 0 2px rgba(17,17,17,0.25); border-radius: 10px; }
@media (max-width: 720px){
  .hero-actions .btn { width: 100%; }
}


/* byggpass:home-link:v1 */
.brandlink{ text-decoration:none; color:inherit; }
.brandlink:hover .logo{ opacity:0.92; }
.brandlink:focus{ outline:none; }
.brandlink:focus-visible{ box-shadow: 0 0 0 2px rgba(17,17,17,0.30); border-radius: 16px; }
/* byggpass:nav-active:v1 */
.btn:hover{ filter: brightness(0.96); }
.btn.secondary:hover{ background: var(--bg); border-color: var(--border); filter: none; }
.btn:focus{ outline:none; }
.btn:focus-visible{ box-shadow: 0 0 0 2px rgba(17,17,17,0.30); }
.btn.secondary.active{ background: var(--primary); color: var(--primaryText); border-color: var(--primary); }


/* byggpass:focus-visible:v1 */


/* byggpass:portal-upload-doc:v1 */
.upload-head{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.form-help{ margin: 6px 0 8px 0; }
.form-note{ margin-top:10px; }
.actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width: 720px){
  .actions .btn{ width:100%; }
}


/* byggpass:upload-success-css:v1 */
.success-card{ border-color:#bbf7d0; background:#f0fdf4; }
.success-text{ margin-top:8px; }


/* byggpass:doc-group-row:v1 */
tr.doc-group-row td {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-top: 12px;
  padding-bottom: 12px;
}
tr.doc-group-row .pill { margin-right: 8px; }


/* byggpass:public-docs-sticky-open:v1 */
@media (max-width: 720px){
  .docs-table th:last-child,
  .docs-table td:last-child{
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--card);
    box-shadow: -8px 0 12px rgba(0,0,0,0.04);
  }
  .docs-table td:last-child{
    min-width: 110px;
  }
}


/* byggpass:public-docs-click:v1 */
.docs-table .doccell-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.docs-table .doccell-link:hover {
  text-decoration: underline;
}
@media (max-width: 720px){
  /* På mobil: göm "Öppna"-kolumnen helt så man slipper sidscroll */
  .docs-table th:last-child,
  .docs-table td:last-child {
    display: none;
  }
  /* Override för tabeller som annars blir nowrap på mobil */
  .docs-table th,
  .docs-table td {
    white-space: normal !important;
  }
}


/* byggpass:public-docs-open-icon:v2 */
.docs-table .btn.secondary{
  padding: 8px 10px;
  min-width: 40px;
  justify-content: center;
}
.docs-table th:last-child{
  width: 1%;
}


/* byggpass:portal-product-detail:v2 */
.bp-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.bp-bar-center{ align-items:center; }
.bp-bar-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.bp-mt12{ margin-top:12px; }
.bp-prewrap{ white-space:pre-wrap; }

.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; margin-top:10px; }
.table-wrap table{ margin:0; }

@media (max-width: 720px){
  .bp-bar-actions .btn{ width: 100%; }
  .table-wrap table{ min-width: 640px; }
}


/* byggpass:public-docs-mobile-wrap:v1 */
@media (max-width: 720px){
  /* 1) Typ-kolumnen ska aldrig bryta per bokstav */
  .docs-table th:first-child,
  .docs-table td:first-child {
    white-space: nowrap !important;
    min-width: 110px;
  }
  .docs-table td:first-child .pill {
    display: inline-block;
    white-space: nowrap;
  }

  /* 2) Filnamn (kolumn 2) ska kunna brytas snyggt även vid långa tokens */
  .docs-table td:nth-child(2) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .docs-table td:nth-child(2) .doccell-link {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}


/* byggpass:portal-new-product:v1 */
.bp-mt6{ margin-top:6px; }
.bp-max75ch{ max-width:75ch; }


/* byggpass:portal-form-polish:v1 */
.bp-form-note{ margin-top:6px; max-width:75ch; }

@media (max-width: 720px){
  /* Form actions: alltid tydliga på mobil */
  .actions{ display:flex; flex-direction:column; gap:10px; }
  .actions .btn{ width: 100%; }
}


/* byggpass:auth-narrow-card:v1 */
.bp-card-narrow{ max-width:520px; margin:0 auto; }

/* PR7.0 TABLE-WRAP START */
/* Gör breda tabeller scrollbara på mobil utan att sabba desktop */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

/* Lite luft så tabeller inte “klistrar” mot kanter på små skärmar */
@media (max-width: 720px) {
  .table-wrap {
    margin: 0 -12px;
    padding: 0 12px;
  }
}
/* PR7.0 TABLE-WRAP END */

/* PR7.0 SPACING TOKENS START */
/* Små spacing-tokens för att ersätta inline styles (PR7.0 step2) */
:where(.mt-6)  { margin-top: 6px; }
:where(.mt-8)  { margin-top: 8px; }
:where(.mt-10) { margin-top: 10px; }
:where(.mt-12) { margin-top: 12px; }
:where(.m-0)   { margin: 0; }

:where(.mt-14) { margin-top: 14px; }
:where(.mb-6)  { margin-bottom: 6px; }
:where(.mb-16) { margin-bottom: 16px; }
:where(.lh-115){ line-height: 1.15; }
/* PR7.0 SPACING TOKENS END */

/* PR7.0 LAYOUT TOKENS START */
/* Layout-tokens för att ersätta inline styles (PR7.0 step2.2) */
:where(.flex) { display: flex; }
:where(.col) { flex-direction: column; }
:where(.wrap) { flex-wrap: wrap; }
:where(.items-center) { align-items: center; }
:where(.items-start) { align-items: flex-start; }
:where(.justify-between) { justify-content: space-between; }

:where(.gap-6)  { gap: 6px; }
:where(.gap-10) { gap: 10px; }
:where(.gap-16) { gap: 16px; }
:where(.gap-18) { gap: 18px; }

:where(.text-center) { text-align: center; }
:where(.minw-220) { min-width: 220px; }
:where(.maxw-60ch) { max-width: 60ch; }

:where(.flex-1-420) { flex: 1 1 420px; }
:where(.flex-0-280) { flex: 0 0 280px; }

:where(.hero-list) { margin: 12px 0 0 18px; }

:where(.qr-mock) {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
  display: inline-block;
}

:where(.qr-img) {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  padding: 8px;
}
/* PR7.0 LAYOUT TOKENS END */

/* PR7.0 ALERTS START */
/* Alerts / flash (PR7.0 step3.1) – tydligt men inte skrikigt */
.flash {
  width: min(980px, calc(100% - 24px));
  margin: 12px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alert {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.03);
}

.alert--ok {
  background: rgba(46, 204, 113, .10);
  border-color: rgba(46, 204, 113, .35);
}

.alert--error {
  background: rgba(231, 76, 60, .10);
  border-color: rgba(231, 76, 60, .35);
}

.alert--info,
.alert--message {
  background: rgba(52, 152, 219, .08);
  border-color: rgba(52, 152, 219, .30);
}

.alert--warn,
.alert--warning {
  background: rgba(241, 196, 15, .12);
  border-color: rgba(241, 196, 15, .35);
}
/* PR7.0 ALERTS END */

/* PR7.0 TABLE MOBILE START */
/* Gör tabeller mer touch-vänliga på mobil utan att störa desktop */
@media (max-width: 720px) {
  .table-wrap table th,
  .table-wrap table td {
    padding: 10px 10px;
    vertical-align: top;
  }

  /* Länkar i tabeller blir lättare att trycka */
  .table-wrap table a {
    display: inline-block;
    padding: 6px 0;
  }

  /* Lite mer luft mellan rader */
  .table-wrap table tr {
    border-bottom-width: 1px;
  }
}
/* PR7.0 TABLE MOBILE END */

/* PR7.0 TABLE CELL LINK START */
/* Gör första cellen i produkttabellen mer klickbar (PR7.0 step3.3.2b) */
.table-wrap .cell-link {
  display: block;
  text-decoration: none;
}

.table-wrap .cell-link .cell-title {
  font-weight: 600;
}

.table-wrap .cell-link .muted {
  margin-top: 2px;
}
/* PR7.0 TABLE CELL LINK END */

/* PR7.0 DOC LINKS START */
/* Gör dokumentnamn till tydlig klickyta i tabeller (PR7.0 step3.3.3) */
.table-wrap .doc-link {
  display: block;
  text-decoration: none;
}

.table-wrap .doc-link .cell-title {
  font-weight: 600;
}

.table-wrap .doc-link .muted {
  margin-top: 2px;
}

.table-wrap .doc-link-inline {
  text-decoration: none;
  font-weight: 600;
}
/* PR7.0 DOC LINKS END */

/* PR7.0 BP-BAR ACTIONS START */
/* Säkerställ att actions-knappar inte blir fullbredd på desktop */
@media (min-width: 721px) {
  .bp-bar-actions .btn { width: auto; }
}
/* PR7.0 BP-BAR ACTIONS END */

/* PR7.4.6 KPI LINKS START */
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
.card-link:hover {
  transform: translateY(-1px);
}
.card-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* PR7.4.6 KPI LINKS END */

/* PR7.4.7 KPI HOVER START */
/* SaaS-känsla: subtil affordance (ingen “studs”), bara lätt hover/fokus */
.card-link {
  transition: background .08s ease, box-shadow .08s ease, border-color .08s ease;
}

.card-link:hover {
  transform: none; /* override PR7.4.6 */
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

@media (prefers-reduced-motion: reduce) {
  .card-link { transition: none; }
}
/* PR7.4.7 KPI HOVER END */

/* PR7.4.9 QUOTA PILLS START */
/* Diskret varnings-pill (SaaS-ish) */
.pill.warn {
  background: rgba(241, 196, 15, .08);
  border-color: rgba(241, 196, 15, .25);
}
/* PR7.4.9 QUOTA PILLS END */

/* PR7.4.10 TOPLIST SORT START */
.bp-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.bp-inline-form label {
  margin: 0;
}
.bp-inline-form select {
  max-width: 220px;
}
/* PR7.4.10 TOPLIST SORT END */

/* PR7.4.11 ADMIN UI START */
/* SaaS-ish: kompakta knappar i nav + toolbars + filterrader */
.nav .btn,
.bp-bar-actions .btn,
.bp-inline-form .btn,
.btn.compact {
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.1;
}

@media (max-width: 720px) {
  .nav .btn,
  .bp-bar-actions .btn,
  .bp-inline-form .btn {
    padding: 12px 14px;
    font-size: 15px;
  }
}

/* Filterrad: tydlig och diskret */
.bp-inline-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.bp-inline-form label {
  margin: 0;
}

.bp-inline-form input[type="text"] {
  width: 220px;
  max-width: 100%;
}

.bp-inline-form .chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bp-inline-form .btn {
  white-space: nowrap;
}
/* PR7.4.11 ADMIN UI END */



/* PR7.4.12 LAYOUT STABILITY START */
/* Minska layout-jump vid server-renderad filtrering (scrollbar/viewport). */
html{ overflow-y: scroll; scrollbar-gutter: stable; }
#toplist{ scroll-margin-top: 14px; }
/* PR7.4.12 LAYOUT STABILITY END */


/* PR7.4.12 ADMIN BUTTONS START */
/* Admin: knappar ska se ut som knappar, inte chips/cirklar. */
body[data-nav="admin"] .btn{ border-radius: 12px; min-height: 40px; line-height: 1.05; }
body[data-nav="admin"] button.btn{ -webkit-appearance: none; appearance: none; }
@media (max-width: 720px){
  body[data-nav="admin"] .btn{ width: auto; min-height: 44px; }
}
/* PR7.4.12 ADMIN BUTTONS V2 START */
/* Fortnox-ish: konsekvent knappkänsla i admin utan att påverka hamburger/nav-toggle. */
body[data-nav="admin"] a.btn,
body[data-nav="admin"] button.btn,
body[data-nav="admin"] input.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body[data-nav="admin"] .btn:not(.nav-toggle) {
  padding: 10px 14px;
  font-weight: 650;
  white-space: nowrap;
}

body[data-nav="admin"] .bp-filterbar .btnrow .btn {
  min-width: 110px;
}

@media (max-width: 520px){
  body[data-nav="admin"] .bp-filterbar .btnrow .btn { min-width: 0; }
}
/* PR7.4.12 ADMIN BUTTONS V2 END */

/* PR7.4.12 ADMIN BUTTONS END */

/* PR7.4.12 ADMIN FILTERBAR START */
/* PR7.4.13 ADMIN DASH CLEANUP START */
/* Filterrad: ska kännas som en tydlig “linje” direkt ovanför tabellen. */
.bp-filterbar{
  margin: 12px 0 8px 0;
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
  gap: 10px 12px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: var(--bg);
}
.bp-filterbar .field{ min-width: 0; }
.bp-filterbar .field-label{
  display:block;
  margin: 0 0 6px 0;
  font-weight: 750;
  font-size: 0.9rem;
  color: var(--muted);
}
.bp-filterbar input[type="text"], .bp-filterbar select{ width: 100%; }
body[data-nav="admin"] .bp-filterbar input[type="text"],
body[data-nav="admin"] .bp-filterbar select{ min-height: 44px; }
body[data-nav="admin"] .bp-filterbar .btn{ min-height: 44px; }
.bp-filterbar .chkline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-weight: 650;
  white-space: nowrap; /* stoppa “Nära grän / s” */
}
.bp-filterbar .btnrow{ display:flex; gap: 8px; align-items:center; }
.bp-filterbar .is-disabled{ opacity: .45; pointer-events: none; }
.bp-filterhelp{ margin: 0 0 10px 0; }

@media (max-width: 920px){
  .bp-filterbar{ grid-template-columns: 1fr 1fr; }
  .bp-filterbar .field--actions{ grid-column: 1 / -1; }
}
@media (max-width: 520px){
  .bp-filterbar{ grid-template-columns: 1fr; }
  .bp-filterbar .btnrow{ width: 100%; }
  .bp-filterbar .btnrow .btn{ flex: 1 1 0; justify-content: center; }
}
/* PR7.4.13 ADMIN DASH CLEANUP END */
/* PR7.4.12 ADMIN FILTERBAR END */


/* PR7.4.14 ADMIN ACTIVITY START */
#activity{ scroll-margin-top: 14px; }
/* PR7.4.14 ADMIN ACTIVITY END */

/* PR7.5 BRAND START */
/* Diskret brand-tagline (SaaS-ish). */
.brand-tagline{
  margin-left: 10px;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 650;
}
@media (max-width: 720px){
  .brand-tagline{ display: none; }
}
.landing-tagline{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 650;
}
/* PR7.5 BRAND END */

/* PR8.0 IMPORT REPORT START */
.import-summary{ margin-top: 8px; }
.import-limit{ margin-top: 10px; }
.import-errors-title{ margin-top: 10px; }
.import-errors{ margin: 6px 0 0 18px; }
.import-actions{ margin-top: 12px; }
/* PR8.0 IMPORT REPORT END */


/* PR8.3 CARD MESSAGE START */
.card-message-actions{ margin-top: 12px; }
/* PR8.3 CARD MESSAGE END */

/* PR9.0 PORTAL PRODUCTS START */
#products{ scroll-margin-top: 14px; }
table .right{ text-align: right; }
table .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
/* PR9.0 PORTAL PRODUCTS END */

/* PR9.1 ADMIN CUSTOMERS START */
#customers{ scroll-margin-top: 14px; }
table .right{ text-align: right; }
table .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
/* PR9.1 ADMIN CUSTOMERS END */

/* PR9.2 PORTAL USERS START */
#users{ scroll-margin-top: 14px; }
/* PR9.2 PORTAL USERS END */

/* PR9.3 ADMIN ERRORS START */
#errors{ scroll-margin-top: 14px; }
/* PR9.3 ADMIN ERRORS END */

/* PR9.4 NAV DROPDOWN START */
/* Mobil dropdown-meny i topbar – snabb, tydlig, utan JS. */
.nav-dd{ display:none; position: relative; }
.nav-dd summary::-webkit-details-marker{ display:none; }
.nav-dd summary::marker{ content: ""; }

.nav-dd-trigger{ display:inline-flex; gap:8px; align-items:center; }
.nav-dd-icon{ font-size: 1.05em; line-height: 1; }

.nav-dd-panel{
  display:none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  max-width: 86vw;
  background: var(--bg);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  padding: 8px;
  z-index: 50;
}

.nav-dd[open] .nav-dd-panel{ display:block; }

.nav-dd-item{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  font-weight: 650;
}
.nav-dd-item:hover{ background: rgba(0,0,0,.04); }
.nav-dd-sep{ height: 1px; margin: 8px 6px; background: rgba(0,0,0,.10); }

@media (max-width: 720px){
  .nav-dd{ display:inline-block; }
  /* Dölj andra nav-knappar på mobil – dropdownen blir primär navigation. */
  .nav .btn:not(.nav-dd-trigger){ display:none; }
}

@media (min-width: 721px){
  .nav-dd{ display:none; }
}
/* PR9.4 NAV DROPDOWN END */

/* PR9.5 PORTAL PRODUCTS HEADER START */
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-title{ margin:0; }
.section-sub{ margin-top:4px; }
.section-head-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

@media (max-width: 720px){
  .section-head{ flex-direction:column; align-items:stretch; }
  .section-head-actions{ width:100%; }
  .section-head-actions .btn{ flex: 1 1 0; justify-content:center; }
}
/* PR9.5 PORTAL PRODUCTS HEADER END */

/* PR9.6 ADMIN CUSTOMERS HEADER START */
#customers{ scroll-margin-top: 14px; }
/* PR9.6 ADMIN CUSTOMERS HEADER END */

/* PR9.7 THEME PALETTE START */
/* Ljust tema: nordiskt, seriöst, byggbart */
:root{
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --border: #E2E8F0;

  --text: #0F172A;
  --muted: #475569;
  --muted2: #94A3B8;

  --accent: #0F766E;
  --accent-hover: #115E59;
  --accent-soft: #CCFBF1;

  --success: #16A34A;
  --success-soft: #DCFCE7;

  --warning: #D97706;
  --warning-soft: #FFEDD5;

  --error: #DC2626;
  --error-soft: #FEE2E2;

  --info: #2563EB;
  --info-soft: #DBEAFE;
}

body{ background: var(--bg); color: var(--text); }

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

.card{ background: var(--surface); border-color: var(--border); }

/* Knappar */
.btn{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }

.btn.secondary{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn.secondary:hover{
  background: rgba(15, 118, 110, 0.06);
  border-color: rgba(15, 118, 110, 0.35);
}

/* Inputs */
input[type="text"], input[type="email"], input[type="password"], select, textarea{
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}
input::placeholder, textarea::placeholder{ color: var(--muted2); }

input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(15, 118, 110, 0.55);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

/* Pills */
.pill{ border-color: var(--border); }

/* Alerts (om du har .alert.*) */
.alert.ok{ background: var(--success-soft); border-color: rgba(22,163,74,.25); }
.alert.error{ background: var(--error-soft); border-color: rgba(220,38,38,.25); }
.alert.info{ background: var(--info-soft); border-color: rgba(37,99,235,.25); }

/* Små micro-känslor */
.card{ box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06); }
.table-wrap{ border-color: var(--border); }
/* PR9.7 THEME PALETTE END */

/* PR9.7a BUTTON POLISH START */
/* Enhetliga knappar + mjuk transition */
.btn, a.btn, button.btn, input.btn,
.nav-dd-item,
input[type="text"], input[type="email"], input[type="password"], select, textarea,
.card{
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

@media (prefers-reduced-motion: reduce){
  .btn, a.btn, button.btn, input.btn,
  .nav-dd-item,
  input[type="text"], input[type="email"], input[type="password"], select, textarea,
  .card{
    transition: none;
  }
}

/* Primär knapp: alltid teal (fixar “svart Import”) */
.btn:not(.secondary), a.btn:not(.secondary), button.btn:not(.secondary), input.btn:not(.secondary){
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn:not(.secondary):hover, a.btn:not(.secondary):hover, button.btn:not(.secondary):hover, input.btn:not(.secondary):hover{
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* Sekundär knapp: vit/transparent, tydlig men lugn */
.btn.secondary, a.btn.secondary, button.btn.secondary, input.btn.secondary{
  background-color: #fff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.btn.secondary:hover, a.btn.secondary:hover, button.btn.secondary:hover, input.btn.secondary:hover{
  background-color: rgba(15, 118, 110, 0.06) !important;
  border-color: rgba(15, 118, 110, 0.35) !important;
}

/* Lite “squish” vid click */
.btn:active, a.btn:active, button.btn:active{
  transform: translateY(1px);
}
/* PR9.7a BUTTON POLISH END */

/* PR9.7b NAV BUTTON FADE START */
/* Premium-känsla: kort, mjuk fade (in/ut) + stabil text i nav */
.btn, a.btn, button.btn, input.btn,
.nav a, .nav-dd-item, .nav-dd-trigger{
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 120ms ease;
}

/* Säkerställ att texten aldrig “försvinner” i pill/knappar */
.btn, a.btn, button.btn, input.btn{
  font-size: 16px;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

/* Fix: summary i details kan ärva konstiga marker/utrymme */
.nav-dd summary{
  list-style: none;
}
.nav-dd summary::-webkit-details-marker{ display:none; }

/* Om något sätter color/opacity fel i nav – tvinga tydlighet */
.nav .btn.secondary{ color: var(--text) !important; }
.nav .btn.secondary:hover{ color: var(--text) !important; }

/* Import-knappen ska aldrig bli “svart” – sekundär ska vara ljus */
.btn.secondary{
  background-color: #fff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.btn.secondary:hover{
  background-color: rgba(15, 118, 110, 0.06) !important;
  border-color: rgba(15, 118, 110, 0.35) !important;
}

/* Primär ska alltid vara teal */
.btn:not(.secondary){
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn:not(.secondary):hover{
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* Smalare, snyggare nav-knappar (minskar “överstora kapslar”) */
.nav .btn{
  padding: 10px 16px;
  border-radius: 999px;
}

/* PR9.7b NAV BUTTON FADE END */

/* PR9.8 PORTAL USERS HEADER START */
#users{ scroll-margin-top: 14px; }
/* PR9.8 PORTAL USERS HEADER END */

/* PR9.7c LINK COLORS START */
/* Länkar ska följa accentfärgen (inte default blå/lila) */
a {
  color: var(--accent);
  text-decoration: none;
}
a:visited {
  color: var(--accent);
}
a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Knappar ska inte påverkas av a-regler */
a.btn {
  text-decoration: none !important;
}
/* PR9.7c LINK COLORS END */

/* PR9.9a PILL NOWRAP START */
/* Pills ska aldrig radbrytas (fixar 'err'/'or' på mobil) */
.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}
/* PR9.9a PILL NOWRAP END */

/* PR9.7d TABLE LINK COLORS START */
/* Tabell-länkar (kundnamn m.m.) ska inte bli webblå/lila */
.table-wrap a:not(.btn),
table a:not(.btn){
  color: var(--accent) !important;
  text-decoration: none;
}
.table-wrap a:not(.btn):visited,
table a:not(.btn):visited{
  color: var(--accent) !important;
}
.table-wrap a:not(.btn):hover,
table a:not(.btn):hover{
  color: var(--accent-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* PR9.7d TABLE LINK COLORS END */

/* PR9.7e FLASH WRAP CLEANUP START */
/* Ingen extra “gul låda” runt alerts – bara själva alerten ska synas */
.flash-wrap{
  margin: 12px 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.flash-wrap .alert{
  margin: 0;
}
/* PR9.7e FLASH WRAP CLEANUP END */

/* PR9.4e2 NAV DROPDOWN VISIBILITY START */
@media (max-width: 820px){
  details.nav-dd-wrap{ position: relative; }
  details.nav-dd-wrap > summary{ list-style:none; cursor:pointer; }
  details.nav-dd-wrap > summary::-webkit-details-marker{ display:none; }

  .nav-dd{ display:none; }
  details.nav-dd-wrap[open] .nav-dd{
    display:block;
    position:absolute;
    right:0;
    top: calc(100% + 8px);
    min-width: 240px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 14px 28px rgba(15,23,42,.12);
    z-index: 90;
  }

  a.nav-dd-item{
    display:block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text) !important;
    text-decoration:none !important;
    white-space: nowrap;
  }
  a.nav-dd-item:hover{ background: rgba(15,118,110,.08); }
  a.nav-dd-item:active{ background: rgba(15,118,110,.12); }
}
/* PR9.4e2 NAV DROPDOWN VISIBILITY END */

/* PR9.7f LINK VISITED START */
/* Tvinga besökta länkar att följa paletten (ingen blå/lila) */
a:not(.btn):visited {
  color: var(--accent) !important;
}
.table-wrap a:not(.btn):visited,
table a:not(.btn):visited {
  color: var(--accent) !important;
}
/* PR9.7f LINK VISITED END */

/* PR9.7e2 FLASH WRAP NEUTRAL START */
.flash-wrap {
  margin: 12px 0;
  padding: 0;
  border: none;
  background: transparent;
}
/* PR9.7e2 FLASH WRAP NEUTRAL END */

/* PR9.4e3 NAV DROPDOWN FORCE START */
@media (max-width: 820px) {
  .nav-dd { position: relative; }
  summary::-webkit-details-marker { display: none; }

  .nav-dd-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    padding: 8px;
    z-index: 9999;
    display: none;
  }
  details[open].nav-dd .nav-dd-panel { display: block; }

  .nav-dd-item {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text) !important;
    text-decoration: none !important;
  }
  .nav-dd-item:hover { background: rgba(15,118,110,.08); }

  .nav-dd-sep {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
  }
}
/* PR9.4e3 NAV DROPDOWN FORCE END */

/* PR9.10b ADMIN ERRORS PAGE HEAD */
.page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.page-title{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-sub{
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}
.page-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media (max-width: 820px){
  .page-head{ flex-direction: column; align-items: stretch; }
  .page-actions .btn{ width: 100%; justify-content: center; }
}
/* PR9.10b END */

/* PR9.4j MOBILE NAV DRAWER START */
/* Mobil: visa hamburger, göm desktop-nav */
.nav-toggle{ display:none; }

@media (max-width: 720px){
  .nav > a.btn,
  .nav > button.btn:not(.nav-toggle),
  .nav > details{ display:none !important; }

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
  }
}

/* Overlay + drawer (Dawn-ish: från vänster) */
.nav-overlay{
  position:fixed;
  inset:0;
  background: rgba(15, 23, 42, .35);
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease;
  z-index: 9998;
}

.nav-drawer{
  position:fixed;
  top:0;
  left:0;
  height:100dvh;
  width:min(86vw, 360px);
  background: #fff;
  border-right: 1px solid var(--border);
  transform: translateX(-102%);
  transition: transform 180ms ease;
  z-index: 9999;
  display:flex;
  flex-direction:column;
}

.nav-open .nav-overlay{ opacity:1; pointer-events:auto; }
.nav-open .nav-drawer{ transform: translateX(0); }

.nav-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
}

.nav-drawer-brand{
  font-weight:800;
  letter-spacing:-0.02em;
}

.nav-drawer-body{
  padding: 10px 10px 16px;
  overflow:auto;
}

.nav-drawer-item{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--text) !important;
  text-decoration:none !important;
}

.nav-drawer-item:hover{
  background: rgba(15,118,110,.08);
}

.nav-drawer-sep{
  height:1px;
  background: var(--border);
  margin: 10px 6px;
}

/* Desktop: ingen overlay/drawer */
@media (min-width: 721px){
  .nav-overlay, .nav-drawer{ display:none; }
}


/* PR9.4k9 MNAV2 DESKTOP HIDE START */
/* Mobilmenyn bygger på en checkbox-toggle. På desktop kan den annars bli synlig. */
.mnav2{ display: none; }
.mnav2-toggle{ position: absolute; opacity: 0; pointer-events: none; }
/* PR9.4k9 MNAV2 DESKTOP HIDE END */

/* PR9.4k2 MOBILE NAV DRAWER FLOATING */
@media (max-width: 980px){
  /* Döda gamla mobil-dropdown-varianter så vi inte får dubbel UI */
  .nav-dd, .nav-dd-wrap, details.nav-dd, .nav-dd-panel { display: none !important; }

  .mnav2{ display: contents; }
  .mnav2-toggle{ position: absolute; opacity: 0; pointer-events: none; }

  /* Flytande hamburger (Dawn-känsla) */
  .mnav2-trigger{
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10050;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mnav2-icon{ font-size: 18px; line-height: 1; }

  .mnav2-backdrop{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.45);
    z-index: 10040;
  }

  .mnav2-panel{
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: min(86vw, 360px);
    background: #fff;
    border-left: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.25);
    transform: translateX(105%);
    transition: transform 160ms ease;
    z-index: 10060;
    display: flex;
    flex-direction: column;
  }

  .mnav2-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    border-bottom: 1px solid var(--border);
  }
  .mnav2-title{ font-weight: 700; }
  .mnav2-close{
    cursor: pointer;
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(15,118,110,.06);
  }

  .mnav2-links{
    padding: 10px;
    overflow: auto;
  }
  .mnav2-item{
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
    color: var(--text) !important;
    text-decoration: none !important;
  }
  .mnav2-item:hover{ background: rgba(15,118,110,.08); }
  .mnav2-sep{
    height: 1px;
    background: var(--border);
    margin: 8px 6px;
  }

  #mnav2-toggle:checked ~ .mnav2-backdrop{ display: block; }
  #mnav2-toggle:checked ~ .mnav2-panel{ transform: translateX(0); }
}

/* På desktop vill vi inte ha flytande hamburgare */
@media (min-width: 981px){
  .mnav2-trigger, .mnav2-backdrop, .mnav2-panel { display: none !important; }
}

/* PR9.4k3 HAMBURGER CONSISTENCY */
/* Konsekvent hamburger (inte font-glyph) */
.hamburger {
  width: 20px;
  height: 14px;
  display: inline-block;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 6px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 12px / 100% 2px no-repeat;
  border-radius: 2px;
}

/* Gör mobilknappen stabil i storlek överallt */
.mnav-trigger,
.nav-dd-trigger {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: var(--text);
}

/* Undvik att hamburger ligger ovanpå brand/USP-raden på små skärmar */
@media (max-width: 720px) {
  .title, .brand-title, .brand-subtitle, .subtitle, .tagline {
    padding-right: 56px;
  }
}
/* PR9.4k3 END */

/* PR9.4k4 MOBILE NAV HAMBURGER FIX */
@media (max-width: 980px){
  /* 1) På mobil: göm “pill-nav” i headern – drawer sköter navigationen */
  .nav a.btn,
  .nav button.btn{
    display: none !important;
  }
  /* …men behåll själva menyknappen */
  .nav .mnav2-trigger,
  .nav .mnav-trigger,
  .nav .nav-dd-trigger{
    display: inline-flex !important;
  }

  /* 2) Menyknappen får aldrig krympa */
  .mnav2-trigger,
  .mnav-trigger,
  .nav-dd-trigger{
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    line-height: 1;
    font-size: 22px; /* om någon sida fortfarande använder glyph */
  }

  /* 3) Konsekvent hamburger-streck */
  .hamburger{
    width: 22px;
    height: 16px;
    display: inline-block;
    background:
      linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 7px / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 14px / 100% 2px no-repeat;
    border-radius: 2px;
  }
}
/* PR9.4k4 END */

/* PR9.4k5 MOBILE HIDE HEADER NAV PILLS */
/* På mobil: kör Dawn/Fortnox-stil. Inga pill-knappar i headern, bara drawer-trigger. */
@media (max-width: 980px){
  header .nav,
  header nav.nav{
    display: none !important;
  }
  /* om någon sida råkar ha nav-knappar direkt i header utan wrapper */
  header a.btn,
  header button.btn{
    /* låt INTE detta slå ut drawer-triggern */
  }
  /* drawer-triggern ska alltid få plats */
  .mnav2-trigger{
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    min-width: 44px;
  }
}
/* PR9.4k5 END */

/* PR9.4k6 HAMBURGER SUSPENDERS START */
/* Sista “hängslen”: lås hamburger + undvik att headern trycker ihop något på mobil */
@media (max-width: 980px){
  /* 1) Hamburger får ALDRIG krympa */
  .mnav2-trigger,
  .mnav-trigger,
  .nav-dd-trigger{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* 2) På mobil: använd drawer som navigation – göm eventuella “pills” i headern */
  .nav .btn:not(.mnav2-trigger):not(.mnav-trigger):not(.nav-dd-trigger){
    display: none !important;
  }

  /* 3) Ge alltid plats åt hamburger så USP/titel aldrig krockar */
  .title, .brand-title, .brand-subtitle, .subtitle, .tagline{
    padding-right: 64px !important;
  }
}
/* PR9.4k6 HAMBURGER SUSPENDERS END */


/* PR9.4k7 TAGLINE ONE LINE START */
@media (max-width: 720px){
  .tagline, .brand-subtitle{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block;
  }
  .tagline{
    font-size: 12px !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 380px){
  .tagline{ font-size: 11px !important; }
}
/* PR9.4k7 TAGLINE ONE LINE END */
/* PR9.4k8 NAV TOGGLE DESKTOP HIDE START */
/* Säkert: göm menyknappen på desktop även om andra btn-regler skulle råka påverka display. */
.nav .nav-toggle{ display: none !important; }
@media (max-width: 720px){
  .nav .nav-toggle{ display: inline-flex !important; }
}
/* PR9.4k8 NAV TOGGLE DESKTOP HIDE END */