/* global styling  */

:root {
   --clr-primary: #f6f6f6;
   --clr-secondary: #ededed;
   --clr-cta: #045cea;
   --clr-cta-dark: #1c6ae9;

   --clr-accent: #044ec6;
   --clr-lightcta: #91b2d4;
   --clr-brightcta: #dbe5ef;
   --clr-darkcta: #02203e;
   --clr-mutedcta: #748597;

   --clr-white: #fff;
   --clr-black: #000;
   --clr-offwhite: #fafafa;
   --clr-copy: #3a3a3a;
   --clr-heading: #222222;
   --clr-neutral-500: #3a3a3a;
   --clr-neutral-400: #4d4c4c;
   --clr-neutral-300: #5e5e5e;
   --clr-neutral-250: #727272;
   --clr-neutral-200: #c0c0c0;
   --clr-neutral-100: #d2d2d2;
   --clr-btn-active: #95a3b1;

   --clr-table-header: #f3f4f6;

   --clr-warn: #E31C1C;
   --clr-alert: #e56b0d;

   --clr-gray-badge: var(--clr-neutral-200);
   --clr-black-badge: var(--clr-neutral-500);

   --clr-blue-badge: #6aa9e8;/* faktura: färdigställd */
   --clr-green-badge: #78e9a3;/* faktura: betald */
   --clr-red-badge: #ed7373;/* faktura: nekad */

   --clr-teal-badge: #90e8ea;/* offert: färdigställd */
   --clr-indigo-badge: #b67fea;/* offert: accepterad */
   --clr-pink-badge: #e77fea;   /* offert: omgjord till faktura  */
   --clr-orange-badge: #edb673;/* offert: makulerad */

   --clr-date-shadow: 0 4px 24px hsla(180, 1%, 23%, 0.25);
   --clr-menu-shadow: 0 4px 12px hsla(180, 1%, 23%, 0.25);
   --clr-modal-shadow: -4px 0 24px hsla(180, 1%, 23%, 0.30);
   --clr-msg-shadow: 0 4px 24px hsl(208 79% 13% / 0.25);
   --clr-warn-shadow: 0 4px 24px hsl(0 80% 16% / 0.3);
   --tiny-shadow: 0 4px 8px rgba(8, 18, 39, 0.20);
   --btn--card-shadow: 0 4px 4px rgba(21, 27, 42, 0.2);

   --clr-msgbg: hsla(209 77% 92% / 0.7);
   --clr-datebg: hsla(0 0% 98% / 0.85);
   --clr-warnbg: hsla(0 100% 73% / 0.7);
   --clr-timelinebg: hsla(0, 0%, 75%, 0.4);

   --ff-primary: "Sofia Sans", "Roboto Regular", "Roboto", sans-serif;
   --ff-secondary: "Inter", "Roboto Regular", "Roboto", sans-serif;
   --ff-document: "Inter", sans-serif;

   /* FIXME: NEew typsnitt? */

   --dd-collapsed: 42px;
   --dd-expanded: 15rem;

   /* Inputs */
   --input-underline: hsla(211, 49%, 80%, 0.9);
   --input-underline-hover: var(--clr-cta);
   --input-underline-focus: var(--clr-cta);
   --input-bg: transparent;
   --input-text: var(--clr-copy);
   --input-placeholder: var(--clr-neutral-250);

   --padding-tight: 0.3rem;
   --padding-small: 0.5rem;
   --padding-close: 1rem;
   --padding-normal: 1.5rem;
   --padding-big: 2rem;
   --padding-bigger: 3rem;
   --padding-biggest: 4rem;

   --small-radius: 0.275rem;
   --normal-radius: 0.5rem;
}

/* meta styling */
*,
*::before,
*::after {
   box-sizing: border-box;
}


html {
   scroll-behavior: smooth;
}

body {
   --container: 1100px;
   --sidebar-w: 220px;

   display: grid;
   background-color: var(--clr-primary);
   color: var(--clr-copy);
   font-family: var(--ff-secondary);
   font-size: 1em;
   margin: 0;

   grid-template-rows: auto 1fr;
   height: 100vh;
   overflow: hidden;
}


/* layout */

.topbar {
   display: flex;
   align-items: center;
   padding-inline: var(--padding-close);
   z-index: 20;
   background-color: var(--clr-primary);
   border-bottom: 1px solid var(--clr-neutral-200);
   height: 3.7rem;

}

.brand__title {
   /* font-weight: 200; */
   margin-top: 0.125rem;
   height: 20px;
   /* font-size: 1rem; */
   /* white-space: nowrap; */
}


.company-switcher {
   margin-left: 0.5rem;
}

.topbar__cta {
   margin-left: auto;
}


main {
   height: 100%;

}

.main-content {
   display: grid;
   /* ersätter tidigare flex */
   grid-template-columns: var(--sidebar-w) 1fr;
   min-height: 0;
   /* viktigt för att möjliggöra inre scroll */
   overflow: hidden;

   border: none;
   border-radius: 0;
   transition: grid-template-columns 250ms ease-in-out;
}

/* Adjust grid when sidebar is collapsed (desktop only) */
@media (min-width: 861px) {

   .sidebar.sidebar--collapsed~.content,
   .main-content:has(.sidebar.sidebar--collapsed) {
      grid-template-columns: 64px 1fr;
   }


   .dashboard-inner {
      padding-inline: var(--padding-bigger);

   }
}

.content {
   max-width: 100%;
   background-color: var(--clr-offwhite);
   border: 1px solid var(--clr-neutral-200);
   border-radius: var(--normal-radius);
}

.dashboard {

   width: 100%;
   height: 100%;
   min-height: 0;
   overflow: auto;
   scrollbar-gutter: stable;
   /* behåller plats för scrollbaren */
   padding-bottom: 12rem;
}

.dashboard-inner {

   margin-block: var(--padding-close);
   margin-inline: auto;

}

.dashboard-header {
   padding-bottom: 0;
   margin-bottom: 0;
}




/* === Sidebar wrapper: desktop  ============================== */
.sidebar {
   width: var(--sidebar-w);
   min-width: var(--sidebar-w);
   height: 100%;
   background-color: var(--clr-secondary);
   border-right: 1px solid var(--clr-neutral-200);
   overflow: hidden;
   /* inner scrollar */
   margin: 0;
   padding: 0;
   transition: width 250ms ease-in-out, min-width 250ms ease-in-out;
}

/* Collapsed state: show only icons (desktop only, >860px) */
@media (min-width: 861px) {
   .sidebar.sidebar--collapsed {
      width: 64px;
      min-width: 64px;
   }

   .bar-button-layout {
      justify-content: center;
   }


   /* Hide labels when collapsed */
   .sidebar.sidebar--collapsed .btn__label,
   .sidebar.sidebar--collapsed .btn__content {
      display: none;
   }

   /* Hide the dropdown arrow icon in btn--side-cta when collapsed */
   .sidebar.sidebar--collapsed .btn--side-cta .btn__icon:last-child {
      display: none;
   }
}

/* On mobile/tablet, never collapse */
@media (max-width: 480px) {
   .sidebar.sidebar--collapsed {
      width: var(--sidebar-w);
      min-width: var(--sidebar-w);
   }

   .sidebar.sidebar--collapsed .btn__label {
      display: block;
   }

   .sidebar.sidebar--collapsed .btn__content {
      display: flex;
   }

   .sidebar.sidebar--collapsed .btn--side-cta .btn__icon:last-child {
      display: inline-block;
   }
}

.sidebar-menu {
   padding-left: 0;
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: var(--padding-small);
   padding-bottom: var(--padding-normal);
   height: 100%;          
}

.bar-button-layout {
   display: flex;
   justify-content: end;
   /* border-bottom: 1px solid var(--clr-neutral-100); */
   margin-bottom: var(--padding-tight);
}

/* Center the button when sidebar is collapsed (desktop only) */
@media (min-width: 860px) {

   .sidebar.sidebar--collapsed~* .bar-button-layout,
   .sidebar.sidebar--collapsed .bar-button-layout {
      justify-content: center;
   }
}

.topbar__inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--padding-normal);
   width: 100%;
   margin: 0;
   padding: 0;
}

.menubar {
   position: sticky;
   top: 0rem;

   display: flex;
   flex-direction: column;
   gap: var(--padding-close);
   padding: var(--padding-close);
   background-color: hsl(0 0% 100% / 0.9);
   backdrop-filter: blur(4px);
   z-index: 1;
   border-bottom: 1px solid var(--clr-neutral-200);

   box-shadow: 0 4px 12px hsl(226 89% 10% / 0.12);
}

.menubar__btn {
   max-width: 100%;
   justify-content: flex-start;
}

.filter-section {
   padding-bottom: var(--padding-normal);
}

.filter-line {
   display: flex;
   padding-block: var(--padding-tight);
   border-bottom: 1px solid var(--clr-neutral-100);
   flex-wrap: wrap;
   min-height: 3rem;
}

.browse-header {
   display: flex;
   gap: var(--padding-close);
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   padding-bottom: var(--padding-normal);
}

.empty-state {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 50vh;
}

.login-screen {
   background-color: var(--clr-offwhite);
   border-radius: var(--normal-radius);
   border: 1px solid var(--clr-neutral-200);
   padding: var(--padding-normal);
   margin-block: var(--padding-big);
   width: clamp(360px, 30%, 420px);
   margin-inline: auto;
}



.login-buttons {
   /* btn-layout position-right position-top gap-close */
   display: flex;

   padding-top: var(--padding-close);

   flex-direction: column;
   gap: var(--padding-close);
}


/* Login – dölja vyer tills de väljs */
.login-screen .hidden {
   display: none;
}


.flex-layout,
.btn-layout {
   display: flex;
   gap: var(--padding-close);
   align-items: center;
}


.grid-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--padding-normal);
   margin-bottom: var(--padding-normal);
   position: relative;
}

.golden-ratio {
   grid-template-columns: 1fr 1.618fr;

}

.settings-ratio {
   grid-template-columns: 1fr 3fr;
}

.align-right {
   justify-content: right;
}

.row-wrap {
   flex-wrap: wrap;
}

.position-top {
   display: flex;
   flex-direction: column;
   justify-content: start;
   height: 100%;
}

.align-top {

   align-items: flex-start;
}



.position-middle {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: start;
}


.position-center {
   display: flex;
   justify-content: center;
   width: 100%;
}

.position-right {
   display: flex;
   flex: 1;
   justify-content: flex-end;
}

.position-left {
   display: flex;
   justify-content: flex-start;
}


.align-between {
   justify-content: space-between;
   width: 100%;
   align-items: start;
}

.space-between {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
   height: 100%;
}

.valign {
   align-items: center;
}

.align-top {
   align-items: top;
}

.gap-tight {
   gap: 0.25rem;
}

.gap-small {
   gap: 0.3rem;
}

.gap-close {
   gap: 0.5rem;
}

.gap-normal {
   gap: var(--padding-close);
}

.gap-big {
   gap: 2rem;
}

.company-button-row {
   display: flex;
   justify-content: space-between;
   margin-top: var(--padding-normal);
   
}

/* text styles */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--ff-secondary);
}

h1 {
   font-size: 2.5rem;
   color: var(--clr-black);
   margin-top: 0;
}

h2 {
   margin-top: 0;
   padding-bottom: 0.5rem;
}

h3,
.heading-3 {
   display: block;
   font-weight: 500;
   line-height: 1.5;
   color: var(--clr-darkcta);
   font-size: 1.2rem;
}

.heading-3>span {
   font-size: clamp(1rem, 1.2vw, 1.2rem);
}

.heading-3 {
   margin-block: 0;
   padding-block: 0;
}

p {
   padding-block: 0;
   margin-block: 0;
}

.copy {
   line-height: 1.5;
   color: var(--clr-copy);
}

.uppercase {
   text-transform: uppercase;
}

.heading-1 {
   color: var(--clr-darkcta);
   margin-block: 0;
   padding-top: 1.5rem;
   font-size: 2.5rem;
}

.heading-2,
.accordion-heading,
.subheading {
   font-size: 1.5rem;
   font-weight: bold;
   color: var(--clr-darkcta);
   margin-block: 0 var(--padding-close);
   line-height: 1;
   padding: 0;
}

.heading-3 {
   display: block;
   margin-block: var(--padding-close) var(--padding-small);
}

.accordion-heading {
   margin-block: var(--padding-small) var(--padding-close);
}

.subheading {
   display: block;
   font-weight: normal;
   margin-block: 0.3rem 2rem;
}

.heading-2:not(:first-child) {
   margin-top: 1.2rem;

}


/* image styling */

img {
   display: block;
   aspect-ratio: cover;
   font-style: italic;
   color: var(--clr-neutral-300);
   max-width: 100%;

}

.spinner {
   width: 24px;
   height: 24px;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-top-color: #fff;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
}

@keyframes spin {
   to { transform: rotate(360deg); }
}

.hero-image {
   padding-top: 1.5rem;
   border-radius: 0;
}

.brand {
   display: flex;
   align-items: center;
   gap: var(--padding-close);
   /* width: calc(var(--sidebar-w)-var(--padding-small)); */
}

.logobrand {
   width: 150px;

}

.company-heading {
   color: var(--clr-mutedcta);
   font-family: var(--ff-primary);
   font-size: 1.125rem;
   font-weight: 200;
}

.brand__logo,
.logo,
.icon,
.big-icon,
.very-big-icon {
   width: 2rem;
   height: 2rem;
   object-fit: contain;
   background-color: transparent;
   /* fallback-rutan visas bara när ingen bild finns */
}

.big-icon {
   width: 3rem;
   height: 3rem;
}

.very-big-icon {
   width: 6rem;
   height: 6rem;
   filter: grayscale();
}

.logo,
.icon {
   width: 1.5rem;
   height: 1.5rem;
}

.normal-icon {
   width: 1.5rem;
   height: 1.5rem;
}

.medium-logo {
   width: 2rem;
   height: 2rem;
}

.small-icon {
   width: 1rem;
   height: 1rem;

}

.tiny-icon {
   width: 0.75rem;
   height: 0.75rem;
}

.fixed-icon {
   flex-shrink: 0;
}

/* box-shadow: 0 4px 16px hsl(0 0% 11% / 0.12);  */


/* .hero-image {
  position: relative;
  isolation: isolate;        
  width: 100%;
  height: 320px;
  background-color: #fff;      
  border-radius: 8px 0 0 8px;
  overflow: hidden;            
}

.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url('/img/brand/hero_big.webp');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 50% auto;   
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 55%,
    rgba(255,255,255,0.9) 85%,
    #fff 100%
  );
}

@media (max-width: 840px) {
  .hero-image {
    height: 200px;
    border-radius: 8px;
  }
  .hero-image::before {
    background-image: url('/img/brand/hero_med.webp');
    background-size: 60% auto; 
  }
} */



/* Links, buttons, tabs, chips styling */

a,
a:visited {
   text-decoration: none;
   color: var(--primary);
}

a:active {
   color: var(--clr-black);
}

.navlink:link,
.navlink:visited {
   text-decoration: underline;
   text-underline-offset: 0.3em;

   color: var(--clr-cta);
}

.inline-link {
   color: inherit;
   text-decoration: underline;
   text-decoration-style: dotted;
   text-underline-offset: 0.3em;
   text-decoration-color: var(--clr-neutral-200);
}

.inline-link:hover {
   color: var(--clr-black);
   text-decoration-color: var(--clr-black);
   text-decoration: underline;

   text-decoration-style: underline;
}

.inline-link:active {
   color: var(--clr-neutral-250);
}

.chip,
.status-chip,
.rev-chip {
   position: relative;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   padding: var(--padding-tight) var(--padding-small);
   gap: var(--padding-tight);

   border-radius: var(--small-radius);
   border: 1px solid var(--clr-neutral-200);

   cursor: pointer;

   font: inherit;
   line-height: 1;
   background-color: transparent;
   flex-wrap: nowrap;
   min-width: 0;

   isolation: isolate;
}

.rev-chip {
   border-bottom-color: transparent;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   background-color: var(--clr-primary);
}

.status-chip {
   padding-block: var(--padding-tight);
   padding-inline: var(--padding-close) var(--padding-small);
   font-size: 0.8rem;
}


/* Textspan inuti chippen */
.chip-label {
   --fadeAt: 65%;

   display: inline-block;
   font-size: 0.75rem;
   font-weight: 400;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: clip;
   max-width: 12ch;
   min-width: 6ch;
   text-align: left;
   /* WebKit/Safari/Chrome */
   -webkit-mask-image: linear-gradient(to right, #000 var(--fadeAt, 80%), rgba(0, 0, 0, 0) 100%);
   -webkit-mask-size: 100% 100%;
   -webkit-mask-repeat: no-repeat;

   /* Standard (Firefox m.fl.) */
   mask-image: linear-gradient(to right, #000 var(--fadeAt, 80%), rgba(0, 0, 0, 0) 100%);
   mask-size: 100% 100%;
   mask-repeat: no-repeat;
}

/* Fallback: OBS! korrekt selector måste matcha chip-klassen */
@supports not (mask-image: linear-gradient(#000, transparent)) {
   .chip-label {
      text-overflow: ellipsis;
   }
}


.is-readonly {
   opacity: 0.6;
   cursor: default;
}

/* .vat-chip-group.is-readonly {
   opacity: 0.9;
} */




/* ============================================================================
   Sort chips container - Add to end of styles.css
   ============================================================================ */

.sort-chips {
   display: flex;
   flex-wrap: wrap;
   gap: var(--padding-tight);
   justify-content: flex-end;
}

.sort-chips .chip-label {
   max-width: none;
   min-width: auto;
   -webkit-mask-image: none;
   mask-image: none;
}


.btn--card {
   all: unset;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: var(--padding-close);
   padding: 1rem;
   border: 1px solid var(--clr-neutral-100);
   border-radius: var(--small-radius);
   /* box-shadow:var(--tiny-shadow); */
   transition: background-color 150ms ease-in-out,
      border 150ms ease-in-out;

   cursor: pointer;
}

.info-box {
   display: flex;
   align-items:start;
   gap: var(--padding-close);
}

.btn--card .btn-kebab,
.info-box .btn-kebab {
   opacity: 0;
   transition: opacity 150ms ease-in-out;
}

.info-box:focus-within .btn-kebab,
.info-box:hover .btn-kebab,
.btn--card:focus-within .btn-kebab,
.btn--card:hover .btn-kebab {
   opacity: 1;
}


.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--padding-small);
   padding: var(--padding-small) var(--padding-close);
   border: 1px solid var(--clr-cta);
   border-radius: var(--small-radius);
   background-color: transparent;
   font-family: var(--ff-secondary);
   color: var(--clr-copy);
   font-size: 0.9rem;
   font-weight: 500;
   line-height: 1;
   user-select: none;

   cursor: pointer;
   transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease, box-shadow 100ms ease;
}

.btn:focus {
   outline: none;
   box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}

.btn:disabled {
   opacity: .55;
   cursor: not-allowed;
}


.btn--primary {
   background-color: var(--clr-cta);
   color: var(--clr-white);
   border-color: transparent;
   /* white-space: nowrap; */

}


.btn--primary:hover {
   background-color: var(--clr-accent);
}

.btn--primary:active {
   background-color: var(--clr-darkcta);
}

.btn--nav-secondary,
.btn--secondary {
   background-color: transparent;
   color: var(--clr-darkcta);
   border: 1px solid var(--clr-neutral-100);
}

.btn--nav,
.btn--side,
.btn--show {
   background-color: transparent;
   /* color: var(--clr-cta); */
   border-color: transparent;
   justify-content: left;
   color: var(--clr-heading);
   border-radius: 0;
}

.btn--tertiary {
   background-color: transparent;
   border-color: transparent;
   color: var(--clr-black);

}

.btn--nav,
.btn--nav-cta,
.btn--nav-secondary {
   border-radius: var(--small-radius);
}

.btn--side {
   width: 100%;
   border-left: 5px solid transparent;

}

.btn--arrow {
   color: var(--clr-darkcta);
   background-color:transparent;
   border: 1px solid transparent;
   font-size: var(--padding-close);

   padding: var(--padding-tight);
   

}

.btn--side-cta {
   background-color: var(--clr-cta);
   color: var(--clr-white);
   border: none;
   height: 3.6rem;
   border-radius: 0;
   width: 100%;
}

.btn--nav-cta {
   border-radius: var(--small-radius);
   background-color: var(--clr-cta);

   color: var(--clr-white);
}

.btn--side-cta>.btn__label {
   color: var(--clr-white);
}


.btn.btn--side.active {
   border-left: 5px solid var(--clr-darkcta);
   background-color: var(--clr-neutral-100);
}


.btn.btn--nav-secondary:hover,
.btn .btn--side:hover,
.btn .btn--side:focus,
.btn--secondary:hover,
.chip:hover {
   background-color: var(--clr-neutral-100);
}


.btn--nav-cta:hover,

.btn--side-cta:hover,
.btn--side-cta:focus {
   background-color: var(--clr-accent);

}

.btn--side:hover,
.btn--side:focus {
   border-left: 5px solid transparent;
   background-color: var(--clr-white);

}

.btn--arrow:hover,
.btn--tertiary:hover,
.btn--nav:hover,
.btn--arrow:focus, 
.btn--tertiary:focus, 
.btn--nav:focus {
   border: 1px solid var(--clr-neutral-100);
}

.btn--tertiary:hover {
   background-color: transparent;
}

.btn--tertiary:active,
.btn--nav:active,
.btn--secondary:active,
.btn.btn--nav-secondary:active {
   background-color: var(--clr-btn-active);
}

.btn--nav-cta:active {
   background-color: var(--clr-darkcta);

}

.btn--side:active {
   background-color: var(--clr-btn-active);
}


.btn--side-cta:active {
   background-color: var(--clr-darkcta);
   color: var(--clr-white);
}

.chip:active {
   background-color: var(--clr-normal-200);
}


.btn__icon {
   width: 1.5rem;
   height: 1.5rem;
   display: inline-block;
   object-fit: cover;
}

.btn__label {
   line-height: 1;
   white-space: nowrap;
}

.btn__name {
   line-height: 1;
   white-space: nowrap;
   padding-top: var(--padding-tight);
}

.btn--icon {
   display: grid;
   padding: var(--padding-small);
   place-items: center;
   background-color: transparent;
   cursor: pointer;
   border: none;
   min-width: 24px;

   transition: filter 120ms ease-in-out,
      scale 120ms ease-in-out;

   will-change: filter, scale;
}

.btn--icon:active {
   filter: brightness(60%);
   scale: 0.9;
}

.btn__content {
   display: flex;
   padding: 0;
   margin: 0;
   flex-direction: column;
   gap: 0;
   justify-content: center;
   align-items: start;
}

/* button & text helpers */

.selected {
   color: var(--clr-darkcta);
   background-color: var(--clr-brightcta);
   border: 1px solid var(--clr-cta);
}

.rev-selected {
   position: relative;
   background-color: var(--clr-offwhite);
   color: var(--clr-darkcta);
   font-weight: 500;
   isolation: isolate;
   border-top-width: 3px;
   border-top-color: var(--clr-darkcta);
}

.rev-selected::after {
   content: '';
   position: absolute;
   width: 100%;
   z-index: 1;
   background-color: var(--clr-offwhite);
   height: 3px;
   bottom: -0.15rem;
   left: 0;
   right: 0;
}

.max-copy-length {
   max-width: 64ch;
   line-height: 1.5;
   padding-bottom: var(--padding-close);
}

.help-messages {
   max-width: 64ch;
   line-height: 1.5;
   padding-bottom: var(--padding-close);
   font-size: var(--padding-close);
   margin-top: var(--padding-small);
   color: var(--clr-neutral-400);
}


.small-text {
   font-size: 0.8rem;
   font-weight: 400;
}

.no-wrap-text {
   white-space: nowrap;
}


.small-button {
   padding: var(--padding-tight) var(--padding-small);

}

.big-button {
   padding: var(--padding-close) var(--padding-normal);

}

.icon-button {
   padding: 0;
   margin: 0;
}



/* Dölj native file-input men behåll tillgänglighet */
.file-input {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}



/* === Liten triangel längst ned till vänster på kort ======================= */

.corner-badge {
   --badge-size: 18px;
   /* triangelns storlek */
   --badge-offset: 0px;
   /* avstånd in från kanterna */
   --badge-color: var(--clr-gray-badge);

   position: absolute;
   left: var(--badge-offset);
   bottom: var(--badge-offset);
   width: var(--badge-size);
   height: var(--badge-size);

   background: var(--badge-color);

   /* Mask: triangel med rät vinkel i botten-vänster, rundad spets ~4px */
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='black' d='M0,14 L0,0 L18,18 L4,18 Q0,18 0,14 Z'/%3E%3C/svg%3E") no-repeat center/100% 100%;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='black' d='M0,14 L0,0 L18,18 L4,18 Q0,18 0,14 Z'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

.badge-indigo {
   background-color: var(--clr-indigo-badge);
}

.badge-teal {
   background-color: var(--clr-teal-badge);
}

.badge-red {
   background-color: var(--clr-red-badge);
}

.badge-gray {
   background-color: var(--clr-gray-badge);
}

.badge-black {
   background-color: var(--clr-black-badge);
}

.badge-blue {
   background-color: var(--clr-blue-badge);
}

.badge-green {
   background-color: var(--clr-green-badge);
}

.badge-orange {
   background-color: var(--clr-orange-badge);
}

.badge-pink {
   background-color: var(--clr-pink-badge);
}

.badge-active {
   background-color: var(--clr-cta);
}


/* OFFERT: statusfärger för dashboard-korten (triangeln) */
/*finalized*/
[data-kind="quote"][data-status="finalized"] .corner-badge {
   --badge-color: var(--clr-teal-badge);
}

/* accepted */
[data-kind="quote"][data-status="accepted"] .corner-badge {
   --badge-color: var(--clr-indigo-badge);
}

/*conerted */

[data-kind="quote"][data-status="converted"] .corner-badge {
   --badge-color: var(--clr-pink-badge);
}

/* nekad */

[data-kind="quote"][data-status="rejected"] .corner-badge {
   --badge-color: var(--clr-orange-badge);
}



[data-kind="invoice"] .corner-badge {
   --badge-color: var(--clr-black-badge);
}

/* du sa att fakturor ska vara svarta */
/* Finalized = blå (endast fakturor) */
[data-kind="invoice"][data-status="finalized"] .corner-badge {
   --badge-color: var(--clr-blue-badge);
}

/* Paid = grön (endast fakturor) */
[data-kind="invoice"][data-status="paid"] .corner-badge {
   --badge-color: var(--clr-green-badge);
}

[data-kind="invoice"][data-status="canceled"] .corner-badge {
   --badge-color: var(--clr-red-badge);
}

.btn--card:hover,
.btn--card:focus-within {
   background-color: var(--clr-white);
   border: 1px solid var(--clr-brightcta);

}

.btn--card:active {
   background-color: var(--clr-secondary);
   border: 1px solid var(--clr-secondary);
}

.lead,
.customer-name,
.company-name {
   display: block;
   font-size: 1.2rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--clr-heading);
}

/* Gör ellipsis/fade möjligt i flex-layouter */
.customer-info {
   min-width: 0;
}

/* Fade ut till höger */
.title--fade {
   --fadeAt: 65%;

   max-width: 21ch;
   min-width: 21ch;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-overflow: clip;
   /* WebKit/Safari/Chrome */
   -webkit-mask-image: linear-gradient(to right, #000 var(--fadeAt, 80%), rgba(0, 0, 0, 0) 100%);
   -webkit-mask-size: 100% 100%;
   -webkit-mask-repeat: no-repeat;

   /* Standard (Firefox m.fl.) */
   mask-image: linear-gradient(to right, #000 var(--fadeAt, 80%), rgba(0, 0, 0, 0) 100%);
   mask-size: 100% 100%;
   mask-repeat: no-repeat;
}

/* Extra fallback: visa ellipsis om mask inte stöds */
@supports not (mask-image: linear-gradient(#000, transparent)) {
   .title--fade {
      text-overflow: ellipsis;
   }
}

.company-name {
   display: inline-block;
}

.customer-meta {
   line-height: 1.5;
   color: var(--clr-neutral-300);
   font-size: 0.9rem;
   white-space: nowrap;
}

.invoice-number {
   color: var(--clr-neutral-300);
   font-size: 0.9rem;
   white-space: nowrap;

}

/* .btn--card:active img {
  filter: invert();
} */


/* colors and style  */


.gray-text {
   margin-top: var(--padding-small);
   color: var(--clr-neutral-400);
}

.cta {
   color: var(--clr-darkcta);
}

.gray-color {
   color: var(--clr-neutral-300);
   border-color: var(--clr-neutral-200);
}

.cta-color {
   color: var(--clr-cta);
   border-color: var(--clr-mutedcta);
}

.warn-color {
   color: var(--clr-warn);
   border-color: var(--clr-red-badge);
}

.alert-color {
   color: var(--clr-alert);
   border-color: var(--clr-orange-badge);
}

.clr-white {
   color: var(--clr-white);

}

.small-accordion {
   font-size: 0.75rem;
   font-weight: 500;
}

.grayed {
   color: var(--clr-neutral-200);
}

.mutedcta {
   color: var(--clr-mutedcta);
}



.invert {
   filter: invert();
}

.grayscale {
   filter: grayscale();
}

.menu-select {
   background-color: var(--clr-brightcta);
   border-radius: 0;
}

.bold {
   display: block;
   font-weight: 500;
}

.italic {
   font-style: italic;

}



/* Invoice: title bar (H1 vänster, logo höger) */
.invoice-logo {
   color: var(--black);
   max-width: 150px;

}

.padding-bottom-normal {
   padding-bottom: var(--padding-normal);
}

.padding-bottom-close {
   padding-bottom: var(--padding-close);
}

.padding-bottom-tight {
   padding-bottom: var(--padding-small);
}

.margin-bottom-big {
   margin-bottom: var(--padding-big);
}

.margin-bottom-normal {
   margin-bottom: var(--padding-normal);
}

.margin-bottom-close {
   margin-bottom: var(--padding-close);
}

.margin-bottom-small {
   margin-bottom: var(--padding-small);
}

.margin-bottom-tight {
   margin-bottom: var(--padding-tight);
}

.padding-top-tight {
   padding-top: var(--padding-small);

}

.padding-top-close {
   padding-top: var(--padding-close);

}

.margin-top-normal {
   margin-top: var(--padding-normal);

}

.margin-top-close {
   margin-top: var(--padding-close);
}

.margin-top-small {
   margin-top: var(--padding-small);
}

.dot {
   display: inline-block;
   width: 0.25rem;
   height: 0.25rem;
   object-fit: contain;
   aspect-ratio: 1 / 1;
   background: var(--clr-neutral-200);
   border-radius: 9999rem;
   margin: 0 var(--padding-tight);
   vertical-align: middle;
}

.slash {
   display: inline-block;
   width: 1px;
   height: 1em;
   background: var(--clr-neutral-200);
   transform: rotate(15deg);
   margin: 0 var(--padding-tight);
   vertical-align: middle;
}

hr.underline {
   border: none;
   border-bottom: 1px solid var(--clr-neutral-200);
   height: 0;
   margin-block: 1.5rem 2rem;
}

hr.underline-browse {
   border: none;
   margin-block: var(--padding-close) var(--padding-small);
}


/* dialogruta minimal bas – anpassa fritt i din egen stil */
.qd-modal {
   position: fixed;
   inset: 0;
   display: grid;
   place-items: center;
   z-index: 9999;
}

.qd-modal__overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .55);
}

.qd-modal__header {
   border-bottom: 1px solid var(--clr-neutral-200);
   padding-inline: var(--padding-normal);
}

.qd-modal__body {
   padding: var(--padding-normal);
}

.qd-modal__card {
   position: relative;
   background-color: var(--clr-datebg);
   border-radius: var(--normal-radius);
   padding: 0;
   width: max(420px, 12%);
   
   box-shadow: var(--clr-date-shadow);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
}

.qd-modal__footer {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
   padding: var(--padding-normal);
}

.qd-field {
   display: block;
}

.popup-bar {
   display: flex;
   position: fixed;

   top: 3rem;
   left: 50%;

   transform: translateX(-50%) translateY(0);

   min-width: 20rem;
   max-width: 32vw;

   color: var(--clr-black);
   padding: var(--padding-close) var(--padding-normal);
   border-radius: var(--small-radius);
   box-shadow: var(--clr-msg-shadow);
   z-index: 9999;

   align-items: top;
   justify-content: center;
   background: var(--clr-msgbg);

   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);

   opacity: 1;

   animation-play-state: paused;
   animation: closeBar 3s 5s forwards;
}

.popup-bar::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;

   border-top: 1px solid hsl(0 0% 100% / 0.9);
   border-left: 1px solid hsl(0 0% 100% / 0.9);
   border-bottom: 1px solid hsl(0 0% 99% / 0.5);
   border-right: 1px solid hsl(0 0% 99% / 0.5);
}

.popup-bar:hover {
   opacity: 1;
   animation-play-state: paused;
}

.bar-text {
   max-width: 36ch;
   color: var(--clr-black);
   margin: 0;
   line-height: 1.5;
}

/* Popup: två-raders layout */
.popup-bar .popup-bottom-row {
   margin-top: 0.20rem;
}

.popup-bar .popup-icon-spacer {
   /* Ska motsvara ikonens bredd + gapet i toppraden */
   width: 1.5rem;
   /* samma som .icon */
   margin-right: 0;
}


.warn-msg {
   background: var(--clr-warnbg);
   box-shadow: var(--clr-warn-shadow);
}


/* Menubar: dölj åtgärdsknappar tills JS har satt korrekt state */
[data-role="menubar"]:not(.is-ready) .btn--nav-secondary,
[data-role="menubar"]:not(.is-ready) .btn--nav-cta {
   opacity: 0;
   pointer-events: none;
}


@keyframes closeBar {
   100% {
      opacity: 0;
      display: none;
      transform: translateX(-50%) translateY(-100%);
   }
}

/* ====== Globala mobilvariabler (en gång) ================================== */
:root {
   --topbar-h: 60px;
   /* uppskattad topbar-höjd */
   --mobile-ui-offset: 8px;
   /* liten buffert under adressfält */
   --safe-top: env(safe-area-inset-top, 0px);
}


/* ====== ≤864px ============================================================ */
@media (max-width: 860px) {

   .bar-button-layout {
      display: none;
   }

   .flex-breadcrumbs {
      flex-direction: row;
   }

   .wizard-ui {
      flex-direction: column;
   }

   .btn--card {
      flex-direction: column;
   }

   .btn.btn--nav,
   .btn.btn--nav-secondary,
   .btn.btn--nav-cta {
      gap: var(--padding-tight);
      flex-direction: column;
      padding: var(--padding-small);
   }

   .btn.btn--nav span,
   .btn.btn--nav-secondary span,
   .btn.btn--nav-cta span {
      gap: var(--padding-tight);
      font-size: 0.65rem;
      font-weight: 300;
   }

   .invoice-card {
      padding: var(--padding-normal);
   }

   .grid-layout {
      grid-template-columns: 1fr 1fr;
   }

   .dashboard {
      margin-top: 0;
      background-color: var(--clr-offwhite);
   }

   .dashboard-inner {
      padding-inline: var(--padding-normal);

   }

    /* FIX: Låt menylänkarna scrolla, men account-knappen ska alltid synas */
   .sidebar-menu.space-between {
      overflow: hidden;  /* Ta bort scroll från sidebar-menu */
   }

   .sidebar-menu > .position-top {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      height: auto;  /* Överskrid height: 100% */
   }

   .sidebar-menu > .margin-bottom-big {
      flex-shrink: 0;  /* Account-knappen ska aldrig krympa */
   }

}

/* ====== ≤480px ============================================================ */
/* (Det här är ditt mobilblock – bara av-nästlat och renskrivet)             */
@media (max-width: 480px) {

   html,
   body {
      height: auto;
      min-height: var(--vh-100);
      /* du har redan --vh-100 definierad */
   }

   body {
      overflow-x: hidden;
      overflow-y: auto;
      /* var: hidden på desktop */
   }

   /* Släpp alla höjd- och scroll-lås i innehållet */
   main,
   .main-content {
      height: auto;
      min-height: 0;
      overflow: visible;
   }


   .dashboard {
      height: auto;
      min-height: 100vh;
      margin-top: 0;
      overflow: visible;
      /* var: auto – vi flyttar scrollen till body */
      background-color: var(--clr-offwhite);
      scrollbar-gutter: auto;
   }

   .dashboard-inner {
      margin: 0;
      padding: 0;
      padding-inline: var(--padding-close);
   }

   /* Trygg sticky i mobil utan “fixed” */
   .topbar {
      position: sticky;
      top: 0;
      height: var(--topbar-h);
      background-color: var(--clr-datebg);
      backdrop-filter: blur(4px);
      padding-inline: var(--padding-close);
   }

   .topbar__inner {
      gap: var(--padding-tight);
      align-items: center;
      max-width: 100%;
      margin: 0;
   }
   
   .input-underline {
      width: 100%;
   }

   .btn-layout {
      flex-direction: column;
      
   }
   
   .login-screen {
      background-color: transparent;
      border-radius: 0;
      margin-inline: 0;
      margin: 0;
      border: none;
      width: 100%;
      max-width: unset;
      min-width: unset;
      padding: var(--padding-close);
   }

   .btn--card>div:last-child:not(.btn-customers) {
      display: none;
   }

   .position-right {
      flex-direction: row;
      justify-content: end;
      align-items: center;
   }

   .company-button-row {
   display: flex;
      justify-content: end;
      margin-top: var(--padding-normal);
      gap: var(--padding-close);
      flex-wrap: wrap;
      flex-direction: column;
   }

   .company-button-right {
      justify-content: space-between;

   }

   .grid-col-adjust {
      grid-template-columns: 1fr;
   }

   .btn.btn--nav,
   .btn.btn--nav-secondary,
   .btn.btn--nav-cta {
      padding: var(--padding-tight);
   }

   .btn__icon {
      width: 16px;
      height: 16px;
   }

   .btn--card .btn-kebab,
   .info-box .btn-kebab {
      opacity: 1;
   }
   

   .help-messages {
      font-size: 1.125rem;

   }

   /* låt modaler/drawers kunna sticka utanför innehållet */



   /* modaler ska inte hamna under sökfältet */
   .qd-modal {
      padding-top: calc(var(--topbar-h) + var(--safe-top) + var(--mobile-ui-offset) + 8px);
   }

   .grid-layout {
      grid-template-columns: 1fr;
   }

   .main-content {
      display: flex;
      flex-direction: column;
      margin-top: 0;
   }

   .btn--card {
      flex-direction: column;
   }

   .brand__title,
   .slash {
      display: none;
   }

   .brand .dot {
      display: none;
   }

   .menubar {
      justify-content: space-evenly;
   }


   
   .spinner {
      width: 14px;
      height: 14px;
   }
}

/* Mobil & små skärmar: gör den till en vänster-drawer */
@media (max-width: 860px) {

   .sidebar {
      position: fixed;
      left: 0;

      top: var(--topbar-h);
      bottom: 0;
      /* fyll hela höjden under headern */
      width: var(--sidebar-w);

      display: flex;
      flex-direction: column;

      transform: translateX(-110%);
      transition: transform 220ms ease;
      z-index: 1100;
      border-right: none;
   }

   body.sidebar-open {
      overflow: hidden;
      /* lås body-scroll */
      overscroll-behavior: contain;
      /* minska "bounce" på mobil */
   }


   .sidebar.is-open {
      transform: translateX(0);
   }

   .sidebar>.sidebar-menu {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;

      /* se till att sista item inte krockar med botten/safe-area */
      padding-bottom: calc(var(--padding-close) + env(safe-area-inset-bottom, 0px));
   }


   .main-content {
      display: flex;
      flex-direction: column;
   }


   .main-content {

      position: relative;
      transition: transform 220ms ease;
   }


   /* Slide whole app right to make room for the sidebar (mobile) */

   body.sidebar-open .dashboard {
      transform: translateX(var(--sidebar-w));
      transition: transform 220ms ease;
      /* keep hardware acceleration smooth */
      will-change: transform;
   }


   .btn--side {
      padding: var(--padding-close) var(--padding-normal);
   }

   /* Overlay när sidomenyn är öppen – täcker allt under headern */
   .sidebar-overlay {
      position: fixed;
      left: 0;
      right: 0;
      top: calc(var(--topbar-h) + var(--safe-top) + var(--mobile-ui-offset));
      bottom: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
      z-index: 1050;
      /* under sidebar (t.ex. 1100), över dashboard */
   }

   body.sidebar-open {
      overflow: hidden;
      overscroll-behavior: contain;
   }

   body.sidebar-open .sidebar-overlay {
      opacity: 1;
      pointer-events: auto;
   }

   /* Lås hela headern – utom loggan */
   body.sidebar-open .topbar {
      pointer-events: none;
   }

   body.sidebar-open .topbar .brand {
      pointer-events: auto;
      /* loggan får fortfarande klickas */
   }
}
/* ====== dina grid-kolumner uppåt ============================ */

/* Default: dölj kort 5+ (visa max 4) */
.grid-col-adjust > .btn--card:nth-child(n+5) {
   display: none;
}

.grid-col-adjust {
   grid-template-columns: 1fr;
   gap: var(--padding-close);
}

@media (min-width: 991px) {
   .grid-col-adjust {
      grid-template-columns: 1fr 1fr;
      gap: var(--padding-close);
   }
}

@media (min-width: 1380px) {
   .grid-col-adjust {
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--padding-close);
   }

   /* 1380px+: visa kort 5-6, dölj 7+ (max 6) */
   .grid-col-adjust > .btn--card:nth-child(n+5) {
      display: flex;
   }
   .grid-col-adjust > .btn--card:nth-child(n+7) {
      display: none;
   }
}

@media (min-width: 1920px) {
   .grid-col-adjust {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: var(--padding-close);
   }

   .dashboard-inner {
      width: 1600px;
   }

   /* 1920px+: visa alla 8 kort */
   .grid-col-adjust > .btn--card:nth-child(n+7) {
      display: flex;
   }
}

.visually-hidden {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
   padding: 0;
   border: 0;
   height: 1px;
   width: 1px;
   overflow: hidden;
   white-space: nowrap;
}