/*
============================================================
 PROPNOOK SAAS DESIGN SYSTEM
 Powerful underneath. Simple on top.
============================================================

Permanent shared component foundation.

IMPORTANT:
- New UI uses pn-* classes.
- Existing legacy layouts are NOT globally resized.
- Freddy artwork is supplied by existing approved PropNook assets.
============================================================
*/

:root {
    --pn-navy-950:#0f1d2e;
    --pn-navy-900:#162538;
    --pn-navy-800:#1e2c3f;

    --pn-orange:#ff8a00;
    --pn-gold:#ffc04d;

    --pn-white:#fff;
    --pn-bg:#f6f7f9;
    --pn-surface:#fff;
    --pn-surface-soft:#f9fafb;

    --pn-text:#18212f;
    --pn-text-soft:#566273;
    --pn-text-muted:#7b8794;

    --pn-border:#dfe3e8;
    --pn-border-strong:#c8cdd3;

    --pn-primary:#2457d6;
    --pn-primary-hover:#1d49b8;
    --pn-primary-soft:#eef3ff;

    --pn-success:#287a4b;
    --pn-success-soft:#edf8f1;

    --pn-warning:#9a6500;
    --pn-warning-soft:#fff7df;

    --pn-danger:#b42318;
    --pn-danger-soft:#fff0ee;

    --pn-info:#2563a9;
    --pn-info-soft:#edf6ff;

    --pn-font:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --pn-xs:12px;
    --pn-sm:13px;
    --pn-md:15px;
    --pn-lg:17px;
    --pn-xl:21px;
    --pn-2xl:28px;
    --pn-3xl:34px;

    --pn-s1:4px;
    --pn-s2:8px;
    --pn-s3:12px;
    --pn-s4:16px;
    --pn-s5:20px;
    --pn-s6:24px;
    --pn-s8:32px;
    --pn-s10:40px;

    --pn-radius-sm:6px;
    --pn-radius:8px;
    --pn-radius-lg:10px;

    --pn-sidebar-width:252px;
    --pn-topbar-height:64px;
    --pn-workspace-max:1500px;

    --pn-shadow-sm:0 1px 2px rgba(15,29,46,.05);
    --pn-shadow-md:0 5px 18px rgba(15,29,46,.08);

    --pn-transition:150ms ease;
}


/* ---------- WORKSPACE ---------- */

.pn-saas {
    color:var(--pn-text);
    font-family:var(--pn-font);
    font-size:var(--pn-md);
    line-height:1.5;
}

.pn-saas *,
.pn-saas *::before,
.pn-saas *::after {
    box-sizing:border-box;
}

.pn-workspace {
    width:100%;
    max-width:var(--pn-workspace-max);
    margin:0 auto;
}

.pn-stack {
    display:flex;
    flex-direction:column;
    gap:var(--pn-s6);
}

.pn-stack-sm {
    display:flex;
    flex-direction:column;
    gap:var(--pn-s3);
}

.pn-row {
    display:flex;
    align-items:center;
    gap:var(--pn-s3);
}

.pn-row-between {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--pn-s4);
}

.pn-grow {
    flex:1 1 auto;
    min-width:0;
}


/* ---------- PAGE HEADER ---------- */

.pn-page-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--pn-s6);
    margin-bottom:var(--pn-s6);
}

.pn-page-heading {
    min-width:0;
}

.pn-page-eyebrow {
    margin:0 0 var(--pn-s1);
    color:var(--pn-primary);
    font-size:var(--pn-xs);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.pn-page-title {
    margin:0;
    color:var(--pn-text);
    font-size:var(--pn-2xl);
    font-weight:700;
    letter-spacing:-.025em;
    line-height:1.2;
}

.pn-page-subtitle {
    max-width:760px;
    margin:var(--pn-s2) 0 0;
    color:var(--pn-text-soft);
}

.pn-page-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:var(--pn-s2);
}


/* ---------- BUTTONS ---------- */

.pn-btn {
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--pn-s2);

    padding:8px 14px;

    border:1px solid transparent;
    border-radius:var(--pn-radius);

    background:var(--pn-white);
    color:var(--pn-text);

    font:inherit;
    font-size:var(--pn-sm);
    font-weight:650;
    line-height:1;

    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;

    transition:
        background var(--pn-transition),
        border-color var(--pn-transition),
        color var(--pn-transition),
        box-shadow var(--pn-transition);
}

.pn-btn:hover {
    text-decoration:none;
}

.pn-btn:focus-visible {
    outline:3px solid rgba(36,87,214,.18);
    outline-offset:2px;
}

.pn-btn-primary {
    background:var(--pn-primary);
    border-color:var(--pn-primary);
    color:var(--pn-white);
}

.pn-btn-primary:hover {
    background:var(--pn-primary-hover);
    border-color:var(--pn-primary-hover);
}

.pn-btn-secondary {
    border-color:var(--pn-border);
}

.pn-btn-secondary:hover {
    background:var(--pn-surface-soft);
    border-color:var(--pn-border-strong);
}

.pn-btn-quiet {
    background:transparent;
    color:var(--pn-text-soft);
}

.pn-btn-quiet:hover {
    background:var(--pn-surface-soft);
    color:var(--pn-text);
}

.pn-btn-danger {
    background:var(--pn-danger);
    border-color:var(--pn-danger);
    color:var(--pn-white);
}

.pn-btn-sm {
    min-height:34px;
    padding:6px 10px;
    font-size:var(--pn-xs);
}


/* ---------- CARDS / PANELS ---------- */

.pn-card,
.pn-panel {
    background:var(--pn-surface);
    border:1px solid var(--pn-border);
    border-radius:var(--pn-radius-lg);
    box-shadow:var(--pn-shadow-sm);
}

.pn-card {
    padding:var(--pn-s5);
}

.pn-panel-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--pn-s4);

    padding:var(--pn-s4) var(--pn-s5);
    border-bottom:1px solid var(--pn-border);
}

.pn-panel-body {
    padding:var(--pn-s5);
}

.pn-panel-footer {
    padding:var(--pn-s4) var(--pn-s5);
    border-top:1px solid var(--pn-border);
}

.pn-section-title {
    margin:0;
    font-size:var(--pn-lg);
    font-weight:700;
}

.pn-section-subtitle {
    margin:var(--pn-s1) 0 0;
    color:var(--pn-text-muted);
    font-size:var(--pn-sm);
}


/* ---------- KPI ---------- */

.pn-kpi-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--pn-s4);
}

.pn-kpi {
    min-width:0;
    padding:var(--pn-s5);

    background:var(--pn-surface);
    border:1px solid var(--pn-border);
    border-radius:var(--pn-radius-lg);
}

.pn-kpi-label {
    color:var(--pn-text-muted);
    font-size:var(--pn-sm);
    font-weight:600;
}

.pn-kpi-value {
    margin-top:var(--pn-s2);
    color:var(--pn-text);
    font-size:var(--pn-2xl);
    font-weight:750;
    letter-spacing:-.03em;
    line-height:1;
}

.pn-kpi-meta {
    margin-top:var(--pn-s2);
    color:var(--pn-text-soft);
    font-size:var(--pn-xs);
}


/* ---------- FORMS ---------- */

.pn-form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--pn-s4);
}

.pn-field {
    display:flex;
    flex-direction:column;
    gap:var(--pn-s2);
    min-width:0;
}

.pn-field-full {
    grid-column:1/-1;
}

.pn-label {
    color:var(--pn-text);
    font-size:var(--pn-sm);
    font-weight:650;
}

.pn-help {
    color:var(--pn-text-muted);
    font-size:var(--pn-xs);
}

.pn-input,
.pn-select,
.pn-textarea {
    width:100%;
    min-height:42px;
    padding:9px 11px;

    border:1px solid var(--pn-border-strong);
    border-radius:var(--pn-radius);

    background:var(--pn-white);
    color:var(--pn-text);

    font:inherit;
    font-size:var(--pn-sm);
}

.pn-textarea {
    min-height:110px;
    resize:vertical;
}

.pn-input:focus,
.pn-select:focus,
.pn-textarea:focus {
    outline:none;
    border-color:var(--pn-primary);
    box-shadow:0 0 0 3px rgba(36,87,214,.12);
}


/* ---------- TOOLBAR ---------- */

.pn-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--pn-s3);

    padding:var(--pn-s3);

    background:var(--pn-surface);
    border:1px solid var(--pn-border);
    border-radius:var(--pn-radius-lg);
}

.pn-toolbar-group {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--pn-s2);
}

.pn-search-field {
    width:min(360px,100%);
}


/* ---------- TABLE ---------- */

.pn-table-wrap {
    width:100%;
    overflow-x:auto;

    background:var(--pn-surface);
    border:1px solid var(--pn-border);
    border-radius:var(--pn-radius-lg);
}

.pn-table {
    width:100%;
    border-collapse:collapse;
    font-size:var(--pn-sm);
}

.pn-table th {
    padding:11px 14px;

    background:var(--pn-surface-soft);
    border-bottom:1px solid var(--pn-border);

    color:var(--pn-text-muted);
    font-size:var(--pn-xs);
    font-weight:700;
    text-align:left;
    text-transform:uppercase;
    white-space:nowrap;
}

.pn-table td {
    padding:13px 14px;
    border-bottom:1px solid var(--pn-border);
    vertical-align:middle;
}

.pn-table tbody tr:last-child td {
    border-bottom:0;
}

.pn-table tbody tr:hover {
    background:var(--pn-surface-soft);
}


/* ---------- STATUS ---------- */

.pn-badge {
    display:inline-flex;
    align-items:center;
    min-height:24px;

    padding:3px 8px;

    border-radius:999px;

    background:var(--pn-surface-soft);
    color:var(--pn-text-soft);

    font-size:var(--pn-xs);
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

.pn-badge-success {
    background:var(--pn-success-soft);
    color:var(--pn-success);
}

.pn-badge-warning {
    background:var(--pn-warning-soft);
    color:var(--pn-warning);
}

.pn-badge-danger {
    background:var(--pn-danger-soft);
    color:var(--pn-danger);
}

.pn-badge-info {
    background:var(--pn-info-soft);
    color:var(--pn-info);
}


/* ---------- ALERT ---------- */

.pn-alert {
    padding:var(--pn-s3) var(--pn-s4);
    border:1px solid var(--pn-border);
    border-radius:var(--pn-radius);

    background:var(--pn-surface-soft);
    font-size:var(--pn-sm);
}

.pn-alert-success { background:var(--pn-success-soft); }
.pn-alert-warning { background:var(--pn-warning-soft); }
.pn-alert-danger  { background:var(--pn-danger-soft); }
.pn-alert-info    { background:var(--pn-info-soft); }


/* ---------- EMPTY STATE ---------- */

.pn-empty {
    display:flex;
    flex-direction:column;
    align-items:center;

    padding:48px 24px;

    background:var(--pn-surface);
    border:1px dashed var(--pn-border-strong);
    border-radius:var(--pn-radius-lg);

    text-align:center;
}

.pn-empty-title {
    margin:0;
    font-size:var(--pn-lg);
    font-weight:700;
}

.pn-empty-copy {
    max-width:520px;
    margin:var(--pn-s2) auto var(--pn-s4);
    color:var(--pn-text-muted);
}

.pn-empty-freddy {
    display:block;
    width:auto;
    max-width:120px;
    max-height:120px;
    object-fit:contain;
    margin-bottom:var(--pn-s4);
}


/* ---------- DRAWERS / MODALS ---------- */

.pn-overlay {
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(15,29,46,.42);
}

.pn-drawer {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:1010;

    width:min(520px,100vw);
    overflow-y:auto;

    background:var(--pn-white);
    border-left:1px solid var(--pn-border);
    box-shadow:var(--pn-shadow-md);
}

.pn-modal {
    width:min(620px,calc(100vw - 32px));
    max-height:calc(100vh - 64px);
    overflow-y:auto;

    background:var(--pn-white);
    border:1px solid var(--pn-border);
    border-radius:var(--pn-radius-lg);
    box-shadow:var(--pn-shadow-md);
}

.pn-modal-header,
.pn-drawer-header {
    padding:var(--pn-s5);
    border-bottom:1px solid var(--pn-border);
}

.pn-modal-body,
.pn-drawer-body {
    padding:var(--pn-s5);
}

.pn-modal-footer,
.pn-drawer-footer {
    padding:var(--pn-s4) var(--pn-s5);
    border-top:1px solid var(--pn-border);
}


/* ---------- TOAST / LOADING ---------- */

.pn-toast-region {
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1100;

    display:flex;
    flex-direction:column;
    gap:var(--pn-s2);

    width:min(380px,calc(100vw - 40px));
}

.pn-toast {
    padding:var(--pn-s3) var(--pn-s4);

    background:var(--pn-navy-950);
    border-radius:var(--pn-radius);
    box-shadow:var(--pn-shadow-md);

    color:var(--pn-white);
    font-size:var(--pn-sm);
}

.pn-skeleton {
    min-height:14px;
    border-radius:var(--pn-radius-sm);
    background:#e9edf1;
}

.pn-loading {
    opacity:.65;
    pointer-events:none;
}


/* ---------- RECORDS ---------- */

.pn-record-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--pn-s4);
}

.pn-record-card {
    min-width:0;
    padding:var(--pn-s4);

    background:var(--pn-surface);
    border:1px solid var(--pn-border);
    border-radius:var(--pn-radius-lg);

    transition:
        border-color var(--pn-transition),
        box-shadow var(--pn-transition);
}

.pn-record-card:hover {
    border-color:var(--pn-border-strong);
    box-shadow:var(--pn-shadow-sm);
}


/* ---------- FREDDY ---------- */

/*
Only existing approved Freddy artwork should be supplied
to these components. This design system does not redraw,
replace, generate, or substitute the PropNook mascot.
*/

.pn-freddy-card {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:var(--pn-s4);

    padding:var(--pn-s4);

    background:var(--pn-primary-soft);
    border:1px solid #d9e3ff;
    border-radius:var(--pn-radius-lg);
}

.pn-freddy-art {
    width:auto;
    max-width:110px;
    max-height:110px;
    object-fit:contain;
}

.pn-freddy-title {
    margin:0;
    font-weight:700;
}

.pn-freddy-copy {
    margin:var(--pn-s1) 0 0;
    color:var(--pn-text-soft);
    font-size:var(--pn-sm);
}


/* ---------- UTILITIES ---------- */

.pn-muted { color:var(--pn-text-muted); }
.pn-text-danger { color:var(--pn-danger); }
.pn-text-success { color:var(--pn-success); }

.pn-sr-only {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width:1100px) {
    .pn-kpi-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .pn-record-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:720px) {
    .pn-page-header {
        flex-direction:column;
    }

    .pn-page-actions {
        width:100%;
        justify-content:flex-start;
    }

    .pn-form-grid,
    .pn-kpi-grid,
    .pn-record-grid {
        grid-template-columns:1fr;
    }

    .pn-toolbar {
        align-items:stretch;
        flex-direction:column;
    }

    .pn-toolbar-group,
    .pn-search-field {
        width:100%;
    }

    .pn-freddy-card {
        grid-template-columns:1fr;
    }

    .pn-freddy-art {
        max-width:90px;
    }
}