/* ======== FORM LAYOUT (modern underlined inputs) ======== */

.form {
   display: block;
}

.form-row {
   display: flex;
   align-items: center;
   gap: var(--padding-small);
   margin-bottom: var(--padding-small);
}

.form-label,
.text-label {
   color: var(--clr-heading);
   font-weight: 500;
   line-height: 1.4;
   white-space: nowrap;
}

.text-label {
   width: 70px;
}

.form-label {
   width: clamp(170px, 50%, 180px);
   /* etikett-bredd → “mellanrum” till värdet */
   /* min-width: 170px; */
}

.input-underline {
   flex: 1;
   max-width: 100%;

   background-color: var(--input-bg);
   color: var(--clr-copy);
   border: none;
   border-bottom: 2px solid var(--input-underline);
   padding: var(--padding-small);

   font: inherit;
   outline: none;
   border-radius: 0;
   transition: border-color 100ms ease, background-color 100ms, border-bottom-width 100ms ease;
}



.input-underline.bold-typing {
   font-weight: 500;
}

.input-underline:hover {
   border-bottom-color: var(--input-underline-hover);
   /* background-color: var(--clr-primary); */

}

.input-underline:focus {
   border-bottom-color: var(--input-underline-focus);
   background-color: var(--clr-brightcta);
   /* border-bottom-width: 2px; */
   outline: none;

   /* box-shadow: 0 3px 0 0 rgba(12,118,223,.12); */
}

.input-underline::placeholder {
   color: var(--input-placeholder);
}

.input-underline[disabled],
.input-underline[readonly] {
   opacity: .75;
   cursor: not-allowed;
}

/* wrapper & input (som tidigare) */
.input-search-wrap {
   position: relative;
   display: inline-flex;
   align-items: flex-end;
   flex: 1 1 auto;
   min-width: 0;
}

.input-search {
   flex: 1;
   background-color: var(--input-bg);
   color: var(--clr-copy);
   border: none;
   border-bottom: 2px solid var(--input-underline);
   padding: 0.5rem 2rem 0.5rem 0.3rem;
   /* plats för clear-ikon */
   font: inherit;
   outline: none;
   transition: border-color 100ms ease, background-color 100ms ease, border-bottom-width 100ms ease;
}

.input-search::placeholder {
   color: var(--input-placeholder);
}

.input-search:hover {
   border-bottom-color: var(--input-underline-hover);
   background-color: var(--clr-primary);
}

.input-search:focus {
   border-bottom-color: var(--input-underline-focus);
   background-color: var(--clr-brightcta);
}

/* vår clear-ikon – default DOLD */
.input-search__clear {
   position: absolute;
   right: 0.5rem;
   bottom: 0.7rem;
   /* häng lite under linjen */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: none;
   background: transparent;
   cursor: pointer;
   opacity: 0;
   /* <-- dold från start */
   pointer-events: none;
   /* <-- ej klickbar utan text */
   transition: opacity 120ms ease;
   z-index: 1;
   text-decoration: none;
}

.input-search__clear:hover {
   opacity: 1;
}

.input-search__clear>.icon,
.input-search__clear>.tiny-icon {
   width: 1rem;
   height: 1rem;
   object-fit: contain;
}

/* VISA clear-ikonen bara när det finns text (dvs inte placeholder-läge) */
.input-search:not(:placeholder-shown)+.input-search__clear {
   opacity: 0.85;
   pointer-events: auto;
}

/* spegla hover/focus på wrap */
.input-search-wrap:hover .input-search {
   border-bottom-color: var(--input-underline-hover);
   background-color: var(--clr-primary);
}

.input-search-wrap:focus-within .input-search {
   border-bottom-color: var(--input-underline-focus);
   background-color: var(--clr-brightcta);
}

/* Dölj inbyggda WebKit-ikoner och datalist-pilen */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
   display: none !important;
}

input[list]::-webkit-calendar-picker-indicator {
   display: none !important;
}

input[list] {
   background-image: none !important;
}


/* --- Floating label helper for .input-underline --- */

.floating-label {
   position: relative;
   display: flex;
   flex: 1 1 auto;
   min-width: 0;

   width: 100%;
   margin-block: 0 var(--padding-close);
   padding-block: var(--padding-small) var(--padding-small);
}

/* Dölj placeholdertexten – label agerar "placeholder" */
.floating-label .input-underline::placeholder {
   color: transparent;
}

.floating-label>label {
   position: absolute;
   left: 0.4rem;
   /* matchar .input-underline padding-x */
   top: 50%;
   transform: translateY(-50%);
   /* ingen scale här längre */
   pointer-events: none;
   color: var(--input-placeholder);
   font-weight: 400;
   font-size: 0.95rem;
   /* ← grundstorlek (placeholder-läge) */
   line-height: 1;
   width: 100%;
   transition:
      transform 150ms ease-in-out,
      top 150ms ease-in-out,
      font-size 150ms ease-in-out,
      color 150ms ease-in-out,
      font-weight 150ms ease-in-out,
      opacity 150ms ease-in-out;
   will-change: transform, top, font-size, color, font-weight, opacity;
}

/* Fokusfärg på label via focus-within (samma känsla som underline-focus) */
.floating-label:focus-within>label {
   color: var(--input-placeholder);
}

/* Flytta upp labeln när fältet har fokus ELLER innehåll */
.floating-label .input-underline:not(:placeholder-shown) + label,
.floating-label .input-underline[value]:not([value=""]) + label,
.floating-label:focus-within > label {
   top: -0.45rem;
   transform: translateX(-0.3rem) translateY(0); /* ingen scale, bara liten offset */
   font-size: 0.8rem;        /* ← MINDRE storlek när den flyter upp */
   font-weight: 300;
   color: var(--clr-neutral-300);
}



/* Autofill-stöd (Chrome/Safari) – se till att labeln flyter upp vid autofill */
.floating-label .input-underline:-webkit-autofill + label {
   top: -0.45rem;
   transform: translateX(-0.3rem) translateY(0);
   font-size: 0.8rem;       /* samma som ovan */
   color: var(--clr-neutral-300);
   font-weight: 300;
}


/* Disabled/readonly – spegla inputens stil */
.floating-label .input-underline[disabled]+label,
.floating-label .input-underline[readonly]+label {
   color: var(--clr-neutral-300);
}




.box-placeholder {
   padding: var(--padding-small) 0;
   margin-inline: 0;
   color: var(--clr-neutral-500);
}

.select {
   padding: 0.5rem 1rem;
   border: 1px solid var(--clr-neutral-200);
   border-radius: var(--normal-radius);
   background-color: #fff;
   font-size: 14px;
   color: var(--clr-copy);
}

.select:focus {
   outline: none;
   border-color: var(--clr-cta);
   box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
}

/* Textarea Styling */
.textarea {
   min-height: 8vh;
   max-height: 19vh;
   resize: vertical;
   font: inherit;

   padding-top: var(--padding-small);
   scrollbar-width: thin;
   scrollbar-color: var(--clr-cta) var(--clr-secondary);
   line-height: 1.2;
}

.customer-note {
   display: block;
   /* undvik inline-quirks */
   box-sizing: border-box;
   /* width:100% inkluderar padding/border */
   width: 100%;
   max-width: 100%;
   min-width: 0;
   /* viktigt i flex/grid: tillåt krympning */

   /* Höjd & scroll */
   min-height: 6vh;
   max-height: 6vh;
   overflow-y: auto;
   /* scrolla istället för att växa */
   overflow-x: hidden;
   /* spräck inte bredden horisontellt */

   /* Textbrytning för extremt långa ord/URL:er */
   word-break: break-word;
   overflow-wrap: anywhere;

   /* Övrigt (behåll dina värden) */
   padding-top: var(--padding-small);
   font: inherit;
   resize: none;
   line-height: 1.2;
   scrollbar-width: thin;
   scrollbar-color: var(--clr-cta) var(--clr-secondary);
}

/* For Webkit browsers */
.textarea::-webkit-scrollbar {
   width: 0.5rem;
   background: var(--clr-darkcta);
   border-radius: var(--padding-small);
}

.textarea::-webkit-scrollbar-thumb {
   background: var(--clr-cta);
   border-radius: var(--padding-small);
}

.textarea::-webkit-scrollbar-thumb:hover {
   background: var(--clr-lightcta);
}

@supports (field-sizing: content) {
   textarea {
      field-sizing: content;
      max-width: 100%;
      width: 100%;
   }
}

.max-width {
   width: 100%;
}

.value-entry {
   max-width: 16ch;
}

.text-entry {
   max-width: 32ch;
}

.input--error {
   border-bottom: 2px solid var(--clr-warn);
}

.chip__control {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}