h1:focus {
    outline: none;
}

/* ============================================================
   Gemensam safe-area & viewport — EN källa för hela appen.
   Använd dessa klasser istället för ad-hoc env()-värden per sida.
   ============================================================ */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Moderna viewport-höjder med vh-fallback för äldre webbläsare. */
.h-dvh { height: 100vh; height: 100dvh; }
.min-h-dvh { min-height: 100vh; min-height: 100dvh; }
.h-svh { height: 100svh; }

/* Ren safe-area padding. !important så de tillförlitligt vinner över Tailwinds
   padding oavsett CSS-källordning. */
.safe-pt { padding-top: var(--safe-top) !important; }
.safe-pb { padding-bottom: var(--safe-bottom) !important; }
.safe-pl { padding-left: var(--safe-left) !important; }
.safe-pr { padding-right: var(--safe-right) !important; }
.safe-px { padding-left: var(--safe-left) !important; padding-right: var(--safe-right) !important; }

/* Bas-spacing + safe-area i botten (knapprader, footers, scrollat innehåll). */
.safe-pb-2 { padding-bottom: calc(0.5rem + var(--safe-bottom)) !important; }
.safe-pb-3 { padding-bottom: calc(0.75rem + var(--safe-bottom)) !important; }
.safe-pb-4 { padding-bottom: calc(1rem + var(--safe-bottom)) !important; }
.safe-pb-6 { padding-bottom: calc(1.5rem + var(--safe-bottom)) !important; }

/* iOS-fix: Bottom navigation som ALLTID sitter fast, även när keyboard visas.
   Använd denna klass på bottom nav/toolbar för native app-känsla. */
.bottom-nav-fixed {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Viktigt: Använd fixed positioning relativt viewport, inte document */
    transform: translateZ(0) !important; /* GPU-acceleration + eget lager */
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
}

/* Bottennav / tab bar (mobil). padding-bottom = safe-area så barens bakgrund går ända ner
   i hemindikator-zonen (native iOS-känsla, ingen remsa under). Höjden på själva flikraden
   ligger i .tabbar-inner. */
.tabbar { padding-bottom: var(--safe-bottom); }
.tabbar-inner { height: 3.25rem; }
/* Innehållspadding så sista innehållet inte hamnar bakom baren – endast mobil (baren är md:hidden). */
@media (max-width: 767px) {
    .tabbar-pad { padding-bottom: calc(3.25rem + var(--safe-bottom) + 1.5rem) !important; }
    /* Botten för .panel-between-bars: sluta ovanför bottennaven på mobil (baren är md:hidden),
       annars döljs panelens nederkant bakom den – extra tydligt i PWA där safe-bottom > 0. */
    .panel-between-bars { bottom: calc(3.25rem + var(--safe-bottom)) !important; }
}

/* Fixerad panel som ska ligga MELLAN topbaren och bottennaven (t.ex. fakturans Status/Betalning/
   Aktivitet-panel). På iOS-PWA växer headern in i notchen (höjd = 4rem + safe-top), så en panel som
   startar på top:4rem hamnar bakom headern. Toppen räknar därför in safe-top på alla breddar; botten
   (bottennavens höjd) sätts bara på mobil ovan, eftersom baren är md:hidden. */
.panel-between-bars { top: calc(4rem + var(--safe-top)) !important; }

/* Döljs på mobil-bredd OCH i installerad PWA (standalone). Används för PDF-nedladdning som inte
   fungerar tillförlitligt i mobil-WebView/iOS-PWA – där erbjuds andra sätt (öppna/dela) istället. */
@media (max-width: 767px) { .hide-on-mobile-pwa { display: none !important; } }
@media (display-mode: standalone) { .hide-on-mobile-pwa { display: none !important; } }

/* Chatten: höjden binds till visual-viewporten (--vvh sätts av JS) så composern alltid ligger
   ovanför tangentbordet. Subtraherar header + chrome (7rem, som tidigare) plus safe-area top/bottom
   så den i standalone inte hamnar bakom statusfält/hemindikator. Fallback 100dvh utan JS. */
.chat-vh { height: calc(var(--vvh, 100dvh) - 7rem - var(--safe-top) - var(--safe-bottom)); }

/* Anteckningssidan: som .chat-vh, men bottennaven visas här. På mobil drar vi därför bort
   barens höjd plus den extra bottenpadding .tabbar-pad lägger på (3.25rem + 0.5rem utöver
   sidans p-4), så skrivytan slutar precis ovanför baren i stället för att skapa scroll. */
.notes-vh { height: calc(var(--vvh, 100dvh) - 7rem - var(--safe-top) - var(--safe-bottom)); }
@media (max-width: 767px) {
    .notes-vh { height: calc(var(--vvh, 100dvh) - 7rem - var(--safe-top) - var(--safe-bottom) - 3.75rem); }
}

/* Header/topbar som växer in i statusfältet (notch / Dynamic Island). */
.h-header-safe { height: calc(4rem + var(--safe-top)) !important; }

/* ============================================================
   PWA native-känsla (iOS Safari, installerad iOS-PWA, Android Chrome-PWA)
   ============================================================ */

html {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    /* App-bakgrund så att området kring hemindikatorn (safe-area) aldrig blir vitt i
       standalone-PWA – matchar appens yta i ljust läge. .dark sätts på <html> via JS. */
    background-color: #f3f4f6; /* gray-100 */
    /* Stoppa rubber-band-overscroll och pull-to-refresh. */
    overscroll-behavior: none;
    /* iOS ska inte auto-skala text vid rotation. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}
html.dark {
    background-color: #111827; /* gray-900 – matchar appens mörka yta */
}

body {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    /* Ta bort den gråa touch-highlighten vid tryck. */
    -webkit-tap-highlight-color: transparent;
    /* Sidopaddings vid notch i liggande läge (Dynamic Island/notch). */
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}


/* Snabbare tap (ingen 300ms-fördröjning) + ingen dubbeltryck-zoom på interaktiva element. */
a, button, [role="button"], input, select, textarea, label, summary {
    touch-action: manipulation;
}

/* ===== Textmarkering: native app-känsla – ENDAST i native-appen (Capacitor) =====
   Gate:n är html.native-app, som sätts av JS i App.razor NÄR appen körs i Capacitors
   WebView (window.Capacitor.isNativePlatform()). Desktop OCH mobil webbläsare rörs alltså
   INTE – där fungerar markering helt som vanligt (kopiera överallt). Tidigare var detta
   kopplat till skärmbredd (max-width: 767px), vilket felaktigt stängde av markering även
   i smala desktop-fönster.
   I appen är markering AV som standard – förhindrar oavsiktlig markering av rubriker,
   knappar, menyer, kort, flikar och tabeller vid scroll/tryck. Återaktiveras (PÅ) där man
   rimligen vill kopiera: formulärfält, redigerbart innehåll, tabelldata (td) samt allt med
   .select-text/.selectable. Chrome (knappar/nav/rubriker/ikoner/tabellhuvuden) är alltid av. */
html.native-app, html.native-app body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* PÅ: kopierbar info. .select-text = Tailwinds util; .selectable = egen (med touch-callout). */
html.native-app input, html.native-app textarea, html.native-app select,
html.native-app [contenteditable="true"],
html.native-app .wysiwyg-content,
html.native-app td,
html.native-app .select-text, html.native-app .selectable {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* AV: UI-chrome ska aldrig gå att markera, även inuti en markerbar container.
   (Står sist så att element-reglerna ovan inte råkar slå på markering på chrome.) */
html.native-app button, html.native-app a, html.native-app [role="button"], html.native-app summary,
html.native-app nav, html.native-app h1, html.native-app h2, html.native-app h3, html.native-app h4, html.native-app h5, html.native-app h6,
html.native-app label, html.native-app th, html.native-app svg, html.native-app .no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* iOS Safari zoomar in när ett fält med font < 16px fokuseras. 16px på mobil stoppar det
   (kompletterar user-scalable=no, som ignoreras av iOS Safari i webbläsarläge). */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Pull-to-refresh-indikator (egen, touch). Sitter i scroll-containerns topp. */
.ptr-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    z-index: 30;
    pointer-events: none;
    will-change: transform, opacity;
}
.dark .ptr-indicator, html.dark .ptr-indicator { background: #1f2937; }
.ptr-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(0, 0, 0, .15);
    border-top-color: #003f52;
    border-radius: 9999px;
}
.dark .ptr-spinner, html.dark .ptr-spinner {
    border-color: rgba(255, 255, 255, .2);
    border-top-color: #28af60;
}
.ptr-spinner.ptr-spinning { animation: ptrspin .8s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }

/* Mjuk inzoomning för bild-lightboxen (ImageLightbox). */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Bottom-sheets på mobil (snabbanteckningar, uppgifter, chatt) glider upp underifrån.
   Bara under md-brytpunkten – på desktop är panelerna dropdowns och ska inte animeras.
   Backdropen tonas in samtidigt. */
@keyframes sheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (max-width: 767px) {
    .sheet-up { animation: sheetUp .25s cubic-bezier(0.32, 0.72, 0, 1); }
    .sheet-backdrop { animation: fadeIn .25s ease-out; }
}

@media (prefers-reduced-motion: reduce) {
    .sheet-up, .sheet-backdrop { animation: none; }
}

/* iOS Safari ger input[type=date] en inbyggd minimibredd (-webkit-min-logical-width) som
   struntar i w-full/min-w-0. Datumfälten blir då bredare än övriga filter – syns bara på
   riktig mobil, inte i desktopwebbläsarens mobilläge. Nollställ den. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    -webkit-min-logical-width: 0;
    min-width: 0;
    max-width: 100%;
}

/* iOS Safari sätter också egen höjd/marginal på värdet inuti date-fältet, så fälten blir
   högre än intilliggande select/input trots samma py-2. Lås line-height och nolla marginalen
   på värdeblocket så höjden följer resten av formuläret. */
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    line-height: 1.25rem;
    height: auto;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
    margin: 0;
    line-height: 1.25rem;
    min-height: 1.25rem;
    text-align: left;
}
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
    padding: 0;
    line-height: 1.25rem;
}

/* Döljer scrollbaren men behåller scroll-funktionen (t.ex. horisontella filter-chips på mobil). */
.no-scrollbar {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* WYSIWYG-editor: placeholder för tom contenteditable + listmarkörer */
.wysiwyg-content[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
}
.wysiwyg-content ul { list-style: disc; padding-left: 1.5rem; }
.wysiwyg-content ol { list-style: decimal; padding-left: 1.5rem; }

@font-face {
    font-family: 'You Warm My Heart';
    src: url('/images/fonts/You%20Warm%20My%20Heart.otf') format('opentype');
    font-display: swap;
}

.font-handwriting {
    font-family: 'You Warm My Heart', 'Plus Jakarta Sans', cursive;
    font-weight: 700;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Customer avatar initials */
.customer-initials {
    height: 2.5rem; /* 40px */
    width: 2.5rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #e5ebed;
}

.customer-initials span {
    color: rgb(0, 63, 82);
    font-weight: 600;
    font-size: 0.875rem; /* text-sm */
}

/* Färgtemats CSS-variabler. Värdena är "R G B"-trippletter eftersom
   Tailwind genererar regler som rgb(var(--color-x) / <alpha-value>) —
   det låter bg-primary/10, ring-primary/40 osv. fortsätta fungera.
   --color-primary-text-dark är en ljusare nyans som ersätter text-primary
   i dark mode, eftersom själva primärfärgen är för mörk mot mörk bakgrund. */
:root,
.theme-default {
    --color-primary: 0 63 82;            /* #003f52 — Kundlys djupa teal */
    --color-accent: 40 175 96;           /* #28af60 — grön accent */
    --color-primary-text-dark: 77 184 208; /* #4db8d0 — läsbar teal i dark */
}

.theme-nordic {
    --color-primary: 21 94 117;          /* #155e75 — nordisk djup teal */
    --color-accent: 6 182 212;           /* #06b6d4 — cyan accent */
    --color-primary-text-dark: 103 232 249; /* #67e8f9 — läsbar cyan i dark */
}

.theme-lavender {
    --color-primary: 79 70 229;          /* #4f46e5 — indigo SaaS-primär */
    --color-accent: 167 139 250;         /* #a78bfa — soft purple accent */
    --color-primary-text-dark: 196 181 253; /* #c4b5fd — läsbar lavendel i dark */
}

.theme-sunset {
    --color-primary: 194 65 12;          /* #c2410c — varm orange */
    --color-accent: 251 113 133;         /* #fb7185 — peach/pink accent */
    --color-primary-text-dark: 253 186 116; /* #fdba74 — läsbar peach i dark */
}

/* Primärfärgen är för mörk för att läsas som text mot den mörka
   bakgrunden i dark mode. En ljusare variant av samma nyans används
   där, så att all "text-primary" blir läsbar utan att varje
   förekomst behöver en egen dark:-variant. */
.dark .text-primary {
    color: rgb(var(--color-primary-text-dark));
}

.dark .hover\:text-primary:hover {
    color: rgb(var(--color-primary-text-dark));
}

/* Slide-panel scroll area: a flex column whose single child (the form) fills
   the full height, so the action bar can be pushed to the very bottom. */
.panel-scroll {
    display: flex;
    flex-direction: column;
}

.panel-scroll > * {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Action buttons pinned to the bottom of a slide panel: the auto top-margin
   pushes the bar down to the bottom edge, sticky keeps it visible while the
   content scrolls, and the negative side margins break it out of the panel's
   horizontal padding so it spans the full width. !important is needed to beat
   the `space-y` utility on the form wrapper. */
.panel-actions {
    position: sticky;
    bottom: 0;
    margin: auto -1.5rem 0 !important;
    padding: 1rem 1.5rem;
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.dark .panel-actions {
    background-color: #1f2937;
    border-top-color: #374151;
}

/* Highlight shown over the chat conversation while a file is dragged onto it. */
.chat-drop-active::after {
    content: "Släpp filen här";
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(var(--color-primary));
    background: rgb(var(--color-primary) / 0.08);
    border: 2px dashed rgb(var(--color-primary));
    border-radius: 0.75rem;
    pointer-events: none;
}

.dark .chat-drop-active::after {
    color: rgb(var(--color-primary-text-dark));
    background: rgb(var(--color-primary-text-dark) / 0.12);
    border-color: rgb(var(--color-primary-text-dark));
}