:root {
    font-size: 65%;

    /* basic color with modification */
    --color-red: #f44336;
    --color-red-hover: #d32f2f;
    --color-blue: #023e8a;
    --color-green: #4CAF50;
    --color-green-hover: #45a049;
    --hover-background-color: rgba(255, 255, 255, 0.16);
    /* color palette */

    --color1: #F8F9FA;
    --color2: #E9ECEF;
    --color3: #DEE2E6;
    --color4: #CED4DA;
    --color5: #ADB5BD;
    --color6: #6C757D;
    --color7: #343A40;
    --color8: #212529;
    --color9: #121416;
    --color9b: #121416c2;

    /* ckcm color */
    --ckcm-color1: #0F172A;
    --ckcm-color2: #1E293B;
    --ckcm-color3: #F48812;
    --ckcm-color4: #C7570C;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Roboto Flex", serif;
}

.roboto-flex-bold {
    font-family: "Roboto Flex", serif;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
    font-size: 2.5rem;
    font-variation-settings:
        "slnt" 0,
        "wdth" 100,
        "GRAD" 0,
        "XOPQ" 96,
        "XTRA" 468,
        "YOPQ" 79,
        "YTAS" 750,
        "YTDE" -203,
        "YTFI" 738,
        "YTLC" 514,
        "YTUC" 712;
}


/* Scrollbar width */
::-webkit-scrollbar {
    width: 10px;
    height: 5px;
}

/* Scrollbar track (background) */
::-webkit-scrollbar-track {
    background: var(--ckcm-color1);

}

/* Scrollbar handle */
::-webkit-scrollbar-thumb {
    background: var(--ckcm-color2);

}

/* Scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #2980b9, #9b59b6);
}


button {
    border-radius: 5px;
    cursor: pointer;
    color: var(--color2);
    border: 1px solid var(--color6);
    padding: 5px 10px;
    background-color: var(--ckcm-color1);
    font-weight: bold;
    font-size: 1.2rem;
}

button:hover {
    background-color: var(--ckcm-color2);
}


button i {
    margin-right: 2px;
}





table {
    border: 1px solid var(--color6);
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

thead th {
    border: 1px solid var(--color6);
    background-color: var(--color9);
    text-align: left;
    padding: 10px;
    color: var(--ckcm-color4);
    font-size: 1rem;
    border-bottom: 2px solid var(--color6);
    text-align: center;
}

tbody td {
    border: 1px solid var(--color6);
    padding: 10px;
    color: var(--color1);
    background-color: var(--color9b);
    font-size: 1.1rem;

}

tr:nth-child(odd) {
    background-color: var(--ckcm-color2);
}


/* status color */


.status.active {
    color: green;
    font-weight: bold;
}



.status.ended {
    color: gray;
    font-weight: bold;
}

.status.dropped {
    color: red;
    font-weight: bold;
}
.status.Rejected{
    color: orangered;

}



/* message */
.message-container {
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.message-container .alert {
    font-size: 1.2rem;
}

.alert {
    padding: 5px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 1rem;
    text-align: center;

}

.alert-success {
    background-color: #ecfff1;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #962631;
    border: 1px solid #f5c6cb;
}

.alert-warning {

    color: #fb8500;

}

.save-btn{
    border:1px solid var(--color-green);
    color: var(--color-green);

    align-self: center;
}

.save-btn:hover {
    transform: translateY(-2px);
    transition: ease-in-out 0.3s;
    color: var(--color1);
    background-color: var(--color-green-hover);
}




.edit-btn,
.delete-btn {
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1rem;
    padding: none;
}


.view-btn {
    color: var(--color1);
    text-decoration: none;
}

.view-btn:hover {
    color: var(--ckcm-color3);
    background-color: transparent;
}

.add-btn {
    color: white;
    border: none;
}

.add-btn:hover {
    color: var(--ckcm-color3);
    background-color: transparent;
}


.edit-btn {
    color: white;

}

.edit-btn:hover {
    color: var(--color-green);
    background-color: transparent;
}

.delete-btn {
    color: white;
}

.delete-btn:hover {
    color: var(--color-red);
    background-color: transparent;
}

.search {
    padding: 7px;
    background-color: var(--ckcm-color2);
    width: 200px;
    color: var(--color1);
    border: 1px solid var(--color7);
    /* Removes default focus outline */
    transition: border 0.3s ease-in-out;

}

.search:focus {
    outline: 1px solid var(--color-blue);
}




/* for gradient text */
.gradient-text {
    font-weight: bold;
    /* Makes the text bold */
    font-size: 1.6rem;
    /* Adjust size as needed */
    background: linear-gradient(90deg, var(--ckcm-color4), var(--ckcm-color3), var(--ckcm-color3));
    /* Red → Green → Blue */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gradient-text em {
    -webkit-text-fill-color: var(--color4);
    font-weight: 100;
    font-size: 1.1rem;
}

















/* Modal Background */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

/* Modal Content */
.modal-content {
    height: fit-content;
    border: 1px solid var(--color6);
    background-color: var(--ckcm-color1);
    margin: 2% auto;
    padding: 20px;
    border-radius: 5px;
    width: 30%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.modal-header {
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.modal-header h2 {
    color: var(--color1);
}

.modal-header,
.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.info-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 5px;
}

.info-container label {
    color: var(--ckcm-color4);
    font-size: 1.2rem;
    font-weight: bold;

}

.info-container label em {
    color: var(--color6);
    font-size: 1rem;
}

input,
select {
    padding:7px 5px ;
    background-color: var(--ckcm-color2);
    border: 1px solid var(--ckcm-color2);
    color: var(--color4);
    border: 1px solid var(--color7);
    border-radius: 3px;
}

.modal-footer {
    text-align: right;
    margin-top: 10px;
}

.modal-add-btn:hover {
    background-color: var(--color-blue);
}

.close-btn .close {
    background: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}