/* Support page — list-style portal page that uses the shared
   .gpc-page-container / .gpc-content-shell / .gpc-tab-shell /
   .gpc-list-wrap rules in css/shared/page-shell.css. Filters live
   in the layout drawer's PLO slot, so this sheet only carries the
   FAQ row + Contact-us conversation styling that's specific to
   Support. */

.support-content-shell {
    /* Hook for future per-page tweaks; gpc-content-shell handles
       width / centring and gpc-tab-shell handles the tab strip. */
}

/* Form & ticket cards keep their slightly heavier card styling so
   they read as primary content (vs the lighter expansion-panel rows
   in the FAQs tab). */
.support-page-container .mud-card {
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.support-page-container .mud-card-header {
    padding-top: 14px;
    padding-bottom: 8px;
}

.support-page-container .mud-card-content {
    padding-top: 10px;
    padding-bottom: 12px;
}

/* ── Filter context strip ────────────────────────────────────────────
   Reads "Showing N of M answers" and only renders when search /
   category filters are active. Sits above the first section so users
   can see at a glance how much the filter has narrowed things. */
.support-faq-filter-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 12px;
    font-size: 0.78rem;
    color: #5a5f7a;
}

.support-faq-filter-summary strong {
    color: #34384E;
    font-weight: 600;
}

/* ── Section grouping ────────────────────────────────────────────────
   Each FAQ category renders as a section: a clickable header band
   (category icon + name + count + chevron) with the article panels
   below. Header is a <button> to keep the click target accessible
   and keyboard-operable; the all-defaults browser button styling is
   reset so it looks like the inline text it visually is. Spacing
   between sections is owned by the adjacent-sibling rule below so
   no per-section margin class is needed in the markup.

   The per-section accent colour is delivered via a CSS custom
   property `--faq-accent`, set inline by Support.razor's
   GetCategoryAccent() lookup. Everything that's "themed" by the
   accent — left rail, icon tint, divider tint, count-chip tint,
   hover tint — derives from that single variable so adding a new
   category is a one-line edit in the C# switch. The default value
   below means new categories rendered without an accent still get
   a neutral slate look rather than `currentColor` cascading. */
.support-faq-section {
    --faq-accent: #565C82;
    margin-top: 0;
    padding: 4px 8px 8px 10px;
    /* 3px left rail tinted to the category accent. Pulled out of the
       header into the section wrapper so the rail also runs down the
       side of the article panels, visually binding them to their
       group like a folder tab. */
    border-left: 3px solid color-mix(in srgb, var(--faq-accent) 70%, transparent);
    border-radius: 0 3px 3px 0;
    /* Every section gets a soft accent-tinted background so the
       per-category colouring carries through the whole panel rather
       than only living on the icon / rail. 5% reads as a gentle wash;
       it's strong enough to identify the group at a glance, weak
       enough that it doesn't fight the white article cards inside. */
    background: color-mix(in srgb, var(--faq-accent) 5%, transparent);
    transition: background 180ms ease;
}

/* Topmost section gets a stronger 11% tint — a "start here" cue
   that anchors the eye when the user lands. The contrast against
   the 5% baseline on the other sections is intentional and reads
   as "this section is the one in focus" without needing an extra
   chip or callout. */
.support-faq-section--top {
    background: color-mix(in srgb, var(--faq-accent) 11%, transparent);
}

.support-faq-section + .support-faq-section {
    margin-top: 22px;
}

.support-faq-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 4px;
    margin-bottom: 6px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid color-mix(in srgb, var(--faq-accent) 32%, rgba(0,0,0,0.06));
    text-align: left;
    cursor: pointer;
    color: #34384E;
    font: inherit;
    transition: background 120ms ease, border-color 120ms ease;
}

.support-faq-section-header:hover {
    background: color-mix(in srgb, var(--faq-accent) 6%, transparent);
    border-bottom-color: color-mix(in srgb, var(--faq-accent) 55%, transparent);
}

.support-faq-section-header:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--faq-accent) 55%, transparent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Coloured category icon — sits at the start of the header row,
   tinted to the section's accent. Mud's `.mud-icon-root` colour rule
   is fairly specific, so we !important here to win the cascade
   without dialling specificity any further. */
.support-faq-section-header .support-faq-cat-icon {
    color: var(--faq-accent) !important;
    flex: 0 0 auto;
}

/* Chevron sits at the trailing edge of the row so the natural
   reading order is icon → title → count → state. Greyed because
   collapsed/expanded state is a UI affordance, not category-themed. */
.support-faq-section-header .support-faq-chevron {
    color: #9aa0b8 !important;
    flex: 0 0 auto;
}

.support-faq-section-title {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 600;
    color: #34384E;
    letter-spacing: 0.005em;
}

.support-faq-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--faq-accent) 14%, transparent);
    color: var(--faq-accent);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
}

/* ── Article panels ──────────────────────────────────────────────────
   Same row treatment as the legacy flat list — rounded card with a
   light border — but tucked inside a section so the bottom margin is
   reduced to keep the group visually cohesive. */
.support-faq-panels {
    margin-bottom: 0 !important;
}

.support-faq-panels .mud-expand-panel {
    border-radius: 10px !important;
    margin-bottom: 8px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
}

.support-faq-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 32px;
}

.support-faq-title-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.support-faq-title {
    font-size: 0.9rem;
    color: #333;
    font-weight: 600;
}

.support-faq-meta {
    font-size: 0.72rem;
    color: #999;
}

.support-faq-body {
    padding: 4px 0 12px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #444;
}

.support-faq-body p { margin: 0 0 8px; }
.support-faq-body ul { margin: 0 0 8px 16px; padding: 0; }
.support-faq-body li { margin-bottom: 2px; }

/* ── Search-term highlighting ────────────────────────────────────────
   <mark> wrappers inside titles and bodies. Teal accent matches the
   "selected ticket" tint already used elsewhere on this sheet, so
   highlighting feels native to the Support surface rather than
   browser-default yellow. */
.support-faq-title mark,
.support-faq-body mark {
    background: rgba(47, 143, 131, 0.18);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
}

/* When the URL hash deep-links a specific article, give the panel a
   gentle 1.5-second pulse so the user can see where the link landed.
   The class is applied implicitly by the browser via :target — no JS
   needed beyond the initial scrollIntoView call. */
.support-faq-panel:target > .mud-expand-panel-header,
.support-faq-panels .mud-expand-panel:target > .mud-expand-panel-header {
    background: rgba(47, 143, 131, 0.10);
    transition: background 1500ms ease;
}

.support-ticket-list .mud-list-item {
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 6px;
}

.support-ticket-selected {
    background: rgba(47, 143, 131, 0.08);
}

.support-ticket-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.support-msg {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    max-width: 92%;
}

.support-msg-doctor {
    margin-left: auto;
    background: rgba(47, 143, 131, 0.12);
    border: 1px solid rgba(47, 143, 131, 0.25);
}

.support-msg-staff {
    margin-right: auto;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.08);
}

.support-msg-meta {
    font-size: 0.72rem;
    color: #888;
    margin-bottom: 4px;
}

.support-msg-body {
    font-size: 0.88rem;
    white-space: pre-wrap;
    line-height: 1.5;
}