:root {

    --primary: #4F46E5;
    --primary-hover: #4338CA;

    --bg-light: #F3F4F6;

    --card-bg: #FFFFFF;

    --text-dark: #1F2937;

}


* {
    box-sizing:border-box;
}


body {

    font-family:
        'Segoe UI',
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background-color:
        var(--bg-light);

    color:
        var(--text-dark);

    margin:0;

    padding:0;

}


.container {

    max-width:1200px;

    margin:40px auto;

    padding:20px;

}


.card {

    background:
        var(--card-bg);

    padding:30px;

    border-radius:12px;

    box-shadow:
        0 4px 6px -1px
        rgba(0,0,0,.10),

        0 2px 4px -1px
        rgba(0,0,0,.06);

    margin-bottom:20px;

}


h2 {

    margin-top:0;

    color:
        var(--primary);

}


h3 {

    color:#111827;

}


.form-group {

    margin-bottom:15px;

}


.form-group label {

    display:block;

    margin-bottom:6px;

    font-weight:600;

}


.form-group input,
.form-group select,
.form-group textarea {

    width:100%;

    padding:10px;

    border:
        1px solid #D1D5DB;

    border-radius:6px;

    font-family:inherit;

}


.btn {

    background-color:
        var(--primary);

    color:white;

    padding:
        10px 20px;

    border:none;

    border-radius:6px;

    cursor:pointer;

    font-weight:600;

    text-decoration:none;

    display:inline-block;

}


.btn:hover {

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

}


table {

    width:100%;

    border-collapse:
        collapse;

    margin-top:15px;

}


table,
th,
td {

    border:
        1px solid #E5E7EB;

}


th,
td {

    padding:12px;

    text-align:left;

    vertical-align:top;

}


th {

    background-color:
        #F9FAFB;

}


tr:hover {

    background:#F9FAFB;

}


.badge {

    padding:
        5px 9px;

    border-radius:
        20px;

    font-size:
        12px;

    font-weight:
        bold;

    display:inline-block;

}


.badge-pending {

    background-color:#FEF3C7;

    color:#92400E;

}


.badge-inprogress {

    background-color:#DBEAFE;

    color:#1E40AF;

}


.badge-resolved {

    background-color:#D1FAE5;

    color:#065F46;

}


@media(max-width:700px) {

    .container {

        margin:10px auto;

        padding:10px;

    }


    .card {

        padding:20px;

    }


    table {

        font-size:13px;

    }

}