/* L-Mediehus Kundeportal — global styles.
 * Theme palette is defined in MainLayout.razor (MudTheme). This file MUST use
 * MudBlazor's CSS variables (--mud-palette-*) so colors react to dark mode.
 * NEVER hardcode hex colors here — use the palette variables.
 */

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
    outline: none;
}

/* Validation utilities (kept from template — themed via palette) */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

.invalid {
    outline: 1px solid var(--mud-palette-error);
}

.validation-message {
    color: var(--mud-palette-error);
}

/* Reconnect overlay styling now lives in scoped CSS:
 * Components/Layout/ReconnectModal.razor.css (ported from the .NET 10 template).
 * The modal is a native HTML <dialog> with ::backdrop — no global CSS needed. */

.blazor-error-boundary {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-contrast-text, #fff);
    padding: 1rem 1rem 1rem 3.7rem;
}

    .blazor-error-boundary::after {
        content: "Der opstod en uventet fejl.";
    }

/* ===== AppBar brand ===== */

.cp-brand-link {
    text-decoration: none;
    color: inherit;
}

/* L-Mediehus logo — sourced from CMS Backend wwwroot/images/favicon.svg.
 * Rounded for a polished feel; same asset works on both light blue
 * (#1E40AF) and dark slate (#0F172A) AppBars without filter tweaks.
 */
.cp-brand-logo {
    border-radius: 6px;
}

.cp-brand {
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--mud-palette-appbar-text);
}

/* ===== Drawer & navigation ===== */

.cp-drawer .mud-drawer-content {
    background-color: var(--mud-palette-drawer-background);
    border-right: 1px solid var(--mud-palette-divider);
}

.cp-nav-section-label {
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
}

.cp-nav-menu .mud-nav-link {
    margin: 2px 8px;
    border-radius: 8px;
    color: var(--mud-palette-drawer-text);
    transition: background-color 120ms ease-in-out, color 120ms ease-in-out;
}

    .cp-nav-menu .mud-nav-link .mud-icon-root {
        color: var(--mud-palette-drawer-icon);
    }

    .cp-nav-menu .mud-nav-link.active {
        background-color: var(--mud-palette-primary-hover);
        color: var(--mud-palette-primary);
        font-weight: 600;
    }

        .cp-nav-menu .mud-nav-link.active .mud-icon-root {
            color: var(--mud-palette-primary);
        }

    .cp-nav-menu .mud-nav-link:hover:not(.active) {
        background-color: var(--mud-palette-action-default-hover);
    }

/* ===== Main content ===== */

.cp-main-content {
    min-height: 100vh;
    background-color: var(--mud-palette-background);
}

/* ===== Navigation progress bar (top of viewport) ===== */

.cp-nav-progress {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    height: 3px !important;
}

/* ===== Breadcrumbs ===== */

.cp-breadcrumbs {
    background-color: transparent;
}

.cp-breadcrumbs .mud-breadcrumbs-item .mud-breadcrumbs-text {
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

.cp-breadcrumbs .mud-breadcrumbs-item:last-child .mud-breadcrumbs-text {
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.cp-breadcrumbs .mud-breadcrumbs-separator {
    color: var(--mud-palette-text-disabled);
}

/* ===== Password field with leading lock icon =====
 * MudTextField only supports one adornment position, so the show/hide eye lives on
 * Adornment.End and we paint a lock SVG at the start via a pseudo-element. The icon
 * is decorative only (pointer-events: none) so the input remains fully clickable.
 */

.cp-input-with-lock .mud-input {
    position: relative;
}

    .cp-input-with-lock .mud-input::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236B7280' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 2;
        pointer-events: none;
        opacity: 0.7;
    }

.cp-input-with-lock .mud-input-slot {
    padding-left: 44px !important;
}

/* ===== Cards & surfaces ===== */

.cp-card {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 12px;
}

.cp-empty-state {
    border: 1px dashed var(--mud-palette-lines-default) !important;
    border-radius: 16px !important;
    background-color: var(--mud-palette-surface);
}

.cp-campaign-card {
    transition: transform 120ms ease-in-out, box-shadow 120ms ease-in-out;
    background-color: var(--mud-palette-surface);
    /* Clip the full-bleed preview band's top corners to the card's radius. */
    overflow: hidden;
}

    .cp-campaign-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

.cp-campaign-title {
    line-height: 1.3;
    word-break: break-word;
}

.cp-campaign-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Campaign-card banner filmstrip — up to 3 latest ads previewed at the top of each
   campaign card. The whole band is pointer-events:none so a click on any banner falls
   through to the card's @onclick (→ campaign detail); the banners are visuals only. */
.cp-campaign-preview {
    display: flex;
    gap: 6px;
    padding: 8px;
    height: 150px;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);
    position: relative;
    pointer-events: none;
}

.cp-campaign-preview-tile {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mud-palette-surface);
    border-radius: 6px;
    overflow: hidden;
}

.cp-campaign-preview-empty {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
}

.cp-campaign-preview-more {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 600;
}

.cp-dropzone {
    border: 2px dashed var(--mud-palette-lines-default) !important;
    border-radius: 12px !important;
    background-color: var(--mud-palette-surface);
    transition: border-color 120ms ease-in-out, background-color 120ms ease-in-out;
    cursor: pointer;
}

    .cp-dropzone:hover {
        border-color: var(--mud-palette-primary) !important;
        background-color: var(--mud-palette-action-default-hover);
    }

    /* Active drag state — set by JS interop in file-upload.js while a file hovers over the zone. */
    .cp-dropzone.drop-zone-active {
        border-color: var(--mud-palette-primary) !important;
        background-color: var(--mud-palette-primary-hover) !important;
    }

/* Staged-file row: thumbnail + name/info + delete. Tight gap so the X sits next
 * to the info instead of edge-aligned. */
.cp-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background-color 120ms ease-in-out;
}

/* Large variant — scoped to whatever container opts in via .cp-file-list--lg. Used on the
   AdRequest detail page where the right column is wide enough that the default 48×48 thumbs
   look lost. Bumps the thumb to 88×88 + scales the surrounding padding/typography to match. */
.cp-file-list--lg .cp-file-row {
    padding: 14px 16px;
    gap: 16px;
}

.cp-file-list--lg .cp-file-thumb {
    width: 88px;
    height: 88px;
    min-width: 88px;
    border-radius: 10px;
}

    .cp-file-list--lg .cp-file-thumb .mud-icon-root {
        font-size: 2.2rem;
    }

    /* Show the whole reference image rather than a cropped square — for a "what did I upload?"
       list, seeing the full content beats a uniform composition. Same Photoshop-style
       checkerboard the AssetPreviewDialog uses, scaled down to 10px tiles since the thumb is
       only 88×88. Opaque images cover it completely; transparent PNGs show the standard
       transparency-indicator both behind alpha pixels and in the letterbox bars. */
    .cp-file-list--lg .cp-file-thumb img {
        object-fit: contain;
        background-color: #ffffff;
        background-image:
            linear-gradient(45deg, #d4d4d4 25%, transparent 25%),
            linear-gradient(-45deg, #d4d4d4 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #d4d4d4 75%),
            linear-gradient(-45deg, transparent 75%, #d4d4d4 75%);
        background-size: 10px 10px;
        background-position: 0 0, 0 5px, 5px -5px, 5px 0;
    }

.cp-file-list--lg .cp-file-info .cp-file-name {
    font-size: 1rem;
}

.cp-file-list--lg .cp-file-info .mud-typography-caption {
    font-size: 0.85rem;
}

    .cp-file-row + .cp-file-row {
        margin-top: 4px;
    }

    .cp-file-row:hover {
        background-color: var(--mud-palette-action-default-hover);
    }

.cp-file-thumb {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 8px;
    background-color: var(--mud-palette-background-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
}

    .cp-file-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Video thumbnail: first frame via #t=0.5 with a centered play overlay. */
.cp-file-thumb-video {
    position: relative;
    width: 100%;
    height: 100%;
}

    .cp-file-thumb-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background: #000;
    }

.cp-file-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

    .cp-file-thumb-play .mud-icon-root {
        color: #fff;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 50%;
        padding: 2px;
        width: 22px;
        height: 22px;
        font-size: 18px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

.cp-file-info {
    flex: 1 1 auto;
    min-width: 0; /* allow text-overflow inside flex child */
    overflow: hidden;
}

    .cp-file-info .cp-file-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.cp-file-warning {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    cursor: help;
}

.cp-file-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Preview dialog body — neutral surface so transparent/white images are visible and
   media of any aspect ratio centers cleanly. */
.cp-asset-preview-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    max-height: 78vh;
    overflow: auto;
    padding: 12px;
    background-color: var(--mud-palette-background-grey);
    border-radius: 8px;
}

/* Photoshop-style checkerboard applied directly to the <img>. Opaque images cover
   it completely (JPGs etc. look unchanged); PNGs with alpha — including pure-white
   logos — get the standard transparency-indicator behind them, so the content is
   always visible against the dialog. */
.cp-asset-preview-img {
    max-width: 100%;
    max-height: calc(78vh - 24px);
    display: block;
    object-fit: contain;
    border-radius: 4px;
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #d4d4d4 25%, transparent 25%),
        linear-gradient(-45deg, #d4d4d4 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d4d4d4 75%),
        linear-gradient(-45deg, transparent 75%, #d4d4d4 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, 10px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.cp-asset-preview-video {
    max-width: 100%;
    max-height: calc(78vh - 24px);
    display: block;
    border-radius: 4px;
    background-color: #000;
}

.cp-asset-preview-audio {
    width: min(100%, 480px);
    display: block;
}

.cp-asset-preview-pdf {
    width: 100%;
    height: 78vh;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    display: block;
    background-color: #ffffff;
}

.cp-ad-request-shelf {
    background-color: var(--mud-palette-background-gray);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Clickable header on the request shelf — opens the AdRequest detail page. Only the title
   block is the hit-target; the action icons sit outside this element so they don't double-fire. */
.cp-ad-request-shelf-head {
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 6px;
    transition: background-color 120ms ease-in-out;
}

    .cp-ad-request-shelf-head:hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

/* Color swatch chip on the AdRequest detail page. */
.cp-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Reference-file tile on the AdRequest detail page. Image fills the tile; videos show a placeholder
   icon; the caption is a small description below. The link covers the thumb so click-to-open works. */
.cp-reference-tile {
    overflow: hidden;
    background-color: var(--mud-palette-background-gray);
}

.cp-reference-tile-link {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.cp-reference-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-reference-tile-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}

.cp-reference-tile-caption {
    display: block;
    padding: 4px 8px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-banner-card {
    transition: box-shadow 120ms ease-in-out, transform 120ms ease-in-out;
    background-color: var(--mud-palette-surface);
    border-radius: 10px;
    border-top: 3px solid var(--mud-palette-lines-default);
    overflow: hidden;
}

    .cp-banner-card:hover {
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
        transform: translateY(-1px);
    }

.cp-banner-card--html5     { border-top-color: var(--mud-palette-primary); }
.cp-banner-card--newspaper { border-top-color: var(--mud-palette-secondary); }
.cp-banner-card--image     { border-top-color: var(--mud-palette-info); }
.cp-banner-card--video     { border-top-color: var(--mud-palette-warning); }
.cp-banner-card--audio     { border-top-color: var(--mud-palette-tertiary); }

.cp-banner-thumb {
    background-color: var(--mud-palette-background-gray);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.cp-banner-thumb-audio {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: auto;
}

.cp-banner-thumb-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: auto;
}

.cp-banner-thumb-iframe-scaled {
    display: block;
    width: var(--preview-width, 100%);
    height: var(--preview-height, 100%);
    border: 0;
    background: #ffffff;
    transform: scale(var(--preview-scale, 1));
    transform-origin: top left;
    pointer-events: none;
}

@supports (zoom: 1) {
    .cp-banner-thumb-iframe-scaled {
        transform: none;
        zoom: var(--preview-scale, 1);
    }
}

.cp-banner-thumb-pdf {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

.cp-banner-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Annoncer grid — fits as many cards per row as the container allows, capped
   at ~360px per card so banner thumbs aren't surrounded by huge whitespace on
   2K/4K monitors. Rows are horizontally centered so a partial bottom row
   doesn't look left-orphaned. Falls back to a single column on mobile. */
.cp-banner-grid {
    display: grid;
    /* auto-fit so empty tracks collapse — with one card you get one track,
       no phantom slots padding the row. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    gap: 16px;
    justify-content: start;
    align-items: start;
}

@media (max-width: 600px) {
    .cp-banner-grid {
        grid-template-columns: 1fr;
    }
}

/* Banner card header on campaign detail — 3-column grid keeps the title truly
   centered regardless of whether the approval icon is rendered; the icon (when
   present) sits flush right. */
.cp-banner-card-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

    .cp-banner-card-title {
        grid-column: 2;
        text-align: center;
    }

    .cp-banner-card-header > :not(.cp-banner-card-title) {
        grid-column: 3;
        justify-self: end;
    }

/* Compact ad-kind label in the top-right of an AdItem card. */
.cp-ad-type-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Banner card action row on the campaign detail page — buttons always stack
   one per row at full width, on all screen sizes. The thumb is capped at
   ~360px so a full-width button under it stays readable; side-by-side buttons
   in a narrow card looked cramped. */
.cp-banner-actions {
    flex-direction: column !important;
    align-items: stretch !important;
}

    .cp-banner-actions .mud-button-root {
        width: 100%;
    }

/* AdItem card action row — four small buttons (Vis · Ret · download · Slet)
   share the row equally, wrapping on tight widths. The download entry can
   be either a single button or a split-button (main + caret menu).
   On phones (≤600px) the row drops to 2-up: Vis + Ret, then download + Slet. */
.cp-ad-actions {
    flex-wrap: wrap;
    align-items: stretch !important;
}

    .cp-ad-actions > .cp-ad-action {
        flex: 1 1 0;
        min-width: 0;
    }

@media (max-width: 599.95px) {
    .cp-ad-actions > .cp-ad-action {
        /* flex-basis = (row width − Spacing=1 gap) ÷ 2, so exactly two fit per row. */
        flex: 1 1 calc(50% - 2px);
    }
}

    .cp-ad-actions .mud-button-root {
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
    }

        .cp-ad-actions .mud-button-root .mud-button-label {
            font-size: 0.75rem;
            line-height: 1;
        }

        .cp-ad-actions .mud-button-root .mud-button-icon-start {
            margin-right: 4px;
            margin-left: 0;
        }

/* Split-button: main MudButton on the left + MudMenu (built-in IconButton activator) on the
   right. The two share a single rounded outline by zeroing the inner corners on each side and
   bolting them together with a faint divider. The cp-ad-split-toggle class lands on MudMenu's
   wrapper div — keep that wrapper flush (no padding/margin) and push all the visual styling
   (border-radius, border-left, padding) onto the inner button itself. Otherwise the wrapper's
   own padding shows up as a visible gap between the two halves. */
.cp-ad-split {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    min-height: 0;
}

    .cp-ad-split .cp-ad-split-main {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
    }

    /* Only strip the main button's right radius when a toggle is actually present. Audio ads
       have no alternative formats so the toggle isn't rendered; the main button is then a
       standalone button and should keep its full pill shape. :has() selects parents-by-child. */
    .cp-ad-split:has(.cp-ad-split-toggle) .cp-ad-split-main {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* MudMenu's outer wrapper (cp-ad-split-toggle class lands here). MUST stay flush — any
       padding or margin here is the gap the user sees. Also has to stretch vertically so its
       child icon-button can fill the row's height. */
    .cp-ad-split .cp-ad-split-toggle {
        display: inline-flex;
        align-items: stretch;
        align-self: stretch;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

        /* MudIconButton that MudMenu renders as its activator. Force height: 100% — MudIconButton
           is content-sized at Size.Small (~28px) and would otherwise read shorter than the main
           MudButton (~30px); explicit 100% lets the flex stretch chain reach the icon. */
        .cp-ad-split .cp-ad-split-toggle > .mud-button-root,
        .cp-ad-split .cp-ad-split-toggle > button {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
            min-width: 30px;
            height: 100% !important;
            align-self: stretch;
            padding: 0 4px !important;
            margin: 0 !important;
        }

.cp-ad-split-menu .mud-list-item {
    font-size: 0.8rem;
}

.cp-section-card {
    height: 100%;
}

/* ===== Generate-ad page (/generer-annonce) ===== */

/* Row of five large kind tiles (HTML5, Avis, Billede, Video, Lyd). Three are active, two are
   disabled with tooltip — the disabled state must be visibly distinct. */
.cp-generator-kind-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.cp-generator-kind-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
    transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out, transform 120ms ease-in-out;
    cursor: pointer;
    user-select: none;
    text-align: center;
    outline: none;
}

    .cp-generator-kind-card:hover:not(.is-disabled):not(.is-selected) {
        border-color: var(--mud-palette-primary-darken);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    }

    .cp-generator-kind-card:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

    .cp-generator-kind-card.is-selected {
        border-color: var(--mud-palette-primary);
        border-width: 2px;
        background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    }

    .cp-generator-kind-card.is-disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background-color: var(--mud-palette-background-gray);
    }

/* Format multi-select cards (FormatType / NewspaperAdFormat / ImageAdFormat). Each shows an
   aspect-ratio preview box so the user can see relative proportions at a glance. */
.cp-generator-format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 8px 0;
}

.cp-generator-format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 120ms ease-in-out, transform 120ms ease-in-out;
    outline: none;
    text-align: center;
}

    .cp-generator-format-card:hover:not(.is-selected) {
        border-color: var(--mud-palette-primary-darken);
        transform: translateY(-1px);
    }

    .cp-generator-format-card:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

    .cp-generator-format-card.is-selected {
        border-color: var(--mud-palette-primary);
        border-width: 2px;
        background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
    }

.cp-generator-format-preview {
    background-color: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    min-width: 8px;
    min-height: 8px;
}

.cp-generator-newspaper-panels {
    margin-top: 4px;
}

/* Color palette rows */
.cp-generator-color-row {
    padding: 6px 8px;
    border-radius: 6px;
    background-color: var(--mud-palette-background-gray);
}

.cp-generator-color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0;
    cursor: pointer;
    background-color: transparent;
}

/* Overlay text rows */
.cp-generator-overlay-row {
    background-color: var(--mud-palette-background);
}

/* Live font preview inside the overlay-text textarea. The row sets --cp-overlay-font from its
   selected font; this rule pushes it onto the inner MudBlazor textarea. !important is needed
   because MudBlazor's own .mud-input-slot rule sets font-family on the same element and would
   otherwise win the cascade against an inline style. */
.cp-generator-overlay-row .mud-input-slot {
    font-family: var(--cp-overlay-font), sans-serif !important;
    font-size: 1.05rem;
}

.cp-generator-overlay-preview {
    font-size: 22px;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

/* Media upload */
.cp-generator-media-dropzone {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    transition: border-color 120ms ease-in-out, background-color 120ms ease-in-out;
}

    .cp-generator-media-dropzone:hover {
        border-color: var(--mud-palette-primary);
        background-color: rgba(var(--mud-palette-primary-rgb), 0.03);
    }

.cp-generator-media-row {
    background-color: var(--mud-palette-background);
}

.cp-generator-media-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
}

/* Wrapper around the thumb+badge — clickable target for the preview dialog. inline-block so
   the wrapper hugs the 56px thumb (otherwise it'd stretch to the row width, throwing off the
   badge's horizontal centering). */
.cp-generator-media-thumb-wrap {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
}

    .cp-generator-media-thumb-wrap:hover .cp-generator-media-thumb {
        border-color: var(--mud-palette-primary);
    }

    .cp-generator-media-thumb-wrap:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
        border-radius: 6px;
    }

/* "Media #N" badge — small chip centered below the thumb so the user can see how to reference
   the file in their AI instructions ("Brug Media #1 som baggrund"). */
.cp-generator-media-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    white-space: nowrap;
}

.cp-generator-summary {
    position: sticky;
    top: 60px;
}

/* Scrollable results column inside the post-Generate side-panel. Caps height so a 10-ad run
   doesn't push the page; user scrolls inside the column while the form stays visible left. */
.cp-generator-results {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding-right: 4px;
}

/* Font picker options — render each option in its own typeface so the user previews the font
   before picking (Word-style). Slightly bigger than the surrounding MudSelectItem text so the
   character shapes are recognisable at a glance. */
.cp-generator-font-option {
    font-size: 1.05rem;
    line-height: 1.4;
    display: inline-block;
}

/* Hero number ("23 annoncer klar til generering") above the breakdown tiles */
.cp-generator-hero {
    text-align: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

.cp-generator-hero-number {
    font-size: 2.8rem;
    line-height: 1.0;
    font-weight: 700;
    color: var(--mud-palette-primary);
    letter-spacing: -0.02em;
}

/* Single stat row in the Status panel — icon | label (flex-grow) | value (right) */
.cp-generator-stat-tile {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.cp-generator-stat-label {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.cp-generator-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Newspaper clickable-canvas selector — image + absolutely-positioned canvas overlay */
.cp-newspaper-canvas {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.cp-newspaper-image-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

    .cp-newspaper-image-container img {
        display: block;
        max-width: 100%;
        height: auto;
        user-select: none;
        -webkit-user-drag: none;
    }

.cp-newspaper-canvas-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
}

/* Overlay-text preview box (issue #1) — dashed-border, 22px font, sits below the inputs */
.cp-generator-overlay-preview-box {
    border-radius: 6px;
    border: 1px dashed var(--mud-palette-lines-default);
    background-color: var(--mud-palette-background-gray);
    padding: 14px 16px;
    font-size: 22px;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    white-space: pre-line;
    min-height: 56px;
}

/* ===== Edit-ad page (/rediger-annonce/{id}) =====
   Padding scale: panel internals 16px, toolbar 12×16, internal section gaps 12px. Match the
   chat-side and preview-side panes so the two columns feel like a single editor.

   Height strategy: both columns stretch to the same viewport-derived height via the grid.
   The right column's toolbar takes whatever it needs at the top, the preview pane flexes
   to fill the remainder, so its bottom edge naturally aligns with the chat pane below. */

.cp-editor-shell {
    align-items: stretch;
    min-height: calc(100vh - 190px);
}

/* The grid items need to be flex containers so the cp-editor-pane inside fills their height —
   without this, the chat-column's MudPaper collapses to content height and the log doesn't scroll. */
.cp-editor-shell > .mud-grid-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cp-editor-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px !important;
}

.cp-editor-pane--chat {
    min-height: 540px;
}

/* Right-column wrapper MudStack: stretch to fill the grid item so the preview pane below can
   flex up to match the chat pane's height. MudStack is `display: flex; flex-direction: column`
   by default; we just need it to fill. */
.cp-editor-shell .mud-grid-item > .mud-stack {
    flex: 1 1 auto;
    min-height: 0;
}

/* Preview pane inside MudStack: takes whatever the toolbar leaves behind, ensuring the chat
   pane's bottom edge and the preview pane's bottom edge line up. */
.cp-editor-pane--preview {
    flex: 1 1 auto;
    min-height: 0;
}

/* Propagate the flex chain through MudTabs internals so the chat panel inside the AI-chat tab
   gets a real height to work with. NOTE: MudBlazor's class is .mud-tab-panel (hyphenated) — NOT
   .mud-tabpanel. The hyphenated form is the one to target. */
.cp-editor-pane .cp-editor-tabs,
.cp-editor-pane .cp-editor-tabs > .mud-tabs-panels,
.cp-editor-pane .cp-editor-tabs .mud-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Drop MudBlazor's margin-right/margin-inline-end on .mud-tab-icon-text — that 8px push throws
   off the vertical centering between the icon and the label inside our tab strip. Keeping the
   icon directly next to the text reads correctly. Scoped to the editor tabs so we don't change
   MudTabs styling elsewhere in the app. */
.cp-editor-pane .mud-tab .mud-tab-icon-text {
    margin-right: 0;
    margin-inline-end: 0;
}

/* Toolbar above the preview iframe: dirty badge, last-saved timestamp, Save button. Padding
   matched to the panel internals so the right column reads as one consistent block. */
.cp-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

.cp-editor-toolbar-spacer {
    flex: 1 1 auto;
}

.cp-editor-save-button {
    flex-shrink: 0;
}

.cp-editor-status-pill {
    font-size: 0.75rem;
}

.cp-editor-status-pill--dirty {
    /* Warning chip already provides the visual; this hook is here for future tweaks. */
}

/* The TabPanelsClass on MudTabs lands on the panel container here. The 24px top padding
   gives the content room to breathe below the tab strip — without this, the chat header
   buttons crash into the tab strip's bottom border. */
.cp-editor-tab-panel {
    padding: 24px 0 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ----- Chat panel (AdChatPanel + AdChatMessage) — ported from BannerChatPanel + BannerChatMessage.
       Role-styled bubbles: user right-aligned with primary tint, assistant left-aligned with a
       robot avatar and surface-tinted background. Empty state with examples, animated thinking
       dots, cost badge in the action row. ----- */

/* CSS Grid for the chat panel — three rows: header (auto), middle (1fr, holds log OR empty
   state), input dock (auto). Grid is more reliable than nested flex for "fixed top + fill
   middle + fixed bottom" because we don't have to chain `min-height: 0` through every
   intermediate flex parent. */
.cp-chat-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    width: 100%;
    gap: 12px;
    margin-top: 10px;
}

.cp-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-divider-light);
    flex-wrap: wrap;
}

.cp-chat-title {
    display: inline-flex;
    align-items: center;
}

.cp-chat-header-spacer {
    flex: 1 1 auto;
}

.cp-chat-log {
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
    background-color: var(--mud-palette-background-gray);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider-light);
}

.cp-chat-empty {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    background-color: var(--mud-palette-background-gray);
    border-radius: 8px;
    border: 1px dashed var(--mud-palette-divider);
}

/* The input dock anchors at the bottom of the chat panel: pending attachments strip + textarea
   + action row, all stacked. Bordered top so it visually separates from the message log. */
.cp-chat-input-dock {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-divider-light);
}

.cp-chat-empty-icon {
    font-size: 2.5rem !important;
}

.cp-chat-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
}

.cp-chat-row--user {
    flex-direction: row-reverse;
}

.cp-chat-row--assistant {
    flex-direction: row;
}

.cp-chat-bubble {
    max-width: 78%;
    display: flex;
    flex-direction: column;
}

.cp-chat-row--user .cp-chat-bubble {
    align-items: flex-end;
}

.cp-chat-bubble-card {
    border-radius: 14px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.cp-chat-bubble-card--user {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
    color: var(--mud-palette-primary-text);
    border-bottom-right-radius: 4px;
}

.cp-chat-bubble-card--assistant {
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider-light);
    border-bottom-left-radius: 4px;
}

.cp-chat-bubble-body {
    font-size: 0.875rem;
}

.cp-chat-bubble-card--user .cp-chat-bubble-body {
    color: var(--mud-palette-primary-text);
}

.cp-chat-timestamp {
    color: var(--mud-palette-text-secondary);
    font-size: 0.7rem !important;
    margin-top: 2px;
}

.cp-chat-bubble-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.cp-chat-attachment-thumb {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--mud-palette-background-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cp-chat-attachment-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cp-chat-role-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Animated thinking dots while the AI is generating. */
.cp-chat-thinking {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider-light);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}

    .cp-chat-thinking span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--mud-palette-text-secondary);
        animation: cp-chat-bounce 1.2s infinite ease-in-out;
    }

        .cp-chat-thinking span:nth-child(2) { animation-delay: 0.15s; }
        .cp-chat-thinking span:nth-child(3) { animation-delay: 0.30s; }

@keyframes cp-chat-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40%           { transform: scale(1.0); opacity: 1.0; }
}

.cp-chat-actions {
    flex-wrap: wrap;
    row-gap: 8px;
}

.cp-chat-actions-spacer {
    flex: 1 1 auto;
}

.cp-chat-cost {
    font-size: 0.75rem !important;
}

/* Drag/paste hint shown next to the Vedhæft button — mirrors BannerGen's chat-input-hint.
   Subdued color, small icon + text, wraps to a new line on very narrow columns. */
.cp-chat-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    line-height: 1.2;
}

/* Pending-attachments strip — thumbnails the user has uploaded but not yet sent. */
.cp-chat-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background-color: var(--mud-palette-background-gray);
    border-radius: 8px;
    border: 1px dashed var(--mud-palette-divider);
}

.cp-chat-pending-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .cp-chat-pending-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.cp-chat-pending-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: var(--mud-palette-surface) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    padding: 2px !important;
    min-width: 0 !important;
}

/* ----- Preview pane (Phase 4): two-pane comparison + phone-frame mockup ----- */

.cp-preview-compare {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px;
    background-color: var(--mud-palette-background-gray);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider-light);
}

.cp-preview-compare-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cp-preview-compare-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem !important;
    text-align: center;
}

.cp-preview-compare-label--proposed {
    color: var(--mud-palette-primary) !important;
}

/* Phone-frame mockup for mobile view-mode. Mirrors BannerPreviewPane's .phone-frame /
   .phone-screen. 391×683 outer shell with a fake notch; 375×667 inner screen wraps the iframe.
   margin: 0 auto centers the phone inside the preview pane horizontally — without this the
   phone hugs the left edge of the wide preview column. */
.cp-preview-phone-frame {
    width: 391px;
    height: 683px;
    background-color: #1f1f1f;
    border-radius: 40px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    margin: 0 auto;
}

    .cp-preview-phone-frame::before {
        content: "";
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        width: 110px;
        height: 22px;
        background-color: #1f1f1f;
        border-radius: 14px;
        z-index: 1;
    }

.cp-preview-phone-screen {
    width: 375px;
    height: 667px;
    background-color: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

/* Applied when the iframe is smaller than the phone screen and should sit centered inside it
   (e.g. SpotBanner mobile at natural 300×250 inside a 375×667 phone). Mobile views that fill
   the phone via transform-scale use the base .cp-preview-phone-screen (top-left aligned). */
.cp-preview-phone-screen--fit {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-preview-phone-screen--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: linear-gradient(180deg, #f5f5f5 0%, #ebebeb 100%);
    color: var(--mud-palette-text-secondary);
}

.cp-editor-code-panel {
    padding-top: 12px;
}

/* Monaco editor host — needs an explicit height since AutomaticLayout=true measures the parent.
   margin-top matches .cp-chat-panel so both AI-chat and Kode tabs sit equally clear of the tab strip. */
.cp-editor-monaco-host {
    height: 480px;
    width: 100%;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 10px;
}

.cp-editor-preview {
    background-color: #ffffff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto;
}

.cp-editor-preview-iframe {
    display: block;
    background: #ffffff;
    pointer-events: none;
}

.cp-search-field {
    max-width: 360px;
}

    .cp-search-field .mud-input-slot {
        background-color: var(--mud-palette-surface);
    }

/* ===== Banner review (pin + annotate) ===== */

.cp-banner-canvas {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: crosshair;
    line-height: 0;
}

.cp-banner-image {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    user-select: none;
}

.cp-banner-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    background-color: var(--mud-palette-primary);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 100ms ease-in-out;
    z-index: 5;
}

    .cp-banner-pin:hover {
        transform: translate(-50%, -50%) scale(1.15);
    }

.cp-banner-pin-selected {
    background-color: var(--mud-palette-warning);
    transform: translate(-50%, -50%) scale(1.2);
}

.cp-banner-pin-resolved {
    background-color: var(--mud-palette-success);
    opacity: 0.85;
}

.cp-annotation-panel {
    max-height: 600px;
    overflow-y: auto;
}

.cp-annotation-list {
    /* Tight stacking for comment list */
}

.cp-annotation-item {
    transition: border-color 120ms ease-in-out;
    background-color: var(--mud-palette-surface);
}

    .cp-annotation-item:hover {
        border-color: var(--mud-palette-primary) !important;
    }

.cp-annotation-item-selected {
    border-color: var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-action-default-hover);
}

.cp-annotation-item-resolved {
    opacity: 0.7;
}

.cp-banner-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: var(--mud-palette-background-gray);
    border-radius: 8px;
}

.cp-kpi-card {
    border-radius: 12px !important;
    background-color: var(--mud-palette-surface);
    transition: transform 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

    .cp-kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    }

.cp-kpi-label {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.cp-kpi-value {
    font-weight: 600;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

/* ===== User avatar ===== */

.cp-user-avatar {
    width: 32px !important;
    height: 32px !important;
    cursor: pointer;
}

.cp-user-menu-header {
    min-width: 200px;
    background-color: var(--mud-palette-surface);
}

/* ===== Auth shell (login, forgot/reset password) ===== */

.cp-auth-shell {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(30, 64, 175, 0.10), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(8, 145, 178, 0.08), transparent 50%),
        var(--mud-palette-background);
    padding: 2rem 1rem;
}

.cp-auth-card-wrapper {
    width: 100%;
    max-width: 28rem;
}

.cp-auth-card {
    border-radius: 16px !important;
    background-color: var(--mud-palette-surface);
}

/* ===== Utility text overrides for MudBlazor secondary text ===== */

.mud-text-secondary {
    color: var(--mud-palette-text-secondary) !important;
}