/* -app.css */
/* ============================================
   MATCHKEYZ APP STYLES
   ============================================ */

/* ============================================
   MATCHKEYZ DESIGN TOKENS
   ============================================ */
:root {
    --mkz-bg: var(--bs-body-bg, #f8f9fa);
    --mkz-surface: #ffffff;
    --mkz-panel: #f8f9fa;
    --mkz-text: #212529;
    --mkz-text-muted: #6c757d;
    --mkz-heading: #1a1a1a;
    --mkz-border: #dee2e6;
    --mkz-link: #0d6efd;
    --mkz-link-hover: #0a58ca;
    --mkz-focus-ring: rgba(13, 110, 253, 0.25);
    --mkz-font-family: 'Open Sans', sans-serif;
    --mkz-fs-h1: 1.5rem;
    --mkz-fs-h2: 1.25rem;
    --mkz-fs-h3: 1.2rem;
    --mkz-fs-sm: 0.875rem;
    --mkz-fs-kpi-value: 1.75rem;
    --mkz-fw-regular: 400;
    --mkz-fw-medium: 500;
    --mkz-fw-semibold: 600;
    --mkz-fw-bold: 700;
    --mkz-space-1: 0.25rem;
    --mkz-space-2: 0.5rem;
    --mkz-space-3: 0.75rem;
    --mkz-space-4: 1rem;
    --mkz-space-5: 1.5rem;
    --mkz-space-6: 2rem;
    --mkz-space-7: 3rem;
    --mkz-radius-sm: 0.375rem;
    --mkz-radius-md: 0.5rem;
    --mkz-radius-lg: 8px;
    --mkz-radius-pill: 50%;
    --mkz-border-width: 1px;
    --mkz-shadow-card: 0 4px 8px rgba(0, 0, 0, 0.08);
    --mkz-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.10);
    --mkz-shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    --mkz-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.16);
    --mkz-transition-fast: 0.15s ease;
    --mkz-transition-default: 0.2s ease;
    --mkz-transition-slow: 0.3s ease;
    --mkz-z-base: 1;
    --mkz-z-dropdown: 1000;
    --mkz-z-navbar: 999;
    --mkz-z-modal-backdrop: 1000;
    --mkz-z-modal: 1001;
    --mkz-z-tooltip: 1100;
    --mkz-z-toast: 1200;
    --mkz-drill-hover-bg: color-mix(in srgb, var(--mkz-link) 8%, transparent);
    --mkz-drill-link-color: var(--mkz-link);
    --mkz-drill-cursor: pointer;
    --mkz-drill-focus-outline: var(--mkz-focus-ring);
    --mkz-widget-grab-cursor: grab;
    --mkz-widget-grabbing-cursor: grabbing;
    --mkz-widget-drop-zone-bg: color-mix(in srgb, var(--bs-primary) 4%, transparent);
    --mkz-widget-resize-handle-bg: var(--mkz-border);
    --mkz-rank-gold: #d4af37;
    --mkz-rank-silver: #c0c0c0;
    --mkz-rank-bronze: #cd7f32;
    --mkz-a11y-primary: #4f46e5;
    --mkz-a11y-primary-outline: #3730a3;
    --mkz-a11y-secondary-outline: #475569;
    --mkz-a11y-danger-outline: #9f1239;
}

body {
    background: var(--mkz-bg);
    color: var(--mkz-text);
}

.card {
    background-color: var(--mkz-surface);
    border: var(--mkz-border-width) solid var(--mkz-border);
    border-radius: var(--mkz-radius-lg);
    box-shadow: var(--mkz-shadow-card);
    color: var(--mkz-text);
}

.card .card-header,
.card .card-footer {
    background-color: var(--mkz-panel);
    border-color: var(--mkz-border);
    color: var(--mkz-heading);
    font-weight: var(--mkz-fw-semibold);
}

.dashboard-widget {
    transition: box-shadow var(--mkz-transition-default), background-color var(--mkz-transition-default);
}

.dashboard-widget[data-drillable="true"],
[data-drillable="true"] {
    cursor: var(--mkz-drill-cursor);
}

.dashboard-widget:hover {
    box-shadow: var(--mkz-shadow-card-hover);
}

.dashboard-widget-value {
    color: var(--mkz-heading);
    font-size: var(--mkz-fs-kpi-value);
    font-weight: var(--mkz-fw-bold);
    line-height: 1.15;
}

.dashboard-widget-label {
    color: var(--mkz-text-muted);
    font-size: var(--mkz-fs-sm);
}

.form-control,
.form-select {
    background-color: var(--mkz-surface);
    border-color: var(--mkz-border);
    border-radius: var(--mkz-radius-md);
    color: var(--mkz-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mkz-link);
    box-shadow: var(--mkz-shadow-focus);
}

.light-style,
[data-bs-theme="light"] {
    --mkz-text-muted: #4f5965;
}

.light-style .text-muted,
.light-style .dashboard-widget-label,
[data-bs-theme="light"] .text-muted,
[data-bs-theme="light"] .dashboard-widget-label {
    color: var(--mkz-text-muted) !important;
}

.light-style .btn-primary,
[data-bs-theme="light"] .btn-primary {
    background-color: var(--mkz-a11y-primary) !important;
    border-color: var(--mkz-a11y-primary) !important;
    color: #ffffff !important;
}

.light-style .btn-outline-primary,
[data-bs-theme="light"] .btn-outline-primary {
    border-color: var(--mkz-a11y-primary-outline) !important;
    color: var(--mkz-a11y-primary-outline) !important;
}

.light-style .btn-outline-secondary,
[data-bs-theme="light"] .btn-outline-secondary {
    border-color: var(--mkz-a11y-secondary-outline) !important;
    color: var(--mkz-a11y-secondary-outline) !important;
}

.light-style .btn-outline-danger,
[data-bs-theme="light"] .btn-outline-danger {
    border-color: var(--mkz-a11y-danger-outline) !important;
    color: var(--mkz-a11y-danger-outline) !important;
}

.light-style .list-group-item.active small,
[data-bs-theme="light"] .list-group-item.active small {
    color: #ffffff !important;
}

.light-style .list-group-item.active,
[data-bs-theme="light"] .list-group-item.active {
    background-color: var(--mkz-a11y-primary) !important;
    border-color: var(--mkz-a11y-primary) !important;
    color: #ffffff !important;
}

.light-style .mkz-admin-list .list-group-item.active small,
[data-bs-theme="light"] .mkz-admin-list .list-group-item.active small {
    color: #ffffff !important;
}

.light-style .list-group-item .fw-semibold,
[data-bs-theme="light"] .list-group-item .fw-semibold {
    color: #111827 !important;
}

.btn {
    border-radius: var(--mkz-radius-sm);
}

.mkz-admin-builder {
    color: var(--mkz-text);
}

.mkz-admin-builder h1,
.mkz-admin-builder h2,
.mkz-admin-builder h3,
.mkz-admin-builder .card-header {
    color: var(--mkz-heading);
}

.dev-tools-cell {
    max-width: 180px;
}

/* Component: MAT-678 Home Command/Ask Bar */
.home-command-shell {
    display: flex;
    justify-content: center;
    padding: 0.75rem 1rem 0;
    position: relative;
    z-index: 2;
}

.home-command-trigger {
    align-items: center;
    background: var(--mkz-surface);
    border: 1px solid var(--mkz-border);
    border-radius: 8px;
    box-shadow: var(--mkz-shadow-card);
    color: var(--mkz-text);
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    max-width: 720px;
    min-height: 44px;
    padding: 0 0.75rem;
    text-align: left;
    width: min(720px, 100%);
}

.home-command-trigger span {
    flex: 1;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-command-trigger kbd {
    background: var(--mkz-panel);
    border: 1px solid var(--mkz-border);
    border-radius: 6px;
    color: var(--mkz-text-muted);
    font-size: 0.75rem;
    font-weight: var(--mkz-fw-semibold);
    min-width: 48px;
    padding: 0.15rem 0.35rem;
    text-align: center;
}

.home-command-overlay {
    align-items: flex-start;
    background: rgba(17, 24, 39, 0.38);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: min(12vh, 6rem) 1rem 1rem;
    position: fixed;
    z-index: var(--mkz-z-modal);
}

.home-command-dialog {
    background: var(--mkz-surface);
    border: 1px solid var(--mkz-border);
    border-radius: 8px;
    box-shadow: var(--mkz-shadow-modal);
    color: var(--mkz-text);
    max-height: min(76vh, 680px);
    max-width: 760px;
    overflow: hidden;
    width: min(760px, 100%);
}

.home-command-modebar {
    border-bottom: 1px solid var(--mkz-border);
    display: grid;
    gap: 0;
    grid-template-columns: 1fr 1fr;
}

.home-command-mode {
    align-items: center;
    background: var(--mkz-panel);
    border: 0;
    color: var(--mkz-text-muted);
    display: flex;
    font-size: 0.9rem;
    gap: 0.4rem;
    justify-content: center;
    min-height: 40px;
}

.home-command-mode.active {
    background: var(--mkz-surface);
    color: var(--mkz-link);
    font-weight: var(--mkz-fw-semibold);
}

.home-command-input-row {
    align-items: center;
    border-bottom: 1px solid var(--mkz-border);
    display: flex;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0 1rem;
}

.home-command-input-row > i {
    color: var(--mkz-text-muted);
    flex: 0 0 auto;
}

.home-command-input {
    background: transparent;
    border: 0;
    color: var(--mkz-text);
    flex: 1;
    font-size: 1rem;
    min-width: 0;
    outline: 0;
}

.home-command-results {
    display: flex;
    flex-direction: column;
    max-height: 480px;
    overflow-y: auto;
    padding: 0.5rem;
}

.home-command-result {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--mkz-text);
    display: flex;
    gap: 0.75rem;
    min-height: 54px;
    padding: 0.55rem 0.65rem;
    text-align: left;
    width: 100%;
}

.home-command-result:hover,
.home-command-result:focus {
    background: color-mix(in srgb, var(--mkz-link) 8%, transparent);
    outline: 0;
}

.home-command-result > i {
    color: var(--mkz-link);
    flex: 0 0 1.25rem;
    text-align: center;
}

.home-command-filter > i {
    color: var(--mkz-a11y-secondary-outline);
}

.home-command-result-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.home-command-result-copy strong,
.home-command-result-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-command-result-copy strong {
    font-size: 0.92rem;
    font-weight: var(--mkz-fw-semibold);
}

.home-command-result-copy small {
    color: var(--mkz-text-muted);
    font-size: 0.78rem;
}

.home-command-empty,
.home-command-ask-panel {
    color: var(--mkz-text-muted);
    font-size: 0.9rem;
    padding: 1rem;
}

.home-command-submit {
    align-items: center;
    background: var(--mkz-a11y-primary);
    border: 1px solid var(--mkz-a11y-primary);
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0 0.9rem;
}

.home-command-submit:disabled {
    opacity: 0.72;
}

.home-command-boundary-alert,
.home-command-boundary-ok {
    align-items: flex-start;
    border-radius: 8px;
    display: flex;
    gap: 0.55rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
}

.home-command-boundary-alert {
    background: #fff1f2;
    color: #9f1239;
}

.home-command-boundary-ok {
    background: #ecfdf5;
    color: #047857;
}

@media (max-width: 640px) {
    .home-command-shell {
        padding: 0.5rem 0.75rem 0;
    }

    .home-command-trigger kbd {
        display: none;
    }

    .home-command-overlay {
        padding: 0.75rem;
    }

    .home-command-dialog {
        max-height: calc(100vh - 1.5rem);
    }
}

.mkz-admin-list {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--mkz-space-7) * 12);
    overflow-y: auto;
}

.mkz-admin-list .list-group-item {
    align-items: flex-start;
    background: var(--mkz-surface);
    border-color: var(--mkz-border);
    color: var(--mkz-text);
    display: flex;
    flex-direction: column;
    gap: var(--mkz-space-1);
}

.mkz-admin-list .list-group-item.active {
    background: var(--mkz-drill-hover-bg);
    border-color: var(--mkz-link);
    color: var(--mkz-heading);
}

.mkz-admin-list .list-group-item small,
.mkz-admin-builder .text-muted {
    color: var(--mkz-text-muted) !important;
}

.mkz-sql-preview {
    background: var(--mkz-panel);
    border: var(--mkz-border-width) solid var(--mkz-border);
    border-radius: var(--mkz-radius-md);
    color: var(--mkz-text);
    margin: 0;
    padding: var(--mkz-space-3);
    white-space: pre-wrap;
}

.mkz-toggle-grid {
    display: grid;
    gap: var(--mkz-space-2);
}

/* ============================================
   1. BASE STYLES
   ============================================ */
body {
    margin: 0;
    padding: 0;
    font-family: var(--mkz-font-family);
}

main {
    margin: 12px;
}

h1:focus {
    outline: none;
}

/* ============================================
   2. APP BRANDING
   ============================================ */
.app-brand {
    overflow: visible;
}

.app-brand-logo img {
    margin-top: 22px;
    margin-bottom: 10px;
    max-height: 42px !important;
    width: auto;
    overflow: visible;
}

/* Show the search box now that it's ready */
#searchbox_container {
    display: flex !important;
}

/* ============================================
   3. NAVIGATION & LAYOUT
   ============================================ */
ul.navbar-nav li.nav-item {
    margin-left: 15px;
}

/* So that the modal is higher (at 1001) */
.layout-content-navbar .layout-navbar {
    z-index: 999 !important;
}

/* ============================================
   4. FORMS & INPUTS
   ============================================ */
.form-h1 {
    font-size: 1.5rem;
    font-weight: normal;
    color: var(--bs-body-color);
}

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

    .form-group textarea.form-control {
        min-height: 100px;
    }

.form-check-label {
    padding-left: 10px;
}

/* To give the checkbox-list proper spacing */
.form-check-list-container .form-check {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* To ensure that checkboxes and radio buttons look consistent (even in modals) */
.form-group .form-check-input {
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
}

/* When the label and Input are on the same line/row */
.col-form-label {
    font-weight: 500;
    text-align: right;
}

/* On small screens, align labels to the left when they stack */
@media (max-width: 575.98px) {
    .col-form-label {
        text-align: left;
    }
}

/* ============================================
   5. OFFERS/REQUESTS LIST COMPONENT STYLES
   ============================================ */

/* Offers/Requests List Component Styles */
.offers-requests-container {
    padding: 1rem;
}

/* Professional Content Container with Proper Margins */
.home-content-section .offers-requests-container,
.home-content-section .matches-container,
.home-content-section .directory-container,
.home-content-section .profile-container {
    padding: 0;
    margin-top: 0.5rem; /* Small top margin */
}

/* Proper spacing for list controls */
.home-content-section .list-controls {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.offers-requests-container .list-controls {
    margin-bottom: 1rem;
    text-align: right;
}

.offers-requests-container .services-list {
    /* Natural scrolling - no fixed height for better UX */
    min-height: 200px;
}

/* Styling for actioned items */
.offers-requests-container .service-actioned {
    opacity: 0.7;
    background-color: var(--bs-secondary-bg);
}

.offers-requests-container .service-actioned::after {
    content: "[OK]";
    position: absolute;
    top: 10px;
    right: 10px;
    color: #28a745;
    font-size: 1.2rem;
}

/* Services grid layout */
/* Vertical services list layout */
.services-list-vertical {
    display: block;
    padding: 0.5rem 0;
}

.service-card-vertical {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 1rem;
    position: relative;
    transition: box-shadow 0.2s;
    margin-bottom: 0.5rem; /* tightened spacing */
    background-color: var(--bs-card-bg);
    color: var(--bs-body-color);
}

.service-card-vertical:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}

/* Refine avatar and header spacing for clean UI */
.service-row {
    align-items: center;
    flex-wrap: nowrap;
}
.contact-avatar {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background-color: var(--bs-secondary-bg);
}
.service-type.badge {
    margin-right: .5rem;
}

.avatar-link {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bs-secondary-bg);
}

.avatar-initials,
.private-indicator {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.service-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.service-header-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.service-title {
    font-weight: 600;
    color: var(--bs-heading-color);
}

.service-description {
    margin: 0.25rem 0 0.5rem 0;
    color: var(--bs-body-color);
}

.service-actions {
    display: flex;
    gap: 0.5rem;
}

/* Match creation modal styles */
.match-create-modal {
    padding: 1rem;
}

.match-create-modal .form-group {
    margin-bottom: 1.5rem;
}

.match-create-modal .form-control {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
}

.match-create-modal .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Default form group row - center items vertically (good for single-line inputs) */
.row.form-group-row {
    display: flex;
    align-items: center;
}

    /* For rows containing textareas - align items to top instead of center */
    .row.form-group-row:has(textarea),
    .row.form-group-row.has-textarea {
        align-items: flex-start;
    }

        /* Additional refinement: ensure proper spacing for top-aligned labels */
        .row.form-group-row:has(textarea) .col-form-label,
        .row.form-group-row.has-textarea .col-form-label {
            padding-top: 0.375rem; /* Match the textarea's top padding */
            padding-bottom: 0;
        }

    /* For stacked layouts (when label is on top) */
    .row.form-group-row.stacked-title {
        flex-direction: column;
        align-items: flex-start;
    }

    /* For long text content in view mode (read-only displays) */
    .row.form-group-row:has(.form-control-plaintext) .col-form-label,
    .row.form-group-row.has-long-text .col-form-label {
        align-self: flex-start;
        padding-top: 0.375rem;
    }

/* The core.css is doing some funky stuff which is causing misalignment */
.view-form .col-form-label {
    padding-top: 0;
    padding-bottom: 0;
}

.modal-form input[type=text],
.modal-form textarea {
    width: 100%;
    max-width: 600px;
}

/* Limit width for date, time, and number inputs */
input[type="date"],
input[type="time"],
input[type="number"] {
    max-width: 200px;
    width: 100%;
}

/* Adjust width for smaller screens */
@media (max-width: 576px) {
    input[type="date"],
    input[type="time"],
    input[type="number"] {
        max-width: 100%;
    }
}

/* ============================================
   5. VALIDATION & ALERTS
   ============================================ */
.validation-message {
    font-size: 12px !important;
    font-family: system-ui;
}

.alert-danger {
    color: darkred;
}

/* Forms ValidationMessages (for field & misc validation) */
.alert-validation {
    margin-top: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Custom styles for MajorErrorAlert component */
.alert-major {
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
    background-color: var(--bs-card-bg);
    color: var(--bs-body-color);
}

.alert-major-heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffc107;
}

.alert-major p {
    font-size: 1.25rem;
    color: var(--bs-body-color);
}

.alert-major-heading > .alert-icon {
    color: #ffc107;
    margin-right: 0.75rem;
}

.alert-major button {
    font-weight: 600;
}

.alert-bar {
    font-size: 1.25rem;
    font-weight: bold;
}

    .alert-bar > .alert-icon {
        font-size: 1.5rem;
        margin-right: .75rem;
    }

    .alert-bar > .text-muted {
        font-size: 1.25rem;
    }

/* Custom style for Parsley error messages to use Bootstrap danger color */
.parsley-errors-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .parsley-errors-list li {
        color: #dc3545;
        font-size: 0.875em;
    }

/* ============================================
   6. BLAZOR ERROR HANDLING (legacy block removed; see modern block later)
   ============================================ */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ============================================
   7. INTERACTIVE ELEMENTS
   ============================================ */
/* for places, like DE sections and field titles, which are clickable for onclick and oncontextmenu to show options */
.clickable-menu {
    cursor: pointer;
}

.contextmenu-opener {
    cursor: context-menu !important;
}

.field-edit-icon {
    opacity: 0.10;
}

    .field-edit-icon:hover {
        opacity: 1;
    }

.field-edit-link,
.field-title-edit-link,
.section-edit-link {
    cursor: pointer;
}

    .field-edit-link:hover,
    .field-title-edit-link:hover,
    .section-edit-link:hover {
        color: #696cff
    }

.field-label-clickable {
    cursor: pointer;
    user-select: none;
}

    .field-label-clickable:hover {
        text-decoration: underline;
    }

/* ============================================
   8. ICONS & LINKS
   ============================================ */
.main-icon-link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px !important;
    margin: 0;
}

.icon-link {
    color: #017BFE;
    font-size: 20px;
}

    .icon-link:hover {
        color: #017BFE;
    }

.required-field-indicator {
    color: #D32F2F;
    margin-left: 4px;
    font-weight: bold;
}

/* ============================================
   9. DROPDOWNS & SELECTS
   ============================================ */

/* ============================================
   9A. GLOBAL DROPDOWN BACKGROUND FIX
   ============================================ */
/* CRITICAL: Safety net for ALL Bootstrap dropdowns
   Ensures opaque backgrounds regardless of theme or variable state
   Fixes transparency issues from navbar backdrop-filter interaction
   Created: 2025-10-04
   Evidence: app.css lines 2557, 4584 have "ensure opaque" comments
   proving transparency was a known issue that needed fixing */

.dropdown-menu {
    /* Triple-fallback: variable -> body bg -> white */
    background-color: var(--bs-dropdown-bg, var(--bs-body-bg, #ffffff)) !important;
    /* Solid border (no transparency) */
    border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.15)) !important;
    /* Visible shadow for separation */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    /* Ensure proper z-index layering */
    z-index: 1000;
    /* Prevent backdrop-filter bleed-through */
    isolation: isolate;
}

/* Ensure dropdown renders properly over navbar backdrop-filter */
.layout-navbar .dropdown-menu {
    /* Force new stacking context */
    transform: translateZ(0);
    will-change: transform;
}

.my-groups-select {
    max-width: 200px;
}

.dropdown {
    width: 100%;
    max-width: 600px;
}

/* for the number drop down */
.form-rec-num-select {
    max-width: 200px;
}

.dropdown-menu .dropdown-item i {
    margin-right: 0.5rem;
}

/* For the Radzen Dropdown to use the "faux-optGroup" */
.dropdown-group-header {
    font-weight: bold;
    color: var(--bs-body-color);
    background-color: #f7f7f7;
}

.dropdown-item {
    padding-left: 20px;
}

/* My Groups dropdown: clean and minimalistic styling */
.my-groups-select {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border-radius: 4px;
    transition: border-color 0.15s ease;
}

/* Regular group options */
.my-groups-select .group-option {
    color: #212529;
    font-weight: 400;
}

/* Subtle separator line */
.my-groups-select .separator-option {
    color: #d0d7de !important;
    font-size: 0.7rem;
    line-height: 0.5rem;
    letter-spacing: -1px;
    cursor: default !important;
    pointer-events: none;
}

/* Create new group - using brand purple with transparency */
.my-groups-select .create-group-option {
    color: #696cff;
    opacity: 0.75;
    font-weight: 400;
    font-size: 0.95rem;
    font-style: italic;
}

/* Hover state for better interaction feedback */
.my-groups-select option.create-group-option:hover {
    opacity: 1;
}

/* Browser-specific refinements */
@-moz-document url-prefix() {
    .my-groups-select option.create-group-option {
        color: rgba(105, 108, 255, 0.75);
        font-style: italic;
    }
    
    .my-groups-select option.separator-option {
        color: #d0d7de;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .my-groups-select option.create-group-option {
        color: rgba(105, 108, 255, 0.75);
        font-style: italic;
    }
    
    .my-groups-select option.separator-option {
        color: #d0d7de;
    }
}

.form-select-lg .rz-dropdown {
    font-size: 1.25rem;
    padding: .5rem 1rem;
}

.rec-options-menu-wrapper .dropdown-toggle::after {
    display: none;
}

.field-context-dropdown {
    position: fixed !important;
    z-index: 1050 !important;
}

/* Use flex to ensure the select and the icon appear on the same line */
.list-long-container {
    display: flex;
    align-items: center;
    width: 100%;
}

    /* Let the Select2 container expand to fill available space */
    .list-long-container select,
    .list-long-container .select2-container {
        flex: 1;
        width: 100% !important;
        min-width: 0;
    }

/* Add spacing so the icon isn't touching the Select2 */
.list-long-view-all-btn {
    margin-left: 0.5rem;
}

/* ============================================
   10. RADZEN COMPONENT STYLES
   ============================================ */
.rz-textbox,
.rz-textarea {
    width: 100%;
    max-width: 600px;
}

/* Style for the context menu container */
.rz-context-menu {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    overflow: hidden;
}

    /* Style for the menu list */
    .rz-context-menu .rz-menu {
        margin: 0;
        padding: 0;
    }

    /* Style for individual menu items */
    .rz-context-menu .rz-navigation-item {
        margin: 0;
        padding: 8px 16px;
    }

        /* Hover state for menu items */
        .rz-context-menu .rz-navigation-item-wrapper:hover,
        .rz-context-menu .rz-navigation-item-link:hover,
        .rz-context-menu .rz-navigation-item:hover {
            background-color: #f0f0f0;
            cursor: pointer;
            color: #696cff !important;
        }

    .rz-context-menu .rz-navigation-item-text {
        font-weight: 500;
        padding: 10px;
    }

    .rz-context-menu .rz-navigation-item:hover .rz-navigation-item-text {
        color: #696cff !important;
    }

.rz-navigation-item-wrapper,
.rz-navigation-item-link,
.rz-navigation-item-text {
    transition: none;
}

/* Override Radzen modal header to use Sneat theme's Bootstrap 5 modal-header styles */
.rz-dialog .rz-dialog-header {
    padding: var(--bs-modal-header-padding-y, 1rem) var(--bs-modal-header-padding-x, 1.5rem);
    background-color: var(--bs-modal-header-bg, var(--bs-white)) !important;
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

/* Style the Radzen dialog title text exactly like Sneat's modal-title */
.rz-dialog .rz-dialog-title {
    margin: 0;
    font-size: var(--bs-modal-title-font-size, 1.25rem);
    font-weight: var(--bs-modal-title-font-weight, 500);
    line-height: var(--bs-modal-title-line-height, 1.5);
    color: var(--bs-body-color) !important;
}

/* Make the close icon match the Sneat close-button style */
.rz-dialog .rz-dialog-header .rz-dialog-close {
    color: var(--bs-body-color) !important;
    font-size: var(--bs-modal-title-font-size, 1.25rem);
    line-height: var(--bs-modal-title-line-height, 1.5);
}

.rz-dialog-content .rec-options-menu-wrapper {
    position: absolute;
    right: 1rem;
    top: 4rem;
    z-index: 1;
}

    /* Make the icon larger */
    .rz-dialog-content .rec-options-menu-wrapper .dropdown-toggle > i {
        font-size: 1.25rem;
    }

/* ============================================
   11. CARDS & PANELS
   ============================================ */
.card {
    margin-bottom: 1rem;
}

.card-header {
    font-weight: 100;
    font-size: 1.25rem;
}

    .card-header .card-hint {
        font-size: 0.875rem;
        color: #6c757d;
        line-height: 1.4;
        margin-top: 0.25rem;
        margin-bottom: 0;
        opacity: 0.8;
    }

.form-card {
    margin-bottom: 20px;
}

.form-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ============================================
   12. DATA DISPLAY
   ============================================ */
.data-display {
    font-weight: bold;
    color: var(--bs-body-color);
    font-size: 1.1em;
}

.label-display {
    color: #777;
    font-size: 0.9em;
}

.display-value.empty-value {
    color: #6c757d;
}

/* de = Data-Explorer */
.de-navbar {
    margin-bottom: 20px;
}

/* ============================================
   13. FIELD VALUE EDIT
   ============================================ */
#FormForFieldValueEdit {
    margin: 0 1em;
}

    #FormForFieldValueEdit .form-label {
        font-size: 1rem;
    }

    #FormForFieldValueEdit textarea {
        min-height: 200px;
    }

/* ============================================
   14. LOADING SPINNER
   ============================================ */
.spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.spinner-container-small {
    height: auto;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 2s linear infinite;
}

.spinner-small {
    border-width: 2px;
    width: 20px;
    height: 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================
   15. SIDEBAR SUBMENU
   ============================================ */
/* Styling to match Sneat's look */
.menu-link {
    padding: 0.625rem 1rem;
    color: var(--bs-body-color);
    text-decoration: none;
}

    .menu-link:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

/* Submenu styling */
/* Reset padding and margins to match main menu items */
.menu-inner .menu-sub {
    padding-left: 1rem !important;
    margin-left: 0 !important;
    list-style: none !important;
}

    /* Ensure menu links in submenus have consistent styling */
    .menu-inner .menu-sub .menu-link {
        padding-left: 0.5rem !important;
    }

        /* Remove any pseudo-element bullet from menu-link in a submenu */
        .menu-inner .menu-sub .menu-link::before {
            content: none !important;
            display: none !important;
            background-image: none !important;
        }

    /* Turn off default list styling just in case */
    .menu-inner .menu-sub .menu-item {
        list-style: none !important;
    }

/* ============================================
   16. FILE UPLOAD
   ============================================ */
.file-upload-wrapper {
    position: relative;
}

.uploaded-file-container {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background-color: var(--bs-secondary-bg);
}

.uploaded-badge {
    display: inline-flex;
    align-items: center;
    background-color: #198754;
    color: white;
    border-radius: 0.25rem;
    padding: 0.35em 0.65em;
    font-size: 0.875em;
}

    .uploaded-badge i {
        margin-right: 5px;
    }

.file-name {
    font-weight: 500;
    margin-right: 10px;
    color: var(--bs-body-color);
}

.re-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    transition: all 0.2s ease;
}

    .re-upload-btn:hover {
        background-color: rgba(13, 110, 253, 0.2);
        color: #0a58ca;
    }

/* ============================================
   17. PHOTO UPLOAD
   ============================================ */
.image-container {
    cursor: pointer;
}

/* Common styles for all photo wrappers */
.photo-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
}

.photo-icon {
    font-size: 4rem;
    color: #adb5bd;
}

/* For the icon button on the bottom right side */
.photo-upload-btn {
    position: absolute;
    bottom: 8px;
    right: -5px;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    border: 2px solid var(--bs-border-color);
}

/* Profile photo styles */
.photo-profile-wrapper {
    width: 150px;
}

.photo-profile-image-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--bs-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bs-border-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    position: relative;
}

/* Banner photo styles */
.photo-banner-image-container {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--bs-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bs-border-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    position: relative;
}

@media (max-width: 768px) {
    .photo-banner-image-container {
        height: 160px;
    }
}

/* Preview image styles */
.photo-preview,
.page-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-banner-container {
    margin-bottom: 20px;
}

.img-hidden {
    display: none;
}

/* Upload overlay */
.upload-overlay {
    opacity: 0;
    background-color: rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.photo-profile-image-container:hover .upload-overlay,
.photo-banner-image-container:hover .upload-overlay {
    opacity: 1;
}

/* Button styles */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   18. IMAGE CROPPER
   ============================================ */
/* Crop modal styles */
.img-container {
    height: calc(80vh - 120px);
    max-height: 700px;
    overflow: hidden;
    background-color: #f0f0f0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#image-to-crop {
    display: block;
    max-width: 100%;
}

/* Make cropper canvas fill available space */
.cropper-container {
    min-width: 90%;
    min-height: 90%;
}

/* Make the cropper overlay more visible */
.cropper-view-box {
    outline: 1px solid #fff;
    outline-color: rgba(255, 255, 255, 0.8);
}

.profile-crop .cropper-view-box,
.profile-crop .cropper-face {
    border-radius: 50%;
}

.cropper-line,
.cropper-point {
    background-color: #0d6efd;
}

/* Responsive styles */
@media (max-width: 768px) {
    .img-container {
        height: calc(70vh - 100px);
    }
}

/* ============================================
   19. PASSWORD CONFIRMATION
   ============================================ */
.confirm-password-wrapper {
    margin-top: .5rem;
}

/* ============================================
   20. SELECT2 STYLES
   ============================================ */
/* Make Select2's single-selection span look just like Sneat inputs */
.select2-container--bootstrap-5
.select2-selection--single.form-select {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding-block-start: 7px !important;
    padding-block-end: 7px !important;
    padding-inline-start: 14px !important;
    padding-inline-end: 14px !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 15px !important;
    line-height: 22.95px !important;
    color: rgb(105, 122, 141) !important;
    background-color: rgb(255, 255, 255) !important;
    background-clip: padding-box !important;
    border-style: solid !important;
    border-width: 0.8px !important;
    border-color: rgb(110, 113, 253) !important;
    border-radius: 6px !important;
    box-shadow: rgba(105, 108, 255, 0.08) 0 0 3.9px 0.78px !important;
    appearance: none !important;
}

/* ============================================
   21. DIRECTORY BROWSER
   TODO: This should probably be broken up into its own CSS file for clarity
   ============================================ */
.hero-section {
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(to right, #0077B5, #0A66C2);
    color: white;
    margin-bottom: 40px;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto 30px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0 15px;
    margin-bottom: 60px;
}

@media (max-width: 991.98px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
}

.grid-item {
    display: flex;
}

.team-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    background-color: white;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .team-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

/* Make profile photos round like LinkedIn */
.card-img-container {
    width: 120px;
    height: 120px;
    margin: 20px auto;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius: 50%;
}

.team-card:hover .card-img {
    transform: scale(1.03);
}

.no-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, #0077B5, #0A66C2);
    color: white;
    border-radius: 50%;
}

.initials {
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Adjust card content padding for better LinkedIn-like appearance */
.card-content {
    padding: 15px 20px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Center align name and position for LinkedIn-like style */
.member-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--bs-body-color);
    text-align: center;
}

/* LinkedIn-style tagline */
.member-position {
    font-size: 0.95rem;
    color: #666666;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
}

/* Push member-section down by adding margin-top auto */
.member-section {
    margin-top: auto;
    margin-bottom: 15px;
    flex-grow: 0;
}

.section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 5px;
}

/* Ensure the About section takes up appropriate space */
.truncated-text {
    font-size: 0.9rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    height: 2.8em;
    min-height: 2.8em;
}

    /* Make truncated text hoverable WITHOUT dotted underline */
    .truncated-text.hover-trigger {
        cursor: pointer;
        transition: color 0.2s ease;
        position: relative;
        z-index: 2;
        text-decoration: none !important;
    }

        .truncated-text.hover-trigger:hover {
            color: #0077B5;
            text-decoration: none !important;
        }

.member-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0;
    gap: 6px;
}

.member-tag {
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #f3f6f8;
    color: #0077B5;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Keep member-social at the very bottom */
.member-social {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    padding-top: 15px;
    position: relative;
    z-index: 2;
}

/* Group social links on the left */
.social-links {
    display: flex;
    gap: 10px;
}

/* Group offers/requests icons on the right */
.offers-requests-icons {
    display: flex;
    gap: 10px;
}

.social-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f3f6f8;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

    .social-btn:hover {
        background-color: #0077B5;
        color: white;
    }

/* Style offer and request icons with cute peachy color */
.offer-icon,
.request-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    background-color: #ffccbc;
    color: #bf360c;
}

    .offer-icon:hover,
    .request-icon:hover {
        background-color: #ffab91;
        color: #d84315;
        transform: scale(1.1);
    }

    .offer-icon i,
    .request-icon i {
        font-size: 0.9rem;
    }

/* For the special way of making the whole card clickable */
.card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}

/* Featured styles - kept for compatibility */
.featured .team-card {
    border: 1px solid #0077B5;
}

.featured-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #0077B5;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 10;
}

/* Directory: Group admin badge
   Docs: see @docs-directory-admin-badge (/docs/_to_implement/directory-admin-badge-planning.md)
*/
.admin-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #6c757d;
    color: #fff;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
}
.admin-badge .bi { font-size: 0.9em; }
.admin-badge .badge-text { line-height: 1; }

/* Make sure interactive elements are above the card-link overlay */
.hover-trigger,
.offer-icon,
.request-icon,
.social-btn {
    position: relative;
    z-index: 2;
}

/* Make touch targets larger on mobile */
@media (max-width: 768px) {
    .offer-icon,
    .request-icon {
        width: 40px;
        height: 40px;
    }

    .truncated-text.hover-trigger {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
}

/* ============================================
   Directory Browser Layout Improvements
   - Ensure the directory grid makes full use of width
   - Scope overrides to the directory browser to avoid affecting other grids
   ============================================ */

.member-directory-browser .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Use auto-fill grid to expand cards across the available width */
.member-directory-browser .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding-left: 0;
    padding-right: 0;
}

/* Slightly wider cards on large desktops for a balanced look */
@media (min-width: 1400px) {
    .member-directory-browser .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* Tighten spacing on small screens without affecting global grid */
@media (max-width: 575.98px) {
    .member-directory-browser .grid-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Custom hover cards */
.custom-hover-card {
    max-width: 350px;
    padding: 16px;
    padding-top: 20px;
    background: var(--bs-card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    border: 1px solid var(--bs-border-color);
    z-index: 9999 !important;
    position: relative;
    color: var(--bs-body-color);
}

    /* Update border colors to match new icon colors */
    .custom-hover-card.offers-card {
        border-left: 4px solid #ffab91;
    }

    .custom-hover-card.requests-card {
        border-left: 4px solid #ffab91;
    }

    .custom-hover-card.about-card {
        border-left: 4px solid #0077B5;
    }

.custom-hover-card-header {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--bs-heading-color);
}

.offers-card .custom-hover-card-header,
.requests-card .custom-hover-card-header {
    color: #bf360c;
}

.about-card .custom-hover-card-header {
    color: #0077B5;
}

/* Close button for touch devices */
.custom-hover-card-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .custom-hover-card-close:hover {
        color: var(--bs-body-color);
    }

/* ============================================
   22. MANUAL MATCH MODAL
   ============================================ */
.manual-match-header {
    background-color: var(--bs-secondary-bg);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--bs-link-color);
}

.manual-match-description {
    margin: 0;
    color: #495057;
    font-size: 0.95rem;
    line-height: 1.5;
}

.service-selection-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 0.5rem;
}

.service-item {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--bs-card-bg);
}

    .service-item:hover {
        border-color: var(--bs-link-color);
        box-shadow: 0 2px 4px rgba(105, 108, 255, 0.1);
    }

    .service-item.selected {
        border-color: var(--bs-link-color);
        background-color: var(--bs-secondary-bg);
    }

.service-photo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    margin-right: 0.75rem;
}

.service-photo-placeholder {
    width: 48px;
    height: 48px;
    background-color: var(--bs-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

.service-name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--bs-body-color);
}

.service-contact {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.service-description {
    font-size: 0.875rem;
    color: #495057;
    margin-bottom: 0;
}

.service-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.service-selected-icon {
    color: #007bff;
    font-size: 1.25rem;
    margin-left: 0.5rem;
}

/* ============================================
   23. RESPONSIVE UTILITIES
   ============================================ */
/* Was previously suggested to use 768px but Sneat uses 576 and Radzen uses 1024 */
@media (min-width: 1024px) {
    .right-align-md-up {
        text-align: right;
    }
}

/* ============================================
   24. MATCHES UI COMPONENTS
   ============================================ */

/* Latest Matches Display Component */
.latest-matches-container {
    max-width: 100%;
}

.matches-header h5 {
    color: var(--bs-body-color);
    font-weight: 600;
}


.matches-list {
    /* Natural scrolling - no fixed height for better UX */
    min-height: 200px;
}

.matches-list.services-list-vertical {
    padding: 0;
}

.match-card {
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--bs-link-color);
    transition: all 0.2s ease-in-out;
    background-color: var(--bs-card-bg);
}

.match-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.match-card.match-viewed {
    background-color: var(--bs-secondary-bg);
    border-left-color: color-mix(in sRGB, var(--bs-link-color) 60%, var(--bs-body-bg));
}

.match-card .match-header .match-name {
    font-weight: 600;
}

.match-card .match-services li + li {
    margin-top: 0.25rem;
}

.service-info {
    font-size: 0.875rem;
    color: #6c757d;
}

.service-info strong,
.match-services strong {
    color: #495057;
}

.match-meta {
    font-size: 0.75rem;
}

.feedback-status .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
}

.match-quick-actions .btn,
.quick-feedback .btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-width: 1px;
}

.match-quick-actions .btn i {
    font-size: 0.9rem;
}

.match-quick-actions .btn:hover,
.quick-feedback .btn:hover {
    transform: translateY(-1px);
}

.match-actions {
    font-size: 0.75rem;
}

.match-actions-column {
    min-width: 180px;
}

.match-actions-column .btn {
    min-width: 140px;
}

.match-feedback-update-btn {
    border-style: dashed;
}

.view-profile-btn {
    border-color: #ced4da;
}

.match-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
}

.match-avatar .avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.match-has-feedback .match-quick-actions {
    display: none;
}

.match-card .match-name-link:hover .match-name {
    text-decoration: underline;
}

.matches-empty-state .btn {
    margin-top: 1rem;
}

.match-notes {
    line-height: 1.4;
}

.no-matches {
    color: #6c757d;
}

.no-matches .display-4 {
    font-size: 3rem;
    opacity: 0.5;
}

/* Matches Dashboard Widget */
.matches-dashboard-widget {
    background: var(--bs-card-bg);
    border-radius: 0.375rem;
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    height: fit-content;
}

.widget-header h6 {
    color: var(--bs-body-color);
    font-weight: 600;
    margin: 0;
}

.matches-compact-list {
    /* Compact view still needs height constraint for compact display */
    max-height: 300px;
    overflow-y: auto;
}

.match-item {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-link-color) !important;
    transition: all 0.2s ease-in-out;
}

.match-item:hover {
    background: var(--bs-secondary-bg);
    transform: translateX(2px);
}

.match-item .fw-medium {
    font-size: 0.875rem;
    color: var(--bs-body-color);
    font-weight: 600;
}

.match-item small {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.match-actions .btn-group .btn {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-width: 1px;
}

.no-matches-widget {
    color: #6c757d;
    font-size: 0.875rem;
}

.no-matches-widget i {
    font-size: 1.5rem;
    opacity: 0.5;
}

/* Match Feedback Modal */
.match-summary {
    background: var(--bs-secondary-bg);
    border-radius: 0.375rem;
    padding: 1rem;
}

.match-summary h6 {
    color: var(--bs-body-color);
    font-weight: 600;
    margin: 0;
}

.feedback-selection h6 {
    color: var(--bs-body-color);
    font-weight: 600;
}

.feedback-selection .text-primary {
    color: #696cff !important;
}

.feedback-memo textarea {
    resize: vertical;
    min-height: 80px;
}

.feedback-memo .form-text {
    margin-top: 0.25rem;
}

.feedback-memo .text-warning {
    color: #ff6600 !important;
}

.feedback-memo .text-danger {
    color: #ff3e1d !important;
}

/* Matching Service Widget - MAT-34 */
.matching-service-widget {
    background: var(--bs-card-bg);
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
}

.matching-service-widget .card-header {
    background-color: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.matching-service-widget .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.metrics-section {
    margin-bottom: 1.5rem;
}

.metrics-section:last-child {
    margin-bottom: 0;
}

.metrics-section h6 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.metric-card {
    background-color: var(--bs-secondary-bg);
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color);
    transition: all 0.2s ease-in-out;
}

.metric-card:hover {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.metric-card .small {
    font-size: 0.75rem;
    color: #6c757d;
}

.metric-card .fw-semibold {
    font-size: 0.875rem;
    color: #495057;
    font-weight: 600;
}

.metric-card .text-primary {
    color: #696cff !important;
}

.metric-card .text-warning {
    color: #ff6600 !important;
}

.metric-card .text-info {
    color: #03c3ec !important;
}

.no-metrics-widget {
    color: #6c757d;
    font-size: 0.875rem;
    text-align: center;
    padding: 2rem 1rem;
}

.no-metrics-widget i {
    font-size: 2.5rem;
    opacity: 0.5;
    color: #adb5bd;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .match-card .service-row {
        flex-direction: column;
    }

    .match-actions-column {
        width: 100%;
        min-width: auto;
    }

    .match-actions-column .btn {
        width: 100%;
    }

    .match-quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .matches-dashboard-widget {
        margin-bottom: 1rem;
    }

    .match-item {
        padding: 0.75rem !important;
    }
}

/* Bootstrap Modal Enhancements for Match Feedback */
.modal-content {
    border-radius: 0.5rem;
}

.modal-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1.25rem;
}

.modal-title {
    color: var(--bs-body-color);
    font-weight: 600;
}

.modal-body {
    padding: 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 1.25rem;
}

/* Loading States */
.latest-matches-container .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
}

.matches-dashboard-widget .spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   OAUTH STYLING FOR INVITE PAGE
   ============================================ */
.oauth-signup-section {
    margin: 20px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.signup-divider {
    margin: 8px 0 6px 0;
    color: #666;
    font-style: italic;
}

/* OAuth Button Container - Standard Layout */
.oauth-buttons-container {
    max-width: var(--auth-button-max-width);
    margin: 0 auto;
    padding: 24px 0;
}

.oauth-button-wrapper {
    margin-bottom: 12px;
    max-width: var(--auth-button-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Google Container (for rendered button) */
.google-oauth-container {
    display: flex;
    justify-content: center;
    min-height: var(--oauth-button-height);
    width: 100%;
    max-width: var(--auth-button-max-width);
    margin: 0 auto;
}

/* Dark mode: if GIS hasn’t rendered yet, show a subtle placeholder for discoverability */
html.dark-style .google-oauth-container:empty::before,
[data-bs-theme="dark"] .google-oauth-container:empty::before {
    content: "Continue with Google";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--oauth-button-height);
    border: 1px solid var(--mkz-border);
    border-radius: 4px;
    color: var(--mkz-text-muted);
    background: transparent;
}

/* LinkedIn Custom Button (Brand Compliant) */
.linkedin-signin-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: var(--oauth-button-height);
    background-color: #0A66C2;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    padding: 0 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.linkedin-signin-button:hover {
    background-color: #004182;
}

.linkedin-signin-button:active {
    background-color: #00396C;
}

.linkedin-signin-button img {
    width: 20px;
    height: 20px;
}

/* Apple Custom Button (HIG Compliant) */
.apple-signin-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: var(--oauth-button-height);
    background-color: #000000;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 0 24px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.apple-signin-button:hover {
    opacity: 0.9;
}

.apple-signin-button:active {
    opacity: 0.8;
}

.apple-signin-button img {
    width: 20px;
    height: 20px;
}

/* Apple White Variant (for dark backgrounds) */
.apple-signin-button.white-variant {
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #000000;
}

/* Responsive Design */
@media (max-width: 768px) {
    .oauth-buttons-container {
        max-width: 100%;
        padding: 16px;
    }
    
    .google-oauth-container > div {
        width: 100% !important;
    }
}

/* OAuth Callback Page Styling */
.oauth-callback-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bs-body-bg);
}

.oauth-callback-content {
    background: var(--bs-card-bg);
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 400px;
    width: 90%;
    color: var(--bs-body-color);
}

.oauth-callback-content h3 {
    margin-bottom: 20px;
    color: var(--bs-heading-color);
}

.spinner-container {
    margin: 20px 0;
}

.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0A66C2;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================
   CENTRALIZED AUTHENTICATION BUTTON STYLES
   ================================
   
   Purpose: Provide consistent, maintainable styling for all authentication buttons
   (Login, OAuth providers, password reset) across the application.
   
   Architecture:
   - Uses CSS custom properties for single source of truth (DRY principle)
   - All button widths derive from --auth-button-max-width
   - JavaScript reads these values dynamically via getOAuthButtonWidth()
   - Responsive design adjusts for mobile devices < 420px
   
   Affected Pages:
   - /login - Main login page
   - /invite_accept/* - Dynamic signup forms
   - /password-reset - Password reset flow
   
   OAuth Providers Styled:
   - Google (rendered via Google Identity Services)
   - LinkedIn (custom HTML button)
   - Apple (custom HTML button)
   
   Related Files:
   - /app/wwwroot/js/login.js - Reads CSS properties for Google button width
   - /app/Layouts/LoginLayout.razor - Provides .authentication-inner wrapper
   - /docs/_to_implement/oauth-button-styling-fixes-planning.md - Full documentation
   ================================ */

/* CSS Custom Properties for maintainable, DRY approach 
   Change these values to adjust ALL authentication buttons globally */
/* WHY: Standardize OAuth button sizing across login/register flows.
   See: docs/to_implement/oauth-buttons-height-consistency-planning.md */
:root {
    --auth-button-max-width: 360px;     /* Maximum width for all auth buttons */
    --auth-form-max-width: 400px;       /* Maximum width for form container */
    --auth-button-mobile-margin: 20px;  /* Padding for mobile devices */
    /* Height standard for all OAuth buttons; align with Google GIS "large" (≈40px) */
    --oauth-button-height: 40px;
}

/* Constrain authentication form content width */
.authentication-inner .card-body {
    max-width: var(--auth-form-max-width);
    margin: 0 auto;
    width: 100%;
}

/* Button max-width constraints for all authentication buttons */
.authentication-inner .btn,
.authentication-inner button {
    max-width: var(--auth-button-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Ensure d-grid buttons center properly with constraints */
.authentication-inner .d-grid.w-100 {
    display: grid;
    justify-content: center;
    max-width: var(--auth-button-max-width);
    margin: 0 auto;
}

/* OAuth button container standardization - properly scoped */
.authentication-inner .oauth-button-wrapper {
    max-width: var(--auth-button-max-width);
    margin: 0 auto 12px auto;
}

/* Ensure all OAuth buttons have consistent width */
.authentication-inner .google-oauth-container,
.authentication-inner .linkedin-signin-button,
.authentication-inner .apple-signin-button {
    width: var(--auth-button-max-width);
    max-width: var(--auth-button-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

/* Google button container specific fix - removed unnecessary !important */
.authentication-inner .google-oauth-container > div {
    width: 100%;
    max-width: var(--auth-button-max-width);
}

/* OAuth: ensure Google GIS button remains interactive and above any overlays on auth pages */
/* Permalinks: @docs-oauth-styling-planning */
.authentication-inner .google-oauth-container > div {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
}

/* Ensure "Forgot Password?" aligns to right consistently */
.authentication-inner .form-password-toggle .btn-link {
    margin-left: auto;
}

/* Remove vendor decorative blocks on auth pages for cleaner look */
.authentication-wrapper.authentication-basic .authentication-inner:before {
    content: none !important;
    display: none !important;
}

/* Extra safety: hide any after pseudo-element decorations as well */
.authentication-wrapper.authentication-basic .authentication-inner:after {
    content: none !important;
    display: none !important;
}

/* Tighter, consistent checkbox alignment on login */
.authentication-inner .form-check {
    display: flex;
    align-items: center;
}
.authentication-inner .form-check-input {
    margin-right: 8px;
}
.authentication-inner .form-check-label {
    padding-left: 0;
}

/* Ensure auth form fields visually align with buttons */
.authentication-inner .form-control {
    max-width: var(--auth-button-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Ensure the password label + forgot link row aligns to input width */
.authentication-inner .form-password-toggle > .d-flex {
    max-width: var(--auth-button-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Ensure the password input group (including the icon) matches the same width
   so the right edge lines up with the "Forgot password?" link row */
.authentication-inner .form-password-toggle .input-group {
    max-width: var(--auth-button-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Match internal form label sizing and spacing on auth pages */
.authentication-inner .form-label {
    font-size: inherit; /* use app-wide base size for consistency */
    margin-bottom: 0.25rem;
}

/* Responsive design for mobile devices */
@media (max-width: 420px) {
    :root {
        --auth-button-max-width: calc(100vw - 40px); /* Full width minus padding */
        --auth-form-max-width: calc(100vw - 40px);
    }
    
    .authentication-inner .card-body {
        padding: 1.5rem 1rem;
    }
}

/* ================================
   DIVIDER STYLES (Bootstrap standard)
   ================================ */
.divider {
    display: block;
    text-align: center;
    margin: 1rem 0;
    overflow: hidden;
    white-space: nowrap;
}

.divider .divider-text {
    position: relative;
    display: inline-block;
    font-size: 0.8rem;
    padding: 0rem 1rem;
}

.divider .divider-text i {
    font-size: 1rem;
}

.divider .divider-text:before, 
.divider .divider-text:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 100vw;
    border-top: 1px solid rgba(67, 89, 113, 0.2);
}

.divider .divider-text:before {
    right: 100%;
}

.divider .divider-text:after {
    left: 100%;
}

.divider.text-start .divider-text {
    padding-left: 0;
}

.divider.text-end .divider-text {
    padding-right: 0;
}

.divider.text-start-center .divider-text {
    left: -25%;
}

.divider.text-end-center .divider-text {
    right: -25%;
}

.divider.divider-dotted .divider-text:before, 
.divider.divider-dotted .divider-text:after {
    border-style: dotted;
    border-width: 0 1px 1px;
    border-color: rgba(67, 89, 113, 0.2);
}

.divider.divider-dashed .divider-text:before, 
.divider.divider-dashed .divider-text:after {
    border-style: dashed;
    border-width: 0 1px 1px;
    border-color: rgba(67, 89, 113, 0.2);
}

.success-message i,
.error-message i {
    font-size: 48px;
    margin-bottom: 10px;
}

.success-message i {
    color: #28a745;
}

.error-message i {
    color: #dc3545;
}

.login-message {
    margin: 15px 0;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
}

.login-message a {
    color: #696cff;
    text-decoration: none;
    font-weight: 500;
}

.login-message a:hover {
    text-decoration: underline;
}

/* Utility classes for common styles */
.hidden {
    display: none;
}

.clickable {
    cursor: pointer;
}

.context-menu-label {
    cursor: context-menu;
}
/* Main Search Bar */
.main-search-select {
    min-width: 300px;
}

/* Search: keep compact on the left */
.layout-content-navbar .layout-navbar #searchbox_container {
    flex: 0 0 auto;
    min-width: 0;
    margin-right: .75rem;
}
.layout-content-navbar .layout-navbar #searchbox_container .nav-item {
    flex: 0 0 auto;
    min-width: 0;
}
.layout-content-navbar .layout-navbar #searchbox_container .select2-container {
    width: 100% !important;
}

/* Make navbar a positioning context so the Select2 container can absolutely position its dropdown */
.layout-content-navbar .layout-navbar,
.layout-content-navbar .layout-navbar #searchbox_container,
.layout-content-navbar .layout-navbar #searchbox_container .nav-item,
.layout-content-navbar .layout-navbar #searchbox_container .select2-container {
    position: relative;
}

/* Tom Select navbar integration */
.main-search-ts-wrapper.ts-wrapper {
    height: 44px;
    border-radius: .375rem;
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
}

/* My Groups: take majority of navbar space; fill width */
.layout-content-navbar .layout-navbar #my-groups-container {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: .75rem;
}
.layout-content-navbar .layout-navbar #my-groups-container .my-groups-select {
    width: 100% !important;
    max-width: none;
}
/* Bootstrap dropdown version of My Groups */
.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-toggle {
    width: 100% !important;
    max-width: none;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .my-groups-toggle {
    background-color: var(--bs-card-bg);
    border-color: var(--mkz-focus-ring, rgba(105, 108, 255, 0.35));
    color: var(--bs-body-color);
    box-shadow: 0 0.2rem 0.4rem rgba(105, 108, 255, 0.08);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .my-groups-toggle:hover,
.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .my-groups-toggle:focus {
    background-color: var(--bs-card-bg);
    border-color: var(--mkz-focus-ring, rgba(105, 108, 255, 0.65));
    box-shadow: 0 0.35rem 0.7rem rgba(105, 108, 255, 0.12);
    color: var(--bs-body-color);
}

/* Ensure long group lists scroll inside the dropdown */
.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-menu {
    /* Show full list (no scroll); rely on page scroll if necessary */
    max-height: none;
    overflow: visible;
    width: 100%;
    padding-top: .25rem;
    padding-bottom: .25rem;
    /* Ensure opaque, theme-aware background in both light/dark */
    background-color: var(--bs-dropdown-bg, #ffffff) !important;
    border-color: var(--bs-border-color);
}

.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-menu .dropdown-search {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    background-color: var(--bs-body-bg);
}

.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-menu .dropdown-search .form-control {
    box-shadow: none;
}

.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-menu .dropdown-check {
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #696cff;
}

.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-menu .dropdown-item {
    gap: 0.6rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-menu .dropdown-item.active {
    font-weight: 600;
}

/* Section headers with comfortable spacing */
.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-header {
    padding-top: .5rem;
    padding-bottom: .25rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-menu .create-group-item {
    color: #696cff;
    font-weight: 500;
}

.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-menu .create-group-item i {
    color: #696cff;
}

/* Mobile touch targets: ensure comfortable hit area for dropdown items */
@media (hover: none) and (pointer: coarse) {
  .layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-item {
    min-height: 44px;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}

/* Compact density on very small screens */
@media (max-width: 575.98px) {
  .layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-toggle {
    height: 40px;
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .92rem;
  }
}

/* Focus-visible styles for better keyboard a11y */
.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-toggle:focus-visible,
.layout-content-navbar .layout-navbar #my-groups-container .my-groups-dropdown .dropdown-item:focus-visible {
  outline: 2px solid #696cff;
  outline-offset: 2px;
}

/* On very small screens, hide Search text to save space */
@media (max-width: 575.98px) {
    #search-link .search-text { display: none; }
}

#searchbox_container {
    flex: 0 0 auto;
}

#search-link.search-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .45rem .75rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    color: var(--bs-body-color, #2f3441);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

#search-link.search-link:hover,
#search-link.search-link:focus-visible {
    color: var(--bs-primary, #696cff);
    border-color: rgba(105, 108, 255, .45);
    box-shadow: 0 0 0 .2rem rgba(105, 108, 255, .12);
    text-decoration: none;
}

#search-link .bx-search {
    font-size: 1.1rem;
}

@media (max-width: 767.98px) {
    #searchbox_container {
        margin-right: .25rem;
    }

    #search-link.search-link {
        width: 40px;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
}
.main-search-ts-wrapper.ts-wrapper .ts-control {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    padding: .375rem .75rem;
    height: 44px;
    display: flex;
    align-items: center;
    box-shadow: rgba(105,108,255,0.08) 0 0 3.9px .78px;
    cursor: pointer !important;
    background: var(--bs-card-bg);
    pointer-events: auto !important;
    user-select: none !important;
}
.main-search-ts-wrapper.ts-wrapper.focus .ts-control,
.main-search-ts-wrapper.ts-wrapper.input-active .ts-control {
    border-color: #696cff;
    box-shadow: 0 0 0 .2rem rgba(105,108,255,.25);
}
.main-search-ts-wrapper .ts-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    z-index: 2000;
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    border-radius: 0 0 .375rem .375rem;
    overflow: hidden;
    background: var(--bs-card-bg);
}
.main-search-ts-wrapper .ts-dropdown-content {
    overflow-y: auto;
    /* max-height removed to allow dynamic sizing - was 400px causing scrollbar issues */
}
/* Tom Select input styling */
.main-search-ts-wrapper .ts-control input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100%;
}
.main-search-ts-wrapper .ts-control .item {
    display: none; /* Hide selected items in search bar */
}
/* Member option styling */
.ts-member-option {
    padding: 8px 12px;
}
.ts-member-option:hover {
    background-color: var(--bs-secondary-bg);
}
.ts-member-option .member-name { font-weight: 600; color: var(--bs-body-color); }
.ts-member-option .member-tagline { font-size: .9em; color: #666; }
.ts-member-option .member-group { font-size: .8em; color: #999; }

.main-search-selection.select2-selection--single {
    height: 44px;
    display: flex;
    align-items: center;
    padding-left: 14px !important;
    padding-right: 14px !important;
}
.main-search-selection .select2-selection__rendered::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    filter: grayscale(100%);
    opacity: .8;
    /* simple magnifier svg */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23697a8d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
}
.main-search-selection .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
}
.main-search-selection .select2-selection__arrow { display: none !important; }
.main-search-selection { box-shadow: rgba(105, 108, 255, 0.08) 0 0 3.9px 0.78px !important; }

/* Enhance container look within navbar */
.main-search-container { width: 100% !important; }
.main-search-container .select2-selection { border-radius: .375rem; }
.main-search-container .select2-selection:focus-within {
    border-color: #696cff !important;
    box-shadow: 0 0 0 .2rem rgba(105,108,255,.25) !important;
}

/* Dropdown visual polish */
.main-search-dropdown.select2-dropdown {
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
    border-radius: 0 0 .375rem .375rem;
    overflow: hidden;
}
.main-search-dropdown .select2-search--dropdown { padding: .5rem .75rem; }
.main-search-dropdown .select2-search__field {
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .375rem .5rem;
}
.main-search-dropdown .select2-results__option { padding: .5rem .75rem; }
.main-search-dropdown .select2-results__option--highlighted { background-color: #eef0ff !important; color: #2f3441 !important; }
.main-search-dropdown .select2-results__message { padding: .5rem .75rem; color: #697a8d; font-style: italic; }

.main-search-dropdown.select2-dropdown {
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    border-radius: 0 0 .375rem .375rem;
    overflow: visible;
}

.main-search-dropdown .select2-results__options {
    max-height: 60vh;
}
.main-search-dropdown .select2-search--dropdown { display: block; }
.main-search-dropdown .select2-search__field { outline: none; }

.main-search-dropdown .select2-results__option--highlighted {
    background-color: #f0f2ff !important;
    color: #2f3441 !important;
}

.main-search-dropdown .select2-results__option {
    padding: .5rem .75rem;
}

.select2-member-result {
    display: flex;
    align-items: center;
    padding: 5px;
}

.select2-member-result img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.member-info {
    flex: 1;
}

.member-name {
    font-weight: bold;
    color: var(--bs-body-color);
}

.member-tagline {
    font-size: 0.9em;
    color: #666;
}

.member-group {
    font-size: 0.8em;
    color: #999;
}

.member-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.25rem;
}

.member-location {
    font-size: 0.8125rem;
    color: #697a8d;
    white-space: nowrap;
    margin-left: 1rem;
    flex-shrink: 0;
}

/* ============================================
   SEARCH OVERLAY STYLES
   ============================================ */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    animation: fadeIn 0.2s ease;
}

.search-overlay.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
}

.search-overlay-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    background: var(--bs-card-bg);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    animation: slideDown 0.3s ease;
}

.search-overlay-close {
    position: fixed;  /* Changed from absolute to fixed for better positioning */
    top: 2rem;       /* Adjusted spacing for better visual balance */
    right: 2rem;     /* Adjusted spacing for better visual balance */
    background: color-mix(in sRGB, var(--bs-card-bg) 90%, var(--bs-body-bg));
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;  /* Circular button */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #697a8d;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: all 0.2s ease;
    z-index: 10001;  /* Ensure on top of overlay */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-overlay-close:hover {
    color: #2f3441;
    transform: scale(1.1);
}

.search-overlay-input-container {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Search Overlay Tom Select Wrapper */
.search-overlay-ts-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.search-overlay-ts-wrapper .ts-control {
    border: 2px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    height: auto;
    min-height: 56px;
    background: var(--bs-secondary-bg);
    margin-bottom: 1rem;
}

.search-overlay-ts-wrapper .ts-control:focus,
.search-overlay-ts-wrapper.focus .ts-control,
.search-overlay-ts-wrapper.input-active .ts-control {
    border-color: var(--bs-link-color);
    background: var(--bs-card-bg);
    box-shadow: 0 0 0 3px var(--mkz-focus-ring, rgba(105,108,255,0.15));
}

.search-overlay-ts-wrapper .ts-control input {
    font-size: 1.125rem;
    padding: 0;
}

.search-overlay-ts-wrapper .ts-dropdown {
    position: static !important;
    border: 1px solid var(--bs-border-color);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    border-radius: 8px;
    background: var(--bs-card-bg);
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0 !important;
}

.search-overlay-ts-wrapper .ts-dropdown-content {
    flex: 1;
    overflow-y: auto;
    max-height: min(80vh, 640px);  /* 8 items * 80px, or 80% viewport - was calc(70vh - 100px) */
    min-height: 240px;  /* At least 3 items visible - was 400px making it too cramped */
    background: var(--bs-card-bg);
    padding: 0;
}

/* Updated member option styles for overlay */
.ts-member-option {
    padding: 1rem;
    border-bottom: 1px solid #f0f0f3;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.ts-member-option:last-child {
    border-bottom: none;
}

.ts-member-option:hover,
.ts-member-option.active {
    background-color: var(--bs-secondary-bg);
}

.member-option-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.member-photo {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 50%;
}

.member-info {
    flex: 1;
    min-width: 0;
}

.member-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.375rem;
}

.member-name {
    font-weight: 600;
    color: #2f3441;
    font-size: 1.125rem;
    line-height: 1.4;
}

.member-location {
    font-size: 0.875rem;
    color: #697a8d;
    white-space: nowrap;
    margin-left: auto;
    padding-left: 1rem;
    flex-shrink: 0;
}

.member-tagline {
    font-size: 0.9375rem;
    color: #697a8d;
    margin-bottom: 0.25rem;
    line-height: 1.4;
    display: block;
}

.member-group {
    font-size: 0.8125rem;
    color: #a1acb8;
    line-height: 1.4;
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from { 
        opacity: 0;
        transform: translateY(-20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   LEGACY PROFILE STYLES (generic)
   ============================================ */

.profile-header {
    position: relative;
}

.profile-cover {
    height: 200px;
    background: linear-gradient(to right, #0077b5, #00a0dc);
    border-radius: 8px 8px 0 0;
}

.profile-main {
    padding: 0 24px 24px;
    margin-top: -100px;
    position: relative;
}

.profile-photo-container {
    width: 152px;
    height: 152px;
    border: 4px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    margin-bottom: 16px;
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 600;
    background: #e7e7e7;
    color: #666;
}

.profile-info h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #000;
}

.profile-info h2 {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 4px;
    color: #000;
}

.profile-company {
    font-size: 16px;
    color: #666;
    margin-bottom: 4px;
}

.profile-location {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.profile-connections {
    margin-top: 8px;
}

.connection-count {
    color: #0077b5;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.profile-content {
    padding: 0 24px 24px;
}

.profile-section {
    padding: 24px 0;
    border-top: 1px solid #e7e7e7;
}

.profile-section:first-child {
    border-top: none;
}

.profile-section h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 16px;
    color: #000;
}

.section-content {
    font-size: 14px;
    line-height: 1.6;
    color: #000;
}

.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-tag {
    display: inline-block;
    padding: 8px 16px;
    background: #e7f3ff;
    color: #0077b5;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .profile-cover {
        height: 120px;
    }
    .profile-main {
        margin-top: -60px;
    }
    .profile-photo-container {
        width: 100px;
        height: 100px;
    }
    .profile-initials {
        font-size: 32px;
    }
}

/* Subtle date styling for services */
.service-date {
    font-size: 0.8rem;
    color: #6c757d;
    opacity: 0.9;
}

/* Ensure avatar content is centered (image already fills, initials/lock centered) */
.contact-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   TEMPLATES BROWSER STYLES  
   ============================================ */
.templates-browser-container {
    padding: 20px;
}

.templates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.templates-filter {
    width: 300px;
}

.templates-list table {
    width: 100%;
}

/* Template Editor Modal */
.template-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-editor-modal .modal-content {
    background: var(--bs-card-bg);
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: auto;
}

.template-editor-modal .modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.template-editor-modal .modal-body {
    padding: 20px;
}

.template-editor-modal .modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Quill Editor */
.quill-container {
    height: 400px;
    margin-top: 10px;
}

.html-editor {
    font-family: 'Courier New', monospace;
    margin-top: 10px;
}

.editor-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.preview-section {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 15px;
}

.preview-content {
    border: 1px solid var(--bs-border-color);
    padding: 15px;
    background: var(--bs-secondary-bg);
    border-radius: 4px;
    max-height: 300px;
    overflow: auto;
}

/* ============================================
   TEMPLATE PREVIEW MODAL
   ============================================ */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.template-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bs-card-bg);
    border-radius: 0;
    box-shadow: none;
    z-index: 1050;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

.template-preview-modal .modal-header {
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.template-preview-modal .modal-body {
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

.template-preview-modal .modal-footer {
    padding: 1rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: flex-end;
}

.template-preview-content {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
    min-height: 200px;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover {
    background-color: #f0f0f0;
    border-radius: 4px;
}

/* ============================================ */
/* UI TABS - TRUE LAZY LOADING IMPLEMENTATION  */
/* Gradient Bottom Navigation Style            */
/* Docs: /docs/ui-tabs-handlebars-routing-and-styling-plan.md */
/* ============================================ */

/* Main Container - Full Height Layout */
.home-gradient-container :where(*) { box-sizing: border-box; }
.home-gradient-container { --bottom-nav-height: 60px; }
.home-gradient-container {
    position: relative;
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
}

/* Content Section - Better margins top and bottom */
.home-content-section {
    flex: 1 1 auto;
    padding: 2rem 1.5rem 100px 1.5rem; /* More top margin, adequate bottom for nav */
    overflow: visible;
    min-height: calc(100vh - 56px); /* Adjusted for thinner nav height */
}

/* Gradient Navigation Bar - Thin with Professional Depth */
.home-gradient-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height); /* Slightly taller to prevent label clipping */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /* Multi-layer shadow for professional depth */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08), 
                0 -2px 4px rgba(0, 0, 0, 0.04),
                0 -8px 24px rgba(102, 126, 234, 0.1);
}

/* iOS safe-area support for PWAs and mobile Safari */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .home-gradient-nav {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .home-content-section {
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
    }
}

/* Gradient Background Layer - Enhanced depth */
.home-nav-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* Inner shadows for depth illusion */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1),
                inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}

/* Navigation Buttons - Horizontal Layout */
.home-nav-btn {
    flex: 0 1 140px; /* Wider for horizontal layout */
    display: flex;
    flex-direction: row; /* Icons next to text */
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Space between icon and text */
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 0.75rem 1rem;
    margin: 0 0.25rem;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    border-radius: 8px;
}

.home-nav-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.home-nav-btn.active {
    color: white;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Active state indicator - subtle bottom accent */
.home-nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--bs-link-color);
    opacity: 0.85;
}

/* Icons - Smaller for horizontal layout */
.home-nav-btn i {
    font-size: 1rem; /* 16px - smaller for horizontal */
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    flex-shrink: 0;
}

.home-nav-btn.active i {
    transform: scale(1.08);
}

/* Labels - Readable next to icons */
.home-nav-btn span {
    font-size: 0.75rem; /* 12px - readable next to icon */
    font-weight: 500;
    letter-spacing: 0.15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge for notifications/counts */
.home-badge {
    position: absolute;
    top: 10px;
    right: calc(50% - 15px);
    background: var(--bs-card-bg);
    color: var(--bs-link-color);
    border-radius: 10px;
    padding: 0 0.3rem;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Loading State */
.tab-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.tab-loading .spinner-border {
    color: var(--bs-link-color);
}

/* Tab Content Animation */
.home-content-section > div {
    animation: fadeInUp 0.3s ease-in;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab Component Styles */
.matches-container,
.offers-requests-container,
.directory-container,
.profile-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* MAT-522 (d): the profile form was too narrow. The real limiter is the shared
   .home-content-section max-width:1200px cap (1200 - padding = ~1104 usable). Widen the
   profile container AND lift the section cap ONLY when it hosts the profile, so the form
   fills the available content area. Other tabs keep their own 1200px container caps, so
   widening the section is a no-op for them (their containers stay centered at 1200). */
.profile-container {
    max-width: 1600px;
}
.home-content-section:has(.profile-container) {
    max-width: none;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Profile Final (pf) additions */
.pf-past-link {
    color: var(--bs-secondary-color);
    text-decoration: none;
    font-size: 0.875rem;
}
.pf-past-link:hover { text-decoration: underline; }
.pf-items-list-past { display: none; }
.pf-item-past { opacity: .85; }
.pf-card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px){
  .pf-card-grid { grid-template-columns: 1fr 1fr; }
}

/* Status badge for PAST items in Offers/Requests list */
.or-badge-status {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    font-size: 0.675rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
}
.or-badge-past {
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
}

/* Inline badge near date */
.or-badge-inline {
    display: inline-block;
    margin-left: 6px;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    vertical-align: baseline;
}

/* Section headers for Current/Past */
.or-section-header {
    margin: 0.5rem 0 0.5rem 0.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Enhanced cards with proper margins and depth */
.home-content-section .service-card,
.home-content-section .match-item,
.home-content-section .offer-item,
.home-content-section .request-item {
    background: var(--bs-card-bg);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem; /* Proper spacing between cards */
    border: 1px solid var(--bs-border-color);
    /* Multi-layer shadow for depth */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 
                0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-content-section .service-card:hover,
.home-content-section .match-item:hover,
.home-content-section .offer-item:hover,
.home-content-section .request-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 
                0 2px 4px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

/* First and last card special treatment */
.home-content-section .service-card:first-child,
.home-content-section .match-item:first-child {
    margin-top: 0.5rem;
}

.home-content-section .service-card:last-child,
.home-content-section .match-item:last-child {
    margin-bottom: 1.5rem; /* Extra space before nav */
}

.tab-component-content {
    background: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
    overflow: visible;
    min-height: 200px;
}

.match-item,
.offer-item,
.request-item,
.directory-item {
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    background: var(--bs-card-bg);
    transition: box-shadow 0.3s ease;
}

.match-item:hover,
.offer-item:hover,
.request-item:hover,
.directory-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.directory-search input {
    max-width: 500px;
}

/* Mobile Responsive Design - Stacked Layout */
@media (max-width: 768px) {
    .home-content-section {
        padding: 1.5rem 1rem 85px 1rem; /* Better top margin */
    }
    
    .home-gradient-nav {
        height: 60px; /* Slightly taller for touch */
        width: 100%;
        border-radius: 0;
        /* Mobile-optimized shadow */
        box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.08), 
                    0 -2px 4px rgba(0, 0, 0, 0.04);
    }
    
    .home-nav-btn {
        flex: 1;
        flex-direction: column; /* Stack icon over text on mobile */
        max-width: none;
        margin: 0 0.125rem;
        padding: 0.5rem 0.25rem;
        gap: 0.25rem;
    }
    
    .home-nav-btn i {
        font-size: 1.125rem; /* 18px - touch friendly */
    }
    
    .home-nav-btn span {
        font-size: 0.625rem; /* 10px - compact but readable */
        font-weight: 500;
    }
    
    /* Hide labels on very small screens */
@media (max-width: 480px) {
    .home-nav-btn span {
        display: none;
    }
        
    .home-gradient-nav {
        height: 54px; /* compact but avoids clipping */
    }
}
}

/* Tablet and Desktop Enhancements */
@media (min-width: 768px) {
    .home-gradient-nav {
        max-width: 840px; /* Wider to reduce crowding */
        width: min(100%, 840px); /* Ensure bar width matches design width */
        left: 50%;
        right: auto; /* unset right to avoid stretch; rely on max-width */
        transform: translateX(-50%);
        border-radius: 16px 16px 0 0;
        height: 60px; /* Thin horizontal bar */
        padding-inline: 8px; /* Ensure end tabs have breathing room inside rounded edges */
        gap: 10px; /* Use container gap instead of per-button margins to avoid overflow calc */
        /* Enhanced shadow for floating effect */
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1), 
                    0 -3px 8px rgba(0, 0, 0, 0.06),
                    0 -12px 32px rgba(102, 126, 234, 0.12);
    }
    
    .home-nav-background {
        border-radius: 16px 16px 0 0;
    }
    
    .home-nav-btn {
        flex: 1 1 0;
        max-width: none; /* Avoid overflow at fixed bar widths */
        margin: 0; /* spacing via container gap */
        padding: 0.75rem 1rem; /* Slightly tighter to fit long labels */
    }
    
    .home-nav-btn i {
        font-size: 1.125rem; /* 18px on desktop */
    }
    
    .home-nav-btn span {
        font-size: 0.8125rem; /* 13px on desktop */
    }
    
    .home-content-section {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2.5rem 2.5rem 110px 2.5rem; /* Generous margins */
    }
}

/* Adjust for sidebar on large screens */
@media (min-width: 1200px) {
    /* When sidebar is expanded */
    .layout-menu:not(.menu-collapsed) ~ .layout-page .home-gradient-nav {
        left: calc(50% + 130px); /* Offset by half sidebar width */
    }
}

/* Large desktop screens - Premium Experience */
@media (min-width: 1200px) {
    .home-gradient-nav {
        max-width: 1100px; /* Wider on large desktops */
        width: min(100%, 1100px);
        height: 64px; /* Refined height */
        padding-inline: 12px; /* More padding on large screens */
        /* Premium multi-layer shadow */
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12), 
                    0 -4px 12px rgba(0, 0, 0, 0.08),
                    0 -16px 40px rgba(102, 126, 234, 0.15);
    }
    
    .home-nav-btn {
        flex: 1 1 0;
        max-width: none; /* Even distribution across the bar */
        margin: 0;
        padding: 0.875rem 1.125rem; /* Tighter to reduce intrinsic width */
        gap: 0.65rem; /* Slightly larger icon/text gap */
    }
    
    .home-nav-btn i {
        font-size: 1.25rem; /* 20px - balanced */
    }
    
    .home-nav-btn span {
        font-size: 0.875rem; /* 14px - comfortable */
    }
    
    .home-content-section {
        padding: 3rem 3rem 120px 3rem; /* Premium margins top and bottom */
    }
}

/* Ultra-wide desktop screens */
@media (min-width: 1440px) {
    .home-gradient-nav {
        max-width: 1280px; /* Stretch bar for ultrawide displays */
        width: min(100%, 1280px);
        padding-inline: 16px; /* Keep end tabs visually inset */
    }

    .home-nav-btn {
        flex: 1 1 0;
        max-width: none;
        margin: 0;
        padding: 1rem 1.25rem; /* Maintain roomy feel on ultrawide */
        gap: 0.7rem; /* Comfortable icon/text spacing */
    }
}

/* Dark Mode Support (if Sneat theme has dark mode) */
/* Disabled for now - causing black background issue
@media (prefers-color-scheme: dark) {
    .home-gradient-container {
        background: #1a1a1a;
    }
    
    .home-content-section {
        color: #e0e0e0;
    }
    
    .tab-loading .spinner-border {
        color: #8b7fea;
    }
    
    .match-item,
    .offer-item,
    .request-item,
    .directory-item {
        background: #2a2a2a;
        border-color: #404040;
        color: #e0e0e0;
    }
}
*/

/* Accessibility - Focus States */
.home-nav-btn:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--mkz-focus-ring, rgba(105,108,255,0.35));
}

.home-nav-btn:focus-visible {
    outline: 2px solid var(--bs-link-color);
    outline-offset: -2px;
}

/* ============================================
   Blazor Error UI
   - Hidden by default; shown only on error
   - Fixed at top (tabs now at bottom)
   ============================================ */
#blazor-error-ui {
    display: none; /* prevent auto showing on load */
    position: fixed;
    top: 0; /* move to top */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2000; /* above nav and tabs */
    background: var(--bs-card-bg);
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    padding: calc(0.75rem + env(safe-area-inset-top, 0)) calc(3.5rem + env(safe-area-inset-right, 0)) 0.75rem calc(1rem + env(safe-area-inset-left, 0));
    /* Keep content readable and scrollable on mobile */
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.95rem;
}
/* Support the runtime adding a .show class */
#blazor-error-ui.show {
    display: block;
}
#blazor-error-ui a {
    color: inherit;
    text-decoration: underline;
}
#blazor-error-ui .message {
    display: inline;
    margin-right: 0.75rem;
}
#blazor-error-ui .reload {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: #0d6efd;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    text-decoration: none;
    background: transparent;
    border: none;
    color: #6c757d;
    font-weight: 700;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}

@media (max-width: 576px) {
  #blazor-error-ui {
    font-size: 0.95rem;
    padding-right: calc(3.75rem + env(safe-area-inset-right, 0));
  }
  #blazor-error-ui .message {
    display: block;
    margin: 0 0 0.5rem 0;
  }
  #blazor-error-ui .reload {
    padding: 0.5rem 0.75rem;
  }
}

/* ============================================
   ERROR DETAILS PANEL - Developer Only
   Shows expanded error info in #blazor-error-ui
   Visible only to users with is_dev = true
   Permalink: @docs-plans-developer-error-details-ui-plan
   ============================================ */

/* Header layout for error message and buttons */
.error-ui-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.error-ui-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* View Details button - developer only */
#blazor-error-ui .view-details {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
}

#blazor-error-ui .view-details:hover {
    background: #5a6268;
}

#blazor-error-ui .view-details:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Details panel container */
.error-details-panel {
    margin-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    padding-top: 1rem;
}

/* Tab buttons */
.error-details-tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.error-details-tabs .tab-btn {
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--bs-body-color);
    transition: background-color 0.15s, border-color 0.15s;
}

.error-details-tabs .tab-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.error-details-tabs .tab-btn.active {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.error-details-tabs .tab-btn:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Copy button special styling */
.error-details-tabs .copy-btn {
    margin-left: auto;
    background: #198754;
    color: #fff;
    border-color: #198754;
}

.error-details-tabs .copy-btn:hover {
    background: #157347;
    border-color: #157347;
}

/* Content area - code-like styling */
.error-details-content {
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 4px;
    padding: 0.75rem;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.8rem;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
}

/* Tab content visibility */
.error-details-content .tab-content {
    display: none;
}

.error-details-content .tab-content.active {
    display: block;
}

/* Error tab styling */
.error-details-content .error-message {
    color: #f14c4c;
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.error-details-content .error-source {
    color: #6a9955;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

.error-details-content .error-stack {
    color: #ce9178;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Console tab styling */
.error-details-content .console-entry {
    padding: 0.25rem 0;
    border-bottom: 1px solid #333;
}

.error-details-content .console-entry:last-child {
    border-bottom: none;
}

.error-details-content .console-entry.error {
    color: #f14c4c;
}

.error-details-content .console-entry.warn {
    color: #cca700;
}

.error-details-content .console-timestamp {
    color: #6a9955;
    font-size: 0.7rem;
    margin-right: 0.5rem;
}

/* Context tab styling */
.error-details-content .context-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.2rem 0;
    flex-wrap: wrap;
}

.error-details-content .context-label {
    color: #569cd6;
    min-width: 100px;
    flex-shrink: 0;
}

.error-details-content .context-value {
    color: #9cdcfe;
    word-break: break-all;
}

/* Empty state */
.error-details-content .empty-state {
    color: #808080;
    font-style: italic;
}

/* Mobile responsive for error details */
@media (max-width: 576px) {
    .error-ui-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .error-ui-actions {
        width: 100%;
        justify-content: flex-start;
        margin-top: 0.5rem;
    }

    #blazor-error-ui .view-details {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
    }

    .error-details-content {
        max-height: 200px;
        font-size: 0.7rem;
        padding: 0.5rem;
    }

    .error-details-tabs {
        gap: 0.15rem;
    }

    .error-details-tabs .tab-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    .error-details-content .context-label {
        min-width: 80px;
    }
}

/* ============================================
   PROFILE FINAL MOCKUP - PROFESSIONAL UI/UX
   Path: /ui-mockups/profile
   Design: Clean, Minimal, Elegant
   ============================================ */

/* Main Container with Gray Background */
.profile-final-container {
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Top Social Bar - Rounded Card */
.pf-social-bar {
    background: var(--bs-card-bg);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: none;
}

.pf-social-links {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.pf-social-link {
    color: #666;
    text-decoration: none;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.2s ease;
    padding: 0.375rem;
}

.pf-social-link:hover {
    color: #696cff;
}

.pf-social-link i {
    font-size: 1.1rem;
}

.pf-social-link span {
    display: none;
    font-weight: 500;
}

/* Show social link labels on larger screens for better usability */
@media (min-width: 576px) {
    .pf-social-link span {
        display: inline;
    }
}

.pf-quick-actions {
    display: flex;
    gap: 0.75rem;
}

.pf-action-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pf-btn-primary {
    background: transparent;
    color: #696cff;
    border: 1px solid #696cff;
}

.pf-btn-primary:hover {
    background: rgba(105, 108, 255, 0.1);
    transform: translateY(-1px);
}

.pf-btn-secondary {
    background: transparent;
    color: #666;
    border: 1px solid #e3e3e3;
}

.pf-btn-secondary:hover {
    border-color: #696cff;
    color: #696cff;
}

/* Main Content Layout - FULL WIDTH */
/* Permalink: @docs-profile-ui-beautification-plan */
.pf-main-content {
    padding: 1.5rem 1rem;
}

/* Profile Card - Floating White Card */
.pf-profile-card {
    background: var(--bs-card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: none;
}

/* Profile Photo Section */
.pf-photo-container {
    text-align: center;
    margin-bottom: 1.5rem;
}

.pf-profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 24px;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Identity Section */
.pf-identity {
    text-align: center;
    margin-bottom: 2rem;
}

.pf-name {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 0.5rem 0;
}

.pf-title {
    font-size: 1rem;
    color: #666;
    margin: 0 0 0.5rem 0;
}

.pf-location {
    font-size: 0.9rem;
    color: #999;
    margin: 0;
}

.pf-location i {
    color: #696cff;
    margin-right: 0.25rem;
}

/* Section Titles */
.pf-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pf-section-title i {
    color: #696cff;
}

/* Bio Section */
.pf-bio-section {
    margin-bottom: 2rem;
}

.pf-bio-content {
    position: relative;
    max-height: 120px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.pf-bio-content.pf-bio-expanded {
    max-height: none;
}

.pf-bio-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 1rem;
}

.pf-bio-content:not(.pf-bio-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, var(--bs-card-bg));
    pointer-events: none;
}

.pf-show-more {
    background: transparent;
    color: #696cff;
    border: none;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.pf-show-more:hover {
    opacity: 0.8;
}

/* Skills Tags */
.pf-skills-section {
    margin-bottom: 1.5rem;
}

.pf-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pf-skill-tag {
    background: #f8f9fa;
    color: #555;
    padding: 0.375rem 0.75rem;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.pf-skill-tag:hover {
    border-color: #696cff;
    color: #696cff;
}

/* Groups Section */
.pf-groups-section {
    margin-bottom: 1.5rem;
}

.pf-groups-section .pf-groups-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pf-groups-section .pf-groups-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
    color: #566a7f;
}

.pf-groups-section .pf-groups-list li:last-child {
    border-bottom: none;
}

/* Legacy Groups Section (kept for compatibility) */
.pf-groups-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pf-group-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: #555;
    transition: color 0.2s;
}

.pf-group-item:hover {
    color: #696cff;
    cursor: pointer;
}

.pf-group-bullet {
    color: #696cff;
    font-size: 0.5rem;
}

/* Reviews Section */
.pf-review-item {
    padding: 0.875rem;
    background: #fafbfc;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    transition: all 0.2s;
}

.pf-review-item:hover {
    background: #f8f9fa;
}

/* Review rating removed - text only reviews */

.pf-review-text {
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.pf-review-author {
    font-size: 0.75rem;
    color: #999;
}

/* Content Cards - Floating Cards */
.pf-content-card {
    background: var(--bs-card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: none;
}

.pf-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f0f0f0;
}

.pf-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0;
}

/* Items List - Linear Layout */
.pf-items-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pf-item-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: #fafbfc;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s;
    gap: 1.25rem;
}

.pf-item-card:hover {
    background: #f8f9fa;
    border-color: #696cff;
}

.pf-item-content {
    flex: 1;
    min-width: 0;
}

.pf-item-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 0.5rem 0;
}

.pf-item-description {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #666;
    margin: 0 0 0.75rem 0;
}

/* Text-only items without title */
.pf-item-text-only {
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
    margin: 0 0 0.75rem 0;
}

.pf-timestamp {
    font-size: 0.75rem;
    color: #999;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pf-timestamp i {
    color: #696cff;
}

.pf-item-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 100px;
}

.pf-item-btn {
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
    min-height: 40px;
}

.pf-btn-match {
    background: transparent;
    color: #666;
    border: 1px solid #e3e3e3;
}

.pf-btn-match:hover {
    border-color: #696cff;
    color: #696cff;
    background: rgba(105, 108, 255, 0.05);
    transform: translateY(-1px);
}

.pf-btn-refer {
    background: transparent;
    color: #666;
    border: 1px solid #e3e3e3;
}

.pf-btn-refer:hover {
    border-color: #696cff;
    color: #696cff;
    background: rgba(105, 108, 255, 0.05);
    transform: translateY(-1px);
}

/* Responsive - Tablet */
@media (min-width: 768px) and (max-width: 992px) {
    .pf-social-link span {
        display: inline;
    }
    
    .pf-action-btn span {
        display: inline;
    }
    
    .pf-main-content {
        padding: 1rem 0.5rem;
    }
}

/* Responsive - Desktop */
@media (min-width: 993px) {
    .pf-social-link span {
        display: inline;
    }
    
    .pf-action-btn span {
        display: inline;
    }
    
    .pf-profile-photo {
        width: 200px;
        height: 200px;
        border-radius: 32px;
    }
    
    /* Two column layout on desktop - percentage-based with constraints */
    .pf-main-content .container-fluid .row {
        display: flex;
        gap: 2rem;
    }

    .pf-main-content .col-lg-4 {
        flex: 0 0 33%;
        max-width: 400px;
        min-width: 320px;
    }

    .pf-main-content .col-lg-8 {
        flex: 1;
        min-width: 0;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .pf-social-bar {
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .pf-social-links {
        width: 100%;
        justify-content: center;
        gap: 1rem;
    }
    
    .pf-social-link {
        padding: 0.25rem;
    }
    
    .pf-social-link i {
        font-size: 1.25rem;
    }
    
    .pf-quick-actions {
        width: 100%;
        justify-content: center;
    }
    
    .pf-action-btn {
        flex: 1;
    }
    
    .pf-main-content {
        padding: 0.75rem 0.5rem;
    }
    
    .pf-profile-card {
        padding: 1.5rem;
    }
    
    .pf-profile-photo {
        width: 120px;
        height: 120px;
    }
    
    .pf-name {
        font-size: 1.5rem;
    }
    
    .pf-content-card {
        padding: 1.25rem;
    }
    
    .pf-card-header {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }
    
    .pf-card-header i {
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    
    .pf-item-card {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .pf-item-content {
        padding-right: 0;
    }
    
    .pf-item-actions {
        width: 100%;
    }
    
    .pf-item-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Ultra Small Devices */
@media (max-width: 380px) {
    .pf-profile-photo {
        width: 100px;
        height: 100px;
    }
    
    .pf-name {
        font-size: 1.25rem;
    }
    
    .pf-card-title {
        font-size: 1rem;
    }
    
    .pf-item-title {
        font-size: 0.9375rem;
    }
}

/* Profile Image Dropdown Styles */
.profile-dropdown-container {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.profile-dropdown-toggle {
    padding: 0.25rem;
    text-decoration: none;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
}

.profile-dropdown-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0.375rem;
}

.profile-dropdown-toggle::after {
    margin-left: 0.25rem;
}

/* Profile avatar specific styles */
.profile-avatar-img, .profile-avatar-svg {
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-dropdown-toggle:hover .profile-avatar-img,
.profile-dropdown-toggle:hover .profile-avatar-svg {
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Profile dropdown menu items styling */
.profile-dropdown-container .dropdown-item {
    padding: 0.5rem 1rem;
    color: var(--bs-dropdown-link-color, var(--bs-body-color));
    font-weight: 400;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.profile-dropdown-container .dropdown-item i {
    margin-right: 0.5rem;
    font-size: 1rem;
    color: var(--bs-dropdown-link-color, var(--bs-body-color));
    transition: color 0.2s ease;
}

.profile-dropdown-container .dropdown-item:hover,
.profile-dropdown-container .dropdown-item:focus {
    background-color: var(--bs-dropdown-link-hover-bg, rgba(105, 108, 255, 0.08));
    color: var(--bs-dropdown-link-hover-color, #696cff);
    text-decoration: none;
}

.profile-dropdown-container .dropdown-item:hover i,
.profile-dropdown-container .dropdown-item:focus i {
    color: var(--bs-dropdown-link-hover-color, #696cff);
}

/* Ensure avatar dropdown menu itself uses opaque theme background */
.profile-dropdown-container .dropdown-menu {
    background-color: var(--bs-dropdown-bg, #ffffff) !important;
    border-color: var(--bs-border-color);
}

/* Active state for touch devices */
.profile-dropdown-container .dropdown-item:active {
    background-color: rgba(105, 108, 255, 0.12);
    transform: scale(0.98);
}

/* Ensure proper touch targets on mobile */
@media (hover: none) and (pointer: coarse) {
    .profile-dropdown-container .dropdown-item {
        min-height: 44px; /* iOS minimum touch target */
        padding: 0.75rem 1rem;
    }
}

/* Mobile responsiveness */
@media (max-width: 576px) {
    .profile-dropdown-container {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
    
    .profile-avatar-img, .profile-avatar-svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Make My Groups show icon only on mobile */
    .my-groups-select {
        max-width: 60px;
    }
    
    .my-groups-select option:first-child {
        content: "\f0c0"; /* People icon */
    }
}

/* Tiny screens (320px) */
@media (max-width: 375px) {
    .profile-dropdown-container {
        margin-left: 0.125rem;
        margin-right: 0.125rem;
    }
    
    .profile-dropdown-toggle {
        padding: 0.125rem 0.25rem;
    }
}

/* ============================================
   GLOBAL SEARCH SPINNER CONTROL
   Added to fix continuous loading spinner issue
   ============================================ */

/* Control loading spinner visibility - only show when actually loading */
.search-overlay-ts-wrapper:not(.loading) .spinner,
.main-search-ts-wrapper:not(.loading) .spinner,
.ts-wrapper:not(.loading) .spinner {
    display: none !important;
}

/* Only show spinner when actually loading */
.ts-wrapper.loading .spinner {
    display: inline-block !important;
}

/* Hide any Tom Select loading indicators when not actively searching */
.ts-wrapper:not(.loading) .ts-loading,
.ts-wrapper:not(.loading) .ts-spinner {
    display: none !important;
}

/* ============================================
   36. DIRECTORY BROWSER OPTIMIZATION
   Responsive improvements for member directory cards
   ============================================ */

/* Mobile optimization - Full width cards with better spacing */
@media (max-width: 575.98px) {
    .directory-container .card {
        width: 100%;
        margin: 0.5rem 0;
        padding: 1rem; /* Good perimeter margin */
    }
    
    /* Reduce gap between photo and name on mobile */
    .directory-container .member-photo {
        margin-right: 0.75rem;
    }
    
    /* Ensure cards stack properly on mobile */
    .directory-container .row {
        margin: 0;
    }
    
    .directory-container .col,
    .directory-container [class*="col-"] {
        padding: 0;
    }
}

/* Tablet optimization - Better grid layout */
@media (min-width: 576px) and (max-width: 767.98px) {
    .directory-container .card {
        min-width: 280px;
        margin: 0.75rem;
        padding: 1rem;
    }
    
    /* Optimize photo spacing for tablets */
    .directory-container .member-photo {
        margin-right: 1rem;
    }
}

/* Desktop optimization - Wider cards with spacious feel */
@media (min-width: 1024px) {
    .directory-container .card {
        min-width: 350px; /* Wider cards for desktop */
        margin: 1rem;
        padding: 1.25rem; /* Generous perimeter padding */
    }
    
    /* Maintain good spacing between elements */
    .directory-container .member-info {
        padding-left: 0.5rem;
    }
}

/* General optimizations for all screen sizes */
.directory-container .card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.125);
}

.directory-container .card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* Ensure member photos maintain aspect ratio */
.directory-container .member-photo {
    flex-shrink: 0;
    border-radius: 50%;
}

/* Optimize text spacing within cards */
.directory-container .member-name {
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.directory-container .member-title,
.directory-container .member-company {
    margin-bottom: 0.125rem;
    color: #666;
    font-size: 0.9rem;
}

/* ============================================
   AUTOCOMPLETE.JS SEARCH STYLES
   ============================================ */

/* Main search container */
.main-search-autocomplete-container {
    position: relative;
    width: 100%;
    min-width: 280px;
}

/* Simple search wrapper for fallback */
.simple-search-wrapper {
    position: relative;
    width: 100%;
}

.simple-search-wrapper input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    font-size: 14px;
}

.simple-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-top: none;
    border-radius: 0 0 .5rem .5rem;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Autocomplete.js overlay panel (detached mode)
 * Permalinks: @docs-global-search-planning /docs/_to_implement/global-search-ux-refinement-plan.md
 * WHY: Use CSS variables for proper dark mode support */
.aa-Panel {
    border-radius: .5rem !important;
    box-shadow: 0 18px 42px rgba(16, 24, 40, .18) !important;
    border: 1px solid var(--bs-border-color, #dee2e6) !important;
    background: var(--bs-body-bg, #ffffff);
}

/* Detached container (the modal/overlay wrapper) needs theme-aware background */
.aa-DetachedContainer {
    background: var(--bs-body-bg, #ffffff);
    border-radius: .5rem !important;
    margin-top: min(10vh, 72px) !important;
    max-width: min(720px, calc(100vw - 24px)) !important;
}

/* Semi-transparent backdrop for detached mode */
.aa-DetachedOverlay {
    background: rgba(0, 0, 0, 0.5);
}
.aa-InputWrapperPrefix {
    color: var(--bs-secondary-color, #697a8d);
}
.aa-Input {
    background: var(--bs-body-bg, #ffffff);
    color: var(--bs-body-color, #333);
    min-height: 44px;
    font-size: 1rem;
}
.aa-Input::placeholder {
    color: #9aa3af;
}

/* Result item styling to match our theme */
/* CONSOLIDATED: Search result item styles
 * Permalinks: @docs-global-search-planning /docs/_to_implement/global-search-ux-refinement-plan.md
 * WHY: Single definition for search result styling with CSS variables for theme awareness */
.search-result-item {
    display: flex;
    gap: .75rem;
    padding: .6rem .75rem;
    align-items: center;
    min-width: 0;
}
.search-result-item:hover { background: var(--bs-tertiary-bg, #f7f7fb); }

/* Responsive adjustments */
@media (max-width: 576px) {
  .main-search-autocomplete-container { min-width: 0; }
  /* Tighter paddings for mobile panel */
  .search-result-item { padding: .5rem .5rem; }
  .search-result-avatar img { width: 32px; height: 32px; }
}

.no-results {
    padding: 15px;
    text-align: center;
    color: #666;
}

/* Autocomplete.js specific styles */
.aa-Autocomplete {
    position: relative;
    width: 100%;
}

.aa-InputWrapper {
    position: relative;
}

.aa-Input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    font-size: 1rem;
}

/* Permalinks: @docs-global-search-planning /docs/_to_implement/global-search-popup-fix-planning.md
 * Ensure Algolia detached mode (popup/overlay) works correctly
 * Detached mode creates its own positioning context */
.aa-DetachedContainer .aa-Panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}

.aa-List {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

.aa-Item {
    cursor: pointer;
}

.aa-ItemLink {
    display: flex;
    align-items: center;
    padding: 12px;
    text-decoration: none;
    color: var(--bs-body-color);
    border-bottom: 1px solid var(--bs-border-color, #eef0f4);
    border-radius: .375rem;
    transition: background-color 0.2s;
}

/* WHY: Use CSS variables for theme-aware hover/selected states */
.aa-ItemLink:hover,
.aa-Item[aria-selected="true"] .aa-ItemLink {
    background-color: var(--bs-tertiary-bg, #f5f5f5);
}

/* CANONICAL: Search result component styles (single source of truth)
 * Permalinks: @docs-global-search-planning /docs/_to_implement/global-search-ux-refinement-plan.md
 * WHY: Consolidated from multiple duplicate definitions for maintainability */
.search-result-avatar {
    flex-shrink: 0;
    margin-right: 0;
}

.search-result-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--bs-body-color, #2f3441);
    margin-bottom: 4px;
}

.search-result-tagline {
    font-size: 13px;
    color: var(--bs-secondary-color, #697a8d);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-meta {
    font-size: 12px;
    color: var(--bs-secondary-color, #697a8d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-services {
    font-size: 12px;
    color: var(--bs-primary, #5e6ad2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .aa-DetachedContainer {
        max-width: calc(100vw - 16px) !important;
        margin-top: 8px !important;
    }

    .aa-ItemLink {
        padding: 10px;
    }

    .search-result-name,
    .search-result-tagline,
    .search-result-meta,
    .search-result-services {
        max-width: calc(100vw - 112px);
    }
}

/* Remove old Select2 and Tom Select specific styles that might conflict (scoped to nav container only) */
#searchbox_container .select2-container,
#searchbox_container .ts-wrapper,
/* REMOVED: Legacy CSS rule that was force-hiding search overlay
   This was preventing the search from appearing when clicked.
   See: /docs/plans/global-search-nothing-happens-fix-plan-20251015.md
#searchbox_container .search-overlay {
    display: none !important;
}
*/

/* ========================================
   Offers/Requests List - Modern Card Style
   Based on UI Mockup Styles 2 (Request) and 6 (Offer)
   Docs: /docs/ui-tabs-handlebars-routing-and-styling-plan.md
   ======================================== */

/* Main Container */
.or-services-list {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

/* Avatar (48px) utility for offers/requests */
.or-avatar-48 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* Multi-line clamps for descriptions */
.or-desc-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.or-desc-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Name-only styling (when description is not present) */
.or-name-only {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Service Item Card */
.or-service-item {
    display: flex;
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.or-service-item:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Actioned State */
.or-service-item.or-service-actioned {
    opacity: 0.85;
    background: #fafafa;
}

.or-service-item.or-service-actioned:hover {
    transform: none;
}

/* Service Row Layout */
.or-service-row {
    display: flex;
    gap: 2rem;
    width: 100%;
    min-width: 0; /* prevent child overflow */
}

/* Contact Photo Marker */
.or-contact-marker {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.or-photo-link {
    display: block;
    text-decoration: none;
}

.or-photo {
    width: 64px;  /* align with directory style, slightly smaller */
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* match directory photo depth */
    border: 3px solid white;
}

.or-photo-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 3px solid white;
}

.or-photo-placeholder span {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.or-private-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 3px solid white;
}

/* Badge Base Positioning */
.or-badge-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

/* Style 2: Gradient Badge for REQUEST (second card in mockup) */
.or-badge-style-2 {
    padding: 0.35rem 0.85rem;
    border-radius: 0 12px 0 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.or-badge-style-2.or-badge-request {
    background: linear-gradient(135deg, #007bff, #6610f2);
    color: white;
}

/* Style B: Corner Ribbon for OFFER (second-to-last card in mockup) */
.or-badge-corner-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    overflow: hidden;
    z-index: 1;
}

.or-badge-style-b .ribbon-text {
    position: absolute;
    top: 8px;
    right: -14px;
    width: 70px;
    padding: 0.15rem 0;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transform: rotate(45deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.or-badge-style-b.or-badge-offer .ribbon-text {
    background: linear-gradient(90deg, #28a745, #20c997);
    color: white;
}

/* Service Content */
.or-service-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0; /* allow ellipsis/clamping */
}

/* Service Header */
.or-service-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.or-contact-name {
    font-weight: 600;
    color: #212529;
    font-size: 1.125rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.or-service-title {
    color: #495057;
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    max-width: 100%;
    overflow-wrap: anywhere; /* handle long unbroken strings */
    word-break: break-word;
}

/* Service Description */
.or-service-description {
    color: #495057;
    line-height: 1.6;
    font-size: 1rem;
    flex: 1;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Service Footer */
.or-service-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.or-service-date {
    color: #6c757d;
    font-size: 0.875rem;
}

/* Service Actions */
.or-service-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Button Style (from mockup first card) */
.or-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #e9ecef;
}

.or-btn:hover {
    background: #e9ecef;
    color: #495057;
    transform: translateY(-1px);
}

.or-btn i {
    font-size: 0.875rem;
}

/* Actioned State Text */
.or-service-actioned-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #198754;
    font-size: 0.875rem;
}

.or-service-actioned-text i {
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .or-service-item {
        padding: 1.25rem;
    }

    .or-photo,
    .or-photo-placeholder,
    .or-private-photo {
        width: 64px;
        height: 64px;
    }

    .or-service-row {
        gap: 1rem;
    }

    .or-service-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .or-service-actions {
        flex-direction: column;
        width: 100%;
    }

    .or-btn {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .or-services-list {
        padding: 0.5rem;
    }

    .or-service-item {
        flex-direction: column;
        text-align: center;
    }

    .or-service-row {
        flex-direction: column;
        align-items: center;
    }

    .or-contact-marker {
        margin: 0 auto;
    }

    .or-service-header {
        align-items: center;
    }

    .or-service-footer {
        flex-direction: column;
        gap: 1rem;
    }

    .or-badge-corner,
    .or-badge-corner-ribbon {
        position: static;
        display: inline-block;
        margin-bottom: 1rem;
    }
    
    .or-badge-style-b .ribbon-text {
        transform: none;
        position: static;
        width: auto;
    }
}
/* Offers & Requests header + controls compact styling */
.form-h1 { margin-top: 8px; margin-bottom: 12px; }
.form-h1 .page-title-offers { font-weight: 600; letter-spacing: .2px; }

.offers-requests-container { margin-top: 0; }
.offers-requests-container .list-controls { margin-top: 4px; margin-bottom: 8px; }
.offers-requests-container .list-controls.compact { padding-top: 0; }
.offers-requests-container .list-controls .form-select { height: 36px; padding: 4px 28px 4px 8px; font-size: .95rem; }
.offers-requests-container .list-controls .or-type-filter { max-width: 220px; }

/* Reduce extra whitespace above lists under page titles */
.container-p-y > .offers-requests-container { margin-top: 0; }

/* ================================================ */
/* Report Builder: Phase 4 - Aggregate totals row   */
/* ================================================ */
.report-aggregate-row {
    font-weight: 600;
    border-top: 2px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

/* Report Builder: SQL preview code block */
.report-sql-preview {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Report Builder: Disabled aggregate option (non-numeric field) */
.report-aggregate-disabled option[disabled] {
    color: var(--bs-secondary-color);
}

/* ============================================
   ACTION BUILDER (Phase 6)
   ============================================ */

/* Action Builder: History error row styling */
.action-history-error {
    color: var(--bs-danger);
}

.action-history-error td {
    color: var(--bs-danger);
}

/* Action Builder: Expandable error detail row */
.action-history-detail {
    background-color: var(--bs-tertiary-bg);
    border-left: 3px solid var(--bs-danger);
}

.action-history-detail pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    padding: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

/* Action Builder: Pending email section separator */
.action-email-confirm-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Action Builder: Conditional field-value controls visibility */
.fv-date-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================
   CRM ENTITIES & LIFECYCLE (Phase 7)
   ============================================ */

.pipeline-stage-card {
    margin-bottom: 1.5rem;
}

.pipeline-stage-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pipeline-stage-total {
    font-weight: 600;
    color: var(--bs-body-color);
}

.pipeline-deal-overdue {
    color: var(--bs-danger);
}

.checklist-item-complete {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.checklist-item-overdue {
    color: var(--bs-danger);
}

/* Checklist items sub-form column widths */
.checklist-col-sm {
    width: 60px;
}

.checklist-col-md {
    width: 80px;
}

.merge-selected {
    background-color: var(--bs-success-bg-subtle);
}

.merge-null-value {
    color: var(--bs-secondary-color);
    font-style: italic;
}

.dep-warning-count {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-danger);
}

.dep-warning-total {
    font-weight: 600;
    border-top: 2px solid var(--bs-border-color);
}

.dup-match-multi {
    border-left: 3px solid var(--bs-info);
    padding-left: 0.5rem;
}

.stage-transition-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.5rem;
}

.stage-transition-control .form-select {
    width: 200px;
}

/* ============================================
   PERMISSIONS, NAV, IMPORT, DASHBOARD (Phase 8)
   ============================================ */

/* User Management */
.user-management-container .list-group-item-action.active {
    background-color: #696cff;
    border-color: #696cff;
}

/* Context-Sensitive Sidebar (ADMIN-05) */
.sidebar-context[data-sidebar-mode="home"] .sidebar-list-mode,
.sidebar-context[data-sidebar-mode="home"] .sidebar-detail-mode {
    display: none;
}
.sidebar-context[data-sidebar-mode="list"] .sidebar-home-mode,
.sidebar-context[data-sidebar-mode="list"] .sidebar-detail-mode {
    display: none;
}
.sidebar-context[data-sidebar-mode="detail"] .sidebar-home-mode,
.sidebar-context[data-sidebar-mode="detail"] .sidebar-list-mode {
    display: none;
}

/* Global Search Bar (ADMIN-06) */
.search-global-container {
    position: relative;
}
.search-global {
    width: 250px;
}
.search-results {
    position: absolute;
    z-index: 1050;
    width: 350px;
    max-height: 400px;
    overflow-y: auto;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid var(--bs-border-color);
}
.search-result-item {
    cursor: pointer;
    padding: 8px 12px;
}
.search-result-item:hover {
    background-color: var(--bs-light);
}
.search-result-type-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
}

/* Activity Timeline (ADMIN-11) */
.timeline-container {
    position: relative;
    padding-left: 32px;
}
.timeline-container::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--bs-border-color);
}
.timeline-entry {
    position: relative;
    padding: 8px 0 16px 16px;
}
.timeline-entry::before {
    content: '';
    position: absolute;
    left: -23px;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--bs-secondary);
    border: 2px solid var(--bs-body-bg);
}
.timeline-entry .timeline-icon {
    margin-right: 8px;
    color: var(--bs-secondary);
}
.timeline-entry .timeline-timestamp {
    font-size: 0.75rem;
    color: var(--bs-secondary);
    float: right;
}
.timeline-field-change::before { background-color: #696cff; }
.timeline-communication::before { background-color: var(--bs-info); }
.timeline-action::before { background-color: var(--bs-warning); }
.timeline-checklist::before { background-color: var(--bs-success); }

/* Dashboard Widgets (ADMIN-13) */
.dashboard-widget .dashboard-widget-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}
.dashboard-widget .dashboard-widget-label {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

/* Task Panel (ADMIN-14) */
.task-panel .list-group-item {
    border-left: 3px solid transparent;
}
.task-panel .list-group-item .text-danger {
    border-left-color: var(--bs-danger);
}

.api-down-banner {
    border-radius: 6px;
}

.login-service-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.soft-delete-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #f0ad4e;
    border-left: 4px solid #f0ad4e;
    border-radius: 6px;
    background: #fff8e5;
    color: #5c4300;
}

.soft-delete-bar a {
    font-weight: 600;
    white-space: nowrap;
}

/* Public client portal (MAT-679) */
.public-portal-shell {
    min-height: 100vh;
    padding: 32px 16px;
    background: #f7f9fb;
    color: #1b1f24;
}

.public-portal-panel {
    width: min(920px, 100%);
    margin: 0 auto;
    background: #fff;
    border: 1px solid #d9e0e7;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(27, 31, 36, 0.08);
}

.public-portal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e6ebf0;
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.public-portal-header h1,
.public-portal-panel h1,
.public-portal-section h2 {
    margin: 0;
    letter-spacing: 0;
}

.public-portal-header p {
    margin: 4px 0 0;
    color: #59636e;
}

.public-portal-header span {
    white-space: nowrap;
    color: #3d4650;
    font-size: 0.95rem;
}

.public-portal-section ul {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.public-portal-section li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid #e2e8ee;
    border-radius: 8px;
    padding: 10px 12px;
}

.public-checklist-status {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #b9c3cc;
}

.public-checklist-status.is-complete {
    background: #20845a;
}

.public-portal-denied {
    border-color: #e6b8b8;
}

@media (max-width: 640px) {
    .public-portal-header {
        display: grid;
    }

    .public-portal-header span {
        white-space: normal;
    }
}