/* ============================================================
   GLOBAL — Page Shell & Navigation
   Base reset, CSS variables, body, sidebar, top bar, and the
   shared page-content wrapper. Used on every page - not tied to
   any single page/js file.
   ============================================================ */

/* --- Reset & shared variables --- */

/* Remove the browser's default spacing assumptions */
* {
    box-sizing: border-box;
}

/* Main colour and spacing variables */
:root {
    --sidebar-background: #172033;
    --sidebar-text: #d9e1ef;
    --sidebar-active: #ffffff;

    --page-background: #f4f6f9;
    --card-background: #ffffff;

    --primary-text: #1c2434;
    --secondary-text: #687386;

    --border-colour: #dfe4ea;
    --accent-colour: #C83679;
    --sidebar-width: 250px;
}

/* Base page styling */
body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--primary-text);
    background: var(--page-background);
}

/* --- Sidebar & navigation --- */

/* Fixed navigation area on the left */
.sidebar {
    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width: var(--sidebar-width);

    padding: 24px 18px;

    background: var(--sidebar-background);
    color: var(--sidebar-text);
}

/* Application title inside the sidebar */
.sidebar-brand h1 {
    margin: 0;

    font-size: 24px;
    color: #ffffff;
}

/* Subtitle under the application title */
.sidebar-brand p {
    margin-top: 6px;

    font-size: 13px;
    color: #9aa8bd;
}

/* Navigation container */
.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 40px;
}

/* Navigation buttons */
.nav-link {
    width: 100%;

    padding: 12px 14px;

    border: 0;
    border-radius: 7px;

    text-align: left;
    font-size: 15px;

    color: var(--sidebar-text);
    background: transparent;

    cursor: pointer;
}

/* Highlight when hovering over a navigation item */
.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Highlight the currently selected page */
.nav-link.active {
    color: var(--sidebar-active);
    background: var(--accent-colour);
}

/*
 * Mobile/tablet nav collapse toggle - hidden entirely on desktop,
 * where the sidebar is always shown in full down the left edge.
 * Only does anything within the max-width: 800px media query
 * below, where it becomes visible and .sidebar-nav's
 * expanded/collapsed state is controlled by the
 * .sidebar-nav-open class (added/removed by app.js, and
 * remembered across visits via localStorage - see app.js's
 * sidebar nav toggle logic for the "pin open" behaviour).
 */
.sidebar-nav-toggle {
    display: none;
}

/* --- Top bar (page title, subtitle, user panel) --- */

/* Main section sits to the right of the sidebar */
.main-content {
    min-height: 100vh;

    margin-left: var(--sidebar-width);
}

/* Top page heading */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 90px;

    padding: 20px 30px;

    background: #ffffff;
    border-bottom: 1px solid var(--border-colour);
}

/* Main heading in the top bar */
.topbar h2 {
    margin: 0;

    font-size: 25px;
}

/* Subtitle under the main heading */
.topbar p {
    margin: 6px 0 0;

    color: var(--secondary-text);
}

/* Small user/access display on the top right */
.user-panel {
    padding: 9px 12px;

    border: 1px solid var(--border-colour);
    border-radius: 7px;

    color: var(--secondary-text);
    background: #ffffff;
}

/* --- Shared page-content wrapper & dashboard welcome card --- */

/* Main content spacing */
.page-content {
    padding: 30px;
}

/* Basic welcome card */
.welcome-card {
    max-width: 800px;

    padding: 26px;

    border: 1px solid var(--border-colour);
    border-radius: 10px;

    background: var(--card-background);

    box-shadow: 0 4px 14px rgba(20, 30, 50, 0.06);
}

/* Remove unnecessary top spacing from card heading */
.welcome-card h3 {
    margin-top: 0;
}

/* --- Mobile/tablet responsive overrides for the shell above --- */

/* Responsive layout for smaller screens */
@media (max-width: 800px) {

    /* Sidebar becomes a normal top section */
    .sidebar {
        position: static;

        width: 100%;
    }

    /*
     * Nav collapse toggle button - only shown at this width. Styled
     * as a full-width dark button matching the sidebar's own
     * colours, with a simple 3-line hamburger icon built from CSS
     * pseudo-elements (no image/icon font dependency) that turns
     * into an X when the nav is expanded, via the aria-expanded
     * attribute app.js keeps in sync with the actual state.
     */
    .sidebar-nav-toggle {
        display: flex;
        align-items: center;
        gap: 10px;

        width: 100%;
        margin-top: 16px;
        padding: 12px 14px;

        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 7px;

        background: rgba(255, 255, 255, 0.06);
        color: var(--sidebar-text);

        font-size: 14px;
        font-weight: 700;

        cursor: pointer;
    }

    .sidebar-nav-toggle-icon,
    .sidebar-nav-toggle-icon::before,
    .sidebar-nav-toggle-icon::after {
        display: block;
        width: 18px;
        height: 2px;

        background: var(--sidebar-text);
        border-radius: 2px;

        transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .sidebar-nav-toggle-icon {
        position: relative;
    }

    .sidebar-nav-toggle-icon::before,
    .sidebar-nav-toggle-icon::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .sidebar-nav-toggle-icon::before {
        top: -6px;
    }

    .sidebar-nav-toggle-icon::after {
        top: 6px;
    }

    /* When expanded, the three lines merge into an X */
    .sidebar-nav-toggle[aria-expanded="true"] .sidebar-nav-toggle-icon {
        background: transparent;
    }

    .sidebar-nav-toggle[aria-expanded="true"] .sidebar-nav-toggle-icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    .sidebar-nav-toggle[aria-expanded="true"] .sidebar-nav-toggle-icon::after {
        top: 0;
        transform: rotate(-45deg);
    }

    /*
     * Navigation is collapsed by default on mobile/tablet - this is
     * what actually solves the "menu takes over the whole top of
     * the screen" problem. Expanded either by tapping the toggle
     * button, or automatically if the user has previously pinned it
     * open (app.js applies .sidebar-nav-open before first paint
     * when that's remembered in localStorage, so returning visitors
     * who prefer it open don't see a flash of collapsed content).
     */
    .sidebar-nav {
        display: none;

        flex-direction: row;
        flex-wrap: wrap;

        margin-top: 12px;
    }

    .sidebar.sidebar-nav-open .sidebar-nav {
        display: flex;
    }

    /* Main content no longer needs a left margin */
    .main-content {
        margin-left: 0;
    }

    /* Header stacks vertically */
    .topbar {
        align-items: flex-start;
        flex-direction: column;

        gap: 14px;
    }
}

/* ---------------------------------------------------------
   Property list styling
   --------------------------------------------------------- */

/* Card used for tables and larger content sections */
.content-card {
    background: #ffffff;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(20, 30, 50, 0.06);
    padding: 24px;
    overflow: hidden;
}

/* Heading area at the top of the card */
.content-card-header {
    padding: 0 0 18px;

    margin-bottom: 18px;

    border-bottom: 1px solid var(--border-colour);
}

/* Remove default spacing from the card heading */
.content-card-header h3 {
    margin: 0;
}

/* Search input used above the property table */
.property-search {
    width: 280px;
    max-width: 100%;

    padding: 10px 12px;

    border: 1px solid var(--border-colour);
    border-radius: 7px;

    font-size: 14px;
}

/* Main property table */
.property-table {
    width: 100%;

    border-collapse: collapse;
}

/* Shared table cell styling */
.property-table th,
.property-table td {
    padding: 15px 18px;

    border-bottom: 1px solid var(--border-colour);

    text-align: left;
    vertical-align: middle;
}

/* Column headings */
.property-table th {
    color: var(--secondary-text);
    background: #f8fafc;

    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Property table rows */
.property-table tbody tr {
    cursor: pointer;
}

/* Highlight a property row when hovering */
.property-table tbody tr:hover {
    background: #f5f8ff;
}

/* Property address */
.property-address {
    font-weight: 600;
}

/* Smaller text displayed beneath an address */
.property-reference {
    margin-top: 4px;

    color: var(--secondary-text);
    font-size: 12px;
}

/* Generic badge */
.status-badge {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 12px;
    font-weight: 600;
}

/* Active property badge */
.status-active {
    color: #166534;
    background: #dcfce7;
}

/* Review badge */
.status-review {
    color: #92400e;
    background: #fef3c7;
}

/* Constraint warning badge */
.constraint-warning {
    color: #991b1b;
    background: #fee2e2;
}

/* No constraint badge */
.constraint-clear {
    color: #166534;
    background: #dcfce7;
}

/* Message shown when filtering finds no properties */
.empty-message {
    padding: 30px;

    color: var(--secondary-text);
    text-align: center;
}

/* Make the property header stack on smaller screens */
@media (max-width: 800px) {
    .content-card-header {
        align-items: stretch;
        flex-direction: column;
    }

    .property-search {
        width: 100%;
    }
}

/*
 * Property Details page
 */

.property-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.property-details-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.secondary-button {
    padding: 9px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    color: #172033;
    font-size: 14px;
    cursor: pointer;
}

.secondary-button:hover {
    background: #f3f6fa;
}

.property-hero-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border: 1px solid #d9e0e8;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.property-hero-card h2 {
    margin: 8px 0 12px;
    font-size: 26px;
}

.property-detail-price {
    font-size: 24px;
    font-weight: 700;
    color: #172033;
}

.detail-list {
    display: flex;
    flex-direction: column;
}

.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    border-bottom: 1px solid #e5eaf0;
}

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

.detail-row span {
    color: #64748b;
}

.detail-row strong {
    text-align: right;
    color: #172033;
}

@media (max-width: 900px) {

    .property-detail-grid {
        grid-template-columns: 1fr;
    }

    .property-hero-card {
        flex-direction: column;
    }

    .detail-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;

        padding: 14px 18px;
    }

    .detail-row strong {
        text-align: left;
    }
}

/*
 * Rightmove performance summary cards
 */
.performance-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
    margin-bottom: 24px;
}

.performance-stat {
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.performance-stat-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #64748b;
}

.performance-stat-value {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    color: #0f172a;
}

@media (max-width: 800px) {
    .performance-summary {
        grid-template-columns: 1fr;
    }

    .performance-chart-container {
        height: 280px;
    }
}

/*
 * Four-column desktop/mobile summary.
 */
.performance-summary-four {
    grid-template-columns: repeat(
        4,
        minmax(0, 1fr)
    );
}

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

@media (max-width: 650px) {
    .performance-summary-four {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------
   Manage Properties page
   --------------------------------------------------------- */

.manage-properties-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.page-toolbar {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    background: var(--card-background);
    box-shadow: 0 4px 14px rgba(20, 30, 50, 0.06);
}

.page-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--secondary-text);
    font-size: 13px;
    font-weight: 600;
}

.page-toolbar input,
.page-toolbar select {
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--border-colour);
    border-radius: 7px;
    color: var(--primary-text);
    background: #ffffff;
    font-size: 14px;
}

.page-toolbar input {
    width: 320px;
    max-width: 100%;
}

.page-toolbar input:focus,
.page-toolbar select:focus {
    outline: 3px solid rgba(200, 54, 121, 0.14);
    border-color: var(--accent-colour);
}

.page-message {
    min-height: 20px;
    padding: 0 2px;
    color: var(--secondary-text);
    font-size: 14px;
}

.page-message-success {
    color: #166534;
}
.page-message-error {
    color: #991b1b;
}
.page-message-info {
    color: var(--secondary-text);
}

.manage-properties-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.85fr);
    gap: 20px;
    align-items: start;
}

.table-card {
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    background: var(--card-background);
    box-shadow: 0 4px 14px rgba(20, 30, 50, 0.06);
}

.table-scroll {
    overflow-x: auto;
}

/*
 * Reusable bulk-action toolbar (checkbox selection + action
 * buttons) - same markup/classes used on Manage Properties,
 * Opportunities, and Leads & Proposals for consistency.
 */
.bulk-action-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 14px;
    padding: 12px 16px;

    border: 1px solid var(--border-colour);
    border-radius: 10px;

    background: rgba(200, 54, 121, 0.07);
}

.bulk-action-toolbar[hidden] {
    display: none;
}

.bulk-action-toolbar span {
    font-weight: 700;
    color: var(--primary-text);
    margin-right: 4px;
}

.bulk-select-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th,
.data-table td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--border-colour);
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--secondary-text);
    background: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
 * BUGFIX: the checkbox column was sharing equal width with every
 * other column (Address, Property type, etc.) despite its content
 * being a single small checkbox - the .data-table's width:100%
 * with no table-layout:fixed and no explicit column widths meant
 * browsers were distributing width roughly evenly, pushing wider
 * columns like Address noticeably to the right. width:1% is the
 * standard, well-established technique for this: on a table where
 * only ONE column has it, the browser gives that column just
 * enough width for its content, then distributes the remaining
 * space to the other (unconstrained) columns - reused across
 * every table with a select-all checkbox column (Manage
 * Properties, List of Interest, Leads & Proposals).
 */
.data-table th.checkbox-column,
.data-table td.checkbox-column {
    width: 1%;
    white-space: nowrap;
}

.data-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.data-table tbody tr:hover {
    background: #f8faff;
}

.data-table tbody tr.selected {
    background: #fbeff4;
    box-shadow: inset 4px 0 0 var(--accent-colour);
}

.data-table tbody tr:focus {
    outline: 3px solid rgba(200, 54, 121, 0.18);
    outline-offset: -3px;
}

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

.property-editor-card {
    position: sticky;
    top: 20px;
    padding: 22px;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    background: var(--card-background);
    box-shadow: 0 4px 14px rgba(20, 30, 50, 0.06);
}

.property-editor-card > p {
    margin: 0;
    color: var(--secondary-text);
}

.editor-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-colour);
}

.editor-heading h2 {
    margin: 0;
    font-size: 21px;
}

.editor-heading p {
    margin: 6px 0 0;
    color: var(--secondary-text);
    font-size: 13px;
}

.property-editor-card fieldset {
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #fbfcfe;
}

.property-editor-card legend {
    padding: 0 8px;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 700;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    /*
     * BUGFIX (v1.8.53, re-applied): was a single gap: 14px applying
     * to both directions - not enough vertically once an input's
     * own border/padding is factored in, making a row's field sit
     * visually close to the next row's label above it.
     */
    row-gap: 26px;
    column-gap: 14px;
}

/*
 * BUGFIX: gap was 6px - visibly too tight between a label and its
 * field, especially on plain single-line labels like "Personal
 * customer introduction" with no other visual separation.
 * Increased for more comfortable breathing room.
 */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-field label {
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.form-field input:not([readonly]),
.form-field textarea,
.form-field select {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #c8d1dc;
    border-radius: 7px;
    color: var(--primary-text);
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field textarea {
    min-height: 92px;
    resize: vertical;
}

.form-field input:not([readonly]):focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--accent-colour);
    box-shadow: 0 0 0 3px rgba(200, 54, 121, 0.14);
}

.form-field input[readonly] {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid #e1e6ec;
    border-radius: 7px;
    color: #7a8595;
    background: #eef1f5;
    font-size: 14px;
    cursor: not-allowed;
}

.checkbox-field {
    margin-top: 14px;
}

.checkbox-field label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.checkbox-field input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--accent-colour);
}

.editor-metadata {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
}

.editor-metadata p {
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--border-colour);
    border-radius: 7px;
    color: var(--secondary-text);
    background: #f8fafc;
    font-size: 12px;
}

.editor-metadata strong {
    display: block;
    margin-bottom: 4px;
    color: var(--primary-text);
}

.button {
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.button-primary {
    border: 1px solid var(--accent-colour);
    color: #ffffff;
    background: var(--accent-colour);
}

.button-primary:hover:not(:disabled) {
    background: #ac2e68;
    border-color: #ac2e68;
}

.button-secondary {
    border: 1px solid #cbd5e1;
    color: var(--primary-text);
    background: #ffffff;
}

.button-secondary:hover:not(:disabled) {
    background: #f3f6fa;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--border-colour);
}

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

@media (max-width: 1180px) {
    .manage-properties-layout { grid-template-columns: 1fr; }
    .property-editor-card { position: static; }
}

@media (max-width: 800px) {
    .page-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .page-toolbar input { width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .editor-metadata { grid-template-columns: 1fr; }

    .form-actions {
        flex-direction: column-reverse;
    }

    .form-actions .button { width: 100%; }
}

.property-details > .content-card {
    margin-bottom: 24px;
}

.property-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

.property-detail-grid > .content-card {
    min-width: 0;
}

.performance-chart-container {
    position: relative;
    width: 100%;
    height: 320px;
    margin-top: 24px;
}

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.empty-state {
    padding: 16px 0;
    color: #667085;
    line-height: 1.5;
}

.constraint-clear-message {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f7f9fb;
    color: #526174;
    line-height: 1.5;
}

.constraint-details-list {
    margin-top: 22px;
}

.constraint-details-list > h4 {
    margin: 0 0 12px;
}

.constraint-detail-card {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
}

.constraint-detail-card h4 {
    margin: 0 0 10px;
}

@media (max-width: 1000px) {

    .property-detail-grid {
        grid-template-columns: 1fr;
    }

}
/* ---------------------------------------------------------
   Property Lookup page
   --------------------------------------------------------- */

.lookup-search-card,
.lookup-result-summary,
.lookup-intelligence-card,
.lookup-section-card {
    margin-bottom: 22px;
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.section-heading h2,
.section-heading h3 {
    margin: 0;
}

.section-heading p {
    margin: 7px 0 0;
    color: var(--secondary-text);
    line-height: 1.5;
}

.compact-heading {
    margin-bottom: 18px;
}

.eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--accent-colour);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lookup-form-grid {
    gap: 18px;
}

.lookup-form .form-field > span {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 700;
}

.lookup-form .form-field small {
    color: var(--secondary-text);
    font-weight: 500;
}

.input-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.primary-button,
.secondary-button {
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.primary-button {
    border: 1px solid var(--accent-colour);
    color: #ffffff;
    background: var(--accent-colour);
}

.primary-button:hover:not(:disabled) {
    border-color: #ac2e68;
    background: #ac2e68;
    transform: translateY(-1px);
}

.primary-button:disabled,
.secondary-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.lookup-form-actions {
    margin-top: 18px;
}

.form-message {
    min-height: 22px;
    margin-top: 14px;
    color: var(--secondary-text);
    font-size: 14px;
}

.form-message.success { color: #166534; }
.form-message.warning { color: #92400e; }
.form-message.error { color: #991b1b; }

.lookup-results {
    display: flex;
    flex-direction: column;
}

.lookup-result-heading h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
}

.interest-button {
    flex-shrink: 0;
}

.lookup-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.summary-stat {
    min-height: 112px;
    padding: 18px;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    background: #f8fafc;
}

.summary-stat span {
    display: block;
    margin-bottom: 10px;
    color: var(--secondary-text);
    font-size: 13px;
    font-weight: 700;
}

.summary-stat strong {
    display: block;
    color: var(--primary-text);
    font-size: 21px;
    line-height: 1.25;
}

.summary-stat-primary {
    border-color: rgba(200, 54, 121, 0.28);
    background: linear-gradient(135deg, rgba(200, 54, 121, 0.10), #ffffff);
}

.summary-stat-primary strong {
    color: var(--accent-colour);
    font-size: 28px;
}

.valuation-disclaimer,
.panel-note {
    margin: 18px 0 0;
    color: var(--secondary-text);
    font-size: 13px;
    line-height: 1.55;
}

.lookup-intelligence-card {
    border-left: 4px solid var(--accent-colour);
}

.intelligence-hero h3 {
    margin: 0 0 10px;
    font-size: 24px;
}

.intelligence-hero p {
    max-width: 950px;
    margin: 8px 0 0;
    color: var(--secondary-text);
    line-height: 1.6;
}

.intelligence-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.intelligence-detail-card {
    padding: 14px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #fbfcfe;
}

.intelligence-detail-card span {
    display: block;
    margin-bottom: 7px;
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 700;
}

.intelligence-detail-card strong {
    display: block;
    line-height: 1.4;
}

.intelligence-advice-list {
    margin-top: 22px;
    padding: 18px;
    border-radius: 10px;
    background: #fff8fb;
}

.intelligence-advice-list h4 {
    margin: 0 0 12px;
}

.intelligence-advice-list ul {
    margin: 0;
    padding-left: 20px;
}

.intelligence-advice-list li {
    margin: 8px 0;
    line-height: 1.55;
}

.lookup-two-column-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.lookup-two-column-layout > .content-card {
    min-width: 0;
}

.lookup-table-wrapper {
    border: 1px solid var(--border-colour);
    border-radius: 9px;
}

.lookup-data-table tbody tr {
    cursor: default;
}

.lookup-data-table tbody tr:hover {
    background: #fbfcfe;
}

.lookup-data-table td:first-child {
    min-width: 270px;
}

.numeric-cell {
    white-space: nowrap;
    font-weight: 700;
}

.constraint-status-panel {
    padding: 16px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #f8fafc;
}

.constraint-status-panel p {
    margin: 12px 0 0;
    color: var(--secondary-text);
    line-height: 1.6;
}

.status-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status-pill-available {
    color: #166534;
    background: #dcfce7;
}

.status-pill-limited {
    color: #92400e;
    background: #fef3c7;
}

.status-pill-warning {
    color: #92400e;
    background: #fef3c7;
}

/*
 * Highlights an unacknowledged row on the Logged Events page - a
 * light tint, consistent with the warning pill's own colour, rather
 * than a new, unrelated colour.
 */
.logged-event-unread {
    background: #fffbeb;
}

/*
 * BUGFIX: these two wrapper classes (used by lookup.js's
 * connectivity panel since before any of this session's Ofcom
 * work) had no CSS rules anywhere in the project - a pre-existing
 * gap, found while fixing the raw-JSON-dump issue on this page.
 * Matches the established .content-card visual language.
 */
.connectivity-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.connectivity-card {
    flex: 1 1 260px;

    padding: 16px 18px;

    border: 1px solid var(--border-colour);
    border-radius: 10px;

    background: var(--card-background);
}

.connectivity-card h3 {
    margin: 0 0 8px;
    font-size: 15px;
}

.status-meta {
    color: var(--secondary-text);
    font-size: 13px;
}

.constraint-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.constraint-result-card {
    padding: 16px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #ffffff;
}

.constraint-result-card h3 {
    margin: 9px 0;
    font-size: 16px;
}

.constraint-result-card p {
    margin: 7px 0 0;
    color: var(--secondary-text);
    font-size: 13px;
}

.constraint-dataset {
    color: var(--accent-colour);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.crime-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.crime-summary-stat {
    padding: 14px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #f8fafc;
}

.crime-summary-stat span {
    display: block;
    margin-bottom: 7px;
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 700;
}

.crime-summary-stat strong {
    display: block;
    font-size: 20px;
}

.crime-category-list {
    margin-top: 16px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    overflow: hidden;
}

.crime-category-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border-colour);
}

.crime-category-row:last-child {
    border-bottom: 0;
}

.crime-category-row span {
    color: var(--secondary-text);
}

.lookup-loading-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
}

.lookup-loading-card p {
    margin: 0;
    color: var(--secondary-text);
}

.lookup-loading-indicator {
    width: 24px;
    height: 24px;
    border: 3px solid #f1c4da;
    border-top-color: var(--accent-colour);
    border-radius: 50%;
    animation: lookup-spin 0.8s linear infinite;
}

@keyframes lookup-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1150px) {
    .lookup-summary-grid,
    .intelligence-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 900px) {
    .lookup-two-column-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .lookup-result-heading,
    .section-heading {
        flex-direction: column;
    }

    .interest-button,
    .input-action-row .secondary-button {
        width: 100%;
    }

    .input-action-row {
        grid-template-columns: 1fr;
    }

    .lookup-summary-grid,
    .intelligence-detail-grid,
    .crime-summary-grid,
    .constraint-card-grid {
        grid-template-columns: 1fr;
    }

    .summary-stat {
        min-height: auto;
    }
}
/* ==========================================================
   Properties of Interest
   ========================================================== */

.interest-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.interest-search {
    flex: 1;
    min-width: 280px;
}

.interest-search input {
    width: 100%;
}

.interest-filters {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.interest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
}

.interest-card {
    background: #ffffff;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: .2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.interest-card:hover {
    border-color: #0d6efd;
    box-shadow: 0 6px 18px rgba(13,110,253,.15);
}

.interest-address h3 {
    margin: 0;
    font-size: 1.1rem;
}

.interest-address small {
    color: #6c757d;
}

.interest-summary {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: .75rem;
}

.interest-stat {
    background: #f8f9fa;
    border-radius: 8px;
    padding: .75rem;
}

.interest-stat-label {
    display: block;
    font-size: .75rem;
    color: #6c757d;
    margin-bottom: .25rem;
}

.interest-stat-value {
    font-weight: 600;
    font-size: 1rem;
}

.interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.interest-tag {
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
}

.interest-tag.status-active {
    background: #d1fae5;
    color: #065f46;
}

.interest-tag.status-monitoring {
    background: #dbeafe;
    color: #1d4ed8;
}

.interest-tag.status-contact_planned {
    background: #fef3c7;
    color: #92400e;
}

.interest-tag.status-converted {
    background: #ede9fe;
    color: #6d28d9;
}

.interest-tag.status-archived,
.interest-tag.status-not_progressing {
    background: #f3f4f6;
    color: #6b7280;
}

.interest-tag.priority-high {
    background: #fee2e2;
    color: #b91c1c;
}

.interest-tag.priority-normal {
    background: #dbeafe;
    color: #1d4ed8;
}

.interest-tag.priority-low {
    background: #dcfce7;
    color: #166534;
}

.interest-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.interest-actions button {
    flex: 1;
}

.interest-empty {
    text-align: center;
    padding: 4rem;
    color: #6c757d;
    border: 2px dashed #dbe2ea;
    border-radius: 10px;
    background: #fafafa;
}

.interest-note {
    background: #fff8db;
    border-left: 4px solid #facc15;
    padding: .75rem 1rem;
    border-radius: 6px;
    font-size: .9rem;
}

.interest-followup {
    color: #b45309;
    font-weight: 600;
}

.interest-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #166534;
}

.interest-confidence {
    font-size: .9rem;
    color: #6c757d;
}

.interest-card textarea {
    resize: vertical;
    min-height: 90px;
}

.interest-card select,
.interest-card input,
.interest-card textarea {
    width: 100%;
}

@media (max-width:768px){

    .interest-grid{
        grid-template-columns:1fr;
    }

    .interest-summary{
        grid-template-columns:1fr;
    }

    .interest-actions{
        flex-direction:column;
    }

}

.interest-button-saved,
.interest-button-saved:hover,
.interest-button-saved:disabled {
    color: #166534;
    border-color: #86efac;
    background: #dcfce7;
    opacity: 1;
    cursor: default;
}

.valuation-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.valuation-stat {
    min-width: 0;
    padding: 20px;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: #f8fafc;
}

.valuation-stat-primary {
    border-color: #ff9bc8;
    background: #fff7fb;
}

.valuation-stat-label {
    display: block;
    margin-bottom: 12px;
    color: #526174;
    font-size: 0.9rem;
    font-weight: 600;
}

.valuation-stat-value {
    display: block;
    font-size: 1.35rem;
    line-height: 1.25;
}

.valuation-stat-primary .valuation-stat-value {
    color: #c2185b;
    font-size: 2rem;
}

.valuation-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    margin-top: 22px;
}

.valuation-disclaimer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e1e7ee;
    color: #667085;
    line-height: 1.5;
}

@media (max-width: 1100px) {

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

}

@media (max-width: 700px) {

    .valuation-summary-grid,
    .valuation-detail-grid {
        grid-template-columns: 1fr;
    }

}

/* Property Details valuation and information panels */
.constraint-information-message {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #f8fafc;
    color: #526174;
    line-height: 1.5;
}

.constraint-information-message strong {
    display: block;
    margin-bottom: 6px;
}

.constraint-information-message p {
    margin: 0;
}


/*
 * KG Estates live dashboard
 *
 * Add this file after the main application stylesheet.
 */

.dashboard-page {
    display: grid;
    gap: 1.5rem;
}

.dashboard-welcome {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.6rem;
    border: 1px solid var(--border-color, #dde3e8);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(245, 248, 247, 0.96)
        );
    box-shadow: 0 12px 30px rgba(25, 45, 35, 0.06);
}

.dashboard-welcome h2 {
    margin: 0.25rem 0 0.7rem;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.dashboard-welcome blockquote {
    margin: 0;
    color: var(--muted-text, #66736c);
    font-style: italic;
}

.dashboard-eyebrow {
    margin: 0;
    color: var(--primary-color, #276749);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.dashboard-message {
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-color, #dde3e8);
    border-radius: 10px;
    background: var(--surface-color, #fff);
    color: var(--muted-text, #66736c);
}

.dashboard-message-success {
    border-color: #b9dfc9;
    background: #f2fbf5;
    color: #24613d;
}

.dashboard-message-error {
    border-color: #efc4c4;
    background: #fff5f5;
    color: #9b2c2c;
}

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

.dashboard-kpi-card {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--border-color, #dde3e8);
    border-radius: 15px;
    background: var(--surface-color, #fff);
    box-shadow: 0 8px 22px rgba(25, 45, 35, 0.045);
}

.dashboard-kpi-card-wide {
    grid-column: span 2;
}

.dashboard-kpi-card-attention {
    border-color: #ecd7aa;
    background: #fffbf2;
}

.dashboard-kpi-label {
    display: block;
    color: var(--muted-text, #66736c);
    font-size: 0.84rem;
    font-weight: 700;
}

.dashboard-kpi-card strong {
    display: block;
    margin: 0.4rem 0 0.2rem;
    color: var(--heading-color, #1f3329);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 1;
}

.dashboard-kpi-card small {
    color: var(--muted-text, #66736c);
}

.dashboard-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr);
    gap: 1rem;
}

.dashboard-panel {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--border-color, #dde3e8);
    border-radius: 15px;
    background: var(--surface-color, #fff);
    box-shadow: 0 8px 22px rgba(25, 45, 35, 0.045);
}

.dashboard-panel-wide {
    grid-row: span 2;
}

.dashboard-panel-heading {
    margin-bottom: 1rem;
}

.dashboard-panel-heading h3 {
    margin: 0.2rem 0 0.25rem;
}

.dashboard-panel-heading p:not(.dashboard-eyebrow) {
    margin: 0;
    color: var(--muted-text, #66736c);
}

.dashboard-panel-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-chart-container {
    position: relative;
    width: 100%;
}

.dashboard-chart-container-line {
    min-height: 390px;
}

.dashboard-chart-container-bar {
    min-height: 310px;
}

.dashboard-summary {
    display: grid;
    gap: 0.75rem;
}

.dashboard-insight {
    padding: 0.85rem 1rem;
    border-left: 4px solid #9aa7a0;
    border-radius: 8px;
    background: #f7f9f8;
}

.dashboard-insight-positive {
    border-left-color: #3f8f64;
    background: #f2fbf5;
}

.dashboard-insight-warning {
    border-left-color: #d69e2e;
    background: #fffbeb;
}

.dashboard-insight strong {
    display: block;
    margin-bottom: 0.25rem;
}

.dashboard-insight p {
    margin: 0;
    color: var(--muted-text, #66736c);
    line-height: 1.45;
}

.dashboard-performance-table {
    width: 100%;
}

.dashboard-performance-table td,
.dashboard-performance-table th {
    vertical-align: middle;
}

.dashboard-number-column {
    text-align: right;
    white-space: nowrap;
}

.dashboard-table-secondary {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted-text, #66736c);
    font-size: 0.8rem;
}

.dashboard-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 750;
    white-space: nowrap;
}

.dashboard-status-pill-success {
    background: #e8f6ed;
    color: #25633e;
}

.dashboard-status-pill-warning {
    background: #fff3d6;
    color: #8a5b00;
}

.dashboard-status-pill-muted {
    background: #eef1f0;
    color: #65716b;
}

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

    .dashboard-chart-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-panel-wide {
        grid-row: auto;
    }
}

@media (max-width: 680px) {
    .dashboard-welcome {
        flex-direction: column;
    }

    .dashboard-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-card-wide {
        grid-column: auto;
    }

    .dashboard-chart-container-line {
        min-height: 300px;
    }
}

/* ==========================================================
   Agent profile and PDF defaults
   ========================================================== */

.profile-page,
#agent-profile-form {
    display: grid;
    gap: 22px;
}

.profile-section {
    overflow: visible;
}

.profile-section .form-field > span {
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.profile-section .form-field small,
.profile-image-panel small {
    color: var(--secondary-text);
    font-size: 12px;
    line-height: 1.45;
}

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

.profile-photo-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.profile-image-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    overflow: hidden;
    border: 1px dashed #c8d1dc;
    border-radius: 16px;
    color: var(--secondary-text);
    background: #f8fafc;
    text-align: center;
}

.profile-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.signature-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 22px;
}

.signature-current-panel,
.signature-draw-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    background: #fbfcfe;
}

.signature-current-panel h3,
.signature-draw-panel h3 {
    margin: 0 0 12px;
    font-size: 17px;
}

.signature-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 18px;
    overflow: hidden;
    border: 1px dashed #c8d1dc;
    border-radius: 9px;
    color: var(--secondary-text);
    background: #ffffff;
    text-align: center;
}

.signature-preview img {
    display: block;
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.signature-canvas-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border: 1px solid #c8d1dc;
    border-radius: 10px;
    background:
        linear-gradient(
            to bottom,
            transparent calc(72% - 1px),
            #dbe2ea calc(72% - 1px),
            #dbe2ea 72%,
            transparent 72%
        ),
        #ffffff;
}

.signature-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.profile-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.pdf-options-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pdf-option {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 78px;
    padding: 14px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #fbfcfe;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pdf-option:hover {
    border-color: #f29abe;
    background: #fff8fb;
}

.pdf-option input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-colour);
}

.pdf-option span,
.pdf-option strong,
.pdf-option small {
    display: block;
}

.pdf-option strong {
    color: var(--primary-text);
    font-size: 14px;
}

.pdf-option small {
    margin-top: 4px;
    color: var(--secondary-text);
    font-size: 12px;
    line-height: 1.35;
}

.profile-closing-field {
    margin-top: 20px;
}

.profile-save-bar {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border-colour);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 26px rgba(20, 30, 50, 0.13);
    backdrop-filter: blur(8px);
}

.profile-message {
    min-height: 20px;
    color: var(--secondary-text);
    font-size: 14px;
}

.profile-message-success {
    color: #166534;
}
.profile-message-error {
    color: #991b1b;
}
.profile-message-info {
    color: var(--secondary-text);
}

.profile-loading-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 130px;
}

.profile-loading-card p {
    margin: 0;
    color: var(--secondary-text);
}

@media (max-width: 1050px) {
    .pdf-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .signature-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .profile-photo-layout {
        grid-template-columns: 1fr;
    }

    .profile-image-panel {
        align-items: stretch;
    }

    .profile-image-preview {
        width: 150px;
        height: 150px;
    }

    .pdf-options-grid {
        grid-template-columns: 1fr;
    }

    .profile-inline-actions,
    .profile-save-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-inline-actions .button,
    .profile-save-bar .button,
    .profile-upload-button {
        width: 100%;
    }

    .signature-canvas-wrap {
        height: 250px;
    }
}


/* ==========================================================
   Customer property reports
   ========================================================== */

.reports-page {
    display: grid;
    gap: 20px;
}

.reports-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.reports-toolbar h2 {
    margin: 0;
}

.reports-toolbar p {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--secondary-text);
    line-height: 1.55;
}

.reports-search-field {
    display: grid;
    flex: 0 1 340px;
    gap: 7px;
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 700;
}

.reports-search-field input {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #c8d1dc;
    border-radius: 8px;
    font: inherit;
    color: var(--primary-text);
    background: #fff;
}

.reports-search-field input:focus {
    outline: none;
    border-color: var(--accent-colour);
    box-shadow: 0 0 0 3px rgba(200, 54, 121, 0.14);
}

.reports-layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.7fr);
    gap: 20px;
    align-items: start;
}

.reports-property-panel {
    position: sticky;
    top: 20px;
    min-width: 0;
    max-height: calc(100vh - 140px);
    overflow: hidden;
}

.report-property-list {
    display: grid;
    gap: 9px;
    max-height: calc(100vh - 255px);
    padding-right: 4px;
    overflow-y: auto;
}

.report-property-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    color: var(--primary-text);
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

.report-property-item:hover {
    border-color: #f29abe;
    background: #fffafd;
}

.report-property-item.selected {
    border-color: var(--accent-colour);
    background: #fff4f9;
    box-shadow: inset 4px 0 0 var(--accent-colour);
}

.report-property-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 8px;
    color: #7b8798;
    background: #eef2f6;
    font-size: 22px;
}

.report-property-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.report-property-copy {
    min-width: 0;
}

.report-property-copy strong,
.report-property-copy small {
    display: block;
}

.report-property-copy strong {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
}

.report-property-copy small {
    margin-top: 5px;
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-workspace {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.report-empty-workspace {
    min-height: 220px;
    text-align: center;
}

.report-empty-workspace p {
    color: var(--secondary-text);
}

.report-loading-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 130px;
}

.report-loading-card p {
    margin: 0;
    color: var(--secondary-text);
}

.report-designer {
    overflow: visible;
}

.report-designer-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-colour);
}

.report-designer-heading h2 {
    margin: 0;
    font-size: clamp(22px, 3vw, 29px);
}

.report-designer-heading p {
    margin: 7px 0 0;
    color: var(--secondary-text);
}

.report-period-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 4px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #f5f7fa;
}

.report-period-button {
    min-height: 38px;
    padding: 8px 13px;
    border: 0;
    border-radius: 7px;
    color: var(--secondary-text);
    background: transparent;
    font-weight: 700;
    cursor: pointer;
}

.report-period-button.active {
    color: #fff;
    background: var(--accent-colour);
    box-shadow: 0 3px 8px rgba(200, 54, 121, 0.22);
}

.report-period-caption {
    margin-top: 16px;
    color: var(--secondary-text);
    font-size: 13px;
}

.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.report-kpi-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    background: #f8fafc;
}

.report-kpi-card > span {
    display: block;
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.report-kpi-card > strong {
    display: block;
    margin: 8px 0 6px;
    font-size: 27px;
}

.report-kpi-card small {
    display: block;
    color: var(--secondary-text);
    line-height: 1.4;
}

.report-kpi-card small.positive,
.agent-insight-grid strong.positive {
    color: #166534;
}

.report-kpi-card small.negative,
.agent-insight-grid strong.negative {
    color: #b42318;
}

.report-kpi-card small.neutral,
.agent-insight-grid strong.neutral {
    color: var(--secondary-text);
}

.report-chart-card,
.report-message-section,
.report-options-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border-colour);
}

.report-chart-card {
    overflow: hidden;
}

.report-performance-chart {
    display: block;
    max-width: 100%;
    height: auto;
}

.report-message-section textarea {
    width: 100%;
    min-height: 170px;
    padding: 14px;
    border: 1px solid #c8d1dc;
    border-radius: 9px;
    color: var(--primary-text);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}

.report-message-section textarea:focus {
    outline: none;
    border-color: var(--accent-colour);
    box-shadow: 0 0 0 3px rgba(200, 54, 121, 0.14);
}

.report-message-footer {
    margin-top: 7px;
    color: var(--secondary-text);
    font-size: 12px;
    text-align: right;
}

.report-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.report-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 74px;
    padding: 13px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #fbfcfe;
    cursor: pointer;
}

.report-option:hover {
    border-color: #f29abe;
    background: #fff8fb;
}

.report-option input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-colour);
}

.report-option input:disabled {
    opacity: 0.75;
}

.report-option strong,
.report-option small {
    display: block;
}

.report-option strong {
    font-size: 13px;
}

.report-option small {
    margin-top: 4px;
    color: var(--secondary-text);
    font-size: 11px;
    line-height: 1.4;
}

.report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-colour);
}

.agent-insight-panel {
    border-left: 5px solid #172033;
}

/*
 * Wraps each portal's own insight row (Rightmove/Zoopla/
 * OnTheMarket) within the same panel - a divider between rows
 * except the first, since .agent-insight-grid itself is already a
 * reusable, generic layout that doesn't need to change to repeat
 * three times over.
 */
.agent-insight-portal-row {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid #e5e9f0;
}

.agent-insight-portal-row:first-of-type {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.agent-insight-portal-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.report-trend-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.report-trend-increasing {
    color: #166534;
    background: #dcfce7;
}

.report-trend-declining {
    color: #991b1b;
    background: #fee2e2;
}

.report-trend-stable {
    color: #1d4ed8;
    background: #dbeafe;
}

.report-trend-insufficient {
    color: #6b7280;
    background: #f3f4f6;
}

/*
 * BUGFIX: .interest-detail-grid/.interest-detail-card had NO CSS
 * rules anywhere in this file despite being used throughout
 * list-interest.js's detail panel (EPC, Crime context, Comparable
 * evidence, Connectivity, and the price-drift card above) - a
 * long-standing gap first noted (but not fixed, since it was out
 * of scope at the time) back in the original cleanup pass. Fixed
 * now while adding new content that depends on it actually looking
 * like a card. Matches the established .content-card visual
 * language (border, radius, padding) used elsewhere in the app,
 * just smaller since these sit inside an existing card rather than
 * being top-level page sections themselves.
 */
.interest-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.interest-detail-card {
    background: #fbfcfe;
    border: 1px solid var(--border-colour);
    border-radius: 8px;
    padding: 14px 16px;
}

.interest-detail-card h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.interest-detail-card p {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--secondary-text);
}

/*
 * Broadened from .interest-detail-card-scoped-only to also work
 * standalone - originally only used on List of Interest (which
 * wraps everything in .interest-detail-card), now also used on
 * Leads & Proposals' Connectivity section, which uses its own
 * .research-amenities-section wrapper instead.
 */
p.connectivity-subheading {
    font-weight: 700;
    color: var(--primary-text);
    margin-top: 10px;
}

p.connectivity-subheading:first-of-type {
    margin-top: 0;
}

p.connectivity-headline {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-text);
}

.connectivity-tier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 4px 0 8px;
}

.connectivity-tier-table th,
.connectivity-tier-table td {
    text-align: left;
    padding: 3px 6px 3px 0;
}

.connectivity-tier-table th {
    color: var(--secondary-text);
    font-weight: 600;
}

p.connectivity-note {
    font-size: 11px;
    color: #94a3b8;
}

/*
 * Price drift card (List of Interest) - reuses .interest-detail-card
 * for the outer card shell and the existing .positive/.negative
 * classes above for the change figure's colour; only the insights
 * list itself needed new rules.
 */
.price-drift-insights {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: #4b5563;
}

.price-drift-insights li {
    margin-bottom: 4px;
}

.agent-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.agent-insight-grid article {
    padding: 16px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #f8fafc;
}

.agent-insight-grid article > span,
.agent-insight-grid article > strong,
.agent-insight-grid article > small {
    display: block;
}

.agent-insight-grid article > span {
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.agent-insight-grid article > strong {
    margin: 8px 0 6px;
    font-size: 19px;
}

.agent-insight-grid article > small {
    color: var(--secondary-text);
    line-height: 1.5;
}

.agent-insight-summary {
    grid-column: 1 / -1;
}

@media (max-width: 1150px) {
    .reports-layout {
        grid-template-columns: 1fr;
    }

    .reports-property-panel {
        position: static;
        max-height: none;
    }

    .report-property-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
    }
}

@media (max-width: 800px) {
    .reports-toolbar,
    .report-designer-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .reports-search-field {
        flex-basis: auto;
        width: 100%;
    }

    .report-property-list,
    .report-kpi-grid,
    .report-options-grid,
    .agent-insight-grid {
        grid-template-columns: 1fr;
    }

    .agent-insight-summary {
        grid-column: auto;
    }

    .report-period-toggle {
        width: 100%;
    }

    .report-period-button {
        flex: 1;
    }

    .report-actions {
        flex-direction: column-reverse;
    }

    .report-actions .button {
        width: 100%;
    }
}

/* ==========================================================
   Properties of Interest - Nearby Amenities
   ========================================================== */

.interest-intelligence-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--border-colour);
}

.amenities-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.amenities-category-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-colour);
    border-radius: 9px;
    background: #f8fafc;
}

.amenities-category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.amenities-category-heading h4 {
    margin: 0;
    color: var(--primary-text);
    font-size: 15px;
}

.amenities-category-list {
    display: grid;
    gap: 8px;
}

.amenity-list-item {
    padding-top: 8px;
    border-top: 1px solid var(--border-colour);
}

.amenity-list-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.amenity-list-item strong {
    display: block;
    color: var(--primary-text);
    font-size: 14px;
}

.amenity-list-item span {
    display: block;
    margin-top: 3px;
    color: var(--secondary-text);
    font-size: 12px;
}

.interest-amenities-map {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 440px;
    min-height: 440px;
    margin: 0 0 18px;
    overflow: hidden;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    background: #e5e7eb;
}

.interest-amenities-map.leaflet-container {
    width: 100%;
    height: 440px;
    font-family: inherit;
}

/*
 * Protect Leaflet's tiles and markers from responsive image rules.
 * Do not override Leaflet pane positioning or transforms.
 */
.interest-amenities-map img,
.interest-amenities-map .leaflet-tile,
.interest-amenities-map .leaflet-marker-icon,
.interest-amenities-map .leaflet-marker-shadow {
    max-width: none !important;
    max-height: none !important;
}

.interest-amenities-map .leaflet-popup-content {
    font-size: 13px;
    line-height: 1.45;
}

.interest-map-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 24px;
    color: var(--secondary-text);
    text-align: center;
}

.interest-map-message-error {
    color: #b42318;
}

@media (max-width: 700px) {
    .amenities-summary-grid {
        grid-template-columns: 1fr;
    }

    .interest-amenities-map,
    .interest-amenities-map.leaflet-container {
        height: 340px;
        min-height: 340px;
    }
}



/* KG Estates v1.2.0 grouped navigation and security/business-development UI */
.nav-group-static { display:grid; gap:5px; margin-top:10px; }
.nav-group-label { padding:8px 12px 4px; color:#94a3b8; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.nav-group-static .nav-sublink { padding-left:18px; }
.security-settings-section { margin-top:20px; }
.security-status-panel { display:grid; gap:6px; padding:16px; margin-bottom:18px; border:1px solid var(--border-colour); border-radius:10px; background:#f8fafc; }
.security-form { display:grid; gap:16px; margin-bottom:18px; }
.security-mfa-actions { display:flex; flex-wrap:wrap; gap:10px; }
.mfa-setup-panel { margin-top:16px; padding:18px; border:1px solid var(--border-colour); border-radius:10px; background:#fff; }
.mfa-qr-code { width:240px; min-height:220px; display:grid; place-items:center; background:#fff; }
.recovery-codes pre { white-space:pre-wrap; padding:14px; background:#111827; color:#fff; border-radius:8px; }
.opportunity-convert-panel { margin-top:22px; padding:18px; border:1px solid var(--border-colour); border-radius:10px; background:#f8fafc; }


/* ==========================================================
   KG Estates v1.2.1 hotfix
   ========================================================== */

.manage-properties-layout {
    grid-template-columns: minmax(0, 1fr);
}

.manage-properties-layout .table-card,
.manage-properties-layout .property-editor-card {
    width: 100%;
    min-width: 0;
}

.property-editor-card {
    position: static;
}

.manage-properties-page .data-table {
    min-width: 980px;
}

.manage-properties-page .data-table th:first-child,
.manage-properties-page .data-table td:first-child {
    width: 0%;
    min-width: 10px;
}

.managed-address-primary {
    display: block;
    color: var(--primary-text);
    line-height: 1.35;
}

.managed-address-postcode {
    display: block;
    margin-top: 3px;
    color: var(--secondary-text);
    font-size: 12px;
}

.verification-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.verification-badge-verified {
    color: #166534;
    background: #dcfce7;
}

.verification-badge-review {
    color: #92400e;
    background: #fef3c7;
}

.security-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.62);
}

.security-modal {
    width: min(460px, 100%);
    padding: 24px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.35);
}

.security-modal h2 {
    margin: 0 0 8px;
}

.security-modal p {
    margin: 0 0 18px;
    color: var(--secondary-text);
}

.security-modal .form-field + .form-field {
    margin-top: 14px;
}

.security-modal .form-actions {
    margin-top: 20px;
}

@media (max-width: 800px) {
    .manage-properties-page .data-table {
        min-width: 820px;
    }

    .manage-properties-page .data-table th:first-child,
    .manage-properties-page .data-table td:first-child {
        min-width: 300px;
    }
}


/* ==========================================================
   KG Estates v1.3.0 — Leads, Proposals and Research 2.0
   ========================================================== */

.leads-proposals-page {
    display: grid;
    gap: 20px;
}

.proposal-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.proposals-table tbody tr {
    cursor: pointer;
}

.proposals-table tbody tr:hover,
.proposals-table tbody tr.selected-row {
    background: #eef6ff;
}

.table-secondary {
    display: block;
    margin-top: 4px;
    color: var(--secondary-text);
    font-size: 12px;
}

.proposals-table .status-badge,
.proposal-detail-grid .status-badge {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    color: #1e3a5f;
    background: #e7f0fa;
    font-size: 12px;
    font-weight: 700;
}

.proposal-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.8fr)
        minmax(0, 1.4fr);
    gap: 20px;
    align-items: start;
}

.proposal-property-card {
    position: sticky;
    top: 18px;
}

.proposal-property-map {
    width: 100%;
    min-height: 390px;
    margin: 18px 0;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    overflow: hidden;
}

.proposal-property-facts {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.proposal-content-boxes {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.proposal-content-box {
    padding: 14px;
    border: 1px solid var(--border-colour);
    border-radius: 10px;
    background: #fafcff;
}

.proposal-content-box label > span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.proposal-content-box small {
    display: block;
    margin: 6px 0 10px;
    color: var(--secondary-text);
}

/*
 * BUGFIX: this textarea had no font-family declared at all, so it
 * fell back to the browser's own default form-control font
 * (typically monospace) instead of matching the rest of the app -
 * visibly inconsistent with every other text field, which all
 * correctly use font-family: inherit (see .form-field textarea's
 * matching rule).
 */
.proposal-content-box textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

.proposal-timeline-card {
    grid-column: 1 / -1;
}

.proposal-timeline {
    display: grid;
    gap: 0;
    padding: 0;
    list-style: none;
}

.proposal-timeline li {
    position: relative;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    min-height: 55px;
}

.proposal-timeline li > span {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: 4px;
    border-radius: 50%;
    background: #1f6fb2;
}

.proposal-timeline li:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 6px;
    width: 2px;
    background: var(--border-colour);
}

.proposal-timeline time {
    display: block;
    margin-top: 4px;
    color: var(--secondary-text);
    font-size: 12px;
}

@media (max-width: 1000px) {
    .proposal-detail-grid,
    .proposal-summary-grid,
    .proposal-content-boxes {
        grid-template-columns: 1fr;
    }

    .proposal-property-card {
        position: static;
    }

    .proposal-timeline-card {
        grid-column: auto;
    }
}


/* ==========================================================
   KG Estates v1.3.8 — Property Research 2.0 presentation
   ========================================================== */

.proposal-property-card {
    border: 1px solid #dbe4ef;
    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #ffffff 62%,
            #f8fbff 100%
        );
    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.08);
}

.proposal-property-card .section-heading {
    margin: -2px -2px 0;
    padding: 4px 4px 14px;
    border-bottom: 1px solid #e7edf5;
}

.proposal-property-card .section-heading h2 {
    margin-top: 5px;
    font-size: 22px;
    line-height: 1.25;
}

.research-rerun-button {
    min-width: 150px;
}

.research-credit-options {
    display: grid;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    background: #f7f9fc;
}

.research-credit-options-copy {
    display: grid;
    gap: 3px;
}

.research-credit-options-copy strong {
    color: #172033;
    font-size: 13px;
}

.research-credit-options-copy span {
    color: var(--secondary-text);
    font-size: 12px;
    line-height: 1.45;
}

.research-credit-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.research-credit-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid #d9e2ec;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

.research-credit-checkboxes input {
    accent-color: var(--accent-colour);
}

.research-rerun-message:not(:empty) {
    margin-top: 10px;
}

.proposal-property-map {
    min-height: 430px;
    border-radius: 14px;
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.proposal-property-map .leaflet-control-layers {
    border: 0;
    border-radius: 10px;
    box-shadow:
        0 4px 16px rgba(15, 23, 42, 0.16);
}

/*
 * Shown when a HomeData-sourced title boundary's centroid sits
 * implausibly far from the property marker (see 150H's marker/
 * boundary consistency check) - deliberately prominent (not just
 * inside the boundary's click-to-open popup) since the whole point
 * is to catch the agent's attention before they rely on a boundary
 * that may belong to next door.
 */
.proposal-map-warning {
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    background: #fffbeb;
}

.proposal-map-warning[hidden] {
    display: none;
}

.proposal-map-warning p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
}

.proposal-map-warning p + p {
    margin-top: 6px;
}

.proposal-property-facts {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.proposal-property-facts > div {
    padding: 10px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.proposal-property-facts dt {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.proposal-property-facts dd {
    margin-top: 3px;
    color: #182238;
    font-weight: 700;
}

.research-section-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin: 18px 0 9px;
}

.research-section-title > span,
.research-section-title div > span {
    color: #182238;
    font-size: 14px;
    font-weight: 800;
}

.research-section-title small {
    display: block;
    margin-top: 3px;
    color: var(--secondary-text);
}

.research-amenities-table-wrap {
    overflow: auto;
    max-height: 330px;
    border: 1px solid #dfe7f0;
    border-radius: 11px;
    background: #fff;
}

.research-amenities-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.research-amenities-table th,
.research-amenities-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #edf1f5;
    text-align: left;
    vertical-align: top;
}

.research-amenities-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f5f8fc;
    color: #526076;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.research-empty-inline {
    padding: 12px;
    border: 1px dashed #d9e2ec;
    border-radius: 10px;
    color: var(--secondary-text);
    background: #fbfcfe;
    font-size: 12px;
}

/*
 * Comparable evidence panel (Leads & Proposals only) - the
 * checkbox/dropdown/button row sits directly below the table
 * (already styled via .research-amenities-table), matching the
 * spacing/border language already established by
 * .diagnostics-source-toggles for a similar "row of controls above
 * content" layout elsewhere in the app.
 */
.comparable-evidence-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    margin: 12px 0;
    padding: 10px 14px;

    border: 1px solid var(--border-colour);
    border-radius: 8px;

    background: #f8fafc;
}

.comparable-evidence-controls label {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 12px;
    font-weight: 600;
    color: var(--primary-text);
}

.comparable-evidence-years {
    padding: 5px 8px;
    border: 1px solid #c8d1dc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
}

.comparable-evidence-status {
    font-size: 12px;
    color: var(--secondary-text);
}

.research-enrichment-results {
    margin-top: 15px;
}

.research-enrichment-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.research-enrichment-grid > div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid #e1e8f0;
    border-radius: 10px;
    background: #fff;
}

.research-enrichment-grid strong {
    font-size: 11px;
    color: #536176;
}

.research-enrichment-grid span {
    color: #182238;
    font-size: 12px;
    font-weight: 700;
}

.proposal-pdf-defaults {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid #dfe7f0;
    border-radius: 12px;
    background: #f8fafc;
}

.proposal-subheading h3 {
    margin: 4px 0 3px;
    font-size: 17px;
}

.proposal-subheading p {
    margin: 0;
    color: var(--secondary-text);
    font-size: 12px;
}

.proposal-pdf-options-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 13px;
}

.proposal-pdf-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #dde5ee;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

.proposal-pdf-option input {
    accent-color: var(--accent-colour);
}

@media (max-width: 1100px) {
    .proposal-pdf-options-grid,
    .research-enrichment-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .proposal-property-facts,
    .proposal-pdf-options-grid,
    .research-enrichment-grid {
        grid-template-columns: 1fr;
    }

    .research-credit-checkboxes {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* v1.4.0 proposal intelligence */
.proposal-draft-assist,.digital-proposal-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 15px;margin:15px 0;border:1px solid #dfe7f0;border-radius:12px;background:#f8fafc}.proposal-draft-assist>div,.digital-proposal-panel>div:first-child{display:grid;gap:3px}.proposal-draft-assist span,.digital-proposal-panel p{margin:0;color:var(--secondary-text);font-size:12px}.digital-proposal-panel h3{margin:3px 0 2px}.digital-proposal-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.proposal-public-link{font-size:12px;font-weight:700}.proposal-amenity-snapshot{max-height:none}@media(max-width:760px){.proposal-draft-assist,.digital-proposal-panel{align-items:stretch;flex-direction:column}.digital-proposal-actions{align-items:stretch;flex-direction:column}}

/*
 * The lead timeline, moved from a separate top-level card into
 * this same form's flow, directly underneath the "Customer
 * experience" panel above - same border/background/spacing
 * language as .digital-proposal-panel, but a vertical stack rather
 * than that panel's horizontal flex layout, since this needs a
 * heading followed by a list, not text-plus-button side by side.
 */
.proposal-timeline-panel {
    display: grid;
    gap: 6px;
    padding: 14px 15px;
    margin: 15px 0;
    border: 1px solid #dfe7f0;
    border-radius: 12px;
    background: #f8fafc;
}

.proposal-timeline-panel h3 {
    margin: 3px 0 2px;
}

.proposal-timeline-panel p {
    margin: 0;
    color: var(--secondary-text);
    font-size: 12px;
}

/* ==========================================================
   KG Estates v1.4.1 — Research & Proposal stabilisation
   ========================================================== */

.proposal-detail-grid {
    align-items: start;
}

.proposal-property-card {
    position: static !important;
    top: auto !important;
    align-self: start;
}

.proposal-editor-card {
    min-width: 0;
    align-self: start;
}

.proposal-timeline-card {
    grid-column: 1 / -1 !important;
    position: relative;
    z-index: 0;
    width: auto;
    margin-top: 0;
    clear: both;
}

.proposal-timeline {
    position: relative;
    z-index: 0;
    margin: 0;
}

.research-enrichment-grid-detailed > div {
    min-width: 0;
}

.research-enrichment-grid-detailed small {
    display: block;
    margin-top: 4px;
    color: var(--secondary-text);
    line-height: 1.35;
}

.proposal-property-facts > div {
    min-width: 0;
}

.proposal-property-facts dd {
    overflow-wrap: anywhere;
}

.research-amenities-table-wrap {
    position: relative;
    z-index: 0;
}

@media (max-width: 1000px) {
    .proposal-property-card {
        position: static !important;
    }

    .proposal-timeline-card {
        grid-column: 1 !important;
    }
}


/* ==========================================================
   KG Estates v1.4.2 — Customer & HomeData hotfix
   ========================================================== */

.proposal-customer-panel {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid #dfe7f0;
    border-radius: 12px;
    background: #f8fafc;
}

.proposal-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.proposal-customer-grid .form-field {
    min-width: 0;
}

.research-enrichment-grid-detailed > div {
    background: #fff;
}

.research-enrichment-grid-detailed span {
    overflow-wrap: anywhere;
}

.portal-customer-greeting {
    margin: 4px 0 8px;
    font-weight: 700;
}

@media (max-width: 720px) {
    .proposal-customer-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   KG Estates v1.4.3 — HomeData primary / proposal hotfix
   ========================================================== */

.proposal-detail-grid {
    align-items: start;
}

.proposal-property-card,
.proposal-editor-card,
.proposal-timeline-card {
    min-width: 0;
}

.proposal-timeline-card {
    grid-column: 1 / -1 !important;
    position: relative !important;
    inset: auto !important;
    z-index: 0 !important;
    clear: both;
    overflow: visible;
}

.proposal-timeline {
    position: relative !important;
    z-index: 0 !important;
}

.research-enrichment-grid-detailed small {
    overflow-wrap: anywhere;
}

.research-enrichment-grid-detailed span {
    overflow-wrap: anywhere;
}

@media (max-width: 1000px) {
    .proposal-timeline-card {
        grid-column: 1 !important;
    }
}


/* KG Estates v1.4.4 — durable HomeData cache */

.research-credit-checkboxes label:has(input:disabled) {
    opacity: 0.72;
    cursor: default;
}

.research-credit-checkboxes input:disabled + span {
    font-weight: 700;
}



/* ==========================================================
   KG Estates Diagnostics — temporary engineering workspace
   ========================================================== */

.diagnostics-results {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.diagnostics-intro-card .section-heading,
.diagnostics-summary-card .section-heading,
.diagnostics-map-card .section-heading {
    margin-bottom: 16px;
}

.diagnostics-callout {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #dfe7f0;
    border-radius: 12px;
    background: #f8fafc;
    line-height: 1.55;
}

.diagnostics-form-grid {
    align-items: end;
}

.diagnostics-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.diagnostics-coordinate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.diagnostics-coordinate-grid > div {
    padding: 12px;
    border: 1px solid #e4eaf1;
    border-radius: 10px;
    background: #fff;
    min-width: 0;
}

.diagnostics-coordinate-grid span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.78rem;
    color: #64748b;
}

.diagnostics-coordinate-grid strong {
    display: block;
    overflow-wrap: anywhere;
}

.diagnostics-warning {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid #f0cf8a;
    border-radius: 10px;
    background: #fff8e8;
}

.diagnostics-source-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-bottom: 8px;
    padding: 8px 12px;

    border: 1px solid var(--border-colour);
    border-radius: 8px;

    background: #f8fafc;
}

.diagnostics-source-toggles label {
    display: flex;
    align-items: center;
    gap: 6px;

    font-size: 12px;
    font-weight: 600;
    color: var(--primary-text);

    cursor: pointer;
}

.diagnostics-offset-toggle-label {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    margin-bottom: 10px;
    padding: 8px 12px;

    border: 1px solid #f59e0b;
    border-radius: 8px;

    background: #fffbeb;

    font-size: 12px;
    font-weight: 600;
    color: #92400e;

    cursor: pointer;
}

.diagnostics-offset-toggle-label input {
    margin-top: 2px;
    flex-shrink: 0;
}

.diagnostics-boundary-map {
    width: 100%;
    height: 560px;
    border: 1px solid #dfe7f0;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f6;
}

.diagnostics-zoom-indicator {
    padding: 4px 9px;
    margin-bottom: 6px;

    border-radius: 6px;

    background: rgba(23, 32, 51, 0.85);
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    pointer-events: none;
}

.diagnostics-table-wrap {
    overflow-x: auto;
}

.diagnostics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.diagnostics-table th,
.diagnostics-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e6ebf1;
    text-align: left;
    white-space: nowrap;
}

.diagnostics-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

.diagnostics-json-details summary {
    cursor: pointer;
    font-weight: 700;
}

.diagnostics-json-details pre {
    max-height: 520px;
    overflow: auto;
    margin: 14px 0 0;
    padding: 14px;
    border-radius: 10px;
    background: #111827;
    color: #e5e7eb;
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
    .diagnostics-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .diagnostics-coordinate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .diagnostics-metric-grid,
    .diagnostics-coordinate-grid { grid-template-columns: 1fr; }
    .diagnostics-boundary-map { height: 430px; }
}


/* Diagnostics coordinate comparison v1.1 */
.diagnostics-source-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.diagnostics-source-card{border:1px solid var(--border-color,#d9dee7);border-radius:12px;padding:14px;background:var(--surface,#fff);display:flex;flex-direction:column;gap:6px}.diagnostics-source-card span{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted,#6c7688)}.diagnostics-source-card strong{font-size:.95rem;word-break:break-word}.diagnostics-source-card small,.diagnostics-source-card em{font-size:.8rem;color:var(--text-muted,#6c7688);font-style:normal}.diagnostics-source-card em{font-weight:700}.diagnostics-source-card.is-missing{border-style:dashed}.diagnostics-reference-editor{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-color,#d9dee7)}.diagnostics-reference-grid{grid-template-columns:1fr 1fr 1.5fr auto}.diagnostics-reference-action{justify-content:flex-end}@media(max-width:1100px){.diagnostics-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.diagnostics-reference-grid{grid-template-columns:1fr 1fr}}@media(max-width:680px){.diagnostics-source-grid,.diagnostics-reference-grid{grid-template-columns:1fr}}