@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --gold: #D4BC7A;
    --gold-dark: #B8A060;
    --gold-light: #EDE4CC;
    --gold-bg: #FAF7F0;
    --gold-hover: rgba(212, 188, 122, 0.08);
    --bg-body: #F4F2EE;
    --bg-white: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    --bg-input: #F8F7F5;
    --border: #E8E4DE;
    --border-light: #F0EDE8;
    --text-primary: #4A4A4A;
    --text-secondary: #555555;
    --text-muted: #999999;

    /* CORES SEMÂNTICAS — intensidade uniforme */
    --danger:      #C97070;
    --danger-bg:   #FBF0F0;
    --warning:     #C48A10;
    --warning-bg:  #FEF9EC;
    --success:     #6A9E6A;
    --success-bg:  #EFF7EF;
    --info:        #5A8DC4;
    --info-bg:     #EFF5FB;

    --sidebar-width: 260px;
    --topbar-height: 64px;
    --radius: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --radius-full: 100px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --shadow: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
    --transition: all 0.2s ease;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html { font-size: 15px; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

/* ===================== LAYOUT ===================== */
.app-wrapper { display: flex; min-height: 100vh; }

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: var(--transition);
}

/* ===================== SIDEBAR ===================== */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto;
    transition: var(--transition);
}

.sidebar-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border-light);
}

.brand-logo-row { display: flex; align-items: center; gap: 10px; }
.brand-logo { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px; }
.brand-re { color: var(--gold); }
.brand-value { color: var(--text-primary); }
.brand-sub {
    font-size: 0.65rem; color: var(--text-muted);
    margin-top: 4px; letter-spacing: 0.5px; text-transform: uppercase;
}

.sidebar-user {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border-light);
}

.user-avatar {
    width: 38px; height: 38px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9rem; color: #fff; flex-shrink: 0;
}

.user-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }

.role-badge {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.5px;
    padding: 2px 8px; border-radius: var(--radius-full);
    display: inline-block; margin-top: 2px;
}
.role-tenant    { background: var(--info-bg);    color: var(--info); }
.role-owner     { background: var(--gold-bg);    color: var(--gold-dark); }
.role-home      { background: var(--success-bg); color: var(--success); }
.role-essential { background: var(--success-bg); color: var(--success); }
.role-trial     { background: var(--success-bg); color: var(--success); }
.role-plus      { background: var(--gold-bg);    color: var(--gold-dark); }
.role-vip       { background: linear-gradient(135deg, #FAF7F0, #EDE4CC); color: var(--gold-dark); }
.role-expired   { background: var(--danger-bg);  color: var(--danger); }
.role-condo     { background: #F3E8FF;            color: #7C3AED; }
.role-pro       { background: var(--gold-bg);    color: var(--gold-dark); }
.role-admin     { background: var(--danger-bg);  color: var(--danger); }
.trial-badge {
    display: inline-block; margin-left: 4px; background: var(--warning-bg);
    color: var(--warning); font-size: 0.55rem; padding: 1px 5px;
    border-radius: var(--radius-full); font-weight: 600;
}
.nav-locked { position: relative; opacity: 0.5; pointer-events: none; cursor: default; }
.nav-lock-icon { font-size: 0.6rem; color: var(--text-muted); margin-left: auto; }

.sidebar-nav { flex: 1; list-style: none; padding: 8px 10px; }

.nav-label {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-muted); padding: 14px 12px 4px;
}

.nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 14px; color: var(--text-secondary);
    text-decoration: none; font-size: 0.85rem; font-weight: 500;
    border-radius: var(--radius-sm); transition: var(--transition);
    position: relative; margin-bottom: 2px;
}
.nav-link i { width: 18px; text-align: center; font-size: 0.85rem; }
.nav-link:hover { color: var(--text-primary); background: var(--gold-hover); }
.nav-link.active { color: var(--gold-dark); background: var(--gold-bg); font-weight: 600; }

.sidebar-footer { border-top: 1px solid var(--border-light); padding: 8px 10px; }
.logout-link { color: var(--text-muted) !important; }
.logout-link:hover { color: var(--danger) !important; background: var(--danger-bg) !important; }

/* ===================== TOPBAR ===================== */
.topbar {
    height: var(--topbar-height);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 16px;
    padding: 0 28px; position: sticky; top: 0; z-index: 100;
}

.sidebar-toggle {
    background: none; border: none; color: var(--text-secondary);
    font-size: 1.1rem; cursor: pointer; padding: 8px;
    border-radius: var(--radius-sm); display: none;
}
.sidebar-toggle:hover { background: var(--gold-hover); }

.topbar-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.topbar-date { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }

/* ===================== CONTENT ===================== */
.content-body { flex: 1; padding: 28px; }

/* ===================== DASHBOARD GRID ===================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; align-items: start;
}
.col-span-1   { grid-column: span 1; }
.col-span-2   { grid-column: span 2; }
.col-span-3   { grid-column: span 3; }
.col-span-full{ grid-column: 1 / -1; }

/* ===================== CARDS ===================== */
.card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    transition: var(--transition); box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow); }
.card.border-warning { border-color: rgba(196,138,16,0.35); }

.card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border-light); gap: 12px;
}
.card-header h3 {
    font-size: 0.88rem; font-weight: 600;
    display: flex; align-items: center; gap: 8px; color: var(--text-primary);
}
.card-header h3 i { color: var(--gold); font-size: 0.85rem; }
.card-body { padding: 20px; }

/* ===================== KPI CARDS ===================== */
.kpi-card { display: flex; align-items: center; gap: 16px; padding: 20px !important; min-width: 0; }
.kpi-card .card-body { padding: 0; }

.kpi-icon {
    width: 48px; height: 48px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.gold-bg   { background: var(--gold-bg);    color: var(--gold-dark); }
.green-bg  { background: var(--success-bg); color: var(--success); }
.red-bg    { background: var(--danger-bg);  color: var(--danger); }
.alert-bg  { background: var(--danger-bg);  color: var(--danger); }
.orange-bg { background: var(--warning-bg); color: var(--warning); }
.blue-bg   { background: var(--info-bg);    color: var(--info); }

.kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1; }
.kpi-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* ===================== HERO CARD ===================== */
.card-hero { background: linear-gradient(135deg, #FFFDF8 0%, var(--gold-bg) 100%); border-color: var(--gold-light); }
.hero-content { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff; flex-shrink: 0;
}
.hero-text { flex: 1; }
.hero-text h2 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.hero-text p  { color: var(--text-muted); font-size: 0.82rem; margin-top: 4px; }
.hero-stat { text-align: right; }
.stat-value { font-size: 1.8rem; font-weight: 800; }
.stat-label { font-size: 0.72rem; color: var(--text-muted); }
.hero-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ===================== BADGES & PILLS ===================== */
.badge-coming { background: var(--gold-bg); color: var(--gold-dark); font-size: 0.6rem; }
.unit-badges  { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.status-pill {
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2px;
}
.status-paid           { background: var(--success-bg); color: var(--success); }
.status-pending        { background: var(--warning-bg); color: var(--warning); }
.status-open           { background: var(--info-bg);    color: var(--info); }
.status-resolved       { background: var(--success-bg); color: var(--success); }
.status-occupied       { background: var(--success-bg); color: var(--success); }
.status-vacant         { background: var(--danger-bg);  color: var(--danger); }
.status-owner_occupied { background: var(--gold-bg);    color: var(--gold-dark); }
.status-pill.status-tenant { background: var(--info-bg);   color: var(--info); }
.status-pill.status-owner  { background: var(--gold-bg);   color: var(--gold-dark); }
.status-pill.status-admin  { background: var(--danger-bg); color: var(--danger); }

/* ── Unified Badge System ───────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--radius-full);
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap;
    background: var(--bg-body); color: var(--text-secondary);
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-neutral { background: var(--bg-body);    color: var(--text-muted); border: 1px solid var(--border); }
.badge-gold    { background: var(--gold-bg);    color: var(--gold-dark); }
.badge-purple  { background: #F3E8FF;           color: #7C3AED; }

/* Legacy aliases (existing templates) */
.type-badge { padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; }
.type-rent      { background: var(--success-bg); color: var(--success); }
.type-expense   { background: var(--danger-bg);  color: var(--danger); }
.type-condo_fee { background: #F3E8FF;           color: #7C3AED; }
.type-deposit   { background: var(--info-bg);    color: var(--info); }

/* ===================== TABLES ===================== */
.table-wrapper { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th {
    text-align: left; padding: 10px 12px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--text-muted);
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
.data-table td { padding: 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--gold-hover); }
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* ===================== BUTTONS ===================== */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: var(--radius-sm); border: none;
    cursor: pointer; font-size: 0.82rem; font-weight: 600;
    text-decoration: none; transition: var(--transition);
    white-space: nowrap; font-family: inherit;
}
.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff; box-shadow: 0 2px 8px rgba(212,188,122,0.3);
}
.btn-primary:hover { box-shadow: 0 4px 16px rgba(212,188,122,0.4); transform: translateY(-1px); }
.btn-outline {
    background: transparent; color: var(--text-secondary); border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-hover); }
.btn-sm   { padding: 6px 12px; font-size: 0.76rem; }
.btn-xs   { padding: 3px 10px; font-size: 0.72rem; }
.btn-full { width: 100%; justify-content: center; }
.btn-mbway{ background: linear-gradient(135deg, #FF6B00, #FF9500); color: #fff; flex: 1; }
.btn-mb   { background: linear-gradient(135deg, #003893, #0052CC); color: #fff; flex: 1; }
.btn-icon {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); transition: var(--transition);
}
.btn-icon:hover { color: var(--gold-dark); background: var(--gold-hover); }
.btn-icon-danger { color: var(--text-muted); }
.btn-icon-danger:hover { color: var(--danger) !important; background: var(--danger-bg) !important; }
.btn-success {
    background: var(--success); color: #fff; border: none;
    border-radius: var(--radius-sm); cursor: pointer;
    font-family: inherit; font-weight: 600; transition: var(--transition);
}
.btn-success:hover { opacity: 0.85; }
.btn-danger {
    background: var(--danger); color: #fff; border: none;
    border-radius: var(--radius-sm); cursor: pointer;
    font-family: inherit; font-weight: 600; transition: var(--transition);
}
.btn-danger:hover { opacity: 0.85; }
.btn-danger-outline {
    background: transparent; color: var(--danger);
    border: 1px solid rgba(201,112,112,0.4); border-radius: var(--radius-sm);
    padding: 3px 8px; font-size: 0.72rem; cursor: pointer;
    font-family: inherit; transition: var(--transition);
}
.btn-danger-outline:hover { background: rgba(201,112,112,0.12); }
.btn-invite {
    background: rgba(212,188,122,0.15); color: #B8A060;
    border: 1px solid rgba(212,188,122,0.4); border-radius: 99px;
    padding: 3px 12px; font-size: 0.75rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: var(--transition);
}
.btn-invite:hover { background: var(--gold); color: #fff; }

/* ===================== FORMS ===================== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
/* Required field indicator */
.form-group:has(input[required]) > label::after,
.form-group:has(select[required]) > label::after,
.form-group:has(textarea[required]) > label::after {
    content: " *"; color: var(--danger, #e74c3c); font-weight: 700;
}
.required-legend { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 16px; }
.required-legend span { color: var(--danger, #e74c3c); font-weight: 700; }
/* Inline field errors */
.field-error {
    display: block; font-size: 0.72rem; color: var(--danger, #e74c3c);
    margin-top: 4px; line-height: 1.3;
}
.field-error i { margin-right: 3px; }
.form-group.has-error .form-control {
    border-color: var(--danger, #e74c3c);
    box-shadow: 0 0 0 2px rgba(231,76,60,0.1);
}
/* Help text below inputs */
.form-help {
    display: block; font-size: 0.7rem; color: var(--text-muted);
    margin-top: 3px; line-height: 1.3;
}
/* Client-side validation warning */
.field-warning {
    display: block; font-size: 0.72rem; color: var(--warning, #f39c12);
    margin-top: 4px; line-height: 1.3;
}
.field-warning i { margin-right: 3px; }
.form-control {
    width: 100%; padding: 10px 14px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    font-size: 0.875rem; transition: var(--transition); font-family: inherit;
}
.form-control:focus { outline: none; border-color: var(--gold); background: var(--bg-white); box-shadow: 0 0 0 3px rgba(212,188,122,0.12); }
.form-control::placeholder { color: var(--text-muted); }
select.form-control   { cursor: pointer; }
textarea.form-control { resize: vertical; }
.form-control-sm { padding: 6px 10px; font-size: 0.82rem; }
.form-section { margin-bottom: 20px; }
.form-section-title {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--gold-dark);
    margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--gold-light);
}
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.form-row     { display: flex; gap: 16px; }
.form-half    { flex: 1; }
.form-section-optional { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; margin-left: 8px; }

/* ===================== ALERTS ===================== */
.alerts-container { margin-bottom: 20px; }
.alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--radius-sm);
    font-size: 0.85rem; margin-bottom: 8px; position: relative;
}
.alert-success { background: var(--success-bg); border: 1px solid rgba(106,158,106,0.3); color: var(--success); }
.alert-danger  { background: var(--danger-bg);  border: 1px solid rgba(201,112,112,0.3); color: var(--danger); }
.alert-warning { background: var(--warning-bg); border: 1px solid rgba(196,138,16,0.2);  color: var(--warning); }
.alert-info    { background: var(--info-bg);    border: 1px solid rgba(90,141,196,0.2);  color: var(--info); }
.alert-close { background: none; border: none; color: inherit; cursor: pointer; margin-left: auto; opacity: 0.7; padding: 0 4px; }
.alert-close:hover { opacity: 1; }
.alert-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 8px;
    font-size: 0.85rem; background: var(--warning-bg); border-left: 3px solid var(--warning);
}

/* ===================== PAYMENT ===================== */
.alert-payment { text-align: center; padding: 8px 0; }
.payment-amount { font-size: 2.5rem; font-weight: 800; color: var(--gold-dark); line-height: 1; }
.payment-desc   { font-size: 0.85rem; color: var(--text-muted); margin: 6px 0 16px; }
.payment-methods { display: flex; gap: 10px; }
.status-ok { text-align: center; padding: 20px; color: var(--success); }
.status-ok i { font-size: 2.5rem; margin-bottom: 8px; }
.status-ok p { color: var(--text-muted); font-size: 0.875rem; }

/* ===================== DOCUMENTS ===================== */
.documents-grid { display: flex; flex-direction: column; gap: 10px; }
.doc-item { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--bg-body); border-radius: var(--radius-sm); border: 1px solid var(--border-light); }
.doc-icon  { font-size: 1.5rem; color: var(--danger); flex-shrink: 0; }
.doc-info  { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.doc-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.doc-type, .doc-date { font-size: 0.72rem; }

/* ===================== MAINTENANCE ===================== */
.maintenance-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; }
.mi-info  { display: flex; flex-direction: column; gap: 2px; }
.mi-title { font-weight: 500; color: var(--text-primary); }
.mi-date  { font-size: 0.72rem; }
.maintenance-cards { display: flex; flex-direction: column; gap: 12px; }
.maintenance-card { background: var(--bg-body); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 16px; border-left: 3px solid transparent; }
.maintenance-card.priority-urgent { border-left-color: var(--danger); }
.maintenance-card.priority-high   { border-left-color: var(--warning); }
.maintenance-card.priority-medium { border-left-color: var(--info); }
.maintenance-card.priority-low    { border-left-color: var(--text-muted); }
.mc-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mc-title  { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.mc-badges { display: flex; gap: 6px; }
.mc-desc   { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 10px; }
.mc-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; }
.badge-urgent { background: var(--danger-bg);  color: var(--danger); }
.badge-high   { background: var(--warning-bg); color: var(--warning); }
.badge-medium { background: var(--info-bg);    color: var(--info); }
.badge-low    { background: var(--bg-body);    color: var(--text-muted); }

/* ===================== MEETINGS ===================== */
.meetings-list { display: flex; flex-direction: column; gap: 16px; }
.meeting-item { display: flex; gap: 20px; padding: 16px; background: var(--bg-body); border-radius: var(--radius-sm); border: 1px solid var(--border-light); }
.meeting-date { text-align: center; flex-shrink: 0; width: 50px; padding: 8px; background: var(--gold-bg); border-radius: var(--radius-sm); }
.meeting-day  { font-size: 1.4rem; font-weight: 800; color: var(--gold-dark); line-height: 1; }
.meeting-month{ font-size: 0.62rem; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.meeting-content { flex: 1; }
.meeting-title   { font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.meeting-minutes { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }
.meeting-actions { flex-shrink: 0; display: flex; align-items: flex-start; }

/* ===================== UNITS GRID (CONDO) ===================== */
.units-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.unit-card  { background: var(--bg-body); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.unit-id    { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.unit-type  { font-size: 0.72rem; color: var(--text-muted); }
.unit-status{ font-size: 0.68rem; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-dot.status-occupied       { background: var(--success); }
.status-dot.status-vacant         { background: var(--danger); }
.status-dot.status-owner_occupied { background: var(--gold); }

/* ===================== ANALYTICS ===================== */
.analytics-page   { display: grid; grid-template-columns: 1fr; gap: 20px; }
.analytics-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.analytics-header h2 { font-size: 1.1rem; color: var(--text-primary); }
.analytics-badge { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--gold-light); border-radius: var(--radius-full); font-size: 0.78rem; color: var(--gold-dark); background: var(--gold-bg); }
.analytics-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.analytics-results { display: contents; }
.result-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 0.875rem; color: var(--text-secondary); }
.result-row:last-child { border-bottom: none; }
.result-row strong { color: var(--text-primary); }
.result-total { border-top: 2px solid var(--gold-light); margin-top: 4px; padding-top: 10px; }
.result-total span { font-weight: 600; color: var(--text-primary); }
.yield-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.yield-card  { text-align: center; padding: 16px 8px; background: var(--bg-body); border-radius: var(--radius-sm); border: 1px solid var(--border-light); }
.yield-value { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.yield-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; }
.tab-buttons { display: flex; gap: 4px; }
.tab-btn { padding: 5px 14px; border-radius: var(--radius-full); border: 1px solid var(--border); background: none; color: var(--text-muted); font-size: 0.76rem; cursor: pointer; transition: var(--transition); }
.tab-btn.active { background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 700; }

/* ===================== MODAL ===================== */
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); z-index: 2000; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--radius); width: 90%; max-width: 460px; opacity: 0; pointer-events: none; transition: var(--transition); box-shadow: var(--shadow-lg); }
.modal.active { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); z-index: 1999; opacity: 0; pointer-events: none; transition: var(--transition); }
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
.modal-header h3 { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 4px; border-radius: var(--radius-sm); }
.modal-close:hover { background: var(--danger-bg); color: var(--danger); }
.modal-body { padding: 20px; }

/* ===================== AUTH ===================== */
.auth-page { display: flex; min-height: 100vh; }
.auth-left { flex: 1; background: linear-gradient(160deg, #FFFDF8 0%, var(--gold-bg) 50%, #F8F0E0 100%); border-right: 1px solid var(--border); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-brand { margin-bottom: 48px; }
.auth-logo    { font-size: 2.2rem; font-weight: 800; }
.auth-tagline { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-top: 6px; }
.auth-features { flex: 1; }
.auth-feature { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.auth-feature i  { font-size: 1.3rem; color: var(--gold-dark); margin-top: 2px; flex-shrink: 0; width: 30px; }
.auth-feature h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.auth-feature p  { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.auth-powered { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.auth-powered strong { color: var(--gold-dark); }
.auth-right { width: 460px; display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: var(--bg-white); }
.auth-card { width: 100%; max-width: 380px; }
.auth-card-header { margin-bottom: 28px; }
.auth-card-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.auth-card-header p  { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px; }
.auth-form .form-group label { display: flex; align-items: center; gap: 6px; }
.auth-form .form-group label i { color: var(--gold); width: auto; }
.auth-footer-link { margin-top: 20px; text-align: center; font-size: 0.82rem; color: var(--text-muted); }
.auth-footer-link a { color: var(--gold-dark); text-decoration: none; font-weight: 600; }
.auth-trial-note {
    margin-top: 16px; text-align: center; font-size: 0.78rem; color: var(--success);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--success-bg); padding: 8px 14px; border-radius: 8px;
}

/* ── Plan Comparison (Register page) ── */
.plans-compare { flex: 1; }
.plans-title { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin-bottom: 2px; }
.plans-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 18px; }
.plans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan-card {
    background: var(--bg-white); border: 2px solid var(--border); border-radius: 12px;
    padding: 18px 16px; cursor: pointer; position: relative; transition: all 0.2s ease;
}
.plan-card:hover { border-color: var(--gold-light); box-shadow: 0 2px 12px rgba(212,188,122,0.12); }
.plan-card.plan-active { border-color: var(--gold); box-shadow: 0 2px 16px rgba(212,188,122,0.2); }
.plan-card.plan-featured { border-color: var(--gold-light); }
.plan-badge {
    position: absolute; top: -10px; right: 14px; background: var(--gold);
    color: #fff; font-size: 0.65rem; font-weight: 700; padding: 3px 10px;
    border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px;
}
.plan-header { margin-bottom: 14px; }
.plan-name { font-size: 0.95rem; font-weight: 800; color: var(--text-primary); }
.plan-price { font-size: 1.4rem; font-weight: 800; color: var(--gold-dark); margin-top: 2px; }
.plan-price span { font-size: 0.7rem; font-weight: 400; color: var(--text-muted); }
.plan-features { list-style: none; padding: 0; margin: 0 0 12px 0; }
.plan-features li {
    font-size: 0.73rem; color: var(--text-secondary); padding: 3px 0;
    display: flex; align-items: center; gap: 7px;
}
.plan-features li i { font-size: 0.65rem; color: var(--success); flex-shrink: 0; width: 14px; text-align: center; }
.plan-features li.feature-disabled { color: var(--text-muted); }
.plan-features li.feature-disabled i { color: var(--text-muted); opacity: 0.5; }
.plan-addon { font-size: 0.68rem; color: var(--text-muted); padding-top: 8px; border-top: 1px solid var(--border-light); }
.plan-select-indicator {
    display: none; font-size: 0.72rem; font-weight: 700; color: var(--gold-dark);
    margin-top: 10px; text-align: center;
}
.plan-card.plan-active .plan-select-indicator { display: block; }
.selected-plan-summary {
    background: var(--gold-bg); border: 1px solid var(--gold-light); border-radius: 8px;
    padding: 12px 14px; margin-bottom: 16px;
}
.plan-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.85rem; color: var(--text-primary);
}
.plan-summary-trial {
    font-size: 0.75rem; color: var(--success); margin-top: 4px;
    display: flex; align-items: center; gap: 5px;
}
@media (max-width: 768px) {
    .plans-grid { grid-template-columns: 1fr; }
}

/* ===================== EMPTY STATE ===================== */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }
.empty-state i  { font-size: 3rem; color: var(--gold-light); margin-bottom: 16px; display: block; }
.empty-state h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--text-secondary); }
.empty-state p  { font-size: 0.85rem; }

/* ===================== ADMIN ===================== */
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-avatar-sm { width: 30px; height: 30px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--gold), var(--gold-dark)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.72rem; color: #fff; flex-shrink: 0; }
.action-buttons { display: flex; gap: 4px; align-items: center; }
.role-selector  { display: flex; flex-direction: column; gap: 8px; }
.role-option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--bg-body); border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); }
.role-option:hover { border-color: var(--gold-light); }
.role-option.selected { border-color: var(--gold); background: var(--gold-bg); }
.role-option input[type="radio"] { display: none; }
.role-option-content { flex: 1; }
.role-option-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.role-option-header i { color: var(--gold); width: 16px; text-align: center; }
.role-option-label { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.role-option-desc  { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; }

/* ===================== REPORTS ===================== */
.reports-intro { margin-bottom: 20px; font-size: 0.875rem; color: var(--text-muted); }
.reports-intro strong { color: var(--gold-dark); }
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.report-card { padding: 20px; background: var(--bg-body); border: 1px solid var(--border-light); border-radius: var(--radius); transition: var(--transition); }
.report-card:hover { border-color: var(--gold-light); box-shadow: var(--shadow); }
.report-card-icon { font-size: 1.8rem; color: var(--gold); margin-bottom: 12px; }
.report-card-info h4 { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.report-card-info p  { font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 10px; line-height: 1.5; }

/* ===================== WARRANTIES ===================== */
.warranty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.warranty-card { background: var(--bg-body); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 16px; }
.warranty-card.warranty-expired { border-left: 3px solid var(--danger); }
.warranty-card.warranty-warning { border-left: 3px solid var(--warning); }
.warranty-card.warranty-ok      { border-left: 3px solid var(--success); }
.warranty-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.warranty-name   { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.warranty-brand  { font-size: 0.75rem; color: var(--text-muted); }
.warranty-countdown { text-align: center; padding: 12px 0; }
.countdown-value   { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.countdown-label   { font-size: 0.68rem; color: var(--text-muted); margin-top: 4px; }
.countdown-expired { color: var(--danger); }
.countdown-warning { color: var(--warning); }
.countdown-ok      { color: var(--success); }
.warranty-footer { font-size: 0.72rem; color: var(--text-muted); display: flex; justify-content: space-between; }

/* ===================== UTILITY TRACKING ===================== */
.utility-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.utility-item    { text-align: center; padding: 16px 8px; background: var(--bg-body); border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.utility-icon             { font-size: 1.5rem; margin-bottom: 6px; }
.utility-icon.electricity { color: #E5961A; }
.utility-icon.water       { color: var(--info); }
.utility-icon.gas         { color: var(--danger); }
.utility-value { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.utility-label { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }

/* ===================== PREVENTIVE MAINTENANCE ===================== */
.preventive-list { display: flex; flex-direction: column; gap: 12px; }
.preventive-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--bg-body); border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.preventive-status { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.preventive-status.overdue  { background: var(--danger-bg);  color: var(--danger); }
.preventive-status.upcoming { background: var(--warning-bg); color: var(--warning); }
.preventive-status.ok       { background: var(--success-bg); color: var(--success); }
.preventive-info  { flex: 1; }
.preventive-name  { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.preventive-task  { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.preventive-dates { font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; display: flex; gap: 16px; }

/* ===================== QUOTA MAP ===================== */
.quota-progress { height: 8px; background: var(--bg-body); border-radius: var(--radius-full); overflow: hidden; margin-top: 4px; }
.quota-bar { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--gold), var(--gold-dark)); transition: width 0.5s ease; }

/* ===================== VOTE CARDS ===================== */
.vote-card { padding: 12px 16px; background: var(--bg-body); border: 1px solid var(--border-light); border-radius: var(--radius-sm); margin-bottom: 10px; }
.vote-topic { font-weight: 600; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 8px; }
.vote-bars  { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.vote-bar-container { flex: 1; height: 24px; background: var(--bg-body); border-radius: var(--radius-full); overflow: hidden; display: flex; }
.vote-bar-for     { background: var(--success); height: 100%; transition: width 0.5s ease; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: #fff; font-weight: 700; }
.vote-bar-against { background: var(--danger);  height: 100%; transition: width 0.5s ease; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: #fff; font-weight: 700; }
.vote-bar-abstain { background: var(--text-muted); height: 100%; transition: width 0.5s ease; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: #fff; font-weight: 700; }
.vote-counts { display: flex; gap: 16px; font-size: 0.72rem; color: var(--text-muted); }
.vote-result { font-size: 0.72rem; font-weight: 700; }
.vote-result.approved { color: var(--success); }
.vote-result.rejected { color: var(--danger); }
.vote-result.pending  { color: var(--warning); }

/* ===================== PHOTO UPLOAD ===================== */
.photo-upload-area { border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 24px; text-align: center; cursor: pointer; transition: var(--transition); background: var(--bg-body); }
.photo-upload-area:hover { border-color: var(--gold); background: var(--gold-hover); }
.photo-upload-area i { font-size: 2rem; color: var(--gold); margin-bottom: 8px; }
.photo-upload-area p { font-size: 0.82rem; color: var(--text-muted); }
.photo-preview { max-width: 100%; max-height: 200px; border-radius: var(--radius-sm); margin-top: 12px; display: none; }

/* ===================== MARKET WATCH ===================== */
.market-watch { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.mw-item { padding: 16px; background: var(--bg-body); border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.mw-location { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
.mw-price    { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.mw-change   { font-size: 0.78rem; font-weight: 600; margin-top: 4px; }
.mw-change.positive { color: var(--success); }
.mw-change.negative { color: var(--danger); }

/* ===================== PERFORMANCE CHART ===================== */
.perf-legend { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.perf-legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); }
.perf-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ===================== EQUIPMENT HEALTH WIDGET ======== */
.equip-health-grid { display:flex; gap:16px; flex-wrap:wrap; }
.equip-health-stat { flex:1; min-width:80px; text-align:center; padding:12px 8px; background:var(--bg-body); border:1px solid var(--border-light); border-radius:10px; }
.equip-health-num { font-size:1.4rem; font-weight:700; color:var(--text-primary); }
.equip-health-label { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; font-weight:600; margin-top:2px; }
.text-gold { color:var(--gold-dark); }

/* ===================== APP FOOTER ===================== */
.app-footer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px; border-top: 1px solid var(--border); font-size: 0.72rem; color: var(--text-muted); flex-wrap: wrap; }
.footer-brand   { color: var(--gold-dark); font-weight: 600; }
.footer-sep     { color: var(--border); }
.footer-company { color: var(--text-muted); font-weight: 500; }

/* ===================== CODE ===================== */
code { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.78rem; background: var(--bg-body); padding: 2px 8px; border-radius: var(--radius-sm); color: var(--gold-dark); border: 1px solid var(--border-light); }

/* ===================== UTILITIES ===================== */
.gold          { color: var(--gold-dark) !important; }
.text-muted    { color: var(--text-muted) !important; }
.text-warning  { color: var(--warning) !important; }
.text-danger, .text-red   { color: var(--danger) !important; }
.text-success, .text-green{ color: var(--success) !important; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,188,122,0.25); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(212,188,122,0.4); }

/* ===================== ESSENTIAL TABS ===================== */
.essential-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid var(--border); padding-bottom: 0; flex-wrap: wrap; }
.essential-tab  { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 10px 20px; font-family: inherit; font-size: 0.88rem; font-weight: 500; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: var(--transition); display: flex; align-items: center; gap: 8px; }
.essential-tab:hover  { color: var(--gold); background: var(--gold-hover); }
.essential-tab.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }
.tab-content { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== RENTAL CARDS ===================== */
.rental-list { display: flex; flex-direction: column; gap: 16px; }
.rental-card { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: var(--transition); }
.rental-card:hover { border-color: var(--gold); box-shadow: 0 2px 12px rgba(212,188,122,0.12); }
.rental-card.rental-alert { border-left: 4px solid var(--danger); }
.rental-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.rental-name    { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.rental-address { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.rental-meta    { display: flex; gap: 10px; margin-top: 6px; align-items: center; font-size: 0.78rem; color: var(--text-muted); }
.rent-value { font-size: 1.4rem; font-weight: 700; color: var(--gold); text-align: right; }
.rent-label { font-size: 0.72rem; color: var(--text-muted); text-align: right; }
.rental-contract { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.contract-tenant { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; margin-bottom: 8px; flex-wrap: wrap; }
.contract-dates  { display: flex; gap: 16px; font-size: 0.78rem; color: var(--text-muted); flex-wrap: wrap; }
.contract-alert-banner { background: rgba(201,112,112,0.1); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 10px; font-size: 0.82rem; color: var(--danger); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.rental-no-contract  { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; font-size: 0.82rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.rental-pending-rent { background: rgba(212,188,122,0.1); border: 1px solid rgba(212,188,122,0.3); border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 10px; font-size: 0.82rem; color: var(--text-primary); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tab-badge   { background: var(--gold); color: #fff; border-radius: 99px; font-size: 0.65rem; font-weight: 700; padding: 2px 7px; margin-left: 4px; }
.badge-limit { font-size: 0.75rem; color: var(--text-muted); font-style: italic; }
.badge-occupied      { background: rgba(106,158,106,0.15); color: var(--success); border: 1px solid rgba(106,158,106,0.3); padding: 2px 8px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; }
.badge-vacant        { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(201,112,112,0.3); padding: 2px 8px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; }
.badge-tenant-active { background: rgba(106,158,106,0.15); color: var(--success); border: 1px solid rgba(106,158,106,0.3); padding: 2px 10px; border-radius: 99px; font-size: 0.72rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ===================== CONTRACT DETAIL ===================== */
.contract-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.contract-section { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; }
.contract-section-title { font-size: 0.78rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.contract-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; gap: 12px; }
.contract-row:last-child { border-bottom: none; }
.contract-row span   { color: var(--text-muted); flex-shrink: 0; }
.contract-row strong { color: var(--text-primary); text-align: right; }
.priority-badge  { padding: 2px 8px; border-radius: 99px; font-size: 0.68rem; font-weight: 700; }
.priority-high   { background: rgba(201,112,112,0.15); color: var(--danger); }
.priority-medium { background: rgba(212,188,122,0.15); color: var(--gold-dark); }
.priority-low    { background: rgba(106,158,106,0.15); color: var(--success); }

/* ===================== RENTAL RECEIPTS ===================== */
.rental-receipts { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* ===================== TRANSACTIONS ===================== */
.txn-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.txn-filters .form-control-sm { min-width: 140px; }

/* ===================== FILE UPLOAD ===================== */
.file-drop-zone { border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 32px 20px; text-align: center; cursor: pointer; transition: var(--transition); background: var(--bg-body); }
.file-drop-zone:hover { border-color: var(--gold); background: rgba(212,188,122,0.05); }

/* ===================== INE ALERT ===================== */
.ine-alert-banner { display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg, rgba(90,141,196,0.08), rgba(90,141,196,0.04)); border: 1px solid rgba(90,141,196,0.25); border-radius: var(--radius-sm); padding: 14px 16px; margin: 12px 20px 0; }
.ine-alert-icon    { width: 36px; height: 36px; background: rgba(90,141,196,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--info); font-size: 1rem; }
.ine-alert-content { flex: 1; font-size: 0.83rem; color: var(--text-primary); }
.ine-alert-content strong { display: block; margin-bottom: 4px; color: var(--info); font-size: 0.85rem; }
.ine-alert-content span   { color: var(--text-muted); line-height: 1.5; }
.ine-alert-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ===================== ANALYTICS ESSENTIAL ===================== */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.analytics-section { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; }
.analytics-section-title { font-size: 0.75rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.analytics-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; gap: 8px; }
.analytics-row:last-child { border-bottom: none; }
.analytics-row span { color: var(--text-muted); }
.analytics-row.highlight { background: rgba(212,188,122,0.05); margin: 0 -4px; padding: 6px 4px; border-radius: 4px; border-bottom: none; margin-top: 4px; }

/* ===================== PROPERTY FORM ===================== */
.property-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ===================== OCR ===================== */
.ocr-card { border-color: var(--gold-light); }
.ocr-demo { text-align: center; }
.ocr-icon { font-size: 2.5rem; color: var(--gold); margin-bottom: 12px; }
.ocr-demo h4 { font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.ocr-demo p  { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.ocr-sim  { text-align: left; }
.ocr-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-light); font-size: 0.875rem; color: var(--text-secondary); }
.ocr-step strong { color: var(--text-primary); }
.ocr-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ===================== PAYMENT SIM ===================== */
.payment-sim { text-align: center; }
.payment-sim-icon   { font-size: 2.5rem; margin-bottom: 8px; }
.mbway-icon         { color: #FF6B00; }
.mb-icon            { color: #003893; }
.payment-sim-amount { font-size: 2rem; font-weight: 800; color: var(--gold-dark); margin-bottom: 16px; }
.mb-ref-box { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 16px; text-align: left; }
.mb-ref-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.875rem; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); }
.mb-ref-row:last-child { border-bottom: none; }
.mb-ref-row strong { color: var(--text-primary); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
    .col-span-1 { grid-column: span 1; }
    .col-span-2 { grid-column: span 2; }
    .col-span-full { grid-column: 1 / -1; }
    .analytics-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .main-content { margin-left: 0; }
    .sidebar-toggle { display: flex; }
    .auth-left { display: none; }
    .auth-right { width: 100%; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .col-span-1, .col-span-2, .col-span-3, .col-span-full { grid-column: 1 / -1; }
    .yield-cards { grid-template-columns: 1fr 1fr 1fr; }
    .hero-content { flex-direction: column; text-align: center; }
    .hero-stat { text-align: center; }
}

@media (max-width: 600px) {
    .content-body { padding: 16px; }
    .kpi-card { padding: 16px !important; }
    .kpi-value { font-size: 1.2rem; }
    .yield-cards { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column; }
    .payment-methods { flex-direction: column; }
    .market-watch { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 0; }
    .property-form-grid { grid-template-columns: 1fr; }
    .utility-summary { grid-template-columns: 1fr; }
    .warranty-grid { grid-template-columns: 1fr; }
    .analytics-grid { grid-template-columns: 1fr; }
    .contract-detail-grid { grid-template-columns: 1fr; }
    .essential-tabs { gap: 4px; }
    .essential-tab { padding: 8px 12px; font-size: 0.80rem; }
    .rental-card-header { flex-direction: column; }
    .contract-dates { flex-direction: column; gap: 4px; }
    .txn-filters { flex-direction: column; }
    .txn-filters .form-control-sm { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD PERSONALIZÁVEL
   ═══════════════════════════════════════════════════════════ */

/* Botão Personalizar no topbar */
.btn-customize {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-customize:hover {
    border-color: var(--gold);
    color: var(--gold);
}
.btn-customize.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}
.btn-customize-label {
    display: none;
}
@media (min-width: 600px) {
    .btn-customize-label { display: inline; }
}

/* Banner de personalização */
.customize-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(212,188,122,0.15), rgba(212,188,122,0.05));
    border-bottom: 1px solid rgba(212,188,122,0.3);
    font-size: 0.82rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.customize-banner i { color: var(--gold); }
.btn-customize-done {
    margin-left: auto;
    padding: 6px 16px;
    background: var(--gold);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-family: var(--font);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.btn-customize-done:hover { opacity: 0.9; }

/* Zona sortable */
.sortable-zone {
    display: contents; /* herda o grid do pai */
}

/* Card em modo edição */
.widget-card.widget-editing {
    outline: 2px dashed rgba(212,188,122,0.5);
    outline-offset: 2px;
    cursor: default;
}

/* Card oculto */
.widget-card.widget-hidden {
    opacity: 0.35;
    filter: grayscale(1);
}
.widget-card.widget-hidden:not(.widget-editing) {
    display: none;
}

/* Controlos do widget (drag handle + toggle) */
.widget-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 10;
}
/* Garantir que o card tem position: relative */
.widget-card {
    position: relative;
}
.widget-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(212,188,122,0.15);
    border-radius: 6px;
    color: var(--gold);
    cursor: grab;
    font-size: 0.85rem;
}
.widget-drag-handle:active { cursor: grabbing; }
.widget-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(74,74,74,0.08);
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}
.widget-toggle-btn:hover { color: var(--text-primary); }

/* SortableJS estados */
.widget-ghost {
    opacity: 0.4;
    background: rgba(212,188,122,0.1) !important;
    border: 2px dashed var(--gold) !important;
}
.widget-chosen {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    transform: rotate(1deg);
}
.widget-drag {
    transform: rotate(1deg);
    box-shadow: 0 12px 32px rgba(0,0,0,0.2) !important;
}

/* ===================== UNIT SELECTOR BAR ===================== */
.unit-selector-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.unit-selector-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.unit-selector-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.unit-selector-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-body);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
}
.unit-selector-tab:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212,188,122,0.06);
}
.unit-selector-tab.active {
    border-color: var(--gold);
    background: rgba(212,188,122,0.12);
    color: var(--gold);
    font-weight: 600;
}
.unit-selector-city {
    font-size: 0.7rem;
    opacity: 0.7;
    font-weight: 400;
}

/* Toast */
.reapp-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: var(--text-primary);
    color: var(--bg-card);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    white-space: nowrap;
}
.reapp-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===================== MY HOMES GRID ===================== */
.my-homes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 4px 0 8px;
}
/* Cap at max 3 cards per row */
@media (min-width: 960px) {
    .my-homes-grid > * { max-width: 100%; }
    .my-homes-grid { grid-template-columns: repeat(auto-fit, minmax(calc(33.333% - 11px), 1fr)); }
}
.my-home-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.my-home-cover {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0.12;
    pointer-events: none;
}
.my-home-card:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 20px rgba(212,188,122,0.15);
    transform: translateY(-2px);
}
.my-home-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.my-home-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.my-home-type-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.my-home-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.my-home-location {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.my-home-values {
    display: flex;
    gap: 16px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.my-home-val {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.my-home-val-label {
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.my-home-val-num {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.my-home-val-num.gold { color: var(--gold); }
.my-home-appreciation {
    font-size: 0.75rem;
    color: var(--success);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.my-home-enter {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Casa breadcrumb (2+ casas, dentro do detalhe) ── */
.casa-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: 0.82rem;
    flex-wrap: wrap;
}
.casa-breadcrumb a {
    color: var(--gold);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.casa-breadcrumb a:hover { text-decoration: underline; }
.casa-breadcrumb span { color: var(--text-muted); }
.casa-breadcrumb-val { margin-left: auto; color: var(--text-primary); }
.casa-breadcrumb-val .gold { color: var(--gold); }

/* ── Barra de valorização (1 casa) ── */
.casa-value-bar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 16px;
}
.casa-value-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 8px;
}
.casa-value-bar-inner strong { color: var(--text-primary); }
.casa-value-bar-inner .gold { color: var(--gold); }
.appreciation-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(168,197,168,0.2);
    color: var(--success);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    margin-left: 4px;
}
/* ── Property card icons ── */
.home-icon-principal { background: rgba(59,130,246,0.12); color: #3B82F6; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.home-icon-ferias    { background: rgba(212,188,122,0.15); color: var(--gold); width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.home-icon-campo     { background: rgba(168,197,168,0.2); color: var(--success); width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.home-icon-invest    { background: rgba(168,130,212,0.15); color: #9B59B6; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.home-icon-rental    { background: rgba(212,188,122,0.15); color: var(--gold); width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }

/* ── Year filter dropdown ── */
.year-dropdown {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: var(--transition);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}
.year-dropdown:hover, .year-dropdown:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(212,188,122,0.2);
}

/* ── Extra status badge (used in detail page) ── */
.status-in_progress { background: rgba(59,130,246,0.15); color: #3B82F6; }
.text-green { color: var(--success) !important; }
.text-red { color: var(--danger) !important; }
/* ── Modal Box (used in utility/preventive edit modals) ── */
.modal-box {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: 2000; background: var(--bg-white);
    border: 1px solid var(--border); border-radius: var(--radius);
    width: 90%; max-width: 460px;
    box-shadow: var(--shadow-lg); padding: 24px;
    opacity: 0; pointer-events: none; transition: var(--transition);
}
.modal-box.active { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); }
.modal-box h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 16px; color: var(--text-primary); }

/* ── Filter buttons (utility readings) ── */
.btn-filter {
    padding: 5px 14px; border-radius: var(--radius-full);
    border: 1px solid var(--border); background: none;
    color: var(--text-muted); font-size: 0.76rem; font-weight: 600;
    cursor: pointer; transition: var(--transition); font-family: inherit;
}
.btn-filter:hover { border-color: var(--gold); color: var(--gold-dark); }
.btn-filter.active { background: var(--gold); color: #fff; border-color: var(--gold); }

/* ── INE Chips (analytics) ── */
.ine-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: 600;
    background: var(--bg-body); color: var(--text-secondary); border: 1px solid var(--border);
}
.ine-chip-custom { background: var(--gold-bg); color: var(--gold-dark); border-color: rgba(212,188,122,0.4); }
.ine-chip-rent   { background: var(--success-bg); color: var(--success); border-color: rgba(106,158,106,0.4); }
.ine-chip-delta  { background: var(--info-bg); color: var(--info); border-color: rgba(90,141,196,0.4); }

/* ── Focus states for buttons (accessibility) ── */
.btn:focus-visible, .btn-primary:focus-visible, .btn-outline:focus-visible,
.btn-success:focus-visible, .btn-danger:focus-visible, .btn-danger-outline:focus-visible,
.btn-sm:focus-visible, .btn-xs:focus-visible, .btn-icon:focus-visible,
.btn-filter:focus-visible, .btn-customize:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ── Priority badges (tenant maintenance) ── */
.priority-badge { padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.68rem; font-weight: 600; }
.priority-high   { background: var(--danger-bg); color: var(--danger); }
.priority-medium { background: var(--warning-bg); color: var(--warning); }
.priority-low    { background: var(--success-bg); color: var(--success); }

/* ── Photo upload area (tenant ticket) — uses .photo-upload-area from line ~694 ── */
.photo-preview { display: none; max-width: 100%; max-height: 200px; border-radius: var(--radius-sm); margin-top: 8px; }

/* ── Tenant contract details ── */
.contract-detail-grid { display: flex; flex-direction: column; gap: 20px; }
.contract-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.contract-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; }
.contract-row span { color: var(--text-muted); }
.contract-alert-banner { background: var(--danger-bg); color: var(--danger); padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; }
.badge-tenant-active { color: var(--success); font-size: 0.75rem; font-weight: 600; margin-left: 4px; }

/* ── Payment simulation (tenant) — uses .payment-* from line ~436 ── */
/* ── Role selector (admin) — uses .role-option from line ~616 ── */

/* ── AI Suggest Button ── */
.ai-field-row { display: flex; align-items: center; gap: 8px; }
.ai-field-row .form-control { flex: 1; }
.btn-ai-suggest {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border: 1.5px solid var(--gold); border-radius: var(--radius-sm);
    background: rgba(212,188,122,0.08); color: var(--gold);
    cursor: pointer; transition: var(--transition); font-size: 0.92rem;
}
.btn-ai-suggest:hover { background: var(--gold); color: #1a1a2e; }
.btn-ai-suggest:disabled { opacity: 0.5; cursor: wait; }

/* AI highlight flash on select */
@keyframes ai-flash {
    0% { box-shadow: 0 0 0 0 rgba(212,188,122,0.5); }
    50% { box-shadow: 0 0 0 4px rgba(212,188,122,0.25); }
    100% { box-shadow: 0 0 0 0 rgba(212,188,122,0); }
}
.ai-highlighted { animation: ai-flash 0.6s ease 2; border-color: var(--gold) !important; }

/* AI Toast */
.ai-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    padding: 12px 20px; border-radius: var(--radius-sm);
    font-size: 0.85rem; font-weight: 500; color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: ai-toast-in 0.3s ease;
}
.ai-toast-success { background: #27ae60; }
.ai-toast-warning { background: #e67e22; }
.ai-toast-error { background: #c0392b; }
.ai-toast-hide { opacity: 0; transition: opacity 0.3s ease; }
@keyframes ai-toast-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ── Dashboard Alerts Widget ── */
.alerts-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--danger); color: #fff;
    font-size: 0.68rem; font-weight: 700; margin-left: 6px;
}
.dashboard-alerts-list { display: flex; flex-direction: column; }
.dash-alert-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; border-left: 3px solid transparent;
    transition: all 0.3s ease;
}
.dash-alert-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.dash-alert-item:hover { background: var(--bg-body); }
.dash-alert-danger  { border-left-color: var(--danger); }
.dash-alert-warning { border-left-color: var(--gold); }
.dash-alert-info    { border-left-color: #3B82F6; }
.dash-alert-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; flex-shrink: 0;
}
.dash-alert-icon-danger  { background: rgba(235,160,160,0.2); color: var(--danger); }
.dash-alert-icon-warning { background: rgba(212,188,122,0.2); color: var(--gold); }
.dash-alert-icon-info    { background: rgba(59,130,246,0.12); color: #3B82F6; }
.dash-alert-link { display:flex; align-items:center; gap:14px; flex:1; min-width:0; text-decoration:none; color:inherit; }
.dash-alert-link:hover { text-decoration:none; }
.dash-alert-content { flex: 1; min-width: 0; }
.dash-alert-title { font-weight: 600; font-size: 0.84rem; color: var(--text-primary); }
.dash-alert-desc {
    font-size: 0.74rem; color: var(--text-muted); margin-top: 2px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dash-alert-days {
    display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 600;
    padding: 1px 7px; border-radius: 8px;
}
.dash-alert-days-danger  { background: rgba(235,160,160,0.2); color: var(--danger); }
.dash-alert-days-warning { background: rgba(212,188,122,0.2); color: var(--gold-dark); }
.dash-alert-days-info    { background: rgba(59,130,246,0.1); color: #3B82F6; }

/* Resolve button */
.btn-resolve {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--success); background: rgba(39,174,96,0.08);
    color: var(--success); font-size: 0.72rem; font-weight: 600;
    cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.btn-resolve:hover { background: var(--success); color: #fff; }
.btn-resolve:disabled { opacity: 0.5; cursor: wait; }

/* ===================== CHART MIN-HEIGHTS ===================== */
canvas[id$="Chart"] { min-height: 180px; }
@media (max-width: 768px) { canvas[id$="Chart"] { min-height: 150px; } }

/* ===================== FORM MAX-WIDTH ===================== */
.form-card-constrained { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ===================== RESPONSIVE TABLES ===================== */
@media (max-width: 768px) {
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table th, .data-table td { white-space: nowrap; }
    /* Hide secondary columns on mobile — mark with .hide-mobile */
    .hide-mobile { display: none !important; }
}

/* ===================== MOBILE TOUCH TARGETS (44px min) ===================== */
@media (max-width: 768px) {
    .btn-xs {
        padding: 10px 16px;
        min-height: 44px;
        font-size: 0.78rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm {
        padding: 10px 16px;
        min-height: 44px;
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .page-btn {
        min-width: 44px;
        height: 44px;
        font-size: 0.9rem;
    }
    .btn-resolve {
        padding: 10px 16px;
        min-height: 44px;
        font-size: 0.78rem;
    }
    /* Checkbox / radio touch areas */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 22px;
        min-height: 22px;
    }
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    /* Tab buttons */
    .tab-btn {
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* ── Pricing / Plans grid ────────────────────── */

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

.pricing-card {
    position: relative;
}

.pricing-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: var(--gold);
    color: var(--bg-body);
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 12px;
    border-radius: 10px;
}

.pricing-badge--left {
    right: auto;
    left: 16px;
}

.pricing-card-body {
    padding: 28px;
}

.pricing-plan-title {
    font-size: 1.2rem;
    margin: 0;
}

.pricing-price-wrap {
    margin: 12px 0 20px;
}

.pricing-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
}

.pricing-price-period {
    font-size: .85rem;
    color: var(--text-muted);
}

.pricing-feature-list {
    list-style: none;
    padding: 0;
    font-size: .85rem;
    line-height: 2;
}

.pricing-feature-icon {
    width: 20px;
    display: inline-block;
    text-align: center;
}

.pricing-feature-icon--success {
    color: var(--success);
}

.pricing-feature-icon--muted {
    color: var(--text-muted);
}

.pricing-feature-icon--gold {
    color: var(--gold);
}

.pricing-feature-disabled {
    color: var(--text-muted);
}

.pricing-addon-note {
    font-size: .75rem;
    color: var(--text-muted);
    margin: 12px 0;
}

.pricing-btn-full {
    width: 100%;
}

.pricing-btn-disabled {
    width: 100%;
    cursor: default;
    opacity: .6;
}

.pricing-btn-block {
    width: 100%;
    text-align: center;
    display: block;
}

.pricing-addon-section {
    max-width: 800px;
    margin: 24px auto 0;
    text-align: center;
}

.pricing-addon-card {
    display: inline-block;
}

.pricing-addon-body {
    padding: 16px 28px;
}

.pricing-addon-text {
    font-size: .85rem;
    margin: 0;
}

.pricing-addon-icon {
    color: var(--gold);
}

/* ── Base template (cookie, PWA, topbar) ─────── */

/* Sidebar: VIP star colour */
.sidebar-vip-star {
    color: var(--gold);
}

/* Footer locale switcher */
.locale-switcher {
    text-align: center;
    margin-top: 12px;
    font-size: .75rem;
}

/* Footer links (privacy / terms) */
.footer-link {
    color: var(--text-muted);
    font-size: .75rem;
    text-decoration: none;
}

/* Locale switcher: active locale */
.locale-active {
    color: var(--gold);
    font-size: .8rem;
}

/* Locale switcher: inactive locale link */
.locale-link {
    color: var(--text-muted);
    font-size: .8rem;
    text-decoration: none;
}

/* Locale switcher: separator pipe */
.locale-sep {
    color: var(--text-muted);
    margin: 0 4px;
}

/* Topbar: initially hidden customize button (JS shows via inline style) */
.topbar-btn-hidden {
    display: none;
}

/* ── Cookie consent banner ─────── */
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card, #1a1a2e);
    border-top: 1px solid var(--border, #333);
    padding: 16px 24px;
    z-index: 3000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .3);
}

.cookie-banner-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    min-width: 200px;
}

.cookie-banner-msg {
    margin: 0;
    font-size: .85rem;
    color: var(--text, #ccc);
}

.cookie-banner-privacy {
    color: var(--gold, #D4BC7A);
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-btn-accept {
    padding: 8px 20px;
    background: var(--gold, #D4BC7A);
    color: var(--bg-body, #0f0f1a);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: .8rem;
    cursor: pointer;
}

.cookie-btn-reject {
    padding: 8px 20px;
    background: transparent;
    color: var(--text-muted, #888);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    font-size: .8rem;
    cursor: pointer;
}

/* ── PWA install banner ─────── */
.pwa-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card, #fff);
    border-top: 2px solid var(--gold, #D4BC7A);
    padding: 14px 24px;
    z-index: 2999;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
}

.pwa-banner-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pwa-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.pwa-banner-text {
    flex: 1;
    min-width: 160px;
}

.pwa-banner-title {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-primary, #4A4A4A);
}

.pwa-banner-desc {
    font-size: .75rem;
    color: var(--text-muted, #999);
}

.pwa-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.pwa-btn-install {
    padding: 8px 20px;
    background: var(--gold, #D4BC7A);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: .8rem;
    cursor: pointer;
}

.pwa-btn-dismiss {
    padding: 8px 12px;
    background: transparent;
    color: var(--text-muted, #999);
    border: none;
    font-size: 1rem;
    cursor: pointer;
}

/* ── Profile page ────────────────────────────── */

.profile-card {
    max-width: 580px;
}

@media (max-width: 640px) {
    .profile-card {
        max-width: 100%;
    }
}

.profile-input-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.profile-full-row {
    grid-column: 1 / -1;
}

.profile-plan-group {
    margin-top: 8px;
}

.profile-plan-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-body);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.profile-plan-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-trial-warning {
    color: var(--warning);
}

.profile-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.profile-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.profile-sub-plan-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.profile-sub-detail {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.profile-cancel-warning {
    color: var(--warning);
}

.profile-overdue {
    color: var(--danger, #e74c3c);
}

.profile-cancelled {
    color: var(--text-muted);
}

.profile-sub-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gold);
}

.profile-sub-price-suffix {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
}

.profile-extra-units {
    font-size: 0.8rem;
    color: var(--text-muted);
    padding: 8px 0;
}

.profile-sub-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.profile-btn-sm {
    font-size: 0.8rem;
}

.profile-inline-form {
    display: inline;
}

.profile-btn-ghost {
    font-size: 0.8rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
}

.profile-payment-history {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.profile-payment-history-title {
    font-size: 0.85rem;
    margin: 0 0 12px;
}

.profile-payment-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    padding: 6px 0;
}

.profile-payment-row-bordered {
    border-bottom: 1px solid var(--border);
}

.profile-notif-row-bordered {
    border-bottom: 1px solid var(--border);
}

.profile-password-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.profile-payment-date {
    color: var(--text-muted);
}

.profile-payment-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 8px;
}

.profile-section-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.profile-rgpd-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-btn-center {
    text-align: center;
}

.profile-btn-danger-outline {
    text-align: center;
    background: transparent;
    color: var(--danger, #e74c3c);
    border: 1px solid var(--danger, #e74c3c);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 0.85rem;
}

.profile-rgpd-note {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.profile-rgpd-note-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.profile-link-gold {
    color: var(--gold);
}

.profile-notif-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
}

.profile-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.profile-toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.profile-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--border);
    border-radius: 24px;
    transition: .3s;
}

.profile-notif-label {
    font-size: 0.85rem;
    font-weight: 500;
}

.profile-notif-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.profile-notif-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

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

/* ── Asset detail ─────────────────────────────── */
.asset-detail-subtitle         { font-weight: 400; font-size: 0.85rem; }
.asset-detail-header-actions   { display: flex; gap: 8px; }
.asset-detail-age              { font-size: 0.78rem; }
.asset-detail-notes-row        { align-items: flex-start; }
.asset-detail-warranty-doc     { margin-top: 16px; }
.asset-detail-preventive-meta  { font-size: 0.75rem; }
.asset-detail-hint             { font-size: 0.82rem; }
.asset-detail-ai-icon          { color: #3B82F6; }
.asset-detail-empty-icon       { font-size: 2rem; color: var(--text-muted); opacity: 0.4; }
.asset-detail-empty-text       { color: var(--text-muted); font-size: 0.82rem; margin-top: 8px; }
.asset-detail-hidden           { display: none; }
.asset-detail-loading          { display: none; text-align: center; padding: 32px; }
.asset-detail-loading-text     { color: var(--text-muted); font-size: 0.82rem; margin-top: 12px; }
.asset-detail-spinner-sm       { width: 14px; height: 14px; border-width: 2px; }
.asset-detail-plan-hint        { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; }
.asset-detail-reload-link      { font-weight: 600; }

/* ── Property comparison ──────────────────────── */
.compare-empty-state { padding: 32px; }
.compare-hint { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; }
.compare-actions { display: flex; gap: 8px; margin-top: 12px; }
.compare-loading-body { text-align: center; padding: 32px; }
.compare-spinner { font-size: 1.5rem; color: var(--primary); }
.compare-loading-text { margin-top: 8px; color: var(--text-muted); }
.compare-error-body { padding: 16px; color: var(--danger); }
.compare-ai-loading { text-align: center; padding: 24px; }
.compare-disclaimer-mt { margin-top: 12px; }
.compare-th-right { text-align: right; }
.compare-td-right { text-align: right; }
.compare-error-msg { color: var(--danger); }
.compare-best-wrap { margin-bottom: 12px; }
.compare-best-reason { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; }
.compare-section-heading { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 8px; }
.compare-section-heading-spaced { font-size: 0.82rem; color: var(--text-muted); margin: 12px 0 8px; }

/* ── Legal pages (privacy, terms) ─────────────── */

.legal-page-center {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.legal-card {
    max-width: 800px;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px;
}

.legal-header {
    text-align: center;
    margin-bottom: 32px;
}

.legal-logo {
    margin-bottom: 8px;
}

.legal-title {
    font-size: 1.5rem;
    margin: 0;
}

.legal-subtitle {
    color: var(--text-muted);
    font-size: .85rem;
    margin-top: 8px;
}

.legal-body {
    color: var(--text);
    font-size: .9rem;
    line-height: 1.7;
}

.legal-body h2 {
    font-size: 1.1rem;
    color: var(--gold);
    margin-top: 24px;
}

.legal-body ul {
    padding-left: 20px;
}

.legal-footer {
    text-align: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.legal-back-link {
    color: var(--gold);
    text-decoration: none;
    font-size: .85rem;
}

.legal-content-wrap {
    max-width: 800px;
    margin: 0 auto;
}

.legal-content-title {
    font-size: 1.3rem;
    margin-bottom: 16px;
}

.legal-content-desc {
    color: var(--text-muted);
    font-size: .85rem;
}

/* ── Analytics essential ─────────────────────── */

.analytics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}

.analytics-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.analytics-toolbar-right {
    display: flex;
    gap: 8px;
}

.analytics-notice-body {
    padding: 14px 20px;
}

.analytics-notice-flex {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.analytics-notice-icon {
    color: var(--gold);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.analytics-notice-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.analytics-notice-strong {
    color: var(--text-primary);
}

.analytics-unit-subtitle {
    font-weight: 400;
    font-size: 0.85rem;
}

.analytics-unit-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.analytics-yield-bar-wrap {
    margin-top: 12px;
}

.analytics-yield-bar-track {
    background: var(--border);
    border-radius: 99px;
    height: 7px;
    overflow: hidden;
}

.analytics-yield-bar-fill {
    background: var(--gold);
    height: 100%;
    border-radius: 99px;
}

.analytics-yield-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.analytics-ine-custom-margin {
    margin: 4px 0;
}

.analytics-ine-pct-label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.analytics-irs-card {
    border: 2px solid rgba(212, 188, 122, 0.35);
}

.analytics-property-name {
    display: block;
    font-size: 0.75rem;
}

.analytics-total-row {
    background: var(--bg-body);
    font-weight: 700;
    border-top: 2px solid var(--border);
}

.analytics-empty-cta {
    margin-top: 1rem;
}

/* ── Utility comparator ───────────────────────── */

.utility-unit-label {
    color: var(--text-muted);
    font-weight: 400;
}

.utility-btn-group {
    display: flex;
    gap: 6px;
}

.utility-color-electricity {
    color: #D4BC7A;
}

.utility-color-water {
    color: #3B82F6;
}

.utility-color-gas {
    color: #EBA0A0;
}

.utility-inline-form {
    display: inline;
}

.utility-manual-form {
    display: none;
    margin-bottom: 20px;
}

.utility-manual-box {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.utility-manual-info {
    margin-bottom: 12px;
}

.utility-manual-info-icon {
    color: var(--gold);
}

.utility-form-grid-narrow {
    max-width: 500px;
}

.utility-stats {
    display: none;
    margin-bottom: 16px;
}

.utility-stats-flex {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.utility-chart-wrap {
    display: none;
    margin-bottom: 20px;
    max-height: 300px;
}

.utility-table-wrap {
    display: none;
}

.utility-disclaimer {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: 12px;
}

.utility-loading {
    text-align: center;
    padding: 24px;
    display: none;
}

.utility-loading-icon {
    font-size: 1.5rem;
    color: var(--gold);
}

.utility-loading-text {
    margin-top: 8px;
}

.utility-empty {
    display: none;
}

.utility-modal-hidden {
    display: none;
}

.utility-cheapest-badge {
    font-size: .65rem;
}

.utility-rank {
    color: var(--text-muted);
}

/* ── Dashboard home ──────────────────────────── */

.home-onboarding {
    background: linear-gradient(135deg, #E8E0D0, #F4F0E8);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 32px;
    text-align: center;
}

.home-onboarding-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.home-onboarding-icon i {
    color: var(--gold-dark);
}

.home-onboarding-title {
    color: var(--text-primary);
    margin: 0 0 8px;
    font-size: 24px;
}

.home-onboarding-desc {
    color: var(--text-muted);
    margin: 0 0 24px;
    font-size: 15px;
}

.home-onboarding-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.home-onboarding-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--gold);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: opacity .2s;
}

.home-onboarding-btn-primary:hover {
    opacity: 0.85;
}

.home-onboarding-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-card);
    color: var(--gold-dark);
    border: 1px solid var(--gold);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all .2s;
}

.home-onboarding-btn-secondary:hover {
    background: var(--gold-bg);
}

.home-onboarding-features {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}

.home-onboarding-feature {
    color: var(--text-muted);
    font-size: 13px;
}

.home-onboarding-feature i {
    color: var(--gold-dark);
    margin-right: 6px;
}

.home-flex-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.home-flex-bar-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.home-flex-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.home-card-dashed {
    border: 2px dashed var(--border);
    background: transparent;
}

.home-add-btn {
    margin-top: 1rem;
}

.home-mb-20 {
    margin-bottom: 20px;
}

.home-mt-16 {
    margin-top: 16px;
}

.home-icon-gold {
    color: var(--gold);
}

.home-equip-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 10px;
}

.home-rental-pending {
    margin-left: auto;
    background: rgba(235, 160, 160, 0.2);
    color: var(--danger);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
}

.home-rental-tenant {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.home-rental-tenant-icon {
    color: var(--success);
}

.home-rental-rent {
    margin-left: auto;
    font-weight: 700;
    color: var(--gold);
}

.home-rental-vacant {
    font-size: 0.78rem;
    color: var(--danger);
    margin-top: 6px;
}

.home-table-total {
    background: var(--bg-body);
    font-weight: 700;
    border-top: 2px solid var(--border);
}

.home-table-subtext {
    display: block;
    font-size: 0.75rem;
}

.home-card-body-flush {
    padding: 0;
}

.home-year-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* AI results (dashboard) */
.home-ai-loading {
    display: none;
    text-align: center;
    padding: 16px;
}

.home-ai-spinner {
    color: var(--primary);
}

.home-ai-loading-text {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-left: 8px;
}

.home-ai-error {
    display: none;
    padding: 12px;
    background: rgba(235, 160, 160, 0.1);
    border-radius: var(--radius);
    color: var(--danger);
    font-size: 0.82rem;
    margin-top: 12px;
}

.home-ai-result {
    display: none;
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.home-ai-result-title {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.home-ai-trends {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.home-ai-comparison {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.home-ai-savings {
    margin-top: 8px;
}

.home-ai-summary {
    margin-top: 8px;
    padding: 10px;
    background: var(--bg-body);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Cash flow prediction */
.home-cashflow-alerts {
    margin-top: 16px;
}

.home-cashflow-summary {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-body);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.home-cashflow-disclaimer {
    margin-top: 12px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
}

.home-cashflow-loading-body {
    text-align: center;
    padding: 32px;
}

.home-cashflow-loading-icon {
    font-size: 1.5rem;
    color: var(--primary);
}

.home-cashflow-loading-text {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.home-cashflow-error-body {
    padding: 16px;
    color: var(--danger);
    font-size: 0.85rem;
}

/* ── Contract tab ────────────────────────────── */

.contract-info-banner {
    padding: 10px 14px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 4px;
}

.contract-info-icon {
    color: var(--primary);
    margin-right: 4px;
}

.contract-flex-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.contract-preline {
    white-space: pre-line;
}

.contract-deposit-paid {
    color: var(--success);
    font-size: 0.75rem;
}

.contract-inline-form {
    display: inline;
    margin-left: 8px;
}

.contract-pending-row {
    background: rgba(235, 160, 160, 0.08);
    border-radius: 6px;
    padding: 8px 4px;
}

.contract-danger-label {
    color: var(--danger);
    font-weight: 600;
}

.contract-flex-center {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contract-muted-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.contract-legal-basis {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.contract-verify-note {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
}

.contract-spinner-icon {
    font-size: 1.5rem;
    color: var(--primary);
}

.contract-loading-text {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.contract-rent-loading {
    text-align: center;
    padding: 24px;
}

.contract-rent-error {
    padding: 12px;
    background: rgba(235, 160, 160, 0.1);
    border-radius: var(--radius);
    color: var(--danger);
    font-size: 0.85rem;
}

.contract-history-heading {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.contract-rent-history {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.contract-docs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contract-checklist-heading {
    font-size: 0.88rem;
    margin-bottom: 12px;
}

.contract-checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    margin-bottom: 16px;
}

.contract-checklist-summary {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.contract-disclaimer-box {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.contract-disclaimer-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.5;
}

.contract-disclaimer-checkbox {
    margin-top: 3px;
    flex-shrink: 0;
}

.contract-gen-loading {
    text-align: center;
    padding: 40px 20px;
}

.contract-gen-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

.contract-gen-loading-text {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.contract-gen-loading-subtext {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.contract-editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.contract-version-info {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.contract-editor-buttons {
    display: flex;
    gap: 8px;
}

.contract-textarea {
    width: 100%;
    min-height: 500px;
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-body);
    color: var(--text-primary);
    resize: vertical;
}

.contract-editor-help {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.contract-highlight {
    color: #E67E22;
    font-weight: 600;
}

.contract-empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.contract-empty-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    display: block;
    opacity: 0.3;
}

.contract-empty-subtext {
    font-size: 0.75rem;
}

.contract-empty-form {
    margin-top: 1rem;
}

/* ── Contract tab ────────────────────────────── */

.contract-action-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.contract-receipts-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.contract-draft-active {
    border-color: var(--gold);
    background: rgba(212, 188, 122, 0.08);
}

.contract-draft-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 8px;
}

.contract-draft-chevron {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.contract-checklist-success {
    color: var(--success);
}

.contract-checklist-section {
    grid-column: 1 / -1;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-primary);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .contract-textarea {
        min-height: 300px;
        font-size: 0.78rem;
        padding: 10px;
    }
    .contract-checklist-grid {
        grid-template-columns: 1fr;
    }
    .contract-editor-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================================================================
   PROPERTY FORM — .prop-form-*
   ================================================================ */
.prop-form-section-mt { margin-top: 20px; }
.prop-form-section-mt-sm { margin-top: 16px; }
.prop-form-optional-label { font-weight: 400; font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.prop-form-full-col { grid-column: 1 / -1; }
.prop-form-info-box {
    margin-top: 20px;
    padding: 12px 16px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.prop-form-info-icon { color: var(--primary); margin-right: 4px; }
.prop-form-subsection-label { margin-top: 16px; font-size: 0.65rem; }
.prop-form-household-col { grid-column: 1 / -1; }

/* ================================================================
   PROPERTY SUMMARY TAB — .prop-summary-*
   ================================================================ */
.prop-summary-flex-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.prop-summary-loading { text-align: center; padding: 24px; }
.prop-summary-loading-icon { font-size: 1.5rem; color: var(--primary); }
.prop-summary-loading-text { margin-top: 8px; color: var(--text-muted); font-size: 0.85rem; }
.prop-summary-chart-wrap { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.prop-summary-chart-title { font-size: 0.85rem; margin-bottom: 8px; color: var(--text-muted); }
.prop-summary-ins-type { font-size: 0.78rem; margin-left: 8px; }
.prop-summary-small-block { font-size: 0.75rem; display: block; }
.prop-summary-text-right { text-align: right; }
.prop-summary-empty { padding: 24px; }
.prop-summary-cost-total { border-top: 2px solid var(--border); margin-top: 4px; padding-top: 8px; }
.prop-summary-loan-bank { font-size: 0.78rem; margin-left: 8px; }

/* ================================================================
   ADMIN RGPD — .admin-rgpd-*
   ================================================================ */
.admin-rgpd-stats-col { display: flex; flex-direction: column; gap: 12px; }
.admin-rgpd-stat-row { display: flex; justify-content: space-between; font-size: .85rem; }
.admin-rgpd-stat-label { color: var(--text-muted); }
.admin-rgpd-cell { font-size: .8rem; }
.admin-rgpd-cell-muted { font-size: .8rem; color: var(--text-muted); }
.admin-rgpd-badge {
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 10px;
}
.admin-rgpd-badge-delete { background: rgba(231,76,60,.15); color: #e74c3c; }
.admin-rgpd-badge-export { background: rgba(52,152,219,.15); color: #3498db; }
.admin-rgpd-badge-other { background: rgba(168,197,168,.15); color: var(--success); }
.admin-rgpd-icon-success { color: var(--success); }
.admin-rgpd-icon-danger { color: var(--danger, #e74c3c); }
.admin-rgpd-empty { color: var(--text-muted); font-size: .85rem; text-align: center; padding: 20px; }

/* ================================================================
   WEALTH — .wealth-*  (extending existing wealth styles)
   ================================================================ */
.wealth-chart-body { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.wealth-chart-canvas { max-height: 240px; max-width: 320px; }
.wealth-income-body { min-height: 260px; }
.wealth-income-canvas { max-height: 240px; }
.wealth-sub-label { display: block; font-size: 0.73rem; }
.wealth-badge-own { background: rgba(59,130,246,0.1); color: #3B82F6; }
.wealth-badge-rental { background: rgba(212,188,122,0.1); color: var(--gold); }
.wealth-pct-small { font-size: 0.72rem; }
.wealth-total-row { font-weight: 700; background: var(--bg-body); }
.wealth-empty-cta { margin-top: 1rem; }
.wealth-prop-flex { flex: 1; }
.wealth-prop-sub { display: block; font-size: 0.75rem; }
.wealth-metric-value-sm { font-size: 0.85rem; }
.wealth-appreciation-hint { color: var(--success); font-size: 0.65rem; }

/* ================================================================
   ASSET FORM — .asset-form-*
   ================================================================ */
.asset-form-scan-icon { font-size: 1.5rem; color: var(--primary); }
.asset-form-scan-title { margin: 8px 0 4px; font-weight: 600; font-size: 0.88rem; }
.asset-form-scan-hint { font-size: 0.75rem; color: var(--text-muted); }
.asset-form-ai-robot { font-size: 0.65rem; }
.asset-form-doc-icon { color: var(--success); }
.asset-form-doc-hint { margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); }
.asset-form-file-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.asset-form-recs-section { border: none; padding-top: 8px; }
.asset-form-desc { margin: 4px 0 8px; }
.asset-form-energy { margin-top: 8px; }
.asset-form-spinner { border-top-color: var(--primary); border-color: rgba(59,130,246,0.2); }

/* ================================================================
   ADMIN PAYMENTS — .admin-pay-*
   ================================================================ */
.admin-pay-kpi-success { background: rgba(39,174,96,.15); color: var(--success); }
.admin-pay-kpi-purple { background: rgba(155,89,182,.15); color: #9b59b6; }
.admin-pay-cell { font-size: .8rem; }
.admin-pay-cell-gold { font-size: .8rem; color: var(--gold); }
.admin-pay-cell-muted { font-size: .8rem; color: var(--text-muted); }
.admin-pay-status-badge {
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 10px;
}
.admin-pay-status-active { background: rgba(39,174,96,.15); color: var(--success); }
.admin-pay-status-trial { background: rgba(52,152,219,.15); color: #3498db; }
.admin-pay-status-inactive { background: rgba(168,168,168,.15); color: var(--text-muted); }
.admin-pay-status-succeeded { background: rgba(39,174,96,.15); color: var(--success); }
.admin-pay-status-simulated { background: rgba(155,89,182,.15); color: #9b59b6; }
.admin-pay-status-failed { background: rgba(231,76,60,.15); color: #e74c3c; }
.admin-pay-status-refunded { background: rgba(52,152,219,.15); color: #3498db; }
.admin-pay-empty { color: var(--text-muted); font-size: .85rem; text-align: center; padding: 20px; }

/* ================================================================
   ADMIN UTILITY PROVIDERS — .admin-util-*
   ================================================================ */
.admin-util-actions { display: flex; gap: 8px; }
.admin-util-filters { display: flex; gap: 6px; margin-bottom: 16px; }
.admin-util-electricity { color: #D4BC7A; }
.admin-util-water { color: #3B82F6; }
.admin-util-gas { color: #EBA0A0; }
.admin-util-cell-muted { font-size: .8rem; }
.admin-util-cell-nowrap { white-space: nowrap; }
.admin-util-form-inline { display: inline; }
.admin-util-pre { white-space: pre-wrap; font-size: .85rem; line-height: 1.6; }

/* ================================================================
   ADMIN EMAILS — .admin-email-*
   ================================================================ */
.admin-email-kpi-success { background: rgba(39,174,96,.15); color: var(--success); }
.admin-email-kpi-purple { background: rgba(155,89,182,.15); color: #9b59b6; }
.admin-email-kpi-danger { background: rgba(231,76,60,.15); color: #e74c3c; }
.admin-email-header-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-email-controls { display: flex; gap: 8px; align-items: center; }
.admin-email-filter { width: auto; font-size: .8rem; padding: 4px 8px; }
.admin-email-process-btn { font-size: .8rem; }
.admin-email-cell { font-size: .8rem; }
.admin-email-cell-nowrap { font-size: .8rem; white-space: nowrap; }
.admin-email-cell-muted { font-size: .8rem; color: var(--text-muted); }
.admin-email-status-badge {
    font-size: .7rem;
    padding: 2px 8px;
    border-radius: 10px;
}
.admin-email-status-sent { background: rgba(39,174,96,.15); color: var(--success); }
.admin-email-status-queued { background: rgba(52,152,219,.15); color: #3498db; }
.admin-email-status-logged { background: rgba(155,89,182,.15); color: #9b59b6; }
.admin-email-status-failed { background: rgba(231,76,60,.15); color: #e74c3c; }
.admin-email-error-hint { cursor: help; color: var(--text-muted); font-size: .75rem; }
.admin-email-empty { color: var(--text-muted); font-size: .85rem; text-align: center; padding: 20px; }

/* ================================================================
   RGPD DELETE — .rgpd-*
   ================================================================ */
.rgpd-back-margin { margin-bottom: 12px; }
.rgpd-card-narrow { max-width: 580px; }
.rgpd-title-danger { color: var(--danger, #e74c3c); }
.rgpd-danger-box {
    background: rgba(231,76,60,.1);
    border: 1px solid rgba(231,76,60,.3);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}
.rgpd-danger-text { font-size: .85rem; color: var(--danger, #e74c3c); margin: 0; font-weight: 600; }
.rgpd-danger-sub { font-size: .8rem; color: var(--text-muted); margin: 8px 0 0; }
.rgpd-list-title { font-size: .85rem; margin-bottom: 4px; }
.rgpd-list {
    font-size: .85rem;
    padding-left: 20px;
    margin-bottom: 20px;
    color: var(--text-muted);
}
.rgpd-export-hint { font-size: .85rem; margin-bottom: 16px; }
.rgpd-export-icon { color: var(--gold); }
.rgpd-export-link { color: var(--gold); text-decoration: underline; }
.rgpd-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.rgpd-delete-btn {
    background: var(--danger, #e74c3c);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
}

/* ================================================================
   PRICING — .pricing-*
   ================================================================ */
.pricing-auth-page { display: flex; justify-content: center; padding: 40px 20px; }
.pricing-auth-container { max-width: 900px; width: 100%; }
.pricing-auth-header { text-align: center; margin-bottom: 32px; }
.pricing-auth-logo { margin-bottom: 8px; }
.pricing-auth-title { font-size: 1.5rem; margin: 0; }
.pricing-auth-subtitle { color: var(--text-muted); font-size: .85rem; margin-top: 8px; }
.pricing-auth-footer { text-align: center; margin-top: 24px; }
.pricing-auth-link { color: var(--gold); text-decoration: none; font-size: .85rem; }
.pricing-container { max-width: 900px; margin: 0 auto; }
.pricing-current-plan { text-align: center; margin-bottom: 24px; }
.pricing-current-text { color: var(--text-muted); font-size: .85rem; }
.pricing-plan-highlight { color: var(--gold); }
.pricing-trial-warning { color: var(--warning); }

/* ================================================================
   SIMULATE PAYMENT — .sim-*
   ================================================================ */
.sim-back-margin { margin-bottom: 12px; }
.sim-card-narrow { max-width: 500px; margin: 0 auto; }
.sim-info-box {
    background: rgba(155,89,182,.1);
    border: 1px solid rgba(155,89,182,.3);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 20px;
}
.sim-info-title { font-size: .85rem; color: #9b59b6; margin: 0; }
.sim-info-text { font-size: .8rem; color: var(--text-muted); margin: 8px 0 0; }
.sim-summary-box {
    background: var(--bg-body);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 20px;
}
.sim-summary-row { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 8px; }
.sim-summary-price { color: var(--gold); font-weight: 600; }
.sim-summary-extra { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text-muted); }
.sim-summary-total {
    border-top: 1px solid var(--border);
    margin-top: 12px;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    font-weight: 600;
}
.sim-total-value { color: var(--gold); }
.sim-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ================================================================
   ADMIN USER DETAIL — .admin-user-*
   ================================================================ */
.admin-user-badge-mr { margin-right: 8px; }
.admin-user-actions { display: flex; gap: 8px; }
.admin-user-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.admin-user-detail-label {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-muted);
}
.admin-user-detail-value {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.admin-user-detail-label-last {
    padding: 8px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.admin-user-detail-value-last {
    padding: 8px 0;
    font-size: 0.85rem;
}
.admin-user-unit-sub { display: block; font-size: 0.75rem; }

/* ================================================================
   PROPERTY PHOTOS TAB — .prop-photos-*
   ================================================================ */
.prop-photos-count { font-size: .8rem; }
.prop-photos-select-label { color: var(--gold); cursor: pointer; text-decoration: underline; }
.prop-photos-hint { font-size: .75rem; }
.prop-photos-progress { margin: 12px 0; }
.prop-photos-progress-inner { display: flex; align-items: center; gap: 10px; }
.prop-photos-spinner { color: var(--gold); }
.prop-photos-errors { margin: 8px 0; }

/* ── Tenant portal ──────────────────────────── */

.tenant-hero-mb {
    margin-bottom: 24px;
}

.tenant-deposit-pending {
    color: var(--warning);
    font-size: 0.75rem;
}

.tenant-contract-alert-mt {
    margin-top: 16px;
}

.tenant-mr-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tenant-mr-item {
    padding: 14px;
    background: var(--bg-body);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.tenant-mr-info {
    flex: 1;
}

.tenant-mr-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.tenant-mr-title {
    font-weight: 600;
}

.tenant-mr-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.tenant-mr-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.tenant-empty-cta {
    margin-top: 1rem;
}

.tenant-paid-label {
    font-size: 0.75rem;
}

.tenant-sim-note {
    font-size: 0.75rem;
}

/* ================================================================
   UTILITY CLASSES — reusable micro-classes
   ================================================================ */
.text-sm-muted       { font-size: 0.78rem; color: var(--text-muted); }
.text-xs-muted       { font-size: 0.75rem; color: var(--text-muted); }
.text-xxs-muted      { font-size: 0.72rem; color: var(--text-muted); }
.text-desc           { font-size: 0.85rem; color: var(--text-muted); }
.text-desc-block     { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px; }
.font-sm             { font-size: 0.85rem; }
.font-xs             { font-size: 0.82rem; }
.font-xxs            { font-size: 0.75rem; }
.nowrap              { white-space: nowrap; }
.d-inline            { display: inline; }
.d-block             { display: block; }
.block-xs-muted      { font-size: 0.75rem; display: block; color: var(--text-muted); }
.block-xxs-muted     { font-size: 0.72rem; display: block; color: var(--text-muted); }
.mt-1                { margin-top: 1rem; }
.mb-12               { margin-bottom: 12px; }
.p-lg                { padding: 32px; }
.p-xl                { padding: 48px; }
.flex-gap-8          { display: flex; gap: 8px; align-items: center; }
.flex-gap-4          { display: flex; gap: 4px; align-items: center; }
.flex-gap-6          { display: flex; gap: 6px; }
.flex-wrap-gap-8     { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flex-col-gap-8      { display: flex; flex-direction: column; gap: 8px; }
.flex-col-gap-10     { display: flex; flex-direction: column; gap: 10px; }
.flex-end-gap-8      { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.flex-end-gap-12     { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.card-narrow         { max-width: 580px; margin: 0 auto; }
.card-narrow-md      { max-width: 600px; margin: 0 auto; }
.card-narrow-lg      { max-width: 620px; margin: 0 auto; }
.card-narrow-xl      { max-width: 640px; margin: 0 auto; }
.card-narrow-sm      { max-width: 560px; margin: 0 auto; }
.card-narrow-500     { max-width: 500px; margin: 0 auto; text-align: center; }

/* ================================================================
   PAGINATION PARTIAL — .pagination-*
   ================================================================ */
.pagination-wrapper       { display: flex; justify-content: center; gap: 4px; margin: 24px 0 8px; }
.pagination-btn           { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text-muted); text-decoration: none; font-size: 13px; border: 1px solid var(--border); transition: all .2s; }
.pagination-btn:hover     { border-color: var(--gold); color: var(--gold-dark); }
.pagination-btn-active    { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--gold); color: var(--bg-white); font-weight: 700; font-size: 13px; }
.pagination-ellipsis      { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--text-muted); font-size: 13px; }

/* ================================================================
   TRANSACTIONS — .txn-*
   ================================================================ */
.txn-header-count  { font-size: 0.8rem; font-weight: 400; }
.txn-unit-name     { font-size: 0.82rem; }

/* ================================================================
   ASSETS / MAINTENANCE — .assets-*
   ================================================================ */
.assets-serial     { font-size: 0.75rem; }
.assets-notes-row  { align-items: flex-start; }
.assets-notes-text { font-size: 0.78rem; color: var(--text-muted); }
.assets-warranty-mt { margin-top: 8px; }
.assets-add-doc-dim { opacity: 0.6; }
.assets-filter-bar { margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.assets-color-gold { color: var(--gold); }

/* ================================================================
   ALERTS — .alert-hist-*, .alert-*
   ================================================================ */
.alert-hist-item      { opacity: 0.7; border-left-color: var(--success); }
.alert-hist-icon      { background: rgba(39,174,96,0.12); color: var(--success); }
.alert-hist-title     { text-decoration: line-through; }
.alert-hist-resolved  { font-size: 0.68rem; color: var(--success); font-weight: 600; }
.alert-hist-next      { font-size: 0.68rem; color: #3B82F6; font-weight: 500; }
.alert-empty-icon     { color: var(--text-muted); font-size: 2rem; }
.alert-empty-title    { margin-top: 12px; }
.alert-ok-icon        { color: var(--success); font-size: 2.5rem; }

/* ================================================================
   RGPD — .rgpd-*
   ================================================================ */
.rgpd-info-box        { background: var(--bg-body); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 16px; }
.rgpd-info-text       { font-size: .85rem; color: var(--text-muted); margin: 0; }
.rgpd-info-icon       { color: var(--gold); }
.rgpd-includes        { font-size: .85rem; margin-bottom: 16px; }
.rgpd-confirm-label   { font-size: .75rem; color: var(--text-muted); }
.rgpd-actions         { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ================================================================
   DOCUMENTS — .doc-*
   ================================================================ */
.doc-upload-icon      { font-size: 2rem; color: var(--gold); margin-bottom: 8px; }
.doc-checkbox-row     { display: flex; align-items: center; gap: 10px; padding-top: 28px; }
.doc-checkbox         { width: 18px; height: 18px; accent-color: var(--gold); }
.doc-checkbox-label   { margin: 0; cursor: pointer; font-size: 0.88rem; }
.doc-filter-bar       { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.doc-shared-badge     { margin-top: 4px; }
.doc-shared-badge .badge-tenant-active { font-size: 0.7rem; }
.doc-file-info        { padding: 10px; background: var(--bg-body); border-radius: 8px; font-size: 0.85rem; color: var(--text-muted); }
.doc-edit-actions     { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }

/* ================================================================
   REPORTS — .reports-*
   ================================================================ */
.reports-filter-bar   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reports-year-label   { font-size: 0.82rem; color: var(--text-muted); }
.reports-year-btns    { display: flex; gap: 8px; flex-wrap: wrap; }

/* ================================================================
   RECEIPTS — .receipt-*
   ================================================================ */
.receipt-info-box     { padding: 10px 14px; background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; }
.receipt-info-icon    { color: var(--primary); margin-right: 4px; }
.receipt-property     { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); padding: 8px 0; }
.receipt-form-actions { display: flex; gap: 8px; margin-top: 20px; justify-content: flex-end; }

/* ================================================================
   LANDING & AUTH — .landing-*, .login-*, .register-*
   ================================================================ */
.landing-cta-col     { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.landing-btn-primary { text-align: center; text-decoration: none; }
.landing-btn-outline { text-align: center; text-decoration: none; background: transparent; border: 2px solid #D4BC7A; color: #D4BC7A; }
.register-optional   { font-size: 0.75rem; color: var(--text-muted); }
.register-privacy    { margin-top: 8px; }
.register-privacy label { display: flex; align-items: flex-start; gap: 8px; font-size: .8rem; cursor: pointer; }
.register-privacy input { margin-top: 3px; }
.register-privacy a  { color: var(--gold); text-decoration: underline; }

/* ================================================================
   PREVENTIVE DASHBOARD — .preventive-*
   ================================================================ */
.preventive-modal-desc { margin-bottom: 16px; color: var(--text-muted); }
.preventive-new-form   { border-bottom: 1px solid var(--border); }

/* ================================================================
   PAYMENTS — .payment-*
   ================================================================ */
.payment-success-card { max-width: 500px; margin: 0 auto; text-align: center; }
.payment-success-body { padding: 40px; }
.payment-success-icon { font-size: 3rem; color: var(--success); margin-bottom: 16px; }
.payment-success-title { font-size: 1.3rem; margin: 0 0 8px; }
.payment-success-desc { color: var(--text-muted); font-size: .85rem; margin-bottom: 24px; }

/* ================================================================
   PROPERTIES — .prop-detail-*, .prop-list-*, .prop-fin-*, .prop-maint-*
   ================================================================ */
.prop-detail-badges   { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tab-badge-danger     { background: var(--danger); }
.prop-detail-actions  { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.prop-list-header     { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.prop-list-empty      { text-align: center; padding: 60px 20px; }
.prop-list-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.3; }
.prop-list-empty-title { margin-bottom: 8px; color: var(--text-muted); }
.prop-list-empty-desc { margin-bottom: 24px; }
.prop-fin-ml-auto     { margin-left: auto; }
.prop-maint-mr-item   { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-body); border-radius: 8px; }
.prop-maint-mr-body   { flex: 1; }
.prop-maint-mr-desc   { font-size: 0.78rem; color: var(--text-muted); }
.prop-maint-mr-date   { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }

/* ================================================================
   ADMIN — .admin-*
   ================================================================ */
.admin-span2          { grid-column: span 2; }
.admin-role-col       { display: flex; flex-direction: column; gap: 10px; }
.admin-role-row       { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.admin-user-cell      { display: flex; align-items: center; gap: 8px; }
.admin-actions-cell   { display: flex; gap: 6px; }
.admin-role-mt        { margin-top: 8px; }
.admin-vip-icon       { color: var(--gold); }

/* small select min-width (export year, etc.) */
.select-min-90        { min-width: 90px; }
.ml-6                 { margin-left: 6px; }
.mt-4                 { margin-top: 4px; }