/* ============================================================================
 * Profile + forms
 * ============================================================================ */
.profile-header { display: flex; align-items: center; gap: 16px; }
.profile-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 1.4rem;
}
.profile-meta { flex: 1 1 auto; }
.profile-meta h3 { margin: 0; font-size: 1.1rem; }
.profile-meta p { margin: 2px 0 0; color: var(--text-muted); font-size: .85rem; }

.form-card,
.page-narrow {
    max-width: var(--page-max-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full-width { grid-column: 1 / -1; }
.form-label {
    display: block; font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); margin-bottom: 6px;
}
.field-error { color: var(--danger); font-size: .8rem; margin-top: 4px; }

/* Label carrying an inline info circle (see FieldLabel.razor): lay the text and
   the icon out on one row. The icon is a touch larger than the uppercase label
   so the "i" reads clearly, and never inherits the label's uppercasing. */
.form-label.has-info { display: flex; align-items: center; gap: 6px; }
.field-info {
    font-size: .95rem;
    color: var(--text-muted);
    cursor: help;
    text-transform: none;
    line-height: 1;
    transition: color .15s ease;
}
.field-info:hover,
.field-info:focus-visible { color: var(--primary); outline: none; }

/* Step-by-step progress shown during ticket submission so the user sees
   create / upload / log-note status — and partial failures don't crash. */
.submit-progress {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.submit-progress h4 {
    margin: 0 0 10px;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--text-muted);
}
.submit-step {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 0;
    font-size: .88rem;
    color: var(--text);
}
.submit-step-icon { width: 16px; text-align: center; flex-shrink: 0; }
.submit-step-label { font-weight: 500; }
.submit-step-detail { color: var(--text-muted); font-size: .82rem; }

.submit-step.is-pending .submit-step-icon { color: var(--text-muted); opacity: .4; font-size: .55rem; }
.submit-step.is-pending .submit-step-label { color: var(--text-muted); }
.submit-step.is-running .submit-step-icon { color: var(--primary); }
.submit-step.is-done .submit-step-icon    { color: var(--success); }
.submit-step.is-failed .submit-step-icon  { color: var(--danger); }
.submit-step.is-failed .submit-step-label { color: var(--danger); }
.submit-step.is-failed .submit-step-detail { color: var(--danger); opacity: .85; }
.form-description textarea.e-input { min-height: 160px; resize: vertical; }
.form-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 20px;
    padding-top: 16px; border-top: 1px solid var(--border);
}

/* Syncfusion primary button override */
.e-btn.e-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px -3px rgba(var(--s2c-primary-rgb),.35);
}
.e-btn.e-primary:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Non-primary Syncfusion buttons — give them a clean themed surface
   (white card in light, dark surface in dark) instead of Syncfusion's
   default grey btn-light look, and tint only the icon with the brand
   colour. The label keeps the theme text colour (black on light, white
   on dark) so the button reads as "secondary" — only the icon glows.
   Excludes .e-primary (brand-filled), .e-confirm-danger (red), .e-flat
   (transparent, no background by design) and .e-link (text-only). */
.e-btn:not(.e-primary):not(.e-confirm-danger):not(.e-flat):not(.e-link) {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.e-btn:not(.e-primary):not(.e-confirm-danger):not(.e-flat):not(.e-link):hover {
    background: var(--surface-alt) !important;
    border-color: var(--primary) !important;
}
.e-btn:not(.e-primary):not(.e-confirm-danger) .e-btn-icon,
.e-btn:not(.e-primary):not(.e-confirm-danger) > i {
    color: var(--primary) !important;
}
.e-btn:not(.e-primary):not(.e-confirm-danger):hover .e-btn-icon,
.e-btn:not(.e-primary):not(.e-confirm-danger):hover > i {
    color: var(--primary-hover) !important;
}

/* Destructive-action primary button — red tint for confirmation dialogs. */
.e-btn.e-confirm-danger,
.e-btn.e-primary.e-confirm-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    box-shadow: 0 4px 12px -3px rgba(220, 53, 69, .35);
}
.e-btn.e-confirm-danger:hover,
.e-btn.e-primary.e-confirm-danger:hover {
    background: color-mix(in oklab, var(--danger) 88%, black) !important;
    border-color: color-mix(in oklab, var(--danger) 88%, black) !important;
}

.confirm-dialog-message {
    margin: 0 0 8px;
    color: var(--text);
    font-size: .92rem;
    line-height: 1.5;
}

/* ============================================================================
 * Alerts + empty states
 * ============================================================================ */
.alert-warn {
    background: #fffae6; color: #974f0c;
    border: 1px solid #ffe0a0;
    padding: 12px 16px; border-radius: 8px;
    display: flex; align-items: center; gap: 10px;
}
.alert-error {
    background: #ffebe6; color: #bf2600;
    border: 1px solid #ffbdad;
    padding: 12px 16px; border-radius: 8px;
}
[data-bs-theme="dark"] .alert-warn { background: rgba(238,173,0,.15); color: #f7d27a; border-color: rgba(238,173,0,.30); }
[data-bs-theme="dark"] .alert-error { background: rgba(220,53,69,.15); color: #f0a5ad; border-color: rgba(220,53,69,.30); }

.empty-state { text-align: center; padding: 48px 16px; color: var(--text-muted); }
.empty-state h2 { margin: 12px 0 4px; }
.empty-state i { font-size: 3rem; color: var(--border); }
.center-block { display: flex; justify-content: center; align-items: center; padding: 48px 16px; }

/* ============================================================================
 * Release notes
 * ============================================================================ */
.releasenotes-card {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.releasenotes-tabs {
    flex: 1; min-height: 0;
    display: flex !important; flex-direction: column;
}
.releasenotes-tabs .e-content {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
}
.releasenotes-tabs .e-content .e-item {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    padding: 14px 16px;
}
.releasenotes-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--primary) !important; }
.releasenotes-tabs .e-tab-header .e-indicator { background: var(--primary) !important; }

.releasenotes-pdf-wrap {
    width: 100%;
    /* topbar 50 + .s2c-main padding (40) + hero (~140) + card chrome (~80) */
    height: calc(100vh - 320px);
    min-height: 520px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-alt);
}
.releasenotes-pdf-wrap .e-pv-viewer-container { height: 100%; width: 100%; }

/* Support release notes — holds one or two independently-scrolling panes
   (guide + per-version releases). The card itself does not scroll; each pane
   does. On wide screens the panes sit side by side; on small screens they
   collapse to tabs (see the media query below). */
.releasenotes-md-card {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.rn-pane { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: 24px 28px; }
.rn-pane:not(.is-active) { display: none; }   /* one pane (tab) visible at a time */
.releasenotes-split { flex: 1; min-height: 0; display: flex; }

/* Guide / Releases tabs — always shown (on every width) when both documents
   are present, so there's only ever one pane and one back-to-top button. */
.rn-tabs { display: flex; gap: 4px; padding: 8px 12px 0; border-bottom: 1px solid var(--border); }
.rn-tab {
    background: transparent; border: none; cursor: pointer;
    padding: 8px 16px; font-family: inherit; font-size: .9rem; font-weight: 600;
    color: var(--text-muted); border-bottom: 2px solid transparent;
}
.rn-tab:hover { color: var(--text); }
.rn-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.md-content { max-width: 900px; color: var(--text); line-height: 1.6; }
.md-content > :first-child { margin-top: 0; }
.md-content h1, .md-content h2, .md-content h3, .md-content h4 {
    color: var(--text); font-weight: 600; line-height: 1.25; margin: 1.4em 0 .5em;
}
.md-content h1 { font-size: 1.6rem; }
.md-content h2 { font-size: 1.3rem; }
.md-content h3 { font-size: 1.1rem; }
.md-content h4 { font-size: 1rem; }
.md-content p { margin: 0 0 1em; }
.md-content ul, .md-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.md-content li { margin: .25em 0; }
.md-content a { color: var(--primary); }
.md-content img {
    max-width: 100%; height: auto; display: block; margin: .5em 0;
    border: 1px solid var(--border); border-radius: 8px;
}
.md-content hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
.md-content code {
    background: var(--surface-alt); border-radius: 4px; padding: .1em .35em; font-size: .9em;
}
.md-content table { border-collapse: collapse; margin: 0 0 1em; }
.md-content th, .md-content td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.md-content th { background: var(--surface-alt); font-weight: 600; }

/* Back-to-top button on the Support page. The panes scroll internally, so the
   button lives OUTSIDE them and is pinned to the bottom-right of the page (the
   .releasenotes-page wrapper is the positioning context); JS scrolls the
   pane(s) to top on click. */
.releasenotes-page { position: relative; }
.back-to-top {
    position: absolute;
    right: 24px; bottom: 24px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    z-index: 50;
    transition: background .15s ease, transform .15s ease;
}
.back-to-top:hover { background: var(--primary-hover); transform: translateY(-2px); }

.releasenotes-picker {
    display: flex; flex-direction: column; gap: 4px;
    max-width: 480px;
    margin-bottom: 12px;
}
.releasenotes-picker .form-label { margin: 0; }