/* ==========================================================================
   Lokto Design System — app.css
   Design tokens, reset, base styles, and component styles.
   Reference: DESIGN.md
   ========================================================================== */

/* --- Imports --- */
@import url("layouts/layout-app-27N2_On.css");
@import url("layouts/layout-public-83Bs2YK.css");
@import url("components/design-system-lN-G41f.css");
@import url("components/dashboard-2eiLp04.css");
@import url("components/login-oNIMUr5.css");
@import url("components/paiements-V_utjo9.css");
@import url("components/home-3c0qSlT.css");
@import url("components/conversations-9hd_Ol8.css");
@import url("components/agenda-1QYWc4Y.css");
@import url("components/bien-show-CmMDuT_.css");
@import url("components/baux-TBthnWD.css");

/* ==========================================================================
   1. Design Tokens — CSS Custom Properties
   ========================================================================== */

:root {
    /* --- 1.1 Brand --- */
    --color-primary: #2563EB;
    --color-on-primary: #FFFFFF;
    --color-primary-container: #DBEAFE;
    --color-primary-container-dark: #1E3A5F;

    /* --- 1.2 Semantic --- */
    --color-success: #16A34A;
    --color-success-container: #DCFCE7;
    --color-on-success: #FFFFFF;

    --color-error: #DC2626;
    --color-error-container: #FEE2E2;
    --color-on-error: #FFFFFF;

    --color-warning: #D97706;
    --color-warning-container: #FEF3C7;

    --color-info: #2563EB;
    --color-info-container: #DBEAFE;

    /* --- 1.3 Surfaces — Light (default) --- */
    --color-background: #F8F9FA;
    --color-surface: #FFFFFF;
    --color-surface-variant: #F1F3F5;
    --color-outline: #DEE2E6;
    --color-outline-variant: #E9ECEF;

    /* --- 1.5 Text — Light --- */
    --color-text-primary: #111827;
    --color-text-secondary: #4B5563;
    --color-text-tertiary: #9CA3AF;

    /* --- 1.7 Shimmer — Light --- */
    --color-shimmer-base: #E9ECEF;
    --color-shimmer-highlight: #F1F3F5;

    /* --- 1.8 Third-party --- */
    --color-google: #4285F4;
    --color-apple: #000000;

    /* --- 2. Typography --- */
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* --- 3.1 Spacing --- */
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;

    /* --- 3.2 Border Radius --- */
    --radius-card: 16px;
    --radius-fab: 16px;
    --radius-button: 12px;
    --radius-input: 12px;
    --radius-chip: 20px;
    --radius-bottom-sheet: 20px;
    --radius-skeleton: 8px;
    --radius-dpe: 6px;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
    /* 1.4 Surfaces — Dark */
    --color-background: #111318;
    --color-surface: #1A1D24;
    --color-surface-variant: #23272F;
    --color-outline: #33383F;
    --color-outline-variant: #2A2E36;

    /* 1.6 Text — Dark */
    --color-text-primary: #F1F3F5;
    --color-text-secondary: #9CA3AF;
    --color-text-tertiary: #6B7280;

    /* 1.7 Shimmer — Dark */
    --color-shimmer-base: #23272F;
    --color-shimmer-highlight: #33383F;

    /* Dark primary container */
    --color-primary-container: #1E3A5F;
}

/* ==========================================================================
   2. Reset / Normalize
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
}

body {
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-primary);
    background-color: var(--color-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* ==========================================================================
   3. Typography Scale (Material Design 3)
   ========================================================================== */

.text-headline-small {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
}

.text-title-large {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
}

.text-title-medium {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.text-title-small {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.text-body-large {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.text-body-medium {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.text-body-small {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.text-label-large {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.text-label-medium {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.text-label-small {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
}

/* --- 2.3 Custom recurring styles --- */

.text-appbar-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
}

.text-section-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.5;
}

/* ==========================================================================
   4. Component Styles
   ========================================================================== */

/* --- 4.1 Buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    border-radius: var(--radius-button);
    width: 100%;
    text-decoration: none;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
    border: none;
}

.btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.btn-primary:hover {
    opacity: 0.9;
    text-decoration: none;
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-outline);
}

.btn-secondary:hover {
    background-color: var(--color-surface-variant);
    text-decoration: none;
}

.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-tertiary {
    background-color: transparent;
    color: var(--color-primary);
    padding: 14px 24px;
    width: auto;
}

.btn-tertiary:hover {
    background-color: var(--color-primary-container);
    text-decoration: none;
}

.btn-danger {
    background-color: var(--color-error);
    color: var(--color-on-primary);
}

.btn-danger:hover {
    opacity: 0.9;
    text-decoration: none;
}

.btn--auto {
    width: auto;
    min-width: 140px;
}

.btn--loading .btn__label {
    visibility: hidden;
}

.btn--loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* FAB */
.fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: 16px;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border: none;
    border-radius: var(--radius-fab);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: calc(64px + var(--spacing-xl) + env(safe-area-inset-bottom, 0px));
    right: var(--spacing-xl);
    z-index: 100;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.fab:hover {
    opacity: 0.9;
    text-decoration: none;
}

.fab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .fab {
        bottom: var(--spacing-2xl);
    }
}

.fab .material-symbols-rounded {
    font-size: 24px;
}

/* --- 4.2 Cards --- */

.card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-card);
    padding: var(--spacing-xl);
}

.card--interactive {
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.card--interactive:hover {
    background-color: var(--color-surface-variant);
    text-decoration: none;
}

.card--warning {
    background-color: var(--color-warning-container);
    border-color: var(--color-warning);
}

/* --- 4.3 Badges / Chips --- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: var(--radius-chip);
    white-space: nowrap;
}

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

.badge--error {
    color: var(--color-error);
    background-color: var(--color-error-container);
}

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

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

.badge--neutral {
    color: var(--color-text-tertiary);
    background-color: var(--color-surface-variant);
}

/* Filter Tabs (4.14) */
.filter-tabs {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.filter-tab {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-chip);
    background-color: var(--color-surface-variant);
    color: var(--color-text-secondary);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.filter-tab:hover {
    background-color: var(--color-outline-variant);
    text-decoration: none;
}

.filter-tab--active,
.filter-tab.is-active {
    background-color: var(--color-primary-container);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* DPE Badge (4.13) */
.dpe-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-dpe);
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

.dpe-badge--a { background-color: #16A34A; }
.dpe-badge--b { background-color: #22C55E; }
.dpe-badge--c { background-color: #84CC16; }
.dpe-badge--d { background-color: #EAB308; }
.dpe-badge--e { background-color: #F97316; }
.dpe-badge--f { background-color: #EF4444; }
.dpe-badge--g { background-color: #DC2626; }
.dpe-badge--expired { opacity: 0.5; }

/* --- 4.4 Form Fields --- */

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--color-text-secondary);
}

.form-control {
    background-color: var(--color-surface-variant);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-input);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-primary);
    width: 100%;
    transition: border-color 0.15s ease;
}

.form-control::placeholder {
    color: var(--color-text-tertiary);
}

.form-control:focus {
    outline: none;
    border-width: 2px;
    border-color: var(--color-primary);
    padding: 13px 15px;
}

.form-control:focus-visible {
    outline: none;
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234B5563' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* Checkbox label */
.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

/* Form Grid (4.18) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

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

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    padding-top: var(--spacing-xl);
}

.form-actions .btn {
    width: auto;
    min-width: 140px;
}

/* Inline form control (compact, for table cells) */
.form-control--inline {
    width: 120px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 14px;
    display: inline-block;
}

/* Charge edit inline form */
.charge-edit-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* --- 4.5 Section Header --- */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}

.section-header__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    opacity: 0.5;
}

.section-header__action {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
}

/* --- 4.6 Avatar --- */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--color-primary-container);
    border-radius: calc(44px * 0.32);
    flex-shrink: 0;
}

.avatar .material-symbols-rounded {
    font-size: 22px;
    color: var(--color-primary);
}

.avatar--sm {
    width: 40px;
    height: 40px;
    border-radius: calc(40px * 0.32);
}

.avatar--sm .material-symbols-rounded {
    font-size: 20px;
}

.avatar--lg {
    width: 56px;
    height: 56px;
    border-radius: calc(56px * 0.32);
}

.avatar--lg .material-symbols-rounded {
    font-size: 28px;
}

.avatar__initials {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

/* --- 4.8 AppBar --- */

.appbar {
    background-color: var(--color-background);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
}

.appbar__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
}

.appbar__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* --- 4.9 Modal Dialog (4.17) --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.modal {
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    padding: var(--spacing-2xl);
    max-width: 400px;
    width: 100%;
}

.modal__title {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: var(--spacing-md);
}

.modal__body {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 20px;
    margin-bottom: var(--spacing-xl);
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

.modal__actions .btn {
    width: auto;
}

/* --- 4.10 Skeleton loading --- */

@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-shimmer-base) 0%,
        var(--color-shimmer-highlight) 50%,
        var(--color-shimmer-base) 100%
    );
    background-size: 400px 100%;
    animation: shimmer 1500ms linear infinite;
    border-radius: var(--radius-skeleton);
}

.skeleton--text {
    height: 14px;
    width: 100%;
}

.skeleton--text-lg {
    height: 18px;
    width: 80%;
}

.skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: calc(40px * 0.32);
}

/* --- 4.15 Detail Page Layout --- */

.detail-back {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: var(--spacing-xl);
    text-decoration: none;
}

.detail-back:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.detail-back .material-symbols-rounded {
    font-size: 20px;
}

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.detail-header__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.detail-header__name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.detail-header__actions {
    display: flex;
    gap: var(--spacing-md);
}

/* --- 4.16 Info Grid --- */

.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.info-item__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
}

.info-item__value {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
}

.info-item__value--large {
    font-size: 20px;
    font-weight: 700;
}

/* --- 4.19 Empty State --- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
}

.empty-state__icon {
    font-size: 48px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-xl);
}

.empty-state__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: var(--spacing-md);
}

.empty-state__text {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 20px;
    max-width: 400px;
    margin-bottom: var(--spacing-2xl);
}

.empty-state .btn {
    width: auto;
}

/* --- 4.20 Flash Messages --- */

.flash-messages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.flash {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-button);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.flash--success {
    background-color: var(--color-success-container);
    color: var(--color-success);
}

.flash--error {
    background-color: var(--color-error-container);
    color: var(--color-error);
}

.flash .material-symbols-rounded {
    font-size: 20px;
    flex-shrink: 0;
}

/* --- 4.21 Data Table --- */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    padding: var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-outline-variant);
}

.data-table tbody td {
    font-size: 14px;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-outline-variant);
    color: var(--color-text-primary);
}

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

/* --- 4.22 Page Header --- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.page-header__title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* --- 4.24 Tooltip --- */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background-color: var(--color-text-primary);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 300;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   5. Focus Visible (Accessibility)
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.filter-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   6. Utilities
   ========================================================================== */

.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;
}

.text-center { text-align: center; }
.text-right { text-align: right; }

.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

/* Divider */
.divider {
    border: none;
    border-top: 1px solid var(--color-outline-variant);
    margin: var(--spacing-2xl) 0;
}

/* --- Pagination --- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xl) 0;
}

.pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--spacing-md);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-button);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.pagination__item:hover {
    background-color: var(--color-surface-variant);
    text-decoration: none;
}

.pagination__item--active {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.pagination__item--active:hover {
    background-color: var(--color-primary);
}

.pagination__item--disabled {
    color: var(--color-text-tertiary);
    pointer-events: none;
}

/* ==========================================================================
   7. Content Grids
   ========================================================================== */

/* Biens grid (2 cols mobile, 3 cols desktop per DESIGN.md 5) */
.biens-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

@media (min-width: 768px) {
    .biens-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   8. Address Autocomplete
   ========================================================================== */

.address-autocomplete { position: relative; }
.address-autocomplete__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: 0 0 12px 12px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.1);
}
.address-autocomplete__list--visible { display: block; }
.address-autocomplete__item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--color-outline);
}
.address-autocomplete__item:last-child { border-bottom: none; }
.address-autocomplete__item:hover { background: var(--color-surface-variant); }
.address-autocomplete__main { color: var(--color-text-primary); }