/* ==========================================================================
   MANAGER HUSAY - SANDBOX DASHBOARD STYLES
   Isolated styles for mh-pro@gmail.com sandbox testing
   ========================================================================== */

/* ── Top Mode Switcher Bar (Light Theme & Cohesive) ── */
.sandbox-mode-banner {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 18px;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 12px;
    z-index: 100;
}

.sandbox-mode-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sandbox-badge {
    background: #fff7ed;
    color: #e87147;
    border: 1px solid #fed7aa;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sandbox-mode-desc {
    font-size: 13px;
    color: #64748b;
}

.sandbox-mode-desc strong {
    color: #0f172a;
    font-weight: 600;
}

.sandbox-mode-pills {
    display: flex;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    padding: 3px;
    gap: 3px;
}

.mode-pill-btn {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mode-pill-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.7);
}

.mode-pill-btn.active[data-mode="looking"] {
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

.mode-pill-btn.active[data-mode="manage"] {
    background: #ffffff;
    color: #059669;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

.mode-pill-btn.active[data-mode="manager"] {
    background: #e87147;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(232, 113, 71, 0.35);
    font-weight: 700;
}

/* ── Mode Explanation Strip ── */
.mode-explanation-strip {
    margin: 0 0 20px 0;
    padding: 12px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.25s ease;
}

.mode-explanation-strip.mode-looking {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.mode-explanation-strip.mode-manage {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.mode-explanation-strip.mode-manager {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.mode-explanation-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
}

.mode-explanation-title strong {
    font-weight: 700;
}

.mode-explanation-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mode-explanation-hint {
    font-size: 12.5px;
    opacity: 0.85;
}

/* ── Sidebar Plan Tag ── */
#sidebarPlanTag {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    transition: all 0.2s;
}

/* ── Human Manager Card (Sidebar & Dashboard) ── */
.manager-widget-card {
    background: #ffffff;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 14px;
    margin: 12px 14px 16px;
    box-shadow: 0 2px 10px rgba(232, 113, 71, 0.08);
    position: relative;
    overflow: hidden;
}

.manager-widget-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #e87147, #f59e0b);
}

.manager-widget-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.manager-avatar-wrapper {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.manager-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.manager-status-dot {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 9px;
    height: 9px;
    background: #10b981;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.manager-details h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.manager-verified-check {
    color: #e87147;
    display: inline-flex;
}

.manager-details p {
    margin: 2px 0 0;
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.manager-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
}

.btn-manager-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-manager-action.primary {
    background: #403272 !important;
    background-color: #403272 !important;
    border: 1px solid #403272 !important;
    color: #ffffff !important;
}

.btn-manager-action.primary:hover {
    background: #312558 !important;
    background-color: #312558 !important;
    border-color: #312558 !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
}

.btn-manager-action.primary:focus,
.btn-manager-action.primary:focus:not(:focus-visible) {
    background: #403272 !important;
    background-color: #403272 !important;
    border-color: #403272 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(64, 50, 114, 0.25) !important;
    outline: none !important;
}

.btn-manager-action.secondary {
    background: #f1f5f9;
    color: #334155 !important;
}

.btn-manager-action.secondary:hover {
    background: #e2e8f0;
    color: #0f172a !important;
}

/* ── Backoffice Vault & Checklist ── */
.vault-container {
    padding: 10px 0;
    max-width: 100%;
}

.vault-hero {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.vault-hero-info h2 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.vault-hero-info p {
    color: #64748b;
    font-size: 13.5px;
    margin: 0;
    max-width: 580px;
    line-height: 1.5;
}

.vault-security-badge {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.vault-progress-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
    min-width: 200px;
    text-align: right;
}

.vault-progress-title {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.vault-progress-score {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
}

.vault-progress-score span {
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
}

.vault-progress-bar-bg {
    width: 100%;
    height: 5px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
}

.vault-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* ── Vault Items List ── */
.vault-items-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.vault-items-header {
    padding: 16px 22px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vault-items-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.vault-item-row {
    padding: 18px 22px;
    border-bottom: 1px solid #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease;
}

.vault-item-row:hover {
    background: #fbfcfe;
}

.vault-item-row:last-child {
    border-bottom: none;
}

.vault-item-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.vault-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    flex-shrink: 0;
}

.vault-item-text h4 {
    margin: 0 0 3px 0;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.vault-item-text p {
    margin: 0 0 5px 0;
    font-size: 12.5px;
    color: #64748b;
}

.vault-masked-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    color: #334155;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.vault-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vault-badge-status {
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vault-badge-status.verified {
    background: #ecfdf5;
    color: #059669;
}

.vault-badge-status.pending {
    background: #fffbeb;
    color: #d97706;
}

.btn-vault-action {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-vault-action:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    color: #0f172a;
}

/* ── Projects Tab (Status, Budgets, Meetings, CE) ── */
.projects-subnav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 1px solid #DCD7EC;
    padding-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
}

.projects-subtabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.project-subtab-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #645A7D;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.project-subtab-btn:hover {
    color: #403272;
    background: #F0EEF4;
}

.project-subtab-btn:focus,
.project-subtab-btn:focus:not(:focus-visible),
#projects .project-subtab-btn:focus,
#projects .project-subtab-btn:focus:not(:focus-visible) {
    background: transparent !important;
    background-color: transparent !important;
    color: #645A7D !important;
    outline: none !important;
    box-shadow: none !important;
}

.project-subtab-btn:hover:focus,
#projects .project-subtab-btn:hover:focus {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    color: #403272 !important;
}

.project-subtab-btn.active,
.project-subtab-btn.active:focus,
.project-subtab-btn.active:focus:not(:focus-visible),
#projects .project-subtab-btn.active,
#projects .project-subtab-btn.active:focus,
#projects .project-subtab-btn.active:focus:not(:focus-visible) {
    background: #403272 !important;
    background-color: #403272 !important;
    border-color: #403272 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.25) !important;
    outline: none !important;
}

.project-tags-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tag-filter-pill {
    background: #F0EEF4;
    border: 1px solid #DCD7EC;
    color: #403272;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tag-filter-pill:hover {
    background: #DCD7EC;
    color: #403272;
}

.tag-filter-pill:focus,
.tag-filter-pill:focus:not(:focus-visible),
#projects .tag-filter-pill:focus,
#projects .tag-filter-pill:focus:not(:focus-visible) {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    border-color: #DCD7EC !important;
    color: #403272 !important;
    outline: none !important;
}

.tag-filter-pill.active,
.tag-filter-pill.active:focus,
.tag-filter-pill.active:focus:not(:focus-visible),
#projects .tag-filter-pill.active,
#projects .tag-filter-pill.active:focus,
#projects .tag-filter-pill.active:focus:not(:focus-visible) {
    background: #403272 !important;
    background-color: #403272 !important;
    border-color: #403272 !important;
    color: #FFFFFF !important;
    outline: none !important;
}

/* ── Project Deliverables Cards ── */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.project-card {
    background: #ffffff;
    border: 1px solid #DCD7EC;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(64, 50, 114, 0.04);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(64, 50, 114, 0.1);
    border-color: #b7add4;
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.project-tag-badge {
    background: #F0EEF4;
    color: #403272;
    border: 1px solid #DCD7EC;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.project-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
}

.project-status-badge.in-progress {
    background: #dbeafe;
    color: #1e40af;
}

.project-status-badge.completed {
    background: #dcfce7;
    color: #166534;
}

.project-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #403272;
    margin: 0 0 6px 0;
}

.project-client-name {
    font-size: 12.5px;
    color: #645A7D;
    margin: 0 0 12px 0;
}

.project-meta-row {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
}

.project-meta-budget {
    font-weight: 700;
    color: #0f172a;
}

/* ── Modal for Secure Vault ── */
.vault-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.vault-modal-overlay.active {
    display: flex;
}

.vault-modal-card {
    background: #ffffff;
    border-radius: 14px;
    width: 90%;
    max-width: 500px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: modalPop 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.vault-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.vault-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-close-modal {
    background: none;
    border: none;
    font-size: 20px;
    color: #94a3b8;
    cursor: pointer;
}

.vault-modal-body {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.5;
}

.vault-credential-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin: 14px 0;
}

.vault-field-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #edf2f7;
}

.vault-field-row:last-child {
    border-bottom: none;
}

.vault-field-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.vault-field-val {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-toggle-mask {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 2px;
}

/* ==========================================================================
   UPGRADE MODAL & SIMULATION FLOW STYLES (Aligned with Image 1 & Image 2)
   ========================================================================== */

/* ── Modal Overlay & Backdrop ── */
.mh-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mh-modal-container {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 32px 36px 28px;
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

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

.mh-modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.mh-modal-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* ── View 1: 3-Tier Comparison Layout ── */
.upgrade-modal-header {
    text-align: left;
    margin-bottom: 24px;
}

.upgrade-modal-badge {
    font-size: 11px;
    font-weight: 800;
    color: #ea580c;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.upgrade-modal-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.upgrade-modal-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* ── 3-Tier Grid ── */
.upgrade-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .upgrade-tiers-grid {
        grid-template-columns: 1fr;
    }
}

.tier-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.2s ease;
}

.tier-card.popular-highlight {
    border: 2px solid #ea580c;
    box-shadow: 0 10px 25px -5px rgba(234, 88, 12, 0.12);
}

.popular-ribbon {
    position: absolute;
    top: -12px;
    right: 24px;
    background: #ea580c;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 3px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35);
}

.tier-card.purple-highlight {
    border: 1px solid #e2e8f0;
}

.tier-card.purple-highlight:hover {
    border-color: #a855f7;
    box-shadow: 0 10px 25px -5px rgba(168, 85, 247, 0.12);
}

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

.tier-mode-label {
    font-size: 11.5px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tier-mode-label.orange-accent {
    color: #ea580c;
}

.tier-mode-label.purple-accent {
    color: #7c3aed;
}

.tier-price-pill {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

.tier-price-tag {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: baseline;
    gap: 1px;
}

.tier-price-tag.purple-price {
    color: #0f172a;
}

.tier-price-tag .currency {
    font-size: 16px;
    font-weight: 700;
}

.tier-price-tag .amount {
    font-size: 22px;
    font-weight: 800;
}

.tier-price-tag .period {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    margin-left: 2px;
}

.tier-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 14px;
}

.tier-price-amount {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
}

.tier-price-period {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

.tier-title {
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
    line-height: 1.25;
}

.tier-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 16px 0;
    min-height: 36px;
}

.tier-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.tier-features-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #334155;
    margin-bottom: 10px;
}

.tier-features-list li.feature-excluded {
    color: #94a3b8;
}

.feat-icon {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

.feat-icon.check-green {
    color: #10b981;
}

.feat-icon.check-orange {
    color: #ea580c;
}

.feat-icon.check-purple {
    color: #7c3aed;
}

.feat-icon.preview-orange {
    color: #f59e0b;
    font-size: 12px;
}

.feat-icon.cross-muted {
    color: #cbd5e1;
}

.tier-footer-action {
    margin-top: auto;
}

.tier-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
    border: none;
}

.tier-btn-secondary {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1e293b;
}

.tier-btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.tier-btn-orange {
    background: #ea580c;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3);
}

.tier-btn-orange:hover {
    background: #c2410c;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4);
}

.tier-btn-purple {
    background: #7c3aed;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}

.tier-btn-purple:hover {
    background: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.tier-btn.current-plan-btn {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    cursor: default;
    box-shadow: none;
    transform: none !important;
}

/* Modal Footer */
.upgrade-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    color: #64748b;
}

/* ── View 2: Simulated Checkout & Manager Match ── */
.sim-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.sim-back-btn {
    background: none;
    border: none;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.sim-back-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.sim-badge {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

.sim-badge.purple-badge {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ddd6fe;
}

/* Layouts */
.sim-checkout-layout,
.sim-manager-match-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {

    .sim-checkout-layout,
    .sim-manager-match-layout {
        grid-template-columns: 1fr;
    }
}

.sim-summary-box,
.sim-manager-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
}

.sim-tier-badge {
    align-self: flex-start;
    background: #ea580c;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.sim-summary-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.sim-summary-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 20px 0;
}

.sim-pricing-breakdown {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
}

.sim-breakdown-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #475569;
    padding: 5px 0;
}

.sim-breakdown-row.total-row {
    border-top: 1px solid #e2e8f0;
    margin-top: 6px;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.sim-breakdown-row .total-amount {
    color: #ea580c;
    font-size: 18px;
    font-weight: 800;
}

.sim-security-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: #059669;
    margin-top: auto;
}

/* Payment box */
.sim-payment-box,
.sim-manager-action-box {
    display: flex;
    flex-direction: column;
}

.sim-section-label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.sim-payment-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.sim-payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.sim-payment-option:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.sim-payment-option input[type="radio"]:checked~.sim-option-content {
    color: #0f172a;
}

.sim-option-content {
    display: flex;
    flex-direction: column;
}

.sim-option-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}

.sim-option-sub {
    font-size: 11.5px;
    color: #64748b;
}

.sim-submit-btn {
    width: 100%;
    padding: 13px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sim-submit-btn.orange-btn {
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.3);
}

.sim-submit-btn.orange-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(234, 88, 12, 0.4);
}

.sim-submit-btn.purple-btn {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}

.sim-submit-btn.purple-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4);
}

.sim-hint {
    font-size: 11.5px;
    color: #94a3b8;
    text-align: center;
    margin: 8px 0 0 0;
}

/* Manager match card */
.sim-manager-badge {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    align-self: flex-start;
    margin-bottom: 14px;
}

.sim-manager-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 14px;
}

.sim-manager-img-wrapper {
    position: relative;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

.sim-manager-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #7c3aed;
}

.sim-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #10b981;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.sim-manager-name {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.verified-svg {
    background: #7c3aed;
    color: #ffffff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sim-manager-role {
    font-size: 12.5px;
    font-weight: 600;
    color: #7c3aed;
    margin-bottom: 2px;
}

.sim-manager-meta {
    font-size: 11.5px;
    color: #64748b;
}

.sim-manager-duties {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.duty-item {
    display: flex;
    gap: 10px;
    font-size: 12px;
    line-height: 1.35;
    color: #475569;
}

.duty-item strong {
    color: #0f172a;
    display: block;
    margin-bottom: 2px;
}

.duty-item p {
    margin: 0;
}

.duty-icon {
    font-size: 15px;
    flex-shrink: 0;
}

/* Manager billing cards */
.billing-toggle-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.billing-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}

.billing-card:hover {
    border-color: #cbd5e1;
}

.billing-card input[type="radio"]:checked~.billing-card-body .billing-card-price {
    color: #7c3aed;
}

.billing-card-body {
    flex-grow: 1;
}

.billing-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
}

.discount-pill {
    background: #ecfdf5;
    color: #059669;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
}

.billing-card-price {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

.billing-card-price .period {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.billing-card-sub {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
}

.sim-first-meeting-callout {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f5f3ff;
    border: 1px dashed #c4b5fd;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.meeting-icon {
    font-size: 18px;
}

.meeting-text strong {
    font-size: 12.5px;
    color: #5b21b6;
    display: block;
}

.meeting-text p {
    font-size: 11.5px;
    color: #6b21a8;
    margin: 0;
}

/* ── View 3: Success Celebration ── */
.sim-success-content {
    text-align: center;
    padding: 28px 16px;
}

.success-icon-badge {
    font-size: 48px;
    margin-bottom: 12px;
    animation: bouncePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bouncePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    70% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.success-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px 0;
}

.success-perks-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 24px;
    max-width: 460px;
    margin: 0 auto 24px;
    text-align: left;
}

.success-btn {
    background: #0f172a;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
    transition: all 0.2s;
}

.success-btn:hover {
    background: #1e293b;
    transform: translateY(-1px);
}

/* ── Manager Teaser Card in Sidebar ── */
.manager-teaser-card {
    background: linear-gradient(145deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 10px 14px 16px;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.08);
}

.teaser-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.teaser-sparkle {
    font-size: 13px;
}

.teaser-title {
    font-size: 12px;
    font-weight: 800;
    color: #9a3412;
}

.teaser-desc {
    font-size: 11px;
    color: #7c2d12;
    line-height: 1.35;
    margin: 0 0 10px 0;
}

.btn-teaser-upgrade {
    width: 100%;
    background: #ea580c;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
}

.btn-teaser-upgrade:hover {
    background: #c2410c;
    transform: translateY(-1px);
}

.teaser-price-tag {
    background: rgba(255, 255, 255, 0.25);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
}

/* ── Sidebar Plan Upgrade CTA ── */
.sidebar-plan-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #ea580c;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-plan-cta:hover {
    background: #ffedd5;
    border-color: #fdba74;
}

/* ── Top Banner Upgrade Button ── */
.sandbox-upgrade-btn {
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.25);
    transition: all 0.2s;
}

.sandbox-upgrade-btn:hover {
    background: linear-gradient(135deg, #c2410c, #ea580c);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.35);
}

/* ==========================================================================
   UPDATED SIDEBAR REDESIGN & SUPPORT BOARD CHAT CUSTOMIZATION
   Exact match to Figma / Mockup Specs:
   - Arrow: #907B98
   - Texts: #2E312F
   - Sidebar bg color: #EBE6ED
   - Active page background (e.g. Discover): #8E6E98
   - "You're on Free mode." box:
       - Border: #4B2A56
       - Background: #EEEEEE
       - "You're on Free mode." text: #DF6C1C
       - "Chat with us.." text: #907B98
   - Career Prompt Card:
       - Background: #EBE6ED
       - Button: #DF6C1C (Orange pill)
       - Link: "I need a manager"
   - Floating Action Button:
       - 56px circle, #DF6C1C background, white Husay 'h' logo
   ========================================================================== */

/* ── 1. SIDEBAR CONTAINER OVERRIDE ── */
.dashboard-page.sandbox-mode-active .dashboard-sidebar,
#dashboardSidebar {
    background-color: #F0EEF4 !important;
    border-right: 1px solid rgba(64, 50, 114, 0.22) !important;
    box-shadow: none !important;
    color: #403272 !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    padding: 0px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* ── 2. SIDEBAR HEADER: LOGO & COLLAPSE ARROW ON TOP ── */
.sidebar-header {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 14px 18px 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin-bottom: 0;
}

.sidebar-toggle-btn {
    position: absolute !important;
    top: 10px !important;
    right: 14px !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    color: #403272 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    transition: background 0.2s ease, opacity 0.2s ease !important;
    z-index: 10 !important;
}

.sidebar-toggle-btn:hover {
    background: rgba(64, 50, 114, 0.08) !important;
}

.sidebar-toggle-btn svg {
    stroke: #403272 !important;
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2.6 !important;
    transform: none !important;
    transition: none !important;
}

.sidebar-logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin: 44px auto 14px auto !important;
    /* Generous space below top-right collapse arrow */
    width: 100% !important;
    text-align: center !important;
}

.sidebar-logo-link .logo-img {
    height: auto !important;
    max-height: 74px !important;
    width: 182px !important;
    max-width: 88% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Cancel any transform/rotate from dashboard.css */
.dashboard-sidebar.sidebar-collapsed .sidebar-toggle-btn svg {
    transform: none !important;
}

/* Dual chevron icons toggle via CSS */
.sidebar-toggle-btn .icon-collapse-left {
    display: inline-block !important;
}

.sidebar-toggle-btn .icon-expand-right {
    display: none !important;
}

.dashboard-sidebar.sidebar-collapsed .sidebar-toggle-btn .icon-collapse-left {
    display: none !important;
}

.dashboard-sidebar.sidebar-collapsed .sidebar-toggle-btn .icon-expand-right {
    display: inline-block !important;
}

/* ── 3. NAVIGATION ITEMS & SUBMENUS ── */
.dashboard-sidebar .dashboard-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 50, 114, 0.25) transparent;
}

/* Subtle Modern Scrollbar - sleek 4px rounded thumb, transparent track, no arrow buttons */
.dashboard-sidebar .dashboard-nav::-webkit-scrollbar,
.dashboard-sidebar::-webkit-scrollbar {
    width: 4px !important;
}

.dashboard-sidebar .dashboard-nav::-webkit-scrollbar-track,
.dashboard-sidebar::-webkit-scrollbar-track {
    background: transparent !important;
}

.dashboard-sidebar .dashboard-nav::-webkit-scrollbar-thumb,
.dashboard-sidebar::-webkit-scrollbar-thumb {
    background: rgba(64, 50, 114, 0.25) !important;
    border-radius: 9999px !important;
    transition: background 0.2s ease !important;
}

.dashboard-sidebar .dashboard-nav::-webkit-scrollbar-thumb:hover,
.dashboard-sidebar::-webkit-scrollbar-thumb:hover {
    background: #403272 !important;
}

.dashboard-sidebar .dashboard-nav::-webkit-scrollbar-button,
.dashboard-sidebar::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Optional helper to completely hide scrollbar while preserving smooth scrolling */
.dashboard-sidebar .dashboard-nav.no-scrollbar,
.dashboard-sidebar.no-scrollbar .dashboard-nav {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.dashboard-sidebar .dashboard-nav.no-scrollbar::-webkit-scrollbar,
.dashboard-sidebar.no-scrollbar .dashboard-nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.dashboard-sidebar .dashboard-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dashboard-sidebar .dashboard-nav li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Direct link & submenu toggle button (Menu) */
.dashboard-sidebar .nav-item-link,
.dashboard-sidebar .submenu-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: calc(100% - 20px) !important;
    margin: 2px 10px !important;
    padding: 8.5px 14px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 550 !important;
    color: #403272 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none;
}

.dashboard-sidebar .nav-item-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.dashboard-sidebar .nav-icon {
    width: 18px !important;
    height: 18px !important;
    stroke: #403272 !important;
    color: #403272 !important;
    flex-shrink: 0 !important;
    transition: stroke 0.18s ease, color 0.18s ease !important;
}

/* In expanded sidebar, hide icons so only typography is visible as in design */
.dashboard-sidebar:not(.sidebar-collapsed) .nav-icon,
.dashboard-sidebar:not(.sidebar-collapsed) .footer-icon {
    display: none !important;
}

.dashboard-sidebar:not(.sidebar-collapsed) .nav-label,
.dashboard-sidebar:not(.sidebar-collapsed) .footer-label {
    display: inline !important;
    color: #403272 !important;
}

/* ── 3. NAVIGATION ITEMS & SUBMENUS ── */
.sandbox-mode-banner,
#modeExplanationStrip,
.mode-explanation-strip {
    display: none !important;
}

/* Eradicate any leaking orange or box styles from dashboard.css (ONLY for submenu items) */
.dashboard-sidebar .dashboard-nav .submenu a,
.dashboard-sidebar .dashboard-nav .submenu a:hover,
.dashboard-sidebar .dashboard-nav .submenu a.active,
.dashboard-sidebar .dashboard-nav .submenu li.active>a,
.dashboard-sidebar .dashboard-nav .has-submenu>.submenu-label,
.dashboard-sidebar .dashboard-nav .has-submenu.parent-active>.submenu-label,
.dashboard-sidebar .dashboard-nav .has-submenu.active>.submenu-label,
.dashboard-sidebar .dashboard-nav .has-submenu.is-section-active>.submenu-label {
    background: transparent !important;
    background-color: transparent !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Submenu vertical line removal from dashboard.css */
.dashboard-sidebar .has-submenu>.submenu::before,
.dashboard-sidebar .submenu::before,
.dashboard-sidebar .submenu::after {
    display: none !important;
    content: none !important;
}

/* Active Main Navigation Header Pill (#DCD7EC background with #403272 text) */
.dashboard-sidebar .dashboard-nav .nav-item-link.active,
.dashboard-sidebar .dashboard-nav li.active>.nav-item-link,
.dashboard-sidebar .dashboard-nav a.nav-item-link.active,
.dashboard-sidebar .dashboard-nav li.active>a.nav-item-link,
.dashboard-sidebar .dashboard-nav .has-submenu.is-section-active>.submenu-toggle-btn,
.dashboard-sidebar .dashboard-nav .submenu-toggle-btn.active,
.dashboard-sidebar .sidebar-bottom-actions .sidebar-footer-link.active,
.dashboard-sidebar .sidebar-footer-link.active {
    background: #DCD7EC !important;
    background-color: #DCD7EC !important;
    color: #403272 !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Inactive Header & Toggle Button strictly transparent */
.dashboard-sidebar .dashboard-nav .submenu-toggle-btn:not(.active),
.dashboard-sidebar .dashboard-nav .has-submenu:not(.is-section-active)>.submenu-toggle-btn {
    background: transparent !important;
    background-color: transparent !important;
}

.dashboard-sidebar .dashboard-nav .nav-item-link.active .nav-label,
.dashboard-sidebar .dashboard-nav li.active>.nav-item-link .nav-label,
.dashboard-sidebar .dashboard-nav a.nav-item-link.active .nav-label,
.dashboard-sidebar .dashboard-nav li.active>a.nav-item-link .nav-label,
.dashboard-sidebar .dashboard-nav .has-submenu.is-section-active>.submenu-toggle-btn .nav-label,
.dashboard-sidebar .dashboard-nav .has-submenu.parent-active>.submenu-toggle-btn .nav-label,
.dashboard-sidebar .dashboard-nav .submenu-toggle-btn.active .nav-label,
.dashboard-sidebar .sidebar-bottom-actions .sidebar-footer-link.active .footer-label,
.dashboard-sidebar .sidebar-footer-link.active .footer-label {
    color: #403272 !important;
    font-weight: 600 !important;
}

.dashboard-sidebar .dashboard-nav .nav-item-link.active .nav-icon,
.dashboard-sidebar .dashboard-nav li.active>.nav-item-link .nav-icon,
.dashboard-sidebar .dashboard-nav a.nav-item-link.active .nav-icon,
.dashboard-sidebar .dashboard-nav li.active>a.nav-item-link .nav-icon,
.dashboard-sidebar .dashboard-nav .has-submenu.is-section-active>.submenu-toggle-btn .nav-icon,
.dashboard-sidebar .dashboard-nav .submenu-toggle-btn.active .nav-icon,
.dashboard-sidebar .sidebar-bottom-actions .sidebar-footer-link.active .footer-icon,
.dashboard-sidebar .sidebar-footer-link.active .footer-icon {
    stroke: #403272 !important;
    color: #403272 !important;
}

/* Hover on Menu Items - bold only, no underline, NO BACKGROUND */
.dashboard-sidebar .dashboard-nav .nav-item-link:not(.active):hover,
.dashboard-sidebar .dashboard-nav .submenu-toggle-btn:not(.active):hover,
.dashboard-sidebar .sidebar-footer-link:not(.active):hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #403272 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.dashboard-sidebar .dashboard-nav .nav-item-link:not(.active):hover .nav-label,
.dashboard-sidebar .dashboard-nav .submenu-toggle-btn:not(.active):hover .nav-label,
.dashboard-sidebar .sidebar-footer-link:not(.active):hover .footer-label {
    font-weight: 700 !important;
    text-decoration: none !important;
}

.dashboard-sidebar .submenu-toggle-btn .submenu-chevron svg {
    stroke: #403272 !important;
}

.dashboard-sidebar .has-submenu.is-section-active>.submenu-toggle-btn .submenu-chevron svg,
.dashboard-sidebar .submenu-toggle-btn.active .submenu-chevron svg {
    stroke: #403272 !important;
}

/* Submenu chevron indicator & smooth rotation */
.submenu-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #403272 !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: rotate(0deg) !important;
    cursor: pointer !important;
}

.dashboard-sidebar:not(.sidebar-collapsed) .has-submenu.is-collapsed .submenu-chevron {
    transform: rotate(-90deg) !important;
}

.submenu-chevron svg {
    stroke: #403272 !important;
    stroke-width: 2.5 !important;
    transition: stroke 0.18s ease !important;
}

/* Rotate chevron to point right (>) when section is collapsed */
.dashboard-sidebar:not(.sidebar-collapsed) .has-submenu.is-collapsed .submenu-chevron {
    transform: rotate(-90deg) !important;
}

/* Submenu display in expanded sidebar */
.dashboard-sidebar:not(.sidebar-collapsed) .submenu {
    list-style: none !important;
    padding: 2px 0 6px 0 !important;
    margin: 0 !important;
    display: block !important;
}

.dashboard-sidebar:not(.sidebar-collapsed) .has-submenu>.submenu {
    display: block !important;
}

/* Hide subpages when section is collapsed */
.dashboard-sidebar:not(.sidebar-collapsed) .has-submenu.is-collapsed>.submenu {
    display: none !important;
}

/* Submenu items (Creatives, Opportunities, Profiles, Projects, Finances, etc.) */
.dashboard-sidebar .submenu .nav-subitem {
    display: flex !important;
    align-items: center !important;
    width: calc(100% - 20px) !important;
    margin: 1.5px 10px !important;
    padding: 5.5px 12px 5.5px 24px !important;
    /* Indented cleanly under parent */
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 450 !important;
    color: #403272 !important;
    background: transparent !important;
    border: none !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: color 0.15s ease, font-weight 0.15s ease !important;
}

/* Hover - bold only, no underline, NO BACKGROUND */
.dashboard-sidebar .submenu .nav-subitem:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #403272 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.dashboard-sidebar .submenu .nav-subitem:hover .nav-label {
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Active Sub-item: bold text, NO background, NO underline */
.dashboard-sidebar .submenu li.active>.nav-subitem,
.dashboard-sidebar .submenu .nav-subitem.active {
    background: transparent !important;
    background-color: transparent !important;
    color: #403272 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: none !important;
    border-right: none !important;
    border-left: none !important;
    box-shadow: none !important;
}

.dashboard-sidebar .submenu li.active>.nav-subitem .nav-label,
.dashboard-sidebar .submenu .nav-subitem.active .nav-label {
    color: #403272 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 15px !important;
}

/* ── 5. SIDEBAR BOTTOM ACTIONS (Account, Logout - pinned at bottom outside scroll) ── */
.sidebar-bottom-actions {
    margin-top: auto !important;
    padding: 12px 10px 18px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    /* Decreased gap between Account and Logout */
    border-top: none !important;
    /* Line above Account removed per design */
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.sidebar-footer-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: calc(100% - 20px) !important;
    margin: 1px 10px !important;
    padding: 6.5px 14px !important;
    /* Subtle compact padding */
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #403272 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none;
}

/* Account font - semibold */
.sidebar-footer-link[data-tab="account-settings"] {
    font-weight: 600 !important;
    font-size: 15px !important;
}

.sidebar-footer-link:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #403272 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.sidebar-footer-link:hover .footer-label {
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Active State for Account in Bottom Actions (Menu clicked = #DCD7EC) */
.dashboard-sidebar:not(.sidebar-collapsed) .sidebar-footer-link.active,
.sidebar-bottom-actions .sidebar-footer-link.active {
    background: #DCD7EC !important;
    background-color: #DCD7EC !important;
    color: #403272 !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

.dashboard-sidebar:not(.sidebar-collapsed) .sidebar-footer-link.active .footer-label,
.sidebar-bottom-actions .sidebar-footer-link.active .footer-label {
    color: #403272 !important;
    font-weight: 600 !important;
}

/* ── 6. COLLAPSED SIDEBAR ADAPTATION & FLOATING SUBMENU FLYOUT ── */
#dashboardSidebar.sidebar-collapsed,
.dashboard-page.sandbox-mode-active #dashboardSidebar.sidebar-collapsed,
.dashboard-page.sandbox-mode-active .dashboard-sidebar.sidebar-collapsed,
.dashboard-sidebar.sidebar-collapsed {
    width: 72px !important;
    padding: 16px 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

#dashboardSidebar.sidebar-collapsed .dashboard-nav,
.dashboard-page.sandbox-mode-active #dashboardSidebar.sidebar-collapsed .dashboard-nav,
.dashboard-page.sandbox-mode-active .dashboard-sidebar.sidebar-collapsed .dashboard-nav,
.dashboard-sidebar.sidebar-collapsed .dashboard-nav {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.dashboard-sidebar.sidebar-collapsed .dashboard-nav ul {
    overflow: visible !important;
}

.dashboard-sidebar.sidebar-collapsed .has-submenu {
    position: relative !important;
    overflow: visible !important;
}

/* Invisible bridge so mouse moving from 72px bar into flyout doesn't close hover */
.dashboard-sidebar.sidebar-collapsed .has-submenu::after {
    content: '' !important;
    position: absolute !important;
    top: -10px !important;
    right: -24px !important;
    width: 32px !important;
    height: calc(100% + 20px) !important;
    display: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 99998 !important;
}

.dashboard-sidebar.sidebar-collapsed .has-submenu:hover::after,
.dashboard-sidebar.sidebar-collapsed .has-submenu.flyout-open::after {
    display: block !important;
}

/* Suppress any conflicting dark tooltip bubbles from dashboard.css on menus with flyouts */
.dashboard-sidebar.sidebar-collapsed .has-submenu [data-tooltip]::after,
.dashboard-sidebar.sidebar-collapsed .has-submenu [data-tooltip]:hover::after,
.dashboard-sidebar.sidebar-collapsed .has-submenu.flyout-open [data-tooltip]::after,
.dashboard-sidebar.sidebar-collapsed .submenu [data-tooltip]::after,
.dashboard-sidebar.sidebar-collapsed .submenu [data-tooltip]:hover::after,
.dashboard-sidebar.sidebar-collapsed .submenu-toggle-btn::after,
.dashboard-sidebar.sidebar-collapsed .submenu-toggle-btn:hover::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.dashboard-sidebar.sidebar-collapsed .sidebar-header {
    padding: 0 0 16px 0 !important;
    min-height: 48px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.dashboard-sidebar.sidebar-collapsed .sidebar-logo-link {
    display: none !important;
}

.dashboard-sidebar.sidebar-collapsed .sidebar-toggle-btn {
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide all top-level text labels, chevrons, promo card when collapsed */
.dashboard-sidebar.sidebar-collapsed .nav-item-left>.nav-label,
.dashboard-sidebar.sidebar-collapsed .footer-label,
.dashboard-sidebar.sidebar-collapsed .submenu-chevron,
.dashboard-sidebar.sidebar-collapsed .sidebar-free-mode-card {
    display: none !important;
}

/* Default collapsed submenu hidden */
.dashboard-sidebar.sidebar-collapsed .submenu {
    display: none !important;
}

/* Hide flyout-header in expanded sidebar */
.dashboard-sidebar:not(.sidebar-collapsed) .flyout-header {
    display: none !important;
}

/* FLOATING FLYOUT SUBMENU ON HOVER / CLICK */
#dashboardSidebar.sidebar-collapsed .has-submenu:hover>.submenu,
#dashboardSidebar.sidebar-collapsed .has-submenu.flyout-open>.submenu,
#dashboardSidebar.sidebar-collapsed .has-submenu.is-collapsed:hover>.submenu,
#dashboardSidebar.sidebar-collapsed .has-submenu.is-collapsed.flyout-open>.submenu,
.dashboard-sidebar.sidebar-collapsed .has-submenu:hover>.submenu,
.dashboard-sidebar.sidebar-collapsed .has-submenu.flyout-open>.submenu,
.dashboard-sidebar.sidebar-collapsed .has-submenu.is-collapsed:hover>.submenu,
.dashboard-sidebar.sidebar-collapsed .has-submenu.is-collapsed.flyout-open>.submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    left: 68px !important;
    top: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(64, 50, 114, 0.18) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(64, 50, 114, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    padding: 8px 6px !important;
    min-width: 190px !important;
    max-width: 240px !important;
    z-index: 999999 !important;
    list-style: none !important;
    margin: 0 !important;
    animation: husayFlyoutIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes husayFlyoutIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

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

.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu::before {
    display: none !important;
    content: none !important;
}

/* Clean Section Header inside flyout popup */
.dashboard-sidebar.sidebar-collapsed .flyout-header,
#dashboardSidebar.sidebar-collapsed .flyout-header {
    display: block !important;
    visibility: visible !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #403272 !important;
    padding: 8px 14px 7px 14px !important;
    border-bottom: 1px solid rgba(64, 50, 114, 0.15) !important;
    margin-bottom: 4px !important;
    background: transparent !important;
    pointer-events: none !important;
    user-select: none !important;
}

.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu li,
#dashboardSidebar.sidebar-collapsed .has-submenu>.submenu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
}

/* Sub-items inside flyout */
.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem,
#dashboardSidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 32px !important;
    padding: 7px 14px !important;
    margin: 1px 0 !important;
    border-radius: 6px !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #403272 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    text-align: left !important;
    transition: color 0.15s ease, font-weight 0.15s ease !important;
}

/* Flyout labels MUST be visible (overriding dashboard.css .nav-label { display: none }) */
.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu .nav-label,
#dashboardSidebar.sidebar-collapsed .has-submenu>.submenu .nav-label {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #403272 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
}

/* Hover sub-item inside flyout */
.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem:hover,
#dashboardSidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #403272 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem:hover .nav-label,
#dashboardSidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem:hover .nav-label {
    font-weight: 700 !important;
    color: #403272 !important;
}

/* Active sub-item inside flyout (bold, no background as requested) */
.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu li.active>a.nav-subitem,
.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem.active,
#dashboardSidebar.sidebar-collapsed .has-submenu>.submenu li.active>a.nav-subitem,
#dashboardSidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem.active {
    background: transparent !important;
    background-color: transparent !important;
    color: #403272 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu li.active>a.nav-subitem .nav-label,
.dashboard-sidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem.active .nav-label,
#dashboardSidebar.sidebar-collapsed .has-submenu>.submenu li.active>a.nav-subitem .nav-label,
#dashboardSidebar.sidebar-collapsed .has-submenu>.submenu a.nav-subitem.active .nav-label {
    color: #403272 !important;
    font-weight: 700 !important;
}

/* Main nav tiles and footer tiles when collapsed */
.dashboard-sidebar.sidebar-collapsed .nav-item-link,
.dashboard-sidebar.sidebar-collapsed .submenu-toggle-btn,
.dashboard-sidebar.sidebar-collapsed .sidebar-footer-link {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 6px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.18s ease !important;
}

.dashboard-sidebar.sidebar-collapsed .nav-item-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Display SVGs when collapsed */
.dashboard-sidebar.sidebar-collapsed .nav-icon,
.dashboard-sidebar.sidebar-collapsed .footer-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    stroke: #403272 !important;
    color: #403272 !important;
    stroke-width: 2 !important;
    flex-shrink: 0 !important;
}

.dashboard-sidebar.sidebar-collapsed .nav-item-link:hover,
.dashboard-sidebar.sidebar-collapsed .submenu-toggle-btn:hover,
.dashboard-sidebar.sidebar-collapsed .sidebar-footer-link:hover,
.dashboard-sidebar.sidebar-collapsed .has-submenu.flyout-open>.submenu-toggle-btn {
    background: rgba(64, 50, 114, 0.1) !important;
}

/* Collapsed Active State Pill (#DCD7EC) */
.dashboard-sidebar.sidebar-collapsed .nav-item-link.active,
.dashboard-sidebar.sidebar-collapsed li.active>.nav-item-link,
.dashboard-sidebar.sidebar-collapsed a.nav-item-link.active,
.dashboard-sidebar.sidebar-collapsed li.active>a.nav-item-link,
.dashboard-sidebar.sidebar-collapsed .has-submenu.is-section-active>.submenu-toggle-btn,
.dashboard-sidebar.sidebar-collapsed .submenu-toggle-btn.active,
.dashboard-sidebar.sidebar-collapsed .sidebar-footer-link.active {
    background: #DCD7EC !important;
    background-color: #DCD7EC !important;
}

.dashboard-sidebar.sidebar-collapsed .nav-item-link.active .nav-icon,
.dashboard-sidebar.sidebar-collapsed li.active>.nav-item-link .nav-icon,
.dashboard-sidebar.sidebar-collapsed a.nav-item-link.active .nav-icon,
.dashboard-sidebar.sidebar-collapsed li.active>a.nav-item-link .nav-icon,
.dashboard-sidebar.sidebar-collapsed .has-submenu.is-section-active>.submenu-toggle-btn .nav-icon,
.dashboard-sidebar.sidebar-collapsed .submenu-toggle-btn.active .nav-icon,
.dashboard-sidebar.sidebar-collapsed .sidebar-footer-link.active .footer-icon {
    stroke: #403272 !important;
    color: #403272 !important;
}

.dashboard-sidebar.sidebar-collapsed .sidebar-bottom-actions {
    padding: 12px 0 8px 0 !important;
    align-items: center !important;
    gap: 6px !important;
}

/* ── 7. HUSAY FLOATING CAREER CHAT & PROMPT CARD (MATCHING DESIGN) ── */
.husay-chat-widget-wrapper {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
    pointer-events: none !important;
}

.husay-chat-prompt-card,
.husay-floating-chat-btn {
    pointer-events: auto !important;
}

/* Prompt Card */
.husay-chat-prompt-card {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    max-width: 290px !important;
    box-shadow: 0 10px 30px rgba(64, 50, 114, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    border: 1.5px solid #403272 !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    box-sizing: border-box !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    animation: husayChatSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes husayChatSlideIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.95);
    }

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

.husay-chat-prompt-close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    background: transparent !important;
    border: none !important;
    color: #403272 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 4px !important;
    opacity: 0.8 !important;
    transition: opacity 0.15s ease !important;
}

.husay-chat-prompt-close:hover {
    opacity: 1 !important;
}

.husay-chat-prompt-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #403272 !important;
    line-height: 1.38 !important;
    margin: 0 16px 14px 0 !important;
}

.husay-chat-prompt-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.husay-chat-btn-primary {
    background: #403272 !important;
    background-color: #403272 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 7px 18px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.28) !important;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.husay-chat-btn-primary:hover {
    background: #312558 !important;
    background-color: #312558 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.38) !important;
}

.husay-chat-link-manager {
    color: #403272 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease, color 0.15s ease !important;
}

.husay-chat-link-manager:hover {
    color: #403272 !important;
    opacity: 0.8 !important;
}

/* Floating Action Button (56px Circle with Husay 'h' Logo) */
.husay-floating-chat-btn {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background-color: #403272 !important;
    background: #403272 !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 20px rgba(64, 50, 114, 0.4) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
    padding: 0 !important;
}

.husay-floating-chat-btn:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 8px 24px rgba(64, 50, 114, 0.52) !important;
}

.husay-floating-chat-btn img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

/* ── 8. SUPPORT BOARD NATIVE INTEGRATION ── */
/* If Support Board injects its default button, restyle it to match brand color */
.sb-chat-btn,
#sb-chat>.sb-chat-btn,
.sb-chat-btn.sb-icon {
    background-color: #403272 !important;
    background: #403272 !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 20px rgba(64, 50, 114, 0.4) !important;
}

/* Hide duplicate raw icon if our custom branded launcher is loaded */
.husay-has-custom-chat .sb-chat-btn,
.husay-has-custom-chat #sb-chat>.sb-chat-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
}

/* ==========================================================================
   BATCH 1 BRAND THEME: OVERVIEW & DISCOVER
   Primary Brand: #403272
   Background / Soft Surface: #F0EEF4
   Pill / Accent Highlight: #DCD7EC
   Borders: 1px solid #DCD7EC or rgba(64, 50, 114, 0.18)
   Card Fill: #FFFFFF
   Secondary Text: #645A7D
   ========================================================================== */

/* ── 1. OVERVIEW PAGE THEME ── */
#overview.dashboard-tab-content,
.overview-v1-container {
    background-color: #F0EEF4 !important;
    min-height: 100vh;
}

.overview-v1-greeting {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #403272 !important;
    letter-spacing: -0.02em !important;
}

.overview-v1-tagline {
    color: #645A7D !important;
    font-size: 1.05rem !important;
    font-style: normal !important;
}

.overview-v1-todays-focus,
.overview-v1-profile-kit,
.overview-v1-resources {
    background: #FFFFFF !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(64, 50, 114, 0.04) !important;
}

.overview-v1-todays-focus h3,
.overview-v1-profile-kit h3,
.overview-v1-resources h3 {
    color: #403272 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.focus-display {
    color: #403272 !important;
    background: #F0EEF4 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 16px 0 !important;
}

.current-bio .btn-edit,
.btn-edit {
    background: #403272 !important;
    background-color: #403272 !important;
    color: #FFFFFF !important;
    border: 1px solid #403272 !important;
    border-radius: 8px !important;
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-top: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.2) !important;
    transition: all 0.2s ease !important;
}

.current-bio .btn-edit:hover,
.btn-edit:hover {
    background: #312558 !important;
    background-color: #312558 !important;
    color: #FFFFFF !important;
    border-color: #312558 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.3) !important;
}

.overview-v1-container .btn-primary,
.overview-v1-resources .btn-primary {
    background: #403272 !important;
    color: #FFFFFF !important;
    border: 1px solid #403272 !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.overview-v1-container .btn-primary:hover,
.overview-v1-resources .btn-primary:hover {
    background: #312558 !important;
    border-color: #312558 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
    color: #FFFFFF !important;
}

.overview-v1-container .btn-secondary {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.overview-v1-container .btn-secondary:hover {
    background: #DCD7EC !important;
    color: #403272 !important;
}

/* Metric Cards on Overview */
.overview-metric-card {
    background: #FFFFFF !important;
    border: 1px solid #E4E0EC !important;
    border-radius: 14px !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.overview-metric-card:hover {
    border-color: #403272 !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 24px rgba(64, 50, 114, 0.08) !important;
    transform: translateY(-2px) !important;
}

.overview-metric-icon {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.overview-metric-icon.invoice,
.overview-metric-icon.client-saved,
.overview-metric-icon.crm,
.overview-metric-icon.profile {
    background: #F0EEF4 !important;
    color: #403272 !important;
}

.overview-metric-card:hover .overview-metric-icon {
    background: #403272 !important;
    color: #FFFFFF !important;
}

.overview-metric-title {
    color: #403272 !important;
    font-weight: 700 !important;
}

.overview-metric-subtext {
    color: #645A7D !important;
}

.overview-metric-value {
    color: #403272 !important;
    font-weight: 700 !important;
}

.overview-metric-badge.active {
    background: #DCD7EC !important;
    color: #403272 !important;
    font-weight: 700 !important;
}

.overview-metric-badge.hidden {
    background: #F0EEF4 !important;
    color: #645A7D !important;
    font-weight: 600 !important;
}

.overview-metric-arrow {
    color: #948BAE !important;
}

.overview-metric-card:hover .overview-metric-arrow {
    color: #403272 !important;
    transform: translateX(4px) !important;
}

/* Resources block on Overview */
.overview-v1-resources .info-badge {
    background: #F0EEF4 !important;
    border: 1px solid #DCD7EC !important;
    color: #403272 !important;
    border-radius: 8px !important;
}

.overview-v1-resources .profile-file-card {
    background: #FFFFFF !important;
    border: 1px solid #E4E0EC !important;
    border-radius: 12px !important;
}

.overview-v1-resources .profile-file-card:hover {
    border-color: #403272 !important;
    box-shadow: 0 4px 14px rgba(64, 50, 114, 0.08) !important;
}

.overview-v1-resources .file-name {
    color: #403272 !important;
    font-weight: 600 !important;
}

.overview-v1-resources .file-meta {
    color: #645A7D !important;
}

.overview-v1-resources .file-actions .btn-primary {
    background: #403272 !important;
    color: #FFFFFF !important;
    border-color: #403272 !important;
    border-radius: 6px !important;
}

.overview-v1-resources .file-actions .btn-primary:hover {
    background: #312558 !important;
    border-color: #312558 !important;
}

/* ── 2. DISCOVER HUB & SECTIONS THEME ── */
.discover-section-container {
    background-color: transparent !important;
}

.discover-section-container .discover-header,
.discover-header {
    border-bottom: 1px solid #DCD7EC !important;
}

.discover-section-container .discover-header h2,
.discover-header h2 {
    color: #403272 !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    letter-spacing: -0.01em !important;
}

/* Discover Inner Tabs (Browse / Saved) */
.discover-navigation {
    border-bottom: 1px solid #DCD7EC !important;
}

.discover-nav .discover-nav-item {
    color: #645A7D !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.discover-nav .discover-nav-item:hover {
    color: #403272 !important;
    font-weight: 600 !important;
}

.discover-nav .discover-nav-item.active {
    color: #403272 !important;
    font-weight: 700 !important;
}

.discover-nav .discover-nav-item.active::after {
    background-color: #403272 !important;
    height: 2.5px !important;
}

/* Category Filter Toolbars (Opportunities, Communities, Events) */
.category-toolbar-box {
    background: #FFFFFF !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(64, 50, 114, 0.04) !important;
}

.category-toolbar-header {
    border-bottom: 1px solid #F0EEF4 !important;
}

.category-toolbar-title {
    color: #403272 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.category-toolbar-label {
    color: #645A7D !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.category-toolbar-group .sidebar-select,
.sidebar-select {
    border: 1px solid #DCD7EC !important;
    border-radius: 8px !important;
    background-color: #FFFFFF !important;
    color: #403272 !important;
    font-family: inherit !important;
}

.category-toolbar-group .sidebar-select:focus,
.sidebar-select:focus {
    border-color: #403272 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(64, 50, 114, 0.12) !important;
}

/* Status Pills */
.status-pill,
.category-toolbar-group .status-pill,
.sidebar-due-pills .status-pill {
    background: #F0EEF4 !important;
    border: 1px solid #DCD7EC !important;
    color: #403272 !important;
    font-weight: 600 !important;
    transition: all 0.18s ease !important;
}

.status-pill:hover,
.category-toolbar-group .status-pill:hover,
.sidebar-due-pills .status-pill:hover {
    background: #DCD7EC !important;
    color: #403272 !important;
    border-color: #403272 !important;
}

.status-pill.active,
.category-toolbar-group .status-pill.active,
.sidebar-due-pills .status-pill.active {
    background: #403272 !important;
    border-color: #403272 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.25) !important;
}

/* ── 3. DISCOVER CARDS (CREATIVES, OPPORTUNITIES, COMMUNITIES, EVENTS) ── */
.discover-card,
.artist-card-v2 {
    background: #FFFFFF !important;
    border: 1px solid #E4E0EC !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.03) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.discover-card:hover,
.artist-card-v2:hover {
    border-color: #403272 !important;
    box-shadow: 0 12px 28px rgba(64, 50, 114, 0.09) !important;
    transform: translateY(-3px) !important;
}

/* Category Badge on Card */
.card-category-badge {
    background: #DCD7EC !important;
    color: #403272 !important;
    font-weight: 700 !important;
    border-top-left-radius: 14px !important;
    border-bottom-right-radius: 8px !important;
    transition: all 0.18s ease !important;
}

.card-category-badge:hover {
    background: #403272 !important;
    color: #FFFFFF !important;
}

/* Save Wishlist Heart Button */
.btn-save-listing {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #E4E0EC !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.08) !important;
}

.btn-save-listing:hover {
    transform: scale(1.1) !important;
    background: #FFFFFF !important;
    border-color: #403272 !important;
}

.btn-save-listing:hover svg {
    stroke: #403272 !important;
    fill: #DCD7EC !important;
}

.btn-save-listing.active svg {
    stroke: #403272 !important;
    fill: #403272 !important;
}

/* Card Titles */
.discover-card-title,
.artist-name-v2 {
    color: #403272 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.discover-title-link {
    color: #403272 !important;
    text-decoration: none !important;
}

.discover-title-link:hover {
    color: #312558 !important;
    text-decoration: underline !important;
}

/* Card Meta & Organizations */
.card-org,
.card-org-tag {
    color: #645A7D !important;
    font-weight: 600 !important;
}

.card-org-tag:hover {
    color: #403272 !important;
    text-decoration: underline !important;
}

.discover-card-meta {
    color: #645A7D !important;
}

.discover-meta-item strong {
    color: #403272 !important;
}

/* Card Tags & Pills */
.type-pill-v2 {
    background-color: #403272 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.skill-pill-v2 {
    background-color: #DCD7EC !important;
    color: #403272 !important;
    font-weight: 600 !important;
}

.discover-type-tag {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 600 !important;
}

.discover-tag {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
}

.discover-tag.discover-tag-clickable:hover,
.discover-type-tag.discover-tag-clickable:hover {
    background: #DCD7EC !important;
    border-color: #403272 !important;
    color: #403272 !important;
}

/* Card Action Buttons */
.btn-see-bio {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.btn-see-bio:hover,
.btn-see-bio:focus,
.btn-see-bio:active {
    background: #403272 !important;
    color: #FFFFFF !important;
    border-color: #403272 !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
}

.btn-apply-husay {
    background: #403272 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.btn-apply-husay:hover {
    background: #312558 !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
}

.btn-discover-link {
    color: #403272 !important;
    font-weight: 600 !important;
    transition: color 0.18s ease !important;
}

.btn-discover-link:hover {
    color: #312558 !important;
    text-decoration: underline !important;
}

.artist-website-link {
    color: #403272 !important;
}

.artist-website-link:hover {
    color: #312558 !important;
}

.initials-v2 {
    color: #403272 !important;
}

.location-row-v2 {
    color: #645A7D !important;
}

.location-row-v2:hover {
    color: #403272 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BATCH 2: PROFILES (Artist Profile, Profile Review) & PROJECTS
   Color Tokens: #403272 (primary), #F0EEF4 (soft bg), #DCD7EC (pill/accent)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PROFILES: Profile Kit Hub & Header ── */
#profile-kit .profile-kit-header h1 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#profile-kit .profile-tagline {
    color: #645A7D !important;
}

#profile-kit .visibility-text {
    color: #645A7D !important;
    font-weight: 600 !important;
}

#profile-kit .browse-dir-link {
    color: #403272 !important;
    font-weight: 700 !important;
    transition: color 0.18s ease !important;
}

#profile-kit .browse-dir-link:hover {
    color: #312558 !important;
}

#profile-kit .back-btn {
    color: #403272 !important;
    font-weight: 600 !important;
}

#profile-kit .back-btn:hover {
    color: #312558 !important;
}

/* Profiles Subnav Bar */
#profile-kit .profile-nav {
    border-bottom: 2px solid #DCD7EC !important;
}

#profile-kit .profile-nav .nav-item {
    color: #645A7D !important;
    font-weight: 600 !important;
    transition: all 0.22s ease !important;
}

#profile-kit .profile-nav .nav-item:hover {
    color: #403272 !important;
    border-bottom-color: #DCD7EC !important;
}

#profile-kit .profile-nav .nav-item.active {
    color: #403272 !important;
    border-bottom-color: #403272 !important;
    font-weight: 700 !important;
}

#profile-kit .profile-nav .nav-item.active .nav-count {
    background: #DCD7EC !important;
    color: #403272 !important;
}

#profile-kit .nav-count {
    background: #F0EEF4 !important;
    color: #645A7D !important;
}

/* ── 2. PROFILES: Artist Profile Management Form ── */
#directory-mgmt-form {
    border: 1px solid #DCD7EC !important;
    box-shadow: 0 4px 20px rgba(64, 50, 114, 0.04) !important;
}

#directory-mgmt-form .dir-sec-num {
    background-color: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
}

#directory-mgmt-form .dir-sec-title {
    color: #403272 !important;
    font-weight: 700 !important;
}

#directory-mgmt-form label {
    color: #403272 !important;
    font-weight: 600 !important;
}

#directory-mgmt-form .dir-field {
    border: 1px solid #DCD7EC !important;
    background: #FAF9FC !important;
    color: #1e293b !important;
}

#directory-mgmt-form .dir-field:not([disabled]):focus {
    border-color: #403272 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(64, 50, 114, 0.12) !important;
}

#directory-mgmt-form .toggle-bar {
    background-color: #F0EEF4 !important;
    border: 1px solid #DCD7EC !important;
}

#directory-mgmt-form .toggle-btn {
    color: #645A7D !important;
}

#directory-mgmt-form .toggle-btn.active {
    background-color: #403272 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.25) !important;
}

#directory-mgmt-form .toggle-btn:hover {
    background: #DCD7EC !important;
    color: #403272 !important;
}

.dir-type-label {
    background: #FAF9FC !important;
    border: 1px solid #E8E5F0 !important;
    color: #645A7D !important;
}

.dir-type-label.active {
    border-color: #403272 !important;
    background: #DCD7EC !important;
    color: #403272 !important;
    font-weight: 700 !important;
}

#directory-mgmt-form.editing .dir-type-label:hover {
    border-color: #403272 !important;
    background: #F0EEF4 !important;
    color: #403272 !important;
}

.dir-chip {
    background: #DCD7EC !important;
    color: #403272 !important;
    font-weight: 600 !important;
}

.dir-photo-upload-box {
    background: #FAF9FC !important;
    border: 1px solid #E8E5F0 !important;
}

.dir-photo-preview-box,
.dir-cover-preview-box {
    border: 2px dashed #DCD7EC !important;
}

.btn-dir-upload {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 700 !important;
}

.btn-dir-upload:hover {
    background: #403272 !important;
    color: #FFFFFF !important;
    border-color: #403272 !important;
}

#profile-kit .btn-primary,
#directory-mgmt-form .btn-primary {
    background: #403272 !important;
    color: #FFFFFF !important;
    border: 1px solid #403272 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    transition: all 0.2s ease !important;
}

#profile-kit .btn-primary:hover,
#directory-mgmt-form .btn-primary:hover {
    background: #312558 !important;
    border-color: #312558 !important;
    box-shadow: 0 4px 14px rgba(64, 50, 114, 0.25) !important;
    transform: translateY(-1px) !important;
}

#profile-kit .btn-secondary,
#directory-mgmt-form .btn-secondary {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    transition: all 0.2s ease !important;
}

#profile-kit .btn-secondary:hover,
#directory-mgmt-form .btn-secondary:hover {
    background: #DCD7EC !important;
    color: #312558 !important;
    border-color: #403272 !important;
}

.btn-manage-privacy {
    background: #403272 !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.btn-manage-privacy:hover {
    background: #312558 !important;
    box-shadow: 0 4px 14px rgba(64, 50, 114, 0.25) !important;
}

/* Link tree category tabs */
.linktab-btn {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 600 !important;
}

.linktab-btn:hover {
    background: #DCD7EC !important;
    color: #403272 !important;
}

.linktab-btn.active {
    background: #403272 !important;
    border-color: #403272 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.linktab-btn.active:hover {
    background: #312558 !important;
}

.btn-add-link {
    color: #403272 !important;
    border: 1px solid #403272 !important;
}

.btn-add-link:not(:disabled):hover {
    background: #403272 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.2) !important;
}

/* ── 3. PROFILES: Profile Review ── */
#profile-review .dashboard-section {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

#profile-review .section-header h3 {
    color: #403272 !important;
    font-weight: 700 !important;
    font-size: 20px !important;
}

#profile-review .section-header p {
    color: #645A7D !important;
    font-size: 14px !important;
}

#profile-review .profile-review-paid-notice {
    background: linear-gradient(135deg, #FAF8FE 0%, #F3EFFF 100%) !important;
    border: 1.5px solid #DCD7EC !important;
    border-radius: 14px !important;
    padding: 16px 22px !important;
    margin-bottom: 24px !important;
    display: block !important;
}

#profile-review .pr-card {
    border: 1px solid #DCD7EC !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(64, 50, 114, 0.04) !important;
}

#profile-review .pr-card-header {
    background: #FAF9FC !important;
    border-bottom: 1px solid #DCD7EC !important;
    padding: 16px 20px !important;
}

#profile-review .pr-card-header h4 {
    color: #403272 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

#profile-review .report-status {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 700 !important;
}

#profile-review .report-count {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 700 !important;
}

#profile-review .pending-info,
#profile-review .meeting-info {
    background: #F0EEF4 !important;
    border-left: 3px solid #403272 !important;
    color: #403272 !important;
}

#profile-review .pending-info i,
#profile-review .meeting-info i {
    color: #403272 !important;
}

#profile-review .report-actions {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

#profile-review .report-actions .btn,
#profile-review .report-actions .btn-small-core {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 34px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    border-style: solid !important;
}

#profile-review .btn-primary-core {
    background: #403272 !important;
    color: #FFFFFF !important;
    border-color: #403272 !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

#profile-review .btn-primary-core:hover {
    background: #312558 !important;
    border-color: #312558 !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
    transform: translateY(-1px) !important;
}

#profile-review .btn-outline-core {
    background: #FFFFFF !important;
    color: #403272 !important;
    border-color: #DCD7EC !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

#profile-review .btn-outline-core:hover {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border-color: #403272 !important;
}

#profile-review .step-number {
    background: #403272 !important;
    color: #FFFFFF !important;
}

/* ── 4. PROJECTS: All Inside Pages & Subtabs ── */
#projects .projects-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#proj-subcontent-ce .cost-estimate-container {
    padding: 10px 0 32px 0 !important;
}

#projects .projects-container h2 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#projects .btn-proj-card-action {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

#projects .btn-proj-card-action:hover {
    background: #403272 !important;
    color: #FFFFFF !important;
    border-color: #403272 !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.2) !important;
}

#projects .project-card {
    background: #ffffff !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(64, 50, 114, 0.04) !important;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}

#projects .project-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(64, 50, 114, 0.1) !important;
    border-color: #b7add4 !important;
}

#projects .project-tag-badge {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 700 !important;
}

#projects .project-title {
    color: #403272 !important;
    font-weight: 700 !important;
}

#projects .project-client-name {
    color: #645A7D !important;
}

#projects .btn-vault-action:hover {
    background: #DCD7EC !important;
    border-color: #403272 !important;
    color: #403272 !important;
}

#projects .btn-manager-action.primary:hover {
    background: #312558 !important;
    border-color: #312558 !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
}

/* Projects: Budgets & Cashflow Subtab */
#proj-subcontent-budgets table thead tr {
    border-bottom: 2px solid #DCD7EC !important;
    color: #645A7D !important;
}

#proj-subcontent-budgets table tbody tr {
    border-bottom: 1px solid #F0EEF4 !important;
}

#proj-subcontent-budgets table tbody tr:hover {
    background: #FAF9FC !important;
}

/* Projects: Meetings & Syncs Subtab */
#proj-subcontent-meetings .btn-vault-action:hover {
    background: #DCD7EC !important;
    border-color: #403272 !important;
    color: #312558 !important;
}

/* Cost Estimates (CE) Component */
#costing-approvals .cost-estimate-header h2 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#costing-approvals .cost-estimate-header p {
    color: #645A7D !important;
}

#costing-approvals .cost-estimate-card {
    border: 1px solid #DCD7EC !important;
    box-shadow: 0 4px 16px rgba(64, 50, 114, 0.04) !important;
    border-radius: 14px !important;
}

#costing-approvals .costing-tab.active {
    border-color: #403272 !important;
    background: #F0EEF4 !important;
    color: #403272 !important;
}

#costing-approvals .costing-tab.active .cost-estimate-badge {
    background: #403272 !important;
    color: #ffffff !important;
}

#costing-approvals .costing-tab:not(.active):hover {
    border-color: #DCD7EC !important;
    background: #FAF9FC !important;
    color: #403272 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BATCH 3: FINANCES, CONNECTIONS, BACKOFFICE VAULT, ACCOUNT
   Color Tokens:
     - Primary Brand:     #403272
     - Primary Hover:     #312558
     - Soft Purple Tint:  #F0EEF4
     - Light Pill/Accent: #DCD7EC
     - Ultra-light Card:  #FAF9FC
     - Secondary Text:    #645A7D
     - Focus Ring:        rgba(64, 50, 114, 0.12)
     - Border Subtlety:   #DCD7EC / #E8E5F0
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. FINANCES (#invoicing: Invoices & Receipts, Cashflow Projections) ── */
.finances-subnav-bar {
    background: #ffffff;
    border-bottom: 1px solid #DCD7EC;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.finances-subtabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.finance-subtab-btn {
    background: transparent;
    border: none;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #645A7D;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    text-decoration: none;
}

.finance-subtab-btn svg {
    flex-shrink: 0;
}

.finance-subtab-btn:hover {
    color: #403272;
    background: #F0EEF4;
}

.finance-subtab-btn:focus,
.finance-subtab-btn:focus:not(:focus-visible),
#invoicing .finance-subtab-btn:focus,
#invoicing .finance-subtab-btn:focus:not(:focus-visible) {
    background: transparent !important;
    background-color: transparent !important;
    color: #645A7D !important;
    outline: none !important;
    box-shadow: none !important;
}

.finance-subtab-btn:hover:focus,
#invoicing .finance-subtab-btn:hover:focus {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    color: #403272 !important;
}

.finance-subtab-btn.active,
.finance-subtab-btn.active:focus,
.finance-subtab-btn.active:focus:not(:focus-visible),
#invoicing .finance-subtab-btn.active,
#invoicing .finance-subtab-btn.active:focus,
#invoicing .finance-subtab-btn.active:focus:not(:focus-visible) {
    background: #403272 !important;
    background-color: #403272 !important;
    border-color: #403272 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.25) !important;
    outline: none !important;
}

.fin-tag-pill,
.crm-tag-pill {
    background: #F0EEF4;
    border: 1px solid #DCD7EC;
    color: #645A7D;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
    font-family: inherit;
}

.fin-tag-pill:hover,
.crm-tag-pill:hover {
    border-color: #403272;
    color: #403272;
    background: #E8E5F0;
}

.fin-tag-pill.active,
.crm-tag-pill.active {
    background: #403272 !important;
    border-color: #403272 !important;
    color: #FFFFFF !important;
}

/* ── Discover Pages View Switcher & Feed Announcements ── */
.discover-view-switcher,
.communities-view-switcher {
    display: inline-flex !important;
    background: #F0EEF4 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 10px !important;
    padding: 3px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}

.btn-discover-view,
.btn-com-view,
button.btn-discover-view,
button.btn-com-view,
.discover-view-switcher button,
.communities-view-switcher button,
.discover-header .discover-view-switcher button,
.discover-header .communities-view-switcher button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    color: #645A7D !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1.4 !important;
}

/* Inactive button hover & focus */
.btn-discover-view:hover,
.btn-com-view:hover,
button.btn-discover-view:hover,
button.btn-com-view:hover,
.discover-view-switcher button:hover:not(.active),
.communities-view-switcher button:hover:not(.active),
.discover-header .discover-view-switcher button:hover:not(.active),
.discover-header .communities-view-switcher button:hover:not(.active) {
    background: #E8E5F0 !important;
    background-color: #E8E5F0 !important;
    color: #403272 !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Active button state */
.btn-discover-view.active,
.btn-com-view.active,
button.btn-discover-view.active,
button.btn-com-view.active,
.discover-view-switcher button.active,
.communities-view-switcher button.active,
.discover-header .discover-view-switcher button.active,
.discover-header .communities-view-switcher button.active {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #403272 !important;
    box-shadow: 0 1px 4px rgba(64, 50, 114, 0.12) !important;
    border: none !important;
    outline: none !important;
}

/* Active button hover & focus (override theme pink/red completely) */
.btn-discover-view.active:hover,
.btn-com-view.active:hover,
button.btn-discover-view.active:hover,
button.btn-com-view.active:hover,
.btn-discover-view.active:focus,
.btn-com-view.active:focus,
button.btn-discover-view.active:focus,
button.btn-com-view.active:focus,
.discover-view-switcher button.active:hover,
.communities-view-switcher button.active:hover,
.discover-header .discover-view-switcher button.active:hover,
.discover-header .communities-view-switcher button.active:hover {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #403272 !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.16) !important;
    border: none !important;
    outline: none !important;
}

/* SVG icons within the view switcher buttons */
.btn-discover-view svg,
.btn-com-view svg,
.discover-view-switcher button svg,
.communities-view-switcher button svg {
    stroke: currentColor !important;
    color: inherit !important;
    flex-shrink: 0 !important;
}

.feed-announcement-card {
    background: #FFFFFF;
    border: 1.5px solid #DCD7EC;
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(64, 50, 114, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feed-announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(64, 50, 114, 0.08);
    border-color: #403272;
}



#invoicing .invoicing-tabs,
#invoicing #main-invoicing-tabs {
    border-bottom: 2px solid #DCD7EC !important;
}

#invoicing .invoicing-tabs .tab-btn,
#invoicing #main-invoicing-tabs .tab-btn {
    color: #645A7D !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
}

#invoicing .invoicing-tabs .tab-btn:hover,
#invoicing #main-invoicing-tabs .tab-btn:hover {
    color: #403272 !important;
    border-bottom-color: #403272 !important;
}

#invoicing .invoicing-tabs .tab-btn.active,
#invoicing #main-invoicing-tabs .tab-btn.active {
    color: #403272 !important;
    border-bottom-color: #403272 !important;
    font-weight: 700 !important;
}

#invoicing .tab-badge {
    background: #F0EEF4 !important;
    color: #645A7D !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 700 !important;
}

#invoicing .tab-btn.active .tab-badge {
    background: #DCD7EC !important;
    color: #403272 !important;
}

#invoicing .invoicing-container .invoicing-header h2 {
    color: #403272 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

#invoicing .invoicing-container .invoicing-header p {
    color: #645A7D !important;
}

/* Primary Send Buttons */
#invoicing .invoicing-container .btn-send {
    background: #403272 !important;
    color: #ffffff !important;
    border: 1px solid #403272 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.2) !important;
    transition: all 0.2s ease !important;
}

#invoicing .invoicing-container .btn-send:hover {
    background: #312558 !important;
    border-color: #312558 !important;
    box-shadow: 0 4px 14px rgba(64, 50, 114, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Preview, Download, Draft, Add, Copy Secondary Buttons */
#invoicing .invoicing-container .btn-preview,
#invoicing .invoicing-container .btn-download,
#invoicing .invoicing-container .add-btn,
#invoicing .invoicing-container .copy-result {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#invoicing .invoicing-container .btn-preview:hover,
#invoicing .invoicing-container .btn-download:hover,
#invoicing .invoicing-container .add-btn:hover,
#invoicing .invoicing-container .copy-result:hover {
    background: #403272 !important;
    color: #ffffff !important;
    border-color: #403272 !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.2) !important;
}

#invoicing .calc-btn-copy-small {
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    background: #F0EEF4 !important;
    border-radius: 6px !important;
}

#invoicing .calc-btn-copy-small:hover {
    background: #403272 !important;
    color: #ffffff !important;
    border-color: #403272 !important;
}

#invoicing .calc-btn-copy-small svg {
    color: #403272 !important;
    stroke: #403272 !important;
}

#invoicing .calc-btn-copy-small:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

#invoicing .husay-card-btn-edit {
    background: #403272 !important;
    background-color: #403272 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

#invoicing .husay-card-btn-edit:hover,
#invoicing .husay-card-btn-edit:active {
    background: #312558 !important;
    background-color: #312558 !important;
}

#invoicing .husay-modal-footer .btn-confirm-send {
    background: #403272 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

#invoicing .husay-modal-footer .btn-confirm-send:hover {
    background: #312558 !important;
}

#invoicing .btn-received-log {
    background: #403272 !important;
    background-color: #403272 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.18) !important;
    transition: all 0.2s ease !important;
}

#invoicing .btn-received-log:hover {
    background: #312558 !important;
    background-color: #312558 !important;
}

/* Invoicing Form Cards & Totals */
#invoicing .invoicing-container .invoice-card {
    background: #ffffff !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(64, 50, 114, 0.04) !important;
}

#invoicing .invoicing-container .invoice-card h3,
#invoicing .invoicing-container .invoice-card h4,
#invoicing .invoicing-container .section-title {
    color: #403272 !important;
    font-weight: 700 !important;
}

#invoicing .invoicing-container #grand_total {
    color: #403272 !important;
    font-weight: 800 !important;
}

#invoicing .invoicing-container .recipient-badge-container {
    background: #F0EEF4 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 8px !important;
}

#invoicing .invoicing-container .recipient-label {
    color: #403272 !important;
    font-weight: 700 !important;
}

#invoicing .invoicing-container input:focus,
#invoicing .invoicing-container select:focus,
#invoicing .invoicing-container textarea:focus,
#invoicing .modal-input-group textarea:focus {
    border-color: #403272 !important;
    box-shadow: 0 0 0 3px rgba(64, 50, 114, 0.12) !important;
    outline: none !important;
}

#invoicing .invoicing-container .history-item.pending-invoice-item {
    border-left: 3px solid #403272 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FINANCES: CASHFLOW PROJECTIONS SUBTAB (#finPaneCashflow)
   Brand Palette: #403272 (Primary), #F0EEF4 (Soft), #DCD7EC (Border)
   ══════════════════════════════════════════════════════════════════════════ */
#finPaneCashflow {
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#finPaneCashflow .cashflow-container {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px 32px 48px 32px !important;
    font-family: inherit !important;
    color: #0F172A !important;
}

#finPaneCashflow .cashflow-container * {
    box-sizing: border-box !important;
}

/* Header & View Switcher */
#finPaneCashflow .cf-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

#finPaneCashflow .cf-title-group h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #403272 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
}

#finPaneCashflow .cf-title-group p {
    font-size: 13px !important;
    color: #645A7D !important;
    margin: 0 !important;
}

/* View Switcher */
#finPaneCashflow .cf-view-switcher {
    display: inline-flex !important;
    background: #F0EEF4 !important;
    padding: 4px !important;
    border-radius: 10px !important;
    border: 1px solid #DCD7EC !important;
    gap: 4px !important;
}

#finPaneCashflow .cf-switcher-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #645A7D !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

#finPaneCashflow .cf-switcher-btn:hover {
    color: #403272 !important;
}

#finPaneCashflow .cf-switcher-btn.active {
    background: #403272 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.25) !important;
}

/* 4-Column Summary Cards Grid */
#finPaneCashflow .cf-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    margin-bottom: 32px !important;
    width: 100% !important;
}

@media (max-width: 1100px) {
    #finPaneCashflow .cf-summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    #finPaneCashflow .cf-summary-grid {
        grid-template-columns: 1fr !important;
    }
}

#finPaneCashflow .cf-summary-card {
    background: #FFFFFF !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 14px !important;
    padding: 20px 22px !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.04) !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 120px !important;
}

#finPaneCashflow .cf-summary-card:hover {
    border-color: #403272 !important;
    box-shadow: 0 6px 16px rgba(64, 50, 114, 0.08) !important;
}

#finPaneCashflow .cf-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

#finPaneCashflow .cf-card-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #645A7D !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

#finPaneCashflow .cf-pill-badge {
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
}

#finPaneCashflow .cf-pill-approved { background: #F0EEF4 !important; color: #403272 !important; border: 1px solid #DCD7EC !important; }
#finPaneCashflow .cf-pill-logged   { background: #FFFBEB !important; color: #D97706 !important; border: 1px solid #FEF3C7 !important; }
#finPaneCashflow .cf-pill-headroom { background: #ECFDF5 !important; color: #059669 !important; border: 1px solid #A7F3D0 !important; }
#finPaneCashflow .cf-pill-balance  { background: rgba(255, 255, 255, 0.2) !important; color: #FFFFFF !important; }

#finPaneCashflow .cf-card-value {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    display: block !important;
}

#finPaneCashflow .cf-card-sub {
    font-size: 12px !important;
    color: #645A7D !important;
    margin: 0 !important;
}

/* 4th Card Highlight */
#finPaneCashflow .cf-summary-card.highlight {
    background: linear-gradient(135deg, #403272 0%, #312558 100%) !important;
    border-color: #403272 !important;
    box-shadow: 0 6px 20px rgba(64, 50, 114, 0.22) !important;
}

#finPaneCashflow .cf-summary-card.highlight .cf-card-label {
    color: rgba(255, 255, 255, 0.85) !important;
}

#finPaneCashflow .cf-summary-card.highlight .cf-card-value {
    color: #FFFFFF !important;
}

#finPaneCashflow .cf-summary-card.highlight .cf-card-sub {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Privacy Mode */
#finPaneCashflow .cf-summary-card.privacy-mode {
    background: #FAF9FC !important;
    border-style: dashed !important;
}

#finPaneCashflow .cf-summary-card.privacy-mode .cf-card-value {
    color: #645A7D !important;
}

/* Section Header */
#finPaneCashflow .cf-section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

#finPaneCashflow .cf-section-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #403272 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 4px 0 !important;
}

#finPaneCashflow .cf-section-sub {
    font-size: 13px !important;
    color: #645A7D !important;
    margin: 0 !important;
}

#finPaneCashflow .cf-header-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

#finPaneCashflow .btn-cf-primary {
    background: #403272 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

#finPaneCashflow .btn-cf-primary:hover {
    background: #312558 !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.25) !important;
}

#finPaneCashflow .btn-cf-secondary {
    background: #FFFFFF !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

#finPaneCashflow .btn-cf-secondary:hover {
    background: #F0EEF4 !important;
    border-color: #403272 !important;
}

/* Projects Grid */
#finPaneCashflow .cf-projects-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}

#finPaneCashflow .cf-proj-card {
    background: #FFFFFF !important;
    border: 1.5px solid #DCD7EC !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

#finPaneCashflow .cf-proj-card:hover {
    border-color: #403272 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(64, 50, 114, 0.08) !important;
}

#finPaneCashflow .cf-proj-card.selected {
    border-color: #403272 !important;
    box-shadow: 0 0 0 2px rgba(64, 50, 114, 0.2), 0 4px 12px rgba(64, 50, 114, 0.08) !important;
    background: #FAF9FC !important;
}

#finPaneCashflow .cf-proj-card-title-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

#finPaneCashflow .cf-proj-card-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #403272 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

#finPaneCashflow .cf-proj-card-client {
    font-size: 12px !important;
    color: #645A7D !important;
    margin: 0 0 12px 0 !important;
}

#finPaneCashflow .cf-proj-card-budget-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 12px !important;
    padding-top: 8px !important;
    border-top: 1px solid #F0EEF4 !important;
}

#finPaneCashflow .cf-proj-card-budget-label {
    color: #645A7D !important;
}

#finPaneCashflow .cf-proj-card-budget-val {
    font-weight: 700 !important;
    color: #0F172A !important;
}

/* Detail Section */
#finPaneCashflow .cf-detail-wrapper {
    background: #FFFFFF !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 14px !important;
    padding: 24px !important;
    margin-bottom: 32px !important;
}

#finPaneCashflow .cf-detail-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding-bottom: 20px !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid #DCD7EC !important;
}

#finPaneCashflow .cf-detail-title-group h3 {
    margin: 0 0 4px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #403272 !important;
}

#finPaneCashflow .cf-detail-title-group p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #645A7D !important;
}

#finPaneCashflow .cf-detail-proj-highlight {
    color: #403272 !important;
    text-decoration: underline !important;
    text-decoration-color: #DCD7EC !important;
}

#finPaneCashflow .cf-subhead-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

#finPaneCashflow .cf-step-heading {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #645A7D !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#finPaneCashflow .cf-step-number {
    background: #F0EEF4 !important;
    color: #403272 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Tables */
#finPaneCashflow .cf-table-card {
    background: #FFFFFF !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

#finPaneCashflow .cf-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
}

#finPaneCashflow .cf-table th {
    background: #FAF9FC !important;
    padding: 12px 18px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #645A7D !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #DCD7EC !important;
}

#finPaneCashflow .cf-table td {
    padding: 14px 18px !important;
    color: #334155 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F0EEF4 !important;
}

#finPaneCashflow .cf-table tbody tr:last-child td {
    border-bottom: none !important;
}

#finPaneCashflow .cf-table tbody tr:hover td {
    background: #FAF9FC !important;
}

#finPaneCashflow .cf-table-right { text-align: right !important; }
#finPaneCashflow .cf-table-center { text-align: center !important; }

/* Status Badges */
#finPaneCashflow .cf-status-badge {
    padding: 3px 10px !important;
    border-radius: 9999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

#finPaneCashflow .cf-badge-paid {
    background: #ECFDF5 !important;
    color: #059669 !important;
    border: 1px solid #A7F3D0 !important;
}

#finPaneCashflow .cf-badge-approved {
    background: #EFF6FF !important;
    color: #2563EB !important;
    border: 1px solid #BFDBFE !important;
}

#finPaneCashflow .cf-badge-pending {
    background: #FFFBEB !important;
    color: #D97706 !important;
    border: 1px solid #FEF3C7 !important;
}

#finPaneCashflow .btn-cf-action {
    background: #F0EEF4 !important;
    border: 1px solid #DCD7EC !important;
    color: #403272 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s !important;
}

#finPaneCashflow .btn-cf-action:hover {
    background: #403272 !important;
    color: #FFFFFF !important;
    border-color: #403272 !important;
}

#finPaneCashflow .btn-cf-edit {
    background: transparent !important;
    border: none !important;
    color: #403272 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

#finPaneCashflow .btn-cf-edit:hover {
    background: #F0EEF4 !important;
}

#finPaneCashflow .btn-cf-del {
    background: transparent !important;
    border: none !important;
    color: #EF4444 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

#finPaneCashflow .btn-cf-del:hover {
    background: #FEF2F2 !important;
}

/* ── 2. CONNECTIONS (#crm) ── */
#crm .crm-title {
    color: #403272 !important;
    font-weight: 700 !important;
}

#crm .crm-pro-badge {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 700 !important;
}

#crm .crm-header-tabs {
    border-bottom: 2px solid #DCD7EC !important;
}

#crm .crm-tab-btn {
    color: #645A7D !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#crm .crm-tab-btn:hover {
    color: #403272 !important;
    border-bottom-color: #403272 !important;
}

#crm .crm-tab-btn.active {
    color: #403272 !important;
    border-bottom-color: #403272 !important;
    font-weight: 700 !important;
}

#crm .crm-tab-count {
    background: #F0EEF4 !important;
    color: #645A7D !important;
    border: 1px solid #DCD7EC !important;
}

#crm .crm-tab-btn.active .crm-tab-count {
    background: #DCD7EC !important;
    color: #403272 !important;
    font-weight: 700 !important;
}

/* Stats Cards */
#crm .crm-stat-card {
    background: #ffffff !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.03) !important;
    transition: all 0.2s ease !important;
}

#crm .crm-stat-card:hover {
    border-color: #403272 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(64, 50, 114, 0.08) !important;
}

#crm .crm-stat-number {
    color: #403272 !important;
    font-weight: 800 !important;
}

#crm .crm-stat-label {
    color: #645A7D !important;
}

/* Section Bar & Add Button */
#crm .crm-section-bar h3 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#crm .crm-add-btn {
    background: #403272 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.2) !important;
    transition: all 0.2s ease !important;
}

#crm .crm-add-btn:hover {
    background: #312558 !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Filters & Inputs */
#crm .crm-search-input,
#crm .crm-select {
    border: 1px solid #DCD7EC !important;
    background: #FAF9FC !important;
    border-radius: 8px !important;
    color: #1e293b !important;
}

#crm .crm-search-input:focus,
#crm .crm-select:focus {
    border-color: #403272 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(64, 50, 114, 0.12) !important;
    outline: none !important;
}

/* Table */
#crm .crm-table-wrap {
    border: 1px solid #DCD7EC !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(64, 50, 114, 0.04) !important;
}

#crm .crm-table thead th {
    background: #403272 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border: none !important;
}

#crm .crm-table tbody tr {
    border-bottom: 1px solid #F0EEF4 !important;
}

#crm .crm-table tbody tr:hover {
    background: #FAF9FC !important;
}

#crm .crm-bold-cell {
    color: #403272 !important;
    font-weight: 600 !important;
}

#crm .crm-amount-cell {
    color: #403272 !important;
    font-weight: 700 !important;
}

#crm .crm-link {
    color: #403272 !important;
    font-weight: 600 !important;
}

#crm .crm-link:hover {
    color: #312558 !important;
    text-decoration: underline !important;
}

#crm .crm-edit-btn {
    background: #403272 !important;
    background-color: #403272 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

#crm .crm-edit-btn:hover {
    background: #312558 !important;
    background-color: #312558 !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.2) !important;
}

#crm .crm-status-pill:hover {
    background: #F0EEF4 !important;
    border-color: #DCD7EC !important;
}

/* Status Picker Dropdown */
.crm-status-picker {
    border: 1px solid #DCD7EC !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(64, 50, 114, 0.12) !important;
}

.crm-picker-label {
    color: #645A7D !important;
    border-bottom: 1px solid #F0EEF4 !important;
}

.crm-picker-option:hover {
    background: #F0EEF4 !important;
    color: #403272 !important;
}

.crm-picker-option.is-current {
    background: #F0EEF4 !important;
    color: #403272 !important;
    font-weight: 700 !important;
}

.crm-picker-check {
    color: #403272 !important;
}

/* Modals & Forms */
.crm-modal-card {
    border: 1px solid #DCD7EC !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(64, 50, 114, 0.15) !important;
}

.crm-modal-header {
    border-bottom: 1px solid #F0EEF4 !important;
}

.crm-modal-header h3 {
    color: #403272 !important;
    font-weight: 700 !important;
}

.crm-form-group label {
    color: #403272 !important;
    font-weight: 600 !important;
}

.crm-dashboard .crm-form input:focus,
.crm-dashboard .crm-form select:focus,
.crm-dashboard .crm-form textarea:focus {
    border-color: #403272 !important;
    box-shadow: 0 0 0 3px rgba(64, 50, 114, 0.12) !important;
    background: #ffffff !important;
}

.crm-btn-primary {
    background: #403272 !important;
    border-color: #403272 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.crm-btn-primary:hover {
    background: #312558 !important;
    border-color: #312558 !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.25) !important;
}

.crm-btn-outline {
    background: #F0EEF4 !important;
    border: 1px solid #DCD7EC !important;
    color: #403272 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.crm-btn-outline:hover {
    background: #DCD7EC !important;
    color: #312558 !important;
}

.crm-upgrade-card,
.upgrade-notice {
    background: linear-gradient(135deg, #F0EEF4 0%, #DCD7EC 100%) !important;
    border: 1.5px solid #DCD7EC !important;
    box-shadow: 0 10px 25px -5px rgba(64, 50, 114, 0.12) !important;
}

.crm-upgrade-card h3,
.upgrade-notice h3 {
    color: #403272 !important;
    font-weight: 700 !important;
}

.crm-upgrade-card .btn-primary-pro,
.upgrade-notice .btn-primary-pro {
    background: #403272 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

.crm-upgrade-card .btn-primary-pro:hover,
.upgrade-notice .btn-primary-pro:hover {
    background: #312558 !important;
    box-shadow: 0 4px 14px rgba(64, 50, 114, 0.25) !important;
}

/* ── 3. BACKOFFICE VAULT (#manager-docs) ── */
#manager-docs .vault-hero {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 24px !important;
}

#manager-docs .vault-hero-info h2 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#manager-docs .vault-hero-info p {
    color: #645A7D !important;
}

#manager-docs .vault-security-badge {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 600 !important;
}

#manager-docs .vault-progress-box {
    background: #FAF9FC !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 12px !important;
}

#manager-docs .vault-progress-title {
    color: #645A7D !important;
}

#manager-docs .vault-progress-score {
    color: #403272 !important;
    font-weight: 800 !important;
}

#manager-docs .vault-progress-bar-bg {
    background: #F0EEF4 !important;
}

#manager-docs .vault-progress-bar-fill {
    background: linear-gradient(90deg, #403272, #645A7D) !important;
}

#manager-docs .vault-items-card {
    background: #ffffff !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(64, 50, 114, 0.04) !important;
}

#manager-docs .vault-items-header {
    border-bottom: 1px solid #F0EEF4 !important;
}

#manager-docs .vault-items-header h3 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#manager-docs .vault-item-row {
    border-bottom: 1px solid #F0EEF4 !important;
    transition: all 0.18s ease !important;
}

#manager-docs .vault-item-row:hover {
    background: #FAF9FC !important;
}

#manager-docs .vault-item-icon {
    background: #F0EEF4 !important;
    border: 1px solid #DCD7EC !important;
}

#manager-docs .vault-item-text h4 {
    color: #403272 !important;
    font-weight: 600 !important;
}

#manager-docs .vault-item-text p {
    color: #645A7D !important;
}

#manager-docs .vault-masked-value {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
}

#manager-docs .btn-vault-action,
.btn-vault-action {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#manager-docs .btn-vault-action:hover,
.btn-vault-action:hover {
    background: #403272 !important;
    color: #ffffff !important;
    border-color: #403272 !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.2) !important;
}

#manager-docs .vault-modal-card,
.vault-modal-card {
    border: 1px solid #DCD7EC !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(64, 50, 114, 0.15) !important;
}

#manager-docs .vault-modal-header,
.vault-modal-header {
    border-bottom: 1px solid #F0EEF4 !important;
}

#manager-docs .vault-modal-title,
.vault-modal-title {
    color: #403272 !important;
    font-weight: 700 !important;
}

#manager-docs .vault-credential-box,
.vault-credential-box {
    background: #FAF9FC !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 12px !important;
}

#manager-docs .vault-field-row,
.vault-field-row {
    border-bottom: 1px solid #F0EEF4 !important;
}

#manager-docs .vault-field-label,
.vault-field-label {
    color: #645A7D !important;
    font-weight: 600 !important;
}

#manager-docs .vault-field-val,
.vault-field-val {
    color: #403272 !important;
    font-weight: 600 !important;
}

#manager-docs .btn-manager-action.primary {
    background: #403272 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

#manager-docs .btn-manager-action.primary:hover {
    background: #312558 !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
}

/* Manager Docs / My Records fallback */
#manager-docs .manager-docs-header h2 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#manager-docs .my-records-card {
    background: #ffffff !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(64, 50, 114, 0.04) !important;
}

#manager-docs .my-records-title h3 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#manager-docs .my-records-counter {
    background: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    font-weight: 700 !important;
}

#manager-docs .btn-feature-upgrade {
    background: #403272 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

#manager-docs .btn-feature-upgrade:hover {
    background: #312558 !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
}

/* ── 4. ACCOUNT (#account-settings) ── */
#account-settings .settings-header h1 {
    color: #403272 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

#account-settings .settings-header p {
    color: #645A7D !important;
}

#account-settings .settings-tabs {
    border-bottom: 2px solid #DCD7EC !important;
    gap: 8px !important;
}

#account-settings .settings-tab-btn {
    color: #645A7D !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    padding: 12px 20px !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.2s ease !important;
}

#account-settings .settings-tab-btn:hover {
    color: #403272 !important;
    border-bottom-color: #403272 !important;
    background-color: transparent !important;
}

#account-settings .settings-tab-btn.active {
    color: #403272 !important;
    border-bottom-color: #403272 !important;
    background-color: transparent !important;
    font-weight: 700 !important;
}

/* Settings Cards */
#account-settings .settings-card {
    background: #ffffff !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(64, 50, 114, 0.04) !important;
}

#account-settings .settings-card h2 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#account-settings .settings-card h3 {
    color: #403272 !important;
    font-weight: 600 !important;
}

/* Form Inputs */
#account-settings .form-group label {
    color: #403272 !important;
    font-weight: 600 !important;
}

#account-settings .form-group input,
#account-settings .form-group select,
#account-settings .form-group textarea {
    border: 1px solid #DCD7EC !important;
    border-radius: 8px !important;
    background: #FAF9FC !important;
    color: #1e293b !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
}

#account-settings .form-group input:focus,
#account-settings .form-group select:focus,
#account-settings .form-group textarea:focus {
    border-color: #403272 !important;
    box-shadow: 0 0 0 3px rgba(64, 50, 114, 0.12) !important;
    background: #ffffff !important;
    outline: none !important;
}

#account-settings .help-text {
    color: #645A7D !important;
}

#account-settings .checkbox-label input[type="checkbox"]:checked {
    background-color: #403272 !important;
    border-color: #403272 !important;
}

/* Submit and Primary Buttons */
#account-settings .btn-primary,
#account-settings button[type="submit"] {
    background: #403272 !important;
    color: #ffffff !important;
    border: 1px solid #403272 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 11px 24px !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#account-settings .btn-primary:hover,
#account-settings button[type="submit"]:hover {
    background: #312558 !important;
    border-color: #312558 !important;
    box-shadow: 0 4px 14px rgba(64, 50, 114, 0.25) !important;
    transform: translateY(-1px) !important;
}

/* Action & Session Items */
#account-settings .action-item {
    border: 1px solid #DCD7EC !important;
    border-radius: 12px !important;
}

#account-settings .action-info h4 {
    color: #403272 !important;
}

#account-settings .action-info p {
    color: #645A7D !important;
}

#account-settings .session-item {
    border: 1px solid #DCD7EC !important;
    border-radius: 12px !important;
}

#account-settings .session-item.current {
    border-color: #403272 !important;
    background: #FAF9FC !important;
}

#account-settings .session-info h4 {
    color: #403272 !important;
}

#account-settings .session-info p {
    color: #645A7D !important;
}

/* Subscriptions & Plans */
#account-settings .current-plan-card {
    background: linear-gradient(135deg, #403272 0%, #312558 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(64, 50, 114, 0.2) !important;
}

#account-settings .plan-card {
    border: 1px solid #DCD7EC !important;
    border-radius: 14px !important;
    transition: all 0.2s ease !important;
}

#account-settings .plan-card:hover {
    border-color: #403272 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(64, 50, 114, 0.08) !important;
}

#account-settings .plan-card.current {
    border-color: #403272 !important;
    background: #FAF9FC !important;
}

#account-settings .plan-card.featured {
    border-color: #403272 !important;
    box-shadow: 0 8px 24px rgba(64, 50, 114, 0.12) !important;
}

#account-settings .plan-badge {
    background: #403272 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

#account-settings .plan-card h4 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#account-settings .plan-price {
    color: #403272 !important;
    font-weight: 800 !important;
}

/* Credits Tab */
#account-settings .credit-total-val {
    color: #403272 !important;
    font-weight: 800 !important;
}

#account-settings .credit-balance-card {
    border: 1px solid #DCD7EC !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(64, 50, 114, 0.03) !important;
}

#account-settings .credit-balance-card.billable {
    border-color: #DCD7EC !important;
}

#account-settings .credit-balance-card.billable .credit-balance-value {
    color: #403272 !important;
    font-weight: 800 !important;
}

#account-settings .btn-topup-credits {
    background: linear-gradient(135deg, #403272, #312558) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important;
    box-shadow: 0 3px 10px rgba(64, 50, 114, 0.3) !important;
    transition: all 0.2s ease !important;
}

#account-settings .btn-topup-credits:hover {
    box-shadow: 0 6px 16px rgba(64, 50, 114, 0.4) !important;
    transform: translateY(-2px) !important;
}

#account-settings .btn-approve-tx {
    background: #403272 !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
}

#account-settings .btn-approve-tx:hover {
    background: #312558 !important;
    transform: translateY(-1px) !important;
}

#account-settings .topup-modal {
    border: 1px solid #DCD7EC !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(64, 50, 114, 0.2) !important;
}

#account-settings .topup-modal-header {
    border-bottom: 1px solid #F0EEF4 !important;
}

#account-settings .topup-modal-header h3 {
    color: #403272 !important;
    font-weight: 700 !important;
}

#account-settings .topup-preset:hover {
    border-color: #403272 !important;
    color: #403272 !important;
    background: #F0EEF4 !important;
}

#account-settings .topup-preset.selected {
    border-color: #403272 !important;
    background: #403272 !important;
    color: #ffffff !important;
}

#account-settings .topup-custom-input-wrap:focus-within {
    border-color: #403272 !important;
    box-shadow: 0 0 0 3px rgba(64, 50, 114, 0.12) !important;
}

#account-settings .btn-pay-xendit {
    background: linear-gradient(135deg, #403272, #312558) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.35) !important;
}

/* ── 5. PROJECTS BUTTONS & FOCUS STATE OVERRIDES ── */
#projects .btn-manager-action.primary,
.btn-manager-action.primary {
    background: #403272 !important;
    background-color: #403272 !important;
    border: 1px solid #403272 !important;
    color: #ffffff !important;
}

#projects .btn-manager-action.primary:hover,
.btn-manager-action.primary:hover {
    background: #312558 !important;
    background-color: #312558 !important;
    border-color: #312558 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(64, 50, 114, 0.25) !important;
}

#projects .btn-manager-action.primary:focus,
#projects .btn-manager-action.primary:focus:not(:focus-visible),
.btn-manager-action.primary:focus,
.btn-manager-action.primary:focus:not(:focus-visible) {
    background: #403272 !important;
    background-color: #403272 !important;
    border-color: #403272 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(64, 50, 114, 0.25) !important;
    outline: none !important;
}

#projects .project-subtab-btn:focus,
#projects .project-subtab-btn:focus:not(:focus-visible) {
    background: transparent !important;
    background-color: transparent !important;
    color: #645A7D !important;
    outline: none !important;
    box-shadow: none !important;
}

#projects .project-subtab-btn:hover:focus {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    color: #403272 !important;
}

#projects .project-subtab-btn.active,
#projects .project-subtab-btn.active:focus,
#projects .project-subtab-btn.active:focus:not(:focus-visible) {
    background: #403272 !important;
    background-color: #403272 !important;
    border-color: #403272 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(64, 50, 114, 0.25) !important;
    outline: none !important;
}

#projects .btn-vault-action:focus,
#projects .btn-vault-action:focus:not(:focus-visible) {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    border-color: #403272 !important;
    color: #403272 !important;
    outline: none !important;
}

#projects .tag-filter-pill:focus,
#projects .tag-filter-pill:focus:not(:focus-visible) {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    border-color: #DCD7EC !important;
    color: #403272 !important;
    outline: none !important;
}

#projects .tag-filter-pill.active,
#projects .tag-filter-pill.active:focus,
#projects .tag-filter-pill.active:focus:not(:focus-visible) {
    background: #403272 !important;
    background-color: #403272 !important;
    border-color: #403272 !important;
    color: #FFFFFF !important;
    outline: none !important;
}

#projects .btn-proj-card-action:focus,
#projects .btn-proj-card-action:focus:not(:focus-visible) {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    border-color: #DCD7EC !important;
    color: #403272 !important;
    outline: none !important;
}

/* ==========================================================================
   RESET ASTRA THEME GLOBAL BUTTON OVERRIDES (#c73669 outline)
   Neutralizes Astra parent theme customizer button hijacking across workspace
   ========================================================================== */
.artist-dashboard-container button.btn-action-primary,
.artist-dashboard-container .btn-action-primary,
button.btn-action-primary {
    background: #403272 !important;
    background-color: #403272 !important;
    color: #FFFFFF !important;
    border: 1px solid #403272 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}
.artist-dashboard-container button.btn-action-primary:hover,
.artist-dashboard-container .btn-action-primary:hover,
button.btn-action-primary:hover {
    background: #32255d !important;
    background-color: #32255d !important;
    color: #FFFFFF !important;
    border-color: #32255d !important;
}

.artist-dashboard-container button.btn-action-secondary,
.artist-dashboard-container .btn-action-secondary,
button.btn-action-secondary {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}
.artist-dashboard-container button.btn-action-secondary:hover,
.artist-dashboard-container .btn-action-secondary:hover,
button.btn-action-secondary:hover {
    background: #E4E0EC !important;
    background-color: #E4E0EC !important;
    color: #403272 !important;
    border-color: #C8C2DE !important;
}

.artist-dashboard-container button.btn-action-edit,
button.btn-action-edit {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.artist-dashboard-container button.btn-action-edit:hover,
button.btn-action-edit:hover {
    background: #E4E0EC !important;
    background-color: #E4E0EC !important;
    color: #403272 !important;
    border-color: #C8C2DE !important;
}

.artist-dashboard-container button.btn-action-cashflow,
button.btn-action-cashflow {
    background: #403272 !important;
    background-color: #403272 !important;
    color: #FFFFFF !important;
    border: 1px solid #403272 !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.artist-dashboard-container button.btn-action-cashflow:hover,
button.btn-action-cashflow:hover {
    background: #32255d !important;
    background-color: #32255d !important;
    color: #FFFFFF !important;
    border-color: #32255d !important;
}

.artist-dashboard-container button.btn-action-delete,
button.btn-action-delete {
    background: #FEF2F2 !important;
    background-color: #FEF2F2 !important;
    color: #DC2626 !important;
    border: 1px solid #FCA5A5 !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.artist-dashboard-container button.btn-action-delete:hover,
button.btn-action-delete:hover {
    background: #FEE2E2 !important;
    background-color: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: #F87171 !important;
}

.artist-dashboard-container button.btn-action-table,
button.btn-action-table {
    background: #F0EEF4 !important;
    background-color: #F0EEF4 !important;
    color: #403272 !important;
    border: 1px solid #DCD7EC !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.artist-dashboard-container button.btn-action-table:hover,
button.btn-action-table:hover {
    background: #E4E0EC !important;
    background-color: #E4E0EC !important;
    color: #403272 !important;
    border-color: #C8C2DE !important;
}