/**
 * HOA Management System — Properties Module Overlay
 *
 * Visual-only adaptation for App.renderPropertiesPage. Mirrors the
 * design language established by dashboard.css, payments.css,
 * invoices.css, and pos.css.
 *
 * Strict rules:
 *   - Token-driven only (uses tokens from tokens.css).
 *   - Wrapper class .prop-shell is the ONLY new DOM hook required.
 *   - All existing IDs (#prop-view-toggle, #toggle-prop-filters-btn,
 *     #toggle-prop-insights-btn, #add-property-btn,
 *     #export-properties-excel-btn, #bulk-send-delinquent-btn,
 *     #bulk-print-delinquent-btn, #bulk-send-soa-btn,
 *     #bulk-print-soa-btn, #prop-filter-panel, #standing-filter,
 *     #status-filter, #membership-filter, #advance-filter,
 *     #balance-filter, #pasalo-filter, #moved-in-filter,
 *     #developer-filter, #group-by, #secondary-sort, #sort-direction,
 *     #reset-all-filters-btn, #reset-sorting-btn,
 *     #properties-map-container, #generic-crud-container,
 *     .prop-summary-strip, .summary-item, .summary-divider) and event
 *     wiring preserved untouched.
 *   - Dark mode comes for free via [data-theme="dark"] semantic tokens.
 *
 * Loaded after style.css, shell.css, and module_guide.css.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LOCAL TOKENS
═══════════════════════════════════════════════════════════════════════════ */
.prop-shell {
    --prop-radius-lg: 16px;
    --prop-radius-md: 12px;
    --prop-radius-sm: 10px;
    --prop-radius-pill: 999px;
    --prop-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --prop-transition: 0.2s var(--prop-ease);
    --prop-font: "Figtree", "Inter", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    font-family: var(--prop-font);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════════════════════════════════════════ */
.prop-shell .prop-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--prop-radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 18px 22px;
    margin-bottom: 16px;
    transition: box-shadow var(--prop-transition);
}
.prop-shell .prop-page-header:hover { box-shadow: var(--shadow-sm); }

.prop-shell .prop-page-header h1 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}
.prop-shell .prop-page-header h1 i { color: var(--brand-primary); }

.prop-shell .prop-page-header .btn,
.prop-shell .prop-page-header .dropdown-toggle {
    border-radius: var(--prop-radius-sm);
    font-weight: 600;
    transition: background var(--prop-transition),
                border-color var(--prop-transition),
                color var(--prop-transition),
                transform var(--prop-transition),
                box-shadow var(--prop-transition);
}
.prop-shell .prop-page-header .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}
.prop-shell .prop-page-header .btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Add Property CTA — brand-green pill */
.prop-shell .prop-page-header #add-property-btn {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
    border-radius: var(--prop-radius-pill);
    padding: 7px 18px;
    font-size: 0.85rem;
    box-shadow: var(--shadow-xs);
}
.prop-shell .prop-page-header #add-property-btn:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    box-shadow: var(--shadow-sm);
}

/* List/Map view toggle */
.prop-shell #prop-view-toggle .btn {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-secondary);
    padding: 6px 12px;
}
.prop-shell #prop-view-toggle .btn.active {
    background: var(--brand-primary-subtle);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROPERTY LIMIT BANNER
═══════════════════════════════════════════════════════════════════════════ */
.prop-shell .alert {
    border-radius: var(--prop-radius-md);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-xs);
}
.prop-shell .alert .progress {
    background: var(--bg-sunken);
    border-radius: var(--prop-radius-pill);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER PANEL
═══════════════════════════════════════════════════════════════════════════ */
.prop-shell #prop-filter-panel .card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--prop-radius-md) !important;
    box-shadow: var(--shadow-xs) !important;
}
.prop-shell #prop-filter-panel .form-label {
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.prop-shell #prop-filter-panel .form-select,
.prop-shell #prop-filter-panel .form-control {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--prop-radius-sm);
    color: var(--text-primary);
    transition: border-color var(--prop-transition),
                box-shadow var(--prop-transition);
}
.prop-shell #prop-filter-panel .form-select:focus,
.prop-shell #prop-filter-panel .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}
.prop-shell #prop-filter-panel hr {
    border-color: var(--border-default);
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUMMARY STRIP (rendered by summaryRenderer)
═══════════════════════════════════════════════════════════════════════════ */
.prop-shell .prop-summary-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--prop-radius-md);
    box-shadow: var(--shadow-xs);
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    transition: box-shadow var(--prop-transition);
}
.prop-shell .prop-summary-strip:hover { box-shadow: var(--shadow-sm); }

.prop-shell .prop-summary-strip .summary-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.prop-shell .prop-summary-strip .summary-item strong {
    color: var(--text-primary);
    font-weight: 700;
}
.prop-shell .prop-summary-strip .summary-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border-default);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GENERIC CRUD TABLE (rendered into #generic-crud-container)
═══════════════════════════════════════════════════════════════════════════ */
.prop-shell #generic-crud-container > .card,
.prop-shell #generic-crud-container .table-responsive {
    background: var(--bg-surface);
    border-radius: var(--prop-radius-md);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--prop-transition);
}
.prop-shell #generic-crud-container > .card:hover { box-shadow: var(--shadow-sm); }

.prop-shell #generic-crud-container table thead th {
    background: var(--bg-sunken) !important;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    z-index: 2;
}
.prop-shell #generic-crud-container table tbody tr {
    transition: background var(--prop-transition);
}
.prop-shell #generic-crud-container table tbody tr:hover {
    background: var(--bg-hover);
}
.prop-shell #generic-crud-container table tbody td {
    border-color: var(--border-default);
    vertical-align: middle;
}

/* Action column buttons */
.prop-shell #generic-crud-container .edit-btn,
.prop-shell #generic-crud-container .register-owner-btn {
    border-radius: var(--prop-radius-sm);
    transition: transform var(--prop-transition),
                box-shadow var(--prop-transition);
}
.prop-shell #generic-crud-container .edit-btn:hover,
.prop-shell #generic-crud-container .register-owner-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

/* Behavior badge spacing */
.prop-shell .behavior-badge {
    border-radius: var(--prop-radius-pill);
    padding: 3px 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Pagination */
.prop-shell .pagination .page-link {
    border-radius: var(--prop-radius-sm);
    margin: 0 2px;
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.prop-shell .pagination .page-item.active .page-link {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAP CONTAINER
═══════════════════════════════════════════════════════════════════════════ */
.prop-shell #properties-map-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--prop-radius-md);
    box-shadow: var(--shadow-xs);
    padding: 12px;
    min-height: 480px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY / LOADING STATE
═══════════════════════════════════════════════════════════════════════════ */
.prop-shell .prop-state {
    text-align: center;
    color: var(--text-muted);
    padding: 36px 16px;
    background: var(--bg-surface);
    border: 1px dashed var(--border-default);
    border-radius: var(--prop-radius-md);
    margin: 12px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: REDUCED MOTION
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .prop-shell .prop-page-header,
    .prop-shell .prop-page-header .btn,
    .prop-shell .prop-summary-strip,
    .prop-shell #generic-crud-container > .card,
    .prop-shell #generic-crud-container table tbody tr,
    .prop-shell #generic-crud-container .edit-btn,
    .prop-shell #generic-crud-container .register-owner-btn {
        transition: none !important;
    }
    .prop-shell .prop-page-header .btn:hover,
    .prop-shell #generic-crud-container .edit-btn:hover,
    .prop-shell #generic-crud-container .register-owner-btn:hover {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════════════════════════════════ */
@media print {
    .prop-shell .prop-page-header .btn,
    .prop-shell #prop-view-toggle,
    .prop-shell #prop-filter-panel,
    .prop-shell .pagination {
        display: none !important;
    }
    .prop-shell #generic-crud-container > .card,
    .prop-shell .prop-summary-strip {
        box-shadow: none !important;
        border-color: #999 !important;
    }
}