*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{
background:#faf9f6;
}

#app{
display:none;
}

/* LOGIN */

#loginPage{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.loginBox{
width:500px;
background:white;
padding:40px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.loginBox h1{
margin-bottom:10px;
}

.loginBox p{
margin-bottom:20px;
color:#666;
}

input{
width:100%;
padding:14px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:10px;
}

button{
width:100%;
padding:14px;
background:#d4b88f;
border:none;
border-radius:10px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

button:hover{
background:#bea178;
}

#error{
color:red;
margin-top:10px;
}

/* SIDEBAR */

.sidebar{
color:white;
position:fixed;
left:0;
top:0;
bottom:0;
width:250px;
background:#1c2939;
box-shadow:2px 0 15px rgba(0,0,0,.08);
padding:30px;
}

.sidebar h2{
margin-bottom:40px;
}

.sidebar ul{
list-style:none;
}

.sidebar li{
padding:15px;
border-radius:10px;
cursor:pointer;
margin-bottom:8px;
}

.sidebar li:hover,
.active{
background:#366bd4;
}

.content{
margin-left:280px;
padding:40px;
}

/* DASHBOARD */

.page {
margin-left:260px;
padding: 10px;
background: white;
}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:30px;
}

.card{
background:white;
padding:25px;
border-radius:18px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.card h3 {
    font-weight: 500;
}

.card span{
font-size:30px;
font-weight:bold;
color:#black;
}

.object-card{
    background:white;
    padding:20px;
    border-radius:15px;
    margin-top:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.object-card h3{
    margin-bottom:10px;
}

.object-card button{
    margin-top:10px;
    background:#c94f4f;
    color:white;
}

/* immobilienPage */

.actionBar{
    display:flex;
    gap:15px;
    margin-top:20px;
}

.actionBar input{
    flex:1;
}

.propertyFormBox{
    background:white;
    padding:20px;
    border-radius:15px;
    margin-top:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.hidden{
    display:none;
}

.propertyFormBox input{
    margin-top:10px;
}

.page{
    display:none;
}

.page.active{
    display:block;
}

.small-btn{
    width:120px;
}

.object-img{
    width:40%;
    height:180px;
    object-fit:cover;
    border-radius:12px;
    margin-bottom:10px;
}

.object-logo-dashboard{
    display: block;
    width:40%;
    height:180px;
    object-fit:cover;
    border-radius:12px;
    margin:0 auto 10px auto;
}

/* renterPage */
.renters{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:30px;
}

.rent{
display: flex;
align-items: center;
gap: 15px;
background:white;
padding:25px;
border-radius:2px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.rent h3 {
    font-weight: 500;
}

.rent span{
font-size:30px;
font-weight:bold;
color:#black;
}

.object-rent {
    background:white;
    padding:20px;
    border-radius:2px;
    margin-top:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.object-rent h3{
    margin-bottom:10px;
}

.object-rent button{
    margin-top:10px;
    background:#c94f4f;
    color:white;
}

.rent-icon-renters{
      width: 50px;
      height: 50px;
      padding: 10px;
      background: #cadde8;
      border-radius: 12px;
      margin-bottom: 15px;
}

.rent-icon-house{
      width: 50px;
      height: 50px;
      padding: 10px;
      background: #b5ebc1;
      border-radius: 12px;
      margin-bottom: 15px;
}

.rent-icon-monthlyrent{
      width: 50px;
      height: 50px;
      padding: 10px;
      background: #f0c39c;
      border-radius: 12px;
      margin-bottom: 15px;
}

.rent-icon-agreements{
      width: 50px;
      height: 50px;
      padding: 10px;
      background: #d4a2f2;
      border-radius: 12px;
      margin-bottom: 15px;
}