.module-btn:has(.feedback-unread-count) { position: relative; }
.feedback-unread-count {
    position: absolute; top: 1px; right: 1px; min-width: 17px;
    padding: 0 4px; border-radius: 10px; background: #1864ab; color: #fff;
    font-size: 10px; line-height: 17px; font-weight: 700; text-align: center;
    pointer-events: none;
}
.feedback-row-unread { font-weight: 600; background: #f0f7ff; }
.feedback-status, .feedback-priority {
    white-space: nowrap;
    min-width: max-content;
    flex-shrink: 0;
}

/* The feedback dialog can be moved on desktop when the customer needs to see
   the page behind it. The JS keeps the content inside the viewport and resets
   it when the sidebar Feedback button is pressed again. */
.feedback-modal-content {
    /* Mantine sizes the dialog with flex-basis, which beats width — so the
       resize handle could only make it taller. With the basis released, the
       handle resizes both ways. */
    flex: 0 0 auto;
    min-width: min(32rem, calc(100vw - 1.5rem));
    width: min(72rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    min-height: 20rem;
    max-height: calc(100vh - 1.5rem);
    resize: both;
    overflow: hidden;
    /* A column, so the body below the header can shrink and scroll. Without
       it the dialog grew with every message past the bottom of the screen —
       overflow: hidden (needed for the resize handle) had switched off
       Mantine's own scrolling, and nothing replaced it. */
    display: flex;
    flex-direction: column;
}
.feedback-modal-content .mantine-Modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}
.feedback-reports-scroll {
    width: 100%;
    max-height: 55vh;
    overflow: auto;
    overscroll-behavior: contain;
}
/* Fixed layout: the columns get the widths in the <colgroup> and the
   description takes what is left, cut short with an ellipsis (the full text is
   its tooltip). Below its minimum width the table scrolls sideways instead. */
.feedback-table {
    width: 100%;
    min-width: 50rem;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.feedback-table th {
    text-align: left;
    padding: 6px;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
.feedback-table td {
    padding: 6px;
    vertical-align: middle;
    border-bottom: 1px solid #edf0f2;
}
.feedback-table th, .feedback-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feedback-table td.feedback-wrap { white-space: normal; }
.feedback-case-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.feedback-modal-header {
    cursor: move;
    user-select: none;
}
@media (max-width: 48rem), (pointer: coarse) {
    .feedback-modal-content {
        min-width: 0;
        width: auto;
        max-width: calc(100vw - 1.5rem);
        resize: none;
    }
    .feedback-modal-header {
        cursor: default;
    }
}

/* ── Superadmin workspace ─────────────────────────────────────────────────
   The inbox is a tool used all day, so it takes the whole screen: the list
   on the left, the chosen case on the right, each scrolling on its own. A
   position left over from dragging the dialog must not follow it here. */
/* Inside Veloio, not over it: the inbox is the Feedback module's page. It
   fills the content area under the top bar (3rem) and the second-level tab
   bar (2.5rem, its queues), beside the sidebar (3.25rem), all of which stay
   visible and usable. Mantine's full-viewport wrapper lets clicks through. */
.feedback-modal-content:has(.feedback-workspace.admin) {
    position: fixed !important;
    top: 5.5rem !important;
    left: 3.25rem !important;
    right: 0;
    bottom: 0;
    transform: none !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: none;
    border-radius: 0;
    resize: none;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    background: #fff;           /* white, like the other features' pages */
    box-shadow: none;
}
.mantine-Modal-inner:has(.feedback-workspace.admin) { pointer-events: none; }
.feedback-modal-content:has(.feedback-workspace.admin) .mantine-Modal-header { display: none; }
/* The same edge as the other features' panels (layout.py _SPLIT_PAD). */
.feedback-modal-content:has(.feedback-workspace.admin) .mantine-Modal-body { padding: 0.3rem; background: transparent; }

.feedback-modal-content:has(.feedback-workspace.admin) .mantine-Modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.feedback-workspace.admin {
    display: grid;
    /* The handle keeps 0.3rem to each card: the same space the cards keep to
       the page's edges. */
    grid-template-columns: minmax(0, 1.7fr) calc(14px + 0.6rem) minmax(24rem, 1fr);
    gap: 0;
    height: 100%;
    min-height: 0;
}
.feedback-workspace.admin > #feedback-reports {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.feedback-workspace.admin > #feedback-reports,
.feedback-workspace.admin > #feedback-detail,
.feedback-workspace.admin > .feedback-detail-empty {
    min-height: 0;
    overflow: auto;
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid #dbe5ec;
    border-radius: 10px;
}
.feedback-workspace.admin { position: relative; padding-top: 0.25rem; }
.feedback-workspace.admin .feedback-reports-scroll {
    flex: 1 1 auto;
    max-height: none;
}
/* Filters on one line (wrapping when narrow), not five stacked rows. */
.feedback-workspace.admin #feedback-admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: end;
    margin-bottom: 0.75rem;
}
.feedback-workspace.admin #feedback-admin-filters > * {
    flex: 1 1 10rem;
    margin-bottom: 0 !important;
}
.feedback-workspace.admin #feedback-admin-filters > .mantine-Group-root {
    flex: 2 1 20rem;
}
/* The queue names carry their counts ("Kræver behandling (9)"). */
.feedback-workspace.admin #feedback-admin-filters > :first-child {
    flex: 1 1 14rem;
}
.feedback-table.admin { min-width: 62rem; }
.feedback-workspace.admin #feedback-admin-filters .mantine-Select-root {
    margin-bottom: 0 !important;
}
.feedback-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #868e96;
}
.feedback-row-selected {
    background: #e7f0fb;
    box-shadow: inset 3px 0 0 #1864ab;
}

/* ── The customer's way in ────────────────────────────────────────────────
   The welcome page's voice and colours (app.css .welcome-*): navy headline,
   teal eyebrow, soft teal wash, so feedback reads as part of Veloio rather
   than a form bolted onto it. Two large choices instead of two buttons, each
   saying in plain words what belongs there. */
.feedback-chooser {
    position: relative;
    padding: 1.75rem 2rem 1.4rem;
    border-radius: 10px;
    color: #102d4f;
    background:
        radial-gradient(circle at 92% 0%, rgba(32, 200, 168, 0.14), transparent 22rem),
        linear-gradient(145deg, #f7fafc 0%, #edf4f7 60%, #f5f8fa 100%);
}
.feedback-hero { max-width: 46rem; }
.feedback-hero-logo {
    display: block;
    height: 2.1rem;
    width: auto;
    margin-bottom: 1.75rem;
}
.feedback-eyebrow {
    color: #20a98f;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}
.feedback-headline {
    margin: 0;
    color: #08254a;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.feedback-lead {
    color: #5b7087;
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0.75rem 0 1.4rem;
}
.feedback-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.9rem;
}
.feedback-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    text-align: left;
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1px solid #dbe5ec;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(8, 37, 74, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.feedback-choice:hover {
    border-color: #20a98f;
    box-shadow: 0 0.5rem 1.2rem rgba(8, 37, 74, 0.08);
    transform: translateY(-1px);
}
.feedback-choice:focus-visible {
    outline: 2px solid #20a98f;
    outline-offset: 2px;
}
.feedback-choice-mark {
    flex: 0 0 auto;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
}
.feedback-choice.problem .feedback-choice-mark { background: #063545; }
.feedback-choice.need .feedback-choice-mark {
    background: #20a98f;
    box-shadow: 0 0.35rem 0.9rem rgba(32, 169, 143, 0.22);
}
.feedback-choice-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.feedback-choice-text strong {
    color: #08254a;
    font-size: 1rem;
}
.feedback-choice-text span {
    color: #5b7087;
    font-size: 0.85rem;
    line-height: 1.45;
}
.feedback-promise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1.1rem;
    color: #5b7087;
    font-size: 0.82rem;
}
.feedback-promise > span { flex: 1 1 18rem; }

/* On the chooser the teal panel IS the dialog: the header bar goes, and a
   ~4 mm white frame is all that is left around the panel. Keyed on the
   chooser being shown (the surface callback hides it with an inline
   display: none), not on a class: a class set through Mantine's classNames
   while the dialog was open did not reliably reach the DOM, so the header
   came and went one step late. */
.feedback-modal-content:has(#feedback-chooser:not([style*="none"])) .mantine-Modal-header,
.feedback-modal-content:has(#feedback-form:not([style*="none"])) .mantine-Modal-header,
.feedback-modal-content:has(.feedback-workspace:not(.admin) > .feedback-panel:not([style*="none"])) .mantine-Modal-header { display: none; }
.feedback-modal-content:has(#feedback-chooser:not([style*="none"])) .mantine-Modal-body,
.feedback-modal-content:has(#feedback-form:not([style*="none"])) .mantine-Modal-body,
.feedback-modal-content:has(.feedback-workspace:not(.admin) > .feedback-panel:not([style*="none"])) .mantine-Modal-body { padding: 15px; }
/* The form in the panel: the headline sits closer to its fields, and the
   fields stay white on the teal. */
.feedback-form-panel .feedback-lead { max-width: 52rem; margin-bottom: 1.25rem; }
.feedback-form-panel .mantine-InputWrapper-label { color: #08254a; font-weight: 600; }
.feedback-chooser-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #5b7087;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.feedback-chooser-close:hover { background: rgba(8, 37, 74, 0.07); color: #08254a; }
.feedback-chooser-close:focus-visible { outline: 2px solid #20a98f; outline-offset: 1px; }

/* The customer's list and case: the chooser's panel. In the superadmin
   workspace the same elements keep the workspace's own plain layout. */
.feedback-workspace:not(.admin) > .feedback-panel {
    position: relative;
    padding: 1.75rem 2rem 1.4rem;
    border-radius: 10px;
    color: #102d4f;
    background:
        radial-gradient(circle at 92% 0%, rgba(32, 200, 168, 0.14), transparent 22rem),
        linear-gradient(145deg, #f7fafc 0%, #edf4f7 60%, #f5f8fa 100%);
}
.feedback-workspace.admin .feedback-customer-only { display: none; }
.feedback-workspace.admin #feedback-reports-heading {
    font-size: 1.35rem;
}
.feedback-workspace:not(.admin) .feedback-reports-scroll {
    background: #fff;
    border: 1px solid #dbe5ec;
    border-radius: 10px;
}
.feedback-workspace:not(.admin) .feedback-table th { background: #f7fafc; }
.feedback-workspace:not(.admin) #feedback-detail .mantine-Paper-root { border-color: #dbe5ec; }

/* The list | case split, dragged like the other features' (feedback_modal.js).
   Only in the superadmin workspace. */
.feedback-split-handle { display: none; }
/* resize.css's handle, so the split looks and behaves like Vejbeskaffenhed's. */
.feedback-workspace.admin > .feedback-split-handle {
    display: block;
    width: 14px;
    margin: 0 0.3rem;
    cursor: col-resize;
    border-radius: 4px;
    background: #dee2e6;
    position: relative;
    transition: background 0.15s;
}
.feedback-workspace.admin > .feedback-split-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 40px;
    border-left: 2px solid #adb5bd;
    border-right: 2px solid #adb5bd;
    border-radius: 2px;
}
.feedback-workspace.admin > .feedback-split-handle:hover,
.feedback-workspace.admin > .feedback-split-handle.dragging { background: #adb5bd; }
.feedback-workspace.admin > .feedback-split-handle.dragging::after { border-color: #495057; }
.feedback-subtab-plus { font-weight: 700; margin-right: 0.3rem; }
.feedback-list-capped { padding: 0.5rem 0.25rem; color: #5b7087; font-size: 0.8rem; }