/*
 PropNook Cohesion Layer
 Conservative shell-only cleanup.

 IMPORTANT:
 This file intentionally does NOT globally resize:
 - forms
 - inputs
 - selects
 - property cards
 - PM layouts
 - buttons
 - tables

 Dashboard remains the visual reference.
*/

:root {
    --pn-cohesion-bg: #f7f8fb;
    --pn-cohesion-surface: #ffffff;
    --pn-cohesion-border: #e6e9ef;
    --pn-cohesion-text: #172033;
    --pn-cohesion-muted: #6b7485;
    --pn-cohesion-radius: 9px;
}


/* ==========================================
   MAIN APPLICATION CANVAS
   ========================================== */

.main-content {
    min-width: 0;
    box-sizing: border-box;
    background: var(--pn-cohesion-bg);
}


/*
 Do not stretch child content.
 Only give the page a consistent canvas.
*/

.main-content > .page,
.main-content > .dashboard,
main > .page,
main > .dashboard {
    box-sizing: border-box;

    margin-left: auto;
    margin-right: auto;

    padding-top: 28px;
    padding-bottom: 36px;
}


/* ==========================================
   PAGE HEADERS
   ========================================== */

.main-content h1 {
    margin-top: 0;
    margin-bottom: 5px;

    color: var(--pn-cohesion-text);

    line-height: 1.15;
    letter-spacing: -.015em;
}

.main-content h1 + p {
    margin-top: 0;
    color: var(--pn-cohesion-muted);
}


/* ==========================================
   SECTIONS
   ========================================== */

.main-content section,
.main-content article {
    box-sizing: border-box;
}

.main-content hr {
    border: 0;
    border-top: 1px solid var(--pn-cohesion-border);
}


/* ==========================================
   EXISTING PANELS
   ========================================== */

/*
 Only polish elements that are ALREADY cards/panels.
 Do not turn every div into a card.
*/

.main-content .panel,
.main-content .card,
.main-content .empty-state,
.main-content .dashboard-card,
.main-content .settings-card,
.main-content .table-card {
    border-color: var(--pn-cohesion-border);
    border-radius: var(--pn-cohesion-radius);
    background: var(--pn-cohesion-surface);
}


/* ==========================================
   EMPTY STATES
   ========================================== */

.main-content .empty-state {
    min-height: 150px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 28px;
}

.main-content .empty-state p {
    max-width: 480px;
}


/* ==========================================
   FOOTER
   ========================================== */

.main-content footer,
.main-content .site-footer,
.main-content .app-footer {
    box-sizing: border-box;

    margin-top: 28px;

    padding-top: 16px;
    padding-bottom: 22px;

    border-top: 1px solid var(--pn-cohesion-border);

    color: #778196;

    font-size: 12px;
}


/* ==========================================
   LINKS / MUTED TEXT
   ========================================== */

.main-content .muted,
.main-content .subtitle,
.main-content .page-subtitle {
    color: var(--pn-cohesion-muted);
}


/* ==========================================
   WIDE DESKTOP
   ========================================== */

@media (min-width: 1200px) {

    .main-content {
        padding-left: 24px;
        padding-right: 24px;
    }
}


/* ==========================================
   MOBILE / SMALL SCREEN
   ========================================== */

@media (max-width: 999px) {

    .main-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .main-content > .page,
    .main-content > .dashboard,
    main > .page,
    main > .dashboard {
        padding-top: 20px;
        padding-bottom: 28px;
    }
}