/* ==========================================================================
   Corvue customer portal: Support (direction A, "Front desk")

   The Get help hub, category pages, full-page forms, the confirmation page and the ticket list. Loaded
   after corvue-portal.css, and every selector is scoped under .page--portal, so nothing here reaches staff
   pages, sign-in or print routes. Tokens only: surfaces and text from --cv-*, accents from the portal
   brand (--cv-portal-brand*), so the tenant colour and dark mode come for free.
   ========================================================================== */

.page--portal .portal-support {
    display: flex;
    flex-direction: column;
    gap: var(--cv-gap-section);
    min-width: 0;
    padding-bottom: 1rem;
}

.page--portal .portal-support--form {
    gap: 0;
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Sub-navigation: Get help · My tickets
   -------------------------------------------------------------------------- */
.page--portal .portal-support-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.page--portal .portal-support-subnav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--cv-control-height-sm);
    padding: 0 0.75rem;
    border-radius: var(--cv-radius-control);
    color: var(--cv-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.page--portal .portal-support-subnav__link:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}

.page--portal .portal-support-subnav__link--active {
    background: var(--cv-portal-brand-soft);
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-support-subnav__count {
    min-width: 1.25rem;
    padding: 0 0.375rem;
    border-radius: var(--cv-radius-round);
    background: var(--cv-attention-warning);
    color: var(--cv-text);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.page--portal .portal-support-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.page--portal .portal-support-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    color: var(--cv-text-muted);
}

.page--portal .portal-support-crumbs a {
    color: var(--cv-portal-brand-ink);
    font-weight: 550;
    text-decoration: none;
}

.page--portal .portal-support-crumbs a:hover {
    text-decoration: underline;
}

.page--portal .portal-support-crumbs [aria-current="page"] {
    overflow: hidden;
    color: var(--cv-text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page--portal .portal-support-crumbs i {
    font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   Icon chips (items, categories, entry points)
   -------------------------------------------------------------------------- */
.page--portal .portal-support-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--cv-radius-card);
    background: var(--cv-portal-brand-soft);
    color: var(--cv-portal-brand-ink);
    font-size: 1.05rem;
}

.page--portal .portal-support-icon--large {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.5rem;
}

/* A tenant-chosen colour tints the glyph; the soft surface keeps it readable in both themes. */
.page--portal .portal-support-icon--coloured {
    background: color-mix(in srgb, var(--portal-support-icon-colour) 14%, var(--cv-surface));
    color: color-mix(in srgb, var(--portal-support-icon-colour) 82%, var(--cv-text));
}

.page--portal .portal-support-icon--letter {
    background: var(--cv-surface-sunken);
    color: var(--cv-text-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.page--portal .portal-support-icon__letter {
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */
.page--portal .portal-support-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 3.75rem;
    padding: 0 1rem 0 1.125rem;
    border: 1px solid var(--cv-border-strong);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
}

.page--portal .portal-support-search:focus-within {
    border-color: var(--cv-portal-brand);
    outline: var(--cv-focus-ring);
    outline-offset: 0;
}

.page--portal .portal-support-search--compact {
    min-height: var(--cv-control-height-lg);
    max-width: 45rem;
}

.page--portal .portal-support-search__icon {
    color: var(--cv-text-muted);
    font-size: 1.25rem;
}

.page--portal .portal-support-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: inherit;
    border: 0;
    background: transparent;
    color: var(--cv-text);
    font-size: 1rem;
}

.page--portal .portal-support-search__input:focus,
.page--portal .portal-support-search__input:focus-visible {
    outline: none;
}

.page--portal .portal-support-search__input::-webkit-search-cancel-button {
    display: none;
}

.page--portal .portal-support-search__clear {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--cv-radius-round);
    background: transparent;
    color: var(--cv-text-muted);
}

.page--portal .portal-support-search__clear:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}

.page--portal .portal-support-search__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: -1px;
    left: -1px;
    z-index: var(--cv-z-dropdown);
    overflow: hidden;
    border: 1px solid var(--cv-border-strong);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    box-shadow: var(--cv-elevation-overlay);
}

.page--portal .portal-support-search__results {
    max-height: min(26rem, 60vh);
    overflow-y: auto;
}

.page--portal .portal-support-search__group {
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-support-search__group-label {
    padding: 0.375rem 1rem 0.25rem;
    color: var(--cv-text-muted);
    font-size: var(--cv-label-size);
    font-weight: var(--cv-label-weight);
    letter-spacing: var(--cv-label-tracking);
    text-transform: uppercase;
}

.page--portal .portal-support-search__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

.page--portal .portal-support-search__option:hover {
    background: var(--cv-surface-hover);
}

.page--portal .portal-support-search__option--active {
    background: var(--cv-portal-brand-soft);
    box-shadow: inset var(--cv-rule-width) 0 0 var(--cv-portal-accent);
}

.page--portal .portal-support-search__option-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.page--portal .portal-support-search__option-title {
    overflow: hidden;
    color: var(--cv-text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page--portal .portal-support-search__option-subtitle,
.page--portal .portal-support-search__option-tag {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.page--portal .portal-support-search__option-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
}

.page--portal .portal-support-search__option-action {
    color: var(--cv-portal-brand-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.page--portal .portal-support-search__empty {
    padding: 1rem;
    color: var(--cv-text-muted);
    font-size: 0.875rem;
}

.page--portal .portal-support-search__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--cv-surface-sunken);
    color: var(--cv-text-muted);
    font-size: 0.75rem;
}

.page--portal .portal-support-search__all {
    color: var(--cv-portal-brand-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.page--portal .portal-support-search__fallback {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--cv-border-subtle);
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    text-decoration: none;
}

.page--portal .portal-support-search__fallback strong {
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-support mark {
    padding: 0;
    border-radius: 2px;
    background: var(--cv-portal-brand-soft);
    color: inherit;
    box-shadow: 0 1px 0 var(--cv-portal-brand-line);
}

/* ?type=problems|requests: "Showing problems only. Show everything" */
.page--portal .portal-support-filter-note {
    margin: 0;
    color: var(--cv-text-muted);
    font-size: 0.875rem;
}

.page--portal .portal-support-filter-note a {
    color: var(--cv-portal-brand-ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Item lists and rows
   -------------------------------------------------------------------------- */
.page--portal .portal-support-list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    list-style: none;
}

.page--portal .portal-support-list--flush {
    border: 0;
    border-radius: 0;
}

.page--portal .portal-support-row + .portal-support-row {
    border-top: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-support-row__link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    min-height: 3.75rem;
    padding: 0.75rem 1rem;
    color: var(--cv-text);
    text-decoration: none;
}

.page--portal .portal-support-row__link:hover {
    background: var(--cv-surface-hover);
}

.page--portal .portal-support-row__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.page--portal .portal-support-row__title {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
}

.page--portal .portal-support-row__subtitle {
    overflow: hidden;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page--portal .portal-support-row__kind {
    color: var(--cv-text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.page--portal .portal-support-row__kind {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-chip);
}

.page--portal .portal-support-row__price {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.page--portal .portal-support-row__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 6rem;
    min-height: var(--cv-control-height-sm);
    padding: 0 0.875rem;
    border: 1px solid var(--cv-border-strong);
    border-radius: var(--cv-radius-control);
    color: var(--cv-text);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.page--portal .portal-support-row__link:hover .portal-support-row__action {
    border-color: var(--cv-portal-brand);
    background: var(--cv-portal-brand);
    color: var(--cv-portal-brand-contrast);
}

/* --------------------------------------------------------------------------
   Sections and category tiles
   -------------------------------------------------------------------------- */
.page--portal .portal-support-section {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.page--portal .portal-support-section__title {
    margin: 0;
    color: var(--cv-text);
    font-size: 1.125rem;
    font-weight: 650;
}

.page--portal .portal-support-section__title span {
    margin-left: 0.25rem;
    color: var(--cv-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Get help: two doors (SupportHub.razor)
   "Something's not working" holds the problems and "I need something" the requests, side by side. A single
   panel takes the full width; on phones they stack, problems first. Categories are small uppercase headings
   and every row is one link (PortalSupportHelpRow). Problems are tinted terracotta (--cv-portal-problem*, from
   the danger tone), requests take the portal brand (the tenant's colour, Support teal by default).
   -------------------------------------------------------------------------- */
.page--portal .portal-help-doors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem;
}

.page--portal .portal-help-doors--single {
    grid-template-columns: minmax(0, 1fr);
}

.page--portal .portal-help-door {
    --portal-help-tint: var(--cv-portal-brand-soft);
    --portal-help-ink: var(--cv-portal-brand-ink);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
}

.page--portal .portal-help-door--problems {
    --portal-help-tint: var(--cv-portal-problem-soft);
    --portal-help-ink: var(--cv-portal-problem-ink);
}

.page--portal .portal-help-door__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-bottom: 1px solid var(--cv-border-subtle);
    background: var(--portal-help-tint);
}

.page--portal .portal-help-door__icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    color: var(--portal-help-ink);
    font-size: 1rem;
}

.page--portal .portal-help-door__heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page--portal .portal-help-door__title {
    margin: 0;
    color: var(--cv-text);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.3;
}

.page--portal .portal-help-door__lede {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-help-group {
    min-width: 0;
}

.page--portal .portal-help-group__title {
    margin: 0;
    padding: 0.875rem 1.125rem 0.25rem;
    color: var(--cv-text-muted);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Many items: each category folds to its heading and a count (a native <details>). */
.page--portal .portal-help-group__title--toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-top: 1px solid var(--cv-border-subtle);
    cursor: pointer;
    list-style: none;
}

.page--portal .portal-help-group:first-of-type > .portal-help-group__title--toggle {
    border-top: 0;
}

.page--portal .portal-help-group__title--toggle::-webkit-details-marker {
    display: none;
}

.page--portal .portal-help-group__title--toggle:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}

.page--portal .portal-help-group__title--toggle:focus-visible {
    outline-offset: calc(-1 * var(--cv-focus-offset) - 2px);
}

.page--portal .portal-help-group__count {
    padding: 0 0.4rem;
    border-radius: var(--cv-radius-chip);
    background: var(--cv-surface-sunken);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.page--portal .portal-help-group__toggle {
    margin-left: auto;
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.page--portal .portal-help-group[open] .portal-help-group__toggle {
    transform: rotate(180deg);
}

/* Rows: the hub's panels (.portal-help-rows) and its search results (.portal-help-list, a bordered list). */
.page--portal .portal-help-rows,
.page--portal .portal-help-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page--portal .portal-help-list {
    overflow: hidden;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
}

.page--portal .portal-help-row + .portal-help-row {
    border-top: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-help-group:last-child .portal-help-rows {
    padding-bottom: 0.25rem;
}

.page--portal .portal-help-row__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.625rem 1.125rem;
    color: var(--cv-text);
    text-decoration: none;
}

.page--portal .portal-help-row__link:hover {
    background: var(--cv-surface-hover);
}

/* Inset, so the panel's rounded clip never cuts the ring off. */
.page--portal .portal-help-row__link:focus-visible {
    outline-offset: calc(-1 * var(--cv-focus-offset) - 2px);
}

.page--portal .portal-help-row__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.page--portal .portal-help-row__title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.page--portal .portal-help-row__desc {
    overflow: hidden;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page--portal .portal-help-row__price {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "Recently used": one small row of the same link rows above the panels, side by side where they fit. */
.page--portal .portal-help-recent {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.page--portal .portal-help-recent__title {
    margin: 0;
    color: var(--cv-text-muted);
    font-size: 0.6875rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page--portal .portal-help-list--recent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.page--portal .portal-help-list--recent .portal-help-row + .portal-help-row {
    border-top: 0;
    border-left: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-help-row__chev {
    flex: none;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-help-row__link:hover .portal-help-row__chev {
    color: var(--cv-text);
}

/* "Can't find it?" */
.page--portal .portal-support-fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cv-border-subtle);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface-sunken);
}

.page--portal .portal-support-fallback__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 12rem;
}

.page--portal .portal-support-fallback__text span {
    color: var(--cv-text-muted);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Category page
   -------------------------------------------------------------------------- */
.page--portal .portal-support-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.875rem;
}

.page--portal .portal-support-heading--item {
    align-items: flex-start;
}

.page--portal .portal-support-heading__text {
    min-width: 0;
}

.page--portal .portal-support-heading__title {
    margin: 0;
    color: var(--cv-text);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.page--portal .portal-support-heading__meta,
.page--portal .portal-support-heading__lede {
    margin: 0.25rem 0 0;
    color: var(--cv-text-muted);
    font-size: 0.9375rem;
}

.page--portal .portal-support-heading__meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.625rem 0 0;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-support-heading__meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.page--portal .portal-support-required {
    color: var(--cv-severity-critical);
    font-weight: 700;
}

.page--portal .portal-support-category {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
    gap: 1.5rem;
}

.page--portal .portal-support-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
}

.page--portal .portal-support-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-support-panel__filter {
    flex: 1;
    min-width: 12rem;
}

.page--portal .portal-support-panel__heading {
    margin: 0;
    padding: 0.875rem 1rem 0.5rem;
    color: var(--cv-text);
    font-size: 0.9375rem;
    font-weight: 650;
}

.page--portal .portal-support-side-list {
    margin: 0;
    padding: 0 0 0.5rem;
    list-style: none;
}

.page--portal .portal-support-side-list a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.4rem 1rem;
    color: var(--cv-text);
    font-size: 0.875rem;
    text-decoration: none;
}

.page--portal .portal-support-side-list a:hover {
    background: var(--cv-surface-hover);
}

.page--portal .portal-support-side-list span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page--portal .portal-support-side-list em {
    color: var(--cv-text-muted);
    font-size: 0.75rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.page--portal .portal-support-side-list .portal-support-icon {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Full-page forms
   -------------------------------------------------------------------------- */
.page--portal .portal-support-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 48.75rem;
    margin-inline: auto;
}

.page--portal .portal-support-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--cv-portal-brand-line);
    border-radius: var(--cv-radius-card);
    background: var(--cv-portal-brand-soft);
}

.page--portal .portal-support-hint .portal-support-icon {
    background: var(--cv-surface);
}

.page--portal .portal-support-hint__text {
    min-width: 0;
}

.page--portal .portal-support-hint__body {
    margin-top: 0.125rem;
    color: var(--cv-text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.page--portal .portal-support-hint__body > :last-child {
    margin-bottom: 0;
}

.page--portal .portal-support-form__alert {
    margin: 0;
}

.page--portal .portal-support-form__card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
}

.page--portal .portal-support-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.page--portal .portal-support-form__section {
    padding-top: 1.25rem;
    border-top: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-support-form__section[hidden] {
    display: none;
}

.page--portal .portal-support-form__section-title {
    margin: 0 0 0.75rem;
    color: var(--cv-text);
    font-size: 0.9375rem;
    font-weight: 650;
}

.page--portal .portal-support-form__section-title span {
    color: var(--cv-text-muted);
    font-weight: 400;
}

.page--portal .portal-support-form__section-help {
    margin: -0.375rem 0 0.75rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-support-form__files {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

/* The sticky submit bar: stays in view at the bottom of the window while the form scrolls. */
.page--portal .portal-support-sticky {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 1.75rem;
    border-top: 1px solid var(--cv-border);
    background: color-mix(in srgb, var(--cv-surface) 94%, transparent);
    backdrop-filter: blur(6px);
}

.page--portal .portal-support-sticky__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 48.75rem;
    min-height: 4.25rem;
    margin-inline: auto;
    padding-block: 0.625rem;
}

.page--portal .portal-support-sticky__status {
    display: inline-flex;
    flex: 1;
    align-items: center;
    gap: 0.4rem;
    min-width: 10rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-support-sticky__status .bi-check-circle {
    color: var(--cv-severity-positive);
}

.page--portal .portal-support-sticky__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   Confirmation
   -------------------------------------------------------------------------- */
.page--portal .portal-support-sent {
    gap: 0;
    padding: 0;
}

.page--portal .portal-support-sent__head {
    padding: 2.5rem 2rem 2rem;
    text-align: center;
}

.page--portal .portal-support-sent__tick {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cv-severity-positive) 14%, var(--cv-surface));
    color: var(--cv-severity-positive);
    font-size: 2rem;
}

.page--portal .portal-support-sent__title {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 700;
}

.page--portal .portal-support-sent__lede {
    margin: 0.375rem 0 0;
    color: var(--cv-text-muted);
}

.page--portal .portal-support-sent__reference {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-control);
    background: var(--cv-surface-sunken);
}

.page--portal .portal-support-sent__reference strong {
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.page--portal .portal-support-sent__next-title {
    margin: 0;
    padding: 1.25rem 1.75rem 0;
    border-top: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-support-timeline {
    margin: 0;
    padding: 0.5rem 1.75rem 1.5rem;
    list-style: none;
}

.page--portal .portal-support-timeline__step {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.875rem;
    padding: 0.75rem 0;
}

.page--portal .portal-support-timeline__step + .portal-support-timeline__step::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: calc(0.875rem - 1px);
    height: 1.25rem;
    border-left: 2px solid var(--cv-border-subtle);
}

.page--portal .portal-support-timeline__dot {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--cv-border);
    border-radius: 50%;
    background: var(--cv-surface-sunken);
    color: var(--cv-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.page--portal .portal-support-timeline__step--done .portal-support-timeline__dot {
    border-color: transparent;
    background: color-mix(in srgb, var(--cv-severity-positive) 14%, var(--cv-surface));
    color: var(--cv-severity-positive);
}

.page--portal .portal-support-timeline strong {
    display: block;
    font-size: 0.9375rem;
}

.page--portal .portal-support-timeline small {
    display: block;
    color: var(--cv-text-muted);
    font-size: 0.875rem;
}

.page--portal .portal-support-sent__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.625rem;
    padding: 1rem 1.75rem;
    border-top: 1px solid var(--cv-border-subtle);
}

/* --------------------------------------------------------------------------
   Ticket list
   -------------------------------------------------------------------------- */
.page--portal .portal-tickets__panel {
    display: flex;
    flex-direction: column;
}

.page--portal .portal-tickets__tabs {
    padding: 0 1rem;
    border-bottom: 1px solid var(--cv-border);
}

.page--portal .portal-tickets__note {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--cv-border-subtle);
    background: var(--cv-surface-sunken);
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-tickets__table .cv-table {
    border: 0;
    border-radius: 0;
}

.page--portal .portal-tickets__number-col {
    width: 1%;
    white-space: nowrap;
}

.page--portal .portal-tickets__date-col {
    white-space: nowrap;
}

.page--portal .portal-tickets__number {
    color: var(--cv-text-muted);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.page--portal .portal-tickets__subject {
    display: block;
    color: var(--cv-text);
    font-weight: 600;
    text-decoration: none;
}

.page--portal .portal-tickets__subject:hover,
.page--portal .portal-tickets__number:hover {
    text-decoration: underline;
}

.page--portal .portal-tickets__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.625rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-tickets__unread {
    color: var(--cv-portal-brand-ink);
    font-weight: 650;
}

.page--portal .portal-tickets__row--waiting td {
    background: color-mix(in srgb, var(--cv-attention-warning) 9%, var(--cv-surface));
}

.page--portal .portal-tickets__row--waiting .portal-tickets__subject {
    font-weight: 700;
}

.page--portal .portal-tickets__muted {
    color: var(--cv-text-muted);
}

.page--portal .portal-tickets__pager {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--cv-border-subtle);
}

/* --------------------------------------------------------------------------
   Banners on Get help (Customer communications). Top banners sit above the page; Sidebar banners take a
   right-hand column, which only exists while there are any (and on a category page, under Other categories).
   -------------------------------------------------------------------------- */
.page--portal .portal-help-layout,
.page--portal .portal-help-layout__main {
    display: flex;
    flex-direction: column;
    gap: var(--cv-gap-section);
    min-width: 0;
}

.page--portal .portal-help-layout--with-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
    gap: 1.5rem;
}

.page--portal .portal-help-layout__side,
.page--portal .portal-support-category__side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .page--portal .portal-support-category,
    .page--portal .portal-help-layout--with-side {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    /* Get help: the panels stack, problems first (the order they render in). */
    .page--portal .portal-help-doors,
    .page--portal .portal-help-list--recent {
        grid-template-columns: minmax(0, 1fr);
    }

    .page--portal .portal-help-list--recent .portal-help-row + .portal-help-row {
        border-top: 1px solid var(--cv-border-subtle);
        border-left: 0;
    }

    .page--portal .portal-support-search {
        min-height: 3.25rem;
    }

    .page--portal .portal-support-search__keys {
        display: none;
    }

    .page--portal .portal-support-row__price,
    .page--portal .portal-support-row__kind {
        display: none;
    }

    .page--portal .portal-support-row__action {
        min-width: 0;
    }

    .page--portal .portal-support-form__card {
        padding: 1rem;
    }

    .page--portal .portal-support-heading__title {
        font-size: 1.375rem;
    }

    .page--portal .portal-support-sticky__status {
        flex-basis: 100%;
    }
}

/* --------------------------------------------------------------------------
   Ticket detail (Pages/Portal/TicketDetail.razor)
   The thread on the left, a details panel on the right that drops under the thread on narrow screens.
   A ticket waiting on the customer leads with a warm panel holding the reply box.
   -------------------------------------------------------------------------- */
.page--portal .portal-ticket__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: calc(var(--cv-gap-section) * -0.5);
    color: var(--cv-text-muted);
    font-size: 0.875rem;
}

.page--portal .portal-ticket__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.page--portal .portal-ticket__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
}

.page--portal .portal-ticket__main,
.page--portal .portal-ticket__aside {
    display: flex;
    flex-direction: column;
    gap: var(--cv-gap-section);
    min-width: 0;
}

.page--portal .portal-ticket__panel {
    padding: 1rem 1.25rem;
}

.page--portal .portal-ticket__panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.page--portal .portal-ticket__panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: var(--cv-text);
    font-size: 1rem;
    font-weight: 650;
}

.page--portal .portal-ticket__panel-head .portal-ticket__panel-title {
    margin-bottom: 0;
}

/* Refresh and Jump to latest sit together at the end of the conversation heading. */
.page--portal .portal-ticket__panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* "Checking for new replies…": a quiet line under the heading, not a blocking spinner. */
.page--portal .portal-ticket__checking {
    margin: 0.5rem 0 0.25rem;
    color: var(--cv-text-muted);
    font-size: 0.875rem;
}

.page--portal .portal-ticket__count {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.page--portal .portal-ticket__muted {
    color: var(--cv-text-muted);
}

/* Waiting on you: the ask first, with the reply box already open. */
.page--portal .portal-ticket__waiting {
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--cv-attention-warning);
    border-radius: var(--cv-radius-card);
    background: color-mix(in srgb, var(--cv-attention-warning) 10%, var(--cv-surface));
}

.page--portal .portal-ticket__waiting-head {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.page--portal .portal-ticket__waiting-head > .bi {
    margin-top: 0.125rem;
    color: var(--cv-attention-warning-text);
    font-size: 1.25rem;
}

.page--portal .portal-ticket__waiting-title {
    margin: 0;
    color: var(--cv-text);
    font-size: 1.0625rem;
    font-weight: 700;
}

.page--portal .portal-ticket__waiting-text {
    margin: 0.25rem 0 0;
    color: var(--cv-text);
    font-size: 0.9375rem;
}

.page--portal .portal-ticket__waiting .portal-ticket__composer {
    margin-top: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--cv-portal-brand-line);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
}

/* Reply box */
.page--portal .portal-ticket__composer {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.page--portal .portal-ticket__composer-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.page--portal .portal-ticket__composer-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

/* Conversation: each entry is a CvThreadEntry (css/corvue-ui.css "Thread entries") beside its avatar. Customer
   entries sit on the sunken surface; support team entries carry the tenant's brand rule; a resolution keeps the
   wrapper's Success rule. Every colour is a theme token, so dark mode needs no override here (the injected-HTML
   colour guard is the wrapper's, in corvue-ui.css). */
.page--portal .portal-ticket__thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.page--portal .portal-ticket__entry {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
    scroll-margin-top: calc(var(--cv-portal-header-height) + 1rem);
}

.page--portal .portal-ticket__avatar {
    width: 2.25rem;
    height: 2.25rem;
}

.page--portal .portal-ticket__avatar--staff {
    background: var(--cv-portal-brand);
    color: var(--cv-portal-brand-contrast);
    font-size: 1rem;
}

.page--portal .portal-ticket__bubble {
    font-size: 0.9375rem;
}

.page--portal .portal-ticket__bubble--customer {
    background: var(--cv-surface-sunken);
}

.page--portal .portal-ticket__bubble--staff {
    border-left-color: var(--cv-portal-accent);
}

.page--portal .portal-ticket__entry-time {
    font-variant-numeric: tabular-nums;
}

/* Files */
.page--portal .portal-ticket__files {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page--portal .portal-ticket__file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-ticket__file:first-child {
    border-top: 0;
}

.page--portal .portal-ticket__file-icon {
    color: var(--cv-text-muted);
    font-size: 1.125rem;
}

.page--portal .portal-ticket__file-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.page--portal .portal-ticket__file-name {
    color: var(--cv-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.page--portal .portal-ticket__file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-ticket__file-status--failed {
    color: var(--cv-severity-critical);
    font-weight: 600;
}

/* Details panel: CvFact keeps its own stacked label-over-value layout; its styles stay in CvFact.razor.css. */
.page--portal .portal-ticket__facts {
    gap: 0.625rem;
}

/* One compact details card: facts, a short timeline, then when the ticket was last updated. */
.page--portal .portal-ticket__aside-divider {
    border: 0;
    border-top: 1px solid var(--cv-border-subtle);
    margin: 0.875rem 0;
}

.page--portal .portal-ticket__updated {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

/* Satisfaction rating (closed tickets) */
.page--portal .portal-ticket__rating {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.page--portal .portal-ticket__rating-actions {
    margin-top: 1rem;
}

.page--portal .portal-ticket__rating-done {
    margin: 0;
}

.page--portal .portal-ticket__rating-comment {
    display: block;
    margin-top: 0.5rem;
    color: var(--cv-text-muted);
}

@media (max-width: 991.98px) {
    .page--portal .portal-ticket__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .page--portal .portal-ticket__panel,
    .page--portal .portal-ticket__waiting {
        padding: 0.875rem 1rem;
    }

    .page--portal .portal-ticket__entry {
        grid-template-columns: minmax(0, 1fr);
    }

    .page--portal .portal-ticket__avatar {
        display: none;
    }

    .page--portal .portal-ticket__send {
        width: 100%;
    }
}