html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
}
/* ==========================================================================
   HFECloud visual system ("hfe-*")
   Matches the public Details.cshtml "Analyst Deck" theme exactly (same color
   tokens, fonts, card shapes) so a Member editing their portfolio/project
   sees the same thing a visitor will see, not a separate admin-form look.
   Fonts loaded in _Layout.cshtml: Space Grotesk (display), DM Sans (body),
   IBM Plex Mono (values / technical labels).
   Class names / ids / data-attributes below are unchanged from before —
   portfolio-editor.js and project-editor.js bind to them directly.
   ========================================================================== */

:root {
    --hfe-bg: #12161f;
    --hfe-ink: #eef1f6;
    --hfe-ink-soft: #9aa7bd;
    --hfe-muted: #9aa7bd;
    --hfe-border: #2a3142;
    --hfe-surface: #1a212c;
    --hfe-surface-soft: #212836;
    --hfe-accent: #4fd1c9;
    --hfe-accent-fg: #0b1a1a;
    --hfe-accent-soft: rgba(79, 209, 201, 0.14);
    --hfe-highlight: #e6b84f;
    --hfe-highlight-fg: #2b1e08;
    --hfe-danger: #ff6b6b;
    --hfe-radius-lg: 1.1rem;
    --hfe-radius-md: 0.9rem;
    --hfe-radius-sm: 0.7rem;
    --hfe-font-display: "Space Grotesk", "DM Sans", sans-serif;
    --hfe-font-body: "DM Sans", sans-serif;
    --hfe-font-mono: "IBM Plex Mono", monospace;
}

/* Full-bleed dark canvas, same trick Details.cshtml uses to break out of the
   app's centered Bootstrap .container so the editor reads as one continuous
   themed page instead of a dark panel sitting on white. */
body:has(.hfe-page) {
    background: var(--hfe-bg);
}

.hfe-page {
    background: var(--hfe-bg);
    color: var(--hfe-ink);
    font-family: var(--hfe-font-body);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding-bottom: 3rem;
}

.hfe-page-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* The home page's Portfolios/Projects section needs room for 5 cards per row,
   unlike every other .hfe-page-inner use (which stays at the narrower default
   above — this only widens this one specific wrapper). */
.hfe-home-content {
    max-width: 1700px;
}

/* ---- Sticky control bar ---- */
.hfe-editor-toolbar {
    background: var(--hfe-surface-soft);
    border-bottom: 1px solid var(--hfe-border);
    color: var(--hfe-ink);
    padding: 0.85rem 1.5rem;
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 20;
}

    .hfe-editor-toolbar .text-muted {
        color: var(--hfe-muted) !important;
    }

/* ---- Hero ---- */

.hfe-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 3rem;
    margin-bottom: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    border-bottom: 1px solid var(--hfe-border);
}

.hfe-hero-top {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
}

.hfe-hero-image {
    width: 128px;
    height: 128px;
    border-radius: var(--hfe-radius-md);
    object-fit: cover;
    border: 1px solid var(--hfe-border);
    flex-shrink: 0;
    background: var(--hfe-surface);
}

.hfe-name {
    font-family: var(--hfe-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 0.25rem;
    color: var(--hfe-ink);
}

.hfe-title {
    font-family: var(--hfe-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--hfe-highlight);
    margin: 0 0 0.6rem;
}

.hfe-headline {
    font-size: 1.05rem;
    color: var(--hfe-ink-soft);
    margin: 0 0 0.6rem;
    max-width: 60ch;
    line-height: 1.6;
}

.hfe-meta {
    font-size: 0.85rem;
    color: var(--hfe-muted);
}

    .hfe-meta a {
        color: var(--hfe-ink-soft);
        text-decoration: none;
    }

        .hfe-meta a:hover {
            color: var(--hfe-accent);
            text-decoration: underline;
        }

/* ---- Stat cards (hero + per-project) ---- */

.hfe-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.hfe-stat-card {
    position: relative;
    background: var(--hfe-surface);
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-sm);
    padding: 0.9rem 1.15rem;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.hfe-stat-value {
    font-family: var(--hfe-font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--hfe-accent);
    line-height: 1.1;
}

.hfe-stat-label {
    font-size: 0.75rem;
    color: var(--hfe-muted);
}

/* ---- Sections ---- */

.hfe-section {
    background: var(--hfe-surface);
    border-top: 1px solid var(--hfe-border);
    border-radius: 0;
    padding: 2.5rem 0;
    margin-bottom: 0;
}

    .hfe-section:nth-of-type(even) {
        background: #171c26;
    }

    .hfe-section > .hfe-page-inner {
        padding-top: 0;
    }

.hfe-section-title {
    font-family: var(--hfe-font-mono);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hfe-highlight);
    margin-bottom: 1.1rem;
}

.hfe-about p {
    color: var(--hfe-ink-soft);
    line-height: 1.7;
}

    .hfe-about p:last-child {
        margin-bottom: 0;
    }

/* ---- Skills ---- */

.hfe-skill-group {
    margin-bottom: 1.1rem;
    background: var(--hfe-surface-soft);
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-md);
    padding: 1.1rem 1.1rem 1.25rem;
}

.hfe-skill-group-label {
    font-family: var(--hfe-font-mono);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hfe-highlight);
    margin-bottom: 0.65rem;
    display: block;
}

.hfe-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.hfe-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--hfe-surface);
    border: 1px solid var(--hfe-border);
    color: var(--hfe-ink-soft);
    font-family: var(--hfe-font-mono);
    font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

.hfe-chip-remove {
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    color: var(--hfe-muted);
    opacity: 0.8;
}

    .hfe-chip-remove:hover {
        color: var(--hfe-danger);
        opacity: 1;
    }

/* ---- Timeline (Experience / Education) ---- */

.hfe-timeline-item {
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: var(--hfe-surface-soft);
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-md);
}

    .hfe-timeline-item:last-child {
        margin-bottom: 0;
    }

.hfe-timeline-role {
    font-family: var(--hfe-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--hfe-ink);
}

.hfe-timeline-meta {
    font-size: 0.78rem;
    color: var(--hfe-muted);
    font-family: var(--hfe-font-mono);
}

.point-item {
    color: var(--hfe-ink-soft);
}

/* ---- Projects grid (owner's project list on the Portfolio editor) ---- */

.hfe-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem;
}

.hfe-editor-project-card {
    position: relative;
    background: var(--hfe-surface);
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-md);
    padding: 1.25rem;
    display: block;
    color: var(--hfe-ink);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

    .hfe-editor-project-card:hover {
        border-color: var(--hfe-accent);
        transform: translateY(-2px);
        color: var(--hfe-ink);
    }

    .hfe-editor-project-card.is-lead {
        border-color: var(--hfe-highlight);
        background: rgba(230, 184, 79, 0.08);
    }

    .hfe-editor-project-card h5 {
        color: var(--hfe-ink);
        font-family: var(--hfe-font-display);
    }

.hfe-lead-badge {
    display: inline-block;
    background: var(--hfe-highlight);
    color: var(--hfe-highlight-fg);
    font-family: var(--hfe-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.hfe-project-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--hfe-radius-sm);
    margin-bottom: 0.75rem;
    background: var(--hfe-surface-soft);
    border: 1px solid var(--hfe-border);
}

.hfe-editor-project-tag {
    font-family: var(--hfe-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hfe-highlight);
    margin-bottom: 0.4rem;
}

/* ---- Dashboard image gallery ----
   Was a horizontal scroll strip of bare thumbnails. Adding a caption per image
   meant each card now needs room underneath the image, so this switched to a
   wrapping grid: .hfe-gallery-thumb is the outer card (image + caption, stacked),
   .hfe-gallery-thumb-img is the bordered/cropped box the image and remove button
   sit in (what .hfe-gallery-thumb itself used to be, before the caption input
   existed). These classes are only used on this one form — see the note on
   Views/Projects/_ProjectEditorForm.cshtml if that changes. */

.hfe-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hfe-gallery-thumb {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 140px;
}

.hfe-gallery-thumb-img {
    position: relative;
    width: 140px;
    height: 90px;
    border-radius: var(--hfe-radius-sm);
    overflow: hidden;
    border: 1px solid var(--hfe-border);
    background: var(--hfe-surface-soft);
}

    .hfe-gallery-thumb-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hfe-gallery-caption {
    width: 100%;
    font-size: 0.75rem;
}

/* ---- Live embed preview (PowerBI / StaticSite / ThreeD / Unity / Video) ---- */

.hfe-embed-preview {
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-sm);
    overflow: hidden;
    background: var(--hfe-surface-soft);
    aspect-ratio: 16 / 9;
}

    .hfe-embed-preview iframe,
    .hfe-embed-preview video {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

/* ---- Status badge ---- */

.hfe-status-badge {
    font-family: var(--hfe-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
}

    .hfe-status-badge.draft {
        background: rgba(230, 184, 79, 0.16);
        color: var(--hfe-highlight);
    }

    .hfe-status-badge.published {
        background: rgba(79, 209, 201, 0.16);
        color: var(--hfe-accent);
    }

/* ==========================================================================
   Live editor add/remove & inline-editing behaviour
   ========================================================================== */

/* Inputs/textareas styled to be visually identical to the rendered text they
   replace, so editing feels like clicking directly on the real page. */
.hfe-editable {
    display: block;
    width: 100%;
    border: 1px dashed transparent;
    border-radius: var(--hfe-radius-sm);
    background: transparent;
    padding: 0.15rem 0.4rem;
    margin: 0 -0.4rem 0.15rem;
    font: inherit;
    color: inherit;
    resize: none;
}

    .hfe-editable::placeholder {
        color: var(--hfe-muted);
        opacity: 0.6;
    }

    .hfe-editable:hover {
        border-color: var(--hfe-border);
    }

    .hfe-editable:focus {
        outline: none;
        border-color: var(--hfe-accent);
        border-style: solid;
        background: rgba(79, 209, 201, 0.08);
    }

input.hfe-editable.hfe-name {
    font-family: var(--hfe-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

input.hfe-editable.hfe-title {
    font-family: var(--hfe-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--hfe-highlight);
}

textarea.hfe-editable.hfe-headline {
    font-size: 1.05rem;
    color: var(--hfe-ink-soft);
}

input.hfe-editable.hfe-stat-value {
    font-family: var(--hfe-font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--hfe-accent);
    text-align: left;
}

input.hfe-editable.hfe-stat-label {
    font-size: 0.75rem;
    color: var(--hfe-muted);
}

input.hfe-editable.hfe-skill-group-label {
    font-family: var(--hfe-font-mono);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hfe-highlight);
}

input.hfe-editable.hfe-project-tag {
    font-family: var(--hfe-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hfe-highlight);
}

textarea.hfe-editable.hfe-about {
    color: var(--hfe-ink-soft);
    line-height: 1.7;
    font-size: 1rem;
    min-height: 8rem;
}

/* Plain Bootstrap form-controls that live inside the dark canvas (location,
   email, dates, selects, file pickers) need re-skinning too, or they show up
   as bright white holes in an otherwise dark page. */
.hfe-page .form-control,
.hfe-page .form-select {
    background: var(--hfe-surface-soft);
    border: 1px solid var(--hfe-border);
    color: var(--hfe-ink);
}

    .hfe-page .form-control::placeholder {
        color: var(--hfe-muted);
    }
/* form-floating relies on the placeholder staying transparent while a field
   is empty and unfocused (that's what lets the label sit in its resting
   position without the real placeholder text showing through underneath
   it) — the muted-placeholder rule above is for plain, non-floating inputs
   elsewhere (the portfolio/project editors) and would otherwise make both
   render on top of each other here. Higher specificity (extra class) wins
   over the rule above regardless of source order. */
.hfe-page .form-floating > .form-control::placeholder {
    color: transparent;
}

.hfe-page .form-control:focus,
.hfe-page .form-select:focus {
    background: var(--hfe-surface-soft);
    border-color: var(--hfe-accent);
    color: var(--hfe-ink);
    box-shadow: 0 0 0 0.2rem rgba(79, 209, 201, 0.15);
}

.hfe-page .form-label {
    color: var(--hfe-muted);
}

.hfe-page .form-check-label {
    color: var(--hfe-ink-soft);
}

.hfe-page a:not(.hfe-project-card):not(.btn) {
    color: var(--hfe-accent);
}

/* Repeatable card add/remove controls, shared by hero stats, project stats,
   skill groups, experience, education, dashboard images. */
.repeater-item {
    position: relative;
}

.hfe-card-remove {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    padding: 0;
    border: 1px solid var(--hfe-border);
    border-radius: 50%;
    background: var(--hfe-surface);
    color: var(--hfe-muted);
    font-size: 0.9rem;
    cursor: pointer;
}

    .hfe-card-remove:hover {
        background: var(--hfe-danger);
        border-color: var(--hfe-danger);
        color: #fff;
    }

.hfe-add-card-btn {
    border: 1px dashed var(--hfe-border);
    background: transparent;
    color: var(--hfe-accent);
    border-radius: var(--hfe-radius-sm);
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
}

    .hfe-add-card-btn:hover {
        border-color: var(--hfe-accent);
        background: rgba(79, 209, 201, 0.1);
    }

/* Image/file upload slots (hero image, thumbnail, resume, model diagram). */
.hfe-upload-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   Site chrome (navbar + footer) — dark, matches the hfe-* design system so
   the frame around every page (including not-yet-themed scaffolded pages)
   feels like one product instead of Bootstrap-default white chrome.
   ========================================================================== */

html, body {
    height: 100%;
    overflow-x: hidden;
}

.hfe-body {
    background: var(--hfe-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
    /* The bare Bootstrap .container that wraps <main> (not the navbar's or
   footer's own nested .container) grows to fill any leftover space, so the
   footer always sits at the bottom of the viewport on short pages instead
   of leaving a large dead gap above it. */
    .hfe-body > .container {
        flex: 1 0 auto;
        width: 100%;
    }

.hfe-navbar {
    background: var(--hfe-surface-soft);
    border-bottom: 1px solid var(--hfe-border);
    box-shadow: none;
    padding: 0.75rem 1rem;
}

.hfe-nav-brand {
    font-family: var(--hfe-font-display);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--hfe-ink) !important;
    letter-spacing: 0.01em;
}

.hfe-nav-link {
    color: var(--hfe-ink-soft) !important;
    font-family: var(--hfe-font-body);
    font-weight: 500;
    transition: color 0.15s ease;
}

    .hfe-nav-link:hover {
        color: var(--hfe-accent) !important;
    }

.hfe-logout-link {
    padding-left: 1rem;
    padding-right: 1rem;
}

.hfe-nav-toggler {
    border-color: var(--hfe-border);
}

    .hfe-nav-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(79, 209, 201, 0.25);
    }

.hfe-footer {
    background: var(--hfe-surface-soft);
    border-top: 1px solid var(--hfe-border);
    color: var(--hfe-muted);
    padding: 1.25rem 0;
    margin-top: 3rem;
}

.hfe-footer-container {
    font-size: 0.85rem;
}

.hfe-footer-link {
    color: var(--hfe-ink-soft);
    text-decoration: none;
}

    .hfe-footer-link:hover {
        color: var(--hfe-accent);
    }

/* ==========================================================================
   Home / portfolio directory
   ========================================================================== */

.hfe-home-hero {
    position: relative;
    overflow: hidden;
    padding: 3.5rem 0 2.5rem;
    background-image: linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    border-bottom: 1px solid var(--hfe-border);
    margin-bottom: 2.5rem;
}

.hfe-home-hero-inner {
    display: flex;
    justify-content: center;
}

.hfe-home-hero-panel {
    text-align: center;
    max-width: 520px;
    padding: 2rem 2.25rem;
    border-radius: var(--hfe-radius-lg);
    background: linear-gradient(180deg, rgba(79, 209, 201, 0.10), rgba(26, 33, 44, 0.75));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--hfe-border);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.3);
}

.hfe-home-eyebrow {
    display: block;
    margin-bottom: 0.85rem;
}

.hfe-home-title {
    font-family: var(--hfe-font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    color: var(--hfe-ink);
    margin: 0 0 0.75rem;
    letter-spacing: 0.01em;
}

.hfe-home-tagline {
    color: var(--hfe-ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

.hfe-home-empty {
    color: var(--hfe-muted);
    text-align: center;
    padding: 3rem 0;
}

.hfe-portfolio-grid,
.hfe-project-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
    padding-bottom: 3rem;
}

@media (max-width: 1500px) {
    .hfe-portfolio-grid,
    .hfe-project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .hfe-portfolio-grid,
    .hfe-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .hfe-portfolio-grid,
    .hfe-project-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.hfe-portfolio-card,
.hfe-project-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--hfe-surface);
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-lg);
    padding: 1.5rem;
    min-height: 260px;
    text-decoration: none;
    color: var(--hfe-ink);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

    .hfe-portfolio-card:hover,
    .hfe-project-card:hover {
        color: var(--hfe-ink);
        transform: translateY(-6px);
        border-color: var(--hfe-accent);
        box-shadow: 0 1rem 2rem rgba(79, 209, 201, 0.12);
    }

.hfe-portfolio-card-top,
.hfe-project-card-top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.hfe-portfolio-avatar,
.hfe-project-avatar {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--hfe-radius-md);
    object-fit: cover;
    border: 1px solid var(--hfe-border);
    background: var(--hfe-surface-soft);
}

.hfe-portfolio-avatar-fallback,
.hfe-project-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hfe-font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--hfe-accent);
}

.hfe-portfolio-card-heading,
.hfe-project-card-heading {
    min-width: 0;
}

.hfe-portfolio-eyebrow,
.hfe-project-eyebrow {
    font-family: var(--hfe-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hfe-highlight);
    margin-bottom: 0.2rem;
}

.hfe-portfolio-name,
.hfe-project-name {
    font-family: var(--hfe-font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--hfe-ink);
    margin: 0;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}

.hfe-portfolio-title,
.hfe-project-tag {
    font-size: 0.85rem;
    color: var(--hfe-highlight);
    font-weight: 600;
    margin-top: 0.1rem;
}

.hfe-portfolio-headline,
.hfe-project-headline {
    color: var(--hfe-ink-soft);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hfe-portfolio-tags {
    margin-top: -0.25rem;
}

.hfe-portfolio-card-footer,
.hfe-project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--hfe-border);
    font-size: 0.8rem;
}

.hfe-portfolio-location,
.hfe-project-owner {
    color: var(--hfe-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hfe-portfolio-cta,
.hfe-project-cta {
    color: var(--hfe-accent);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Second home-page section header, sitting between the Portfolios grid above
   and the Projects grid below. */
.hfe-home-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
}

.hfe-home-section-heading h2 {
    font-family: var(--hfe-font-display);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--hfe-ink);
    margin: 0;
}

.hfe-home-section-sub {
    color: var(--hfe-muted);
    font-size: 0.85rem;
}

/* ==========================================================================
   Identity pages (Login / Register) — re-skinned to match the rest of the
   site instead of default unstyled Bootstrap scaffolding. Form controls and
   link colors already come from the shared .hfe-page rules above; this adds
   the auth-specific layout and headings.
   ========================================================================== */

.hfe-auth-page {
    padding-top: 3rem;
    max-width: 960px;
}

.hfe-auth-title {
    font-family: var(--hfe-font-display);
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--hfe-ink);
    margin-bottom: 1.75rem;
}

.hfe-auth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 768px) {
    .hfe-auth-grid {
        grid-template-columns: minmax(0, 380px) 1fr;
    }
}

.hfe-auth-card {
    background: var(--hfe-surface);
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-lg);
    padding: 1.75rem;
}

.hfe-auth-card-secondary {
    background: var(--hfe-surface-soft);
}

.hfe-auth-subtitle {
    font-family: var(--hfe-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--hfe-ink);
    margin: 0 0 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--hfe-border);
}

.hfe-auth-links p {
    margin-bottom: 0.5rem;
}

    .hfe-auth-links p:last-child {
        margin-bottom: 0;
    }

/* Buttons on any dark hfe-page (auth forms, editors) — swap Bootstrap's
   default blue for the site's accent color instead of leaving markup as-is. */
.hfe-page .btn-primary {
    background-color: var(--hfe-accent);
    border-color: var(--hfe-accent);
    color: var(--hfe-accent-fg);
    font-weight: 600;
}

    .hfe-page .btn-primary:hover,
    .hfe-page .btn-primary:focus {
        background-color: var(--hfe-accent);
        border-color: var(--hfe-accent);
        color: var(--hfe-accent-fg);
        opacity: 0.9;
    }

.hfe-page .form-check-input {
    background-color: var(--hfe-surface-soft);
    border-color: var(--hfe-border);
}

    .hfe-page .form-check-input:checked {
        background-color: var(--hfe-accent);
        border-color: var(--hfe-accent);
    }

/* ==========================================================================
   Identity pages, part 2 — everything besides Login/Register: single-card
   auth flows (forgot/reset password, 2FA, confirmations) and the account
   Manage dashboard (sidebar + settings pages). Reuses the .hfe-page /
   .hfe-auth-card tokens above rather than inventing a new look.
   ========================================================================== */

/* Narrower auth card for pages with just one form/message, no secondary
   "use another service" panel (forgot password, confirmations, etc). */
.hfe-auth-page-narrow {
    max-width: 560px;
}

.hfe-auth-card h2,
.hfe-auth-card h3,
.hfe-auth-card h4 {
    font-family: var(--hfe-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--hfe-ink);
}

.hfe-auth-card p {
    color: var(--hfe-ink-soft);
    line-height: 1.6;
}

.hfe-auth-card hr {
    border-color: var(--hfe-border);
    opacity: 1;
}

/* ---- Alerts on the dark canvas ---- */
.hfe-page .alert {
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-sm);
    color: var(--hfe-ink);
    background: var(--hfe-surface-soft);
}

.hfe-page .alert-success {
    background: var(--hfe-accent-soft);
    border-color: var(--hfe-accent);
}

.hfe-page .alert-danger {
    background: rgba(255, 107, 107, 0.12);
    border-color: var(--hfe-danger);
}

.hfe-page .alert-warning {
    background: rgba(230, 184, 79, 0.12);
    border-color: var(--hfe-highlight);
}

.hfe-page .alert-info {
    background: var(--hfe-surface-soft);
    border-color: var(--hfe-border);
    color: var(--hfe-ink-soft);
}

.hfe-page .btn-close {
    filter: invert(1) grayscale(1) brightness(1.7);
}

/* ---- Extra button variants used on Manage pages ---- */
.hfe-page .btn-danger {
    background-color: var(--hfe-danger);
    border-color: var(--hfe-danger);
    color: #2b0d0d;
    font-weight: 600;
}

    .hfe-page .btn-danger:hover,
    .hfe-page .btn-danger:focus {
        background-color: var(--hfe-danger);
        border-color: var(--hfe-danger);
        color: #2b0d0d;
        opacity: 0.9;
    }

.hfe-page .btn-link {
    color: var(--hfe-accent);
}

.hfe-page .btn-secondary,
.hfe-page .btn-outline-secondary {
    background: var(--hfe-surface-soft);
    border-color: var(--hfe-border);
    color: var(--hfe-ink);
}

/* ---- Inline text helpers scaffolded pages rely on ---- */
.hfe-page .text-danger {
    color: var(--hfe-danger) !important;
}

.hfe-page .text-info {
    color: var(--hfe-accent) !important;
}

.hfe-page .text-muted {
    color: var(--hfe-muted) !important;
}

.hfe-page a {
    color: var(--hfe-accent);
}

.hfe-page kbd,
.hfe-page code {
    background: var(--hfe-surface-soft);
    border: 1px solid var(--hfe-border);
    color: var(--hfe-highlight);
    padding: 0.15rem 0.4rem;
    border-radius: 0.35rem;
    font-family: var(--hfe-font-mono);
}

.hfe-page .recovery-code {
    display: inline-block;
    min-width: 8ch;
    margin-bottom: 0.4rem;
}

.hfe-page .table {
    color: var(--hfe-ink);
}

    .hfe-page .table > :not(caption) > * > * {
        background: transparent;
        color: var(--hfe-ink);
        border-color: var(--hfe-border);
    }

/* ---- Account "Manage" dashboard (sidebar + settings card) ---- */
.hfe-manage-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 768px) {
    .hfe-manage-layout {
        grid-template-columns: 220px 1fr;
    }
}

.hfe-manage-nav {
    background: var(--hfe-surface);
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-lg);
    padding: 0.65rem;
}

    .hfe-manage-nav .nav-link {
        color: var(--hfe-ink-soft);
        border-radius: var(--hfe-radius-sm);
        padding: 0.6rem 0.85rem;
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 0.15rem;
    }

        .hfe-manage-nav .nav-link:hover {
            color: var(--hfe-ink);
            background: var(--hfe-surface-soft);
        }

        .hfe-manage-nav .nav-link.active {
            color: var(--hfe-accent-fg) !important;
            background: var(--hfe-accent);
            font-weight: 600;
        }

.hfe-manage-card {
    background: var(--hfe-surface);
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-lg);
    padding: 1.75rem;
}

    .hfe-manage-card h3 {
        font-family: var(--hfe-font-display);
        font-weight: 700;
        color: var(--hfe-ink);
        margin: 0 0 1.25rem;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid var(--hfe-border);
        font-size: 1.15rem;
    }

    .hfe-manage-card h4 {
        font-family: var(--hfe-font-display);
        font-weight: 700;
        color: var(--hfe-ink);
        font-size: 1rem;
        margin-top: 1.5rem;
    }

/* Admin "Edit home screen" drag-to-reorder list */
.hfe-drag-item {
    cursor: grab;
    background-color: var(--hfe-card, var(--hfe-surface));
    border-color: var(--hfe-border) !important;
    color: var(--hfe-ink, inherit);
}

.hfe-drag-item.is-dragging {
    opacity: 0.5;
}

.hfe-drag-handle {
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--hfe-muted, #888);
    letter-spacing: -2px;
}

/* ==========================================================================
   Admin area — quick-action cards + responsive data tables
   Shared across every Views/Admin/*.cshtml page so the dashboard's shortcut
   row and every admin table (Users, Projects, Groups, Activity log, Home
   featured, pending-edits panels) look and behave the same way, on desktop
   and on phones.
   ========================================================================== */

:root {
    --hfe-blue: #5da9e8;
    --hfe-blue-soft: rgba(93, 169, 232, 0.14);
    --hfe-violet: #b892f0;
    --hfe-violet-soft: rgba(184, 146, 240, 0.14);
    --hfe-green: #7bc88c;
    --hfe-green-soft: rgba(123, 200, 140, 0.14);
}

/* ---- Quick-action cards (replaces the plain "A · B · C · D" link row) ---- */
.hfe-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}

.hfe-quick-action {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--hfe-surface);
    border: 1px solid var(--hfe-border);
    border-radius: var(--hfe-radius-md);
    padding: 1.1rem 1.2rem;
    color: var(--hfe-ink);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

    .hfe-quick-action:hover,
    .hfe-quick-action:focus-visible {
        color: var(--hfe-ink);
        text-decoration: none;
        transform: translateY(-3px);
        background: var(--hfe-surface-soft);
        border-color: var(--hfe-action-color, var(--hfe-accent));
        box-shadow: 0 0.85rem 1.75rem -0.5rem var(--hfe-action-shadow, rgba(79, 209, 201, 0.35));
    }

.hfe-quick-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: var(--hfe-radius-sm);
    background: var(--hfe-action-soft, var(--hfe-accent-soft));
    color: var(--hfe-action-color, var(--hfe-accent));
}

    .hfe-quick-action-icon svg {
        width: 20px;
        height: 20px;
    }

.hfe-quick-action-text {
    min-width: 0;
}

.hfe-quick-action-label {
    display: block;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--hfe-ink);
}

.hfe-quick-action-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--hfe-muted);
    margin-top: 0.1rem;
}

.hfe-quick-actions.is-compact {
    grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
    margin: 0 0 1.75rem;
}

.hfe-quick-action.is-teal { --hfe-action-color: var(--hfe-accent); --hfe-action-soft: var(--hfe-accent-soft); --hfe-action-shadow: rgba(79, 209, 201, 0.35); }
.hfe-quick-action.is-amber { --hfe-action-color: var(--hfe-highlight); --hfe-action-soft: rgba(230, 184, 79, 0.14); --hfe-action-shadow: rgba(230, 184, 79, 0.32); }
.hfe-quick-action.is-blue { --hfe-action-color: var(--hfe-blue); --hfe-action-soft: var(--hfe-blue-soft); --hfe-action-shadow: rgba(93, 169, 232, 0.32); }
.hfe-quick-action.is-violet { --hfe-action-color: var(--hfe-violet); --hfe-action-soft: var(--hfe-violet-soft); --hfe-action-shadow: rgba(184, 146, 240, 0.32); }
.hfe-quick-action.is-green { --hfe-action-color: var(--hfe-green); --hfe-action-soft: var(--hfe-green-soft); --hfe-action-shadow: rgba(123, 200, 140, 0.32); }

@media (max-width: 480px) {
    .hfe-quick-actions {
        grid-template-columns: 1fr;
    }
}

/* ---- Admin data tables ---- */
table.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    table.admin-table thead th {
        text-align: left;
        font-family: var(--hfe-font-mono);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--hfe-muted);
        font-weight: 600;
        padding: 0.2rem 1rem 0.85rem;
        border-bottom: 1px solid var(--hfe-border);
        white-space: nowrap;
    }

    table.admin-table tbody td {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--hfe-border);
        color: var(--hfe-ink);
        vertical-align: middle;
    }

    table.admin-table tbody tr:last-child td {
        border-bottom: none;
    }

    table.admin-table tbody tr {
        transition: background-color 0.15s ease;
    }

        table.admin-table tbody tr:nth-child(even) {
            background: rgba(255, 255, 255, 0.02);
        }

        table.admin-table tbody tr:hover {
            background: var(--hfe-surface-soft);
        }

    table.admin-table code {
        font-size: 0.82rem;
    }

/* Selects/buttons that live inside table cells or toolbar forms on admin
   pages — keep them compact on desktop, let the mobile rule below take over. */
.hfe-manage-card form.d-flex {
    flex-wrap: wrap;
}

/* ---- Phones: stack each row into its own card instead of a cramped table ---- */
@media (max-width: 720px) {
    table.admin-table,
    table.admin-table thead,
    table.admin-table tbody,
    table.admin-table th,
    table.admin-table td,
    table.admin-table tr {
        display: block;
    }

    table.admin-table thead {
        display: none;
    }

    table.admin-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }

    table.admin-table tbody tr {
        background: var(--hfe-surface-soft);
        border: 1px solid var(--hfe-border);
        border-radius: var(--hfe-radius-md);
        padding: 0.9rem 1rem;
    }

    table.admin-table tbody tr:hover {
        background: var(--hfe-surface-soft);
    }

    table.admin-table tbody td {
        display: block;
        text-align: left !important;
        padding: 0.55rem 0;
        border-bottom: 1px dashed var(--hfe-border);
    }

        table.admin-table tbody td:first-child {
            padding-top: 0;
        }

        table.admin-table tbody td:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        table.admin-table tbody td[data-label]::before {
            content: attr(data-label);
            display: block;
            font-family: var(--hfe-font-mono);
            font-size: 0.66rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--hfe-muted);
            margin-bottom: 0.35rem;
        }

    /* Any action row (Assign role, Set group, Create group, Add to home
       page, etc.) becomes a stacked, full-width, thumb-friendly form. */
    .hfe-manage-card form.d-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

        .hfe-manage-card form.d-flex > * {
            width: 100% !important;
            max-width: none !important;
            margin-left: 0 !important;
        }

    .hfe-manage-card > .d-flex.flex-wrap {
        flex-direction: column;
        align-items: stretch !important;
    }

    .hfe-manage-card .badge.bg-secondary {
        display: inline-flex;
        align-items: center;
        margin-bottom: 0.35rem;
    }
}

@media (max-width: 480px) {
    .hfe-manage-card {
        padding: 1.15rem;
    }

    .hfe-auth-title {
        font-size: 1.55rem;
    }
}