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

:root {
    --pn-navy: #0b1633;
    --pn-navy-soft: #132344;
    --pn-blue: #246bfd;
    --pn-blue-dark: #1854d8;
    --pn-terracotta: #9c4b35;
    --pn-terracotta-dark: #823d2a;
    --pn-terracotta-soft: #fbf3f0;
    --pn-green: #16a36a;
    --pn-green-soft: #ecfdf5;
    --pn-canvas: #f5f7fb;
    --pn-surface: #ffffff;
    --pn-border: #e4e9f1;
    --pn-border-strong: #d7dee9;
    --pn-text: #0b1220;
    --pn-muted: #697386;
}

html { font-size: 14px; }

html, body { max-width: 100%; }

body,
.font-sans,
button,
input,
select,
textarea {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
    color: var(--pn-text);
    background-color: var(--pn-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: #dbe8ff; color: var(--pn-navy); }

.bg-slate-50 { background-color: var(--pn-canvas) !important; }
.bg-slate-900, .bg-slate-950 { background-color: var(--pn-navy) !important; }
.text-slate-900 { color: var(--pn-text) !important; }
.text-slate-800 { color: #1d2939 !important; }
.text-slate-500, .text-gray-500 { color: var(--pn-muted) !important; }
.border-slate-200, .border-gray-100 { border-color: var(--pn-border) !important; }
.bg-blue-600 { background-color: var(--pn-blue) !important; }
.hover\:bg-blue-700:hover { background-color: var(--pn-blue-dark) !important; }
.text-blue-600, .text-blue-700 { color: var(--pn-blue) !important; }
.bg-green-100 { background-color: var(--pn-green-soft) !important; }
.text-green-600, .text-green-700 { color: var(--pn-green) !important; }

.font-black { font-weight: 700 !important; }
.tracking-tight { letter-spacing: -0.025em !important; }

button,
a,
input,
select,
textarea {
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 180ms;
    transition-timing-function: ease;
}

button[class*="bg-blue-"],
a[class*="bg-blue-"] {
    box-shadow: 0 6px 16px rgba(36, 107, 253, 0.16);
}

button[class*="bg-[#9C4B35]"],
a[class*="bg-[#9C4B35]"] {
    box-shadow: 0 5px 14px rgba(156, 75, 53, 0.14);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    border-radius: 12px !important;
    border-color: var(--pn-border-strong) !important;
    background-color: #fbfcfe !important;
    color: var(--pn-text) !important;
    min-height: 42px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: #8bb0ff !important;
    box-shadow: 0 0 0 3px rgba(36, 107, 253, 0.10) !important;
}

input::placeholder,
textarea::placeholder { color: #98a2b3 !important; }

label { letter-spacing: 0.01em; }

.shadow-sm { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035) !important; }
.shadow-md { box-shadow: 0 5px 14px rgba(16, 24, 40, 0.08) !important; }
.shadow-lg { box-shadow: 0 10px 28px rgba(16, 24, 40, 0.10) !important; }
.shadow-xl, .shadow-2xl { box-shadow: 0 20px 48px rgba(16, 24, 40, 0.16) !important; }

/* Authenticated application shell */
body[data-pn-area="app"] #propnode-sidebar {
    width: 16rem !important;
    background: var(--pn-navy) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

body[data-pn-area="app"] main {
    background: var(--pn-canvas);
    scrollbar-gutter: stable;
}

body[data-pn-area="app"] main > div[class*="max-w-"] {
    width: 100%;
}

body[data-pn-area="app"] main .bg-white.border,
body[data-pn-area="app"] main section.bg-white,
body[data-pn-area="app"] main article.bg-white {
    border-color: var(--pn-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.035) !important;
}

body[data-pn-area="app"] main .bg-white.border:hover {
    border-color: #cfd9e8 !important;
}

/* Dashboard uses denser information surfaces than the rest of the app. */
body[data-pn-page="dashboard"] main { font-size: .94rem; }
body[data-pn-page="dashboard"] main h1 { font-size: 1.85rem !important; }
body[data-pn-page="dashboard"] main > div > div:first-child { margin-bottom: 1.25rem !important; }
body[data-pn-page="dashboard"] .pn-metrics-grid {
    gap: 12px !important;
    margin-bottom: 18px !important;
}
body[data-pn-page="dashboard"] .pn-metrics-grid > div {
    padding: 16px !important;
    gap: 12px !important;
}
body[data-pn-page="dashboard"] .pn-metrics-grid > div > div:first-child {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 1.15rem !important;
}
body[data-pn-page="dashboard"] .pn-metrics-grid h2 { font-size: 1.45rem !important; }
body[data-pn-page="dashboard"] #onboarding-banner,
body[data-pn-page="dashboard"] #onboarding-banner + div { margin-bottom: 18px !important; }
body[data-pn-page="dashboard"] .dashboard-content-grid { gap: 18px !important; }
body[data-pn-page="dashboard"] #landlord-grid { gap: 14px !important; }
body[data-pn-page="dashboard"] #landlord-grid > div { padding: 16px !important; }
body[data-pn-page="dashboard"] #landlord-grid > div .mb-5 { margin-bottom: 12px !important; }
body[data-pn-page="dashboard"] #landlord-grid > div h3 {
    margin-bottom: 14px !important;
    font-size: 1rem !important;
}
body[data-pn-page="dashboard"] #landlord-grid > div .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 10px !important;
}
body[data-pn-page="dashboard"] .dashboard-chart-card {
    align-self: start;
    min-height: 290px !important;
    padding: 18px !important;
    border-radius: 18px !important;
}
body[data-pn-page="dashboard"] .dashboard-chart-canvas canvas { max-height: 220px !important; }
body[data-pn-page="dashboard"] .client-directory-toggle { min-height: 34px; }

body[data-pn-area="app"] main h1 {
    color: var(--pn-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
}

body[data-pn-area="app"] main h2,
body[data-pn-area="app"] main h3 {
    letter-spacing: -0.015em;
}

body[data-pn-area="app"] [class*="fixed inset-0"] > .bg-white {
    border-radius: 18px !important;
    border-color: var(--pn-border) !important;
}

body[data-pn-area="app"] table thead {
    background: #f8fafc;
    color: #475467;
}

body[data-pn-area="app"] table th {
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

body[data-pn-area="app"] table tr { border-color: #edf1f6 !important; }

body[data-pn-area="app"] .custom-scrollbar::-webkit-scrollbar,
body[data-pn-area="app"] main::-webkit-scrollbar { width: 6px; height: 6px; }

body[data-pn-area="app"] .custom-scrollbar::-webkit-scrollbar-thumb,
body[data-pn-area="app"] main::-webkit-scrollbar-thumb {
    background: #cdd5df;
    border-radius: 999px;
}

/* Authentication and workspace onboarding */
body[data-pn-area="auth"] {
    background:
        radial-gradient(circle at 12% 10%, rgba(36,107,253,.08), transparent 28%),
        radial-gradient(circle at 88% 92%, rgba(156,75,53,.08), transparent 30%),
        var(--pn-canvas) !important;
}

body[data-pn-area="auth"] > div[class*="max-w-"],
body[data-pn-area="auth"] > main[class*="max-w-"] {
    border-radius: 20px !important;
}

body[data-pn-area="auth"] .bg-slate-900,
body[data-pn-area="auth"] .bg-slate-950 {
    background: linear-gradient(145deg, var(--pn-navy), #142a58) !important;
}

/* Pricing */
body[data-pn-page="pricing"] {
    background:
        radial-gradient(circle at 50% -5%, rgba(36,107,253,.08), transparent 26%),
        var(--pn-canvas) !important;
}

body[data-pn-page="pricing"] > div[class*="max-w-"] > div[class*="grid"] > div {
    border-radius: 20px !important;
}

/* Public marketing pages */
body[data-pn-area="public"] { background: #fff !important; }

body[data-pn-area="public"] nav.bg-slate-950\/80 {
    background: rgba(11, 22, 51, 0.92) !important;
    border-color: rgba(255,255,255,.08) !important;
}

body[data-pn-area="public"] .bg-hero-dark {
    background:
        radial-gradient(circle at 78% 20%, rgba(36,107,253,.22), transparent 32%),
        radial-gradient(circle at 15% 85%, rgba(156,75,53,.15), transparent 30%),
        linear-gradient(145deg, #08122b 0%, #0d1e45 58%, #112a59 100%) !important;
}

body[data-pn-area="public"] section.bg-\[\#f0f9ff\] {
    background-color: #f5f8fc !important;
    border-color: var(--pn-border) !important;
}

body[data-pn-area="public"] section h1,
body[data-pn-area="public"] section h2 { letter-spacing: -0.04em !important; }

body[data-pn-area="public"] section .bg-white.border {
    border-color: var(--pn-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 24px rgba(15, 35, 70, .05) !important;
}

body[data-pn-area="public"] footer.bg-slate-950 {
    background: #08122b !important;
}

/* Home page: retain the spacious presentation without oversized empty bands. */
body[data-pn-page="home"] section.py-32 { padding-block: 5rem !important; }
body[data-pn-page="home"] section.py-24 { padding-block: 4.5rem !important; }
body[data-pn-page="home"] section.pt-28 { padding-top: 4.5rem !important; }
body[data-pn-page="home"] section.pb-16 { padding-bottom: 4rem !important; }
body[data-pn-page="home"] section.pt-20 { padding-top: 4.5rem !important; }
body[data-pn-page="home"] section.pb-20 { padding-bottom: 4.5rem !important; }
body[data-pn-page="home"] section .mb-20 { margin-bottom: 3rem !important; }
body[data-pn-page="home"] section .mb-16 { margin-bottom: 2.75rem !important; }
body[data-pn-page="home"] section .mb-12 { margin-bottom: 2.25rem !important; }
body[data-pn-page="home"] section .p-10 { padding: 2rem !important; }
body[data-pn-page="home"] section .p-8 { padding: 1.65rem !important; }

/* Warm accents are deliberately secondary to PropNode blue. */
body[data-pn-page="home"] #solutions > div > div:first-child > p {
    color: var(--pn-terracotta) !important;
}

body[data-pn-page="home"] #solutions .grid > div:nth-child(even) > i,
body[data-pn-page="home"] #features .grid > div:nth-child(3n + 2) > div:first-child {
    color: var(--pn-terracotta) !important;
    background-color: var(--pn-terracotta-soft) !important;
}

body[data-pn-page="home"] #features .grid > div:nth-child(3n + 2):hover > div:first-child {
    color: #fff !important;
    background-color: var(--pn-terracotta) !important;
}

body[data-pn-page="home"] section:last-of-type {
    background:
        radial-gradient(circle at 85% 15%, rgba(156,75,53,.10), transparent 24rem),
        #f5f8fc !important;
}

/* Terracotta is a supporting signal, not a competing primary colour. */
.pn-terracotta-surface { background: var(--pn-terracotta-soft) !important; border-color: #ebd8d2 !important; }
.pn-terracotta-text { color: var(--pn-terracotta) !important; }
.pn-success-text { color: var(--pn-green) !important; }

@media (max-width: 767px) {
    html { font-size: 13px; }

    body[data-pn-area="app"] main {
        scrollbar-gutter: auto;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body[data-pn-area="app"] main h1 {
        font-size: 1.72rem !important;
        line-height: 1.18 !important;
        letter-spacing: -0.025em !important;
    }

    body[data-pn-area="app"] main h2 { font-size: 1.14rem !important; }
    body[data-pn-area="app"] main h3 { font-size: 1.06rem !important; }

    body[data-pn-area="app"] main .p-8,
    body[data-pn-area="app"] main .p-7,
    body[data-pn-area="app"] main .p-6 { padding: 18px !important; }

    body[data-pn-area="app"] main .p-5 { padding: 16px !important; }
    body[data-pn-area="app"] main .gap-8 { gap: 18px !important; }
    body[data-pn-area="app"] main .gap-6 { gap: 16px !important; }
    body[data-pn-area="app"] main .gap-5 { gap: 14px !important; }
    body[data-pn-area="app"] main .mb-8 { margin-bottom: 20px !important; }
    body[data-pn-area="app"] main .mb-6 { margin-bottom: 16px !important; }

    body[data-pn-area="app"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    body[data-pn-area="app"] select,
    body[data-pn-area="app"] textarea { min-height: 39px; }

    body[data-pn-area="app"] button,
    body[data-pn-area="app"] input,
    body[data-pn-area="app"] select,
    body[data-pn-area="app"] textarea { font-size: .9rem; }

    /* Dashboard: two compact metrics first, then one full-width metric. */
    body[data-pn-page="dashboard"] main {
        padding-top: 64px !important;
        padding-bottom: 78px !important;
    }

    body[data-pn-page="dashboard"] main > div > div:first-child {
        gap: 12px !important;
        margin-bottom: 18px !important;
    }

    body[data-pn-page="dashboard"] main > div > div:first-child > div > p:first-child {
        font-size: .68rem !important;
        margin-bottom: 4px !important;
    }

    body[data-pn-page="dashboard"] main > div > div:first-child > div > p:last-child {
        font-size: .84rem !important;
        margin-top: 3px !important;
    }

    body[data-pn-page="dashboard"] main > div > div:first-child > button {
        min-height: 38px;
        padding-block: 9px !important;
    }

    body[data-pn-page="dashboard"] .pn-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    body[data-pn-page="dashboard"] .pn-metrics-grid > div {
        min-width: 0;
        min-height: 108px;
        padding: 13px !important;
        gap: 9px !important;
        flex-direction: column;
        align-items: flex-start;
        border-radius: 14px !important;
    }

    body[data-pn-page="dashboard"] .pn-metrics-grid > div:last-child {
        grid-column: 1 / -1;
        min-height: 70px;
        flex-direction: row;
        align-items: center;
    }

    body[data-pn-page="dashboard"] .pn-metrics-grid > div > div:first-child {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        font-size: 1rem !important;
    }

    body[data-pn-page="dashboard"] .pn-metrics-grid > div > div:last-child {
        min-width: 0;
        width: 100%;
    }

    body[data-pn-page="dashboard"] .pn-metrics-grid p {
        margin-bottom: 3px !important;
        font-size: .72rem !important;
        line-height: 1.25 !important;
    }

    body[data-pn-page="dashboard"] .pn-metrics-grid h2 {
        overflow-wrap: anywhere;
        font-size: 1.27rem !important;
        line-height: 1.05 !important;
        letter-spacing: -.035em !important;
    }

    body[data-pn-page="dashboard"] #onboarding-banner {
        padding: 13px !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
        align-items: stretch !important;
    }

    body[data-pn-page="dashboard"] #onboarding-banner > div { gap: 11px !important; }
    body[data-pn-page="dashboard"] #onboarding-banner > div > div:first-child {
        width: 38px !important;
        height: 38px !important;
    }
    body[data-pn-page="dashboard"] #onboarding-banner p { font-size: .78rem !important; }
    body[data-pn-page="dashboard"] #onboarding-banner button {
        min-height: 36px;
        margin-top: 0 !important;
        padding-block: 8px !important;
    }

    body[data-pn-page="dashboard"] #onboarding-banner + div {
        padding: 14px !important;
        gap: 11px !important;
        margin-bottom: 20px !important;
        border-radius: 14px !important;
    }

    body[data-pn-page="dashboard"] #onboarding-banner + div > div:nth-child(2) {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
    }

    body[data-pn-page="dashboard"] #proptech-tip-text {
        padding-right: 0 !important;
        font-size: .84rem !important;
        line-height: 1.45 !important;
    }

    body[data-pn-page="dashboard"] #landlord-grid { gap: 12px !important; }
    body[data-pn-page="dashboard"] #landlord-grid > div { padding: 16px !important; }
    body[data-pn-page="dashboard"] .dashboard-chart-card {
        min-height: 250px !important;
        padding: 16px !important;
    }
    body[data-pn-page="dashboard"] .dashboard-chart-canvas {
        min-height: 185px !important;
    }
    body[data-pn-page="dashboard"] .dashboard-chart-canvas canvas {
        max-height: 185px !important;
    }
    body[data-pn-page="dashboard"] button.fixed.md\:hidden {
        width: 46px !important;
        height: 46px !important;
        font-size: 1rem !important;
    }

    /* Public home: smaller section gaps while preserving the hero hierarchy. */
    body[data-pn-page="home"] section.py-32,
    body[data-pn-page="home"] section.py-24 { padding-block: 4rem !important; }
    body[data-pn-page="home"] section.pt-28,
    body[data-pn-page="home"] section.pt-20 { padding-top: 4rem !important; }
    body[data-pn-page="home"] section.pb-20,
    body[data-pn-page="home"] section.pb-16 { padding-bottom: 3.5rem !important; }
    body[data-pn-page="home"] section .mb-20,
    body[data-pn-page="home"] section .mb-16,
    body[data-pn-page="home"] section .mb-12 { margin-bottom: 2.25rem !important; }
    body[data-pn-page="home"] section .gap-16 { gap: 2.5rem !important; }
    body[data-pn-page="home"] section .gap-8 { gap: 1rem !important; }
    body[data-pn-page="home"] section .p-10,
    body[data-pn-page="home"] section .p-8,
    body[data-pn-page="home"] section .p-6 { padding: 1.4rem !important; }
    body[data-pn-page="home"] footer { padding-block: 3.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}