/* =========================================================
   PAYMENTS MODULE
   Works with the existing global sidebar/style.css
   ========================================================= */

   .payment-page {
    padding-bottom: 40px;
}

/* =========================================================
   PAGE HEADER
   ========================================================= */

.payment-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.payment-page-header h1 {
    margin: 4px 0 6px;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
}

.payment-page-header p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

.page-breadcrumb {
    color: #6366f1;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.payment-back-btn {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    color: #4b5563;
    background: #fff;
}

.payment-back-btn:hover {
    background: #f8f7ff;
    color: #4f46e5;
    border-color: #c7d2fe;
}

/* =========================================================
   STAT CARDS
   ========================================================= */

.payment-stat-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #edf0f7;
    border-radius: 18px;
    padding: 22px;
    min-height: 145px;
    box-shadow: 0 5px 20px rgba(31, 41, 55, 0.05);
    transition: all 0.2s ease;
}

.payment-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(31, 41, 55, 0.08);
}

.payment-stat-card::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    right: -40px;
    top: -40px;
    background: rgba(99, 102, 241, 0.06);
}

.payment-stat-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(
        135deg,
        #6366f1,
        #7c3aed
    );
    color: #ffffff;
    font-size: 20px;
    margin-bottom: 15px;
}

.payment-stat-label {
    display: block;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}

.payment-stat-value {
    display: block;
    color: #111827;
    font-size: 23px;
    font-weight: 700;
}

/* =========================================================
   FILTER / SEARCH CARD
   ========================================================= */

.payment-filter {
    background: #ffffff;
    border: 1px solid #edf0f7;
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: 0 5px 20px rgba(31, 41, 55, 0.04);
}

.payment-filter .form-label {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
}

.payment-filter .form-control,
.payment-filter .form-select {
    min-height: 43px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: none;
}

.payment-filter .form-control:focus,
.payment-filter .form-select:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10);
}

.payment-search-btn {
    min-height: 43px;
    border: 0;
    border-radius: 10px;
    padding: 0 18px;
    background: linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );
    color: #ffffff;
    font-weight: 600;
}

.payment-search-btn:hover {
    color: #ffffff;
    opacity: 0.94;
}

.payment-reset-btn {
    min-height: 43px;
    border-radius: 10px;
    font-weight: 600;
}

/* =========================================================
   MAIN TABLE CARD
   ========================================================= */

.payment-table-card {
    background: #ffffff;
    border: 1px solid #edf0f7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(31, 41, 55, 0.05);
}

.payment-table-header {
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #eef0f5;
}

.payment-table-header h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
}

.payment-table-header p {
    margin: 3px 0 0;
    color: #9ca3af;
    font-size: 12px;
}

.payment-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 10px;
    padding: 10px 15px;
    background: linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.payment-add-btn:hover {
    color: #ffffff;
    opacity: 0.94;
}

/* =========================================================
   PAYMENT TABLE
   ========================================================= */

.payment-table-wrapper {
    overflow-x: auto;
}

.payment-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.payment-table thead th {
    background: #f8f7ff !important;
    color: #5b5f75 !important;
    border: 0 !important;
    border-bottom: 1px solid #ececf4 !important;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.payment-table tbody td {
    padding: 16px;
    border-bottom: 1px solid #f0f1f5;
    color: #374151;
    font-size: 13px;
    vertical-align: middle;
    white-space: nowrap;
}

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

.payment-table tbody tr {
    transition: background 0.15s ease;
}

.payment-table tbody tr:hover {
    background: #fafaff;
}

.payment-number {
    color: #4f46e5;
    font-weight: 700;
}

.payment-client {
    font-weight: 600;
    color: #1f2937;
}

.payment-contract {
    color: #6b7280;
    font-size: 12px;
}

.payment-property {
    color: #4b5563;
    font-weight: 600;
}

.payment-amount {
    color: #111827;
    font-weight: 700;
}

.payment-balance {
    color: #dc2626;
    font-weight: 700;
}

.payment-balance.paid {
    color: #059669;
}

/* =========================================================
   METHOD BADGES
   ========================================================= */

.payment-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 8px;
    background: #f5f3ff;
    color: #6d28d9;
    font-size: 11px;
    font-weight: 600;
}

/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.payment-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.payment-action-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    text-decoration: none;
    transition: all 0.15s ease;
}

.payment-action-btn:hover {
    color: #4f46e5;
    border-color: #c7d2fe;
    background: #f5f3ff;
}

.payment-action-btn.danger:hover {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.payment-empty {
    padding: 65px 20px;
    text-align: center;
}

.payment-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 18px;
    background: #f5f3ff;
    color: #6366f1;
    font-size: 27px;
}

.payment-empty h5 {
    margin-bottom: 6px;
    color: #374151;
    font-weight: 700;
}

.payment-empty p {
    margin: 0;
    color: #9ca3af;
    font-size: 13px;
}

/* =========================================================
   FORM CARD
   ========================================================= */

.payment-form-card {
    background: #ffffff;
    border: 1px solid #edf0f7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(31, 41, 55, 0.05);
}

.payment-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 22px;
    border-bottom: 1px solid #eef0f5;
}

.payment-header-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f5f3ff;
    color: #6366f1;
    font-size: 19px;
}

.payment-card-header h5 {
    margin: 0;
    color: #1f2937;
    font-weight: 700;
}

.payment-card-header p {
    margin: 3px 0 0;
    color: #9ca3af;
    font-size: 12px;
}

.payment-section {
    padding: 22px;
    border-bottom: 1px solid #eef0f5;
}

.payment-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
}

.payment-section-title i {
    color: #6366f1;
}

/* =========================================================
   FORM ELEMENTS
   ========================================================= */

.payment-form-card .form-label {
    color: #374151;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
}

.payment-form-card .form-control,
.payment-form-card .form-select {
    min-height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: none;
}

.payment-form-card .form-control:focus,
.payment-form-card .form-select:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10);
}

.payment-form-card textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.payment-amount-input .input-group-text {
    background: #f8f7ff;
    color: #6366f1;
    border-color: #e5e7eb;
    font-weight: 700;
}

.payment-amount-input .form-control {
    border-left: 0;
}

.payment-form-card .form-text {
    margin-top: 6px;
    color: #9ca3af;
    font-size: 11px;
}

/* =========================================================
   CONTRACT PREVIEW
   ========================================================= */

.contract-preview {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    background: #f8f7ff;
    border: 1px solid #ebe9ff;
    border-radius: 13px;
}

.contract-preview-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #ffffff;
    color: #6366f1;
    font-size: 18px;
}

.contract-preview-info {
    min-width: 0;
}

.contract-preview-info strong,
.contract-preview-info span,
.contract-preview-info small {
    display: block;
}

.contract-preview-info strong {
    color: #3730a3;
    font-size: 13px;
}

.contract-preview-info span {
    margin-top: 2px;
    color: #374151;
    font-size: 13px;
    font-weight: 600;
}

.contract-preview-info small {
    margin-top: 2px;
    color: #9ca3af;
    font-size: 11px;
}

/* =========================================================
   BALANCE SUMMARY
   ========================================================= */

.balance-summary-card {
    margin: 22px;
    padding: 20px;
    border-radius: 15px;
    background: linear-gradient(
        135deg,
        #f5f3ff,
        #eef2ff
    );
    border: 1px solid #e5e7eb;
}

.balance-summary-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 17px;
    color: #4338ca;
    font-size: 13px;
    font-weight: 700;
}

.balance-summary-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 15px;
}

.balance-summary-grid > div:not(
    .balance-minus,
    .balance-equals
) {
    min-width: 0;
}

.balance-summary-grid span {
    display: block;
    color: #6b7280;
    font-size: 11px;
    margin-bottom: 5px;
}

.balance-summary-grid strong {
    color: #1f2937;
    font-size: 16px;
}

.balance-result strong {
    color: #4f46e5;
}

.balance-minus,
.balance-equals {
    color: #9ca3af;
}

/* =========================================================
   FORM ACTIONS
   ========================================================= */

.payment-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px 22px;
    background: #fafafa;
}

.payment-form-actions .btn {
    min-height: 42px;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
}

.payment-save-btn {
    border: 0;
    background: linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );
}

.payment-save-btn:hover {
    background: linear-gradient(
        135deg,
        #4338ca,
        #6d28d9
    );
}

/* =========================================================
   SIDE CARD
   ========================================================= */

.payment-side-card {
    background: #ffffff;
    border: 1px solid #edf0f7;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 5px 20px rgba(31, 41, 55, 0.05);
}

.payment-side-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 15px;
    background: linear-gradient(
        135deg,
        #6366f1,
        #7c3aed
    );
    color: #ffffff;
    font-size: 23px;
}

.payment-side-card h5 {
    margin: 0;
    color: #1f2937;
    font-weight: 700;
}

.client-code {
    display: inline-block;
    margin-top: 4px;
    color: #9ca3af;
    font-size: 11px;
}

.side-info {
    margin-top: 22px;
}

.side-info > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f1f5;
}

.side-info > div:last-child {
    border-bottom: 0;
}

.side-info span {
    color: #9ca3af;
    font-size: 12px;
}

.side-info strong {
    color: #374151;
    font-size: 12px;
    text-align: right;
}

/* =========================================================
   PAYMENT DETAIL
   ========================================================= */

.payment-detail-card {
    background: #ffffff;
    border: 1px solid #edf0f7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(31, 41, 55, 0.05);
}

.payment-detail-header {
    padding: 24px;
    background: linear-gradient(
        135deg,
        #4f46e5,
        #7c3aed
    );
    color: #ffffff;
}

.payment-detail-header small {
    opacity: 0.8;
    font-size: 11px;
}

.payment-detail-header h2 {
    margin: 5px 0 0;
    font-size: 24px;
    font-weight: 700;
}

.payment-detail-body {
    padding: 24px;
}

.detail-item {
    padding: 14px 0;
    border-bottom: 1px solid #f0f1f5;
}

.detail-item:last-child {
    border-bottom: 0;
}

.detail-item span {
    display: block;
    color: #9ca3af;
    font-size: 11px;
    margin-bottom: 4px;
}

.detail-item strong {
    color: #374151;
    font-size: 14px;
}

/* =========================================================
   ALERT
   ========================================================= */

.payment-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    border: 0;
    font-size: 13px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .payment-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .balance-summary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .balance-minus,
    .balance-equals {
        display: none;
    }

}

@media (max-width: 767px) {

    .payment-page-header h1 {
        font-size: 23px;
    }

    .payment-table-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-add-btn {
        width: 100%;
        justify-content: center;
    }

    .payment-filter {
        padding: 16px;
    }

    .payment-stat-card {
        min-height: auto;
    }

    .payment-card-header,
    .payment-section,
    .payment-detail-body {
        padding: 18px;
    }

    .balance-summary-card {
        margin: 18px;
    }

    .payment-form-actions {
        padding: 16px 18px;
        flex-direction: column-reverse;
    }

    .payment-form-actions .btn {
        width: 100%;
    }

}

/* Client workspace */
.profile-back{display:inline-block;margin-bottom:16px;color:#49685a;font-size:12px;font-weight:600;text-decoration:none}.profile-back:hover{color:#173f35}.client-hero{display:flex;align-items:center;gap:16px;padding:25px 28px;margin-bottom:18px;border-radius:19px;color:#fff;background:linear-gradient(120deg,#173f35,#2b6955);box-shadow:0 16px 34px rgba(19,63,53,.17)}.client-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;color:#173f35;background:#e2f0e3;font-size:23px;font-weight:700}.client-hero span{color:#c5ddce;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.client-hero h1{margin:2px 0;color:#fff;font-size:25px}.client-hero p{margin:0;color:#d3e3d8;font-size:12px}.client-hero-actions{margin-left:auto}.profile-status{display:inline-block;padding:5px 9px;border-radius:99px;font-size:10px;font-weight:700}.client-hero .profile-status{margin-right:8px;color:#fff;background:rgba(255,255,255,.16)}.profile-status.active{color:#20734c;background:#e4f4e9}.profile-status.reserved{color:#966329;background:#fff0dc}.profile-status.completed{color:#2c6090;background:#e8f0fa}.profile-status.cancelled,.profile-status.inactive{color:#944e4e;background:#fae6e6}.client-tabs{display:flex;gap:5px;padding:5px;margin-bottom:22px;border:1px solid #dce8df;border-radius:12px;background:#fff}.client-tabs a{padding:9px 13px;border-radius:8px;color:#60756a;font-size:12px;font-weight:600;text-decoration:none}.client-tabs a.active{color:#fff;background:#173f35}.client-tabs span{padding:2px 6px;border-radius:8px;background:#edf4ee;font-size:10px}.client-tabs .active span{color:#173f35}.profile-card{overflow:hidden;border:1px solid #dce8df;border-radius:17px;background:#fff;box-shadow:0 10px 27px rgba(22,56,45,.06)}.profile-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 20px;border-bottom:1px solid #e6eee8}.profile-card-head h5{margin:0;color:#173f35;font-size:14px;font-weight:700}.profile-card-head p{margin:3px 0 0;color:#64776d;font-size:11px}.profile-card-head>i{color:#bc8241;font-size:19px}.profile-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:7px 20px}.profile-details>div{padding:13px 0;border-bottom:1px solid #edf2ee}.profile-details>div:nth-last-child(2):not(.profile-address){border-bottom:0}.profile-details span,.profile-details strong{display:block}.profile-details span{margin-bottom:4px;color:#718278;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.profile-details strong{color:#1b2e27;font-size:12px;line-height:1.5}.profile-address{grid-column:1/-1}.profile-side-card{padding:8px 20px}.snapshot{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid #e8f0e9}.snapshot:last-child{border-bottom:0}.snapshot span{color:#61756a;font-size:12px}.snapshot strong{color:#173f35;font-size:15px}.client-table th{background:#f5f8f5!important}.client-table td{font-size:12px}.client-table td strong,.client-table td small{display:block}.client-table td small{margin-top:2px;color:#718278;font-size:10px}.client-table a{color:#174d3d;font-weight:700;text-decoration:none}.paid-value{color:#237750;font-weight:700}.balance-value{color:#a2672b;font-weight:700}.client-alert{border:0;border-radius:12px;font-size:12px}.upload-panel{margin:18px;padding:18px;border:1px dashed #aecab5;border-radius:12px;background:#f7fbf7}
@media(max-width:767px){.client-hero{align-items:flex-start;flex-wrap:wrap;padding:21px}.client-hero h1{font-size:20px}.client-hero-actions{width:100%;margin-left:0}.profile-details{grid-template-columns:1fr}.profile-details>div{border-bottom:1px solid #edf2ee!important}.client-tabs{overflow-x:auto}.client-tabs a{white-space:nowrap}.client-table{min-width:760px}}
.client-list-row{cursor:pointer}.client-list-row:hover td{background:#f3f8f4!important}.client-list-row:focus-visible{outline:2px solid #6f9d86;outline-offset:-2px}

/* =========================================================
   URBANEST DESIGN SYSTEM
   Shared application shell and component refinements
   ========================================================= */

:root {
    --ink: #162621;
    --ink-soft: #52635d;
    --forest: #173f35;
    --forest-deep: #0d2b24;
    --sage: #cfe0d2;
    --mint: #e9f2e8;
    --sand: #f4eee5;
    --canvas: #f6f8f5;
    --line: #e1e9e2;
    --card: #ffffff;
    --gold: #c99048;
    --success: #22815b;
    --warning: #c8892f;
    --danger: #c65353;
    --shadow: 0 16px 42px rgba(22, 56, 45, .08);
}

* { box-sizing: border-box; }

body,
body.dashboard-body {
    min-height: 100vh;
    background: var(--canvas);
    color: var(--ink);
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

/* Login */
.login-wrapper {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(207, 224, 210, .75) 0 10%, transparent 30%),
        radial-gradient(circle at 88% 85%, rgba(201, 144, 72, .2) 0 9%, transparent 29%),
        linear-gradient(135deg, #103b31 0%, #184d40 50%, #102e28 100%);
}

.login-wrapper::before,
.login-wrapper::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
}
.login-wrapper::before { top: -210px; right: -120px; }
.login-wrapper::after { bottom: -260px; left: -110px; }

.login-card {
    width: min(100%, 440px);
    padding: 42px;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 28px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 30px 80px rgba(0, 20, 14, .3);
}

.login-card .brand-icon,
.sidebar-brand .brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #d5a35f, #aa7134);
    box-shadow: 0 9px 18px rgba(170, 113, 52, .25);
}
.login-card .brand-icon { font-size: 23px; margin-bottom: 14px; }
.login-card h2 { color: var(--forest); letter-spacing: -.7px; }
.login-card .form-label { color: var(--ink); font-size: 13px; font-weight: 600; }

/* Application chrome */
.sidebar {
    width: 264px;
    height: 100vh;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    padding: 23px 14px 16px;
    color: #e7f0e9;
    background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
    box-shadow: 12px 0 40px rgba(15, 45, 37, .12);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 26px;
}
.sidebar-brand .brand-icon { flex: 0 0 42px; width: 42px; height: 42px; font-size: 18px; border-radius: 13px; }
.brand-text h5 { margin: 0; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.brand-text span { display: block; margin-top: 2px; color: #aabfb4; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.sidebar-nav { overflow-y: auto; padding-right: 2px; }
.nav-section { margin-bottom: 21px; }
.nav-section-title { padding: 0 12px 8px; color: #8ea79b; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 3px 0;
    padding: 11px 12px;
    border-radius: 11px;
    color: #c7d7cc;
    font-size: 13px;
    font-weight: 500;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}
.sidebar .nav-link i { width: 18px; font-size: 16px; text-align: center; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }
.sidebar .nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(208, 163, 95, .27), rgba(208, 163, 95, .1)); box-shadow: inset 3px 0 0 #d5a35f; }
.sidebar-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 15px 7px 0; border-top: 1px solid rgba(255,255,255,.11); }
.sidebar-user { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.sidebar-user-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: var(--forest); background: #d5e5d7; }
.sidebar-user-info { min-width: 0; line-height: 1.25; }
.sidebar-user-info strong { display: block; overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-info small { color: #9eb5aa; font-size: 10px; }
.sidebar-logout { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #e6c39a; text-decoration: none; }
.sidebar-logout:hover { color: #fff; background: rgba(255,255,255,.1); }

.main-content {
    min-height: 100vh;
    margin-left: 264px;
    padding: 36px 42px 48px;
}

/* Shared components */
h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: -.35px; }
.text-muted { color: var(--ink-soft) !important; }
.card,
.payment-card,
.content-card,
.detail-card {
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: var(--card);
    box-shadow: var(--shadow) !important;
}
.card-header { background: transparent; border-bottom: 1px solid var(--line); }
.btn {
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary,
.btn-primary-custom,
.btn-search,
.btn-sales-save {
    border-color: var(--forest) !important;
    background: var(--forest) !important;
    box-shadow: 0 8px 16px rgba(23, 63, 53, .16);
}
.btn-primary:hover,
.btn-primary-custom:hover,
.btn-search:hover,
.btn-sales-save:hover { background: #0d3028 !important; }
.btn-light,
.btn-sales-cancel,
.btn-clear { border-color: var(--line) !important; background: #fff !important; color: var(--ink-soft) !important; }
.form-label { color: var(--ink); font-size: 12px; font-weight: 600; }
.form-control,
.form-select {
    min-height: 44px;
    border: 1px solid #dce6de;
    border-radius: 10px;
    color: var(--ink);
    font-size: 13px;
    box-shadow: none !important;
}
.form-control::placeholder { color: #a8b5ac; }
.form-control:focus,
.form-select:focus { border-color: #6f9d86; box-shadow: 0 0 0 4px rgba(95, 145, 117, .12) !important; }
.input-group-text { border-color: #dce6de; background: #f5f8f4; color: var(--forest); }

table.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f5f8f4; color: var(--ink); }
.table thead th { padding-top: 15px; padding-bottom: 15px; border-bottom-color: var(--line); color: #62746a; background: #f7faf7; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.table tbody td { padding-top: 15px; padding-bottom: 15px; border-color: #edf2ee; font-size: 13px; }
.badge { padding: 6px 10px; font-size: 10px; font-weight: 700; }
.bg-success-subtle { background-color: #e5f4ea !important; }.text-success { color: #20784f !important; }
.bg-primary-subtle { background-color: #e6f0eb !important; }.text-primary { color: #256047 !important; }

/* Dashboard */
.dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.dashboard-header h3 { font-size: 29px; letter-spacing: -1px; }
.dashboard-date { padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--forest); background: #fff; font-size: 12px; font-weight: 600; }
.welcome-card { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 158px; padding: 31px 34px; border-radius: 20px; color: #fff; background: linear-gradient(118deg, #174a3e, #20604e); box-shadow: 0 18px 34px rgba(22, 73, 60, .2); }
.welcome-card::after { content: ''; position: absolute; right: -20px; bottom: -85px; width: 260px; height: 260px; border: 38px solid rgba(213, 163, 95, .18); border-radius: 50%; }
.welcome-content { position: relative; z-index: 1; }.welcome-content h4, .welcome-content h5 { color: #fff; }.welcome-label { color: #bcd7c7; font-size: 12px; }.welcome-role { display: inline-block; margin-top: 12px; padding: 5px 10px; border-radius: 20px; color: #f4d8ae; background: rgba(0,0,0,.14); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }.welcome-icon { position: relative; z-index: 1; margin-left: auto; color: #e3b775; font-size: 54px; opacity: .88; }
.dashboard-stat-card { height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(22,56,45,.05); transition: transform .2s ease, box-shadow .2s ease; }.dashboard-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.stat-content { display: flex; align-items: center; justify-content: space-between; }.stat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; font-size: 19px; }.stat-icon.blue, .stat-icon.purple { color: #22604b; background: #e5f1e7; }.stat-icon.green { color: #217951; background: #e5f6ed; }.stat-icon.orange { color: #ab6f23; background: #fcf0df; }.stat-content h3 { margin: 0; font-size: 25px; font-weight: 700; }.stat-content p { margin: 0 0 3px; color: var(--ink-soft); font-size: 11px; }
.quick-action-card { display: flex; align-items: center; min-height: 82px; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); text-decoration: none; background: #fff; transition: all .18s ease; }.quick-action-card:hover { color: var(--forest); border-color: #b9d1c0; box-shadow: var(--shadow); transform: translateY(-2px); }.quick-action-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--forest); background: var(--mint); }.quick-action-card strong, .quick-action-card small { display: block; }.quick-action-card strong { font-size: 12px; }.quick-action-card small { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }.quick-action-card > .bi-arrow-right { color: #9eb5a5; }
.recent-header { display: flex; align-items: center; justify-content: space-between; padding: 21px 24px; border-bottom: 1px solid var(--line); }.recent-header h5 { font-size: 15px; }.recent-header p { font-size: 11px; }.view-all-link { color: var(--forest); font-size: 12px; font-weight: 700; text-decoration: none; }.client-table-name { display: flex; align-items: center; gap: 10px; }.client-table-name strong, .client-table-name small { display: block; }.client-table-name strong { font-size: 12px; }.client-table-name small { color: var(--ink-soft); font-size: 10px; }.client-mini-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--forest); background: var(--mint); font-size: 11px; font-weight: 700; }.client-code, .property-code, .contract-number { color: var(--forest); font-weight: 700; }.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; }.status-badge.active { color: #1f7950; background: #e8f6ed; }.status-badge.inactive { color: #986528; background: #fcf1df; }.table-action { display: inline-grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 8px; color: var(--forest); text-decoration: none; }.table-action:hover { background: var(--mint); }.system-status { display: flex; justify-content: space-between; padding: 13px 16px; border-radius: 11px; color: #287653; background: #e8f4ec; font-size: 11px; }.system-status small { color: #4e8c6d; }

/* Listing pages */
.page-header { gap: 18px; }.page-title h3, .page-title { color: var(--ink); }.filter-area, .payment-filter { border-color: var(--line) !important; background: #fff !important; box-shadow: var(--shadow) !important; }.content-card { overflow: hidden; }.search-wrapper .bi { color: #789184; }.stat-card { border-color: var(--line) !important; box-shadow: 0 8px 24px rgba(22,56,45,.05); }.property-table thead th, .sales-table thead th { background: #f7faf7 !important; }.price, .payment-amount { color: var(--forest) !important; font-weight: 700; }

/* Payments and sales use their own page classes */
.payment-page .page-title, .sales-create-title, .sales-edit-title { color: var(--ink); }.payment-stat-card, .sales-create-card, .sales-edit-card { border-color: var(--line) !important; box-shadow: var(--shadow) !important; }.payment-stat-icon, .sales-create-card-icon, .sales-edit-card-icon { background: var(--mint) !important; color: var(--forest) !important; }.payment-table thead th { background: #f7faf7 !important; }.payment-number { color: var(--forest) !important; }.contract-badge, .payment-method-badge { color: #276148 !important; background: #e6f2e8 !important; }.sales-create-card-header, .sales-edit-card-header { border-bottom-color: var(--line) !important; }.calculation-box, .balance-summary, .property-info { border-color: #dce9df !important; background: #f3f8f3 !important; }

/* Payment details */
.payment-hero {
    position: relative;
    overflow: hidden;
    padding: 24px 27px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(120deg, #173f35, #286251);
    box-shadow: 0 18px 35px rgba(20, 66, 54, .18);
}
.payment-hero::after {
    content: '';
    position: absolute;
    width: 175px;
    height: 175px;
    right: -54px;
    bottom: -90px;
    border: 26px solid rgba(213,163,95,.24);
    border-radius: 50%;
}
.payment-hero > * { position: relative; z-index: 1; }
.payment-hero-label,
.payment-detail-label {
    color: #718178;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.payment-hero-label { color: #bcd5c7; }
.payment-hero-number { margin-top: 4px; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.payment-hero-amount { margin-top: 4px; color: #f5d19e; font-size: 24px; font-weight: 700; letter-spacing: -.6px; }
.payment-hero .text-muted { color: #d2e2d7 !important; }
.payment-page .payment-card { overflow: hidden; }
.payment-page .payment-card .card-header { padding: 16px 20px; }
.payment-page .payment-card .card-header h5 { margin: 0; color: var(--forest); font-size: 14px; font-weight: 700; }
.payment-page .payment-card .card-body { padding: 21px 20px; }
.payment-detail-label { margin-bottom: 5px; }
.payment-detail-value { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.48; }
.payment-detail-value a { color: var(--forest); font-weight: 700; }
.payment-detail-value.success { color: var(--success); }.payment-detail-value.primary { color: var(--forest); }
.payment-page .balance-summary { padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; }
.summary-title { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--forest); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.balance-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--ink-soft); font-size: 12px; }
.balance-row strong { color: var(--ink); font-size: 12px; }.balance-divider { margin: 12px 0; border-color: var(--line); opacity: 1; }.balance-row.payment-value strong { color: var(--forest); }.balance-row.remaining-value { margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--mint); }.balance-row.remaining-value strong { color: var(--forest); }
.payment-page .alert-success { border: 1px solid #9fd6b8; color: #19633f; background: #e5f4e9; font-size: 12px; }

@media (max-width: 991px) {
    .mobile-topbar { display: flex !important; }
    .payment-hero { padding: 21px; }
}

/* Reports */
.reports-page .page-title h3 { margin: 3px 0 5px; font-size: 28px; font-weight: 700; }
.eyebrow { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.reports-header { align-items: flex-end; }.report-export-menu { display: flex; flex-wrap: wrap; gap: 8px; }
.report-filter { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 25px rgba(22,56,45,.04); }
.filter-caption { color: var(--forest); font-size: 12px; font-weight: 700; }.filter-caption i { margin-right: 6px; color: var(--gold); }.report-filter-controls { display: flex; align-items: center; gap: 8px; }.report-filter-controls .form-control { min-height: 39px; width: 150px; }.date-separator { color: var(--ink-soft); font-size: 12px; }
.report-kpi { display: flex; min-height: 122px; align-items: flex-start; gap: 13px; padding: 19px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(22,56,45,.05); }.report-kpi-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 12px; font-size: 18px; }.report-kpi-icon.sage { color: #28604a; background: #e7f2e8; }.report-kpi-icon.gold { color: #a86b24; background: #fcf0df; }.report-kpi-icon.blue { color: #336c88; background: #e8f3f8; }.report-kpi-icon.green { color: #2a7d55; background: #e5f5ec; }.report-kpi span, .report-kpi small { display: block; }.report-kpi span { color: var(--ink-soft); font-size: 11px; }.report-kpi strong { display: block; margin: 3px 0 4px; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.5px; }.report-kpi small { color: #8a9b91; font-size: 10px; }
.report-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 9px 26px rgba(22,56,45,.05); }.report-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); }.report-card-header h5 { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; }.report-card-header p { margin: 3px 0 0; color: var(--ink-soft); font-size: 11px; }.report-card-header > i { color: var(--gold); font-size: 19px; }.report-card-link { color: var(--forest); font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }.report-card-link i { margin-left: 3px; }
.collection-list { padding: 12px 20px 18px; }.collection-row { padding: 9px 0; }.collection-row-top { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--ink-soft); font-size: 11px; }.collection-row-top strong { color: var(--ink); font-size: 12px; }.collection-track { height: 7px; overflow: hidden; border-radius: 9px; background: #edf3ee; }.collection-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6f9d86, #267052); }
.portfolio-list { padding: 12px 20px 8px; }.portfolio-list > div { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #edf2ee; }.portfolio-list span { color: var(--ink-soft); font-size: 12px; }.portfolio-list strong { color: var(--ink); font-size: 15px; }.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; }.dot.available { background: #4eaa75; }.dot.reserved { background: #d19a4a; }.dot.sold { background: #617fba; }.portfolio-list + .report-card-link { display: block; padding: 14px 20px; }
.report-table thead th { padding: 12px 17px; }.report-table tbody td { padding: 13px 17px; vertical-align: middle; }.report-table td small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 10px; }.report-id { color: var(--forest); font-size: 12px; font-weight: 700; text-decoration: none; }.report-balance { color: #a4672d; font-weight: 700; }.report-amount { color: var(--success); font-weight: 700; }.report-status, .method-pill { display: inline-flex; padding: 4px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; }.report-status.reserved { color: #9a6627; background: #fff1dd; }.report-status.active { color: #28634c; background: #e5f4ea; }.report-status.completed { color: #2d5e91; background: #eaf1fb; }.report-status.cancelled { color: #9b4c4c; background: #fae7e7; }.method-pill { color: #416b56; background: #edf5ee; }
.project-list { padding: 4px 20px 12px; }.project-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf2ee; }.project-row:last-child { border-bottom: 0; }.project-row strong, .project-row small { display: block; }.project-row strong { color: var(--ink); font-size: 12px; }.project-row small { margin-top: 3px; color: var(--ink-soft); font-size: 10px; }.project-row > span { flex: 0 0 auto; padding: 4px 7px; border-radius: 8px; color: var(--forest); background: var(--mint); font-size: 10px; font-weight: 700; }.report-empty { padding: 37px 20px; color: var(--ink-soft); font-size: 12px; text-align: center; }
@media (max-width: 767px) { .reports-header, .report-filter { align-items: flex-start; flex-direction: column; }.report-filter-controls { width: 100%; flex-wrap: wrap; }.report-filter-controls .form-control { flex: 1 1 130px; width: auto; }.report-export-menu { width: 100%; }.report-export-menu .btn { flex: 1; }.report-table { min-width: 720px; } }

.mobile-topbar, .sidebar-overlay { display: none; }
@media (max-width: 991px) {
    .sidebar { transform: translateX(-105%); transition: transform .25s ease; }
    .sidebar.show { transform: translateX(0); }
    .sidebar-overlay.show { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(10, 29, 23, .5); }
    .mobile-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
    .mobile-menu-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; color: var(--forest); background: var(--mint); }.mobile-brand { color: var(--forest); font-weight: 700; font-size: 14px; }.mobile-brand i { color: var(--gold); }
    .main-content { margin-left: 0 !important; padding: 28px 22px 40px !important; }
}
@media (max-width: 575px) {
    .login-card { padding: 30px 24px; border-radius: 22px; }
    .main-content { padding: 22px 15px 34px !important; }
    .dashboard-header, .page-header { align-items: flex-start !important; flex-direction: column; }
    .dashboard-header h3 { font-size: 25px; }.welcome-card { min-height: 145px; padding: 25px; }.welcome-icon { display: none; }.recent-header { align-items: flex-start; gap: 10px; flex-direction: column; }.system-status { align-items: flex-start; gap: 4px; flex-direction: column; }
}

/* Reports visual fallback: keep report cards distinct even when a browser
   has stale component styles cached. */
.reports-page .report-card {
    margin-bottom: 0;
    overflow: hidden !important;
    border: 1px solid #dce8df !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(18, 59, 46, .08) !important;
}
.reports-page .report-card-header {
    min-height: 78px;
    padding: 18px 21px !important;
    border-bottom: 1px solid #e5eee7 !important;
    background: linear-gradient(90deg, #ffffff, #f8fbf8) !important;
}
.reports-page .report-card-header h5 { color: #173f35 !important; font-size: 15px !important; }
.reports-page .report-card-header p { color: #60756a !important; }
.reports-page .collection-list { padding: 15px 21px 20px !important; }
.reports-page .portfolio-list { padding: 11px 21px 7px !important; }
.reports-page .portfolio-list > div { border-bottom-color: #e9f0ea !important; }
.reports-page .report-card-link { color: #173f35 !important; }
.reports-page .report-table thead th { background: #f4f8f4 !important; color: #557166 !important; }
.reports-page .report-table tbody td { border-bottom-color: #e8f0ea !important; }
.reports-page .report-kpi { border: 1px solid #dce8df !important; background: #fff !important; box-shadow: 0 10px 25px rgba(18, 59, 46, .06) !important; }
.reports-page .report-filter { border: 1px solid #dce8df !important; background: #fff !important; box-shadow: 0 10px 25px rgba(18, 59, 46, .05) !important; }

@media (max-width: 767px) {
    .reports-page .report-card { margin-bottom: 2px; }
    .reports-page .report-card-header { min-height: auto; padding: 16px 17px !important; }
    .reports-page .collection-list,
    .reports-page .portfolio-list { padding-left: 17px !important; padding-right: 17px !important; }
}