/* Tenants module styles — compact, modern, responsive */
:root{
    --primary:var(--color-primary);
    --muted:var(--color-text-muted);
    --card-bg:var(--color-surface);
    --panel-bg:var(--color-surface-muted);
    --accent:var(--color-accent);
    --radius:10px;
}

/* Theme variants: add classes `.theme-light` and `.theme-dark` to toggle */
.theme-light{ /* mostly default, slightly brighter */
    --primary:var(--color-primary);
    --muted:var(--color-text-muted);
    --card-bg:var(--color-surface);
    --panel-bg:var(--color-surface-muted);
    --accent:var(--color-accent);
    --radius:10px;
}
.theme-dark{
    --primary:#60a5fa;
    --muted:#9ca3af;
    --card-bg:#0b1220;
    --panel-bg:#071025;
    --accent:#06b6d4;
    --radius:10px;
}

/* Useful helper to apply theme to a container */
.tenants-theme{
    background:var(--card-bg);
    color:var(--muted);
}

/* Form grid used in tenants modals */
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(140px,1fr));
    gap:12px 16px;
    align-items:center;
}
.form-grid label{font-size:0.85rem;color:var(--muted);margin-bottom:4px;display:block}
.form-grid input,.form-grid select,.form-grid textarea{
    border:1px solid #e6edf3;padding:8px;border-radius:6px;background:#fff;font-size:0.95rem;width:100%;box-sizing:border-box
}

/* Lease summary panel */
.lease-summary{
    background:linear-gradient(180deg,var(--card-bg),var(--panel-bg));
    border-radius:var(--radius);
    padding:14px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 1px 12px rgba(2,6,23,0.04);
}
.lease-summary h5{margin:0 0 8px 0;font-size:1.05rem}
.lease-summary .meta{font-size:0.9rem;color:var(--muted);margin-bottom:8px}
.lease-summary .meta strong{color:#111827}
.lease-summary .actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lease-summary .actions .btn{justify-content:flex-start}

/* Tenant table styles */
.tenants-table{width:100%;border-collapse:collapse}
.tenants-table th{font-weight:600;text-align:left;padding:10px 8px;background:#fbfdff;border-bottom:1px solid #f1f5f9}
.tenants-table td{padding:10px 8px;border-bottom:1px solid #f8fafc}
.tenant-row:hover{background:#ffffff}

.tenant-badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#1e3a8a;font-weight:600;font-size:0.8rem}

/* Action buttons compact */
.tenant-action-btn{padding:6px 8px;font-size:0.85rem;border-radius:8px}
.tenant-action-group{display:flex;gap:8px}

/* Raw JSON container */
#raw-edit-container textarea,#lease-raw-json{font-family:Menlo,monospace;font-size:12px;background:#0f172a;color:#e6eef8}

/* Utility */
.small-muted{font-size:0.85rem;color:var(--muted)}

/* Responsive: stack form on narrow screens */
@media (max-width:800px){
    .form-grid{grid-template-columns:1fr}
    .lease-summary{margin-bottom:12px}
}

/* Make modal content more airy */
.swal2-popup{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}

/* Subtle transitions to make interactions feel smoother */
.tenants-table td, .tenants-table th{transition:background-color 160ms ease, color 160ms ease}
.tenant-action-btn{transition:transform 120ms ease, box-shadow 120ms ease}
.tenant-action-btn:hover{transform:translateY(-2px)}

/* Dark theme tweaks for contrast */
.theme-dark .tenants-table th{background:transparent;color:var(--muted);border-bottom:1px solid rgba(255,255,255,0.04)}
.theme-dark .tenants-table td{border-bottom:1px solid rgba(255,255,255,0.03);color:#cbd5e1}
.theme-dark .lease-summary .meta strong{color:#e6eef8}

/* Renter hero and quick action styles */
.renter-hero{
    display:flex;align-items:center;justify-content:space-between;padding:22px;border-radius:12px;margin-bottom:18px;background:linear-gradient(90deg, rgba(59,130,246,0.06), rgba(6,182,212,0.03));box-shadow:0 6px 20px rgba(2,6,23,0.03);
}
.renter-hero__content{flex:1;padding-right:12px}
.renter-hero__title{font-size:1.35rem;margin:0 0 6px 0;font-weight:700;color:var(--primary)}
.renter-hero__subtitle{color:var(--muted);margin:0}
.renter-hero__actions{display:flex;gap:10px}

/* Quick nav button restyle for renter */
.btn-property-details,.btn-rent-info,.btn-agreement,.btn-photos,.btn-owner-contact{
    text-align:left;padding:14px 12px;border-radius:10px;background:#fff;border:1px solid #eef3f7;box-shadow:0 6px 18px rgba(2,6,23,0.03);display:flex;align-items:center;gap:10px;color:#0f172a;
}
.btn-property-details i,.btn-rent-info i,.btn-agreement i,.btn-photos i,.btn-owner-contact i{font-size:1.05rem;color:var(--primary)}
.btn-property-details:hover,.btn-rent-info:hover,.btn-agreement:hover,.btn-photos:hover,.btn-owner-contact:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(2,6,23,0.06)}

@media (max-width:900px){
    .renter-hero{flex-direction:column;align-items:flex-start}
    .renter-hero__actions{width:100%;flex-wrap:wrap}
}

/* Owner hero tweaks */
.owner-hero{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:18px;border-radius:12px;margin-bottom:18px;background:linear-gradient(90deg, rgba(37,99,235,0.06), rgba(6,182,212,0.03));box-shadow:0 8px 26px rgba(2,6,23,0.04)}
.owner-hero__content{flex:1}
.owner-hero__greeting{font-size:1.25rem;color:var(--primary);margin:0}
.owner-hero__subtitle{color:var(--muted);margin:4px 0 0 0}
.owner-hero__actions{display:flex;gap:10px}
.owner-hero .hero-stat-card{background:linear-gradient(180deg, #fff, var(--panel-bg));border-radius:10px;padding:12px;box-shadow:0 6px 18px rgba(2,6,23,0.03)}
@media (max-width:1000px){.owner-hero{flex-direction:column;align-items:flex-start}.owner-hero__actions{width:100%;flex-wrap:wrap}}