/* basic page style */
body{
    font-family: Arial, sans-serif;
    background:#f3f4f6;
    margin:0;
}

/* center login page */
.login-page{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}

/* login card */
.login-card{
    background:white;
    width:350px;
    padding:30px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

/* logo */
.logo{
    width:60px;
    margin-bottom:10px;
}

/* inputs */
.login-card input{
    width:100%;
    padding:10px;
    margin:10px 0;
    border:1px solid #ddd;
    border-radius:6px;
}

/* button */
.login-card button{
    width:100%;
    padding:10px;
    background:#5b21b6;
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

/* demo credentials */
.demo{
    margin-top:15px;
    font-size:14px;
    color:#555;
}
/* navbar */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 30px;
background:white;
}

.logo-box{
display:flex;
align-items:center;
gap:10px;
}

.logo-box img{
width:30px;
}

/* search */

.search-box input{
padding:8px;
}

.search-box button{
padding:8px 12px;
background:#5b21b6;
color:white;
border:none;
}

/* tabs */

.tabs{
margin:20px;
}

.tab{
padding:8px 16px;
border:none;
background:#e2e8f0;
margin-right:10px;
cursor:pointer;
}

.tab.active{
background:#5b21b6;
color:white;
}

/* header */

.issue-header{
display:flex;
justify-content:space-between;
align-items:center;
margin:20px;
}

.issue-header img{
width:20px;
margin-right:5px;
}

/* grid */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
padding:20px;
}
/* issue card */

.card{
background:white;
padding:15px;
border-radius:8px;
cursor:pointer;
border-top:5px solid transparent;
}

.card.open{
border-top:5px solid green;
}

.card.closed{
border-top:5px solid purple;
}
/* modal */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:none;
justify-content:center;
align-items:center;
}

.modal-content{
background:white;
padding:25px;
width:400px;
border-radius:8px;
}
/* loading spinner */

.loading{
text-align:center;
padding:20px;
display:none;
}
.subtitle{
color:#666;
font-size:14px;
margin-bottom:15px;
}
.search-box button{
margin-left:8px;
}