:root { --ink:#203220; --brass:#e1c16e; --canvas:#f8f8f8; --field:#f5f6f8; --muted:#636963; --line:#d9d9d9; --error:#b73535; --grid:25px; --navigation:225px; font-family:Raleway,sans-serif; font-size:12px; color:#000; background:var(--canvas); }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; height:100dvh; display:grid; grid-template-rows:75px auto minmax(0,1fr); }
[hidden] { display:none !important; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,a:focus-visible { outline:2px solid var(--brass); outline-offset:3px; }
.masthead { height:75px; padding:0 25px; display:flex; align-items:center; gap:25px; background:var(--ink); color:#fff; border-bottom:1px solid var(--ink); }
.portal-brand-logo { display:block; height:25px; width:auto; max-width:150px; object-fit:contain; }
.masthead>span:nth-child(2) { font-size:12px; letter-spacing:.1em; }
.masthead small { display:inline; margin-left:10px; color:inherit; font-size:9px; }
.masthead button { margin-left:auto; border:0; background:none; }
#notice { overflow-wrap:anywhere; opacity:1; }
#notice.is-fading { opacity:0; transition:opacity 200ms ease; }
@media (prefers-reduced-motion:reduce) { #notice.is-fading { transition:none; } }
#notice:not(:empty) { padding:15px 25px; border-left:3px solid var(--brass); background:white; }
#notice.error { border-color:var(--error); }
h1 { font-weight:400; font-size:24px; margin:0; }
h2 { font-size:12px; font-weight:600; margin:0 0 25px; }
p { line-height:1.5; }
.eyebrow { color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin:0 0 25px; height:25px; display:flex; align-items:center; }
.muted { color:var(--muted); }
label { display:block; line-height:25px; }
input { width:100%; min-width:0; height:25px; border:1px solid transparent; border-radius:3px; background:var(--field); padding:3px 10px; color:#000; }
input:focus { outline:1px solid var(--brass); }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--ink); }
form>label:not(:first-child) { margin-top:25px; }
.actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:25px; padding-top:25px; }
.actions button { color:inherit; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; position:relative; }
.destructive { color:var(--error); }
#workspace { --navigation-current:var(--navigation); display:grid; grid-template-columns:var(--navigation-current) minmax(0,1fr); min-height:0; }
#workspace.has-submenu { grid-template-columns:var(--navigation-current) var(--navigation) minmax(0,1fr); }
#workspace.navigation-collapsed { --navigation-current:96px; }
aside { padding:25px; border-right:1px solid var(--brass); display:flex; flex-direction:column; overflow-y:auto; }
aside > .eyebrow,.page-heading > .eyebrow { height:15px; line-height:15px; flex:none; margin-bottom:15px; }
.navigation-header { display:flex; align-items:center; justify-content:space-between; height:15px; flex:none; margin-bottom:15px; }
.navigation-header .eyebrow { height:15px; line-height:15px; margin:0; }
#navigationToggle { display:flex; align-items:center; justify-content:center; width:15px; height:15px; flex:none; padding:0; border:0; background:none; color:var(--ink); }
#navigationToggle svg { width:15px; height:15px; }
.navigation-label { min-width:0; }
.navigation-collapsed .navigation-header { justify-content:center; }
.navigation-collapsed :is(.navigation-header .eyebrow,.navigation-label) { display:none; }
#submissionMenu { border-color:var(--line); }
#submissionMenu { animation:panel-in .25s ease-out; }
:root { --navigation-row-height:40px; --navigation-row-gap:10px; }
nav { display:grid; row-gap:var(--navigation-row-gap); }
nav button { min-width:0; min-height:var(--navigation-row-height); padding:10px 15px; line-height:20px; text-align:left; border:0; border-radius:3px; background:none; display:flex; gap:10px; align-items:center; overflow-wrap:anywhere; transition:color 180ms,background-color 180ms; }
nav button::before { content:''; box-sizing:border-box; width:15px; height:15px; border:1px solid var(--ink); border-radius:50%; flex:none; }
#portalNavigation button::before { border:0; border-radius:0; background:var(--ink); -webkit-mask:var(--navigation-icon) center / contain no-repeat; mask:var(--navigation-icon) center / contain no-repeat; }
#portalNavigation [data-page=overview] { --navigation-icon:url('/assets/Kunder.svg?v=20260522-kunder-1'); }
#portalNavigation :is([data-page=contacts],[data-page=downloads],[data-page=annual-accounts])::before { content:none; }
#portalNavigation .navigation-icon { display:block; box-sizing:border-box; width:15px; height:15px; flex:none; color:var(--ink); }
#portalNavigation [data-submission-root] { --navigation-icon:url('./icons/submit.svg'); }
#portalNavigation [data-page=installation] { --navigation-icon:url('./icons/app-installation.svg'); }
#portalNavigation [data-page=password] { --navigation-icon:url('./icons/password.svg'); }
#portalNavigation [data-page=users] { --navigation-icon:url('./icons/contacts.svg'); }
nav button:hover { background:#e1c16e25; color:#000; }
nav button[aria-current=page] { background:white; color:#000; }
main { padding:25px; min-width:0; min-height:0; width:100%; display:flex; flex-direction:column; }
.page-heading { margin-bottom:25px; flex:none; }
.page-heading > h1 { min-height:var(--navigation-row-height); display:flex; align-items:center; }
.has-overview .page-heading { margin-bottom:var(--navigation-row-gap); }
#content { min-height:0; flex:1; overflow:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#bfbfbf transparent; }
.overview-grid { container-type:inline-size; height:100%; min-height:0; }
.overview-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); height:100%; min-height:0; }
.overview-column { min-width:0; min-height:0; display:flex; flex-direction:column; padding:0 25px; border-left:1px solid var(--line); }
.overview-column:first-child { padding-left:0; border-left:0; }
.overview-column:last-child { padding-right:0; }
.overview-column > .eyebrow { flex:none; height:var(--navigation-row-height); margin-bottom:25px; }
.overview-cards { min-height:0; overflow:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:25px; scrollbar-width:thin; scrollbar-color:#bfbfbf transparent; }
.overview-cards > .card { flex:none; }
.card :is(h2,h3) { font-size:12px; font-weight:600; line-height:25px; color:#000; }
.overview-todo h3 { margin:0; }
.overview-empty { margin:0; }
@container (max-width:800px) {
  .overview-columns { grid-template-columns:minmax(0,1fr); height:auto; gap:25px; }
  .overview-column { padding:25px 0 0; border-left:0; border-top:1px solid var(--line); }
  .overview-column:first-child { padding-top:0; border-top:0; }
  .overview-cards { overflow:visible; }
}
.card { background:white; border-radius:3px; padding:25px; overflow-wrap:anywhere; }
.action-card { display:flex; flex-direction:column; }
.action-card > .actions { margin-top:auto; flex:none; }
.card .value { font-size:20px; font-weight:400; margin:0; }
.card a { color:var(--ink); line-height:1.8; }
.card-label { min-height:25px; display:flex; align-items:center; gap:15px; }
.card-heading > .card-label { margin:0 0 15px; }
.card-label svg { height:15px; width:15px; color:var(--ink); flex:none; }
.list { display:grid; gap:25px; align-content:start; }
.subscriptions { margin:0; padding:0; list-style:none; display:grid; gap:25px; }
.subscriptions li { display:flex; gap:15px; align-items:flex-start; }
.subscriptions p { margin:0; }
.subscription-status { width:15px; height:15px; border:1px solid var(--ink); border-radius:50%; margin-top:2px; flex:none; }
.bookkeeper-details { display:flex; flex-wrap:wrap; gap:25px; align-items:flex-start; }
.bookkeeper-details p { margin-top:0; }
.bookkeeper-photo { width:125px; height:125px; max-width:100%; object-fit:cover; border-radius:3px; }
.installation-card { max-width:800px; }
.installation-card h2:not(:first-child) { margin-top:50px; }
.guide-text { white-space:pre-wrap; }
.installation-url { overflow-wrap:anywhere; }
.contact-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:25px; }
.mail-flags { display:flex; flex-direction:column; gap:25px; margin-top:25px; }
.mail-flags label { display:flex; align-items:center; gap:10px; }
#contactsPanel { height:100%; display:flex; flex-direction:column; }
#contactList { min-height:0; overflow-y:auto; flex:1; }
.password-card { max-width:450px; min-height:100%; }
dialog { width:250px; max-width:calc(100% - 50px); padding:25px; border:0; border-radius:3px; box-shadow:5px 5px 15px #00000040; }
dialog::backdrop { backdrop-filter:blur(7px); background:#00000015; }
@keyframes panel-in { from { transform:translateX(-15px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }
@media (max-width:400px) {
  .masthead { height:auto; min-height:75px; display:grid; grid-template-columns:minmax(0,1fr) auto; row-gap:0; padding:15px 25px; }
  .masthead>span:nth-child(2) { grid-column:1; grid-row:2; }
  .masthead button { grid-column:2; grid-row:1 / span 2; }
}
@media (max-width:1000px) { :root { --navigation:200px; } .has-submenu .overview-grid { grid-template-columns:1fr; } }
@media (max-width:750px) { body { height:auto; min-height:100dvh; display:block; } #workspace,#workspace.has-submenu { display:block; height:auto; } aside { padding:25px; border:0; border-bottom:1px solid var(--line); } nav { grid-template-columns:repeat(2,minmax(0,1fr)); } main { min-height:500px; } #content { overflow:visible; } .overview-grid,.contact-fields { grid-template-columns:1fr; } .login-card { padding:25px; margin:50px auto; } #contactsPanel { height:auto; } .password-card { min-height:450px; } }
@media (max-width:750px) {
  #workspace.navigation-collapsed { display:grid; grid-template-columns:var(--navigation-current) minmax(0,1fr); }
  .navigation-collapsed #navigationColumn { grid-column:1; grid-row:1 / span 2; border-right:1px solid var(--brass); border-bottom:0; }
  .navigation-collapsed #portalNavigation { grid-template-columns:minmax(0,1fr); }
  .navigation-collapsed #submissionMenu { grid-column:2; grid-row:1; }
  .navigation-collapsed #submissionMenu nav { grid-template-columns:minmax(0,1fr); }
  .navigation-collapsed main { grid-column:2; grid-row:1 / span 2; }
  .navigation-collapsed.has-submenu main { grid-row:2; }
}

#contactList { container-type:inline-size; }
.contact-card { width:calc(100cqw / 3 - 25px); min-width:0; }
.card-heading > .eyebrow { height:15px; min-height:15px; line-height:15px; font-size:10px; font-weight:600; color:var(--muted); margin:0 0 15px; }
.card-title-row { min-height:40px; display:flex; align-items:center; min-width:0; }
.card-title-row > .contact-name { font-size:24px; font-weight:400; line-height:1.2; margin:0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact-notifications { margin:25px 0 0; padding:0; list-style:none; line-height:25px; }
.contact-card > .contact-edit-actions { margin-top:0; }
.contact-editor { padding-top:25px; }
.contact-authorities { display:flex; flex-direction:column; gap:25px; margin-top:25px; }
.contact-authorities label { display:flex; align-items:center; gap:10px; }
@container (max-width:800px) { .contact-card { width:100%; } }
@media (prefers-reduced-motion:reduce) { .contact-card { transition:none; } }

.page-heading.has-page-actions { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:25px; }
.has-page-actions>.eyebrow,.has-page-actions>h1 { grid-column:1; }
.contact-page-actions { grid-column:2; grid-row:2; align-self:center; padding:0; }
.contact-card .contact-actions { margin-top:0; }
@media(max-width:500px) { .page-heading.has-page-actions { grid-template-columns:minmax(0,1fr); } .contact-page-actions { grid-column:1; grid-row:3; margin-top:25px; } }

/* Contact rows use the available width; no implicit single-column list. */
#contactList { grid-template-columns:repeat(5,minmax(0,1fr)); align-items:start; container-type:normal; gap:25px; }
.contact-card { width:100%; }
.contact-card.is-open { grid-column:span 2; }
.contact-card .card-title-row { justify-content:space-between; gap:15px; }
.contact-card .contact-name { font-size:18px; }
.contact-close-action { flex:none; }
.contact-fields { gap:10px; }
.contact-permissions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px; margin-top:25px; }
.contact-authorities,.mail-flags { margin:0; gap:15px; display:flex; flex-direction:column; }
.contact-permission { display:flex; align-items:flex-start; flex-direction:column; gap:5px; }
.contact-permission>span { line-height:20px; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.dialog-heading h2 { margin:0; min-width:0; }
.dialog-heading>.system-standard-raised-action { flex:none; }
.bookkeeper-hours { font-size:10px; line-height:1.5; }
.bookkeeper-actions { justify-content:flex-end; }
.bookkeeper-contact { min-width:0; flex:1 1 100px; }
.installation-card h2:not(:first-child) { margin:0; }
.installation-info .guide-text { margin-top:25px; }
@media(max-width:1100px) { #contactList { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:750px) { #contactList { grid-template-columns:minmax(0,1fr); } .contact-card.is-open { grid-column:auto; } }

.staff-preview-banner { position:fixed; bottom:10px; left:50%; transform:translateX(-50%); margin:0; padding:10px 15px; max-width:calc(100vw - 50px); background:#fff; color:#383e42; font-size:12px; box-shadow:0 2px 10px #0002; z-index:100; }

/* Password uses the CRM column geometry and a bottom-pinned shared action row. */
.has-password main { padding:0; width:475px; max-width:100%; background:#fff; box-shadow:8px 0 16px #00000038; }
.has-password .page-heading { display:none; }
.has-password #content { display:flex; }
.password-card { width:100%; max-width:none; min-height:100%; border-radius:0; padding:25px; gap:25px; }
.password-field-row { display:grid; grid-template-columns:175px minmax(0,1fr); gap:25px; }
.password-field-row :is(label,input) { margin:0; font-size:12px; font-weight:400; line-height:25px; }
.password-card>.muted { margin:0; }
.password-card>.actions { padding-top:0; margin-top:auto; }
@media(max-width:500px) { .password-field-row { grid-template-columns:minmax(0,1fr); gap:10px; } }