@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url('/fonts/material-symbols-outlined.woff2') format('woff2');
    font-display: block;
}

html, body {
    font-family: var(--font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif);
    overflow-x: hidden;
    background-color: var(--app-bg, #F4F2F1);
    min-height: 100%;
}

/* Reserve the scrollbar's gutter only on desktop-width viewports, where a
   classic (space-taking) scrollbar is actually likely. On phones/emulated
   mobile viewports this permanently reserved gutter shows up as an unwanted
   sliver of empty margin on the right that never goes away. */
@media (min-width: 992px) {
    html, body {
        scrollbar-gutter: stable;
    }

    /* The login page is a fixed 100vh box that never scrolls and never opens
       dialogs, so it doesn't need the reserved gutter that the rest of the app
       uses to avoid layout shift. Reserving it here just leaves an empty sliver
       down the right edge that the login gradient doesn't paint into (the
       gutter is part of the viewport canvas, which takes its color from html's
       background - not body's - so coloring body alone can't fix it either). */
    html:has(.login-page), body:has(.login-page) {
        scrollbar-gutter: auto;
    }
}

/* Radzen dialogs add .no-scroll + a hardcoded 15px end-padding to body to hide
   the scrollbar while open, but the real scrollbar width rarely matches 15px
   exactly, causing the page to nudge sideways when a dialog opens/closes.
   scrollbar-gutter: stable above already reserves that space permanently, so
   the extra compensation padding is dropped to avoid double-counting it. */
.no-scroll {
    padding-inline-end: 0 !important;
}

/* PWA (iOS): marginaler mot safe area när appen körs helskärm */
@supports (padding: env(safe-area-inset-bottom)) {
    .page {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--brand);
}

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

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        filter: brightness(0.94);
        background-color: var(--brand);
        border-color: var(--brand);
    }

    /* Keep the theme colour while disabled/loading. Without this, Bootstrap's
       default disabled primary (#0d6efd blue) overrides --brand. Opacity still
       comes from Bootstrap's --bs-btn-disabled-opacity, so it reads as disabled. */
    .btn-primary:disabled, .btn-primary.disabled {
        background-color: var(--brand);
        border-color: var(--brand);
        color: #fff;
    }

    /* Match the button's own color instead of the browser's default blue focus ring */
    .btn-primary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem var(--brand-shadow);
    }

.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}

    .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
        color: #fff;
        background-color: var(--brand);
        border-color: var(--brand);
    }

/* Danger buttons follow the palette's --danger instead of Bootstrap's bright red (#dc3545). */
.btn-danger {
    color: #fff;
    background-color: var(--danger);
    border-color: var(--danger);
}

    .btn-danger:hover, .btn-danger:focus, .btn-danger:active,
    .btn-danger:disabled, .btn-danger.disabled {
        color: #fff;
        background-color: var(--danger);
        border-color: var(--danger);
    }

    .btn-danger:hover, .btn-danger:focus, .btn-danger:active {
        filter: brightness(0.94);
    }

    /* Match the button's own color instead of the browser's default blue focus ring */
    .btn-danger:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(178, 59, 46, 0.4);
    }

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}

    .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
        color: #fff;
        background-color: var(--danger);
        border-color: var(--danger);
    }

/* Neutral "secondary" buttons use the palette surfaces instead of Bootstrap grey (#6c757d). */
.btn-secondary {
    color: var(--ink);
    background-color: var(--inset);
    border-color: var(--border);
}

    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
    .btn-secondary:disabled, .btn-secondary.disabled {
        color: var(--ink);
        background-color: var(--border);
        border-color: var(--border);
    }

    /* Match the button's own color instead of the browser's default blue focus ring */
    .btn-secondary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
    }

/* Error/danger text and borders follow the palette's --danger too, so form errors,
   alerts and icons don't show Bootstrap's stock red (#dc3545) alongside our --danger buttons. */
.text-danger {
    color: var(--danger) !important;
}

.border-danger {
    border-color: var(--danger) !important;
}

/* Tune Bootstrap's stock alert-warning (used only for the "responsibility" banner
   in History/MeetingStateManager) down to the app's compact type scale. The
   default 1rem text + 1rem padding is oversized for a mobile-width card and
   wraps into a loose, awkward-looking block. */
.alert-warning {
    padding: 0.75rem 0.9rem;
    font-size: 13.5px;
    line-height: 1.5;
}

    .alert-warning i {
        font-size: 1rem;
        /* Match the text's actual (absolute) line-box height, not a relative
           multiplier — the icon's larger font-size means the same "1.5" ratio
           produces a taller box than the 13.5px text gets, pushing the icon up.
           13.5px * 1.5 = 20.25px is the text's real line height. */
        line-height: 20.25px;
    }

@media (max-width: 575.98px) {
    .alert-warning {
        padding: 0.65rem 0.8rem;
        font-size: 13px;
    }

        .alert-warning i {
            line-height: 19.5px; /* 13px * 1.5, keeps the icon matched to the smaller mobile text */
        }
}

/* :focus-visible (not :focus) so the ring shows for keyboard navigation only -
   a mouse click on a button shouldn't flash a blue ring around it. */
.btn:focus-visible, .btn:active:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.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."
    }

.loading-progress-container {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress {
    display: block;
    width: 100%;
    height: 100%;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--brand);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    display: grid;
    place-items: center;
    font-weight: bold;
    inset: 0;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.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;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
}

.login-body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(to bottom, var(--side-bg) 11rem, var(--app-bg) 11rem);
}

/* The reserved scrollbar-gutter strip (see html, body rule below) sits outside
   .login-body's own box, so it must be painted to match here too - otherwise it
   shows body's flat background instead of the login gradient, looking like an
   uncovered gap along the right edge. */
body:has(.login-page) {
    background: linear-gradient(to bottom, var(--side-bg) 11rem, var(--app-bg) 11rem);
}

#body-wrapper {
    background-color: var(--card);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/*    height: 90vh;*/
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rz-html-editor {
    overflow: auto;
    height: 100%;
    width: 100%;
}

.rz-html-editor-content {
    max-width: none;
    margin-bottom: 0.5rem;
}

.rz-html-editor-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: white;
    margin-inline: 1px;
    margin-top: 1px;
}

/* Selected item (rz-state-highlight) */
.rz-dropdown-item.rz-state-highlight,
.rz-dropdown-item.rz-state-highlight a {
    background-color: #d1d5db !important; /* light gray (Tailwind's gray-300) */
    color: #111827 !important; /* almost-black for readability */
}

/* Hovered item */
.rz-dropdown-item:hover,
.rz-dropdown-item:hover a {
    background-color: #e5e7eb !important; /* even lighter gray (gray-200) */
    color: #111827 !important;
}

/* Base styles */
.rz-security-code-wrapper {
    display: grid !important;
    gap: 0.5rem;
    justify-content: center;
    margin: 0 auto;
}

.rz-security-code-input {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
    text-align: center;
    text-transform: uppercase;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

/* ---------- RadzenDropDown tweaks ---------- */

.rz-dropdown-panel {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.rz-dropdown-filter {
    position: sticky;           /* keep search box pinned */
    top: 0;
    z-index: 1;
    background: #ffff;
    margin: 0;                  /* remove Radzen’s default margin */
    border-bottom: 1px solid #e5e5e5;
}

.rz-dropdown-items-wrapper {
    overflow-y: auto !important;
    max-height: 160px !important;
}

@media (max-width: 575.98px) {
    .rz-dropdown {
        border-top-left-radius: 4px !important;
        border-bottom-left-radius: 4px !important;
    }
}
 

@media (min-width: 769px) {
    .rz-security-code-wrapper {
        grid-template-columns: repeat(12, auto);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .rz-security-code-wrapper {
        grid-template-columns: repeat(6, auto);
        row-gap: 1rem;
    }
}

@media (max-width: 480px) {
    .rz-security-code-wrapper {
        grid-template-columns: repeat(4, auto);
        row-gap: 1rem;
    }
}

/* Radzen dialog + overlay must sit above mobile nav (z-index: 1040) */
.rz-dialog-wrapper {
    z-index: 1060 !important;
}

.rz-overlay {
    z-index: 1055 !important;
}

/* Rensningsdialog: blå OK-knapp (Radzen default-tema har orange som --rz-primary) */
.rz-dialog.alert-primary-ok .rz-dialog-alert-buttons .rz-button.rz-primary {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

/* ---------- Radzen theming hooks so dialogs/editor follow the active palette ---------- */
.rz-dialog {
    background-color: var(--card);
    color: var(--ink);
    font-family: var(--font-body);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-hover);
}

.rz-dialog-titlebar {
    background-color: var(--card);
    color: var(--ink);
    border-bottom: 1px solid var(--border);
}

.rz-dialog-title {
    font-family: var(--font-head);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.rz-dialog-content {
    font-family: var(--font-body);
    color: var(--ink);
}

.rz-html-editor-content {
    background: var(--card);
    color: var(--ink);
}

/* Meeting summary card: when the transcript panel isn't shown, narrow the
   whole card to a comfortable reading width instead of just the text — so
   the header, warning banner, buttons and signatures shrink along with it
   and there's no gap between them and the narrower text. Side-by-side
   transcript mode is untouched (the .editor-col:only-child condition below
   only matches when there's no transcript sibling). */
.card:has(.editor-transcript-row > .editor-col:only-child) {
    max-width: 900px;
}

/* On the meeting page's summary view the summary sits in a flex-grow wrapper next to the
   compact participant list. Mirror the card's own width logic on that wrapper so it hugs the
   900px card while the transcript is closed (keeping the participant list stuck right next to
   it, pair centered), and drops the cap when the transcript opens so the whole summary grows.
   This lives in the global sheet on purpose: a Blazor-scoped rule can't reach the transcript
   markup, which belongs to a different component. Both classes are needed in the selector:
   the scoped bundle's .meeting-wrapper[b-…] { max-width: none } loads after this sheet and
   ties on specificity with a single class, which would silently disable the cap. */
.meeting-wrapper.meeting-wrapper--summary:not(:has(.transcript-side-panel)) {
    max-width: 900px;
}

/* Transcript open: let the pair grow, but only up to the same width the history page's
   summary card uses (History.razor.css caps its .card at 1100px) so both views feel alike.
   The cap sits on the wrapper so the participant list stays glued to the card's edge. */
.meeting-wrapper.meeting-wrapper--summary:has(.transcript-side-panel) {
    max-width: 1100px;
}

/* …and the card itself must be released too: MeetingStateManager's scoped stylesheet pins
   every .card on the meeting page to max-width 860px, which otherwise wins over the growing
   wrapper — the transcript panel would then squeeze the editor inside a fixed-size card
   instead of the whole card widening (the history page lacks that scoped cap, which is why
   it grew correctly there but not here). The wrapper rule above provides the 1100px limit. */
.meeting-wrapper--summary .card:has(.editor-transcript-row > .transcript-side-panel) {
    max-width: none;
}

/* ---------- Toast notifications: follow the app's palette/shape instead of Radzen's
   default bright, boxy, flat-shadow toast sitting 100px down from the viewport top. ---------- */
.rz-notification {
    inset-block-start: 1.25rem;
    inset-inline-end: 1.25rem;
}

.rz-notification-item-wrapper {
    background-color: transparent;
}

.rz-notification-item {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card-hover);
    font-family: var(--font-body);
}

.rz-notification-success .rz-notification-item {
    color: #146c43;
    background-color: #f0fdf4;
}

.rz-notification-warn .rz-notification-item {
    color: var(--warn);
    background-color: var(--warn-bg);
}

.rz-notification-error .rz-notification-item {
    color: #fff;
    background-color: var(--danger);
}

.rz-notification-info .rz-notification-item {
    color: var(--brand);
    background-color: var(--brand-tint);
}

.rz-notification-icon.rzi-check {
    color: #146c43;
}

.rz-notification-icon.rzi-exclamation-triangle {
    color: var(--warn);
}

.rz-notification-icon.rzi-info-circle {
    color: var(--brand);
}