/* ======================================================
#region JOBS FILTER
====================================================== */

.jobs-filter {
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.jobs-filter input,
.jobs-filter select{
padding:8px;
border-radius:6px;
border:1px solid #ccc;
}

/* #endregion */


/* ======================================================
#region TABLE
====================================================== */

.table-container{
max-height:500px;
overflow-y:auto;
border:1px solid #eee;
border-radius:8px;
}

.table-ui{
width:100%;
border-collapse:collapse;
font-size:12px;
}

/* HEADER */

.table-ui thead th{
position:sticky;
top:0;
background:#f9fafb;
font-size:12px;
font-weight:600;
color:#374151;
padding:6px 8px;
border-bottom:1px solid #e5e7eb;
z-index:2;
}

/* CELLS */

.table-ui td{
padding:6px 8px;
border-bottom:1px solid #eee;
font-size:12px;
color:#333;
}

/* HOVER */

.table-ui tbody tr:hover{
background:#f5f5f5;
}

/* zebra */

.table-ui tbody tr:nth-child(even){
background:#fcfcfc;
}

.table-ui td {
    position: relative;
}

/* #endregion */


/* ======================================================
#region PAGINATION
====================================================== */

.pagination{
margin-top:10px;
}

.pagination button{
padding:6px 10px;
}

/* #endregion */


/* ======================================================
#region DROPDOWN MENU
====================================================== */

.dropdown{
position:relative;
display:inline-block;
}

.dropdown-menu{
display:none;
position:absolute;
right:0;
top:100%;
background:white;
border:1px solid #ccc;
border-radius:6px;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
min-width:120px;
z-index:1000;
}

.dropdown-menu button {
display:block;
width:100%;
border:none;
background:none;
padding:8px;
text-align:left;
cursor:pointer;
color:#333;
font-size:13px;
}

.dropdown-menu button:hover {
background:#f0f0f0;
}

.dropdown-menu button:disabled {
color:#bbb;
cursor:not-allowed;
}

/* #endregion */


/* ======================================================
#region MODAL BASE
====================================================== */

.modal{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
backdrop-filter: blur(3px);
z-index:1000;
}

.modal-content{

background:white;
width:420px;

margin:6% auto;
padding:18px;

border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);

animation:modalFade .25s ease;

max-height:80vh;
overflow-y:auto;

display:flex;
flex-direction:column;
gap:6px;

}

/* título */

.modal-content h3{
margin:0 0 6px 0;
font-size:18px;
font-weight:600;
color:#222;
}

/* label */

.modal-content label{
font-size:12px;
font-weight:600;
color:#555;
margin-top:6px;
}

/* inputs */

.modal-content input,
.modal-content select{

width:100%;

padding:6px 8px;

border:1px solid #dcdcdc;
border-radius:6px;

font-size:13px;

margin-top:2px;
margin-bottom:6px;

box-sizing:border-box;

}

/* focus */

.modal-content input:focus,
.modal-content select:focus{

outline:none;
border-color:#3b82f6;
box-shadow:0 0 0 2px rgba(59,130,246,.15);

}

/* ações */

.modal-actions{

display:flex;
justify-content:flex-end;

gap:8px;
margin-top:10px;

}

.modal-actions button{

padding:6px 12px;

border-radius:6px;

font-size:12px;
font-weight:600;

cursor:pointer;
border:none;

}

/* animação */

@keyframes modalFade{

from{
opacity:0;
transform:translateY(-8px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* #endregion */


/* ======================================================
#region QUEUE MODAL (RADIO BUTTON)
====================================================== */

#referenceForm{
display:flex;
gap:20px;
margin:4px 0 6px 0;
}

#referenceForm label{
display:flex;
align-items:center;
gap:6px;
font-weight:500;
font-size:12px;
}

#referenceForm input{
width:auto;
margin:0;
}

/* #endregion */


/* ======================================================
#region LOG MODAL
====================================================== */

#logModal .modal-content{
width:700px;
}

/* #endregion */


/* ======================================================
#region BUTTONS
====================================================== */

.btn{

padding:7px 14px;
border-radius:7px;
font-size:13px;
font-weight:600;
cursor:pointer;
border:none;
transition:.2s;

}

.btn-confirm{
background:#3b82f6;
color:white;
}

.btn-confirm:hover{
background:#2563eb;
}

.btn-cancel{
background:#f3f4f6;
color:#444;
}

.btn-cancel:hover{
background:#e5e7eb;
}

.btn-primary {
background:#3b82f6;
border:none;
padding:7px 14px;
color:white;
border-radius:6px;
cursor:pointer;
font-size:13px;
}

.btn-primary:hover {
background:#2563eb;
}

.btn-secondary {
background:#3b82f6;
border:none;
padding:7px 14px;
color:white;
border-radius:6px;
cursor:pointer;
font-size:13px;
}

.btn-secondary:hover {
background:#2563eb;
}

/* #endregion */


/* ======================================================
#region INPUT UI
====================================================== */

.input-ui{

padding:8px 10px;
border-radius:8px;
border:1px solid #dcdcdc;
font-size:13px;
transition:.2s;

}

.input-ui:focus{

outline:none;
border-color:#3b82f6;
box-shadow:0 0 0 2px rgba(59,130,246,.15);

}

/* #endregion */


/* ======================================================
#region TABS
====================================================== */

.tabs{
display:flex;
gap:25px;
border-bottom:1px solid #e5e7eb;
margin-bottom:20px;
}

.tabs button{

background:none;
border:none;
padding:10px 2px;

font-size:14px;
font-weight:600;

color:#6b7280;

cursor:pointer;

position:relative;

transition:color .25s ease;

}

.tabs button:hover{
color:#374151;
}

.tabs button.active{
color:#3b82f6;
}

.tabs button.active::after{

content:"";
position:absolute;

left:0;
bottom:-1px;

width:100%;
height:3px;

background:#3b82f6;

border-radius:2px;

animation:tabSlide .25s ease;

}

@keyframes tabSlide{

from{
transform:scaleX(0);
}

to{
transform:scaleX(1);
}

}

/* #endregion */

#machineSelect {
    position: relative;
    z-index: 9999;
}


/* estilização dos botoes de paginação */

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 🔥 aproxima tudo */
    margin-top: 10px;
}

.pagination-info {
    font-size: 13px;
    color: #555;
}

.pagination-buttons {
    display: flex;
    gap: 6px;
}

.pagination-btn {
    padding: 4px 10px; /* 🔥 menor */
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    cursor: pointer;
    transition: 0.2s;
}

.pagination-btn:hover:not(:disabled) {
    background-color: #e0e0e0;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}