@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --fc-font: "Plus Jakarta Sans", system-ui, sans-serif;
    --fc-ink: #17120F;
    --fc-muted: #756B5F;
    --fc-gold: #AE7C41;
    --fc-bronze: #7A552B;
    --fc-line: rgba(126, 92, 54, 0.13);
    --fc-glass: rgba(255, 253, 249, 0.82);
    --fc-shadow: 0 20px 58px rgba(84, 50, 25, 0.12);
}

body.feature-command-center {
    color: var(--fc-ink);
    font-family: var(--fc-font) !important;
    background:
        radial-gradient(circle at 14% -8%, rgba(255,255,255,0.96), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(214,184,146,0.34), transparent 32%),
        linear-gradient(135deg, #FFFDF9 0%, #F6EFE3 58%, #EFE4D3 100%) !important;
}

body.feature-command-center h1,
body.feature-command-center h2,
body.feature-command-center h3,
body.feature-command-center .customer-pane-title,
body.feature-command-center .report-command-title,
body.feature-command-center .report-group-name,
body.feature-command-center .form-title {
    font-family: var(--fc-font) !important;
    letter-spacing: -0.026em;
}

body.feature-command-center input,
body.feature-command-center select,
body.feature-command-center textarea,
body.feature-command-center button {
    font-family: var(--fc-font) !important;
}

body.feature-command-center .container,
body.feature-command-center .booking-side-panel,
body.feature-command-center .booking-main-panel,
body.feature-command-center .report-command-panel,
body.feature-command-center .report-side-panel,
body.feature-command-center .report-preview-panel,
body.feature-command-center .control-panel,
body.feature-command-center .a4-container,
body.feature-command-center .customer-command-panel,
body.feature-command-center .sidebar-note-card,
body.feature-command-center .customer-workspace-area,
body.feature-marketing-social .card,
body.feature-marketing-social .modal-card,
body.feature-marketing-social .order-bulkbar,
body.feature-marketing-social .order-sheet-wrap {
    border-color: rgba(255,255,255,0.72) !important;
    border-radius: 26px !important;
    background: var(--fc-glass) !important;
    box-shadow: 0 18px 48px rgba(84,50,25,0.10) !important;
}

body.feature-customer-detail .action-bar {
    max-width: 1480px;
    gap: 12px;
}

body.feature-customer-detail .btn-control {
    min-height: 42px;
    border-radius: 999px;
    font-family: var(--fc-font) !important;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(84,50,25,0.07);
}

body.feature-customer-detail .container {
    border-radius: 28px !important;
}

body.feature-customer-detail .header {
    border-bottom-color: rgba(174,124,65,0.30) !important;
}

body.feature-customer-detail .title-box h1,
body.feature-customer-detail .section-title,
body.feature-customer-detail .brand-sub {
    font-family: var(--fc-font) !important;
    font-weight: 800 !important;
}

body.feature-command-center .customer-command-panel,
body.feature-command-center .booking-side-panel,
body.feature-command-center .report-command-panel,
body.feature-command-center .report-side-panel,
body.feature-marketing-social .sidebar,
body.feature-marketing-social .card:first-of-type {
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,0.82), rgba(255,255,255,0.24) 28%, transparent 44%),
        radial-gradient(circle at 92% 16%, rgba(214,184,146,0.38), transparent 36%),
        linear-gradient(155deg, rgba(255,255,255,0.48), rgba(255,248,236,0.28) 52%, rgba(224,198,161,0.22)) !important;
    border: 1px solid rgba(255,255,255,0.56) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.84),
        inset 0 -1px 0 rgba(126,92,54,0.08),
        0 24px 64px rgba(84,50,25,0.13) !important;
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
}

body.feature-command-center .profile-workspace,
body.feature-command-center .report-master-grid,
body.feature-command-center .report-workspace-grid {
    gap: 28px !important;
}

body.feature-customer-profile .page-shell,
body.feature-report .container,
body.feature-booking .booking-stage {
    max-width: 1520px !important;
}

body.feature-customer-profile .profile-workspace,
body.feature-report .report-master-grid {
    grid-template-columns: minmax(360px, 390px) minmax(0, 1fr) !important;
}

body.feature-customer-profile .profile-left-pane,
body.feature-report .report-left-pane,
body.feature-booking .booking-side-panel {
    position: sticky;
    top: 28px;
}

body.feature-customer-profile .customer-pane-title,
body.feature-report .report-command-title,
body.feature-booking .booking-side-panel h2,
body.feature-booking .booking-main-head h3 {
    color: var(--fc-ink) !important;
    font-size: clamp(24px, 2vw, 32px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
}

body.feature-customer-profile .customer-pane-note,
body.feature-report .report-command-note,
body.feature-report .report-group-desc,
body.feature-booking .booking-side-panel p,
body.feature-booking .booking-main-head p {
    color: var(--fc-muted) !important;
}

body.feature-command-center .btn,
body.feature-command-center .btn-action,
body.feature-command-center .btn-submit,
body.feature-command-center .btn-soft,
body.feature-marketing-social .btn,
body.feature-marketing-social .ai-pill {
    min-height: 42px;
    border-radius: 999px !important;
    font-weight: 800 !important;
    box-shadow: 0 12px 26px rgba(84,50,25,0.07);
}

body.feature-command-center .btn-gold,
body.feature-command-center .btn-gold-flat,
body.feature-command-center .btn-primary,
body.feature-command-center .btn-submit,
body.feature-marketing-social .btn-primary {
    border-color: var(--fc-gold) !important;
    background: linear-gradient(135deg, var(--fc-gold), var(--fc-bronze)) !important;
    color: #fff !important;
}

body.feature-command-center .btn-outline,
body.feature-command-center .btn-light,
body.feature-marketing-social .btn-outline,
body.feature-marketing-social .ai-pill {
    border: 1px solid rgba(174,124,65,0.20) !important;
    color: #3A241B !important;
    background: rgba(255,255,255,0.74) !important;
}

body.feature-command-center input,
body.feature-command-center select,
body.feature-command-center textarea,
body.feature-marketing-social input,
body.feature-marketing-social select,
body.feature-marketing-social textarea {
    border-color: rgba(126,92,54,0.18) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.82) !important;
}

body.feature-command-center label,
body.feature-marketing-social label,
body.feature-marketing-social .form-group label {
    color: rgba(95,77,62,0.72) !important;
    font-weight: 900 !important;
}

body.feature-customer-profile .customer-command-actions,
body.feature-report .report-command-actions {
    grid-template-columns: 1fr !important;
}

body.feature-customer-profile .sidebar-note-card,
body.feature-report .report-side-panel {
    background: rgba(255,255,255,0.36) !important;
}

body.feature-customer-profile .sidebar-note-item,
body.feature-report .report-side-item,
body.feature-booking .booking-quick-item {
    border-color: rgba(255,255,255,0.52) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.42) !important;
    color: rgba(48,39,31,0.86) !important;
}

body.feature-booking .bk-nav {
    background: rgba(255,253,249,0.76) !important;
    border-bottom: 1px solid rgba(126,92,54,0.12);
    box-shadow: 0 12px 36px rgba(84,50,25,0.08);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.feature-booking .bk-nav-right a {
    color: #3A241B !important;
}

body.feature-booking .booking-stage {
    padding-top: 104px !important;
    grid-template-columns: minmax(340px, 390px) minmax(0, 1fr) !important;
}

body.feature-booking .booking-form-card {
    max-width: none !important;
}

body.feature-report .a4-container {
    background: rgba(255,255,255,0.96) !important;
}

body.feature-marketing-social .shell {
    grid-template-columns: 296px minmax(0, 1fr) !important;
}

body.feature-marketing-social .sidebar {
    color: var(--fc-ink) !important;
    border-right: 1px solid rgba(126,92,54,0.12) !important;
}

body.feature-marketing-social .brand {
    border-bottom-color: rgba(126,92,54,0.12) !important;
}

body.feature-marketing-social .brand-mark,
body.feature-marketing-social .page-badge {
    color: var(--fc-gold) !important;
    background: linear-gradient(145deg, rgba(174,124,65,0.13), rgba(214,184,146,0.22)), #FFF9F0 !important;
}

body.feature-marketing-social .page-item {
    border-radius: 14px !important;
    color: #5C544C !important;
}

body.feature-marketing-social .page-item:hover,
body.feature-marketing-social .page-item.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--fc-gold), var(--fc-bronze)) !important;
}

body.feature-marketing-social .main {
    padding: 42px clamp(22px, 3.5vw, 54px) !important;
}

body.feature-marketing-social .topbar {
    align-items: flex-start !important;
    margin-bottom: 24px !important;
}

body.feature-marketing-social .topbar h1 {
    color: var(--fc-ink) !important;
    font-size: clamp(34px, 3.6vw, 58px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
}

body.feature-marketing-social .tabs {
    gap: 8px !important;
    border-bottom: 0 !important;
    margin-bottom: 22px !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.54) !important;
    box-shadow: 0 12px 34px rgba(84,50,25,0.08);
}

body.feature-marketing-social .tab {
    border: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
}

body.feature-marketing-social .tab.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--fc-gold), var(--fc-bronze)) !important;
}

body.feature-marketing-social .card h3 {
    color: var(--fc-ink) !important;
    border-bottom-color: rgba(126,92,54,0.12) !important;
}

body.feature-marketing-social .order-sheet-wrap {
    border-radius: 18px !important;
}

html.embed-mode body.feature-command-center,
html.embed-mode body.feature-marketing-social {
    background: #fff !important;
}

html.embed-mode body.feature-marketing-social .main,
html.embed-mode body.feature-command-center {
    padding: 16px !important;
}

/* ===== Customer workspace native shell inside Sales ===== */
html.embed-mode body.feature-customer-profile,
html.embed-mode body.feature-customer-detail {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% -8%, rgba(255,255,255,0.92), transparent 34%),
        radial-gradient(circle at 94% 6%, rgba(214,184,146,0.22), transparent 30%),
        linear-gradient(135deg, rgba(255,253,249,0.98), rgba(246,239,229,0.84)) !important;
}

html.embed-mode body.feature-customer-profile {
    padding: 0 2px 28px 0 !important;
}

html.embed-mode body.feature-customer-profile .page-shell {
    width: 100% !important;
    max-width: none !important;
}

body.feature-customer-profile .profile-workspace,
html.embed-mode body.feature-customer-profile .profile-workspace {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
}

html.embed-mode body.feature-customer-profile .profile-right-pane {
    width: 100% !important;
    min-width: 0 !important;
}

html.embed-mode body.feature-customer-profile .container {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.embed-mode body.feature-customer-profile .customer-command-panel,
html.embed-mode body.feature-customer-profile .customer-workspace-area,
html.embed-mode body.feature-customer-profile #profileFormArea {
    border-radius: 24px !important;
}

html.embed-mode body.feature-customer-profile .customer-command-actions a[href="index.html"] {
    display: none !important;
}

html.embed-mode body.feature-customer-profile .customer-command-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html.embed-mode body.feature-customer-profile .customer-pane-note,
html.embed-mode body.feature-customer-profile .sidebar-note-card {
    display: none !important;
}

html.embed-mode body.feature-customer-profile .customer-command-panel,
html.embed-mode body.feature-customer-profile .profile-right-pane {
    padding: clamp(20px, 2.2vw, 30px) !important;
    border: 1px solid rgba(255,255,255,0.76) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(255,255,255,0.72), transparent 30%),
        linear-gradient(155deg, rgba(255,253,249,0.86), rgba(246,238,226,0.68)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.84),
        0 18px 42px rgba(84,50,25,0.085) !important;
}

html.embed-mode body.feature-customer-profile .profile-left-pane {
    top: 0 !important;
}

html.embed-mode body.feature-customer-profile .customer-command-head {
    gap: 14px !important;
    margin-bottom: 18px !important;
}

html.embed-mode body.feature-customer-profile .customer-pane-title {
    font-size: clamp(24px, 2vw, 30px) !important;
    line-height: 1.08 !important;
}

html.embed-mode body.feature-customer-profile .customer-count {
    padding: 7px 11px !important;
    font-size: 12px !important;
}

html.embed-mode body.feature-customer-profile .customer-workspace-head p {
    display: none !important;
}

html.embed-mode body.feature-customer-profile .customer-summary-card,
html.embed-mode body.feature-customer-profile .customer-detail-item,
html.embed-mode body.feature-customer-profile .sales-birthday-widget {
    border-color: rgba(255,255,255,0.66) !important;
    background: rgba(255,255,255,0.58) !important;
    box-shadow: 0 14px 34px rgba(84,50,25,0.075) !important;
}

html.embed-mode body.feature-customer-profile .customer-hero-card {
    border-color: rgba(255,255,255,0.20) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(214,184,146,0.28), transparent 34%),
        linear-gradient(135deg, #17120F 0%, #2A2118 100%) !important;
}

body.feature-customer-detail .customer-detail-actionbar {
    align-items: center;
    margin-bottom: 18px;
}

body.feature-customer-detail .container#pdfArea {
    overflow: hidden;
    padding: clamp(24px, 3vw, 42px) !important;
}

body.feature-customer-detail .header {
    position: relative;
    overflow: hidden;
    margin: 0 0 28px !important;
    padding: clamp(26px, 3vw, 38px) !important;
    border: 0 !important;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 0%, rgba(214,184,146,0.34), transparent 35%),
        linear-gradient(135deg, #17120F 0%, #2A2118 100%);
    box-shadow: 0 22px 52px rgba(32,22,14,0.16);
}

body.feature-customer-detail .header::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(174,124,65,0.34), transparent 70%);
    pointer-events: none;
}

body.feature-customer-detail .title-box,
body.feature-customer-detail .brand-sub {
    position: relative;
    z-index: 1;
}

body.feature-customer-detail .title-box h1 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: clamp(28px, 3vw, 44px) !important;
    line-height: 1.05 !important;
    text-transform: none !important;
}

body.feature-customer-detail .title-box p {
    color: rgba(255,255,255,0.68) !important;
    font-weight: 700;
}

body.feature-customer-detail .brand-sub {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    color: #EAD0AD !important;
    background: rgba(255,255,255,0.08);
    font-size: 13px !important;
    font-style: normal !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.feature-customer-detail .section-title {
    margin: 26px 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(126,92,54,0.12) !important;
    color: #3A241B !important;
    font-size: clamp(18px, 1.55vw, 23px) !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
}

body.feature-customer-detail .section-title .material-icons {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fc-gold);
    background: rgba(174,124,65,0.12);
}

body.feature-customer-detail .info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px !important;
}

body.feature-customer-detail .info-item,
body.feature-customer-detail .list-item,
body.feature-customer-detail .booking-chip,
body.feature-customer-detail .booking-row {
    border: 1px solid rgba(126,92,54,0.12) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.70) !important;
    box-shadow: 0 12px 28px rgba(84,50,25,0.055);
}

body.feature-customer-detail .info-item {
    min-height: 82px;
    padding: 15px 16px !important;
    border-bottom: 1px solid rgba(126,92,54,0.12) !important;
}

body.feature-customer-detail .info-item strong {
    width: auto !important;
    display: block !important;
    margin-bottom: 7px;
    color: rgba(95,77,62,0.66) !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

body.feature-customer-detail .info-item span {
    color: #211812;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

body.feature-customer-detail .list-item {
    border-left: 4px solid var(--fc-gold) !important;
}

body.feature-customer-detail .booking-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.feature-customer-detail .booking-row {
    grid-template-columns: 110px minmax(0, 1fr) auto;
    border-left: 4px solid var(--fc-gold) !important;
}

html.embed-mode body.feature-customer-detail {
    padding: 0 !important;
}

html.embed-mode body.feature-customer-detail .action-bar,
html.embed-mode body.feature-customer-detail .container {
    max-width: none !important;
}

html.embed-mode body.feature-customer-detail .action-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0 0 14px;
    background: linear-gradient(180deg, rgba(255,253,249,0.96), rgba(255,253,249,0.70));
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

@media (max-width: 1180px) {
    html.embed-mode body.feature-customer-profile .profile-workspace,
    body.feature-customer-detail .info-grid {
        grid-template-columns: 1fr !important;
    }

    html.embed-mode body.feature-customer-profile .profile-left-pane {
        position: static;
    }

    body.feature-customer-detail .booking-summary,
    body.feature-customer-detail .booking-row {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1100px) {
    body.feature-customer-profile .profile-workspace,
    body.feature-report .report-master-grid,
    body.feature-report .report-workspace-grid,
    body.feature-booking .booking-stage {
        grid-template-columns: 1fr !important;
    }

    body.feature-customer-profile .profile-left-pane,
    body.feature-report .report-left-pane,
    body.feature-booking .booking-side-panel {
        position: static;
    }
}

@media (max-width: 760px) {
    body.feature-command-center {
        padding: 14px !important;
    }

    body.feature-marketing-social .shell {
        display: block !important;
    }

    body.feature-marketing-social .main {
        padding: 16px !important;
    }

    body.feature-marketing-social .topbar-actions {
        width: 100%;
    }
}

@media print {
    body.feature-command-center {
        background: #fff !important;
        padding: 0 !important;
    }

    body.feature-command-center .container,
    body.feature-command-center .a4-container {
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    body.feature-customer-detail .action-bar,
    body.feature-booking .bk-nav,
    body.feature-booking .mobile-bottom-bar,
    body.feature-marketing-social .sidebar,
    body.feature-marketing-social .topbar,
    body.feature-marketing-social .tabs {
        display: none !important;
    }
}