/* Propzo Landing Page CSS */

/* Variables */
:root {
    --pz-primary: #2563EB;
    --pz-secondary: #1E40AF;
    --pz-bg: #FFFFFF;
    --pz-card: #FFFFFF;
    --pz-border: #E5E7EB;
    --pz-text: #111827;
    --pz-muted: #6B7280;
    --pz-success: #22C55E;
    --pz-radius-xl: 24px;
    --pz-radius-lg: 18px;
    --pz-radius-md: 12px;
    --pz-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --pz-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    --pz-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    --pz-shadow-xl: 0 25px 50px -12px rgba(37, 99, 235, 0.1);
}

.propzo-body {
    font-family: 'Inter', sans-serif !important;
    background-color: #ffffff;
    color: #111827;
}

/* Hide default website header and footer on homepage & admin dashboard */
body:has(.propzo-body) #wrapwrap>header,
body:has(.propzo-body) #wrapwrap>footer,
body:has(.propzo-body) header[data-name="Header"],
body:has(.propzo-body) footer[data-name="Footer"],
body:has(.saas-app-shell) #wrapwrap>header,
body:has(.saas-app-shell) #wrapwrap>footer,
body:has(.saas-app-shell) header[data-name="Header"],
body:has(.saas-app-shell) footer[data-name="Footer"],
body:has(.saas-app-shell) .o_footer,
body:has(.saas-app-shell) footer:not(.saas-dashboard-footer) {
    display: none !important;
}

body:has(.propzo-body) #wrapwrap,
body:has(.saas-app-shell) #wrapwrap,
body:has(.saas-app-shell) main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Custom Header */
.pz-header {
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--pz-border);
    position: sticky;
    top: 0;
    z-index: 1050;
    transition: all 0.3s ease;
}

.pz-header-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.pz-logo {
    font-size: 26px;
    font-weight: 800;
    color: var(--pz-primary);
    text-decoration: none !important;
    letter-spacing: -0.04em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pz-logo span {
    color: #111827;
}

/* Mobile-only header elements — hidden by default on desktop */
.pz-mobile-actions {
    display: none;
    align-items: center;
    gap: 10px;
}

/* Smaller Post Property button for mobile */
.pz-btn-sm {
    padding: 9px 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
    border-radius: 22px !important;
}

/* Hamburger button */
.pz-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 36px;
    flex-shrink: 0;
}

.pz-hamburger span {
    display: block;
    height: 2.5px;
    width: 100%;
    background: #111827;
    border-radius: 3px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* X animation when active */
.pz-hamburger.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.pz-hamburger.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.pz-hamburger.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* Mobile drawer — hidden by default */
.pz-mobile-drawer {
    display: none;
    flex-direction: column;
    background: #fff;
    border-top: 1px solid var(--pz-border);
    padding: 8px 0 16px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 1040;
    animation: pzSlideDown 0.22s ease;
}

.pz-mobile-drawer.open {
    display: flex;
}

@keyframes pzSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pz-mobile-link {
    padding: 13px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: #374151 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease, color 0.15s ease;
    display: block;
}

.pz-mobile-link:last-child {
    border-bottom: none;
}

.pz-mobile-link:hover {
    background: #f9fafb;
    color: var(--pz-primary) !important;
}

.pz-mobile-divider {
    height: 1px;
    background: var(--pz-border);
    margin: 6px 0;
}

.pz-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.pz-nav-link {
    font-weight: 600;
    font-size: 15px;
    color: #4B5563;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.pz-nav-link:hover {
    color: var(--pz-primary);
}

.pz-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pz-lang-btn,
.pz-login-btn {
    font-weight: 600;
    font-size: 15px;
    color: #4B5563;
    text-decoration: none !important;
    background: none;
    border: none;
    cursor: pointer;
}

.pz-lang-btn:hover,
.pz-login-btn:hover {
    color: var(--pz-primary);
}

.pz-btn-primary {
    background: var(--pz-primary);
    color: #ffffff !important;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid var(--pz-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pz-btn-primary:hover {
    background: var(--pz-secondary);
    border-color: var(--pz-secondary);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    transform: translateY(-1px);
}

.pz-btn-secondary {
    background: #ffffff;
    color: var(--pz-primary) !important;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid var(--pz-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pz-btn-secondary:hover,
.pz-btn-secondary:focus,
.pz-btn-secondary:active,
.prop-btn-secondary:hover,
.prop-btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
a.pz-btn-secondary:hover,
a.prop-btn-secondary:hover,
a.prop-btn-outline:hover,
a.btn-outline-primary:hover {
    background: #eff6ff !important;
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-color: #2563eb !important;
    text-decoration: underline !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: translateY(-1px);
}


/* Hero Section */
.pz-hero {
    background: radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.06) 0%, transparent 65%), #ffffff;
    padding: 120px 0 70px 0;
    text-align: center;
}

.pz-hero h1 {
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #111827;
    margin-bottom: 20px;
}

.pz-hero p.subtitle {
    font-size: 1.35rem;
    color: var(--pz-muted);
    max-width: 600px;
    margin: 0 auto 36px auto;
    font-weight: 400;
    line-height: 1.5;
}

.pz-hero-ctas {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 56px;
}

/* Floating Search Bar */
.pz-search-wrapper {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

.pz-search-box {
    background: #ffffff;
    border-radius: var(--pz-radius-xl);
    box-shadow: var(--pz-shadow-xl);
    border: 1px solid var(--pz-border);
    padding: 14px 14px 14px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 10;
}

.pz-search-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}

.pz-search-field label {
    font-size: 11px;
    font-weight: 800;
    color: var(--pz-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.pz-search-field select,
.pz-search-field input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    background: transparent;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.pz-search-field input::placeholder {
    color: #9CA3AF;
}

.pz-search-divider {
    width: 1px;
    height: 44px;
    background: var(--pz-border);
}

.pz-search-btn {
    background: var(--pz-primary);
    color: #ffffff;
    border: none;
    border-radius: var(--pz-radius-lg);
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pz-search-btn:hover {
    background: var(--pz-secondary);
    transform: scale(1.02);
}

/* Horizontal Featured Card */
.pz-horizontal-card {
    background: #ffffff;
    border-radius: var(--pz-radius-xl);
    box-shadow: var(--pz-shadow-lg);
    border: 1px solid var(--pz-border);
    overflow: hidden;
    display: flex;
    max-width: 1180px;
    margin: 80px auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pz-horizontal-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pz-shadow-xl);
}

.pz-card-img-wrapper {
    width: 45%;
    position: relative;
    overflow: hidden;
    min-height: 380px;
}

.pz-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pz-horizontal-card:hover .pz-card-img {
    transform: scale(1.06);
}

.pz-badge {
    position: absolute;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pz-badge-left {
    top: 20px;
    left: 20px;
    background: rgba(17, 24, 39, 0.7);
    color: #ffffff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pz-badge-right {
    top: 20px;
    right: 20px;
    background: var(--pz-primary);
    color: #ffffff;
}

.pz-badge-verified {
    bottom: 20px;
    left: 20px;
    background: var(--pz-success);
    color: #ffffff;
}

.pz-card-body {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pz-card-title-row h3 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 6px;
    color: #111827;
}

.pz-card-location {
    font-size: 15px;
    color: var(--pz-muted);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pz-card-icons {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--pz-border);
    padding-bottom: 20px;
}

.pz-card-icon-item {
    font-size: 14px;
    font-weight: 600;
    color: #4B5563;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pz-card-icon-item i {
    color: var(--pz-primary);
}

.pz-card-desc {
    font-size: 14px;
    color: var(--pz-muted);
    line-height: 1.6;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.pz-card-price h4 {
    font-size: 28px;
    font-weight: 800;
    color: var(--pz-primary);
    margin-bottom: 2px;
}

.pz-card-price span {
    font-size: 13px;
    color: var(--pz-muted);
    font-weight: 500;
}

.pz-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pz-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--pz-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4B5563;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
}

.pz-action-icon:hover {
    border-color: var(--pz-primary);
    color: var(--pz-primary);
    background: #eff6ff;
}

/* Sections General */
.pz-section {
    padding: 100px 0;
}

.pz-section-bg {
    background-color: #f9fafb;
}

.pz-section-title {
    text-align: center;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.pz-section-title h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #111827;
    letter-spacing: -0.03em;
}

.pz-section-title p {
    font-size: 17px;
    color: var(--pz-muted);
}

/* Grid Cards (Featured Properties) */
.pz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.pz-grid-card {
    background: #ffffff;
    border-radius: var(--pz-radius-lg);
    box-shadow: var(--pz-shadow-md);
    border: 1px solid var(--pz-border);
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pz-grid-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--pz-shadow-lg);
}

.pz-grid-img-wrapper {
    height: 240px;
    position: relative;
    overflow: hidden;
}

.pz-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pz-grid-card:hover .pz-grid-img {
    transform: scale(1.06);
}

.pz-grid-body {
    padding: 28px;
}

.pz-grid-type {
    font-size: 11px;
    font-weight: 800;
    color: var(--pz-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.pz-grid-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
    color: #111827;
}

.pz-grid-loc {
    font-size: 14px;
    color: var(--pz-muted);
    margin-bottom: 16px;
}

.pz-grid-specs {
    display: flex;
    gap: 16px;
    border-top: 1px solid var(--pz-border);
    padding-top: 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #4B5563;
    font-weight: 500;
}

.pz-grid-specs span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pz-grid-specs i {
    color: var(--pz-primary);
}

.pz-grid-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--pz-border);
    padding-top: 20px;
}

.pz-grid-price {
    font-size: 22px;
    font-weight: 800;
    color: var(--pz-primary);
}

/* Category Grid */
.pz-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.pz-cat-card {
    background: #ffffff;
    border-radius: var(--pz-radius-lg);
    border: 1px solid var(--pz-border);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
}

.pz-cat-card:hover {
    border-color: var(--pz-primary);
    box-shadow: var(--pz-shadow-lg);
    transform: translateY(-6px);
}

.pz-cat-icon {
    font-size: 36px;
    color: var(--pz-primary);
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.pz-cat-card:hover .pz-cat-icon {
    transform: scale(1.1);
}

.pz-cat-title {
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

/* Top Locations */
.pz-loc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.pz-loc-card {
    border-radius: var(--pz-radius-lg);
    height: 320px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.pz-loc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pz-loc-card:hover .pz-loc-img {
    transform: scale(1.08);
}

.pz-loc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(11, 15, 25, 0.85) 0%, rgba(11, 15, 25, 0.2) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: #ffffff;
}

.pz-loc-name {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 4px;
}

.pz-loc-count {
    font-size: 13px;
    opacity: 0.9;
    font-weight: 500;
}

/* Why Choose Us */
.pz-why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.pz-why-card {
    background: #ffffff;
    border-radius: var(--pz-radius-lg);
    border: 1px solid var(--pz-border);
    padding: 36px 24px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pz-why-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pz-shadow-md);
    border-color: var(--pz-primary);
}

.pz-why-icon {
    font-size: 40px;
    color: var(--pz-primary);
    margin-bottom: 20px;
}

.pz-why-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111827;
}

.pz-why-desc {
    font-size: 14px;
    color: var(--pz-muted);
    line-height: 1.5;
}

/* Testimonials - Glassmorphism */
.pz-test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.pz-test-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--pz-radius-lg);
    border: 1px solid rgba(229, 231, 235, 0.5);
    padding: 40px;
    position: relative;
    box-shadow: var(--pz-shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pz-test-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pz-shadow-lg);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(37, 99, 235, 0.2);
}

.pz-test-quote {
    font-size: 16px;
    color: #374151;
    line-height: 1.7;
    margin-bottom: 28px;
    font-style: italic;
}

.pz-test-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pz-test-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: var(--pz-shadow-sm);
}

.pz-test-username {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.pz-test-role {
    font-size: 13px;
    color: var(--pz-muted);
    font-weight: 500;
}

/* Stats Section */
.pz-stats {
    background: linear-gradient(135deg, var(--pz-primary) 0%, var(--pz-secondary) 100%);
    color: #ffffff;
    padding: 80px 0;
}

.pz-stats-container {
    display: flex;
    justify-content: space-around;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.pz-stat-number {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.pz-stat-label {
    font-size: 15px;
    opacity: 0.9;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Download App */
.pz-app-section {
    padding: 100px 0;
    background: radial-gradient(circle at 10% 50%, rgba(37, 99, 235, 0.05) 0%, transparent 60%);
}

.pz-app-container {
    max-width: 1180px;
    margin: 0 auto;
    background: #0B0F19;
    color: #ffffff;
    border-radius: var(--pz-radius-xl);
    padding: 70px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    box-shadow: var(--pz-shadow-lg);
}

.pz-app-content {
    width: 55%;
    z-index: 2;
}

.pz-app-content h2 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.03em;
}

.pz-app-content p {
    font-size: 17px;
    opacity: 0.8;
    margin-bottom: 36px;
    line-height: 1.6;
}

.pz-app-buttons {
    display: flex;
    gap: 16px;
}

.pz-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #1F2937;
    border: 1px solid #374151;
    border-radius: 14px;
    padding: 12px 24px;
    color: #ffffff;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.pz-app-btn:hover {
    background: #2D3748;
    border-color: #4A5568;
    transform: translateY(-1px);
}

.pz-app-btn-icon {
    font-size: 28px;
}

.pz-app-btn-text span {
    display: block;
    font-size: 10px;
    opacity: 0.7;
    text-transform: uppercase;
    font-weight: 600;
}

.pz-app-btn-text strong {
    font-size: 16px;
    font-weight: 700;
}

.pz-app-img {
    position: absolute;
    right: 80px;
    bottom: -80px;
    width: 340px;
    z-index: 1;
    transform: rotate(-8deg);
}

/* Blog Section */
.pz-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.pz-blog-card {
    background: #ffffff;
    border-radius: var(--pz-radius-lg);
    border: 1px solid var(--pz-border);
    overflow: hidden;
    transition: all 0.3s ease;
}

.pz-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--pz-shadow-md);
}

.pz-blog-img-wrapper {
    height: 220px;
    overflow: hidden;
}

.pz-blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pz-blog-card:hover .pz-blog-img {
    transform: scale(1.05);
}

.pz-blog-body {
    padding: 28px;
}

.pz-blog-date {
    font-size: 13px;
    color: var(--pz-muted);
    margin-bottom: 10px;
    font-weight: 500;
}

.pz-blog-title {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #111827;
    line-height: 1.4;
}

.pz-blog-link {
    font-weight: 700;
    font-size: 15px;
    color: var(--pz-primary);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pz-blog-link:hover {
    color: var(--pz-secondary);
}

/* Footer */
.pz-footer {
    background: #0B0F19;
    color: #9CA3AF;
    padding: 100px 0 40px 0;
    border-top: 1px solid #1F2937;
}

.pz-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px 60px 24px;
    border-bottom: 1px solid #1F2937;
}

.pz-footer-logo-col h4 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 18px;
}

.pz-footer-logo-col p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 28px;
}

.pz-social-icons {
    display: flex;
    gap: 14px;
}

.pz-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1F2937;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: all 0.2s ease;
    font-size: 18px;
}

.pz-social-icon:hover {
    background: var(--pz-primary);
    transform: translateY(-2px);
}

.pz-footer-col h5 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 22px;
}

.pz-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pz-footer-links li {
    margin-bottom: 14px;
}

.pz-footer-links a {
    color: #9CA3AF;
    text-decoration: none !important;
    font-size: 15px;
    transition: color 0.2s ease;
}

.pz-footer-links a:hover {
    color: #ffffff;
}

.pz-newsletter-form {
    display: flex;
    gap: 10px;
}

.pz-newsletter-input {
    flex: 1;
    background: #1F2937;
    border: 1px solid #374151;
    border-radius: 30px;
    padding: 12px 20px;
    color: #ffffff;
    font-size: 15px;
    outline: none;
}

.pz-newsletter-input::placeholder {
    color: #6B7280;
}

.pz-newsletter-btn {
    background: var(--pz-primary);
    color: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pz-newsletter-btn:hover {
    background: var(--pz-secondary);
}

.pz-footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 24px 0 24px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
}

/* ── Responsive adjustments ─────────────────────────────── */

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
    .pz-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pz-cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pz-loc-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pz-why-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pz-test-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pz-hero h1 {
        font-size: 3rem;
    }
}

/* Mobile hamburger button — hidden on desktop */
.pz-mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #111827;
    font-size: 1.5rem;
}

/* Mobile drawer */
.pz-mobile-nav {
    display: none;
    flex-direction: column;
    background: #ffffff;
    border-top: 1px solid var(--pz-border);
    padding: 16px 20px 24px;
    gap: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 1049;
}

.pz-mobile-nav.open {
    display: flex;
}

.pz-mobile-nav a {
    padding: 12px 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    text-decoration: none !important;
    border-bottom: 1px solid var(--pz-border);
}

.pz-mobile-nav a:last-child {
    border-bottom: none;
}

/* Mobile (≤768px) */
@media (max-width: 768px) {

    /* Header */
    .pz-nav {
        display: none;
    }

    .pz-desktop-actions {
        display: none !important;
    }

    .pz-mobile-actions {
        display: flex !important;
    }

    .pz-header {
        position: sticky;
    }

    .pz-header-container {
        padding: 0 14px;
    }

    /* Hero */
    .pz-hero {
        padding: 60px 0 40px 0;
    }

    .pz-hero h1 {
        font-size: 2rem;
        letter-spacing: -0.02em;
        padding: 0 16px;
    }

    .pz-hero p.subtitle {
        font-size: 1rem;
        padding: 0 20px;
    }

    .pz-hero-ctas {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 0 20px;
        margin-bottom: 32px;
    }

    .pz-hero-ctas .pz-btn-primary,
    .pz-hero-ctas .pz-btn-secondary {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    /* Search box */
    .pz-search-wrapper {
        padding: 0 16px;
    }

    .pz-search-box {
        flex-direction: column;
        padding: 20px 16px;
        border-radius: var(--pz-radius-lg);
        gap: 0;
    }

    .pz-search-divider {
        display: none;
    }

    .pz-search-field {
        width: 100%;
        border-bottom: 1px solid var(--pz-border);
        padding-bottom: 14px;
        margin-bottom: 14px;
    }

    .pz-search-field:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .pz-search-btn {
        width: 100%;
        justify-content: center;
        border-radius: var(--pz-radius-md);
        margin-top: 14px;
    }

    /* Featured horizontal card */
    .pz-horizontal-card {
        flex-direction: column;
        margin: 24px 12px;
        border-radius: 18px;
    }

    .pz-card-img-wrapper {
        width: 100%;
        height: 240px;
        min-height: auto;
    }

    .pz-card-body {
        padding: 20px 16px;
    }

    /* Description — allow full text, remove clamp limit */
    .pz-card-desc {
        -webkit-line-clamp: 4;
        margin-bottom: 16px;
        font-size: 13px;
    }

    /* Card footer — stacks price then actions */
    .pz-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        border-top: 1px solid var(--pz-border);
        padding-top: 16px;
        margin-top: 4px;
    }

    .pz-card-price h4 {
        font-size: 22px;
    }

    /* Actions row — buttons fill width, icons shrink */
    .pz-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: center;
    }

    .pz-card-actions .pz-btn-secondary,
    .pz-card-actions .pz-btn-primary {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 11px 10px;
        font-size: 14px;
    }

    /* Move icon buttons to a small row below */
    .pz-card-actions .pz-action-icon {
        display: none;
    }

    /* Section padding */
    .pz-section {
        padding: 60px 0;
    }

    .pz-section-title h2 {
        font-size: 26px;
        padding: 0 16px;
    }

    .pz-section-title p {
        font-size: 15px;
        padding: 0 16px;
    }

    /* Grids */
    .pz-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .pz-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 16px;
        gap: 14px;
    }

    .pz-loc-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 16px;
        gap: 14px;
    }

    .pz-loc-card {
        height: 200px;
    }

    .pz-why-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 16px;
    }

    .pz-test-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    .pz-blog-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }

    /* Stats section */
    .pz-stats {
        padding: 50px 0;
    }

    .pz-stats-container {
        flex-direction: column;
        gap: 32px;
        padding: 0 20px;
    }

    .pz-stat-number {
        font-size: 36px;
    }

    /* App section */
    .pz-app-section {
        padding: 60px 16px;
    }

    .pz-app-container {
        flex-direction: column;
        padding: 40px 24px;
        text-align: center;
        margin: 0 16px;
    }

    .pz-app-content {
        width: 100%;
        margin-bottom: 24px;
    }

    .pz-app-content h2 {
        font-size: 26px;
    }

    .pz-app-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pz-app-img {
        display: none;
    }

    /* Footer */
    .pz-footer {
        padding: 60px 0 30px 0;
    }

    .pz-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 16px 40px 16px;
    }

    .pz-footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 20px 16px 0 16px;
    }

    .pz-newsletter-form {
        flex-direction: column;
    }

    .pz-newsletter-btn {
        width: 100%;
    }
}

/* Extra-small (≤480px) */
@media (max-width: 480px) {
    .pz-hero h1 {
        font-size: 1.65rem;
    }

    .pz-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pz-why-grid {
        grid-template-columns: 1fr;
    }

    .pz-loc-grid {
        grid-template-columns: 1fr;
    }

    .pz-btn-primary,
    .pz-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .pz-card-icons {
        flex-wrap: wrap;
        gap: 12px;
    }

    .pz-grid-specs {
        flex-wrap: wrap;
    }
}

/* Agent Dashboard Tabs & Interactive Metric Cards */
.cursor-pointer {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cursor-pointer:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

#agentDashboardTabs .nav-link {
    color: #475569;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
}

#agentDashboardTabs .nav-link .tab-icon-wrapper {
    background-color: #E2E8F0;
    color: #475569;
    transition: all 0.25s ease;
}

#agentDashboardTabs .nav-link:hover:not(.active) {
    background-color: #F1F5F9;
    color: #0F172A;
    border-color: #CBD5E1;
    transform: translateX(4px);
}

#agentDashboardTabs .nav-link:hover:not(.active) .tab-icon-wrapper {
    background-color: #CBD5E1;
    color: #0F172A;
}

#agentDashboardTabs .nav-link.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
    border-color: #0F172A !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
}

#agentDashboardTabs .nav-link.active .tab-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FDE68A;
}

/* ═══ SaaS Property Dashboard Design System ═══ */
:root {
    /* Colors */
    --saas-primary: #3563E9;
    --saas-primary-hover: #2851D8;
    --saas-primary-soft: #EEF3FF;
    --saas-primary-border: #DCE6FF;

    --saas-sidebar-bg: #0F172A;
    --saas-sidebar-sec: #111C33;
    --saas-sidebar-hover: #17233B;
    --saas-sidebar-active: linear-gradient(135deg, #3563E9 0%, #5B5FEF 100%);
    --saas-sidebar-text: #F8FAFC;
    --saas-sidebar-muted: #94A3B8;
    --saas-sidebar-divider: #23314D;

    --saas-app-bg: #F6F8FC;
    --saas-surface: #FFFFFF;
    --saas-surface-sec: #F8FAFC;

    --saas-text-primary: #172033;
    --saas-text-secondary: #64748B;
    --saas-text-muted: #94A3B8;
    --saas-heading-dark: #0F172A;

    --saas-border-default: #E5EAF2;
    --saas-border-soft: #EDF1F7;

    --saas-success: #10B981;
    --saas-success-soft: #ECFDF5;
    --saas-success-border: #C6F6E5;

    --saas-warning: #F59E0B;
    --saas-warning-soft: #FFF7E8;
    --saas-warning-border: #FDE9BA;

    --saas-danger: #F43F5E;
    --saas-danger-soft: #FFF1F3;
    --saas-danger-border: #FFD6DE;

    --saas-purple: #7C3AED;
    --saas-purple-soft: #F4EEFF;

    --saas-cyan: #06B6D4;
    --saas-cyan-soft: #ECFBFE;

    --saas-blue-soft: #EFF6FF;
}

/* Base Wrapper & Typography */
.prop-portal-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    background-color: var(--saas-app-bg) !important;
    color: var(--saas-text-primary) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════ */
/* 🚀 WEALTHOS-INSPIRED SaaS ADMIN DASHBOARD DESIGN SYSTEM          */
/* ═════════════════════════════════════════════════════════════════ */

.saas-app-shell {
    --admin-bg: #F4F7FB;
    --admin-surface: #FFFFFF;
    --admin-surface-secondary: #F8FAFC;
    --admin-border: #E3E9F2;
    --admin-text: #152033;
    --admin-muted: #64748B;
    --admin-primary: #2563EB;
    --admin-primary-soft: #EDF4FF;
    --admin-success: #10B981;
    --admin-success-soft: #ECFDF5;
    --admin-purple: #7C3AED;
    --admin-purple-soft: #F4EEFF;
    --admin-warning: #F59E0B;
    --admin-warning-soft: #FFF7E8;
    --admin-danger: #F43F5E;
    --admin-danger-soft: #FFF1F3;
    --admin-cyan: #06B6D4;
    --admin-cyan-soft: #ECFBFE;
    --admin-topbar-bg: #FFFFFF;
    --admin-card-shadow: 0 3px 12px rgba(15, 23, 42, 0.035);
}

.saas-app-shell[data-theme="dark"] {
    --admin-bg: #07111F;
    --admin-surface: #0D1B2E;
    --admin-surface-secondary: #102238;
    --admin-border: #20334B;
    --admin-text: #F1F5F9;
    --admin-muted: #8FA2B8;
    --admin-primary: #4F7CFF;
    --admin-primary-soft: rgba(79, 124, 255, 0.13);
    --admin-success: #21D49B;
    --admin-success-soft: rgba(33, 212, 155, 0.12);
    --admin-purple: #9B72FF;
    --admin-purple-soft: rgba(155, 114, 255, 0.13);
    --admin-warning: #F7B84B;
    --admin-warning-soft: rgba(247, 184, 75, 0.12);
    --admin-danger: #FF5C78;
    --admin-danger-soft: rgba(255, 92, 120, 0.12);
    --admin-cyan: #2CC7E8;
    --admin-cyan-soft: rgba(44, 199, 232, 0.12);
    --admin-topbar-bg: #081426;
    --admin-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

.prop-portal-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background-color: var(--admin-bg) !important;
    color: var(--admin-text) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Full-Width Edge-to-Edge SaaS Admin Shell Layout */
.saas-app-shell {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--admin-bg) !important;
    color: var(--admin-text) !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
}

/* Edge-to-Edge Dark Sidebar (Touching Viewport Top & Left Edge - 224px Width) */
.saas-sidebar {
    width: 224px !important;
    flex: 0 0 224px !important;
    min-width: 224px !important;
    max-width: 224px !important;
    background-color: #071426 !important;
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-right: 1px solid rgba(148, 163, 184, 0.14) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.saas-sidebar .sidebar-dark-card {
    border-radius: 0 !important;
    border: none !important;
    background: #071426 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    top: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.saas-main-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: calc(100% - 224px) !important;
    background-color: var(--admin-bg) !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    transition: background-color 0.2s ease !important;
}

.saas-content-inner {
    padding: 20px 24px 24px 24px !important;
    flex: 1 1 auto !important;
}

/* Minimal SaaS Top Bar (58px Height, 22px Side Padding) */
.saas-topbar {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 22px !important;
    background-color: var(--admin-topbar-bg) !important;
    border-bottom: 1px solid var(--admin-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.saas-topbar-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--admin-muted) !important;
}

.prop-portal-wrapper h1,
.prop-portal-wrapper .h1-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--admin-text) !important;
    letter-spacing: -0.02em !important;
}

.prop-portal-wrapper h2,
.prop-portal-wrapper .kpi-number {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--admin-text) !important;
    letter-spacing: -0.02em !important;
}

.prop-portal-wrapper .section-heading {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--admin-text) !important;
}

.prop-portal-wrapper .card-title-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--admin-text) !important;
}

/* Sidebar Header & Brand Logo Area (14px 14px 12px Padding, 16px Bottom Margin) */
.sidebar-logo-container {
    height: auto !important;
    min-height: 64px !important;
    padding: 14px 14px 12px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
}

/* Sidebar Inner Container (0 10px 12px Padding) */
.sidebar-inner {
    padding: 0 10px 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Sidebar Section Titles (16px Top, 6px Bottom Margin) */
.sidebar-group-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #667892 !important;
    text-transform: uppercase !important;
    margin: 16px 10px 6px 10px !important;
    padding: 0 !important;
}

.sidebar-group-label:first-child {
    margin-top: 0 !important;
}

/* Sidebar Navigation Item Structure */
#agentDashboardTabs .nav-link.sidebar-dark-link {
    color: #D6E2F0 !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 42px !important;
    width: 100% !important;
    margin: 2px 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    transition: all 0.15s ease-in-out !important;
}

#agentDashboardTabs .nav-link.sidebar-dark-link .nav-item-icon,
#agentDashboardTabs .nav-link.sidebar-dark-link i {
    color: #7F91A8 !important;
    font-size: 15px !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0 !important;
    transition: all 0.15s ease-in-out !important;
}

#agentDashboardTabs .nav-link.sidebar-dark-link .nav-item-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#agentDashboardTabs .nav-link.sidebar-dark-link .sidebar-pill-badge,
#agentDashboardTabs .nav-link.sidebar-dark-link .nav-item-badge {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

#agentDashboardTabs .nav-link.sidebar-dark-link:hover:not(.active) {
    color: #FFFFFF !important;
    background-color: #132641 !important;
}

#agentDashboardTabs .nav-link.sidebar-dark-link:hover:not(.active) .nav-item-icon,
#agentDashboardTabs .nav-link.sidebar-dark-link:hover:not(.active) i {
    color: #FFFFFF !important;
}

#agentDashboardTabs .nav-link.sidebar-dark-link.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.20) !important;
    font-weight: 600 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

#agentDashboardTabs .nav-link.sidebar-dark-link.active .nav-item-icon,
#agentDashboardTabs .nav-link.sidebar-dark-link.active i {
    color: #FFFFFF !important;
}

/* Sidebar Badges */
.sidebar-pill-badge {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 6px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* Sidebar Bottom User Profile & Logout Box (10px Margins) */
.sidebar-profile-block {
    margin: 10px !important;
    width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 10px !important;
}

.sidebar-logout-btn {
    height: 38px !important;
    margin: 4px 10px 4px 10px !important;
    width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    color: #CBD5E1 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.sidebar-logout-btn:hover {
    background: rgba(244, 63, 94, 0.10) !important;
    color: #FB7185 !important;
}

.sidebar-website-btn {
    height: 38px !important;
    margin: 2px 10px 10px 10px !important;
    width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    color: #94A3B8 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.sidebar-website-btn:hover {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #60A5FA !important;
}

/* Header Right Actions Group (10px Gap) */
.header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* Theme Toggle Button (36px × 36px) */
.saas-theme-toggle {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border: 1px solid #E3E9F2 !important;
    color: #64748B !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.saas-theme-toggle:hover {
    border-color: var(--admin-primary) !important;
    color: var(--admin-primary) !important;
}

/* Header Notification Icon Button (36px × 36px) */
.saas-icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    border: 1px solid #E3E9F2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748B !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}

.saas-icon-btn:hover {
    color: var(--admin-primary) !important;
    border-color: var(--admin-primary) !important;
}

/* User Menu Group (34px Avatar + Name, 8px Gap) */
.user-menu {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 4px !important;
    flex-shrink: 0 !important;
}

.user-menu-avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.user-menu-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--admin-text) !important;
}

/* Compact Welcome Hero Banner */
.saas-hero-card {
    background: var(--admin-primary-soft) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    min-height: 85px !important;
    box-shadow: var(--admin-card-shadow) !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.saas-hero-card h3 {
    color: var(--admin-text) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

.saas-hero-card p {
    color: var(--admin-muted) !important;
    font-size: 13.5px !important;
}

/* Quick Action Buttons Grid (6 Columns Desktop, Height 48-52px) */
.saas-quick-actions-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}

.qa-card {
    border-radius: 10px !important;
    padding: 8px 12px !important;
    height: 50px !important;
    transition: all 0.18s ease-in-out !important;
    border: 1px solid var(--admin-border) !important;
    background: var(--admin-surface) !important;
    cursor: pointer !important;
    user-select: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    width: 100% !important;
}

.qa-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--admin-card-shadow) !important;
}

/* KPI Cards Grid (4 Columns Desktop, Height ~110px) */
.saas-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
}

.saas-kpi-card {
    background-color: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: var(--admin-card-shadow) !important;
    transition: all 0.2s ease !important;
    height: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    cursor: pointer !important;
}

.saas-kpi-card:hover {
    border-color: var(--admin-primary) !important;
}

.saas-kpi-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
}

/* 2-Column Chart Row Grid (Lead Stage + Financial Chart) */
.saas-analytics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch !important;
    width: 100% !important;
}

.saas-chart-card {
    background-color: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    box-shadow: var(--admin-card-shadow) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Donut Chart & Aligned Legend Grid */
.lead-stage-content {
    display: grid !important;
    grid-template-columns: minmax(190px, 0.85fr) minmax(230px, 1.15fr) !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 8px 0 !important;
}

.lead-donut-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    margin-inline: auto !important;
}

.lead-donut-center {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    pointer-events: none !important;
    line-height: 1 !important;
}

.lead-donut-center .count {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--admin-text) !important;
}

.lead-donut-center .label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--admin-muted) !important;
    margin-top: 3px !important;
}

.lead-legend-grid {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
}

.lead-legend-row {
    display: grid !important;
    grid-template-columns: 10px minmax(80px, 1fr) 36px 50px !important;
    align-items: center !important;
    font-size: 12px !important;
    gap: 8px !important;
}

.lead-legend-row .dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
}

.lead-legend-row .name {
    color: var(--admin-text) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.lead-legend-row .count-val {
    color: var(--admin-text) !important;
    font-weight: 600 !important;
    text-align: right !important;
}

.lead-legend-row .pct-val {
    color: var(--admin-muted) !important;
    font-weight: 500 !important;
    text-align: right !important;
}

/* Status Cards Grid (5 Columns Desktop) */
.saas-status-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}

.saas-status-card {
    border-radius: 12px !important;
    padding: 14px !important;
    border: 1px solid var(--admin-border) !important;
    background: var(--admin-surface) !important;
    transition: all 0.18s ease !important;
    box-shadow: var(--admin-card-shadow) !important;
}

/* Today Panels (2-Column Grid) */
.saas-today-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.saas-panel-card {
    background-color: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--admin-card-shadow) !important;
    min-height: 180px !important;
}

/* Cards & Theme System Overrides */
.saas-app-shell[data-theme="dark"] .card,
.saas-app-shell[data-theme="dark"] .modal-content {
    background-color: var(--admin-surface) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
}

.saas-app-shell[data-theme="dark"] .card-header,
.saas-app-shell[data-theme="dark"] .modal-header,
.saas-app-shell[data-theme="dark"] .modal-footer {
    background-color: var(--admin-surface-secondary) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
}

.saas-app-shell[data-theme="dark"] .table {
    color: var(--admin-text) !important;
}

.saas-app-shell[data-theme="dark"] .table thead {
    background-color: var(--admin-surface-secondary) !important;
    color: var(--admin-muted) !important;
}

.saas-app-shell[data-theme="dark"] .table td,
.saas-app-shell[data-theme="dark"] .table th {
    border-color: var(--admin-border) !important;
}

.saas-app-shell[data-theme="dark"] .text-dark {
    color: var(--admin-text) !important;
}

.saas-app-shell[data-theme="dark"] .text-secondary,
.saas-app-shell[data-theme="dark"] .text-muted {
    color: var(--admin-muted) !important;
}

.saas-app-shell[data-theme="dark"] .bg-white {
    background-color: var(--admin-surface) !important;
}

.saas-app-shell[data-theme="dark"] .bg-light {
    background-color: var(--admin-surface-secondary) !important;
}

/* Compact Admin Footer Base Styling */
.saas-dashboard-footer {
    padding: 16px 24px !important;
    border-top: 1px solid var(--admin-border) !important;
    background-color: var(--admin-topbar-bg) !important;
    margin-top: auto !important;
    height: 54px !important;
}

.qa-card:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.qa-card-blue { background: #EEF3FF !important; border-color: #DCE6FF !important; }
.qa-card-green { background: #ECFDF5 !important; border-color: #C6F6E5 !important; }
.qa-card-purple { background: #F4EEFF !important; border-color: #E5D8FF !important; }
.qa-card-teal { background: #ECFBFE !important; border-color: #C5F2F8 !important; }
.qa-card-orange { background: #FFF7E8 !important; border-color: #FDE9BA !important; }
.qa-card-red { background: #FFF1F3 !important; border-color: #FFD6DE !important; }

.qa-icon-box {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 16px !important;
}

.qa-icon-blue { background: #DCE6FF !important; color: #3563E9 !important; }
.qa-icon-green { background: #C6F6E5 !important; color: #10B981 !important; }
.qa-icon-purple { background: #E5D8FF !important; color: #7C3AED !important; }
.qa-icon-teal { background: #C5F2F8 !important; color: #06B6D4 !important; }
.qa-icon-orange { background: #FDE9BA !important; color: #F59E0B !important; }
.qa-icon-red { background: #FFD6DE !important; color: #F43F5E !important; }

/* Quick Action Titles & Subtitles Light Mode */
.qa-title { font-size: 13.5px !important; }
.qa-subtitle { font-size: 11px !important; color: #64748B !important; }
.qa-card-blue .qa-title { color: #3563E9 !important; }
.qa-card-green .qa-title { color: #10B981 !important; }
.qa-card-purple .qa-title { color: #7C3AED !important; }
.qa-card-teal .qa-title { color: #06B6D4 !important; }
.qa-card-orange .qa-title { color: #F59E0B !important; }
.qa-card-red .qa-title { color: #F43F5E !important; }

/* Main KPI Cards Grid (4 Columns Desktop) - Theme-Aware & Overflow-Safe */
.saas-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.saas-kpi-card {
    background: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    min-height: 112px !important;
    height: auto !important;
    overflow: visible !important;
    box-shadow: var(--admin-card-shadow) !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.saas-kpi-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-2px) !important;
    border-color: var(--admin-primary) !important;
}

.saas-kpi-card .kpi-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--admin-muted) !important;
}

.saas-kpi-card .kpi-number {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-top: 6px !important;
    padding-bottom: 2px !important;
    color: var(--admin-text) !important;
}

.saas-kpi-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
}

.kpi-icon-blue { background: #EEF3FF !important; color: #3563E9 !important; }
.kpi-icon-green { background: #ECFDF5 !important; color: #10B981 !important; }
.kpi-icon-purple { background: #F4EEFF !important; color: #7C3AED !important; }
.kpi-icon-red { background: #FFF1F3 !important; color: #F43F5E !important; }

/* Analytics Row Grid (2 Columns Desktop 50/50) */
.saas-analytics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.saas-chart-card {
    background: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 14px !important;
    padding: 20px 22px !important;
    box-shadow: var(--admin-card-shadow) !important;
    width: 100% !important;
}

.chart-header-border {
    border-color: var(--admin-border) !important;
}

.lead-badge-pipeline {
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-size: 11px !important;
}

.fin-chart-legend {
    font-size: 12px !important;
    color: var(--admin-muted) !important;
}

.chart-doughnut-wrapper {
    position: relative;
    height: 220px;
}

.chart-doughnut-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

/* Secondary 5 Mini Status Cards Grid (5 Columns Desktop) */
.saas-status-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
}

.saas-mini-status-card {
    border-radius: 14px !important;
    border: 1px solid var(--admin-border) !important;
    padding: 14px 16px !important;
    min-height: 92px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.18s ease !important;
    width: 100% !important;
}

.saas-mini-status-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
}

/* Light mode status cards */
.status-card-green { background: #ECFDF5 !important; border-color: #C6F6E5 !important; }
.status-card-green .status-title { color: #065F46 !important; font-size: 12px !important; }
.status-card-green .status-value { color: #065F46 !important; font-size: 22px !important; }
.status-card-green .status-icon { background: #C6F6E5 !important; color: #059669 !important; }

.status-card-orange { background: #FFF7E8 !important; border-color: #FDE9BA !important; }
.status-card-orange .status-title { color: #92400E !important; font-size: 12px !important; }
.status-card-orange .status-value { color: #92400E !important; font-size: 22px !important; }
.status-card-orange .status-icon { background: #FDE9BA !important; color: #D97706 !important; }

.status-card-purple { background: #F4EEFF !important; border-color: #E6D9FF !important; }
.status-card-purple .status-title { color: #5B21B6 !important; font-size: 12px !important; }
.status-card-purple .status-value { color: #5B21B6 !important; font-size: 22px !important; }
.status-card-purple .status-icon { background: #E6D9FF !important; color: #7C3AED !important; }

.status-card-red { background: #FFF1F3 !important; border-color: #FFD6DE !important; }
.status-card-red .status-title { color: #9F1239 !important; font-size: 12px !important; }
.status-card-red .status-value { color: #9F1239 !important; font-size: 22px !important; }
.status-card-red .status-icon { background: #FFD6DE !important; color: #E11D48 !important; }

.status-card-blue { background: #EFF6FF !important; border-color: #DCE6FF !important; }
.status-card-blue .status-title { color: #1E40AF !important; font-size: 12px !important; }
.status-card-blue .status-value { color: #1E40AF !important; font-size: 20px !important; }
.status-card-blue .status-icon { background: #DCE6FF !important; color: #3563E9 !important; }

/* Today Panels Grid (2 Columns Desktop 50/50) */
.saas-today-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.saas-panel-card {
    background: var(--admin-surface) !important;
    border: 1px solid var(--admin-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--admin-card-shadow) !important;
    overflow: hidden !important;
    width: 100% !important;
}

.saas-panel-card .card-header {
    background: var(--admin-surface) !important;
    border-bottom: 1px solid var(--admin-border) !important;
    padding: 16px 20px !important;
}

.panel-badge-green { background: #ECFDF5 !important; color: #10B981 !important; font-size: 11px !important; }
.panel-badge-blue { background: #EEF3FF !important; color: #3563E9 !important; font-size: 11px !important; }

/* Empty States */
.saas-empty-state {
    padding: 32px 20px !important;
    text-align: center !important;
}

.saas-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #F1F5F9;
    color: #64748B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.saas-empty-title { font-size: 15px !important; color: var(--admin-text) !important; }
.saas-empty-desc { font-size: 13px !important; color: var(--admin-muted) !important; }

/* ═════════════════════════════════════════════════════════════════ */
/* 🌙 EXPLICIT DARK MODE THEME OVERRIDES FOR APPROVED SAAS TARGET  */
/* ═════════════════════════════════════════════════════════════════ */

.saas-app-shell[data-theme="dark"] .saas-topbar {
    background-color: #09172A !important;
    border-bottom: 1px solid #1D3048 !important;
}

.saas-app-shell[data-theme="dark"] .saas-topbar-title {
    color: #8194AB !important;
}

.saas-app-shell[data-theme="dark"] .saas-theme-toggle,
.saas-app-shell[data-theme="dark"] .saas-icon-btn {
    background: #102238 !important;
    border: 1px solid #20344D !important;
    color: #A6B5C7 !important;
}

.saas-app-shell[data-theme="dark"] .saas-theme-toggle:hover,
.saas-app-shell[data-theme="dark"] .saas-icon-btn:hover {
    background: #142943 !important;
    border-color: #4F7CFF !important;
    color: #4F7CFF !important;
}

.saas-app-shell[data-theme="dark"] .saas-hero-card {
    background: linear-gradient(135deg, #10203A 0%, #132443 45%, #0D2940 100%) !important;
    border: 1px solid #20344D !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.saas-app-shell[data-theme="dark"] .saas-hero-card h3 {
    color: #F8FAFC !important;
}

.saas-app-shell[data-theme="dark"] .saas-hero-card p {
    color: #9FB0C3 !important;
}

.saas-app-shell[data-theme="dark"] .section-heading {
    color: #F1F5F9 !important;
}

/* Quick Actions Dark Mode Tinted Surfaces */
.saas-app-shell[data-theme="dark"] .qa-card-blue {
    background: rgba(79, 124, 255, 0.13) !important;
    border: 1px solid rgba(79, 124, 255, 0.24) !important;
}
.saas-app-shell[data-theme="dark"] .qa-card-blue .qa-title { color: #7FA1FF !important; }
.saas-app-shell[data-theme="dark"] .qa-card-blue .qa-subtitle { color: #8FA2B8 !important; }
.saas-app-shell[data-theme="dark"] .qa-card-blue .qa-icon-box { background: rgba(79, 124, 255, 0.22) !important; color: #7FA1FF !important; }

.saas-app-shell[data-theme="dark"] .qa-card-green {
    background: rgba(33, 212, 155, 0.11) !important;
    border: 1px solid rgba(33, 212, 155, 0.22) !important;
}
.saas-app-shell[data-theme="dark"] .qa-card-green .qa-title { color: #3EE0AB !important; }
.saas-app-shell[data-theme="dark"] .qa-card-green .qa-subtitle { color: #8FA2B8 !important; }
.saas-app-shell[data-theme="dark"] .qa-card-green .qa-icon-box { background: rgba(33, 212, 155, 0.20) !important; color: #3EE0AB !important; }

.saas-app-shell[data-theme="dark"] .qa-card-purple {
    background: rgba(155, 114, 255, 0.13) !important;
    border: 1px solid rgba(155, 114, 255, 0.24) !important;
}
.saas-app-shell[data-theme="dark"] .qa-card-purple .qa-title { color: #B397FF !important; }
.saas-app-shell[data-theme="dark"] .qa-card-purple .qa-subtitle { color: #8FA2B8 !important; }
.saas-app-shell[data-theme="dark"] .qa-card-purple .qa-icon-box { background: rgba(155, 114, 255, 0.22) !important; color: #B397FF !important; }

.saas-app-shell[data-theme="dark"] .qa-card-teal {
    background: rgba(44, 199, 232, 0.11) !important;
    border: 1px solid rgba(44, 199, 232, 0.22) !important;
}
.saas-app-shell[data-theme="dark"] .qa-card-teal .qa-title { color: #54D3EC !important; }
.saas-app-shell[data-theme="dark"] .qa-card-teal .qa-subtitle { color: #8FA2B8 !important; }
.saas-app-shell[data-theme="dark"] .qa-card-teal .qa-icon-box { background: rgba(44, 199, 232, 0.20) !important; color: #54D3EC !important; }

.saas-app-shell[data-theme="dark"] .qa-card-orange {
    background: rgba(247, 184, 75, 0.11) !important;
    border: 1px solid rgba(247, 184, 75, 0.22) !important;
}
.saas-app-shell[data-theme="dark"] .qa-card-orange .qa-title { color: #F7C66B !important; }
.saas-app-shell[data-theme="dark"] .qa-card-orange .qa-subtitle { color: #8FA2B8 !important; }
.saas-app-shell[data-theme="dark"] .qa-card-orange .qa-icon-box { background: rgba(247, 184, 75, 0.20) !important; color: #F7C66B !important; }

.saas-app-shell[data-theme="dark"] .qa-card-red {
    background: rgba(255, 92, 120, 0.11) !important;
    border: 1px solid rgba(255, 92, 120, 0.22) !important;
}
.saas-app-shell[data-theme="dark"] .qa-card-red .qa-title { color: #FF8195 !important; }
.saas-app-shell[data-theme="dark"] .qa-card-red .qa-subtitle { color: #8FA2B8 !important; }
.saas-app-shell[data-theme="dark"] .qa-card-red .qa-icon-box { background: rgba(255, 92, 120, 0.20) !important; color: #FF8195 !important; }

/* Dark Mode KPI Cards & Soft Accents */
.saas-app-shell[data-theme="dark"] .saas-kpi-card {
    background: #0D1B2E !important;
    border: 1px solid #20344D !important;
}

.saas-app-shell[data-theme="dark"] .saas-kpi-card .kpi-label {
    color: #9FB0C3 !important;
}

.saas-app-shell[data-theme="dark"] .saas-kpi-card .kpi-number {
    color: #F8FAFC !important;
}

.saas-app-shell[data-theme="dark"] .kpi-card-lead {
    background: linear-gradient(135deg, #0D1B2E 0%, rgba(79, 124, 255, 0.09) 100%) !important;
}

.saas-app-shell[data-theme="dark"] .kpi-card-followup {
    background: linear-gradient(135deg, #0D1B2E 0%, rgba(33, 212, 155, 0.09) 100%) !important;
}

.saas-app-shell[data-theme="dark"] .kpi-card-income {
    background: linear-gradient(135deg, #0D1B2E 0%, rgba(155, 114, 255, 0.09) 100%) !important;
}

.saas-app-shell[data-theme="dark"] .kpi-card-expense {
    background: linear-gradient(135deg, #0D1B2E 0%, rgba(255, 92, 120, 0.09) 100%) !important;
}

.saas-app-shell[data-theme="dark"] .kpi-icon-blue { background: rgba(79, 124, 255, 0.18) !important; color: #7FA1FF !important; }
.saas-app-shell[data-theme="dark"] .kpi-icon-green { background: rgba(33, 212, 155, 0.18) !important; color: #3EE0AB !important; }
.saas-app-shell[data-theme="dark"] .kpi-icon-purple { background: rgba(155, 114, 255, 0.18) !important; color: #B397FF !important; }
.saas-app-shell[data-theme="dark"] .kpi-icon-red { background: rgba(255, 92, 120, 0.18) !important; color: #FF8195 !important; }

/* Dark Mode Charts */
.saas-app-shell[data-theme="dark"] .saas-chart-card {
    background: #0D1B2E !important;
    border: 1px solid #20344D !important;
}

.saas-app-shell[data-theme="dark"] .saas-chart-card .card-title-text {
    color: #F1F5F9 !important;
}

.saas-app-shell[data-theme="dark"] .chart-header-border {
    border-bottom: 1px solid #20344D !important;
}

.saas-app-shell[data-theme="dark"] .lead-badge-pipeline {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #8FA2B8 !important;
    border: 1px solid #20344D !important;
}

.saas-app-shell[data-theme="dark"] .lead-donut-center .count {
    color: #F8FAFC !important;
}

.saas-app-shell[data-theme="dark"] .lead-donut-center .label {
    color: #8FA2B8 !important;
}

.saas-app-shell[data-theme="dark"] .lead-legend-row .name {
    color: #D6E2EE !important;
}

.saas-app-shell[data-theme="dark"] .lead-legend-row .count-val {
    color: #F8FAFC !important;
}

.saas-app-shell[data-theme="dark"] .lead-legend-row .pct-val {
    color: #8FA2B8 !important;
}

.saas-app-shell[data-theme="dark"] .fin-chart-legend {
    color: #A6B5C7 !important;
}

/* Dark Mode Status Cards */
.saas-app-shell[data-theme="dark"] .status-card-green {
    background: rgba(33, 212, 155, 0.09) !important;
    border: 1px solid rgba(33, 212, 155, 0.18) !important;
}
.saas-app-shell[data-theme="dark"] .status-card-green .status-title { color: #66E2BB !important; }
.saas-app-shell[data-theme="dark"] .status-card-green .status-value { color: #F8FAFC !important; }
.saas-app-shell[data-theme="dark"] .status-card-green .status-icon { background: rgba(33, 212, 155, 0.18) !important; color: #3EE0AB !important; }

.saas-app-shell[data-theme="dark"] .status-card-orange {
    background: rgba(247, 184, 75, 0.09) !important;
    border: 1px solid rgba(247, 184, 75, 0.18) !important;
}
.saas-app-shell[data-theme="dark"] .status-card-orange .status-title { color: #F7C66B !important; }
.saas-app-shell[data-theme="dark"] .status-card-orange .status-value { color: #F8FAFC !important; }
.saas-app-shell[data-theme="dark"] .status-card-orange .status-icon { background: rgba(247, 184, 75, 0.18) !important; color: #F7C66B !important; }

.saas-app-shell[data-theme="dark"] .status-card-purple {
    background: rgba(155, 114, 255, 0.10) !important;
    border: 1px solid rgba(155, 114, 255, 0.20) !important;
}
.saas-app-shell[data-theme="dark"] .status-card-purple .status-title { color: #B397FF !important; }
.saas-app-shell[data-theme="dark"] .status-card-purple .status-value { color: #F8FAFC !important; }
.saas-app-shell[data-theme="dark"] .status-card-purple .status-icon { background: rgba(155, 114, 255, 0.20) !important; color: #B397FF !important; }

.saas-app-shell[data-theme="dark"] .status-card-red {
    background: rgba(255, 92, 120, 0.09) !important;
    border: 1px solid rgba(255, 92, 120, 0.18) !important;
}
.saas-app-shell[data-theme="dark"] .status-card-red .status-title { color: #FF8195 !important; }
.saas-app-shell[data-theme="dark"] .status-card-red .status-value { color: #F8FAFC !important; }
.saas-app-shell[data-theme="dark"] .status-card-red .status-icon { background: rgba(255, 92, 120, 0.18) !important; color: #FF8195 !important; }

.saas-app-shell[data-theme="dark"] .status-card-blue {
    background: rgba(79, 124, 255, 0.10) !important;
    border: 1px solid rgba(79, 124, 255, 0.19) !important;
}
.saas-app-shell[data-theme="dark"] .status-card-blue .status-title { color: #7FA1FF !important; }
.saas-app-shell[data-theme="dark"] .status-card-blue .status-value { color: #F8FAFC !important; }
.saas-app-shell[data-theme="dark"] .status-card-blue .status-icon { background: rgba(79, 124, 255, 0.20) !important; color: #7FA1FF !important; }

/* Dark Mode Today Panels & Empty States */
.saas-app-shell[data-theme="dark"] .saas-panel-card {
    background: #0D1B2E !important;
    border: 1px solid #20344D !important;
}

.saas-app-shell[data-theme="dark"] .saas-panel-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid #20344D !important;
}

.saas-app-shell[data-theme="dark"] .saas-panel-card .card-title-text {
    color: #F1F5F9 !important;
}

.saas-app-shell[data-theme="dark"] .panel-badge-green {
    background: rgba(33, 212, 155, 0.12) !important;
    color: #3EE0AB !important;
    border: 1px solid rgba(33, 212, 155, 0.22) !important;
}

.saas-app-shell[data-theme="dark"] .panel-badge-blue {
    background: rgba(79, 124, 255, 0.13) !important;
    color: #7FA1FF !important;
    border: 1px solid rgba(79, 124, 255, 0.24) !important;
}

.saas-app-shell[data-theme="dark"] .saas-panel-card .card-body {
    background: #0D1B2E !important;
}

.saas-app-shell[data-theme="dark"] .saas-empty-state {
    background: #0D1B2E !important;
}

.saas-app-shell[data-theme="dark"] .saas-empty-icon {
    background: #142943 !important;
    color: #7F94AE !important;
}

.saas-app-shell[data-theme="dark"] .saas-empty-title {
    color: #E7EDF5 !important;
}

.saas-app-shell[data-theme="dark"] .saas-empty-desc {
    color: #8FA2B8 !important;
}

/* Dark Mode Footer */
.saas-app-shell[data-theme="dark"] .saas-dashboard-footer {
    background: #09172A !important;
    border-top: 1px solid #20344D !important;
    color: #8FA2B8 !important;
}

.saas-app-shell[data-theme="dark"] .saas-dashboard-footer .saas-footer-brand {
    color: #E2E8F0 !important;
}

.saas-app-shell[data-theme="dark"] .saas-dashboard-footer a {
    color: #93A9C2 !important;
}

.saas-app-shell[data-theme="dark"] .saas-dashboard-footer a:hover {
    color: #7FA1FF !important;
}

.prop-custom-footer .prop-footer-links a:hover {
    color: var(--saas-primary) !important;
}

.prop-custom-footer .prop-footer-bottom {
    border-top-color: var(--saas-border-default) !important;
    color: var(--saas-text-muted) !important;
    font-size: 12px !important;
}

/* Responsive Media Queries */
@media (max-width: 1199px) {
    .saas-header-search {
        max-width: 100% !important;
    }
    .saas-quick-actions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .saas-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .saas-analytics-grid {
        grid-template-columns: 1fr !important;
    }
    .saas-status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .saas-today-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {
    .saas-app-shell {
        flex-direction: column !important;
        padding: 14px !important;
        gap: 16px !important;
    }
    .saas-sidebar {
        width: 100% !important;
        flex: 0 0 100% !important;
        min-width: 0 !important;
    }
    .saas-sidebar .sidebar-dark-card {
        min-height: auto !important;
        position: static !important;
        margin-bottom: 0 !important;
    }
    .saas-main-content {
        width: 100% !important;
    }
    .saas-hero-card {
        padding: 18px 20px !important;
    }
    .saas-quick-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .saas-kpi-grid {
        grid-template-columns: 1fr !important;
    }
    .saas-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .prop-portal-wrapper h1,
    .prop-portal-wrapper .h1-title {
        font-size: 24px !important;
    }
}

/* ==========================================
   LEADS PAGE REDESIGN STYLES
   ========================================== */

/* 1. Header Card */
.leads-header-card {
    padding: 18px 20px;
    background: var(--admin-surface, #FFFFFF);
    border: 1px solid var(--admin-border, #E3E9F2);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.leads-header-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F4EEFF;
    color: #7C3AED;
}

.saas-app-shell[data-theme="dark"] .leads-header-icon-box {
    background: rgba(155, 114, 255, 0.12);
    color: #B397FF;
}

.leads-header-title {
    color: var(--admin-text, #172033);
    font-size: 16px;
    letter-spacing: -0.01em;
}

.leads-header-subtitle {
    color: var(--admin-text-sub, #64748B);
    font-size: 12px;
}

/* Export to Excel Button Redesign */
.btn-leads-export {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    height: 42px;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
    cursor: pointer;
}

.btn-leads-export:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45) !important;
    filter: brightness(1.05);
}

.btn-leads-export:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3) !important;
}

.btn-leads-export i {
    font-size: 16px;
}

/* Leads Filter Select Groups with Integrated Icons */
.leads-filter-controls-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.leads-filter-select-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.leads-filter-select-group .filter-icon-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--admin-text-sub, #64748B);
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}

.leads-filter-select-group select.leads-select-input {
    height: 38px;
    padding-left: 32px !important;
    padding-right: 30px !important;
    min-width: 145px;
    border-radius: 9px;
    border: 1px solid var(--admin-border, #DDE5EF);
    background-color: var(--admin-surface, #FFFFFF);
    color: var(--admin-text, #172033);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%3c64748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px 10px !important;
}

.leads-filter-select-group select.leads-select-input:hover {
    border-color: #CBD5E1;
    background-color: #F8FAFC;
}

.leads-filter-select-group select.leads-select-input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

.saas-app-shell[data-theme="dark"] .leads-filter-select-group select.leads-select-input {
    background-color: #102238;
    border-color: #20344D;
    color: #F8FAFC;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%3c94A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.saas-app-shell[data-theme="dark"] .leads-filter-select-group select.leads-select-input:hover {
    background-color: #162C46;
    border-color: #2A4365;
}

/* Search Group */
.leads-search-group {
    width: 230px;
    height: 38px;
}

.leads-search-group .leads-search-icon {
    background-color: var(--admin-surface, #FFFFFF);
    border-color: var(--admin-border, #DDE5EF);
    color: var(--admin-text-sub, #71849A);
    height: 38px;
    padding-left: 12px;
    padding-right: 6px;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
}

.leads-search-group .leads-search-input {
    height: 38px;
    background-color: var(--admin-surface, #FFFFFF);
    border-color: var(--admin-border, #DDE5EF);
    color: var(--admin-text, #172033);
    font-size: 13px;
    box-shadow: none !important;
}

.leads-search-group .leads-search-input::placeholder {
    color: #71849A;
}

.leads-search-group .leads-search-clear-btn {
    height: 38px;
    background-color: var(--admin-surface, #FFFFFF);
    border-color: var(--admin-border, #DDE5EF);
    color: var(--admin-text-sub, #71849A);
    border-left: none;
}

.leads-search-group .leads-search-submit-btn {
    height: 38px;
    background-color: var(--saas-primary, #2563EB);
    border-color: var(--saas-primary, #2563EB);
    color: #FFFFFF;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    padding: 0 12px;
}

.saas-app-shell[data-theme="dark"] .leads-search-group .leads-search-icon,
.saas-app-shell[data-theme="dark"] .leads-search-group .leads-search-input,
.saas-app-shell[data-theme="dark"] .leads-search-group .leads-search-clear-btn {
    background-color: #102238;
    border-color: #20344D;
    color: #F8FAFC;
}

.saas-app-shell[data-theme="dark"] .leads-search-group .leads-search-input::placeholder {
    color: #71849A;
}

/* Segmented Status Filters */
.leads-filter-segmented {
    display: flex;
    gap: 6px;
}

.leads-filter-btn {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border, #DDE5EF);
    background: transparent;
    color: var(--admin-text-sub, #64748B);
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.leads-filter-btn:hover {
    background: var(--admin-border, #E2E8F0);
    color: var(--admin-text, #172033);
}

.leads-filter-btn.active {
    background: #2563EB !important;
    border-color: #2563EB !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

/* Specific Tinted Inactive States for Filter Buttons in Dark/Light */
.leads-filter-btn.filter-running {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
    color: #D97706;
}
.saas-app-shell[data-theme="dark"] .leads-filter-btn.filter-running {
    color: #F7B84B;
}
.leads-filter-btn.filter-running.active {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #FFFFFF !important;
}

.leads-filter-btn.filter-completed {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.23);
    color: #059669;
}
.saas-app-shell[data-theme="dark"] .leads-filter-btn.filter-completed {
    color: #55E0B2;
}
.leads-filter-btn.filter-completed.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

.leads-filter-btn.filter-closed {
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.24);
    color: #E11D48;
}
.saas-app-shell[data-theme="dark"] .leads-filter-btn.filter-closed {
    color: #FF8498;
}
.leads-filter-btn.filter-closed.active {
    background: #F43F5E !important;
    border-color: #F43F5E !important;
    color: #FFFFFF !important;
}

/* 2. Table Container Card & Table */
.leads-table-card {
    background: #FFFFFF;
    border: 1px solid #E3E9F2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.saas-app-shell[data-theme="dark"] .leads-table-card {
    background: #0D1B2E;
    border: 1px solid #20344D;
}

.leads-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.leads-table thead tr {
    background: #F8FAFC;
    height: 44px;
}

.saas-app-shell[data-theme="dark"] .leads-table thead tr {
    background: #102238;
}

.leads-table thead th {
    background: transparent !important;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    white-space: nowrap;
}

.saas-app-shell[data-theme="dark"] .leads-table thead th {
    color: #8FA2B8;
    border-bottom: 1px solid #20344D;
}

.leads-table tbody tr {
    background: #FFFFFF;
    min-height: 56px;
    transition: background-color 0.15s ease;
}

.leads-table tbody tr:nth-child(even) {
    background: #FAFBFD;
}

.leads-table tbody tr:hover {
    background: #F6F8FC !important;
}

.saas-app-shell[data-theme="dark"] .leads-table tbody tr {
    background: #0D1B2E !important;
}

.saas-app-shell[data-theme="dark"] .leads-table tbody tr:nth-child(even) {
    background: #102035 !important;
}

.saas-app-shell[data-theme="dark"] .leads-table tbody tr:hover {
    background: #122944 !important;
}

.leads-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    vertical-align: middle;
    background: transparent !important;
}

.saas-app-shell[data-theme="dark"] .leads-table tbody td {
    border-bottom: 1px solid #20344D;
}

/* Row Content Styling */
.lead-name-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #172033;
}

.saas-app-shell[data-theme="dark"] .lead-name-text {
    color: #F1F5F9;
}

.lead-mobile-text {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.saas-app-shell[data-theme="dark"] .lead-mobile-text {
    color: #CBD5E1;
}

/* View Details Button */
.btn-view-details {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: #EEF3FF;
    border: 1px solid #DCE6FF;
    color: #3563E9;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn-view-details:hover {
    background: #DCE6FF;
    color: #1D4ED8;
}

.saas-app-shell[data-theme="dark"] .btn-view-details {
    background: rgba(79, 124, 255, 0.10);
    border: 1px solid rgba(79, 124, 255, 0.25);
    color: #8BA7FF;
}

.saas-app-shell[data-theme="dark"] .btn-view-details:hover {
    background: rgba(79, 124, 255, 0.20);
    color: #A5BCFF;
}

.badge-no-data {
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    background: #F1F5F9;
    color: #94A3B8;
}

.saas-app-shell[data-theme="dark"] .badge-no-data {
    background: #102238;
    color: #71849A;
}

/* Date Text */
.lead-date-text {
    font-size: 12px;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .lead-date-text {
    color: #A6B5C7;
}

/* Lead Status Badge / Dropdown */
.lead-status-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}

.lead-status-chip.status-running {
    background: #FFF7E8;
    border-color: #FDE3A7;
    color: #D97706;
}

.saas-app-shell[data-theme="dark"] .lead-status-chip.status-running {
    background: rgba(247, 184, 75, 0.10);
    border-color: rgba(247, 184, 75, 0.24);
    color: #F7C66B;
}

.lead-status-chip.status-completed {
    background: #ECFDF5;
    border-color: #B7F3D4;
    color: #059669;
}

.saas-app-shell[data-theme="dark"] .lead-status-chip.status-completed {
    background: rgba(33, 212, 155, 0.11);
    border-color: rgba(33, 212, 155, 0.23);
    color: #55E0B2;
}

.lead-status-chip.status-closed {
    background: #FFF1F3;
    border-color: #FFD3DB;
    color: #E11D48;
}

.saas-app-shell[data-theme="dark"] .lead-status-chip.status-closed {
    background: rgba(255, 92, 120, 0.10);
    border-color: rgba(255, 92, 120, 0.24);
    color: #FF8498;
}

/* Follow-up Action Button */
.btn-followup-action {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: #FFFFFF;
    border: 1px solid #D8C4D4;
    color: #8B476B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-followup-action:hover {
    background: #FDF4FA;
    color: #6B2D4F;
    border-color: #C6ACC0;
}

.saas-app-shell[data-theme="dark"] .btn-followup-action {
    background: rgba(155, 114, 255, 0.08);
    border: 1px solid rgba(155, 114, 255, 0.24);
    color: #C4A7FF;
}

.saas-app-shell[data-theme="dark"] .btn-followup-action:hover {
    background: rgba(155, 114, 255, 0.16);
    color: #D6C2FF;
}

/* Direct Contact Buttons */
.btn-contact-action {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.15s ease;
}

.btn-whatsapp-action {
    background-color: #16A34A !important;
    border: none !important;
    color: #FFFFFF !important;
}

.btn-whatsapp-action:hover {
    background-color: #15803D !important;
    color: #FFFFFF !important;
}

.btn-call-action {
    background-color: #FFFFFF;
    border: 1px solid #D8C4D4;
    color: #8B476B;
}

.btn-call-action:hover {
    background-color: #FDF4FA;
    color: #6B2D4F;
}

.saas-app-shell[data-theme="dark"] .btn-call-action {
    background-color: #102238;
    border: 1px solid #36506D;
    color: #C2D0DF;
}

.saas-app-shell[data-theme="dark"] .btn-call-action:hover {
    background-color: #162E4C;
    color: #FFFFFF;
}

/* Dark Mode Modal & Empty State Fixes */
.saas-app-shell[data-theme="dark"] .lead-modal-row {
    background-color: #102238 !important;
    border-color: #20344D !important;
}

.saas-app-shell[data-theme="dark"] .lead-modal-val {
    color: #F1F5F9 !important;
}

.saas-app-shell[data-theme="dark"] .lead-modal-footer {
    background-color: #0D1B2E !important;
}

.saas-app-shell[data-theme="dark"] .lead-stage-dropdown-menu {
    background-color: #102238 !important;
    border: 1px solid #20344D !important;
}

.saas-app-shell[data-theme="dark"] .lead-stage-dropdown-menu .dropdown-item {
    color: #CBD5E1 !important;
}

.saas-app-shell[data-theme="dark"] .lead-stage-dropdown-menu .dropdown-item:hover {
    background-color: #162E4C !important;
    color: #FFFFFF !important;
}

.saas-app-shell[data-theme="dark"] .leads-empty-title {
    color: #F8FAFC !important;
}

/* ==========================================
   FOLLOW-UPS PAGE REDESIGN STYLES
   ========================================== */
.followup-header-card {
    padding: 18px 20px;
    background: var(--admin-surface, #FFFFFF);
    border: 1px solid var(--admin-border, #E3E9F2);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.followup-header-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #ECFDF5;
    color: #10B981;
}

.saas-app-shell[data-theme="dark"] .followup-header-icon-box {
    background: rgba(33, 212, 155, 0.11);
    color: #55E0B2;
}

.followup-header-title {
    color: var(--admin-text, #172033);
    font-size: 16px;
}

.followup-header-subtitle {
    color: var(--admin-text-sub, #64748B);
    font-size: 12px;
}

.followup-filter-segmented {
    display: flex;
    gap: 6px;
}

.followup-filter-btn {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border, #DDE5EF);
    background: transparent;
    color: var(--admin-text-sub, #64748B);
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.followup-filter-btn:hover {
    background: var(--admin-border, #E2E8F0);
    color: var(--admin-text, #172033);
}

.followup-filter-btn.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.followup-table-card {
    background: #FFFFFF;
    border: 1px solid #E3E9F2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.saas-app-shell[data-theme="dark"] .followup-table-card {
    background: #0D1B2E;
    border: 1px solid #20344D;
}

.followup-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.followup-table thead tr {
    background: #F8FAFC;
    height: 44px;
}

.saas-app-shell[data-theme="dark"] .followup-table thead tr {
    background: #102238;
}

.followup-table thead th {
    background: transparent !important;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    white-space: nowrap;
}

.saas-app-shell[data-theme="dark"] .followup-table thead th {
    color: #8FA2B8;
    border-bottom: 1px solid #20344D;
}

.followup-table tbody tr {
    background: #FFFFFF;
    min-height: 56px;
    transition: background-color 0.15s ease;
}

.followup-table tbody tr:nth-child(even) {
    background: #FAFBFD;
}

.followup-table tbody tr:hover {
    background: #F6F8FC !important;
}

.saas-app-shell[data-theme="dark"] .followup-table tbody tr {
    background: #0D1B2E !important;
}

.saas-app-shell[data-theme="dark"] .followup-table tbody tr:nth-child(even) {
    background: #102035 !important;
}

.saas-app-shell[data-theme="dark"] .followup-table tbody tr:hover {
    background: #122944 !important;
}

.followup-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    vertical-align: middle;
    background: transparent !important;
}

.saas-app-shell[data-theme="dark"] .followup-table tbody td {
    border-bottom: 1px solid #20344D;
}

.followup-lead-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #172033;
}

.saas-app-shell[data-theme="dark"] .followup-lead-name {
    color: #F1F5F9;
}

.followup-prop-link {
    font-size: 13px;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none !important;
}

.saas-app-shell[data-theme="dark"] .followup-prop-link {
    color: #8BA7FF;
}

.followup-activity-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
}

.saas-app-shell[data-theme="dark"] .followup-activity-badge {
    background: #102238;
    color: #CBD5E1;
    border-color: #20344D;
}

.followup-summary-text {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}

.saas-app-shell[data-theme="dark"] .followup-summary-text {
    color: #E2E8F0;
}

.followup-note-text {
    font-size: 11.5px;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .followup-note-text {
    color: #94A3B8;
}

.followup-user-text {
    font-size: 12.5px;
    font-weight: 500;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .followup-user-text {
    color: #A6B5C7;
}

.followup-status-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.followup-status-badge.status-overdue {
    background: #FFF1F3;
    border-color: #FFD3DB;
    color: #E11D48;
}

.saas-app-shell[data-theme="dark"] .followup-status-badge.status-overdue {
    background: rgba(255, 92, 120, 0.10);
    border-color: rgba(255, 92, 120, 0.24);
    color: #FF8498;
}

.followup-status-badge.status-today {
    background: #FFF7E8;
    border-color: #FDE3A7;
    color: #D97706;
}

.saas-app-shell[data-theme="dark"] .followup-status-badge.status-today {
    background: rgba(247, 184, 75, 0.10);
    border-color: rgba(247, 184, 75, 0.24);
    color: #F7C66B;
}

.followup-status-badge.status-upcoming {
    background: #ECFDF5;
    border-color: #B7F3D4;
    color: #059669;
}

.saas-app-shell[data-theme="dark"] .followup-status-badge.status-upcoming {
    background: rgba(33, 212, 155, 0.11);
    border-color: rgba(33, 212, 155, 0.23);
    color: #55E0B2;
}

.btn-mark-done-action {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #059669;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease;
}

.btn-mark-done-action:hover {
    background: #D1FAE5;
    color: #047857;
    border-color: #6EE7B7;
    transform: translateY(-1px);
}

.saas-app-shell[data-theme="dark"] .btn-mark-done-action {
    background: rgba(33, 212, 155, 0.11);
    border: 1px solid rgba(33, 212, 155, 0.23);
    color: #55E0B2;
}

.saas-app-shell[data-theme="dark"] .btn-mark-done-action:hover {
    background: rgba(33, 212, 155, 0.20);
    color: #72ECD0;
}

.saas-app-shell[data-theme="dark"] .followup-modal-header,
.saas-app-shell[data-theme="dark"] .followup-modal-footer {
    background: #0D1B2E !important;
    color: #F8FAFC !important;
}

.saas-app-shell[data-theme="dark"] .followup-modal-body {
    background: #102238 !important;
    color: #F8FAFC !important;
}

.saas-app-shell[data-theme="dark"] .followup-modal-input {
    background: #0D1B2E !important;
    border-color: #20344D !important;
    color: #F8FAFC !important;
}

.saas-app-shell[data-theme="dark"] .followup-empty-title {
    color: #F8FAFC !important;
}


/* ==========================================
   SITE VISITS PAGE REDESIGN STYLES
   ========================================== */
.sitevisit-header-card {
    padding: 18px 20px;
    background: var(--admin-surface, #FFFFFF);
    border: 1px solid var(--admin-border, #E3E9F2);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.sitevisit-header-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.1);
    color: #06B6D4;
}

.saas-app-shell[data-theme="dark"] .sitevisit-header-icon-box {
    background: rgba(44, 199, 232, 0.12);
    color: #2CC7E8;
}

.sitevisit-header-title {
    color: var(--admin-text, #172033);
    font-size: 16px;
}

.sitevisit-header-subtitle {
    color: var(--admin-text-sub, #64748B);
    font-size: 12px;
}

.btn-sitevisit-add {
    height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: 13px;
    background-color: #06B6D4 !important;
    border: none !important;
    color: #FFFFFF !important;
    transition: all 0.15s ease;
}

.btn-sitevisit-add:hover {
    background-color: #0891B2 !important;
    color: #FFFFFF !important;
}

.sitevisit-table-card {
    background: #FFFFFF;
    border: 1px solid #E3E9F2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.saas-app-shell[data-theme="dark"] .sitevisit-table-card {
    background: #0D1B2E;
    border: 1px solid #20344D;
}

.sitevisit-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.sitevisit-table thead tr {
    background: #F8FAFC;
    height: 44px;
}

.saas-app-shell[data-theme="dark"] .sitevisit-table thead tr {
    background: #102238;
}

.sitevisit-table thead th {
    background: transparent !important;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    white-space: nowrap;
}

.saas-app-shell[data-theme="dark"] .sitevisit-table thead th {
    color: #8FA2B8;
    border-bottom: 1px solid #20344D;
}

.sitevisit-table tbody tr {
    background: #FFFFFF;
    min-height: 56px;
    transition: background-color 0.15s ease;
}

.sitevisit-table tbody tr:nth-child(even) {
    background: #FAFBFD;
}

.sitevisit-table tbody tr:hover {
    background: #F6F8FC !important;
}

.saas-app-shell[data-theme="dark"] .sitevisit-table tbody tr {
    background: #0D1B2E !important;
}

.saas-app-shell[data-theme="dark"] .sitevisit-table tbody tr:nth-child(even) {
    background: #102035 !important;
}

.saas-app-shell[data-theme="dark"] .sitevisit-table tbody tr:hover {
    background: #122944 !important;
}

.sitevisit-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    vertical-align: middle;
    background: transparent !important;
}

.saas-app-shell[data-theme="dark"] .sitevisit-table tbody td {
    border-bottom: 1px solid #20344D;
}

.sitevisit-lead-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #172033;
}

.saas-app-shell[data-theme="dark"] .sitevisit-lead-name {
    color: #F1F5F9;
}

.sitevisit-prop-link {
    font-size: 13px;
    font-weight: 600;
    color: #06B6D4;
    text-decoration: none !important;
}

.saas-app-shell[data-theme="dark"] .sitevisit-prop-link {
    color: #2CC7E8;
}

.sitevisit-type-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.1);
    color: #0891B2;
    border: 1px solid rgba(6, 182, 212, 0.25);
}

.saas-app-shell[data-theme="dark"] .sitevisit-type-badge {
    background: rgba(44, 199, 232, 0.12);
    color: #2CC7E8;
    border-color: rgba(44, 199, 232, 0.25);
}

.sitevisit-summary-text {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}

.saas-app-shell[data-theme="dark"] .sitevisit-summary-text {
    color: #E2E8F0;
}

.sitevisit-note-text {
    font-size: 11.5px;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .sitevisit-note-text {
    color: #94A3B8;
}

.sitevisit-user-text {
    font-size: 12.5px;
    font-weight: 500;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .sitevisit-user-text {
    color: #A6B5C7;
}

.sitevisit-status-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.sitevisit-status-badge.status-overdue {
    background: #FFF1F3;
    border-color: #FFD3DB;
    color: #E11D48;
}

.saas-app-shell[data-theme="dark"] .sitevisit-status-badge.status-overdue {
    background: rgba(255, 92, 120, 0.10);
    border-color: rgba(255, 92, 120, 0.24);
    color: #FF8498;
}

.sitevisit-status-badge.status-today {
    background: #FFF7E8;
    border-color: #FDE3A7;
    color: #D97706;
}

.saas-app-shell[data-theme="dark"] .sitevisit-status-badge.status-today {
    background: rgba(247, 184, 75, 0.10);
    border-color: rgba(247, 184, 75, 0.24);
    color: #F7C66B;
}

.sitevisit-status-badge.status-upcoming {
    background: rgba(6, 182, 212, 0.1);
    border-color: rgba(6, 182, 212, 0.25);
    color: #0891B2;
}

.saas-app-shell[data-theme="dark"] .sitevisit-status-badge.status-upcoming {
    background: rgba(44, 199, 232, 0.12);
    border-color: rgba(44, 199, 232, 0.25);
    color: #2CC7E8;
}

.saas-app-shell[data-theme="dark"] .sitevisit-empty-title {
    color: #F8FAFC !important;
}


/* ==========================================
   PROPERTIES PAGE REDESIGN STYLES
   ========================================== */
.properties-header-card {
    padding: 18px 20px;
    background: var(--admin-surface, #FFFFFF);
    border: 1px solid var(--admin-border, #E3E9F2);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.properties-header-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FEF3C7;
    color: #D97706;
}

.saas-app-shell[data-theme="dark"] .properties-header-icon-box {
    background: rgba(245, 158, 11, 0.12);
    color: #F7B84B;
}

.properties-header-title {
    color: var(--admin-text, #172033);
    font-size: 16px;
}

.properties-header-subtitle {
    color: var(--admin-text-sub, #64748B);
    font-size: 12px;
}

.properties-filter-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--admin-text-sub, #64748B);
}

.properties-select-input,
.leads-select-input {
    min-width: 140px;
    height: 38px;
    border-radius: 8px;
    background-color: var(--admin-surface, #FFFFFF);
    border-color: var(--admin-border, #DDE5EF);
    color: var(--admin-text, #172033);
    font-size: 12.5px;
    font-weight: 500;
}

.saas-app-shell[data-theme="dark"] .properties-select-input,
.saas-app-shell[data-theme="dark"] .leads-select-input {
    background-color: #102238;
    border-color: #20344D;
    color: #F8FAFC;
}

.properties-filter-segmented {
    display: flex;
    gap: 6px;
}

.properties-filter-btn {
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--admin-border, #DDE5EF);
    background: transparent;
    color: var(--admin-text-sub, #64748B);
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.properties-filter-btn:hover {
    background: var(--admin-border, #E2E8F0);
    color: var(--admin-text, #172033);
}

.properties-filter-btn.active {
    background: #2563EB !important;
    border-color: #2563EB !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.properties-filter-btn.filter-verified.active {
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #FFFFFF !important;
}

.properties-filter-btn.filter-pending.active {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #FFFFFF !important;
}

.properties-table-card {
    background: #FFFFFF;
    border: 1px solid #E3E9F2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.saas-app-shell[data-theme="dark"] .properties-table-card {
    background: #0D1B2E;
    border: 1px solid #20344D;
}

.properties-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.properties-table thead tr {
    background: #F8FAFC;
    height: 44px;
}

.saas-app-shell[data-theme="dark"] .properties-table thead tr {
    background: #102238;
}

.properties-table thead th {
    background: transparent !important;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    white-space: nowrap;
}

.saas-app-shell[data-theme="dark"] .properties-table thead th {
    color: #8FA2B8;
    border-bottom: 1px solid #20344D;
}

.properties-table tbody tr {
    background: #FFFFFF;
    min-height: 58px;
    transition: background-color 0.15s ease;
}

.properties-table tbody tr:nth-child(even) {
    background: #FAFBFD;
}

.properties-table tbody tr:hover {
    background: #F6F8FC !important;
}

.saas-app-shell[data-theme="dark"] .properties-table tbody tr {
    background: #0D1B2E !important;
}

.saas-app-shell[data-theme="dark"] .properties-table tbody tr:nth-child(even) {
    background: #102035 !important;
}

.saas-app-shell[data-theme="dark"] .properties-table tbody tr:hover {
    background: #122944 !important;
}

.properties-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    vertical-align: middle;
    background: transparent !important;
}

.saas-app-shell[data-theme="dark"] .properties-table tbody td {
    border-bottom: 1px solid #20344D;
}

.properties-thumb-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    overflow: hidden;
    background: #F1F5F9;
    flex-shrink: 0;
    border: 1px solid #E2E8F4;
}

.saas-app-shell[data-theme="dark"] .properties-thumb-box {
    background: #102238;
    border-color: #20344D;
}

.properties-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.properties-title-link {
    font-size: 13.5px;
    font-weight: 600;
    color: #172033;
    text-decoration: none !important;
    display: block;
    margin-bottom: 2px;
}

.properties-title-link:hover {
    color: #2563EB;
}

.saas-app-shell[data-theme="dark"] .properties-title-link {
    color: #F1F5F9;
}

.saas-app-shell[data-theme="dark"] .properties-title-link:hover {
    color: #8BA7FF;
}

.properties-ref-badge {
    font-size: 11px;
    font-family: monospace;
    background: #F1F5F9;
    color: #64748B;
    border: 1px solid #E2E8F0;
}

.saas-app-shell[data-theme="dark"] .properties-ref-badge {
    background: #102238;
    color: #8FA2B8;
    border-color: #20344D;
}

.properties-type-text {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}

.saas-app-shell[data-theme="dark"] .properties-type-text {
    color: #E2E8F0;
}

.properties-purpose-sub {
    font-size: 11.5px;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .properties-purpose-sub {
    color: #94A3B8;
}

.properties-price-text {
    font-size: 13.5px;
    font-weight: 700;
    color: #10B981;
}

.saas-app-shell[data-theme="dark"] .properties-price-text {
    color: #55E0B2;
}

.properties-city-text {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}

.saas-app-shell[data-theme="dark"] .properties-city-text {
    color: #E2E8F0;
}

.properties-area-sub {
    font-size: 11.5px;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .properties-area-sub {
    color: #94A3B8;
}

.properties-status-chip {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.properties-status-chip.status-verified {
    background: #ECFDF5;
    border-color: #B7F3D4;
    color: #059669;
}

.saas-app-shell[data-theme="dark"] .properties-status-chip.status-verified {
    background: rgba(33, 212, 155, 0.11);
    border-color: rgba(33, 212, 155, 0.23);
    color: #55E0B2;
}

.properties-status-chip.status-pending {
    background: #FFF7E8;
    border-color: #FDE3A7;
    color: #D97706;
}

.saas-app-shell[data-theme="dark"] .properties-status-chip.status-pending {
    background: rgba(247, 184, 75, 0.10);
    border-color: rgba(247, 184, 75, 0.24);
    color: #F7C66B;
}

.properties-status-chip.status-cancelled {
    background: #FFF1F3;
    border-color: #FFD3DB;
    color: #E11D48;
}

.saas-app-shell[data-theme="dark"] .properties-status-chip.status-cancelled {
    background: rgba(255, 92, 120, 0.10);
    border-color: rgba(255, 92, 120, 0.24);
    color: #FF8498;
}

.btn-properties-action {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid var(--admin-border, #DDE5EF);
    background: var(--admin-surface, #FFFFFF);
    color: var(--admin-text, #172033);
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.15s ease;
}

.btn-prop-view {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
}

.btn-prop-view:hover {
    background: #E2E8F0 !important;
    color: #1E293B !important;
    border-color: #94A3B8 !important;
    transform: translateY(-1px);
}

.btn-prop-edit {
    background: #2563EB !important;
    border-color: #2563EB !important;
    color: #FFFFFF !important;
}

.btn-prop-edit:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.btn-prop-share {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #FFFFFF !important;
}

.btn-prop-share:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.btn-properties-register {
    background: #F59E0B;
    color: #FFFFFF;
    border-radius: 999px;
    border: none;
}

.btn-properties-register:hover {
    background: #D97706;
    color: #FFFFFF;
}

.saas-app-shell[data-theme="dark"] .properties-empty-title {
    color: #F8FAFC !important;
}


/* ==========================================
   INVOICES PAGE REDESIGN STYLES
   ========================================== */
.invoice-header-card {
    padding: 18px 20px;
    background: var(--admin-surface, #FFFFFF);
    border: 1px solid var(--admin-border, #E3E9F2);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.invoice-header-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(6, 182, 212, 0.1);
    color: #06B6D4;
}

.saas-app-shell[data-theme="dark"] .invoice-header-icon-box {
    background: rgba(44, 199, 232, 0.12);
    color: #2CC7E8;
}

.invoice-header-title {
    color: var(--admin-text, #172033);
    font-size: 16px;
}

.invoice-header-subtitle {
    color: var(--admin-text-sub, #64748B);
    font-size: 12px;
}

.invoice-count-badge {
    font-size: 12px;
    font-weight: 600;
    font-family: monospace;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.1);
    color: #0891B2;
    border: 1px solid rgba(6, 182, 212, 0.25);
}

.saas-app-shell[data-theme="dark"] .invoice-count-badge {
    background: rgba(44, 199, 232, 0.12);
    color: #2CC7E8;
    border-color: rgba(44, 199, 232, 0.25);
}

.invoice-table-card {
    background: #FFFFFF;
    border: 1px solid #E3E9F2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.saas-app-shell[data-theme="dark"] .invoice-table-card {
    background: #0D1B2E;
    border: 1px solid #20344D;
}

.invoice-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.invoice-table thead tr {
    background: #F8FAFC;
    height: 44px;
}

.saas-app-shell[data-theme="dark"] .invoice-table thead tr {
    background: #102238;
}

.invoice-table thead th {
    background: transparent !important;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    white-space: nowrap;
}

.saas-app-shell[data-theme="dark"] .invoice-table thead th {
    color: #8FA2B8;
    border-bottom: 1px solid #20344D;
}

.invoice-table tbody tr {
    background: #FFFFFF;
    min-height: 56px;
    transition: background-color 0.15s ease;
}

.invoice-table tbody tr:nth-child(even) {
    background: #FAFBFD;
}

.invoice-table tbody tr:hover {
    background: #F6F8FC !important;
}

.saas-app-shell[data-theme="dark"] .invoice-table tbody tr {
    background: #0D1B2E !important;
}

.saas-app-shell[data-theme="dark"] .invoice-table tbody tr:nth-child(even) {
    background: #102035 !important;
}

.saas-app-shell[data-theme="dark"] .invoice-table tbody tr:hover {
    background: #122944 !important;
}

.invoice-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    vertical-align: middle;
    background: transparent !important;
}

.saas-app-shell[data-theme="dark"] .invoice-table tbody td {
    border-bottom: 1px solid #20344D;
}

.invoice-ref-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #172033;
}

.saas-app-shell[data-theme="dark"] .invoice-ref-text {
    color: #F1F5F9;
}

.invoice-date-text {
    font-size: 12.5px;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .invoice-date-text {
    color: #A6B5C7;
}

.invoice-partner-text {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.saas-app-shell[data-theme="dark"] .invoice-partner-text {
    color: #CBD5E1;
}

.invoice-amount-text {
    font-size: 14px;
    font-weight: 700;
    color: #172033;
    font-variant-numeric: tabular-nums;
}

.saas-app-shell[data-theme="dark"] .invoice-amount-text {
    color: #F8FAFC;
}

.invoice-status-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.invoice-status-badge.status-paid {
    background: #ECFDF5;
    border-color: #B7F3D4;
    color: #059669;
}

.saas-app-shell[data-theme="dark"] .invoice-status-badge.status-paid {
    background: rgba(33, 212, 155, 0.11);
    border-color: rgba(33, 212, 155, 0.23);
    color: #55E0B2;
}

.invoice-status-badge.status-pending {
    background: #FFF7E8;
    border-color: #FDE3A7;
    color: #D97706;
}

.saas-app-shell[data-theme="dark"] .invoice-status-badge.status-pending {
    background: rgba(247, 184, 75, 0.10);
    border-color: rgba(247, 184, 75, 0.24);
    color: #F7C66B;
}

.btn-invoice-view {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: #EEF3FF;
    border: 1px solid #DCE6FF;
    color: #3563E9;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.btn-invoice-view:hover {
    background: #DCE6FF;
    color: #1D4ED8;
}

.saas-app-shell[data-theme="dark"] .btn-invoice-view {
    background: rgba(79, 124, 255, 0.10);
    border: 1px solid rgba(79, 124, 255, 0.25);
    color: #8BA7FF;
}

.saas-app-shell[data-theme="dark"] .invoice-empty-title {
    color: #F8FAFC !important;
}


/* ==========================================
   EXPENSES PAGE REDESIGN STYLES
   ========================================== */
.expense-header-card {
    padding: 18px 20px;
    background: var(--admin-surface, #FFFFFF);
    border: 1px solid var(--admin-border, #E3E9F2);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.expense-header-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FFE4E6;
    color: #F43F5E;
}

.saas-app-shell[data-theme="dark"] .expense-header-icon-box {
    background: rgba(244, 63, 94, 0.12);
    color: #FF5C78;
}

.expense-header-title {
    color: var(--admin-text, #172033);
    font-size: 16px;
}

.expense-header-subtitle {
    color: var(--admin-text-sub, #64748B);
    font-size: 12px;
}

.expense-count-badge {
    font-size: 12px;
    font-weight: 600;
    font-family: monospace;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(244, 63, 94, 0.1);
    color: #E11D48;
    border: 1px solid rgba(244, 63, 94, 0.25);
}

.saas-app-shell[data-theme="dark"] .expense-count-badge {
    background: rgba(255, 92, 120, 0.12);
    color: #FF8498;
    border-color: rgba(255, 92, 120, 0.25);
}

.expense-table-card {
    background: #FFFFFF;
    border: 1px solid #E3E9F2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.saas-app-shell[data-theme="dark"] .expense-table-card {
    background: #0D1B2E;
    border: 1px solid #20344D;
}

.expense-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.expense-table thead tr {
    background: #F8FAFC;
    height: 44px;
}

.saas-app-shell[data-theme="dark"] .expense-table thead tr {
    background: #102238;
}

.expense-table thead th {
    background: transparent !important;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    white-space: nowrap;
}

.saas-app-shell[data-theme="dark"] .expense-table thead th {
    color: #8FA2B8;
    border-bottom: 1px solid #20344D;
}

.expense-table tbody tr {
    background: #FFFFFF;
    min-height: 56px;
    transition: background-color 0.15s ease;
}

.expense-table tbody tr:nth-child(even) {
    background: #FAFBFD;
}

.expense-table tbody tr:hover {
    background: #F6F8FC !important;
}

.saas-app-shell[data-theme="dark"] .expense-table tbody tr {
    background: #0D1B2E !important;
}

.saas-app-shell[data-theme="dark"] .expense-table tbody tr:nth-child(even) {
    background: #102035 !important;
}

.saas-app-shell[data-theme="dark"] .expense-table tbody tr:hover {
    background: #122944 !important;
}

.expense-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #E8EDF4;
    vertical-align: middle;
    background: transparent !important;
}

.saas-app-shell[data-theme="dark"] .expense-table tbody td {
    border-bottom: 1px solid #20344D;
}

.expense-ref-text {
    font-size: 13.5px;
    font-weight: 600;
    color: #172033;
}

.expense-ref-text i {
    color: #F43F5E;
}

.saas-app-shell[data-theme="dark"] .expense-ref-text {
    color: #F1F5F9;
}

.saas-app-shell[data-theme="dark"] .expense-ref-text i {
    color: #FF5C78;
}

.expense-date-text {
    font-size: 12.5px;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .expense-date-text {
    color: #A6B5C7;
}

.expense-category-text {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

.saas-app-shell[data-theme="dark"] .expense-category-text {
    color: #CBD5E1;
}

.expense-amount-text {
    font-size: 14px;
    font-weight: 700;
    color: #E11D48;
    font-variant-numeric: tabular-nums;
}

.saas-app-shell[data-theme="dark"] .expense-amount-text {
    color: #FF8498;
}

.expense-status-badge {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.expense-status-badge.status-approved {
    background: #ECFDF5;
    border-color: #B7F3D4;
    color: #059669;
}

.saas-app-shell[data-theme="dark"] .expense-status-badge.status-approved {
    background: rgba(33, 212, 155, 0.11);
    border-color: rgba(33, 212, 155, 0.23);
    color: #55E0B2;
}

.expense-status-badge.status-draft {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .expense-status-badge.status-draft {
    background: #102238;
    border-color: #20344D;
    color: #94A3B8;
}

.saas-app-shell[data-theme="dark"] .expense-empty-title {
    color: #F8FAFC !important;
}


/* ==========================================
   SETTINGS PAGE REDESIGN STYLES
   ========================================== */
.setting-header-card {
    padding: 18px 20px;
    background: var(--admin-surface, #FFFFFF);
    border: 1px solid var(--admin-border, #E3E9F2);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.setting-header-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F1F5F9;
    color: #475569;
}

.saas-app-shell[data-theme="dark"] .setting-header-icon-box {
    background: #102238;
    color: #94A3B8;
}

.setting-header-title {
    color: var(--admin-text, #172033);
    font-size: 16px;
}

.setting-header-subtitle {
    color: var(--admin-text-sub, #64748B);
    font-size: 12px;
}

.setting-content-card {
    background: var(--admin-surface, #FFFFFF);
    border: 1px solid var(--admin-border, #E3E9F2);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.saas-app-shell[data-theme="dark"] .setting-content-card {
    background: #0D1B2E;
    border-color: #20344D;
}

.setting-card-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.saas-app-shell[data-theme="dark"] .setting-card-box {
    background: #102238;
    border-color: #20344D;
}

.setting-avatar-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EEF3FF;
    color: #2563EB;
}

.saas-app-shell[data-theme="dark"] .setting-avatar-circle {
    background: rgba(79, 124, 255, 0.15);
    color: #8BA7FF;
}

.setting-box-title {
    font-size: 15px;
    color: var(--admin-text, #172033);
}

.saas-app-shell[data-theme="dark"] .setting-box-title {
    color: #F8FAFC;
}

.setting-role-badge {
    font-size: 11px;
    font-weight: 600;
    background: #EEF3FF;
    color: #2563EB;
    border: 1px solid #DCE6FF;
    border-radius: 999px;
}

.saas-app-shell[data-theme="dark"] .setting-role-badge {
    background: rgba(79, 124, 255, 0.15);
    color: #8BA7FF;
    border-color: rgba(79, 124, 255, 0.3);
}

.setting-info-row {
    border-color: #E2E8F0 !important;
}

.saas-app-shell[data-theme="dark"] .setting-info-row {
    border-color: #20344D !important;
}

.setting-info-label {
    font-size: 13px;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .setting-info-label {
    color: #94A3B8;
}

.setting-info-val {
    font-size: 13px;
    font-weight: 600;
    color: #172033;
}

.saas-app-shell[data-theme="dark"] .setting-info-val {
    color: #F8FAFC;
}

.setting-box-sub {
    font-size: 12.5px;
    color: #64748B;
}

.saas-app-shell[data-theme="dark"] .setting-box-sub {
    color: #94A3B8;
}

.setting-action-btn {
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.btn-setting-edit {
    background: #FFFFFF;
    border: 1px solid #DDE5EF;
    color: #172033;
}

.btn-setting-edit:hover {
    background: #F1F5F9;
    color: #172033;
}

.saas-app-shell[data-theme="dark"] .btn-setting-edit {
    background: #0D1B2E;
    border-color: #20344D;
    color: #F8FAFC;
}

.saas-app-shell[data-theme="dark"] .btn-setting-edit:hover {
    background: #142943;
}

.btn-setting-register {
    background: #2563EB;
    border: none;
    color: #FFFFFF;
}

.btn-setting-register:hover {
    background: #1D4ED8;
    color: #FFFFFF;
}

.btn-setting-logout {
    background: #FFFFFF;
    border: 1px solid #FFD3DB;
    color: #E11D48;
}

.btn-setting-logout:hover {
    background: #FFF1F3;
    color: #BE123C;
}

.saas-app-shell[data-theme="dark"] .btn-setting-logout {
    background: rgba(255, 92, 120, 0.1);
    border-color: rgba(255, 92, 120, 0.25);
    color: #FF8498;
}

.saas-app-shell[data-theme="dark"] .btn-setting-logout:hover {
    background: rgba(255, 92, 120, 0.2);
}