html, body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--color-text);
    background-color: var(--hos-cream);
}

:root {
    /* House Of Service brand palette */
    --hos-plum: #260037;
    --hos-plum-dark: #170021;
    --hos-plum-tint: #f1e9f5;
    --hos-cream: #faf6f1;
    --hos-cream-alt: #f3ecf0;
    --hos-green: #b7f7b0;
    --hos-green-dark: #133d1c;

    /* Text color used for brand-plum text sitting on a light/tint background (card
       headings, summary-tile values, hero text) — distinct from --hos-plum itself, which
       is also used as a dark background (topnav, tiles, buttons) with white text and must
       not change in dark mode. */
    --hos-plum-text: var(--hos-plum);

    --color-border: #ddd8e0;
    --color-border-soft: #eee6ef;
    --color-muted: #6b6570;
    --color-text: #212121;
    --color-label: #4a454e;
    --color-surface: #ffffff;
    --color-surface-alt: #f2f0f3;

    --status-draft-bg: #ebe9ec;
    --status-draft-fg: #4a454e;
    --status-operations-bg: #fdecd2;
    --status-operations-fg: #7a4b06;
    --status-economic-bg: #dce9fb;
    --status-economic-fg: #1c4a86;
    --status-approved-bg: #dcf3e3;
    --status-approved-fg: #1e6b3a;
    --status-rejected-bg: #fbdede;
    --status-rejected-fg: #8c1d1d;
    --status-withdrawn-bg: #ece5f7;
    --status-withdrawn-fg: #5a3a8c;
    --status-levererad-bg: #e4e1ea;
    --status-levererad-fg: #260037;

    /* Belastning per projektgrupp (IT workload traffic lights, Home.razor) — reuses the same
       green/amber/red/grey hues as the order status badges above, for one consistent "what does
       this color mean" vocabulary across the portal. Defined once here, no dark-mode override,
       matching the status-* tokens' own convention. */
    --workload-green-bg: #dcf3e3;
    --workload-green-fg: #1e6b3a;
    --workload-yellow-bg: #fdecd2;
    --workload-yellow-fg: #7a4b06;
    --workload-red-bg: #fbdede;
    --workload-red-fg: #8c1d1d;
    --workload-grey-bg: #ebe9ec;
    --workload-grey-fg: #4a454e;
}

/* Dark mode (2026-09-22) — toggled via the nav's "Mörkt läge" switch (NavMenu.razor),
   persisted in a "hos-theme" cookie (browser-only, not per-user in the database) so
   App.razor can render the right theme on first paint instead of flashing light mode
   first. The topnav/tiles/buttons stay dark-plum-with-white-text in both modes; only the
   page surfaces, borders and body/label text swap. */
:root[data-theme="dark"] {
    --hos-cream: #1c1722;
    --hos-cream-alt: #241d29;
    --hos-plum-tint: #2c2333;
    --hos-plum-text: #e7d9f0;
    --color-border: #423a4a;
    --color-border-soft: #382f40;
    --color-muted: #a89fb0;
    --color-text: #eee8f2;
    --color-label: #cfc6d6;
    --color-surface: #241d29;
    --color-surface-alt: #2c2333;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* --- Top navigation --- */

.topnav {
    background-color: var(--hos-plum);
}

/* One-row top bar (2026-10-01): brand, area, links and account always on a single line. The
   links never wrap; if the window is too narrow they scroll sideways, and lower-priority text
   (brand subtitle, "Hjälp & test" label, user name) collapses first. */
.topnav-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.7rem 1.5rem;
    min-height: 60px;
    box-sizing: border-box;
}

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

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--hos-green);
    color: var(--hos-plum);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

.brand-tag {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.topnav-links {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.topnav-links::-webkit-scrollbar {
    display: none;
}

/* AuthorizeView renders no wrapper element, but keep any wrapper inline just in case. */
.topnav-links > * {
    flex-shrink: 0;
}

.topnav-links .nav-link {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.topnav-links .nav-link:hover {
    color: #fff;
}

.topnav-links .nav-link.active {
    color: #fff;
    border-bottom-color: var(--hos-green);
}

.topnav-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    margin-left: auto;
}

.topnav-right a {
    color: #fff;
    text-decoration: underline;
    font-size: 0.85rem;
}

.theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #fff;
    font-size: 0.9rem;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.25rem 0.8rem 0.25rem 0.25rem;
    color: #fff;
    font-size: 0.85rem;
    min-width: 0;
}

.user-chip .user-name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topnav-right .signout {
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
}

.topnav-right .signout:hover {
    color: #fff;
}

.user-chip .avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hos-green);
    color: var(--hos-plum);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
}

.content-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3rem;
    width: 100%;
    box-sizing: border-box;
}

/* --- Typography --- */

h1 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    color: var(--color-muted);
    margin-bottom: 1.5rem;
}

/* --- Buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}

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

.btn-primary {
    background-color: var(--hos-plum);
    border-color: var(--hos-plum);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--hos-plum-dark);
}

.btn-secondary {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-surface-alt);
}

.btn-success {
    background-color: #1e7a3f;
    border-color: #1e7a3f;
    color: #fff;
}

.btn-success:hover:not(:disabled) {
    background-color: #175f31;
}

.btn-danger {
    background-color: #b02a2a;
    border-color: #b02a2a;
    color: #fff;
}

.btn-danger:hover:not(:disabled) {
    background-color: #8f2121;
}

.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}

.actions-bar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/* --- Status badges --- */

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-draft { background: var(--status-draft-bg); color: var(--status-draft-fg); }
.status-operationsreview { background: var(--status-operations-bg); color: var(--status-operations-fg); }
.status-economicreview { background: var(--status-economic-bg); color: var(--status-economic-fg); }
.status-approved { background: var(--status-approved-bg); color: var(--status-approved-fg); }
.status-rejectedbyoperations, .status-rejectedbyeconomic { background: var(--status-rejected-bg); color: var(--status-rejected-fg); }
.status-withdrawnbysales { background: var(--status-withdrawn-bg); color: var(--status-withdrawn-fg); }
.status-levererad { background: var(--status-levererad-bg); color: var(--status-levererad-fg); }

/* Orders.razor's "Typ" column — a neutral, dashed-border variant of .status-badge (rather than a
   solid color like the workflow-status pills above) since this marks a Projekttillägg's
   RELATIONSHIP to another order, not where it is in the approval workflow. Added 2026-09-30. */
.type-addon-badge { background: var(--color-surface-alt); color: var(--color-muted); border: 1px dashed var(--color-border); }

/* --- Cards / form sections --- */

.card-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.card-section h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--hos-plum-text);
}

.card-section h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

/* --- Forms --- */

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem 1.25rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.field.span-2 {
    grid-column: span 2;
}

.field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-label);
}

.hint {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field input[type="email"],
.field select,
.field textarea {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
    background: var(--color-surface-alt);
    color: var(--color-muted);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--hos-plum-text);
    box-shadow: 0 0 0 2px var(--hos-plum-tint);
}

/* Native date-picker wrapper (2026-09-23, revised same day after v1 rendered oversized): a
   SINGLE real ".date-native" <input type="date"> is kept fully visible and normal-sized (it's
   already covered by the ".field input[type=\"date\"]" rule above, so it looks exactly like every
   other field and its own calendar icon keeps working with no JS needed) — only its own digits
   are made invisible (color: transparent), and a plain ".date-overlay" <span> sits on top showing
   the hard dd/MM/yyyy format instead. v1 used a second, visually-hidden <input> shrunk to 1px to
   carry the real picker; that element was still matched by ".field input[type=\"date\"]" above
   ((0,2,1) specificity), which outranked its own override classes ((0,2,0)) for the "border" and
   "padding" it needed to zero out, leaving a full-sized invisible-but-still-laid-out control
   behind the scenes — the same specificity trap already documented below for ".checkbox-field".
   This version sidesteps that class of bug entirely by only ever styling ONE input, so any
   override here has to beat that rule anyway and is written three classes deep, (0,3,0), to do
   so cleanly. */
.date-field {
    position: relative;
    min-width: 0;
}

/* Grid items default to min-width: auto, which lets a native date input's intrinsic width push
   its column wider than the grid track (2026-09-23 fix for the date field overlapping the next
   column). */
.field-grid > .field {
    min-width: 0;
}

/* box-sizing: border-box keeps width: 100% INCLUDING padding + border; without it the input
   was 100% + ~1.3rem wide and spilled across the column gap into the next field. */
.field .date-field .date-native {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    color: transparent;
}

.field .date-field .date-native::-webkit-datetime-edit,
.field .date-field .date-native::-webkit-datetime-edit-fields-wrapper,
.field .date-field .date-native::-webkit-datetime-edit-text,
.field .date-field .date-native::-webkit-datetime-edit-day-field,
.field .date-field .date-native::-webkit-datetime-edit-month-field,
.field .date-field .date-native::-webkit-datetime-edit-year-field {
    color: transparent;
}

.date-field .date-overlay {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--color-text);
    pointer-events: none;
}

.date-field .date-native:disabled ~ .date-overlay {
    color: var(--color-muted);
}

/* Kund autocomplete (2026-09-29): a plain search box + suggestion list dropped in place of the
   old long <select> of every customer. ".customer-search-input" needs no rule of its own — it's
   still a plain ".field input[type=\"text\"]" — this block only positions the dropdown that
   floats below it. */
.field.customer-picker {
    position: relative;
}

/* The gray fill (var(--color-surface-alt), same tone used for disabled fields elsewhere) lives
   on the panel itself, not the individual rows (2026-09-29 revision) — that, plus a visible
   border and a real elevation shadow, is what reads as "a popup sitting on top of the form"
   rather than more text inside it. Rows stay transparent so the panel's fill shows through
   uninterrupted; a border-color (not --color-surface) divider separates them, and :hover lifts
   a row with the same plum tint used for focus elsewhere in this form. */
.customer-suggestions {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.customer-suggestion {
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}

.customer-suggestion:last-child {
    border-bottom: none;
}

.customer-suggestion:hover {
    background: var(--hos-plum-tint);
}

.customer-suggestion-empty {
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* .field .checkbox-field (two classes) intentionally outranks the plain ".field label" rule
   above (one class + one type = lower specificity), which is meant for the small caption
   label that sits ABOVE a text/number/date input, not for the checkbox/radio's own inline
   text — using that caption size here was why checkbox labels read as too small (2026-09-23). */
.field .checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    /* Lines the checkbox up with the input controls in sibling .field elements, which sit
       below a label row this element doesn't have — matches the label(0.82rem/1.2 line-height)
       + gap(0.3rem) height it's standing in for. */
    margin-top: 1.35rem;
    cursor: pointer;
}

.checkbox-field input[type="checkbox"],
.checkbox-field input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--hos-plum-text);
    cursor: pointer;
}

/* --- Tables --- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0.6rem;
}

.data-table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: var(--hos-plum-tint);
}

.data-table tr.clickable {
    cursor: pointer;
}

.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.data-table input[type="text"],
.data-table input[type="number"] {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    font-size: 0.85rem;
    width: 100%;
    background: transparent;
    color: var(--color-text);
}

.empty-state {
    color: var(--color-muted);
    padding: 1.5rem 0;
}

/* --- Filter tabs (order list) --- */

.filter-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-tab {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--color-text);
}

.filter-tab.active {
    background: var(--hos-plum);
    border-color: var(--hos-plum);
    color: #fff;
}

/* --- Summary tiles --- */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.summary-tile {
    background: var(--hos-plum-tint);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.summary-tile .label {
    font-size: 0.75rem;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.summary-tile .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hos-plum-text);
}

/* Projekttillägg statistics breakdown (2026-09-30): three ranked tables (säljare/kund/projekttyp)
   side by side, wider columns than .summary-grid's tiles since each holds a data table. */
.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.breakdown-column h3 {
    margin-top: 0;
}

/* --- Workflow / rejection notice --- */

.rejection-notice {
    background: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.validation-message {
    color: #b02a2a;
    font-size: 0.8rem;
}

/* --- Home: hero card --- */

.hero {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.1fr);
    gap: 1.5rem;
    align-items: stretch;
    margin-bottom: 2rem;
}

.hero-card {
    background: var(--hos-plum-tint);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.9rem;
}

.hero-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hos-plum-text);
}

.hero-card h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--hos-plum-text);
}

.hero-card p {
    color: var(--color-muted);
    font-size: 0.95rem;
    margin: 0;
    max-width: 46ch;
}

.hero-visual {
    border-radius: 16px;
    background: linear-gradient(135deg, var(--hos-plum) 0%, var(--hos-plum-dark) 100%);
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
}

.hero-visual .hero-visual-mark {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    background: var(--hos-green);
    color: var(--hos-plum);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 2rem;
}

/* --- Home: quick-action tiles --- */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.9rem;
    margin-bottom: 2rem;
}

.tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--hos-plum);
    color: #fff;
    border-radius: 10px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
}

.tile:hover {
    background: var(--hos-plum-dark);
}

.tile .tile-flag {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: var(--hos-green) transparent transparent transparent;
}

.tile .tile-label {
    position: relative;
    padding-left: 0.15rem;
}

/* --- Home: recent orders band --- */

.band {
    background: var(--hos-plum);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    color: #fff;
    margin-bottom: 2rem;
}

.band-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.band-header h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.band-header a {
    color: var(--hos-green);
    font-size: 0.85rem;
    text-decoration: none;
    font-weight: 600;
}

.band-header a:hover {
    text-decoration: underline;
}

.band-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.band-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    text-decoration: none;
    color: #fff;
}

.band-row:hover {
    background: rgba(255, 255, 255, 0.15);
}

.band-row .band-customer {
    font-weight: 600;
    font-size: 0.9rem;
}

.band-row .band-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
}

.band-empty {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

/* --- Home: Belastning per projektgrupp (IT workload traffic lights, 2026-10-02) ---
   Cards sit inside a .band, so they follow the same translucent-white-on-plum treatment as
   .band-row rather than introducing a new white/bordered card look. Three equal-width columns on
   desktop (repeat(3, 1fr), not auto-fit, so there are always exactly three — not a stale auto-fit
   count — however narrow the viewport gets above the breakpoint); stacked on mobile. */

.workload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 720px) {
    .workload-grid {
        grid-template-columns: 1fr;
    }
}

.workload-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    color: #fff;
}

.workload-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.workload-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.workload-dot-green { background: var(--workload-green-fg); }
.workload-dot-yellow { background: var(--workload-yellow-fg); }
.workload-dot-red { background: var(--workload-red-fg); }
.workload-dot-grey { background: var(--workload-grey-fg); }

.workload-name {
    font-weight: 600;
    font-size: 0.92rem;
}

.workload-label {
    align-self: flex-start;
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.workload-label-green { background: var(--workload-green-bg); color: var(--workload-green-fg); }
.workload-label-yellow { background: var(--workload-yellow-bg); color: var(--workload-yellow-fg); }
.workload-label-red { background: var(--workload-red-bg); color: var(--workload-red-fg); }
.workload-label-grey { background: var(--workload-grey-bg); color: var(--workload-grey-fg); }

.workload-stale-banner {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #ffcf6b;
}

.workload-summary {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    /* Preserves the line breaks in the Asana status text verbatim, both in the truncated
       preview and the expanded "Visa detaljer" view — no manual <br/> handling needed. */
    white-space: pre-line;
}

.workload-summary-empty {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
}

.workload-toggle {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hos-green);
    text-decoration: underline;
    cursor: pointer;
}

.workload-toggle:hover {
    color: #fff;
}

.workload-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

.workload-asana-link {
    align-self: flex-start;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--hos-green);
    text-decoration: none;
}

.workload-asana-link:hover {
    text-decoration: underline;
}

/* =====================================================================================
   Business areas: IT/FM picker, FM portal, statistics (2026-10-01)
   Everything below is new for the FM module; nothing above was changed.
   ===================================================================================== */

:root {
    /* Chart series (dataviz reference palette, slots 1-2, validated light/dark pair). */
    --series-1: #2a78d6;
    --series-2: #eb6834;
    --kpi-good: #1e6b3a;
    --kpi-bad: #8c1d1d;
}

:root[data-theme="dark"] {
    --series-1: #3987e5;
    --series-2: #d95926;
    --kpi-good: #7fd69b;
    --kpi-bad: #f19a9a;
}

/* --- IT/FM picker (Landing.razor) --- */

.area-picker-intro {
    margin-bottom: 1.25rem;
}

.area-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.area-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--hos-plum);
    color: #fff;
    border-radius: 16px;
    padding: 1.75rem 1.75rem 1.5rem;
    min-height: 220px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.12s ease, background 0.12s ease;
}

.area-card:hover {
    background: var(--hos-plum-dark);
    transform: translateY(-2px);
}

.area-card .tile-flag {
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 28px 28px 0 0;
    border-color: var(--hos-green) transparent transparent transparent;
}

.area-card-code {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--hos-green);
}

.area-card-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.area-card-text {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
    flex: 1;
}

.area-card-cta {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--hos-green);
}

/* --- Area indicator in the top nav --- */

.area-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.15rem 0.5rem 0.15rem 0.15rem;
    background: rgba(255, 255, 255, 0.08);
}

.area-indicator:hover {
    background: rgba(255, 255, 255, 0.18);
}

.area-pill {
    background: var(--hos-green);
    color: var(--hos-plum);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

.area-switch {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    line-height: 1;
}

.area-indicator:hover .area-switch {
    color: #fff;
}

/* Narrower windows: drop the lowest-priority text first so the bar stays on one row. */
@media (max-width: 1180px) {
    .brand-text {
        display: none;
    }
}

@media (max-width: 1000px) {
    .nav-help-text {
        display: none;
    }

    .user-chip .user-name {
        display: none;
    }

    .user-chip {
        padding-right: 0.25rem;
    }
}

@media (max-width: 720px) {
    .topnav-inner {
        gap: 0.9rem;
        padding: 0.6rem 1rem;
    }

    .topnav-links {
        gap: 1rem;
    }
}

/* FM gets a thin green rule under the bar so the two areas are distinguishable at a glance. */
.topnav-area-fm {
    box-shadow: inset 0 -3px 0 var(--hos-green);
}

.nav-cta {
    color: var(--hos-plum);
    background: var(--hos-green);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

/* --- Shared form/filter bits used by the area pages --- */

.search-input,
.filter-select,
.filter-date {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
}

.search-input {
    min-width: 240px;
}

.filter-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.inline-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-label);
}

.notice {
    background: var(--status-approved-bg);
    color: var(--status-approved-fg);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.notice.notice-error {
    background: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
}

.card-section.inset {
    background: var(--color-surface-alt);
}

.section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

/* --- Order detail: header, free-text rows --- */

.order-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.order-lines td {
    vertical-align: middle;
}

.row-move {
    white-space: nowrap;
}

.order-lines .num input[type="number"] {
    text-align: right;
}

.icon-btn {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 4px;
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
}

.icon-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.icon-btn-danger:hover {
    background: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
}

.order-total-row td {
    font-weight: 700;
    border-top: 2px solid var(--color-border);
    border-bottom: none;
    color: var(--hos-plum-text);
}

/* --- KPI cards (Shared/KpiCard.razor) --- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.kpi-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.kpi-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--hos-plum-text);
    font-variant-numeric: tabular-nums;
}

.kpi-change {
    font-size: 0.82rem;
    font-weight: 600;
}

.kpi-good { color: var(--kpi-good); }
.kpi-bad { color: var(--kpi-bad); }
.kpi-flat { color: var(--color-muted); }

.kpi-compare {
    font-weight: 400;
    color: var(--color-muted);
    font-size: 0.78rem;
    margin-left: 0.2rem;
}

/* --- Statistics layout --- */

.stats-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.period-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.period-label {
    font-weight: 700;
    min-width: 9rem;
    text-align: center;
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1rem;
}

.chart-grid > .card-section {
    margin-bottom: 0;
}

.chart-grid + .chart-grid {
    margin-top: 1rem;
}

.share-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
}

.share-bar {
    flex: 1;
    height: 8px;
    background: var(--color-surface-alt);
    border-radius: 4px;
    overflow: hidden;
}

.share-bar span {
    display: block;
    height: 100%;
    background: var(--series-1);
    border-radius: 0 4px 4px 0;
}

.share-text {
    font-size: 0.8rem;
    color: var(--color-muted);
    min-width: 2.5rem;
    text-align: right;
}

.change-tag {
    font-size: 0.8rem;
    font-weight: 600;
}

.change-won { color: var(--kpi-good); }
.change-lost { color: var(--kpi-bad); }

.definitions {
    margin-top: 1.5rem;
    font-size: 0.88rem;
    color: var(--color-label);
}

.definitions summary {
    cursor: pointer;
    font-weight: 600;
}

/* --- Column chart (Shared/ColumnChart.razor) --- */

.viz-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.viz-header h3 {
    margin: 0 0 0.5rem;
}

.viz-toggle {
    border: none;
    background: none;
    color: var(--color-muted);
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
}

.viz-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--color-label);
    margin-bottom: 0.25rem;
}

.viz-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.viz-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.viz-swatch-1 { background: var(--series-1); }
.viz-swatch-2 { background: var(--series-2); }

.viz-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.viz-grid {
    stroke: var(--color-border-soft);
    stroke-width: 1;
}

.viz-baseline {
    stroke: var(--color-border);
    stroke-width: 1;
}

.viz-axis-label {
    fill: var(--color-muted);
    font-size: 11px;
}

.viz-axis-active {
    fill: var(--color-text);
    font-weight: 700;
}

.viz-value-label {
    fill: var(--color-text);
    font-size: 11px;
    font-weight: 700;
}

.viz-bar-1 { fill: var(--series-1); }
.viz-bar-2 { fill: var(--series-2); }

.viz-hit {
    fill: transparent;
}

.viz-band:hover .viz-hit {
    fill: var(--hos-plum-tint);
}

.viz-band path {
    opacity: 0.85;
}

.viz-band-active path,
.viz-band:hover path {
    opacity: 1;
}

@media (max-width: 720px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }

    .search-input {
        min-width: 0;
        width: 100%;
    }

}

/* =====================================================================================
   User-testing phase (2026-10-01): TEST banner, feedback button, Hjälp & test pages
   ===================================================================================== */

:root {
    --test-bg: #ffd84d;
    --test-fg: #3b2c00;
    --report-bg: #c2185b;
    --report-bg-hover: #a0134a;
}

:root[data-theme="dark"] {
    --test-bg: #e0b000;
    --test-fg: #1a1300;
}

.test-banner {
    background: var(--test-bg);
    color: var(--test-fg);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
}

.test-banner strong {
    letter-spacing: 0.08em;
    background: var(--test-fg);
    color: var(--test-bg);
    border-radius: 4px;
    padding: 0.05rem 0.5rem;
}

.test-banner a {
    color: var(--test-fg);
    font-weight: 700;
}

.test-badge {
    display: inline-block;
    background: var(--test-bg);
    color: var(--test-fg);
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    border-radius: 4px;
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.6rem;
}

.fab-feedback {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 50;
    background: var(--report-bg);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 999px;
    padding: 0.65rem 1.1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.fab-feedback:hover {
    background: var(--report-bg-hover);
}

.nav-help {
    color: var(--hos-plum) !important;
    background: var(--hos-green);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

.btn-report {
    background: var(--report-bg);
    color: #fff;
    border-color: var(--report-bg);
    text-decoration: none;
}

.btn-report:hover:not(:disabled) {
    background: var(--report-bg-hover);
}

.btn-lg {
    font-size: 1rem;
    padding: 0.65rem 1.25rem;
}

.help-callout {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--hos-plum-tint);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
    color: var(--color-text);
    text-decoration: none;
}

.help-callout-cta {
    margin-left: auto;
    font-weight: 700;
    color: var(--hos-plum-text);
    white-space: nowrap;
}

/* --- Hjälp & test page --- */

.help-hero {
    background: var(--hos-plum-tint);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.25rem;
}

.help-hero h1 {
    margin: 0 0 0.6rem;
    color: var(--hos-plum-text);
}

.help-hero p {
    margin: 0 0 0.5rem;
    max-width: 75ch;
    line-height: 1.5;
}

.help-path {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.help-path-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
    background: var(--hos-plum);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    cursor: pointer;
    font: inherit;
}

.help-path-card:hover {
    background: var(--hos-plum-dark);
}

.help-path-icon {
    font-size: 1.4rem;
}

.help-path-title {
    font-weight: 700;
}

.help-path-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
}

.help-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.help-flow-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
}

.help-flow-arrow {
    color: var(--color-muted);
}

.help-section h2 {
    margin-top: 0;
}

.help-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.help-progress-text {
    font-weight: 700;
    color: var(--hos-plum-text);
}

.help-progress {
    height: 10px;
    background: var(--color-surface-alt);
    border-radius: 999px;
    overflow: hidden;
}

.help-progress span {
    display: block;
    height: 100%;
    background: var(--hos-green-dark);
    border-radius: 999px;
    transition: width 0.2s ease;
}

:root[data-theme="dark"] .help-progress span {
    background: var(--hos-green);
}

.help-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.6rem;
}

.help-check {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--color-surface);
}

.help-check.done {
    background: var(--status-approved-bg);
    border-color: transparent;
}

.help-check label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    cursor: pointer;
}

.help-check input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.1rem;
    accent-color: var(--hos-green-dark);
    flex-shrink: 0;
}

.help-check label > span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.help-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--hos-plum-text);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    align-self: flex-start;
}

.help-details {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 12px;
    padding: 0 1.25rem;
    margin-bottom: 0.9rem;
}

.help-details[open] {
    padding-bottom: 1.25rem;
}

.help-details > summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hos-plum-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.help-details > summary::-webkit-details-marker {
    display: none;
}

.help-details > summary::after {
    content: "+";
    font-size: 1.4rem;
    color: var(--color-muted);
}

.help-details[open] > summary::after {
    content: "−";
}

.help-details p {
    line-height: 1.5;
    max-width: 80ch;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.help-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--color-surface-alt);
    border-radius: 10px;
    padding: 0.9rem 1rem;
    color: var(--color-text);
}

.help-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.help-card-link {
    text-decoration: none;
}

.help-card-link:hover {
    background: var(--hos-plum-tint);
}

.help-card-icon {
    font-size: 1.4rem;
}

.help-steps {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.help-step {
    display: flex;
    gap: 1rem;
    background: var(--color-surface-alt);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.help-step-num {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--hos-plum);
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-step-body {
    flex: 1;
    min-width: 0;
}

.help-step-body h3 {
    margin: 0.2rem 0 0.4rem;
}

.help-step-body p {
    margin: 0 0 0.5rem;
}

.help-step-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.help-step-cols ul,
.help-numbered {
    margin: 0.3rem 0 0;
    padding-left: 1.2rem;
    line-height: 1.5;
}

.help-col-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    margin-right: 0.35rem;
}

.help-col-check {
    color: var(--kpi-good);
}

ul.help-checks {
    list-style: none;
    padding-left: 0;
}

ul.help-checks li {
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

ul.help-checks li::before {
    content: "☐";
    position: absolute;
    left: 0;
    color: var(--color-muted);
}

.help-checks-cols {
    columns: 2 240px;
}

.help-note {
    background: var(--hos-plum-tint);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.6rem !important;
    font-size: 0.9rem;
}

.help-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.help-part {
    background: var(--color-surface-alt);
    border-radius: 10px;
    padding: 0 1rem;
}

.help-part > summary {
    cursor: pointer;
    padding: 0.7rem 0;
    font-weight: 700;
}

.help-wew {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 0.4rem 1rem;
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
    line-height: 1.45;
}

.help-wew dt {
    font-weight: 700;
    color: var(--hos-plum-text);
}

.help-wew dd {
    margin: 0;
}

.help-integrations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.9rem;
}

.help-integration {
    background: var(--color-surface-alt);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}

.help-integration h3 {
    margin: 0.75rem 0 0.4rem;
}

.help-integration p {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}

.help-int-flow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.help-int-node {
    background: var(--hos-plum);
    color: #fff;
    border-radius: 8px;
    padding: 0.35rem 0.75rem;
    font-weight: 700;
    font-size: 0.85rem;
}

.help-int-target {
    background: var(--hos-green);
    color: var(--hos-plum);
}

.help-int-arrow {
    font-size: 1.2rem;
    color: var(--color-muted);
}

.help-report {
    background: var(--hos-plum-tint);
}

.help-contact-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--hos-plum-tint);
    border-radius: 10px;
    padding: 0.8rem 1rem;
}

.help-footer {
    text-align: center;
    margin-top: 1.5rem;
}

/* --- Rapportera --- */

.feedback-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem;
}

.feedback-cat {
    text-align: left;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: 10px;
    padding: 0.65rem 0.8rem;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.feedback-cat.active {
    border-color: var(--hos-plum);
    background: var(--hos-plum);
    color: #fff;
}

.feedback-tech {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.3rem 1rem;
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
}

.feedback-tech dt {
    color: var(--color-muted);
}

.feedback-tech dd {
    margin: 0;
    white-space: pre-wrap;
}

.help-thanks h1 {
    margin-top: 0;
}

/* --- Testöversikt --- */

.feedback-status-tile {
    border: 2px solid transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.feedback-status-tile.active {
    border-color: var(--hos-plum-text);
}

.data-table tr.row-open {
    background: var(--hos-plum-tint);
}

.feedback-detail-row td {
    background: var(--color-surface-alt);
}

.feedback-detail {
    padding: 0.5rem 0.25rem;
}

@media (max-width: 720px) {
    .help-wew,
    .feedback-tech {
        grid-template-columns: 1fr;
    }

    .fab-feedback {
        right: 0.75rem;
        bottom: 0.75rem;
        padding: 0.55rem 0.9rem;
        font-size: 0.82rem;
    }

    .help-hero {
        padding: 1.25rem;
    }

    .help-callout {
        flex-wrap: wrap;
    }
}