.chart-actions {
    display: inline-flex;
    gap: 6px;
}

.chart-status {
    display: none;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #6b7280;
}

.chart-status.is-visible {
    display: block;
}
/* Dashboard Minimalist Redesign */
.dashboard-redesign {
    background: #f8f9fa;
    min-height: 100vh;
    padding: 5rem 0;
}

/* Always-visible tooltip icon for document instructions */
.document-tooltip {
    margin-left: 6px;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.document-tooltip:hover {
    color: #111827;
}

/* make the tooltip info icon more visible and accessible */
.document-tooltip i {
    font-size: 0.95rem;
    padding: 4px;
    border-radius: 6px;
    background: rgba(99,102,241,0.06); /* subtle bluish background */
    color: #374151; /* slightly darker */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.document-tooltip:focus i,
.document-tooltip:hover i {
    background: rgba(99,102,241,0.12);
    color: #0f172a;
}

/* Ensure visible even on faint backgrounds */
.document-tooltip { opacity: 1 !important; }

/* Step Wizard Controls */
.form-section {
    margin-bottom: 2rem;
}

.form-section.step-hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

.form-section.step-active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease-in;
}

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

/* ===== Date column visibility fixes (targeted for inquiries table) ===== */
.stats-overview .table thead th.col-date,
.dashboard-redesign .table thead th.col-date {
    width: 9%;
}

.stats-overview .table tbody td.col-date,
.dashboard-redesign .table tbody td.col-date {
    text-align: right;
    min-width: 96px;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .stats-overview .table tbody td.col-date,
    .dashboard-redesign .table tbody td.col-date {
        text-align: left;
        white-space: normal;
        min-width: 0;
    }

    .stats-overview .table thead th.col-date,
    .dashboard-redesign .table thead th.col-date {
        width: auto;
    }
}

.dashboard-redesign .container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Override default link styles - no purple/blue colors */
.dashboard-redesign a {
    color: #1a1a1a;
    text-decoration: none;
}

.dashboard-redesign a:hover {
    color: #1a1a1a;
    text-decoration: none;
}

.dashboard-redesign a:focus {
    outline: none;
}

.dashboard-redesign .privacy-inline-link {
    display: inline-block;
    color: #4b5563;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: 0.95rem;
}

.dashboard-redesign .privacy-inline-link:hover {
    color: #1f2937;
    text-decoration: underline;
}

.status-glossary-teaser {
    margin-bottom: 2rem;
}

.status-glossary-teaser__subtitle {
    margin: 0;
    color: #4b5563;
}

.status-glossary-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.status-glossary-modal.is-open {
    display: flex;
}

.status-glossary-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
}

.status-glossary-modal__panel {
    position: relative;
    width: min(960px, 100%);
    max-height: 88vh;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.status-glossary-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.status-glossary-modal__header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #111827;
}

.status-glossary-modal__close {
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #111827;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.875rem;
}

.status-glossary-modal__body {
    overflow: auto;
    padding: 1rem 1.25rem 1.25rem;
}

.status-glossary-content__subtitle {
    margin-bottom: 0.85rem;
    color: #4b5563;
}

.status-glossary-content h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

body.status-glossary-modal-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .status-glossary-modal {
        align-items: flex-end;
        padding: 0;
    }

    .status-glossary-modal__panel {
        width: 100%;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
}

/* Header Section */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb !important;
    border-left: 1px solid #e5e7eb !important;
}

/* Email template styles — used by email templates (centralized to reduce inline styles) */
.email-wrapper {
    background: #f8f9fa;
    padding: 32px 0;
}
.email-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.email-header {
    background: linear-gradient(135deg, #1E3A8A 0%, #059669 100%);
    color: white;
    padding: 28px 20px;
    text-align: center;
}
.email-header h1 { margin: 0; font-size: 26px; font-weight: 700; }
.email-subtitle { margin: 10px 0 0; font-size: 16px; color: rgba(255,255,255,0.9); }
.email-content { padding: 22px; color: #1a1a1a; line-height: 1.5; }
/* keep consistent font for email templates (fallback safe fonts) */
.email-content { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.email-welcome { background-color: #EFF6FF; border-left: 4px solid #3B82F6; padding: 18px; margin: 18px 0; border-radius: 16px; }
.email-welcome h2 { margin-top: 0; color: #1E40AF; }
.email-eu-id { background-color: #FEF3C7; border: 2px solid #F59E0B; border-radius: 16px; padding: 14px; text-align: center; margin: 16px 0; }
.email-eu-id strong { color: #92400E; font-size: 18px; }
.email-eu-id .label { margin: 0 0 10px 0; font-weight: 700; }
.email-eu-id .note { margin: 10px 0 0 0; font-size: 14px; color: #6B7280; }
.email-verification { background-color: #F0FDF4; border: 2px solid #10B981; border-radius: 16px; padding: 20px; margin: 18px 0; text-align: center; }
.email-verification .fallback { margin-top: 15px; font-size: 14px; color: #6B7280; }
.btn-email { display: inline-block; background-color: #10B981; color: white; padding: 12px 26px; text-decoration: none; border-radius: 6px; font-weight: 700; font-size: 15px; }
.btn-email:hover { background-color: #059669; }
.email-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; margin: 20px 0; }
.email-feature { text-align: center; padding: 12px; background-color: #F9FAFB; border-radius: 16px; }
.email-warning { background-color: #FEF2F2; border-left: 4px solid #EF4444; padding: 12px; border-radius: 4px; }
.email-warning p { margin: 0; }
.email-footer { background-color: #F3F4F6; padding: 18px; text-align: center; font-size: 13px; color: #6B7280; }
.email-footer p.small { font-size: 12px; margin: 0; }

@media (max-width: 600px) {
    .email-header h1 { font-size: 20px; }
    .email-container { margin: 10px; }
    .email-content { padding: 14px; }
    .btn-email { padding: 10px 18px; font-size: 14px; }
}

.email-content a { color: #059669; word-break: break-all; text-decoration: underline; }

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .user-info {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        align-items: center;
    }

    .avatar-container {
        display: flex;
        justify-content: center;
    }

    .user-avatar {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .tier-indicator {
        width: 28px;
        height: 28px;
        bottom: -3px;
        right: -3px;
        font-size: 0.8rem;
    }

    .user-details {
        width: 100%;
        text-align: center;
    }

    .user-details h1 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .user-location {
        justify-content: center;
        font-size: 0.9rem;
    }

    .tier-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .header-actions {
        width: 100%;
    }

    .btn-edit-profile {
        width: 100%;
        justify-content: center;
        padding: 0.8rem 1.5rem;
        font-size: 0.85rem;
    }
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.avatar-container {
    position: relative;
}

.user-avatar {
    width: 80px;
    height: 80px;
    /* square with subtle rounded corners to match buttons */
    border-radius: 8px !important;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-size: 2.5rem;
    overflow: hidden;
}

.user-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* keep same slight rounding as container */
    border-radius: 8px !important;
    display: block;
}

.tier-indicator {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border: 3px solid white;
    background: #1a1a1a;
    color: white;
}

/* Defensive: in the dashboard we don't show star glyphs INSIDE tier-indicator */
.dashboard-redesign .tier-indicator i,
.dashboard-redesign .tier-indicator svg {
    display: none !important;
}

.user-details h1,
.user-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: #1a1a1a;
}

/* avatar initials & small text helpers */
.avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #ffffff;
    font-weight: 600;
}

.user-company {
    margin: 0 0 0.5rem 0;
    color: #6b7280;
    font-size: 0.85rem;
}

.lang-badge {
    padding: 0.25rem 0.75rem;
    background: #f3f4f6;
    border-radius: 12px;
    font-size: 0.85rem;
    color: #495057;
}

.user-location {
    margin: 0 0 1rem 0;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

/* Profile & progress typography helpers */
.user-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 400; /* dashboard uses 400 for titles */
    color: #1a1a1a;
    letter-spacing: -0.2px;
}

.progress-stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.current-points {
    font-size: 1.25rem;
    font-weight: 400; /* keep consistent with dashboard metrics */
    color: #1a1a1a;
}

.separator {
    color: #6b7280;
    font-size: 0.9rem;
}

.target-points {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 400;
}

.progress-percent {
    font-size: 1rem;
    font-weight: 400;
    color: #1a1a1a;
}

.tier-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-weight: 400;
    font-size: 0.85rem;
    background: #f3f4f6;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
}

.btn-edit-profile {
    background: white;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    padding: 0.7rem 1.5rem;
    border-radius: 28px;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    width: auto;
    min-width: 0;
    transition: all 0.2s ease;
}

.btn-edit-profile:hover {
    background: #f8f9fa;
    border-color: #d1d5db;
    text-decoration: none;
}

/* Progress Card */
.progress-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb !important;
    border-left: 1px solid #e5e7eb !important;
}

@media (max-width: 768px) {
    .progress-card,
    .stats-overview,
    .workflow-status,
    .verification-alert {
        padding: 1.5rem;
    }

    .progress-info h3,
    .stats-header h2,
    .workflow-status h3 {
        font-size: 1.3rem;
        text-align: center;
    }

    .progress-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }

    .current-points {
        font-size: 2rem;
    }

    .separator {
        font-size: 1.2rem;
    }

    .target-points {
        font-size: 1.2rem;
    }

    .points-label {
        font-size: 0.9rem;
    }

    .progress-visual {
        flex-direction: column;
        gap: 0.75rem;
    }

    .progress-percentage {
        text-align: center;
        font-size: 1.1rem;
    }

    /* Progress wizard mobile layout improvements - evenly distribute steps in a 4x2 grid */
    .progress-wizard {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* 4 columns that share space evenly */
        grid-auto-rows: 44px;
        gap: 0.5rem !important;
        justify-items: center; /* center step inside each column */
        align-items: center;
        padding: 0.6rem 0.75rem !important;
    }

    /* Keep tap targets accesible but centered within the grid cell */
    .progress-wizard .wizard-step {
        width: 40px !important;
        height: 40px !important;
        justify-self: center !important;
        margin: 0 !important;
    }

    .progress-wizard .wizard-step .wizard-number {
        font-size: 13px !important;
    }

    /* Badge group spacing — allow wrapping and spacing on small screens */
    .form-header .mt-3,
    .dashboard-header .header-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        justify-content: center;
    }

    .form-header .mt-3 .badge {
        margin: 0 !important;
        padding: 0.35rem 0.6rem !important;
        white-space: nowrap; /* keep individual badges compact */
    }
}

.progress-info h3 {
    margin: 0 0 1rem 0;
    color: #1a1a1a;
    font-weight: 400;
    font-size: 1.25rem;
}

.progress-stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.current-points {
    font-size: 2rem;
    font-weight: 400;
    color: #1a1a1a;
}

.separator {
    font-size: 1.5rem;
    color: #6b7280;
}

.target-points {
    font-size: 1.5rem;
    color: #6b7280;
}

.points-label {
    color: #6b7280;
    font-size: 1rem;
}

.progress-visual {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-track {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #1a1a1a;
    border-radius: 4px;
    transition: width 0.8s ease;
}

.progress-percentage {
    font-weight: 400;
    color: #1a1a1a;
    min-width: 50px;
    text-align: right;
}

/* Verification Alert */
.verification-alert {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb !important;
    border-left: 1px solid #e5e7eb !important;
}

.verification-alert:hover {
    background: #fafbfc;
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 768px) {
    .verification-alert {
        border-left: none;
        border-top: 1px solid #e5e7eb;
    }

    .alert-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .alert-icon {
        font-size: 2rem;
    }

    .alert-text h4 {
        font-size: 1.1rem;
    }

    .alert-text p {
        font-size: 0.9rem;
    }

    .alert-text small {
        font-size: 0.8rem;
    }

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

.alert-icon {
    color: #6b7280;
    font-size: 1.5rem;
}

.alert-text h4 {
    margin: 0 0 0.5rem 0;
    color: #1a1a1a;
    font-weight: 400;
}

.alert-text p {
    margin: 0 0 1rem 0;
    color: #6b7280;
}

.verification-progress {
    height: 6px;
    background: #f3f4f6;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.verification-progress .progress-bar {
    height: 100%;
    background: #1a1a1a;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.btn-verify {
    background: white;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-verify:hover {
    background: #f8f9fa;
    border-color: #d1d5db;
    text-decoration: none;
}

/* VIP Card */
.vip-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    color: #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e5e7eb !important;
    border-left: 1px solid #e5e7eb !important;
}

.vip-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vip-header h3 {
    margin: 0;
    font-weight: 700;
}

.vip-content p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.vip-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.benefit:before {
    content: "•";
    color: #1a1a1a;
}

.vip-pricing {
    text-align: center;
}

.price {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

.price span {
    font-size: 1rem;
    color: #6b7280;
}

.btn-vip {
    background: #1976d2;
    color: white;
    border: 1px solid #1a1a1a;
    padding: 0.6rem 1.5rem;
    border-radius: 4px;
    font-weight: 400;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-vip:hover {
    background: #2a2a2a;
    border-color: #2a2a2a;
}

/* Main Actions */
.main-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.action-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    color: #1a1a1a;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border: 1px solid #e5e7eb;
    min-width: 0;
}

.action-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.action-card:hover {
    text-decoration: none;
    color: #1a1a1a;
    border-color: #d1d5db;
}

.action-card.primary {
    background: #f8f9fa;
    color: #1a1a1a;
}

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: #f3f4f6;
    color: #1a1a1a;
    flex-shrink: 0;
}

.action-card.primary .action-icon {
    background: white;
    color: #1a1a1a;
}

.action-content h4 {
    margin: 0 0 0.5rem 0;
    font-weight: 400;
    font-size: 1rem;
    color: #1a1a1a;
}

.action-content p {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

/* Locked Card Professional UX Treatment */
.action-card.action-card-locked {
    position: relative;
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border: 1px solid #e5e7eb;
    opacity: 0.95;
    overflow: hidden;
}

.action-card.action-card-locked::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.01) 10px,
        rgba(0, 0, 0, 0.01) 20px
    );
    pointer-events: none;
}

.action-card.action-card-locked .locked-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

.action-card.action-card-locked .lock-icon-badge {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.action-card.action-card-locked .action-icon.locked-icon {
    background: #e5e7eb;
    color: #9ca3af;
    opacity: 0.6;
}

.action-card.action-card-locked .action-content {
    height: 100%;
    position: relative;
    z-index: 1;
}

.action-card.action-card-locked .action-content h4 {
    color: #4b5563;
    font-weight: 500;
}

.action-card.action-card-locked .locked-description {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.5;
}

.action-card.action-card-locked .lock-benefits {
    margin: 0.75rem 0 0 0;
    padding-left: 1.25rem;
    list-style: none;
    position: relative;
}

.action-card.action-card-locked .lock-benefits li {
    color: #6b7280;
    font-size: 0.8rem;
    line-height: 1.6;
    padding-left: 0.5rem;
    margin-bottom: 0.35rem;
    position: relative;
}

.action-card.action-card-locked .lock-benefits li::before {
    content: '•';
    position: absolute;
    left: -1rem;
    color: #9ca3af;
    font-size: 0.9rem;
}

.action-card.action-card-locked .lock-upgrade-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding: 0.5rem 0;
    color: #f59e0b;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.action-card.action-card-locked .lock-upgrade-link i.bi-star-fill {
    font-size: 0.75rem;
}

.action-card.action-card-locked .lock-upgrade-link i.bi-arrow-right {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.action-card.action-card-locked .lock-upgrade-link:hover {
    color: #d97706;
    border-bottom-color: #f59e0b;
    gap: 0.5rem;
}

.action-card.action-card-locked .lock-upgrade-link:hover i.bi-arrow-right {
    transform: translateX(3px);
}

.action-card.action-card-locked:hover {
    border-color: #d1d5db;
    opacity: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Statistics Overview */
.stats-overview {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb !important;
    border-left: 1px solid #e5e7eb !important;
}

.stats-overview:hover {
    background: #fafbfc;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.inquiry-count-badge {
    background: #f3f4f6;
    color: #1a1a1a;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
    .stats-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 1rem;
    }

    .stats-period {
        justify-content: center;
        flex-wrap: wrap;
    }

    .stats-period span {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .btn-view-all {
        width: auto;
        padding: 0.6rem 1.2rem;
        font-size: 0.7rem;
    }

    .inquiry-count-badge {
        font-size: 0.8rem;
        padding: 0.2rem 0.6rem;
    }
}

.stats-header h2 {
    margin: 0;
    color: #1a1a1a;
    font-weight: 400;
    font-size: 1.25rem;
}

.stats-period {
    display: flex;
    gap: 1rem;
}

.stats-period span {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.9rem;
}

.stats-period span.active {
    background: #f3f4f6;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
}

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

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.stat-trend {
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* Workflow Status */
.workflow-status {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e5e7eb !important;
    border-left: 1px solid #e5e7eb !important;
}

.workflow-status h3 {
    margin: 0 0 2rem 0;
    color: #1a1a1a;
    font-weight: 400;
    font-size: 1.25rem;
}

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

.workflow-item {
    text-align: center;
    padding: 1.5rem;
    border-radius: 4px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
}

.workflow-count {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.workflow-label {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .vip-card {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
        padding: 1.5rem;
    }

    .vip-header {
        justify-content: center;
    }

    .vip-header h3 {
        font-size: 1.3rem;
    }

    .vip-content p {
        font-size: 0.95rem;
    }

    .vip-benefits {
        text-align: left;
        max-width: 300px;
        margin: 0 auto;
    }

    .vip-pricing {
        width: 100%;
    }

    .price {
        font-size: 2rem;
    }

    .btn-vip {
        width: 100%;
        justify-content: center;
        padding: 0.85rem 2rem;
    }
    
    .main-actions {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .action-card {
        flex-direction: row;
        text-align: left;
        padding: 1.25rem;
    }

    .action-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .action-content h4 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .action-content p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stat-item {
        padding: 0.75rem 0.5rem;
    }

    .stat-value {
        font-size: 1.8rem;
    }

    .stat-label {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .stat-trend {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    .workflow-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .workflow-item {
        padding: 1rem;
    }

    .workflow-count {
        font-size: 1.5rem;
    }

    .workflow-label {
        font-size: 0.75rem;
    }
}

/* Dashboard Components Consistency */
.btn-view-all {
    background: white;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    font-weight: 400;
}

.btn-view-all:hover {
    background: #f8f9fa;
    border-color: #d1d5db;
    text-decoration: none;
}

.inquiry-count-badge {
    background: #f3f4f6;
    color: #1a1a1a;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    font-weight: 400;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
}

.dashboard-table {
    margin-bottom: 0;
}

.dashboard-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-responsive {
    overflow-x: auto;
}

/* Card layout за таблиците (всички устройства) */
.mobile-card-layout {
    display: block;
}

/* Default: on mobile we use card layout, but on larger screens show the native table
   (previous global rule was hiding tables at all sizes and made admin lists invisible) */
.table-responsive {
    /* keep overflow horizontal handling for small screens */
    overflow-x: auto;
    display: block; /* visible by default so components relying on tables render */
}

@media (max-width: 768px) {
    /* On small screens, prefer the mobile card layout — hide large table there */
    .table-responsive {
        display: none !important;
    }
}

.mobile-payment-card,
.mobile-inquiry-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.mobile-payment-card:hover,
.mobile-inquiry-card:hover {
    background: #fafbfc;
    border-color: #d1d5db;
}

@media (min-width: 769px) {
    .mobile-card-layout {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Adaptive subcategories grid: allow multiple cards per row without relying on Bootstrap columns.
       Uses minmax so cards adapt responsively and produce a grid similar to other dashboard pages. */
    .mobile-card-layout.subcategories-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.25rem;
        align-items: start;
    }

    /* Desktop: if a .mobile-card-layout only contains a single card, make it span the full width.
       This is important for forms that use one card per section (basic info, content, SEO) so they
       take the entire container instead of leaving an empty column on the right. */
    .mobile-card-layout > .mobile-payment-card:only-child,
    .mobile-card-layout > .mobile-inquiry-card:only-child {
        grid-column: 1 / -1;
    }

    /* Inquiries section takes full width */
    .inquiries-card-layout {
        grid-template-columns: 1fr !important;
    }

    /* Larger inquiry cards for better readability */
    .inquiries-section .mobile-inquiry-card {
        padding: 2rem;
    }

    .inquiries-section .mobile-card-title {
        font-size: 1.15rem;
    }

    .mobile-empty-state {
        grid-column: 1 / -1;
    }
}

.mobile-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.mobile-card-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0;
}

.mobile-card-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #f7f7f8;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Professional status palettes */
.mobile-card-badge.status-approved {
    background: #e9f8ef;
    color: #1e6f3a;
    border-color: rgba(30,111,58,0.12);
}

.mobile-card-badge.status-pending_review,
.mobile-card-badge.status-submitted,
.mobile-card-badge.status-in_progress {
    background: #fff8e6;
    color: #9a5a09;
    border-color: rgba(250,176,60,0.12);
}

.mobile-card-badge.status-in_review,
.mobile-card-badge.status-processing {
    background: #eaf4ff;
    color: #185fc4;
    border-color: rgba(24,95,196,0.12);
}

.mobile-card-badge.status-rejected {
    background: #fff1f2;
    color: #9b1c1c;
    border-color: rgba(155,28,28,0.12);
}

.mobile-card-badge.status-published {
    background: #e9faf9;
    color: #0f766e;
    border-color: rgba(15,118,110,0.12);
}

.mobile-card-badge.status-archived {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}

/* Backwards-compatible aliases */
.mobile-card-badge.success {
    background: #e9f8ef;
    color: #1e6f3a;
    border-color: rgba(30,111,58,0.12);
}

.mobile-card-badge.pending {
    background: #fff8e6;
    color: #9a5a09;
    border-color: rgba(250,176,60,0.12);
}

.mobile-card-badge.processing {
    background: #eaf4ff;
    color: #185fc4;
    border-color: rgba(24,95,196,0.12);
}

.mobile-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

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

.mobile-card-label {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mobile-card-value {
    font-size: 0.95rem;
    color: #1a1a1a;
    font-weight: 400;
    text-align: right;
}

.mobile-card-value.amount {
    font-size: 1.05rem;
    color: #1a1a1a;
    font-weight: 500;
}

.mobile-card-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-card-date {
    font-size: 0.85rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mobile-card-action {
    font-size: 0.85rem;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-weight: 400;
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mobile-card-action::before,
.mobile-card-action::after {
    content: none !important;
    display: none !important;
}

.mobile-card-action:hover {
    border-color: #d1d5db;
    background: #f8f9fa;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

.mobile-inquiry-card {
    cursor: pointer;
}

.mobile-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #6b7280;
}

.mobile-empty-state i {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.mobile-empty-state p {
    font-size: 0.95rem;
    margin: 0;
}

/* Property info row styling */
.mobile-property-info {
    background: #f8fafc;
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: 0.5rem;
}

.mobile-property-info .mobile-card-label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.mobile-property-info .mobile-card-value {
    font-size: 0.9rem;
    text-align: left;
    color: #1a1a1a;
}

@media (max-width: 768px) {
    /* Mobile: single column layout */
    .mobile-card-layout {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    .mobile-payment-card,
    .mobile-inquiry-card {
        padding: 1.25rem;
    }

    .mobile-card-title {
        font-size: 0.95rem;
    }

    .mobile-inquiry-card .mobile-card-title {
        font-size: 0.95rem;
        line-height: 1.4;
        max-width: 70%;
    }

    .mobile-property-info .mobile-card-label {
        font-size: 0.7rem;
    }

    .mobile-property-info .mobile-card-value {
        font-size: 0.85rem;
        color: #475569;
    }

    .mobile-card-date {
        font-size: 0.8rem;
    }

    .mobile-card-action {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}

.dashboard-table tbody tr:hover {
    background-color: #f8f9fa;
}

.dashboard-table thead th {
    background: #f8f9fa;
    color: #1a1a1a;
    font-weight: 400;
    font-size: 0.85rem;
    border: none;
    padding: 1rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-table tbody td {
    border-color: #f3f4f6;
    padding: 0.875rem 0.75rem;
    vertical-align: middle;
    color: #1a1a1a;
}

/* Chart container styling */
.stats-overview .card {
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 16px;
}

/* Form control styling for HPI select */
.stats-overview .form-select {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: white;
    color: #1a1a1a;
    font-weight: 400;
    font-size: 0.9rem;
}

.stats-overview .form-select:focus {
    border-color: #1a1a1a;
    outline: none;
}

/* Payments Page Specific Styles */
.stats-overview .form-control {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: white;
    font-size: 0.9rem;
    color: #1a1a1a;
}

.stats-overview .form-control:focus {
    border-color: #1a1a1a;
    outline: none;
}

.stats-overview .form-label {
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.stats-overview .btn-view-all {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 0.85rem;
    min-width: auto;
}

/* Payment Status Badges */
.badge {
    background: #f3f4f6 !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e7eb !important;
    font-weight: 400 !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 4px !important;
}

/* VIP Section Styling */
.stats-overview .form-check-input:checked {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
}

.stats-overview .form-check-label {
    color: #1a1a1a;
    font-weight: 400;
}

.stats-overview .fw-semibold {
    color: #1a1a1a;
    font-weight: 400;
}

@media (max-width: 480px) {
    .dashboard-redesign {
        padding: 1.5rem 0;
    }

    .dashboard-redesign .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .dashboard-header,
    .progress-card,
    .stats-overview,
    .workflow-status,
    .vip-card,
    .verification-alert {
        padding: 1.25rem;
        margin-bottom: 1rem;
        border-radius: 16px;
    }

    .user-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    .user-details h1 {
        font-size: 1.25rem;
    }

    .tier-badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
    }

    .progress-info h3 {
        font-size: 1.1rem;
    }

    .current-points {
        font-size: 1.75rem;
    }

    .target-points {
        font-size: 1rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .stat-item {
        padding: 1rem;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .stat-value {
        font-size: 2rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }
    
    .workflow-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .workflow-item {
        padding: 1rem;
    }

    .workflow-count {
        font-size: 1.75rem;
    }

    .workflow-label {
        font-size: 0.8rem;
    }

    .action-card {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }

    .action-icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
        margin: 0 auto;
    }

    .action-content h4 {
        font-size: 1.05rem;
    }

    .action-content p {
        font-size: 0.9rem;
    }

    .vip-card {
        padding: 1.25rem;
    }

    .vip-header h3 {
        font-size: 1.15rem;
    }

    .price {
        font-size: 1.75rem;
    }

    .price span {
        font-size: 0.85rem;
    }

    .btn-vip,
    .btn-verify,
    .btn-edit-profile {
        padding: 0.75rem 1.5rem;
        font-size: 0.8rem;
    }
    
    .stats-overview .row .col-md-3,
    .stats-overview .row .col-md-2,
    .stats-overview .row .col-md-1 {
        margin-bottom: 1rem;
    }

    .stats-header h2 {
        font-size: 1.25rem;
    }

    /* Mobile cards optimization за малки екрани */
    .mobile-payment-card,
    .mobile-inquiry-card {
        padding: 1rem;
        border-radius: 16px;
        margin-bottom: 0.75rem;
    }

    /* For the property-data-horizontal layout we don't want inner framed cards on mobile */
    .property-data-horizontal .mobile-payment-card {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0.75rem 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .mobile-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .mobile-card-title {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .mobile-card-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }

    .mobile-card-body {
        gap: 0.6rem;
    }

    .mobile-card-row {
        flex-direction: row;
        gap: 0.5rem;
    }

    .mobile-card-label {
        font-size: 0.75rem;
    }

    .mobile-card-value {
        font-size: 0.9rem;
    }

    .mobile-card-value.amount {
        font-size: 1rem;
    }

    .mobile-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .mobile-card-action {
        width: 100%;
        text-align: center;
        padding: 0.5rem 1rem;
    }

    /* Chart optimization */
    .stats-overview .card {
        padding: 0.75rem;
    }

    #eu-hpi-chart {
        height: 180px !important;
    }

    .stats-overview .form-select {
        font-size: 0.85rem;
        padding: 0.5rem;
    }

    /* Payments and inquiries optimization */
    .form-check-label {
        font-size: 0.9rem;
    }

    .text-muted.small {
        font-size: 0.75rem !important;
    }
}

/* ==================== PROPERTY DATA HORIZONTAL LAYOUT ==================== */

/* Progress Card Style */
.progress-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    border: 1px solid #e5e7eb;
}

.progress-info h3 {
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 1rem 0;
}

.progress-visual {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-track {
    flex: 1;
    height: 8px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#658ad3, #1e68b1);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-percentage {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    min-width: 50px;
    text-align: right;
}

.points-label {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0.5rem 0 0 0;
}

/* Property Data Horizontal Layout */
.property-data-horizontal {
    background: white;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.property-data-horizontal .mobile-payment-card {
    /* Be very explicit here — some other CSS can override the look, so use strong rules */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 1rem 0 !important;
    margin: 0 !important;
    border-radius: 0 !important; /* remove rounded inner cards */
    min-width: 0; /* avoid overflow from long content */
}

.property-data-horizontal .mobile-payment-card:last-child {
    border-bottom: none;
}

.property-data-horizontal .mobile-card-header {
    margin-bottom: 0.75rem;
}

.property-data-horizontal .mobile-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.property-data-horizontal .mobile-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: transparent !important;
    padding: 0 !important; /* keep spacing controlled by parent */
    box-shadow: none !important;
}

.property-data-horizontal .mobile-card-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.property-data-horizontal .mobile-card-label {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 400;
}

.property-data-horizontal .mobile-card-value {
    font-size: 0.95rem;
    color: #1a1a1a;
    font-weight: 400;

    /* Wrap long text so it doesn't push the layout horizontally */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.property-data-horizontal .mobile-card-value.amount {
    font-weight: 500;
    font-size: 1.1rem;
}

/* Specific wrapper for Property Data section - remove outer frame so we only show the single
   property-data-horizontal card, avoiding nested frames */
.stats-overview.property-data-wrapper {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.stats-overview.property-data-wrapper .stats-header {
    padding: 1.25rem 1.5rem 0.75rem 1.5rem;
}

.stats-overview.property-data-wrapper .property-data-horizontal {
    margin: 0; /* use the inner card as sole framed container */
}

/* remove any residual inner panel styling that may still apply from legacy rules */
.property-data-horizontal .mobile-card-value,
.property-data-horizontal .mobile-card-row,
.property-data-horizontal .mobile-card-header,
.property-data-horizontal .mobile-card-body {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Tighten spacing for a clean flat layout */
.property-data-horizontal .mobile-card-header {
    padding: 0 0 0.5rem 0 !important;
}

@media (max-width: 480px) {
    /* ensure narrow devices show single-column and wrap text correctly */
    .property-data-horizontal .mobile-card-row {
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
    }

    .property-data-horizontal .mobile-card-label {
        font-size: 0.8rem !important;
    }

    .property-data-horizontal .mobile-card-value {
        font-size: 0.9rem !important;
    }

    .property-data-horizontal .mobile-card-value.amount {
        font-size: 1rem !important;
    }
}

/* Description container within horizontal layout */
.property-data-horizontal .description-container {
    width: 100%;
}

.property-data-horizontal .description-preview {
    max-height: none;
    overflow: visible;
}

.property-data-horizontal .description-preview.collapsed {
    max-height: 60px;
    overflow: hidden;
    position: relative;
}

/* Prevent nested scrollbars / overflow on mobile */
.property-data-horizontal {
    overflow-x: hidden !important;
    box-sizing: border-box;
    width: 100%;
}

.property-data-horizontal .mobile-card-row > * {
    min-width: 0; /* ensure grid items can shrink on narrow screens */
}

.property-data-horizontal .description-preview.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, white);
}

.property-data-horizontal .btn-expand {
    margin-top: 0.5rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .property-data-horizontal {
        padding: 1rem;
    }
    
    .property-data-horizontal .mobile-card-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .property-data-horizontal .mobile-card-label {
        font-size: 0.8rem;
    }
    
    .property-data-horizontal .mobile-card-value {
        font-size: 0.9rem;
    }
}

/* ==================== FORM STYLES (for Edit Pages) ==================== */

/* Form Grid - Enhanced Layout */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-card {
        padding: 1.5rem;
    }
}

.form-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s ease;
}

.form-card:hover {
    border-color: #d1d5db;
}

.form-card.full-width {
    grid-column: 1 / -1;
}

.form-card h3 {
    margin: 0 0 2rem 0;
    color: #1a1a1a;
    font-weight: 400;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.form-card h3 i {
    color: #1a1a1a;
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

.form-card hr {
    border: none;
    height: 1px;
    background: #e5e7eb;
    margin: 2rem 0;
}

/* Form Elements - Enhanced Styling */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

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

.form-group label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 500; /* slightly lighter to match dashboard polish */
    color: #333;
    font-size: 0.95rem;
}

/* helper for labels/values used on profile view cards */
.detail-value {
    font-weight: 500;
    color: #1a1a1a;
}

.detail-label {
    color: #6b7280;
    font-size: 0.9rem;
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.form-group select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    appearance: none;
}

.form-group select[multiple] {
    background-image: none;
    padding-right: 1rem;
    min-height: 120px;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #d1d5db;
    box-shadow: 0 0 0 2px rgba(229, 231, 235, 0.5);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* Keep checkbox/radio controls compact and labels inline in form-check groups */
.form-group .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.form-group input.form-check-input[type="checkbox"],
.form-group input.form-check-input[type="radio"] {
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0;
    margin-top: 0.2rem;
    border: 1px solid #d1d5db;
    box-shadow: none;
    flex: 0 0 auto;
}

.form-group input.form-check-input[type="checkbox"] {
    border-radius: 0.25rem;
}

.form-group input.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-group .form-check-label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
}

.help-text {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.5rem;
    font-style: italic;
    opacity: 0.8;
}

/* Avatar upload preview */
.avatar-upload-row {
    align-items: center;
}
.avatar-upload .avatar-preview-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.avatar-upload .avatar-preview {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
}
.avatar-upload .avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.avatar-upload .avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 2.25rem;
}
.avatar-upload .avatar-actions {
    display: flex;
    gap: .5rem;
}

/* Enhanced Chip-style checkbox groups */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    justify-content: flex-start;
}

.chip-option {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.chip-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip-label {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    background: white;
    color: #495057;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chip-option input[type="checkbox"]:checked + .chip-label {
    background: white;
    border-color: #1a1a1a;
    color: #1a1a1a;
}

.chip-label:hover {
    border-color: #d1d5db;
    background: #f8f9fa;
}

/* Enhanced Form Actions */
.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 2rem;
}

.btn-save {
    background: white;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 400;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.btn-save:hover {
    background: #f8f9fa;
    border-color: #d1d5db;
}

.btn-cancel {
    background: white;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 400;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cancel:hover {
    background: #f8f9fa;
    border-color: #d1d5db;
    color: #1a1a1a;
    text-decoration: none;
}

/* Avatar Actions Styling */
.avatar-actions .btn {
    padding: 0.75rem 1.25rem;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.85rem;
    border: 2px solid;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 40px;
    width: 150px;
    white-space: nowrap;
    box-sizing: border-box;
}

.avatar-actions .btn-outline-primary {
    background: white;
    border-color: #e5e7eb;
    color: #1a1a1a;
}

.avatar-actions .btn-outline-primary:hover {
    background: #f8f9fa;
    border-color: #d1d5db;
    color: #1a1a1a;
}

.avatar-actions .btn-outline-danger {
    background: white;
    border-color: #e5e7eb;
    color: #1a1a1a;
}

.avatar-actions .btn-outline-danger:hover {
    background: #f8f9fa;
    color: #1a1a1a;
    border-color: #d1d5db;
}

/* Verification status badges */
.status-badges {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.verification-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    background: #f8f9fa;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
}

.btn-verify {
    background: white;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.btn-verify:hover {
    background: #f8f9fa;
    border-color: #d1d5db;
    color: #1a1a1a;
    text-decoration: none;
}

/* Defensive: hide arrow / chevron icons inside buttons for a clean look */
.dashboard-redesign .btn i[class*="bi-arrow"],
.dashboard-redesign .btn i[class*="bi-chevron"],
.dashboard-redesign a[class*="btn-"] i[class*="bi-arrow"],
.dashboard-redesign a[class*="btn-"] i[class*="bi-chevron"],
.dashboard-redesign button[class*="btn-"] i[class*="bi-arrow"],
.dashboard-redesign button[class*="btn-"] i[class*="bi-chevron"] {
    display: none !important;
}

/* Button typographic polish - consistent letter spacing */
.dashboard-redesign .btn,
.dashboard-redesign button[class*="btn-"],
.dashboard-redesign a[class*="btn-"],
.dashboard-redesign .btn-action,
.dashboard-redesign .btn-save,
.dashboard-redesign .btn-cancel {
    letter-spacing: 0.25px;
}

/* keep the special uppercase appearance for edit-profile CTA */
.btn-edit-profile {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    /* unify mobile side padding across all major cards/sections */
    .dashboard-redesign {
        padding: 2rem 0;
        --mobile-side-padding: 1rem; /* used for consistent left/right padding */
    }

    /* container edges and the internal card paddings should align */
    .dashboard-redesign .container {
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
    }

    /* ensure all primary sections receive consistent horizontal padding */
    .dashboard-header,
    .progress-card,
    .form-card,
    .stats-overview,
    .profile-image-section,
    .form-actions {
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
    }

    .form-grid {
        gap: 1.5rem;
    }

    .form-card {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .form-card h3 {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

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

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

    .form-group input:not([type="checkbox"]):not([type="radio"]),
    .form-group select,
    .form-group textarea {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    .chip-list {
        gap: 0.5rem;
    }

    .chip-label {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .avatar-upload .avatar-preview-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .avatar-upload .avatar-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .avatar-actions .btn {
        width: 100%;
        max-width: 100%;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .btn-save,
    .btn-cancel {
        width: 100%;
        max-width: none;
        justify-content: center;
        padding: 0.875rem 2rem;
    }
    
    .btn-save {
        order: 1;
    }
    
    .btn-cancel {
        order: 2;
    }
    
    .status-badges {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }

    .btn-verify {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    /* smaller mobile spacing */
    .dashboard-redesign {
        padding: 1.5rem 0;
        --mobile-side-padding: 0.75rem;
    }

    .dashboard-redesign .container {
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
    }

    .dashboard-header,
    .form-card,
    .progress-card,
    .stats-overview,
    .profile-image-section,
    .form-actions {
        padding-left: var(--mobile-side-padding);
        padding-right: var(--mobile-side-padding);
    }

    .dashboard-header,
    .form-card,
    .form-actions {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .user-name {
        font-size: 1.3rem;
    }

    .user-location {
        font-size: 0.85rem;
    }

    .form-card h3 {
        font-size: 1rem;
    }

    .form-group label {
        font-size: 0.9rem;
    }

    .form-group input:not([type="checkbox"]):not([type="radio"]),
    .form-group select,
    .form-group textarea {
        padding: 0.7rem 0.875rem;
        font-size: 0.9rem;
    }

    .chip-label {
        padding: 0.4rem 0.875rem;
        font-size: 0.8rem;
    }

    .verification-status,
    .btn-verify {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

/* Empty State - Minimalist Design */
.mobile-empty-state {
    padding: 2rem 1.5rem;
    text-align: center;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mobile-empty-state i {
    font-size: 2rem;
    color: #d1d5db;
    margin-bottom: 0.75rem;
    display: block;
}

.mobile-empty-state h4 {
    font-weight: 400;
    margin: 0 0 0.75rem 0;
    color: #6b7280;
    font-size: 0.9375rem;
}

.mobile-empty-state p {
    color: #6b7280;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 400;
}

.mobile-empty-state .btn-edit-profile {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

@media (max-width: 768px) {
    .mobile-empty-state {
        padding: 1.5rem 1rem;
    }
    
    .mobile-empty-state i {
        font-size: 1.75rem;
        margin-bottom: 0.5rem;
    }
    
    .mobile-empty-state h4,
    .mobile-empty-state p {
        font-size: 0.875rem;
    }
    
    .mobile-empty-state .btn-edit-profile {
        font-size: 0.8125rem;
        padding: 0.45rem 0.875rem;
    }
}

/* ==================== Business Card Preview Styles ==================== */

.preview-card {
    width: 350px;
    height: 200px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    overflow: hidden;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.preview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

/* Template Backgrounds - Dashboard Color Palette */
.preview-card.template-professional {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white;
}

.preview-card.template-modern {
    background: linear-gradient(135deg, var(--primary-color, #ec4899) 0%, var(--secondary-color, #8b5cf6) 100%);
    color: white;
}

.preview-card.template-elegant {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: white;
}

.preview-card.template-minimal {
    background: white;
    color: #1a1a1a;
    border: 2px solid #e5e7eb;
}

.preview-card.template-classic {
    background: white;
    color: #1a1a1a;
    border: 3px double var(--primary-color, #3b82f6);
}

.preview-card.template-creative {
    background: linear-gradient(135deg, var(--primary-color, #10b981) 0%, var(--secondary-color, #3b82f6) 100%);
    color: white;
}

.preview-card.template-bold {
    background: var(--primary-color, #6b7280);
    color: white;
    font-weight: 700;
}

.preview-card.template-corporate {
    background: white;
    color: #1a1a1a;
    border-left: 8px solid var(--primary-color, #3b82f6);
}

.preview-card.template-simple {
    background: white;
    color: #1a1a1a;
}

.preview-card.template-striped {
    background: linear-gradient(135deg, #f8f9fa 0%, #f8f9fa 100%);
    color: #1a1a1a;
}

.preview-card.template-executive {
    background: linear-gradient(to bottom, white 0%, white 65%, var(--primary-color, #6b7280) 65%);
    color: #1a1a1a;
}

.preview-card.template-tech {
    background: #1a1a1a;
    color: #10b981;
    font-family: 'Courier New', monospace;
}

/* Preview Card Elements */
.preview-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.preview-title {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.preview-contact {
    font-size: 0.8rem;
    line-height: 1.4;
}

.preview-contact > div {
    margin-bottom: 0.25rem;
}

/* Preview Logo */
.preview-logo {
    max-width: 80px;
    max-height: 40px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: move;
    user-select: none;
}

.logo-drop-zone {
    position: absolute;
    left: 15px;
    top: 50px;
    width: 80px;
    height: 40px;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    cursor: pointer;
}

.logo-drop-zone:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.logo-drop-zone.has-logo {
    display: none;
}

/* Preview QR Code */
.preview-qr {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px;
}

.preview-qr img,
.preview-qr svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

/* Preview Social Links */
.preview-socials {
    position: absolute;
    bottom: 10px;
    right: 12px;
    display: none;
    gap: 6px;
    font-size: 0.85rem;
}

.preview-socials i {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

/* Preview Status Badge */
.preview-status-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    display: none;
}

/* Responsive Preview */
@media (max-width: 768px) {
    .preview-card {
        width: 100%;
        max-width: 350px;
        height: 180px;
        padding: 1.25rem;
    }
    
    .preview-name {
        font-size: 1.1rem;
    }
    
    .preview-title {
        font-size: 0.85rem;
    }
    
    .preview-contact {
        font-size: 0.75rem;
    }
}

/* ============================
   Property Crowd Inquiries Styles
   ============================ */

/* Inquiries Table */
.dashboard-redesign .table-responsive {
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.dashboard-redesign .table {
    margin-bottom: 0;
    width: 100%;
    table-layout: fixed;
}

.dashboard-redesign .table thead {
    background: #f8f9fa;
}

.dashboard-redesign .table thead th {
    font-weight: 500;
    color: #1a1a1a;
    border-bottom: 2px solid #e5e7eb;
    padding: 1rem 0.75rem;
    font-size: 0.875rem;
    vertical-align: middle;
}

.dashboard-redesign .table thead th > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.dashboard-redesign .table tbody td {
    padding: 1rem 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #e5e7eb;
    color: #1a1a1a;
    font-size: 0.875rem;
}

.dashboard-redesign .table tbody tr:hover {
    background: #f8f9fa;
}

/* Customer Info Column */
.customer-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.customer-name {
    font-weight: 500;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-indicator.new {
    background: #10b981;
}

.badge.new-message {
    background: #10b981;
    color: white;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}

.customer-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.action-link {
    color: #3b82f6;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
}

.action-link:hover {
    color: #2563eb;
    text-decoration: underline;
}

/* Property Column */
.property-title {
    font-weight: 500;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.forwarded-status-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}

/* Forwarded Column */
.forwarded-col .badge-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.forwarded-date-badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    font-weight: 500;
}

/* Forwarded To Column */
.forwarded-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.forwarded-to {
    font-weight: 500;
    color: #1a1a1a;
}

.forwarded-by {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Last Message Column */
.last-message {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.last-message-date {
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.last-message-text {
    color: #1a1a1a;
    line-height: 1.4;
}

.message-count {
    margin-top: 0.25rem;
}

.message-count .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}

/* Mobile Responsive - Inquiries Table */
@media (max-width: 768px) {
    .dashboard-redesign .table-responsive {
        border-radius: 0;
    }

    .dashboard-redesign .table {
        display: block;
        width: 100%;
    }

    .dashboard-redesign .table thead {
        display: none;
    }

    .dashboard-redesign .table tbody {
        display: block;
        width: 100%;
    }

    .dashboard-redesign .table tbody tr {
        display: block;
        margin-bottom: 1rem;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1rem;
    }

    .dashboard-redesign .table tbody td {
        display: block;
        padding: 0.5rem 0;
        border: none;
        text-align: left;
    }

    .dashboard-redesign .table tbody td:before {
        content: attr(data-label);
        font-weight: 600;
        color: #1a1a1a;
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    /* Hide empty cells on mobile */
    .dashboard-redesign .table tbody td:empty {
        display: none;
    }

    .customer-info {
        gap: 0.75rem;
    }

    .property-title {
        -webkit-line-clamp: 3;
    }

    .forwarded-col .badge-column {
        align-items: flex-start;
    }
}

/* Conversation Thread Styles */
.conversation-thread {
    max-height: none;
    overflow-y: visible;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.message-item {
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Tweak: remove visible box/border around icon-action buttons inside message bubbles */
.message-bubble .action-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0.35rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.message-bubble .action-icon:hover {
    background: rgba(0,0,0,0.04) !important;
}

.message-item .message-bubble {
    padding: 0.9rem 1rem;
    border-radius: 14px;
    max-width: min(720px, 80%);
    width: fit-content;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    background: #f1f5f9;
    color: #0f172a;
}

.message-item .message-bubble * {
    color: inherit !important;
}

.message-sent .message-bubble {
    background: #e0e7ef !important; /* soft slate to match minimalist palette */
    color: #0f172a !important;
    margin-left: auto;
}

.message-received .message-bubble {
    background: #f8fafc !important;
    color: #0f172a !important;
    margin-right: auto;
}

.message-header {
    margin-bottom: 0.35rem;
}

.message-body {
    line-height: 1.5;
    word-wrap: break-word;
}

.message-body p {
    margin: 0 0 0.35rem 0;
}

.message-bubble a,
.message-bubble button,
.message-bubble .action-icon,
.message-bubble .action-icon i {
    color: inherit;
}

.message-sent .message-bubble a,
.message-sent .message-bubble button,
.message-sent .message-bubble .action-icon,
.message-sent .message-bubble .action-icon i {
    color: rgba(255, 255, 255, 0.92);
}

.message-received .message-bubble a,
.message-received .message-bubble button,
.message-received .message-bubble .action-icon,
.message-received .message-bubble .action-icon i {
    color: #0f172a;
}

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

.message-body img {
    border-radius: 10px;
    max-width: 140px;
    max-height: 140px;
    object-fit: cover;
}

.message-body .img-thumbnail {
    padding: 0;
    border: none;
    background: transparent;
}

.message-attachments,
.message-body .d-flex {
    gap: 0.5rem;
}

.chat-scroll-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.25rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #e5e7eb;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.15s ease;
    z-index: 1050;
}

.chat-scroll-top:hover {
    background: #dfe3ea;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.16);
}

.chat-scroll-top i {
    font-size: 1.4rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .chat-scroll-top {
        bottom: 1rem;
        right: 1rem;
        width: 44px;
        height: 44px;
    }
}

/* Mobile - Conversation Thread */
@media (max-width: 768px) {
    .conversation-thread {
        padding: 0.75rem;
    }

    .message-item .message-bubble {
        max-width: 95%;
        font-size: 0.95rem;
    }
}

/* === Date column visibility fixes (inquiries table) === */
.stats-overview .table thead th.col-date,
.dashboard-redesign .table thead th.col-date {
    width: 9% !important;
}

.stats-overview .table tbody td.col-date,
.dashboard-redesign .table tbody td.col-date {
    text-align: right;
    min-width: 96px;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .stats-overview .table tbody td.col-date,
    .dashboard-redesign .table tbody td.col-date {
        text-align: left;
        white-space: normal;
        min-width: 0;
    }

    .stats-overview .table thead th.col-date,
    .dashboard-redesign .table thead th.col-date {
        width: auto !important;
    }
}
@media (max-width: 768px) {
    /* Keep inquiries table visible on mobile (no card layout yet) */
    .inquiries-table {
        display: block !important;
    }
}

/* -------------------------------------------------------------------
   Step Review - description toggle + consistent dashboard buttons
   (moved here from inline templates for a single source of truth)
   ------------------------------------------------------------------ */
.btn-expand {
    background: none;
    border: none;
    color: #1a1a1a;
    padding: 0.5rem 0;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

.btn-expand:hover { 
    color: #6b7280; 
    text-decoration: underline;
}

.btn-expand:active {
    color: #1a1a1a;
}

.description-preview.collapsed { 
    max-height: 80px; 
    overflow: hidden; 
    position: relative;
}

.btn-dashboard:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.btn-dashboard:active { transform: translateY(0); }

/* Ensure action-card buttons with disabled attribute are visibly and functionally disabled */
.action-card[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important; /* prevent clicks when disabled */
}

.action-card:not([disabled]) {
    pointer-events: auto !important;
}

/* -------------------------------------------------------------------
   Analysis Results - Text Justify Alignment
   (минимизиране на използваното място чрез justify alignment)
   ------------------------------------------------------------------ */
.analysis-section .section-text {
    text-align: justify;
    text-justify: inter-word;
}

.analysis-overview p {
    text-align: justify;
    text-justify: inter-word;
}

/* Make analysis sections full-width so text doesn't only occupy the left column */
.mobile-card-layout#analysis-details,
.mobile-card-layout#analysis-details .analysis-content,
.mobile-card-layout#analysis-details .analysis-sections,
.mobile-card-layout#analysis-details .analysis-section {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
}

.analysis-sections { column-count: 1 !important; }
.analysis-section { display: block !important; width: 100% !important; }
.analysis-section .section-text { width: 100% !important; }

/* ===================================================================
   VERIFICATION PAGE STYLES
   Professional, clean design matching dashboard exactly
   =================================================================== */

/* Verification Sidebar Status Items */
.verification-sidebar .status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.verification-sidebar .status-item:last-child {
    border-bottom: none;
}

.verification-sidebar .status-label {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 400;
}

.verification-sidebar .status-value {
    font-size: 0.85rem;
    font-weight: 400;
    color: #1a1a1a;
}

/* Status Badges - Minimalist professional (text only) */
.status-badge {
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.status-badge.status-success {
    color: #166534;
}

.status-badge.status-pending {
    color: #92400e;
}

.status-badge.status-warning {
    color: #92400e;
}

.status-badge.status-danger {
    color: #991b1b;
}

.status-badge.status-info {
    color: #1e40af;
}

.status-badge.status-secondary {
    color: #4b5563;
}

/* Tier Badge */
.tier-badge-modern {
    color: #92400e;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Sticky Sidebar */
.sticky-sidebar {
    position: sticky;
    top: 86px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Verification Section Headers */
.verification-section-header {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.verification-section-header i {
    font-size: 1.2rem;
}

/* Tips List */
.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tips-list li {
    padding: 0.6rem 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.6;
    padding-left: 1.5rem;
    position: relative;
}

.tips-list li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
}

/* Progress Section */
.progress-section-redesign h2 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
}

.progress-track-modern {
    height: 10px;
    background: #f3f4f6;
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill-modern {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: 5px;
    transition: width 0.3s ease;
}

.progress-milestones {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
}

.milestone {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 500;
}

.milestone.completed {
    color: #10b981;
    font-weight: 600;
}

.progress-stats {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.current-progress {
    font-size: 2.5rem;
    font-weight: 300;
    color: #1a1a1a;
}

.progress-label {
    font-size: 1rem;
    color: #6b7280;
    font-weight: 400;
}

/* Verification Steps */
.verification-steps-redesign h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
}

.steps-timeline {
    position: relative;
}

.step-item-modern {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 2rem;
    position: relative;
}

.step-item-modern:last-child {
    margin-bottom: 0;
}

.step-icon-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 1.1rem;
    font-weight: 600;
}

.step-item-modern.completed .step-icon-modern {
    color: #166534;
}

.step-item-modern.pending .step-icon-modern {
    color: #92400e;
}

.step-content-modern {
    flex: 1;
}

.step-content-modern h4 {
    font-size: 1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.step-content-modern p {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.step-badge {
    font-size: 0.75rem;
    display: inline-flex;
    font-weight: 500;
    align-items: center;
    gap: 0.25rem;
}

.step-badge.completed {
    color: #166534;
}

.step-badge.pending {
    color: #92400e;
}

.step-badge.incomplete {
    color: #6b7280;
}

/* Documents Section */
.documents-section h3 {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
}

.documents-grid {
    display: grid;
    gap: 1.25rem;
}

.document-item {
    padding: 1.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.document-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.document-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.document-title {
    font-weight: 500;
    color: #1a1a1a;
    font-size: 0.95rem;
    flex: 1;
}

.document-status {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.document-status.status-verified {
    color: #166534;
}

.document-status.status-rejected {
    color: #991b1b;
}

.document-status.status-in_review {
    color: #1e40af;
}

.document-status.status-pending {
    color: #92400e;
}

.document-status.status-required {
    color: #991b1b;
}

/* Upload Zone */
.upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}

.upload-zone:hover {
    border-color: #10b981;
    background: #f0fdf4;
}

.upload-zone i {
    color: #9ca3af;
    transition: color 0.2s;
}

.upload-zone:hover i {
    color: #10b981;
}

.file-input {
    display: none;
}

/* Optional Badge */
.optional-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-weight: 500;
}

/* Uploaded File Info */
.uploaded-file-info {
    margin-top: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
}

.uploaded-file-info p {
    margin: 0;
    color: #1a1a1a;
    font-size: 0.9rem;
}

.uploaded-file-info small {
    color: #6b7280;
    font-size: 0.8rem;
}

.rejection-reason {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #fee2e2;
    border-left: 3px solid #ef4444;
    border-radius: 4px;
}

.rejection-reason strong {
    color: #991b1b;
    font-size: 0.85rem;
}

/* Progress Circle (optional visual element) */
.progress-circle-modern {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(
        #10b981 0% var(--progress),
        #f3f4f6 var(--progress) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.progress-circle-modern:before {
    content: '';
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    position: absolute;
}

.progress-text-modern {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
}

/* Verification Card Spacing */
.verification-card-spacing {
    display: block;
    margin-bottom: 1.5rem;
}

/* Button Variants */
.btn-compact {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
}

.btn-large {
    padding: 0.75rem 1.5rem !important;
    font-size: 1.1rem !important;
}

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

/* Upload Icon */
.upload-icon {
    font-size: 2rem;
    color: #9ca3af;
}

/* Success Card Styles */
.verification-success-card {
    display: block;
    margin-top: 1.5rem;
    border-left: 4px solid #10b981;
    background: #f0fdf4;
    padding: 2rem;
}

.verification-success-icon {
    font-size: 3rem;
    color: #10b981;
}

.verification-success-title {
    color: #166534;
    font-weight: 600;
}

/* Submission Status - AI Analysis Progress Bars */
.ai-progress-container {
    min-width: 160px;
}

.ai-progress-large {
    height: 12px;
}

.ai-progress-small {
    height: 8px;
}

/* Ensure progress bars have dynamic widths */
.progress-bar[style*="width"] {
    transition: width 0.3s ease;
}

/* Section Subtitle */
.section-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 1rem;
}

/* Minimalist timeline dots (replace decorative icons) */
.timeline-item {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: .6rem;
}
.timeline-item::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .6rem;
    background: #cbd5e1; /* neutral */
}
.timeline-submitted::before,
.timeline-approved::before { background: #10b981; } /* green */
.timeline-ai::before { background: #0ea5e9; } /* info */
.timeline-rejected::before { background: #ef4444; } /* danger */
.timeline-pending::before { background: #f59e0b; } /* warning */

/* Responsive fixes for AI-analysis layout and progress bars */
@media (max-width: 767.98px) {
    /* Stack the overall label and the progress area cleanly */
    #ai-analysis .d-flex.align-items-start.justify-content-between.mb-3 {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }

    /* Make the right-side block full width and left-aligned on small viewports */
    #ai-analysis .text-end {
        text-align: left !important;
    }

    #ai-analysis [data-ai-overall] {
        width: 100%;
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    /* Bring the progress bar below the label and make it full width */
    .ai-progress-container {
        width: 100% !important;
        min-width: auto;
        margin-top: 0;
    }

    /* Force the overall value to display sensibly on small screens */
    [data-ai-overall-value] {
        min-width: 52px;
        text-align: left;
        font-weight: 700;
    }

    /* Breakdown items: stack percentage above the progress bar */
    .col-md-6 .d-flex.align-items-center {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    .col-md-6 .d-flex.align-items-center .me-3 {
        margin-right: 0 !important;
        margin-bottom: .4rem;
    }

    .col-md-6 .d-flex.align-items-center .flex-grow-1 {
        width: 100%;
    }
}

/* Overall AI block styling (stacked under summary) */
.ai-overall-block {
    margin-top: 0.75rem;
}

.ai-overall-block strong[data-ai-overall-value] {
    font-weight: 700;
    min-width: 48px;
    text-align: left;
    display: inline-block;
}

/* Ensure ai-progress-container does not force horizontal layout for the stacked overall block */
.ai-progress-container { min-width: auto; width: 100%; }

/* ===== Statistics Trend Indicators ===== */
.stat-trend {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
}

.stat-trend.positive {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
}

.stat-trend.positive i {
    color: #10b981;
}

.stat-trend.negative {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

.stat-trend.negative i {
    color: #ef4444;
}

.stat-trend.neutral {
    color: #6b7280;
    background-color: rgba(107, 114, 128, 0.1);
}

/* ===== Period Selector ===== */
.stats-period {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.stats-period .period-btn {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: 1px solid transparent;
}

.stats-period .period-btn:hover:not(.active):not(.loading) {
    background-color: rgba(0, 123, 255, 0.08);
    color: #1976d2;
    border-color: rgba(0, 123, 255, 0.2);
}

.stats-period .period-btn.active {
    background-color: #1976d2;
    color: white;
    font-weight: 600;
    border-color: #1976d2;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.25);
}

.stats-period .period-btn.loading {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* ===== Loading Animation ===== */
.stats-grid {
    transition: opacity 0.3s ease;
}

.stats-grid.loading {
    position: relative;
}

.stats-grid.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 123, 255, 0.1);
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.stat-item.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* ===== Responsive Period Selector ===== */
@media (max-width: 767.98px) {
    .stats-period {
        width: 100%;
        justify-content: center;
        margin-top: 0.75rem;
    }
    
    .stats-period .period-btn {
        flex: 1;
        text-align: center;
        padding: 0.625rem 0.75rem;
        font-size: 0.813rem;
    }
}

/* ===== Styles extracted from templates/property_crowd/submissions/my_submissions.html.twig ===== */
.pc-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: #1a1a1a;
}
.pc-icon-gap {
    margin-right: 0.5rem;
}
.pc-subtitle {
    margin: 0.5rem 0 0 0;
    color: #6b7280;
    font-size: 0.9rem;
}
.pc-filters-form {
    display: grid;
    gap: 1rem;
}
.pc-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.pc-filter-label {
    display: block;
    color: #6b7280;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
}
.pc-input {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.9rem;
}
.pc-select {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.9rem;
}
.pc-filter-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}
.btn-edit-profile.pc-clear-filters {
    background: white;
    color: #1a1a1a;
    border: 1px solid #e5e7eb;
}
.pc-image-container {
    width: 100%;
    height: 160px;
    background: #f3f4f6;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    position: relative;
}
.pc-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pc-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}
.pc-image-icon {
    font-size: 3rem;
}
.pc-badge-pos {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}
.pc-header-padding-top { padding-top: 1rem; }
.pc-description {
    padding: 0 1.25rem;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.pc-actions-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.mobile-card-action.pc-action-publish,
.mobile-card-action.pc-action-activate {
    background: #10b981;
    color: white;
    border: none;
    cursor: pointer;
}
.mobile-card-action.pc-action-pause {
    background: #f59e0b;
    color: white;
    border: none;
    cursor: pointer;
}

/* ===================================================================
   INQUIRY PAGE STYLES (extracted from inline styles)
   =================================================================== */

/* Inquiry Page Header */
.inquiry-page-title {
    font-size: 1.5rem;
    font-weight: 400;
    color: #1a1a1a;
}

.inquiry-page-subtitle {
    color: #6b7280;
}

/* Customer Avatar */
.customer-avatar {
    width: 50px;
    height: 50px;
    background: #1976d2;
}

/* Empty State Icon */
.empty-state-icon {
    font-size: 3rem;
}

/* Message Bubble Content */
.message-bubble-content {
    max-width: 70%;
    padding: 1rem;
    border-radius: 18px;
}

/* Attachment Thumbnail */
.attachment-thumbnail {
    max-width: 140px;
    max-height: 140px;
}

/* Reply Textarea */
.reply-textarea {
    border-radius: 12px;
    resize: vertical;
}

/* Upload Progress Elements */
.upload-validation-hidden {
    display: none;
}

.upload-progress-container {
    height: 6px;
    display: none;
}

.upload-progress-bar {
    width: 0%;
}

.upload-status-hidden {
    display: none;
}

/* Button Flex Layout */
.button-flex-layout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 2rem;
}

/* Editor Textarea */
.editor-textarea {
    border-radius: 8px;
}

/* Lightbox Overlay (previously in inline <style> block) */
.lb-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none; /* default hidden — JS toggles to 'flex' when opening */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
}

.lb-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lb-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10000;
}

/* Action Icons */
.action-icon {
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    color: #6b7280;
    background: transparent;
}

.action-icon:hover {
    background: #f3f4f6;
    color: #1a1a1a;
}

.action-icon i {
    font-size: 1.15rem;
}

.action-icon-lg i {
    font-size: 1.4rem;
}

/* ===================================================================
   INQUIRY INDEX PAGE STYLES (extracted from inline styles)
   =================================================================== */

/* Table Column Widths */
.inquiries-table th.col-customer {
    width: 22%;
}

.inquiries-table th.col-property {
    width: 20%;
}

.inquiries-table th.col-forwarded {
    width: 12%;
}

.inquiries-table th.col-forwarded-to {
    width: 15%;
}

.inquiries-table th.col-last-message {
    width: 26%;
}

.inquiries-table th.col-date {
    width: 9%;
}

/* Export Button */
.btn-export-csv {
    background: #10b981;
}

/* Empty State */
.inquiries-empty-cell {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.inquiries-empty-icon {
    font-size: 3rem;
    opacity: 0.5;
}

.inquiries-empty-title {
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 1rem;
    color: #1a1a1a;
}

.inquiries-empty-text {
    margin: 0.5rem 0 0;
}

/* Pagination Wrapper */
.inquiries-pagination {
    padding: 1rem;
}
.pc-pagination-margin-top { margin-top: 2rem; }
.pc-empty-subtitle { font-size: 0.9rem; margin-top: 0.5rem; }
.btn-edit-profile.pc-add-first { margin-top: 1rem; display: inline-flex; }
/* ===== End extracted styles ===== */