/* =========================================================
   VARIABLES GLOBALES
========================================================= */

:root {

    --background: #f5f6f8;

    --surface: #ffffff;

    --surface-secondary: #f9fafb;

    --surface-muted: #f3f4f6;

    --border: #e5e7eb;

    --border-input: #d1d5db;

    --text: #1f2937;

    --text-secondary: #6b7280;

    --text-muted: #9ca3af;

    --primary: #111827;

    --primary-hover: #374151;

    --success: #15803d;

    --success-dark: #166534;

    --success-background: #dcfce7;

    --success-border: #bbf7d0;

    --danger: #b91c1c;

    --danger-dark: #991b1b;

    --danger-background: #fee2e2;

    --danger-border: #fecaca;

    --radius-small: 8px;

    --radius-medium: 12px;

    --radius-large: 14px;
}



/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

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

    background:
        var(--background);

    color:
        var(--text);
}


a {
    text-decoration: none;
}


h1,
h2,
h3,
p {
    word-break: break-word;
}



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

header {

    min-height: 70px;

    background:
        var(--surface);

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        0
        40px;
}


.header-brand {
    font-size: 17px;
}


.header-user {

    display: flex;

    align-items: center;

    gap: 20px;
}


.header-profile {

    display: inline-flex;

    align-items: center;

    gap: 9px;
}


.header-profile-photo {

    width: 34px;

    height: 34px;

    object-fit: cover;

    border-radius: 50%;

    border:
        2px solid var(--surface-muted);
}


header a {
    color: #555;
}


header a:hover {

    color:
        var(--primary);
}


.dashboard-page header {

    position: sticky;

    top: 0;

    z-index: 40;
}


.dashboard-sidebar {

    position: fixed;

    top: 70px;

    bottom: 0;

    left: 0;

    z-index: 20;

    width: 92px;

    padding:
        18px
        8px;

    background:
        #0f1115;

    border-right:
        1px solid rgba(255, 255, 255, 0.08);

    display: flex;

    align-items: stretch;

    flex-direction: column;

    gap: 8px;
}


.dashboard-sidebar-item {

    min-height: 76px;

    padding:
        8px
        6px;

    border: none;

    border-radius:
        var(--radius-medium);

    background:
        transparent;

    color:
        #f9fafb;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 7px;

    font:
        inherit;

    font-size: 12px;

    font-weight: bold;

    text-align: center;

    cursor: pointer;

    transition:
        background 0.2s,
        transform 0.2s;
}


.dashboard-sidebar-item:hover,
.dashboard-sidebar-item.active {

    background:
        rgba(255, 255, 255, 0.12);
}


.dashboard-sidebar-item:active {

    transform:
        translateY(1px);
}


.dashboard-sidebar-icon {

    width: 42px;

    height: 42px;

    background:
        #ffffff;

    border:
        1px solid rgba(255, 255, 255, 0.75);

    border-radius:
        13px;

    display: grid;

    place-items: center;

    overflow: hidden;
}


.dashboard-sidebar-icon img {

    width: 30px;

    height: 30px;

    object-fit: contain;
}


.dashboard-sidebar-item.active .dashboard-sidebar-icon {

    box-shadow:
        0
        0
        0
        3px
        rgba(255, 255, 255, 0.16);
}


.dashboard-sidebar-item-disabled {

    opacity: 0.45;

    cursor: not-allowed;
}


.dashboard-sidebar-item-disabled:hover {

    background:
        transparent;
}


#upcoming-section,
#management-section,
#finance-section,
#properties-section {
    scroll-margin-top: 95px;
}



/* =========================================================
   CONTENEUR
========================================================= */

.container {

    width: 100%;

    max-width: 1200px;

    margin:
        40px
        auto;

    padding:
        0
        20px;
}



/* =========================================================
   CARTES GÉNÉRALES
========================================================= */

.card,
.section-card,
.property-header,
.finance-box {

    background:
        var(--surface);

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

    border-radius:
        var(--radius-large);
}



/* =========================================================
   AUTHENTIFICATION
========================================================= */

.auth-container {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.auth-card,
.form-card {

    background:
        var(--surface);

    width: 100%;

    max-width: 450px;

    padding: 35px;

    border-radius:
        var(--radius-large);

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

    box-shadow:
        0
        5px
        30px
        rgba(0, 0, 0, 0.06);
}


.auth-card h1,
.form-card h1 {
    margin-top: 0;
}



/* =========================================================
   FORMULAIRES
========================================================= */

form {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


label {

    font-weight: bold;

    margin-top: 5px;
}


input,
select,
textarea {

    width: 100%;

    padding: 14px;

    border:
        1px solid var(--border-input);

    border-radius:
        var(--radius-small);

    background:
        var(--surface);

    color:
        var(--text);

    font-size: 15px;

    font-family: inherit;
}


textarea {
    resize: vertical;
}


input:focus,
select:focus,
textarea:focus {

    outline: none;

    border-color:
        var(--primary);

    box-shadow:
        0
        0
        0
        2px
        rgba(17, 24, 39, 0.05);
}



/* =========================================================
   FORMULAIRE HORIZONTAL
========================================================= */

.inline-form {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 8px;

    margin: 0;
}



/* =========================================================
   CHAMP COMPACT
========================================================= */

.compact-input {

    width: 70px;

    min-width: 70px;

    padding:
        10px
        8px;

    text-align: center;
}



/* =========================================================
   BOUTONS
========================================================= */

button,
.button {

    border: none;

    background:
        var(--primary);

    color: white;

    padding:
        13px
        20px;

    border-radius:
        var(--radius-small);

    font-size: 15px;

    font-family: inherit;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition:
        background 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
}


button:hover,
.button:hover {

    background:
        var(--primary-hover);
}


button:active,
.button:active {

    transform:
        translateY(1px);
}


button.secondary,
.button.secondary {

    background:
        var(--surface-muted);

    color:
        var(--primary);

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


button.secondary:hover,
.button.secondary:hover {

    background:
        var(--border);
}


button.danger,
.button.danger {

    background:
        var(--danger-background);

    color:
        var(--danger);

    border:
        1px solid var(--danger-border);
}


button.danger:hover,
.button.danger:hover {

    background:
        var(--danger-border);

    color:
        var(--danger-dark);
}


.compact-button {

    padding:
        10px
        14px;
}



/* =========================================================
   MESSAGES
========================================================= */

.error {

    background:
        var(--danger-background);

    color:
        var(--danger-dark);

    border:
        1px solid var(--danger-border);

    padding: 12px;

    border-radius:
        var(--radius-small);

    margin-bottom: 15px;
}


.success {

    background:
        var(--success-background);

    color:
        var(--success-dark);

    border:
        1px solid var(--success-border);

    padding: 12px;

    border-radius:
        var(--radius-small);

    margin-bottom: 20px;
}



/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
}


.dashboard-title h1 {

    margin:
        0
        0
        7px;
}


.dashboard-title p {

    margin: 0;

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


.upcoming-section {

    margin-bottom: 30px;

    padding: 25px;
}


.upcoming-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.upcoming-header h2 {

    margin:
        0
        0
        5px;
}


.upcoming-header p {

    margin: 0;

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


.upcoming-empty {

    margin: 0;

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


.upcoming-list {

    display: grid;

    gap: 10px;
}


.upcoming-item {

    display: grid;

    grid-template-columns:
        170px
        minmax(0, 1fr)
        120px;

    align-items: center;

    gap: 16px;

    padding:
        15px
        16px;

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-small);

    color:
        var(--text);

    transition:
        border-color 0.2s,
        background 0.2s;
}


.upcoming-item[hidden] {
    display: none;
}


.upcoming-item:hover {

    background:
        var(--surface);

    border-color:
        var(--border-input);
}


.upcoming-moment {

    font-weight: bold;

    color:
        var(--primary);
}


.upcoming-main {

    min-width: 0;
}


.upcoming-main strong,
.upcoming-main span {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.upcoming-main span {

    margin-top: 4px;

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


.upcoming-status {

    justify-self: end;

    padding:
        6px
        10px;

    background:
        var(--success-background);

    border:
        1px solid var(--success-border);

    border-radius: 999px;

    color:
        var(--success-dark);

    font-size: 13px;

    font-weight: bold;

    white-space: nowrap;
}


.upcoming-more-button {

    margin-top: 16px;
}


.management-section {

    margin-bottom: 30px;

    padding: 28px;
}


.management-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.management-header h2 {

    margin: 0;
}


.management-header p {

    margin: 0;

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


.management-filter {

    display: grid;

    grid-template-columns:
        150px
        150px
        auto;

    align-items: end;

    gap: 10px;

    margin: 0;
}


.management-filter div {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.management-filter label {

    margin: 0;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.management-metrics {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 22px;
}


.management-metrics div {

    padding:
        16px
        18px;

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-small);
}


.management-metrics span {

    display: block;

    margin-bottom: 7px;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.management-metrics strong {
    display: block;

    font-size: 19px;

    white-space: nowrap;
}


.management-layout {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0;
}


.management-layout > div {

    min-width: 0;
}


.management-layout h3 {

    margin:
        0
        0
        12px;
}


.management-empty {

    margin: 0;

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


.management-table {

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

    border-radius:
        var(--radius-small);

    overflow: hidden;
}


.management-row {

    display: grid;

    grid-template-columns:
        minmax(240px, 1.3fr)
        72px
        minmax(130px, 0.85fr)
        minmax(130px, 0.85fr)
        minmax(130px, 0.85fr)
        minmax(150px, 0.95fr);

    align-items: center;

    gap: 12px;

    padding:
        14px
        16px;

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


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


.management-head {

    background:
        var(--surface-secondary);

    color:
        var(--text-secondary);

    font-size: 13px;

    font-weight: bold;
}


.management-row span {

    display: block;

    margin-top: 4px;

    overflow: hidden;

    color:
        var(--text-secondary);

    font-size: 13px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.management-owner-link {

    color:
        var(--text);

    font-weight: bold;
}


.management-owner-link:hover {

    color:
        var(--primary-hover);

    text-decoration: underline;
}


.management-owner-cell {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}


.management-owner-avatar {

    width: 32px;

    height: 32px;

    flex:
        0
        0
        32px;

    padding: 6px;

    background:
        var(--surface);

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

    border-radius: 999px;

    object-fit: contain;
}


.management-owner-info {

    min-width: 0;
}


/* =========================================================
   FICHE PROPRIÉTAIRE
========================================================= */

.owner-container {

    max-width: 1280px;
}


.owner-header-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 24px;

    padding: 28px;
}


.owner-kicker {

    display: inline-flex;

    margin-bottom: 12px;

    padding:
        7px
        11px;

    background:
        var(--surface-muted);

    border-radius: 999px;

    color:
        var(--text-secondary);

    font-size: 13px;

    font-weight: bold;
}


.owner-identity {

    display: flex;

    align-items: center;

    gap: 20px;

    min-width: 0;
}


.owner-avatar {

    width: 82px;

    height: 82px;

    flex: 0 0 82px;

    padding: 14px;

    background:
        var(--surface-secondary);

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

    border-radius: 999px;

    object-fit: contain;
}


.owner-header-card h1,
.owner-period-card h2,
.owner-section-title h2 {

    margin:
        0
        0
        6px;
}


.owner-header-card h1 {

    margin-bottom: 0;

    font-size: 34px;
}


.owner-title-row {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;
}


.owner-edit-button {

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        var(--surface-muted);

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

    border-radius:
        var(--radius-small);
}


.owner-edit-button:hover {

    background:
        var(--border);
}


.owner-edit-button img {

    width: 22px;

    height: 22px;

    object-fit: contain;
}


.owner-contact-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(180px, max-content));

    gap:
        10px
        12px;

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


.owner-contact-list span {

    min-width: 180px;

    padding:
        10px
        12px;

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-small);
}


.owner-contact-list strong {

    display: block;

    margin-top: 4px;

    color:
        var(--text);
}


.owner-header-stat {

    min-width: 150px;

    padding:
        16px
        18px;

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-small);
}


.owner-header-stat span,
.owner-period-card p,
.owner-section-title p,
.owner-metrics span {

    display: block;

    margin: 0;

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


.owner-header-stat strong {

    display: block;

    margin-top: 8px;

    font-size: 28px;
}


.owner-period-form {

    display: grid;

    grid-template-columns:
        190px
        auto
        auto;

    align-items: end;

    justify-content: start;

    gap: 12px;

    margin: 0;

    width: auto;

    max-width: 100%;

    flex:
        0
        1
        auto;
}


.owner-period-card {

    display: flex;

    align-items: end;

    justify-content: flex-start;

    flex-wrap: wrap;

    gap:
        28px;

    margin-bottom: 24px;

    padding:
        20px
        26px;
}


.owner-period-form label {

    display: grid;

    gap: 7px;

    color:
        var(--text-secondary);

    font-size: 13px;

    font-weight: bold;
}


.owner-period-form label span {

    display: block;
}


.owner-period-form input {

    min-width: 0;
}


.owner-period-form button,
.owner-statement-button {

    height: 48px;

    white-space: nowrap;
}


.owner-period-title {

    min-width: 0;

    flex:
        0
        0
        210px;
}


.owner-edit-card {

    margin-bottom: 24px;

    padding: 28px;
}


.owner-edit-form {

    display: grid;

    grid-template-columns:
        minmax(220px, 1fr)
        minmax(180px, 0.8fr)
        minmax(220px, 1fr);

    gap: 14px;
}


.owner-edit-form label {

    display: grid;

    gap: 8px;

    margin: 0;
}


.owner-edit-actions {

    grid-column:
        1 / -1;

    display: flex;

    justify-content: flex-end;

    gap: 10px;
}


.owner-metrics {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 24px;
}


.owner-metrics .finance-box {

    padding:
        17px
        18px;
}


.owner-metrics strong {

    display: block;

    margin-top: 7px;

    font-size: 20px;

    white-space: nowrap;
}


.owner-properties-section,
.owner-detail-section {

    margin-bottom: 24px;

    padding: 28px;
}


.owner-section-title {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.owner-section-title > span {

    color:
        var(--text-secondary);

    font-size: 14px;

    font-weight: bold;
}


.owner-property-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 14px;
}


.owner-property-card {

    min-height: 170px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    gap: 8px;

    padding: 20px;

    background:
        var(--surface-secondary);

    background-position: center;

    background-size: cover;

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

    border-radius:
        var(--radius-medium);

    color:
        var(--text);
}


.owner-property-card:hover {

    border-color:
        var(--border-input);

    transform:
        translateY(-1px);
}


.owner-property-card span {

    align-self: flex-start;

    padding:
        6px
        10px;

    background:
        rgba(255, 255, 255, 0.84);

    border-radius: 999px;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.owner-property-card strong {

    font-size: 24px;
}


.owner-property-card small {

    color:
        var(--text-secondary);

    font-size: 15px;
}


.owner-property-card.has-photo,
.owner-property-card.has-photo small {

    color: #ffffff;
}


.owner-property-card.has-photo span {

    color:
        var(--text);
}


.owner-table-wrap {

    overflow-x: auto;

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

    border-radius:
        var(--radius-small);
}


.owner-detail-table {

    width: 100%;

    min-width: 1120px;

    border-collapse: collapse;

    font-size: 14px;
}


.owner-detail-table th,
.owner-detail-table td {

    padding:
        13px
        14px;

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

    text-align: left;

    white-space: nowrap;
}


.owner-detail-table th {

    background:
        var(--surface-secondary);

    color:
        var(--text-secondary);

    font-size: 13px;
}


.owner-detail-table tbody tr:last-child td {

    border-bottom: none;
}


.owner-detail-table tfoot th {

    color:
        var(--text);
}


.owner-detail-table a {

    color:
        var(--text);

    font-weight: bold;
}


.owner-detail-table a:hover {

    text-decoration: underline;
}


/* =========================================================
   BILAN PROPRIÉTAIRE
========================================================= */

.statement-page {

    background:
        var(--background);
}


.statement-toolbar {

    max-width: 1180px;

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin:
        18px
        auto;

    padding:
        0
        20px;
}


.statement-document {

    max-width: 1180px;

    margin:
        0
        auto
        40px;

    padding: 36px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-large);
}


.statement-header {

    min-height: auto;

    padding:
        0
        0
        24px;

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


.statement-header h1 {

    margin:
        14px
        0
        8px;

    font-size: 34px;
}


.statement-header p,
.statement-owner span {

    margin: 0;

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


.statement-owner {

    min-width: 260px;

    text-align: right;
}


.statement-owner strong {

    display: block;

    margin:
        8px
        0;

    font-size: 20px;
}


.statement-summary {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin:
        24px
        0;
}


.statement-summary div {

    padding: 16px;

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-small);
}


.statement-summary span {

    display: block;

    margin-bottom: 8px;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.statement-summary strong {

    font-size: 18px;
}


.statement-section {

    margin-top: 28px;
}


.statement-section h2 {

    margin:
        0
        0
        12px;

    font-size: 20px;
}


.statement-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 12px;
}


.statement-table th,
.statement-table td {

    padding:
        9px
        8px;

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

    text-align: left;

    vertical-align: top;
}


.statement-table th {

    background:
        var(--surface-secondary);

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


.statement-table tfoot th {

    color:
        var(--text);
}


.statement-transactions-table td:nth-child(3) {

    min-width: 220px;
}


.dashboard-finance-section {

    margin-bottom: 30px;

    padding: 25px;
}


.dashboard-finance-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: end;

    gap: 20px;

    margin-bottom: 20px;
}


.dashboard-finance-header h2 {

    margin:
        0
        0
        5px;
}


.dashboard-finance-header p {

    margin: 0;

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


.dashboard-finance-filter {

    display: grid;

    grid-template-columns:
        150px
        150px
        220px
        auto;

    align-items: end;

    gap: 10px;
}


.dashboard-finance-filter div {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.dashboard-finance-filter label {

    margin: 0;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.dashboard-finance-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, 0.9fr);

    gap: 22px;
}


.dashboard-finance-empty {

    margin: 0;

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


.dashboard-finance-table {

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

    border-radius:
        var(--radius-small);

    overflow: hidden;
}


.dashboard-finance-row {

    display: grid;

    grid-template-columns:
        minmax(150px, 1fr)
        125px
        125px
        125px;

    align-items: center;

    gap: 12px;

    padding:
        14px
        16px;

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

    color:
        var(--text);
}


.dashboard-finance-row[hidden] {
    display: none;
}


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


.dashboard-finance-head {

    background:
        var(--surface-secondary);

    color:
        var(--text-secondary);

    font-size: 13px;

    font-weight: bold;
}


.dashboard-finance-property-row:hover {
    background:
        var(--surface-secondary);
}


.dashboard-finance-property-row div:first-child {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-weight: bold;
}


.dashboard-finance-more-button {

    margin-top: 16px;
}


.dashboard-finance-overview {

    display: flex;

    flex-direction: column;

    gap: 20px;
}


.dashboard-finance-totals {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}


.dashboard-finance-totals div {

    padding:
        14px
        15px;

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-small);
}


.dashboard-finance-totals span {

    display: block;

    margin-bottom: 7px;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.dashboard-finance-totals strong {
    white-space: nowrap;
}


.dashboard-finance-pie-wrap {

    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr);

    align-items: center;

    gap: 22px;
}


.dashboard-finance-pie {

    position: relative;

    width: 190px;

    aspect-ratio: 1;

    border-radius: 50%;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(0, 0, 0, 0.04);
}


.dashboard-finance-pie::after {

    content: "";

    position: absolute;

    inset: 38px;

    background:
        var(--surface);

    border-radius: 50%;
}


.dashboard-finance-pie div {

    position: absolute;

    inset: 52px;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;
}


.dashboard-finance-pie span {

    color:
        var(--text-secondary);

    font-size: 13px;
}


.dashboard-finance-pie strong {

    margin-top: 5px;

    font-size: 15px;
}


.dashboard-finance-legend {

    display: grid;

    gap: 9px;
}


.dashboard-finance-legend div {

    display: grid;

    grid-template-columns:
        12px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    color:
        var(--text-secondary);

    font-size: 14px;
}


.dashboard-finance-legend strong {

    color:
        var(--text);

    font-size: 13px;

    white-space: nowrap;
}


.dashboard-finance-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;
}


.search-form {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        220px
        auto;

    gap: 10px;

    margin-bottom: 30px;
}



/* =========================================================
   PROPRIÉTÉS
========================================================= */

.property-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(260px, 1fr)
        );

    gap: 20px;
}


.property-card {

    background:
        var(--surface);

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

    border-radius:
        var(--radius-large);

    padding: 25px;

    min-height: 260px;

    display: flex;

    align-items: flex-start;

    flex-direction: column;

    transition:
        transform 0.2s,
        box-shadow 0.2s;
}


.property-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0
        10px
        25px
        rgba(0, 0, 0, 0.06);
}


.property-type {

    display: inline-block;

    background:
        var(--surface-muted);

    padding:
        6px
        10px;

    border-radius: 20px;

    font-size: 13px;

    color: #4b5563;
}


.property-card h2 {

    margin:
        17px
        0
        8px;
}


.property-card p {

    color:
        var(--text-secondary);

    min-height: 40px;

    margin-bottom: 20px;
}


.property-open-button {
    margin-top: auto;
}


.property-card-photo {

    background-position: center;

    background-size: cover;

    color:
        #ffffff;

    border-color:
        rgba(255, 255, 255, 0.18);

    box-shadow:
        inset 0 -90px 90px rgba(0, 0, 0, 0.18);
}


.property-card-photo .property-type {

    background:
        rgba(255, 255, 255, 0.88);

    color:
        var(--primary);
}


.property-card-photo h2,
.property-card-photo p {

    text-shadow:
        0
        2px
        8px
        rgba(0, 0, 0, 0.45);
}


.property-card-photo p {

    color:
        rgba(255, 255, 255, 0.9);
}


.property-card-photo .property-open-button {

    background:
        #ffffff;

    color:
        var(--primary);
}


.property-card-photo .property-open-button:hover {

    background:
        var(--surface-muted);
}



/* =========================================================
   ÉTAT VIDE
========================================================= */

.empty-state {

    background:
        var(--surface);

    text-align: center;

    padding:
        80px
        20px;

    border-radius:
        var(--radius-large);

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


.empty-state h2 {
    margin-top: 0;
}


.empty-state p {

    color:
        var(--text-secondary);

    margin-bottom: 30px;
}



/* =========================================================
   EN-TÊTE PROPRIÉTÉ
========================================================= */

.property-header {

    padding:
        25px
        30px;

    margin-bottom: 20px;
}


.property-header h1 {

    margin:
        12px
        0
        5px;
}


.property-header p {

    margin: 0;

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



/* =========================================================
   ONGLETS
========================================================= */

.property-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-medium);

    padding: 8px;

    margin-bottom: 30px;

    overflow-x: auto;
}


.property-tabs a {

    color:
        var(--text-secondary);

    padding:
        11px
        17px;

    border-radius:
        var(--radius-small);

    white-space: nowrap;
}


.property-tabs a:hover {

    background:
        var(--surface-muted);

    color:
        var(--primary);
}


.property-tabs a.active {

    background:
        var(--primary);

    color: white;
}



/* =========================================================
   STATISTIQUES
========================================================= */

.stats-grid,
.summary-grid,
.finance-summary {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin-bottom: 25px;
}


.stat-card,
.summary-card {

    display: block;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-large);

    padding: 25px;

    color:
        var(--primary);
}


.summary-card span {

    display: block;

    color:
        var(--text-secondary);

    margin-bottom: 12px;
}


.summary-card strong {

    display: block;

    font-size: 27px;

    margin-bottom: 6px;
}


.summary-card p {

    margin: 0;

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



/* =========================================================
   SECTIONS
========================================================= */

.section-card {
    padding: 25px;
}


.section-card h2 {
    margin-top: 0;
}


/* =========================================================
   PARAMÈTRES
========================================================= */

.settings-container {
    max-width: 1100px;
}


.settings-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.settings-title h1 {

    margin:
        0
        0
        7px;
}


.settings-title p {

    margin: 0;

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


.settings-layout {

    display: grid;

    grid-template-columns:
        320px
        minmax(0, 1fr);

    gap: 22px;
}


.settings-profile-card {
    text-align: center;
}


.settings-profile-photo {

    width: 160px;

    height: 160px;

    object-fit: cover;

    border-radius: 50%;

    border:
        4px solid var(--surface-muted);

    box-shadow:
        0
        10px
        25px
        rgba(0, 0, 0, 0.08);
}


.settings-profile-card h2 {

    margin:
        18px
        0
        6px;
}


.settings-profile-card p {

    margin:
        0
        0
        22px;

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


.settings-profile-card form {
    text-align: left;
}


.settings-profile-card input[type="file"] {

    background:
        var(--surface-secondary);
}


.settings-forms {

    display: grid;

    gap: 22px;
}


.settings-card h2 {

    margin:
        0
        0
        18px;
}


.settings-readonly-field {

    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    align-items: center;

    gap: 12px;

    padding:
        14px
        16px;

    margin-bottom: 22px;

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-small);
}


.settings-readonly-field span {

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


.settings-readonly-field strong {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.property-settings-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 920px);

    gap: 22px;

    align-items: start;

    justify-content: center;
}


.property-settings-card h2 {

    margin:
        0
        0
        18px;
}


.property-settings-card form {

    display: grid;

    gap: 12px;
}


.property-photo-preview {

    display: grid;

    place-items: center;

    width: 100%;

    height: 220px;

    margin-bottom: 18px;

    overflow: hidden;

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-medium);

    color:
        var(--text-secondary);

    font-weight: bold;
}


.property-photo-preview img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.property-danger-card {

    background:
        linear-gradient(
            180deg,
            #ffffff,
            var(--danger-background)
        );

    border-color:
        var(--danger-border);
}


.property-danger-card p {

    margin:
        0
        0
        18px;

    color:
        var(--danger-dark);
}


.property-delete-confirm {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin:
        0
        0
        8px;

    color:
        var(--text-secondary);

    font-weight: normal;
}


.property-delete-confirm input {

    width: auto;

    margin-top: 4px;
}


.section-header,
.toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}


.section-header h2 {

    margin:
        0
        0
        5px;
}


.section-header p {

    margin: 0;

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


.quick-actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}



/* =========================================================
   TABLEAUX
========================================================= */

.data-table,
.stock-table,
.transaction-table {

    background:
        var(--surface);

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

    border-radius:
        var(--radius-large);

    overflow: hidden;
}



/* =========================================================
   STOCK
========================================================= */

.stock-row {

    display: grid;

    align-items: center;

    gap: 20px;

    padding:
        18px
        22px;

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


.stock-row-actions {

    grid-template-columns:
        minmax(180px, 1fr)
        120px
        minmax(330px, auto);
}


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


.stock-head,
.transaction-head {

    background:
        var(--surface-secondary);

    color:
        var(--text-secondary);

    font-size: 13px;

    font-weight: bold;
}


.stock-quantity {

    display: flex;

    align-items: center;
}


.stock-quantity strong {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    padding:
        7px
        12px;

    background:
        var(--surface-muted);

    border-radius:
        var(--radius-small);
}


.stock-actions {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 10px;
}



/* =========================================================
   AJOUT STOCK
========================================================= */

.property-form {

    margin:
        30px
        auto;
}


.price-input {

    display: flex;

    align-items: center;

    gap: 10px;
}


.price-input input {
    flex: 1;
}


.price-input span {

    font-weight: bold;

    min-width: 30px;
}


.form-help {

    color:
        var(--text-secondary);

    font-size: 13px;
}


.purchase-details {

    flex-direction: column;

    gap: 12px;
}


.optional {

    color:
        var(--text-muted);

    font-size: 12px;

    font-weight: normal;
}


.finance-info {

    background:
        var(--surface-muted);

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

    padding: 12px;

    border-radius:
        var(--radius-small);

    color: #4b5563;

    font-size: 13px;
}


.back-link {

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


.back-link:hover {

    color:
        var(--primary);
}



/* =========================================================
   FINANCES
========================================================= */

.finance-summary {
    gap: 15px;
}


.finance-box {
    padding: 20px;
}


.finance-box span {

    display: block;

    color:
        var(--text-secondary);

    font-size: 14px;

    margin-bottom: 10px;
}


.finance-box strong {
    font-size: 21px;
}


.finance-chart-card {

    background:
        var(--surface);

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

    border-radius:
        var(--radius-large);

    padding: 20px;

    margin-bottom: 20px;
}


.finance-chart-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 15px;
}


.finance-chart-header h3 {

    margin:
        0
        0
        5px;
}


.finance-chart-header p {

    margin: 0;

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


.finance-chart-controls {

    display: grid;

    grid-template-columns:
        145px
        auto;

    align-items: end;

    gap: 10px;

    margin: 0;
}


.finance-chart-controls > div {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.finance-chart-controls label {

    margin: 0;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.finance-chart-legend {

    display: none;

    align-items: center;

    gap: 18px;

    color:
        var(--text-secondary);

    font-size: 13px;

    margin-bottom: 15px;
}


.finance-chart-legend span {

    display: inline-flex;

    align-items: center;

    gap: 7px;
}


.finance-chart-legend i {

    display: inline-block;

    width: 12px;

    height: 12px;

    border-radius: 3px;
}


.legend-revenue {
    background: var(--success);
}


.legend-expense {
    background: var(--danger);
}


.finance-chart-totals {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 18px;
}


.finance-chart-totals > div {

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-small);

    padding: 12px;
}


.finance-chart-totals span {

    display: block;

    color:
        var(--text-secondary);

    font-size: 13px;

    margin-bottom: 6px;
}


.finance-chart-totals strong {
    font-size: 16px;
}


.finance-chart-scroll {
    overflow-x: auto;
}


.finance-category-chart {

    min-width: 720px;

    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr);

    gap: 12px;
}


.finance-y-axis {

    height: 280px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-end;

    padding:
        6px
        0
        0;

    color:
        var(--text-secondary);

    font-size: 12px;
}


.finance-category-area {
    min-width: 0;
}


.finance-category-bars {

    height: 280px;

    display: grid;

    grid-template-columns:
        repeat(
            var(--chart-count),
            minmax(76px, 1fr)
        );

    gap: 18px;

    align-items: end;

    padding:
        6px
        12px
        0;

    border-bottom:
        2px solid var(--border-input);

    background:
        repeating-linear-gradient(
            to top,
            transparent,
            transparent 68px,
            var(--surface-muted) 69px
        );
}


.finance-category-bar-slot {

    height: 100%;

    display: flex;

    align-items: flex-end;

    justify-content: center;
}


.finance-category-bar {

    display: block;

    width: min(42px, 70%);

    min-height: 3px;

    border-radius:
        7px
        7px
        0
        0;
}


.finance-category-labels {

    display: grid;

    grid-template-columns:
        repeat(
            var(--chart-count),
            minmax(76px, 1fr)
        );

    gap: 18px;

    padding:
        10px
        12px
        0;
}


.finance-category-label {

    min-width: 0;

    text-align: center;
}


.finance-category-label strong,
.finance-category-label span {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.finance-category-label strong {

    color:
        var(--text);

    font-size: 13px;
}


.finance-category-label span {

    color:
        var(--text-secondary);

    font-size: 12px;

    margin-top: 4px;
}


.finance-color-revenue {
    background: var(--success);
}


.finance-color-menage {
    background: #2563eb;
}


.finance-color-maintenance {
    background: #b45309;
}


.finance-color-stock {
    background: #7c3aed;
}


.finance-color-utilities {
    background: #0891b2;
}


.finance-color-wifi {
    background: #0f766e;
}


.finance-color-commission {
    background: #db2777;
}


.finance-color-other {
    background: #64748b;
}


.finance-bar-chart {

    min-width:
        max(
            680px,
            calc(var(--chart-count) * 42px)
        );

    display: grid;

    grid-template-columns:
        repeat(
            var(--chart-count),
            minmax(28px, 1fr)
        );

    gap: 8px;

    padding-top: 12px;
}


.finance-bar-group {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 8px;
}


.finance-bars {

    height: 220px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 4px;

    padding:
        0
        3px;

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

    background:
        repeating-linear-gradient(
            to top,
            transparent,
            transparent 53px,
            var(--surface-muted) 54px
        );
}


.finance-bar {

    display: block;

    width: 100%;

    max-width: 18px;

    border-radius:
        6px
        6px
        0
        0;
}


.finance-bar-revenue {
    background: var(--success);
}


.finance-bar-expense {
    background: var(--danger);
}


.finance-chart-label {

    color:
        var(--text-secondary);

    font-size: 12px;

    text-align: center;

    white-space: nowrap;
}


.finance-line-wrap {

    min-width: 720px;
}


.finance-line-chart {

    display: block;

    width: 100%;

    height: auto;

    background:
        var(--surface-secondary);

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

    border-radius:
        var(--radius-small);
}


.finance-chart-grid-line {

    stroke:
        var(--border);

    stroke-width: 1;
}


.finance-line-revenue,
.finance-line-expense {

    fill: none;

    stroke-width: 4;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.finance-line-revenue {
    stroke: var(--success);
}


.finance-line-expense {
    stroke: var(--danger);
}


.finance-dot-revenue {
    fill: var(--success);
}


.finance-dot-expense {
    fill: var(--danger);
}


.finance-line-labels {

    display: grid;

    grid-template-columns:
        repeat(
            var(--chart-count),
            minmax(30px, 1fr)
        );

    gap: 6px;

    margin-top: 8px;
}


.finance-line-labels span {

    color:
        var(--text-secondary);

    font-size: 12px;

    text-align: center;

    white-space: nowrap;
}


.finance-filters {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr))
        auto
        auto;

    align-items: end;

    gap: 10px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-large);

    padding: 18px;

    margin-bottom: 20px;
}


.finance-filters > div {

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.finance-filters label {

    margin: 0;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.transaction-row {

    display: grid;

    grid-template-columns:
        120px
        minmax(240px, 1fr)
        160px
        110px
        150px;

    gap: 15px;

    align-items: center;

    padding:
        17px
        20px;

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


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


.amount-positive {

    font-weight: bold;

    color:
        var(--success);
}


.amount-negative {

    font-weight: bold;

    color:
        var(--danger);
}



/* =========================================================
   CALENDRIER
========================================================= */

.calendar-container {

    background:
        var(--surface);

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

    border-radius:
        var(--radius-large);

    padding: 20px;
}


.calendar-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}


.calendar-toolbar h2 {

    margin: 0;

    text-align: center;
}


.calendar-weekdays {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    background:
        var(--surface-secondary);

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

    border-bottom: none;
}


.calendar-weekdays div {

    padding: 10px;

    text-align: center;

    font-size: 13px;

    font-weight: bold;

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


.calendar-grid {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 1px;

    background:
        var(--border);

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


.calendar-day {

    min-height: 135px;

    background:
        var(--surface);

    padding: 10px;

    overflow: hidden;
}


.calendar-date {

    font-weight: bold;

    margin-bottom: 8px;
}


.calendar-outside {

    background:
        var(--surface-secondary);

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


.calendar-today {

    box-shadow:
        inset
        0
        0
        0
        2px
        var(--primary);
}


.calendar-events {

    display: flex;

    flex-direction: column;

    gap: 5px;
}


.calendar-event {

    padding:
        7px
        8px;

    border-radius:
        var(--radius-small);

    background:
        var(--surface-muted);

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

    font-size: 12px;

    overflow: hidden;
}


.calendar-event strong,
.calendar-event span {

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.calendar-event strong {
    margin-bottom: 3px;
}


.calendar-event span {

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


.calendar-amount {

    margin-top: 3px;

    font-weight: bold;
}


.event-reservation {

    border-left:
        4px solid
        var(--primary);
}


.event-menage {

    border-left:
        4px solid
        var(--text-secondary);
}


.event-entretien {

    border-left:
        4px solid
        var(--danger);
}


.event-cancelled {

    opacity: 0.5;
}


.calendar-status {

    margin-top: 4px;

    color:
        var(--text-secondary);

    font-size: 11px;
}



/* =========================================================
   GÉRER UNE RÉSERVATION
========================================================= */

.calendar-manage-link {

    display: block;

    margin-top: 7px;

    padding-top: 6px;

    border-top:
        1px solid var(--border);

    color:
        var(--primary);

    font-weight: bold;

    font-size: 11px;
}


.calendar-manage-link:hover {

    text-decoration: underline;
}


.reservation-details {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;

    margin:
        25px
        0;
}


.reservation-details > div {

    background:
        var(--surface-muted);

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

    border-radius:
        var(--radius-small);

    padding: 15px;
}


.reservation-details span {

    display: block;

    margin-bottom: 7px;

    color:
        var(--text-secondary);

    font-size: 13px;
}


.reservation-details strong {

    display: block;
}


.reservation-actions {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 20px;
}


.reservation-actions form {

    width: 100%;

    margin: 0;
}


.reservation-actions button {

    width: 100%;
}



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

@media (max-width: 1300px) {


    .dashboard-page .container {
        margin-bottom: 105px;
    }


    .dashboard-sidebar {

        top: auto;

        right: 0;

        bottom: 0;

        width: auto;

        height: 82px;

        padding:
            7px
            10px;

        border-right: none;

        border-top:
            1px solid rgba(255, 255, 255, 0.08);

        align-items: center;

        justify-content: center;

        flex-direction: row;

        gap: 6px;
    }


    .dashboard-sidebar-item {

        width: 78px;

        min-height: 64px;

        padding:
            6px
            4px;

        font-size: 11px;
    }


    .dashboard-sidebar-icon {

        width: 32px;

        height: 32px;

        border-radius:
            10px;
    }


    .dashboard-sidebar-icon img {

        width: 23px;

        height: 23px;
    }

}


@media (max-width: 900px) {


    header {

        padding:
            0
            20px;
    }


    .summary-grid,
    .finance-summary {

        grid-template-columns: 1fr;
    }


    .finance-chart-header {

        flex-direction: column;
    }


    .finance-chart-controls {

        width: 100%;

        grid-template-columns:
            1fr
            auto;
    }


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


    .management-header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .dashboard-finance-header {

        grid-template-columns: 1fr;

        align-items:
            flex-start;
    }


    .finance-filters {

        grid-template-columns:
            1fr
            1fr;
    }


    .transaction-row {

        grid-template-columns: 1fr;

        gap: 5px;
    }


    .transaction-head {
        display: none;
    }

}


@media (max-width: 850px) {


    .stock-row-actions {

        grid-template-columns:
            1fr
            auto;
    }


    .stock-row-actions.stock-head div:nth-child(3) {

        display: none;
    }


    .stock-actions {

        grid-column:
            1 / -1;

        justify-content:
            flex-start;
    }

}


@media (max-width: 700px) {


    header {

        min-height: 65px;

        padding:
            10px
            15px;
    }


    .container {

        margin:
            25px
            auto;

        padding:
            0
            15px;
    }


    .dashboard-page .container {
        margin-bottom: 105px;
    }


    .dashboard-sidebar {

        top: auto;

        right: 0;

        bottom: 0;

        width: auto;

        height: 82px;

        padding:
            7px
            10px;

        border-right: none;

        border-top:
            1px solid rgba(255, 255, 255, 0.08);

        align-items: center;

        justify-content: center;

        flex-direction: row;

        gap: 6px;
    }


    .dashboard-sidebar-item {

        width: 78px;

        min-height: 64px;

        padding:
            6px
            4px;

        font-size: 11px;
    }


    .dashboard-sidebar-icon {

        width: 32px;

        height: 32px;

        border-radius:
            10px;
    }


    .dashboard-sidebar-icon img {

        width: 23px;

        height: 23px;
    }


    .dashboard-title,
    .settings-title,
    .owner-header-card,
    .owner-period-card,
    .upcoming-header,
    .management-header,
    .owner-section-title,
    .section-header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .search-form,
    .finance-filters {

        grid-template-columns: 1fr;
    }


    .upcoming-item {

        grid-template-columns: 1fr;

        align-items:
            flex-start;
    }


    .upcoming-status {
        justify-self: start;
    }


    .dashboard-finance-header,
    .management-layout,
    .dashboard-finance-layout,
    .dashboard-finance-pie-wrap {

        grid-template-columns: 1fr;
    }


    .management-metrics {

        grid-template-columns:
            1fr
            1fr;
    }


    .owner-metrics,
    .statement-summary {

        grid-template-columns:
            1fr
            1fr;
    }


    .owner-period-form {

        width: 100%;

        grid-template-columns: 1fr;

        justify-content: stretch;
    }


    .owner-period-title {

        width: 100%;

        flex:
            0
            0
            auto;
    }


    .owner-period-form label,
    .owner-period-form input {

        width: 100%;
    }


    .owner-period-form button,
    .owner-statement-button {

        width: 100%;
    }


    .owner-identity {

        align-items: flex-start;
    }


    .owner-contact-list,
    .owner-edit-form {

        grid-template-columns: 1fr;
    }


    .owner-edit-actions {

        justify-content: flex-start;
    }


    .settings-layout,
    .property-settings-layout {
        grid-template-columns: 1fr;
    }


    .management-filter,
    .dashboard-finance-filter {

        width: 100%;
    }


    .management-filter {

        grid-template-columns:
            1fr
            1fr
            auto;
    }


    .dashboard-finance-filter {

        grid-template-columns:
            1fr
            1fr;
    }


    .dashboard-finance-row {

        grid-template-columns: 1fr;

        gap: 6px;
    }


    .management-row {

        grid-template-columns: 1fr;

        gap: 6px;
    }


    .dashboard-finance-property-row div {

        display: grid;

        grid-template-columns:
            90px
            minmax(0, 1fr);

        gap: 10px;
    }


    .dashboard-finance-property-row div::before {

        content:
            attr(data-label);

        color:
            var(--text-secondary);

        font-weight: normal;
    }


    .management-row > div {

        display: grid;

        grid-template-columns:
            90px
            minmax(0, 1fr);

        gap: 10px;
    }


    .management-row > div::before {

        content:
            attr(data-label);

        color:
            var(--text-secondary);

        font-weight: normal;
    }


    .management-row > div:first-child {
        display: flex;
    }


    .management-row > div:first-child::before {
        content: none;
    }


    .dashboard-finance-head,
    .management-head {
        display: none;
    }


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


    .dashboard-finance-pie {
        justify-self: center;
    }


    .finance-chart-card {
        padding: 15px;
    }


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


    .finance-chart-controls button {
        width: 100%;
    }


    .calendar-container {

        overflow-x: auto;
    }


    .calendar-grid,
    .calendar-weekdays {

        min-width: 760px;
    }


    .calendar-day {

        min-height: 115px;
    }

}


@media (max-width: 500px) {


    .owner-identity {

        flex-direction: column;
    }


    .owner-metrics,
    .statement-summary {

        grid-template-columns: 1fr;
    }


    .stock-actions {

        align-items: stretch;

        flex-direction: column;
    }


    .stock-actions .inline-form {

        width: 100%;
    }


    .stock-actions .compact-input {

        flex: 1;

        width: auto;

        min-width: 0;
    }


    .stock-actions .compact-button {

        flex: 1;
    }


    .reservation-details {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {


    header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .header-user {

        width: 100%;

        justify-content:
            space-between;
    }


    .auth-card,
    .form-card {

        padding: 25px;
    }


    .quick-actions {

        flex-direction:
            column;
    }


    .quick-actions .button {

        width: 100%;
    }


    .management-filter,
    .dashboard-finance-filter {
        grid-template-columns: 1fr;
    }


    .management-filter button,
    .dashboard-finance-filter button {
        width: 100%;
    }


    .management-metrics {
        grid-template-columns: 1fr;
    }


    .settings-readonly-field {
        grid-template-columns: 1fr;
    }


    .dashboard-sidebar {

        height: 78px;

        padding:
            6px;
    }


    .dashboard-sidebar-item {

        width: 70px;

        font-size: 10px;
    }

}


@media print {

    @page {
        size: A4 landscape;
        margin: 12mm;
    }


    body.statement-page {

        background:
            #ffffff;
    }


    .no-print {

        display: none !important;
    }


    .statement-document {

        max-width: none;

        margin: 0;

        padding: 0;

        border: none;

        border-radius: 0;
    }


    .statement-header {

        break-inside: avoid;
    }


    .statement-summary {

        break-inside: avoid;
    }


    .statement-section {

        break-inside: auto;
    }


    .statement-table {

        font-size: 10px;
    }


    .statement-table th,
    .statement-table td {

        padding:
            6px
            5px;
    }
}