/* ============================================================
   HireARef — Brand Design Tokens
   ============================================================ */

:root {
    --har-primary:         #1a1a1a;
    --har-secondary:       #ffffff;
    --har-accent-orange:   #FF6B00;
    --har-accent-yellow:   #FFD600;
    --har-accent-hover:    #e55f00;   /* default hover; overridden per-tenant by layouts via DarkenHex() */
    --har-bg:              #f5f5f5;
    --har-danger:          #cc0000;
    --har-text:            #212121;
    --har-text-muted:      #6b6b6b;
    --har-border:          #e0e0e0;
    --har-nav-bg:          #1a1a1a;
    --har-nav-text:        #ffffff;
    --har-nav-hover:       var(--har-accent-hover);
    --har-header-height:   38px;
}

/* ============================================================
   Global Base Styles
   ============================================================ */

body {
    background-color: var(--har-bg);
    color: var(--har-text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    padding: 0;
}

a {
    color: var(--har-accent-orange);
}

a:hover {
    color: var(--har-primary);
}

/* ============================================================
   Bootstrap 5 Grid Shim
   The Syncfusion Bootstrap5 theme does not ship the Bootstrap grid.
   ============================================================ */

.container,
.container-fluid {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* Gutters */
.g-0  { --bs-gutter-x: 0;      --bs-gutter-y: 0; }
.g-1  { --bs-gutter-x: 0.25rem; --bs-gutter-y: 0.25rem; }
.g-2  { --bs-gutter-x: 0.5rem;  --bs-gutter-y: 0.5rem; }
.g-3  { --bs-gutter-x: 1rem;    --bs-gutter-y: 1rem; }
.g-4  { --bs-gutter-x: 1.5rem;  --bs-gutter-y: 1.5rem; }
.g-5  { --bs-gutter-x: 3rem;    --bs-gutter-y: 3rem; }

/* Base columns */
.col       { flex: 1 0 0%; }
.col-auto  { flex: 0 0 auto; width: auto; }
.col-1     { flex: 0 0 auto; width: 8.33333333%; }
.col-2     { flex: 0 0 auto; width: 16.66666667%; }
.col-3     { flex: 0 0 auto; width: 25%; }
.col-4     { flex: 0 0 auto; width: 33.33333333%; }
.col-5     { flex: 0 0 auto; width: 41.66666667%; }
.col-6     { flex: 0 0 auto; width: 50%; }
.col-7     { flex: 0 0 auto; width: 58.33333333%; }
.col-8     { flex: 0 0 auto; width: 66.66666667%; }
.col-9     { flex: 0 0 auto; width: 75%; }
.col-10    { flex: 0 0 auto; width: 83.33333333%; }
.col-11    { flex: 0 0 auto; width: 91.66666667%; }
.col-12    { flex: 0 0 auto; width: 100%; }

/* Small breakpoint (≥576px) */
@media (min-width: 576px) {
    .col-sm      { flex: 1 0 0%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-1    { flex: 0 0 auto; width: 8.33333333%; }
    .col-sm-2    { flex: 0 0 auto; width: 16.66666667%; }
    .col-sm-3    { flex: 0 0 auto; width: 25%; }
    .col-sm-4    { flex: 0 0 auto; width: 33.33333333%; }
    .col-sm-5    { flex: 0 0 auto; width: 41.66666667%; }
    .col-sm-6    { flex: 0 0 auto; width: 50%; }
    .col-sm-7    { flex: 0 0 auto; width: 58.33333333%; }
    .col-sm-8    { flex: 0 0 auto; width: 66.66666667%; }
    .col-sm-9    { flex: 0 0 auto; width: 75%; }
    .col-sm-10   { flex: 0 0 auto; width: 83.33333333%; }
    .col-sm-11   { flex: 0 0 auto; width: 91.66666667%; }
    .col-sm-12   { flex: 0 0 auto; width: 100%; }
}

/* Medium breakpoint (≥768px) */
@media (min-width: 768px) {
    .col-md      { flex: 1 0 0%; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1    { flex: 0 0 auto; width: 8.33333333%; }
    .col-md-2    { flex: 0 0 auto; width: 16.66666667%; }
    .col-md-3    { flex: 0 0 auto; width: 25%; }
    .col-md-4    { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-5    { flex: 0 0 auto; width: 41.66666667%; }
    .col-md-6    { flex: 0 0 auto; width: 50%; }
    .col-md-7    { flex: 0 0 auto; width: 58.33333333%; }
    .col-md-8    { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9    { flex: 0 0 auto; width: 75%; }
    .col-md-10   { flex: 0 0 auto; width: 83.33333333%; }
    .col-md-11   { flex: 0 0 auto; width: 91.66666667%; }
    .col-md-12   { flex: 0 0 auto; width: 100%; }
}

/* Large breakpoint (≥992px) */
@media (min-width: 992px) {
    .col-lg      { flex: 1 0 0%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1    { flex: 0 0 auto; width: 8.33333333%; }
    .col-lg-2    { flex: 0 0 auto; width: 16.66666667%; }
    .col-lg-3    { flex: 0 0 auto; width: 25%; }
    .col-lg-4    { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5    { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6    { flex: 0 0 auto; width: 50%; }
    .col-lg-7    { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8    { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9    { flex: 0 0 auto; width: 75%; }
    .col-lg-10   { flex: 0 0 auto; width: 83.33333333%; }
    .col-lg-11   { flex: 0 0 auto; width: 91.66666667%; }
    .col-lg-12   { flex: 0 0 auto; width: 100%; }
}

/* XL breakpoint (≥1200px) */
@media (min-width: 1200px) {
    .col-xl      { flex: 1 0 0%; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1    { flex: 0 0 auto; width: 8.33333333%; }
    .col-xl-2    { flex: 0 0 auto; width: 16.66666667%; }
    .col-xl-3    { flex: 0 0 auto; width: 25%; }
    .col-xl-4    { flex: 0 0 auto; width: 33.33333333%; }
    .col-xl-5    { flex: 0 0 auto; width: 41.66666667%; }
    .col-xl-6    { flex: 0 0 auto; width: 50%; }
    .col-xl-7    { flex: 0 0 auto; width: 58.33333333%; }
    .col-xl-8    { flex: 0 0 auto; width: 66.66666667%; }
    .col-xl-9    { flex: 0 0 auto; width: 75%; }
    .col-xl-10   { flex: 0 0 auto; width: 83.33333333%; }
    .col-xl-11   { flex: 0 0 auto; width: 91.66666667%; }
    .col-xl-12   { flex: 0 0 auto; width: 100%; }
}

/* ============================================================
   Bootstrap 5 Utility Shim
   The Syncfusion Bootstrap5 theme does not ship utility classes.
   These mirror the Bootstrap 5 utilities used throughout the app.
   ============================================================ */

/* Display */
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-none         { display: none !important; }
.d-grid         { display: grid !important; }

/* Flex */
.flex-row       { flex-direction: row !important; }
.flex-column    { flex-direction: column !important; }
.flex-wrap      { flex-wrap: wrap !important; }
.flex-nowrap    { flex-wrap: nowrap !important; }
.flex-grow-1    { flex-grow: 1 !important; }
.flex-shrink-0  { flex-shrink: 0 !important; }

/* Justify / Align */
.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start       { align-items: flex-start !important; }
.align-items-center      { align-items: center !important; }
.align-items-end         { align-items: flex-end !important; }

/* Gap */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Margin */
.m-0  { margin: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }

/* Padding */
.p-0  { padding: 0 !important; }
.p-1  { padding: 0.25rem !important; }
.p-2  { padding: 0.5rem !important; }
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }

/* Text */
.text-muted    { color: var(--har-text-muted) !important; }
.text-center   { text-align: center !important; }
.text-end      { text-align: right !important; }
.text-start    { text-align: left !important; }
.text-success  { color: #198754 !important; }
.text-danger   { color: #dc3545 !important; }
.text-warning  { color: #ffc107 !important; }
.text-dark     { color: #212529 !important; }
.text-white    { color: #ffffff !important; }
.fw-bold       { font-weight: 700 !important; }
.fw-semibold   { font-weight: 600 !important; }
.fw-normal     { font-weight: 400 !important; }
.small         { font-size: 0.875em !important; }

/* Width / Height */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }

/* Border / Rounded */
.border        { border: 1px solid var(--har-border) !important; }
.border-0      { border: 0 !important; }
.rounded       { border-radius: 0.375rem !important; }
.rounded-1     { border-radius: 0.25rem !important; }
.rounded-2     { border-radius: 0.375rem !important; }
.rounded-3     { border-radius: 0.5rem !important; }

/* Overflow */
.overflow-auto   { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }

/* Position */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }

/* ============================================================
   Layout Utility Classes
   ============================================================ */

.har-admin-badge {
    display: inline-block;
    background-color: var(--har-danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    margin-left: 0.5rem;
}

.har-role-selector {
    display: inline-flex;
    align-items: center;
}

/* ── Role Tabs (nav bar multi-role switcher) ── */
.har-role-tabs {
    display: flex;
    gap: 3px;
    align-items: center;
}

.har-role-tab {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.75);
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.5;
    transition: background 0.15s, color 0.15s;
}

.har-role-tab:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.har-role-tab--active {
    background: var(--har-accent-orange);
    border-color: var(--har-accent-orange);
    color: #fff;
    font-weight: 600;
}

.har-role-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--har-accent-orange);
    background-color: rgba(255, 107, 0, 0.15);
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
}

.har-powered-by {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.5rem;
}

.har-powered-by a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.har-powered-by a:hover {
    color: var(--har-accent-orange);
}

/* ============================================================
   Error & Status Pages
   ============================================================ */

.har-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    padding: 2rem;
}

.har-error-code {
    font-size: 6rem;
    font-weight: 800;
    color: var(--har-accent-orange);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.har-error-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--har-primary);
    margin-bottom: 1rem;
}

.har-error-message {
    font-size: 1rem;
    color: var(--har-text-muted);
    margin-bottom: 2rem;
    max-width: 480px;
}

.har-error-actions a {
    display: inline-block;
    padding: 0.625rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    margin: 0 0.5rem;
}

.har-btn-primary {
    background-color: var(--har-accent-orange);
    color: #fff;
}

.har-btn-primary:hover {
    background-color: var(--har-accent-hover);
    color: #fff;
}

.har-btn-secondary {
    background-color: transparent;
    color: var(--har-text);
    border: 1px solid var(--har-border);
}

.har-btn-secondary:hover {
    border-color: var(--har-accent-orange);
    color: var(--har-accent-orange);
}

/* ============================================================
   Public Page Styles
   ============================================================ */

.har-hero {
    background-color: var(--har-primary);
    color: var(--har-secondary);
    padding: 4rem 2rem;
    text-align: center;
    margin: 0.375rem -1.5rem 2rem;
}

.har-hero h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.har-hero h1 .har-highlight {
    color: var(--har-accent-orange);
}

.har-hero p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.har-hero .har-hero-promo {
    display: inline-block;
    background-color: var(--har-accent-yellow);
    color: var(--har-primary);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.4rem 1.25rem;
    border-radius: 999px;
    margin: 0 auto 1.5rem;
    box-shadow: 0 0 0 3px rgba(255, 214, 0, 0.25);
}

.har-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.har-hero-actions a {
    padding: 0.75rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
}

.har-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.har-feature-card {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--har-border);
}

.har-feature-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--har-primary);
}

.har-feature-card p {
    color: var(--har-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── FAQ / Help category list (real Bootstrap CSS isn't loaded site-wide,
   only Syncfusion's bootstrap5 theme — so .list-group needs its own rules
   here rather than relying on the unused wwwroot/bootstrap/bootstrap.min.css) ── */
.list-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.list-group-item {
    display: block;
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 8px;
    padding: 0.875rem 1.25rem;
    color: var(--har-text);
    text-decoration: none;
}

.list-group-item-action:hover {
    border-color: var(--har-accent-orange);
    color: var(--har-accent-orange);
}

/* ── Association / Scheduler CTA ───────────────────────────────────────── */
.har-assoc-cta {
    background: var(--har-primary);
    color: #fff;
    margin: 2rem 0 0;
    padding: 3rem 2rem;
    border-radius: 8px;
}

.har-assoc-cta-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.har-assoc-cta h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: var(--har-accent-orange);
}

.har-assoc-cta p {
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 1.25rem;
}

.har-assoc-cta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
    display: inline-block;
}

.har-assoc-cta-list li {
    padding: 0.3rem 0 0.3rem 1.5rem;
    position: relative;
    font-size: 0.92rem;
    opacity: 0.9;
}

.har-assoc-cta-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--har-accent-orange);
    font-weight: 700;
}

.har-static-page {
    max-width: 800px;
    margin: 0 auto;
}

.har-static-page h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--har-primary);
    margin-bottom: 1.5rem;
}

.har-static-page h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--har-primary);
    margin: 2rem 0 0.75rem;
}

.har-static-page p,
.har-static-page li {
    line-height: 1.7;
    color: var(--har-text);
}

.har-cms-placeholder {
    background-color: rgba(255, 107, 0, 0.05);
    border: 2px dashed var(--har-border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: var(--har-text-muted);
    font-size: 0.9rem;
    margin: 2rem 0;
}

@media (max-width: 767.98px) {
    .har-hero {
        padding: 2.5rem 1rem;
        margin: 0.375rem -1rem 1.5rem;
    }

    .har-hero h1 {
        font-size: 1.75rem;
    }
}

/* ============================================================
   Auth Layout Navigation (plain HTML, no Syncfusion)
   ============================================================ */

.har-auth-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--har-nav-bg);
    padding: 0.75rem 1.5rem;
}

.har-auth-nav .har-logo {
    text-decoration: none;
}

.har-auth-nav .har-logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--har-nav-text);
}

.har-auth-nav-links {
    display: flex;
    gap: 1.25rem;
}

.har-auth-nav-links a {
    color: var(--har-nav-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.har-auth-nav-links a:hover {
    color: var(--har-accent-orange);
}

/* ============================================================
   Authentication Pages (Register, Login, Reset, etc.)
   ============================================================ */

.har-auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 80vh;
    padding: 2rem 1rem;
}

.har-auth-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--har-border);
    padding: 2.5rem;
    width: 100%;
    max-width: 480px;
}

.har-auth-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.har-auth-logo img {
    max-height: 48px;
    width: auto;
}

.har-auth-logo .har-logo-text {
    display: inline-block;
    background-color: var(--har-primary);
    padding: 5px;
    border-radius: 6px;
}

.har-logo-text-lg {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--har-primary);
    text-decoration: none;
}

.har-logo-accent {
    color: var(--har-accent-orange);
}

.har-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--har-primary);
    text-align: center;
    margin: 0 0 0.5rem;
}

.har-auth-subtitle {
    text-align: center;
    color: var(--har-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.har-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.har-form-group {
    margin-bottom: 1rem;
}

.har-form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.har-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--har-text);
    margin-bottom: 0.35rem;
}

.har-required {
    color: var(--har-danger);
}

.har-role-selection {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.har-legal-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.har-legal-text {
    font-size: 0.85rem;
    color: var(--har-text-muted);
    line-height: 1.4;
}

.har-legal-text a {
    color: var(--har-accent-orange);
    text-decoration: underline;
}

.har-btn-full {
    width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    margin-top: 0.5rem;
}

.har-btn-accent {
    background-color: var(--har-accent-orange);
    color: #fff;
}

.har-btn-accent:hover {
    background-color: var(--har-accent-hover);
    color: #fff;
}

.har-btn-accent:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.har-auth-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: var(--har-text-muted);
    font-size: 0.85rem;
}

.har-auth-divider::before,
.har-auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--har-border);
}

.har-auth-divider span {
    padding: 0 0.75rem;
}

.har-auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--har-text-muted);
}

.har-auth-footer a {
    color: var(--har-accent-orange);
    font-weight: 500;
}

.har-auth-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.85rem;
}

@media (max-width: 575.98px) {
    .har-auth-card {
        padding: 1.5rem;
    }

    .har-form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Dashboard Styles
   ============================================================ */

.har-dashboard {
    padding: 0;
}

.har-dashboard-header {
    margin-bottom: 2rem;
}

.har-dashboard-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--har-primary);
    margin: 0 0 0.25rem;
}

.har-dashboard-header p {
    color: var(--har-text-muted);
    margin: 0;
}

.har-give-alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff8f0;
    border: 2px solid var(--har-accent-orange);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    animation: har-give-alert-pulse 2s ease-in-out 3;
}

@keyframes har-give-alert-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
    50%       { box-shadow: 0 0 0 6px rgba(255, 107, 0, 0.2); }
}

.har-give-alert-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.har-give-alert-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.har-give-alert-body strong {
    font-size: 1rem;
    color: var(--har-primary);
}

.har-give-alert-body span {
    font-size: 0.875rem;
    color: var(--har-text-muted);
}

.har-give-alert-action {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--har-accent-orange);
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.har-give-alert-action:hover {
    background: #d95a00;
    color: #fff;
}

@media (max-width: 540px) {
    .har-give-alert {
        flex-direction: column;
        align-items: flex-start;
    }
    .har-give-alert-action {
        align-self: stretch;
        text-align: center;
    }
}

.har-dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.har-stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem;
    border: 1px solid var(--har-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.har-stat-card--highlight {
    border-color: var(--har-accent-orange);
    background: linear-gradient(135deg, #fff7f0 0%, #fff 60%);
    box-shadow: 0 2px 8px rgba(255, 107, 0, 0.15);
}

.har-stat-card--highlight h3 {
    color: var(--har-accent-orange);
}

.har-stat-card--highlight .har-stat-value {
    color: var(--har-accent-orange);
}

.har-stat-card h3 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--har-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.5rem;
}

.har-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--har-primary);
    line-height: 1;
}

.har-stat-subvalue {
    font-size: 0.8rem;
    color: var(--har-text-muted, #6c757d);
    margin-top: 0.3rem;
}

.har-link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--har-accent-orange);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.har-link-button:hover {
    color: var(--har-primary);
    text-decoration: underline;
}

.har-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.har-quick-actions a {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background-color: var(--har-accent-orange);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.har-quick-actions a:hover {
    background-color: var(--har-accent-hover);
    color: #fff;
}

.har-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--har-primary);
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--har-border);
}

/* ============================================================
   Profile Pages
   ============================================================ */

.har-profile-page {
    max-width: 640px;
}

.har-profile-section {
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--har-border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.har-profile-section h2 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--har-primary);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--har-border);
}

.har-error-banner {
    background-color: rgba(204, 0, 0, 0.08);
    color: var(--har-danger);
    border: 1px solid rgba(204, 0, 0, 0.2);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.har-success-msg {
    background-color: rgba(40, 167, 69, 0.1);
    color: #155724;
    border: 1px solid rgba(40, 167, 69, 0.2);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* ============================================================
   Application Shell Layout
   ============================================================ */

.har-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.har-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-shrink: 0;
}

.har-body {
    display: flex;
    flex: 1;
    position: relative;
    min-height: 0;
}

/* Wraps main + footer as a single flex item so Syncfusion's sidebar push-margin
   (applied only to its immediate next sibling in Auto/Push mode) offsets both —
   otherwise the footer, previously a sibling of .har-body, sat un-pushed and
   the fixed-position sidebar rendered on top of its left portion. */
.har-content-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.har-main {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
}

.har-content {
    padding: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
}

.har-footer {
    flex-shrink: 0;
    background-color: var(--har-primary);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.875rem 1.5rem;
}

.har-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.har-footer-links {
    display: flex;
    gap: 1rem;
}

.har-footer-links a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 0.85rem;
}

.har-footer-links a:hover {
    color: var(--har-accent-orange);
}

/* Standard Blazor Server error banner. Hidden by default; blazor.server.js
   toggles it visible on an unrecoverable circuit error. Without this rule
   the div has no styling at all and renders as a plain visible block. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

/* ============================================================
   Top Nav / Header Elements
   ============================================================ */

.har-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.har-logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--har-nav-text);
    letter-spacing: -0.01em;
}

.har-logo-img {
    max-height: 36px;
    width: auto;
}

.har-sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--har-nav-text);
    font-size: 1.35rem;
    cursor: pointer;
    padding: 0.25rem 0.6rem;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s ease;
}

.har-sidebar-toggle:hover {
    color: var(--har-accent-orange);
}

.har-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-right: 0.5rem;
}

.har-user-link {
    color: var(--har-nav-text);
    text-decoration: none;
    font-size: 0.85rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.har-user-link:hover {
    color: var(--har-accent-orange);
}

.har-notification-bell {
    color: var(--har-nav-text);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
}

.har-notification-bell--active {
    cursor: pointer;
}

.har-notification-bell:hover {
    color: var(--har-accent-orange);
}

.har-btn {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    line-height: 1.5;
}

.har-btn-outline {
    background: transparent;
    border-color: var(--har-accent-orange);
    color: var(--har-accent-orange);
}

.har-btn-outline:hover {
    background: var(--har-accent-orange);
    border-color: var(--har-accent-orange);
    color: #ffffff;
}

/* Outline buttons on dark backgrounds (sidebar, dark headers) stay white */
.har-sidebar .har-btn-outline,
.har-header .har-btn-outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}
.har-sidebar .har-btn-outline:hover,
.har-header .har-btn-outline:hover {
    border-color: var(--har-accent-orange);
    color: var(--har-accent-orange);
    background: transparent;
}

.har-btn-danger {
    background-color: var(--har-danger);
    color: #ffffff;
    border-color: var(--har-danger);
}

.har-btn-danger:hover {
    background-color: #a80000;
    border-color: #a80000;
    color: #ffffff;
}

.har-btn-sm {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
}

/* Anchor-tag button variants — same sizing as SfButton for consistent action rows */
.har-btn-outline-link,
.har-btn-flat-link,
.har-btn-primary-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1.5;
}

.har-btn-primary-link {
    background-color: var(--har-accent-orange);
    border-color: var(--har-accent-orange);
    color: #ffffff;
}

.har-btn-primary-link:hover {
    background-color: #d95a00;
    border-color: #d95a00;
    color: #ffffff;
}

.har-btn-outline-link {
    background: transparent;
    border-color: var(--har-accent-orange);
    color: var(--har-accent-orange);
}

.har-btn-outline-link:hover {
    background: var(--har-accent-orange);
    border-color: var(--har-accent-orange);
    color: #ffffff;
}

.har-btn-flat-link {
    background-color: var(--har-danger);
    border-color: var(--har-danger);
    color: #ffffff;
}

.har-btn-flat-link:hover {
    background-color: #a80000;
    border-color: #a80000;
    color: #ffffff;
}

/* Orange text link — compact inline action, no border box */
.har-action-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--har-accent-orange);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}

.har-action-link:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.har-action-link.har-action-link-danger {
    color: var(--har-danger);
}

/* ============================================================
   Stat/Dashboard Extras
   ============================================================ */

.har-stat-link {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--har-accent-orange);
    text-decoration: none;
    margin-top: 0.5rem;
}

.har-stat-link:hover {
    color: var(--har-primary);
}

.har-quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    background-color: var(--har-accent-orange);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
}

.har-quick-action-btn:hover {
    background-color: var(--har-accent-hover);
    color: #fff;
}

.har-qab-icon {
    font-size: 1.1rem;
}

/* ============================================================
   Account/Manage Page Styling
   ============================================================ */

.har-manage-page {
    max-width: 760px;
    width: 100%;
    padding: 2rem 1rem;
}

.har-manage-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--har-border);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.har-manage-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 160px;
}

.har-manage-nav a {
    display: block;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    color: var(--har-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}

.har-manage-nav a:hover,
.har-manage-nav a.active {
    background-color: rgba(255, 107, 0, 0.08);
    color: var(--har-accent-orange);
}

.har-validation-msg {
    color: var(--har-danger);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.har-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--har-border);
    border-radius: 4px;
    background-color: #fff;
    color: var(--har-text);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.har-input:focus {
    outline: none;
    border-color: var(--har-accent-orange);
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.15);
}

.har-input-disabled {
    background-color: #f5f5f5;
    color: var(--har-text-muted);
    cursor: not-allowed;
}

/* ── Facility Picker Component ─────────────────────────────────────────── */
.har-facility-picker {
    width: 100%;
}

.har-picker-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.har-picker-row .har-facility-ddl,
.har-picker-row .har-surface-ddl {
    flex: 1 1 auto;
    min-width: 0;
}

.har-btn-add-inline {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ── Placeholder / Coming Soon Notice ──────────────────────────────────── */
.har-placeholder-notice {
    background: #f8f9fa;
    border: 2px dashed var(--har-border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: var(--har-text-muted);
    margin-bottom: 1.5rem;
}

.har-placeholder-notice .har-placeholder-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
}

.har-placeholder-notice h2 {
    color: var(--har-text);
    margin-bottom: 0.75rem;
}

.har-placeholder-notice p {
    margin-bottom: 0.5rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Game Reference Number ──────────────────────────────────────────────── */
.har-game-ref-number {
    font-family: var(--har-font-mono, monospace);
    font-size: 0.82em;
    font-weight: 600;
    color: var(--har-text-muted);
    letter-spacing: 0.03em;
}

/* ── Official Slots ─────────────────────────────────────────────────────── */
.har-slots-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.har-slot-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--har-border-color);
    background: var(--har-surface);
}

.har-slot-assigned {
    border-color: #28a745;
    background: #f0fff4;
}

.har-slot-open {
    border-color: var(--har-border-color);
}

.har-slot-role {
    font-weight: 600;
    flex: 1;
}

.har-slot-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.har-slot-official-name {
    font-size: 0.9em;
    color: var(--har-text);
}

/* ── Availability Weekly Grid ───────────────────────────────────────────── */
.har-weekly-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.har-weekly-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--har-border-color);
}

.har-weekly-row:last-child {
    border-bottom: none;
}

.har-weekly-day {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 90px;
}

.har-day-label {
    font-weight: 600;
    min-width: 32px;
}

.har-weekly-times {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.har-time-sep {
    color: var(--har-text-muted);
    font-size: 0.9em;
}

.har-unavailable-label {
    font-size: 0.9em;
    font-style: italic;
}

.har-save-day-btn {
    min-width: 72px;
}

/* ============================================================
   Notification Bell Badge
   ============================================================ */

.har-notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 1.4rem;
    min-height: 1.4rem;
    justify-content: center;
}

.har-bell-icon {
    font-size: 1.2rem;
    min-width: 1.2rem;
    min-height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.har-bell-count {
    position: absolute;
    top: -6px;
    right: -8px;
    font-size: 0.65rem;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    line-height: 16px;
    border-radius: 8px;
    background-color: var(--har-danger);
    color: #fff;
    text-align: center;
    pointer-events: none;
}

/* ============================================================
   Notification Hamburger Badge & Sidebar Nav Badge
   ============================================================ */

.har-hamburger-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.har-hamburger-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 0.6rem;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    line-height: 15px;
    border-radius: 8px;
    background-color: var(--har-danger);
    color: #fff;
    text-align: center;
    pointer-events: none;
}

.har-nav-link--badged {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.har-nav-badge {
    font-size: 0.65rem;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    line-height: 18px;
    border-radius: 9px;
    background-color: var(--har-danger);
    color: #fff;
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================
   Notification Inbox Page
   ============================================================ */

.har-notif-unread strong {
    font-weight: 700;
}

.har-notif-message {
    font-size: 0.85rem;
    color: var(--har-text-muted);
    margin-top: 2px;
}

.har-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--har-accent-orange);
}

/* ============================================================
   Notification Preferences Page
   ============================================================ */

.har-prefs-table {
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 6px;
    overflow: hidden;
}

.har-prefs-header,
.har-prefs-row {
    display: grid;
    grid-template-columns: 200px 1fr 110px 70px 70px;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
}

.har-prefs-header {
    background: var(--har-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.har-prefs-row {
    border-top: 1px solid var(--har-border);
}

.har-prefs-row:hover {
    background: var(--har-bg);
}

.har-prefs-row-mandatory {
    background: #fffbf5;
}

.har-prefs-col-event {
    font-weight: 500;
}

.har-prefs-col-ch {
    display: flex;
    justify-content: center;
}

.har-chip-required .e-chip {
    background-color: var(--har-accent-orange);
    color: #fff;
    font-size: 0.75rem;
}

/* ── DDL Manager category grid ── */
.har-ddl-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.har-ddl-category-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1rem;
    background: var(--har-surface);
    border: 1px solid var(--har-border);
    border-radius: var(--har-radius);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.har-ddl-category-card:hover {
    border-color: var(--har-accent-orange);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-decoration: none;
}

.har-ddl-cat-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.har-ddl-cat-body {
    flex: 1;
    min-width: 0;
}

.har-ddl-cat-body h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--har-text);
}

.har-ddl-cat-body p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--har-text-muted);
}

.har-ddl-cat-arrow {
    font-size: 1.25rem;
    color: var(--har-text-muted);
    flex-shrink: 0;
}

/* ── Admin tab buttons ───────────────────────────────────────────────────── */
.har-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--har-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.har-tab-btn:hover {
    color: var(--har-text);
    border-bottom-color: var(--har-border);
}
.har-tab-btn--active {
    color: var(--har-accent-orange);
    border-bottom-color: var(--har-accent-orange);
    font-weight: 600;
}

/* ============================================================
   Home Page — Feature Card "Learn More" Links
   ============================================================ */

.har-feature-card {
    display: flex;
    flex-direction: column;
}

.har-feature-learn-more {
    display: inline-block;
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--har-accent-orange);
    text-decoration: none;
}

.har-feature-learn-more:hover {
    color: var(--har-accent-hover);
    text-decoration: underline;
}

/* ============================================================
   Public Landing Pages (/for-officials, /for-coaches, /for-associations)
   ============================================================ */

.har-landing-page {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 3rem;
}

/* ── Hero ── */
.har-landing-hero {
    background-color: var(--har-primary);
    color: #fff;
    padding: 4rem 2rem;
    text-align: center;
    margin: 0.375rem -1.5rem 3rem;
    border-radius: 0 0 8px 8px;
}

.har-landing-hero--dark {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Secondary button on dark hero backgrounds needs white text */
.har-landing-hero .har-btn-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.har-landing-hero .har-btn-secondary:hover {
    border-color: var(--har-accent-orange);
    color: var(--har-accent-orange);
}

.har-landing-hero h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #fff;
}

.har-landing-hero h1 .har-highlight {
    color: var(--har-accent-orange);
}

.har-landing-hero p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    max-width: 640px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.har-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.har-hero-actions a {
    padding: 0.75rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
}

/* ── Section Titles ── */
.har-landing-benefits h2,
.har-landing-steps h2,
.har-landing-faq h2,
.har-landing-cta h2 {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    color: var(--har-primary);
    margin-bottom: 2rem;
}

/* ── Benefits Grid ── */
.har-landing-benefits {
    padding: 0 1rem;
    margin-bottom: 3rem;
}

.har-landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.har-landing-card {
    background: #fff;
    border-radius: 8px;
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    border: 1px solid var(--har-border);
}

.har-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.har-card-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--har-primary);
}

.har-landing-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.har-badge-soon {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--har-accent-orange);
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid var(--har-accent-orange);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    line-height: 1.4;
    margin-left: auto;
    flex-shrink: 0;
}

.har-landing-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--har-primary);
    margin-bottom: 0.5rem;
}

.har-landing-card p {
    font-size: 0.875rem;
    color: var(--har-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── How It Works Steps ── */
.har-landing-steps {
    padding: 0 1rem;
    margin-bottom: 3rem;
}

.har-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.har-step {
    padding: 1.25rem 1rem;
}

.har-step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.har-step-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--har-primary);
}

.har-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--har-accent-orange);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.har-step p {
    font-size: 0.875rem;
    color: var(--har-text-muted);
    line-height: 1.6;
    margin: 0;
    padding-left: 3rem;
}

/* ── CTA Banner ── */
.har-landing-cta {
    background-color: var(--har-primary);
    color: #fff;
    padding: 3rem 2rem;
    text-align: center;
    border-radius: 8px;
    margin: 0 1rem;
}

.har-landing-cta h2 {
    color: var(--har-accent-orange);
    margin-bottom: 0.75rem;
}

.har-landing-cta p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.har-landing-cta .har-btn-primary {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
}

/* ── FAQ Section (For Associations) ── */
.har-landing-faq {
    padding: 0 1rem;
    margin-bottom: 3rem;
}

.har-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.har-faq-item {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--har-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.har-faq-item h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--har-primary);
    margin: 0 0 0.5rem;
}

.har-faq-item p {
    font-size: 0.875rem;
    color: var(--har-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   Contact Page (/contact)
   ============================================================ */

/* har-page-header is used across all app pages as a flex header row.
   Contact page (/contact) has its own override further down. */
.har-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 0 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--har-border);
}

.har-page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--har-primary);
    margin: 0;
}

.har-page-header p {
    color: var(--har-text-muted);
    font-size: 1rem;
    margin: 0;
}

.har-page-header-title {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.har-contact-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}

.har-contact-form-wrap {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    border: 1px solid var(--har-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── Form Fields ── */
.har-field {
    margin-bottom: 1.25rem;
}

/* Honeypot trap for the contact form — off-canvas and unreachable by keyboard/AT,
   not display:none, since some bots specifically skip display:none fields. */
.har-hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.har-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--har-text);
    margin-bottom: 0.35rem;
}

.har-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--har-text);
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 4px;
    transition: border-color 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}

.har-input:focus {
    outline: none;
    border-color: var(--har-accent-orange);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

.har-textarea {
    resize: vertical;
    min-height: 130px;
}

.har-field-hint {
    font-size: 0.78rem;
    color: var(--har-text-muted);
    margin-top: 0.3rem;
    text-align: right;
}

/* ── Sidebar ── */
.har-contact-sidebar {
    padding: 1.5rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--har-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.har-contact-sidebar h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--har-primary);
    margin: 0 0 0.75rem;
}

.har-contact-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.har-contact-links li {
    font-size: 0.875rem;
    color: var(--har-text-muted);
    line-height: 1.5;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--har-border);
}

.har-contact-links li:last-child {
    border-bottom: none;
}

.har-contact-links a {
    color: var(--har-accent-orange);
    font-weight: 600;
    text-decoration: none;
}

.har-contact-links a:hover {
    text-decoration: underline;
}

.har-contact-sidebar p {
    font-size: 0.875rem;
    color: var(--har-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Submit Button ── */
.har-contact-submit.e-btn {
    width: 100%;
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* ── Success State ── */
.har-contact-success {
    text-align: center;
    padding: 3rem 2rem;
    max-width: 520px;
    margin: 0 auto;
}

.har-contact-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #22c55e;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.har-contact-success h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--har-primary);
    margin-bottom: 0.5rem;
}

.har-contact-success p {
    color: var(--har-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .har-contact-layout {
        grid-template-columns: 1fr;
    }

    .har-landing-hero {
        padding: 2.5rem 1rem;
        margin: 0.375rem -1rem 2rem;
    }

    .har-landing-hero h1 {
        font-size: 1.75rem;
    }

    .har-landing-cta {
        margin: 0;
        border-radius: 0;
    }
}

/* ============================================================
   App Page Layout — shared across Scheduler, CM, Official, Admin
   ============================================================ */

.har-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

/* ── Cards ── */
.har-card {
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.25rem;
}

.har-form-card {
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 8px;
    padding: 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    max-width: 720px;
}

.har-form-page .har-form-card {
    max-width: 600px;
}

/* ── Loading / Empty states ── */
.har-loading-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.har-empty-state {
    background: #fff;
    border: 1px dashed var(--har-border);
    border-radius: 8px;
    padding: 2.5rem;
    text-align: center;
    color: var(--har-text-muted);
}

.har-empty-state p {
    margin: 0;
}

/* ── Scheduling Engine ── */
.har-engine-slot-card {
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.har-engine-slot-card:hover {
    border-color: var(--har-accent-orange);
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.12);
}

.har-engine-slot-card.active {
    border-color: var(--har-accent-orange);
    background-color: rgba(255, 107, 0, 0.04);
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.18);
}

.har-suggestion-card {
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.har-suggestion-card.has-warning {
    border-color: #ffc107;
    background-color: rgba(255, 193, 7, 0.05);
}

.har-suggestion-card.skill-warning {
    border-color: #fd7e14;
    background-color: rgba(253, 126, 20, 0.05);
}

/* Official already assigned to the game being scheduled */
.har-suggestion-card.is-assigned {
    border-color: #198754;
    background-color: rgba(25, 135, 84, 0.07);
}

/* ── Engine role / slot picker ── */
.har-role-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
}

.har-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--har-border);
    border-radius: 999px;
    background: #fff;
    font-size: 0.9rem;
}

.har-role-chip.open {
    cursor: pointer;
}

.har-role-chip.open:hover {
    border-color: var(--har-accent-orange);
    background-color: rgba(255, 107, 0, 0.05);
}

.har-role-chip.active {
    border-color: var(--har-accent-orange);
    background-color: rgba(255, 107, 0, 0.12);
    box-shadow: 0 0 0 1px var(--har-accent-orange) inset;
}

.har-role-chip.assigned {
    background-color: rgba(25, 135, 84, 0.06);
    border-color: #198754;
}

.har-role-chip .har-role-name {
    font-weight: 600;
}

/* ── Game slot row (detail page) ── */
.har-slot-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--har-border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: #fafafa;
}

/* ── Grid wrapper ── */
.har-grid {
    border-radius: 6px;
    overflow: hidden;
}

/* ── Filter bar ── */
.har-filter-bar {
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

/* Contact page overrides for har-page-header */
.har-contact-page .har-page-header {
    display: block;
    text-align: center;
    border-bottom: none;
    padding: 2rem 1rem 1.5rem;
    margin-bottom: 2rem;
}

.har-contact-page .har-page-header h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

/* ============================================================
   Association-Branded Landing Page (AssociationLandingPage.razor)
   ============================================================ */

/* ── Hero ── */
.har-assoc-hero {
    background-color: var(--har-primary);
    color: #fff;
    text-align: center;
    padding: 3.5rem 1.5rem 3rem;
    margin: -1rem -1rem 2rem;
}

.har-assoc-hero-logo {
    margin-bottom: 1.25rem;
}

.har-assoc-logo-img {
    max-height: 80px;
    max-width: 240px;
    object-fit: contain;
}

.har-assoc-hero-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}

.har-assoc-hero-sub {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.75rem;
}

/* Buttons on the hero always use white text — the hero background is the
   association's primary color which can be any shade, so we can't rely on
   the default body text color being readable against it. */
.har-assoc-hero .har-btn-primary {
    color: #fff;
}

.har-assoc-hero .har-btn-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
}

.har-assoc-hero .har-btn-secondary:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* ── Custom Content Block ── */
.har-assoc-content {
    margin-bottom: 2.5rem;
}

.har-assoc-content-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
    font-size: 0.975rem;
    line-height: 1.7;
    color: var(--har-text);
}

.har-assoc-content-inner h2,
.har-assoc-content-inner h3 {
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.har-assoc-content-inner ul,
.har-assoc-content-inner ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.har-assoc-content-inner a {
    color: var(--har-accent-orange);
}

/* ── CTA Cards ── */
.har-assoc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding: 0 1rem;
}

.har-assoc-card {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
}

.har-assoc-card-icon {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.har-assoc-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.har-assoc-card p {
    font-size: 0.875rem;
    color: var(--har-text-muted);
    flex: 1;
    margin-bottom: 1rem;
}

/* ── Color contrast warning (AssociationBranding) ── */
.har-color-warn {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: #8a6000;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    line-height: 1.4;
}

/* ── Powered-by footnote ── */
.har-assoc-powered-by {
    text-align: center;
    font-size: 0.8rem;
    color: var(--har-text-muted);
    margin-bottom: 2rem;
}

.har-assoc-powered-by a {
    color: var(--har-accent-orange);
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .har-assoc-hero {
        padding: 2.5rem 1rem 2rem;
    }

    .har-assoc-hero-title {
        font-size: 1.75rem;
    }
}

/* ── Public association sub-nav (Home/Schedule/Officials/News/Contact) ── */
.har-assoc-public-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.85rem 1rem;
    margin: -1.5rem 1rem 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.har-assoc-public-nav a {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--har-text);
    text-decoration: none;
}

.har-assoc-public-nav a:hover {
    color: var(--har-accent-orange);
}

/* ============================================================
   Messaging (/messages, /messages/{id})
   ============================================================ */

.har-thread-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--har-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.har-thread-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--har-border);
    transition: background 0.15s;
}

.har-thread-item:last-child {
    border-bottom: none;
}

.har-thread-item:hover {
    background: #f0f4f8;
    box-shadow: inset 3px 0 0 var(--har-accent-orange);
}

.har-thread-unread {
    background: #fff8f3;
}

.har-thread-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--har-accent-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.har-thread-body {
    flex: 1;
    min-width: 0;
}

.har-thread-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.har-thread-name {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.har-thread-time {
    font-size: 0.78rem;
    color: var(--har-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.har-thread-preview {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.15rem;
}

.har-thread-subject {
    font-size: 0.8rem;
    color: var(--har-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.har-thread-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.har-thread-badge {
    flex-shrink: 0;
}

.har-thread-chevron {
    font-size: 1.25rem;
    color: var(--har-text-muted);
    line-height: 1;
    user-select: none;
}

/* ── Thread detail (iMessage-style) ── */
.har-message-history {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    min-height: 300px;
    max-height: 60vh;
    overflow-y: auto;
    background: #f0f2f5;
    border: 1px solid var(--har-border);
    border-radius: 12px;
    margin-bottom: 0.75rem;
}

/* Each message block: optional sender-name + bubble + timestamp stacked vertically */
.har-message-row {
    display: flex;
    flex-direction: column;
    max-width: 72%;
    gap: 0.15rem;
}

.har-msg-mine {
    align-self: flex-end;
    align-items: flex-end;
}

.har-msg-theirs {
    align-self: flex-start;
    align-items: flex-start;
}

.har-message-bubble {
    padding: 0.55rem 0.9rem;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
}

.har-msg-mine .har-message-bubble {
    background: var(--har-accent-orange);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.har-msg-theirs .har-message-bubble {
    background: #fff;
    color: var(--har-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 4px;
}

.har-msg-sender {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--har-text-muted);
    padding-left: 0.4rem;
}

.har-msg-time {
    font-size: 0.68rem;
    color: var(--har-text-muted);
    padding: 0 0.4rem;
}

/* ── Reply bar ── */
.har-reply-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 24px;
}

.har-reply-input-wrap {
    flex: 1;
    min-width: 0;
}

/* Strip Syncfusion SfTextBox chrome inside the reply bar */
.har-reply-bar .har-reply-input.e-input-group {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.har-reply-bar .har-reply-input.e-input-group::before,
.har-reply-bar .har-reply-input.e-input-group::after {
    display: none !important;
}

.har-reply-bar .har-reply-input textarea {
    background: transparent !important;
    resize: none;
    max-height: 120px;
    padding: 0.25rem 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0.9rem;
}

.har-reply-send-btn.e-btn {
    border-radius: 20px !important;
    padding: 0.35rem 1.1rem !important;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .har-message-row {
        max-width: 88%;
    }
}

/* ── Profile photo thumbnail (edit page) ─────────────────────── */
.har-photo-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.har-profile-photo-thumb {
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--har-border);
    flex-shrink: 0;
    display: block;
}

.har-btn-remove-photo.e-btn {
    font-size: 0.8rem !important;
}

/* ── Member-since label on profile edit pages ─────────────────── */
.har-member-since {
    font-size: 0.85rem;
    color: var(--har-text-muted);
    margin: 0.5rem 0 0;
    font-style: italic;
}

/* ── Phase 16 — Public Profile Pages ─────────────────────────── */
.har-public-profile {
    max-width: 860px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.har-public-profile-header {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.har-public-profile-photo-wrap {
    flex-shrink: 0;
}

.har-public-profile-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--har-border);
}

.har-public-profile-photo-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--har-accent-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
}

.har-public-profile-name {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.har-public-profile-location {
    color: var(--har-text-muted);
    margin: 0.25rem 0;
}

.har-public-profile-website a {
    color: var(--har-accent-orange);
    font-size: 0.9rem;
}

.har-public-profile-stats {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}

.har-public-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.har-public-stat-label {
    color: var(--har-text-muted);
    font-size: 0.85rem;
}

.har-public-profile-bio {
    margin: 0.5rem 0 0;
    color: var(--har-text);
    line-height: 1.6;
}

.har-public-profile-section {
    background: #fff;
    border: 1px solid var(--har-border);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

.har-public-profile-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--har-primary);
}

.har-public-certs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.har-public-cert-card {
    background: var(--har-bg);
    border: 1px solid var(--har-border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.har-public-cert-sport {
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.har-public-cert-level {
    font-size: 0.875rem;
    color: var(--har-accent-orange);
}

.har-public-cert-exp {
    font-size: 0.8rem;
    color: var(--har-text-muted);
    margin-top: 0.15rem;
}

.har-public-sports {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.har-public-reviews {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.har-public-review-card {
    border: 1px solid var(--har-border);
    border-radius: 6px;
    padding: 1rem;
}

.har-public-review-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.har-public-review-rater {
    font-weight: 600;
    font-size: 0.9rem;
}

.har-public-review-date {
    font-size: 0.8rem;
    color: var(--har-text-muted);
}

.har-public-review-text {
    margin: 0;
    line-height: 1.5;
    color: var(--har-text);
}

@media (max-width: 575.98px) {
    .har-public-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .har-public-profile-stats {
        justify-content: center;
    }
}

/* ============================================================
   Confirm Email Change page
   ============================================================ */

.har-confirm-email-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3rem 1rem;
    min-height: 60vh;
}

.har-confirm-email-card {
    background: var(--har-secondary);
    border: 1px solid var(--har-border);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.har-confirm-email-card--error {
    border-color: var(--har-danger);
}

.har-confirm-email-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #d1fae5;
    color: #065f46;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.har-confirm-email-icon--error {
    background: #fee2e2;
    color: var(--har-danger);
}

.har-confirm-email-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--har-primary);
    margin: 0 0 0.75rem;
}

.har-confirm-email-body {
    color: var(--har-text-muted);
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.har-confirm-email-address {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--har-primary);
    background: var(--har-bg);
    border: 1px solid var(--har-border);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    margin: 0 0 1.25rem;
    word-break: break-all;
}

.har-confirm-email-btn {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.65rem 1.75rem;
    background: var(--har-accent-orange);
    color: var(--har-secondary);
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s;
}

.har-confirm-email-btn:hover {
    background: var(--har-accent-hover);
    color: var(--har-secondary);
    text-decoration: none;
}

.har-confirm-email-btn--outline {
    background: transparent;
    color: var(--har-primary);
    border: 1px solid var(--har-border);
}

.har-confirm-email-btn--outline:hover {
    background: var(--har-bg);
    color: var(--har-primary);
}