/* Title and Search Box Alignment */
.align-title-searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

.align-title-searchBox h2 {
    color: var(--primary-color);
    margin: 0;
}

.searchBox {
    padding-left: 30px;
}

/* Table Container */
.table__body {
    width: 100%;
    max-height: calc(89% - 1.6rem);
    margin: .8rem auto;
    border-radius: .5rem;
    overflow: auto;
    overflow: overlay;
    background-color: #fff;
    
}

/* Custom Scrollbar */
.table__body::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

.table__body::-webkit-scrollbar-thumb {
    border-radius: .5rem;
    background-color: #0004;
    visibility: hidden;
}

.table__body:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}

/* General Table Styles */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    text-align: right;
    border-radius: 8px;
    overflow: hidden;
}
.table-container {
    overflow-y: auto;
}
/* Table Header */
.styled-table thead {
    background-color: #849aa8;
    color: white;
    position: sticky;
    top: 0;
    z-index: 2;
}

.styled-table th {
    padding: 15px;
    text-transform: uppercase;
    font-weight: bold;
    position: sticky;

}
.styled-table thead th{    
    position: sticky;
}
.styled-table th h1 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

.styled-table th button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.styled-table th button:hover {
    color: #ddd;
}

/* Table Body */
.styled-table tbody {
    background-color: #f9f9f9;
    color: black;
}

.styled-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Status Colors */
.styled-table td .status {
    font-weight: bold;
}

.styled-table td .status.processing {
    color: orange;
}

.styled-table td .status.completed {
    color: green;
}

/* Buttons */
.styled-table .info-btn,
.styled-table .delete-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 16px;
    color: #849aa8;
    transition: color 0.3s ease;
}

.styled-table .info-btn:hover,
.styled-table .delete-btn:hover {
    color: #34495e;
}

.styled-table .info-btn i,
.styled-table .delete-btn i {
    font-size: 18px;
}

/* Input Fields */
.styled-table input[type="text"] {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Header Flex Alignment */
.align-tbHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.align-tbHead input {
    width: 100%;
    padding: 5px;
    font-size: 14px;
    border-radius: 4px;
}

/* Row Hover Effect */
.styled-table tbody tr:hover {
    background-color: #e8f0ff;
    transition: background 0.3s ease;
}
