/* Estilo geral */
body {
    font-family: sans-serif !important;
    margin: 20px;
    background-color: var(--background-color);
    padding-top: 40px; /* Ajuste conforme a altura da barra */
    padding-bottom: 60px; /* Ajuste conforme a altura da barra */
}
 
 /* Variáveis de estilo */
 :root {
    --background-color: #f4f4f4; 
    --container-color: #ffffff; 
    --table-container-color: #ffffff; 
    --secondary-container-color: #f9f9f9; 
    --text-color: #333; 
    --button-bg: #9dd4aa; 
    --button-text: #fff; 
    --border-color: #ddd; 
    --sidebar-color: linear-gradient(135deg, #3b4b58, #232a33); 
    --sidebar-text-color: #adb5bd;
    --tr-hover: #eeebeb;
    --topbar-color: linear-gradient(to right, #00ff8f, #07824c);
    --button-footer-color: #ffffff;
    --highlight-color: #f9f9f9;
    --stock-low-color: #fbcbcb;
    --priority-color: #fcc0c5;
    --login-label-color: #fff;
    --table-header-bg: #e3e6e5;
    --opace-login-bk: rgba(255, 255, 255, 0.6);
    --tab-color: #caf1df;
    --text-urgente:#dc3545;

 /*Cores de Status na Tabela */
 --status-normal: #05b568;
    --status-low: #f44336;

 /* Estilos para notificações */

 --notification-error-bg: #dc3545; 
 --notification-success-bg: #05b568;

 /* Estilos para estoque OUT and In */

 --status-entrada-bg: #9dd4aa; 
 --status-entrada-text: #155724; 

 --status-saida-bg: #fcc0c5; 
 --status-saida-text: #721c24; 

 /* Estilo dos Alertas da Notificação */

 --alert-bg-green: #d4edda;
    --alert-text-green: #155724;
    --circle-bg-green: #28a745;

    --alert-bg-purple: #e8d3f1;
    --alert-text-purple: #4b0082;
    --circle-bg-purple: #6f42c1;

    --alert-bg-orange: #ffe5d0;
    --alert-text-orange: #e96410;
    --circle-bg-orange: #fd7e14;

    --alert-bg-blue: #d0e8ff;
    --alert-text-blue: #004085;
    --circle-bg-blue: #007bff;

    --alert-bg-yellow: #fff3cd;
    --alert-text-yellow: #856404;
    --circle-bg-yellow: #ffc107;

    --alert-bg-red: #f8d7da;
    --alert-text-red: #721c24;
    --circle-bg-red: #dc3545;

    --alert-bg-brown: #f8f1e6;
    --alert-text-brown: #8b4513;
    --circle-bg-brown: #8b4513;

    /* Cor dos botões */

    --btn-bg-default: #05b568; 
    --btn-text-default: #fff; 
    --btn-hover-default: #07824c;

    --btn-bg-add: #007bff;
    --btn-hover-add: #1f38ab;

    --btn-bg-save: #05b568;
    --btn-hover-save: #07824c;

    --btn-bg-pause: #ff6b2b;
    --btn-hover-pause: #a14d15;

    --btn-bg-edit: #ffc107;
    --btn-hover-edit: #e0a800;

    --btn-bg-delete: #f74040;
    --btn-hover-delete: #9c2525;

    --btn-bg-add-size: #00ff8f;
    --btn-hover-add-size: #07824c;

}

/* Modo escuro */
body.dark-mode {
    --background-color: #282828; 
    --container-color: #323232; 
    --tab-color: #414141;
    --table-container-color: #414141; 
    --secondary-container-color: #414141; 
    --text-color: #e0e0e0; 
    --button-bg: #1f7a45; 
    --button-text: #fff;
    --border-color: #4f4f4f; 
    --sidebar-color:#323232; 
    --sidebar-text-color: #fff;
    --tr-hover: #2828288f;
    --topbar-color: #414141;
    --button-footer-color: #414141;
    --highlight-color: #323232;
    --stock-low-color: #572a2e;
    --priority-color: #572a2e;
    --login-label-color: #fff;
    --table-header-bg: #2828288f; 
    --opace-login-bk: rgba(0, 0, 0, 0.4);
    --text-urgente:#fff;

    /*Cores de Status na Tabela */
    --status-normal: #2ecc71;
    --status-low: #8a2929;


    /* Estilos para notificações */

    --notification-error-bg: #572a2e; /* Vermelho escuro */
    --notification-success-bg: #05b56998; /* Verde escuro */

    /* Estilos para estoque OUT and In */

    --status-entrada-bg: #274d38; /* Verde escuro */
    --status-entrada-text: #a3ebc4; /* Verde claro */

    --status-saida-bg: #572a2e; /* Vermelho escuro */
    --status-saida-text: #ffb3b8; /* Vermelho claro */

    /* Estilo dos Alertas da Notificação */

    --alert-bg-green: #274d38; /* Verde escuro */
    --alert-text-green: #a3ebc4; /* Verde claro */
    --circle-bg-green: #1e7a33;

    --alert-bg-purple: #322544; /* Roxo escuro */
    --alert-text-purple: #cba6e4; /* Roxo claro */
    --circle-bg-purple: #4b1a7b;

    --alert-bg-orange: #4a2f1b; /* Laranja escuro */
    --alert-text-orange: #f8b788; /* Laranja claro */
    --circle-bg-orange: #c96b13;

    --alert-bg-blue: #243447; /* Azul escuro */
    --alert-text-blue: #9dc9ff; /* Azul claro */
    --circle-bg-blue: #0056b3;

    --alert-bg-yellow: #4a4125; 
    --alert-text-yellow: #ffe3a1; 
    --circle-bg-yellow: #b58302;

    --alert-bg-red: #572a2e; 
    --alert-text-red: #ffb3b8; 
    --circle-bg-red: #9a1d27;

    --alert-bg-brown: #3d2c21; 
    --alert-text-brown: #e0d2ba; 
    --circle-bg-brown: #5c3a20;

     /* Cor dos botões */

     --btn-bg-default: #05b568; 
    --btn-text-default: #e0f8ed; 
    --btn-hover-default: #146940;

    --btn-bg-add: #004f8c; 
    --btn-hover-add: #002c54;

    --btn-bg-save: #1e7a5a;
    --btn-hover-save: #146940;

    --btn-bg-pause: #b3501c; 
    --btn-hover-pause: #732f0e;

    --btn-bg-edit: #c17f02; 
    --btn-hover-edit: #8a5900;

    --btn-bg-delete: #8a2929; 
    --btn-hover-delete: #5a1a1a;

    --btn-bg-add-size: #00c36e; 
    --btn-hover-add-size: #00774c;
}



h1,h2,h3,h4,p {
    color: var(--text-color);
}



/* Estilo do contêiner do cabeçalho */
.header {
    text-align: center;
    margin-bottom: 20px;
}

/* Estilo do logo */
.logo {
    max-width: 100%;
    height: auto;
    display: block; 
    margin: 0 auto; 
    width: 250px; 
}

.button {
    user-select: none; /* Impede a seleção de texto */
    -webkit-user-select: none; /* Para navegadores WebKit (Safari, Chrome) */
    -moz-user-select: none; /* Para Firefox */
    -ms-user-select: none; /* Para Internet Explorer/Edge */
}

#buttonActions, #buttonActions * {
    user-select: none; /* Impede a seleção de texto */
    -webkit-user-select: none; /* Compatibilidade com navegadores WebKit */
    -moz-user-select: none; /* Compatibilidade com Firefox */
    -ms-user-select: none; /* Compatibilidade com IE/Edge */
  }
  


/* Menu de Abas */
.tab-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens se movam para baixo em telas menores */
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}



/* Estilos para as abas */
.tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.tab {
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 5px;
    color: var(--text-color);
    border-radius: 5px 5px 0 0;
    transition: background 0.3s ease;
}

.tab:hover {
    background: var(--tab-color);
}

.tab.active {
    color: var(--text-color);
    font-weight: bold;
}

/* Borda inferior animada */
.tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #05b568;
    transition: width 0.3s ease;
}

.tab.active::after {
    width: 100%; /* Cresce da esquerda para a direita */
}

.tab-content {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tab-content.active {
    display: block;
    opacity: 1;
}




/* Formulários e Botões */
.form-group {
    margin-bottom: 15px;
}

/* Labels discretas */
.form-group label {
    font-size: 0.9em; /* Tamanho menor da fonte */
    font-weight: normal; /* Remove o negrito */
    color: var(--text-color); /* Cor cinza para maior discrição */
    margin-bottom: 5px; /* Espaçamento entre a label e o input */
    display: block; /* Garante alinhamento correto acima dos inputs */
}

.form-group input, .form-group select, .form-group button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    font-family: 'Outfit', 'Flow Circular', sans-serif;
    background-color: var(--secondary-container-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}


input.error, select.error {
    background-color: rgba(255, 0, 0, 0.1); /* Fundo vermelho suave */
    border: 1px solid red; /* Borda vermelha */
}

input:focus.error, select:focus.error {
    outline: none;
    border-color: red;
    background-color: rgba(255, 0, 0, 0.15); /* Destaque ao focar */
}

/* Remove qualquer estilo aplicado às opções dentro do select */
select.error option {
    background-color: var(--container-color) !important;
    color: var(--text-color) !important;
}



.form-group button {
    background-color: var(--btn-bg-default);
    color: var(--btn-text-default);              /* Cor do texto */
    border: none;                /* Remove bordas */
    cursor: pointer;             /* Cursor em forma de ponteiro */
    font-weight: bold;           /* Negrito */
    font-size: 16px;             /* Tamanho da fonte */
    padding: 9px 15px;         /* Espaçamento interno */
    border-radius: 50px;         /* Bordas arredondadas */
    width: auto;                 /* O botão não se estica */
    display: inline-block;       /* Mantém o tamanho do botão conforme o texto */
}

.add-button {
    background-color: var(--btn-bg-add);
    color: var(--btn-text-default);
    border: none;                /* Remove bordas */
    cursor: pointer;             /* Cursor em forma de ponteiro */
    font-weight: bold;           /* Negrito */
    font-size: 16px;             /* Tamanho da fonte */
    padding: 10px 15px;         /* Espaçamento interno */
    border-radius: 50px;         /* Bordas arredondadas */
    width: auto;                 /* O botão não se estica */
    display: inline-block;       /* Mantém o tamanho do botão conforme o texto */
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.imput-button {
    background-color: var(--btn-bg-default);
    color: var(--btn-text-default);
    border: none;                /* Remove bordas */
    cursor: pointer;             /* Cursor em forma de ponteiro */
    font-weight: bold;           /* Negrito */
    font-size: 16px;             /* Tamanho da fonte */
    padding: 10px 20px;         /* Espaçamento interno */
    border-radius: 50px;         /* Bordas arredondadas */
    width: auto;                 /* O botão não se estica */
    display: inline-block;       /* Mantém o tamanho do botão conforme o texto */
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.save-button {
    background-color: var(--btn-bg-save);
    color: var(--btn-text-default);
    border: none;                /* Remove bordas */
    cursor: pointer;             /* Cursor em forma de ponteiro */
    font-weight: bold;           /* Negrito */
    font-size: 16px;             /* Tamanho da fonte */
    padding: 10px 20px;         /* Espaçamento interno */
    border-radius: 50px;         /* Bordas arredondadas */
    width: auto;                 /* O botão não se estica */
    display: inline-block;       /* Mantém o tamanho do botão conforme o texto */
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.save-button:hover {
    background-color: var(--btn-hover-save); 
}


.pause-button {
    background-color: var(--btn-bg-pause);
    color: var(--btn-text-default);
    border: none;                /* Remove bordas */
    cursor: pointer;             /* Cursor em forma de ponteiro */
    font-weight: bold;           /* Negrito */
    font-size: 16px;             /* Tamanho da fonte */
    padding: 10px 20px;         /* Espaçamento interno */
    border-radius: 4px;         /* Bordas arredondadas */
    width: auto;                 /* O botão não se estica */
    display: inline-block;       /* Mantém o tamanho do botão conforme o texto */
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Estilo específico para o botão Editar */
.edit-button {
    background-color: var(--btn-bg-edit);
    color: var(--btn-text-default);
    border: none;                /* Remove bordas */
    cursor: pointer;             /* Cursor em forma de ponteiro */
    font-weight: bold;           /* Negrito */
    font-size: 16px;             /* Tamanho da fonte */
    padding: 10px 20px;         /* Espaçamento interno */
    border-radius: 50px;         /* Bordas arredondadas */
    width: auto;                 /* O botão não se estica */
    display: inline-block;       /* Mantém o tamanho do botão conforme o texto */
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

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



.delet-button {
    background-color: var(--btn-bg-delete);
    color: var(--btn-text-default);                 /* Cor do texto */
    border: none;                /* Remove bordas */
    cursor: pointer;             /* Cursor em forma de ponteiro */
    font-weight: bold;           /* Negrito */
    font-size: 16px;             /* Tamanho da fonte */
    padding: 10px 20px;         /* Espaçamento interno */
    border-radius: 50px;         /* Bordas arredondadas */
    width: auto;                 /* O botão não se estica */
    display: inline-block;       /* Mantém o tamanho do botão conforme o texto */
    align-items: center;
}

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


.delet-button:hover {
    background-color: var(--btn-hover-delete);
}

.pause-button:hover {
    background-color: var(--btn-hover-pause); 
}


.imput-button:hover {
    background-color: var(--btn-hover-default);  
}

.form-group button:hover {
    outline: none;
    box-shadow: 0 0 0 2px rgba(138, 250, 185, 0.76); /* Cor do contorno */
    outline-offset: 2px; /* Pequeno espaçamento para o contorno */
}



.add-size-container {
    display: flex;
    align-items: center;
}

.add-size-button {
    background-color: var(--btn-bg-add-size);
    color: var(--btn-text-default);
    border: none;
    cursor: pointer;
    padding: 10px 15px;
    font-size: 14px;
    margin-left: 10px;
    border-radius: 50px;
}

.add-client-button {
    background-color: var(--btn-bg-add-size);
    color: var(--btn-text-default);
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    margin-left: 10px;
    border-radius: 4px;
}





.add-size-form {
    margin-top: 10px;
}

.add-size-form input {
    width: auto;
    display: inline-block;
}

.hidden {
    display: none;
}

.alerta {
            color: green;
            margin-top: 10px; /* Espaçamento acima da mensagem de sucesso */
            padding: 10px;
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            border-radius: 5px;
            margin-bottom: 20px; /* Margem acima da grid */
        }

        .alerta-error {
            color: red;
            margin-top: 10px;
            padding: 10px;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            border-radius: 5px;
            margin-bottom: 20px; /* Margem acima da grid */
        }




.clear-history-button {
    background-color: #dc3545;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
}

.clear-history-button:hover {
    background-color: #c82333;
}

/* Grid para Layouts */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px; /* Espaçamento entre os blocos */
}


.grid-item {
    background-color: var(--container-color);
    
    border-radius: 8px; /* Cantos arredondados opcionais */
    border: 1px solid var(--border-color);
    overflow-x: auto; /* Permite rolagem horizontal em dispositivos menores */
}




/* Paginação */
.pagination {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 0px 0; /* 20px em cima, 10px embaixo */
}

.pagination button {
    background-color: var(--btn-hover-default);
    color: #fff;
    border: none;
    padding: 6px 11px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 50px;
    white-space: nowrap; /* Impede a quebra de texto nos botões */
}

.pagination button.disabled {
    background-color: #c0c0c0;
    cursor: not-allowed;
}

.pagination button:hover:not(.disabled) {
    background-color: #07824c;
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .tab-container {
       flex-wrap: wrap;
	   
		
    }

    .tab-button {
        width: 100%;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }

    .form-group input, .form-group select, .form-group button {
        font-size: 14px;
    }

    .pagination button {
        padding: 8px 16px;
        font-size: 14px;
    }
}
/* Trecho refente a layout das tabelas */

.table-container {
    
    width: 100%;
    overflow-x: auto; 
}

.table-container table {
    width: 100%;
    table-layout: fixed; 
    border-collapse: collapse;
    background-color: var(--container-color); 
    user-select: none;
}

.table-container th, .table-container td {
    padding: 6px;
    text-align: center;
    border: 1px solid var(--border-color);
    font-size: 14px;
    white-space: normal; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    border-style: none;
    border-bottom-style:solid;
    border-bottom-width: 1px !important;
    height: auto; 
    min-height: 45px;
    line-height: 1.2; 
    box-sizing: border-box;
}


.table-container th {
    white-space: nowrap; /* Impede a quebra de linha no cabeçalho */
    overflow: hidden;    /* Garante que o texto excedente fique oculto */
    text-overflow: ellipsis; /* Adiciona reticências (...) no texto que ultrapassar o limite */
    font-size: 13px;
}


.table-container table[data-status="true"] th:last-child,
.table-container table[data-status="true"] td:last-child {
    width: 150px;
    text-align: center;
    padding: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Responsividade */
@media (max-width: 1024px) {
    .table-container th, .table-container td {
        font-size: 12px; 
        padding: 4px; 
    }
}

@media (max-width: 768px) {
    .table-container th, .table-container td {
        font-size: 11px;
        padding: 3px;
    }
}

@media (max-width: 480px) {
    .table-container th, .table-container td {
        font-size: 10px;
        padding: 2px;
    }
}

/* Ajuste dinâmico para caber no container */
.table-container table {
    min-width: 100%; 
    max-width: 100%; 
}

/* Redução proporcional de texto e espaçamento */
.table-container th, .table-container td {
    word-wrap: break-word; 
     
}


td{
    color: var(--text-color)!important;
}


input:focus, select:focus {
    outline: none;
    border-color: #05b568;
    box-shadow: 0 0 0 3px rgba(135, 255, 189, 1);
}

/* Cabeçalho das tabelas */
.table-container th {
    background-color: var(--table-header-bg);
    color: var(--text-color);
}


/* Font Icon */
.container h2 i{
    background-color:transparent;
    font-size:22px;
    color:#2ecc71;
   }



.form-group button, .pagination button {
    transition: background-color 0.3s ease;
}



.container {
    padding-top: 5px;    
    padding-bottom: 20px; 
    padding-left: 20px;   
    padding-right: 20px;  
    background-color: var(--container-color);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    
}

/* Ajuste para o layout responsivo */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        box-shadow: none;
    }

    .container {
        margin-left: 0;
    }
}

.sidebar h3 i {
    margin-right: 8px; /* Espaçamento entre o ícone e o texto */
}

.sidebar a i {
    margin-right: 10px; /* Espaçamento entre o ícone e o texto do submenu */
}

.sidebar a {
    display: flex; /* Usa flexbox para alinhar ícones e texto */
    align-items: center; /* Alinha verticalmente o ícone e o texto */
}

.separator {
    border-bottom: 1px solid #495057;
    margin-bottom: 30px; /* Espaçamento abaixo da linha */
}

/* Estilo do separador */
.section-line {
    border: none; /* Remove o estilo padrão do <hr> */
    border-top: 2px solid var(--border-color); /* Define uma linha horizontal */
    margin: 20px 0; /* Espaçamento superior e inferior */
    width: 100%; /* Garante que a linha ocupe toda a largura do container */
    opacity: 0.8; /* Deixa a linha levemente transparente (opcional) */
}


.status-entrada {
    background-color: var(--status-entrada-bg);
    color: var(--status-entrada-text);
    font-weight: bold;
}

.status-saida {
    background-color: var(--status-saida-bg);
    color: var(--status-saida-text);
    font-weight: bold;
}



/* Estilos globais para todas as células da tabela */
.table-cell {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd; /* Pode ajustar para as bordas da tabela */
    color: var(--text-color);
}

#productionOrderTable tr span,
#separationOrderTable tr span,
#ExpeditionTable tr span,
#sharpeningHistoryTable tr span,
#sentSharpeningTable tr span,
#knifeHistory tr span,
#taxTable tr span,
#productionOrderDashboard  tr span {
    border-top-left-radius:50px;
    border-top-right-radius:50px;
    border-bottom-left-radius:50px;
    border-bottom-right-radius:50px;
    padding-left:10px;
    padding-right:10px;
    padding-top:3px;
    padding-bottom:3px;
    text-align: center;
    display: inline-block;
   }

/* Status da Faca */
.status-ok {
    background-color: var(--container-color);
    border: 2px solid #05b568; /* Verde escuro */
    color: #05b568 !important;
    font-weight: bold;
}

.status-needed {
    background-color: var(--container-color);
    border: 2px solid #dc3545; /* Vermelho intenso */
    color: #dc3545 !important;
    font-weight: bold;
    border-radius: 50px;
}

.status-pending {
    background-color: var(--container-color);
    border: 2px solid #ffc107; /* Amarelo dourado */
    color: #ffc107 !important;
    font-weight: bold;
    border-radius: 50px;
}

.status-sent {
    background-color: var(--container-color);
    border: 2px solid #17a2b8; /* Azul turquesa */
    color: #17a2b8 !important;
    font-weight: bold;
    border-radius: 50px;
}

.status-armazenada {
    background-color: var(--container-color);
    border: 2px solid #17a2b8; /* Azul turquesa */
    color: #17a2b8 !important;
    font-weight: bold;
    border-radius: 50px;
}

.status-uso {
    background-color: var(--container-color);
    border: 2px solid #05b568; /* Verde escuro */
    color: #05b568 !important;
    font-weight: bold;
    border-radius: 50px;
}

.status-afiacao {
    background-color: var(--container-color);
    border: 2px solid #ffc107; /* Amarelo dourado */
    color: #ffc107 !important;
    font-weight: bold;
    border-radius: 50px;
}



/* Estilos de cores para os diferentes status */
.status-aberto {
    background-color: var(--container-color);
    border: 2px solid #17a2b8; /* Azul */
    color: #17a2b8be !important;
    font-weight: bold;
}

.status-producao-pausada {
    background-color: var(---container-color);
    border: 2px solid #de6406; /* Laranja */
    color: #de6406 !important;
    font-weight: bold;
}

.status-producao-verde {
    background-color: var(--container-color);
    border: 2px solid #05b568; /* Verde escuro */
    color: #05b568 !important;
    font-weight: bold;
}

.status-producao-amarelo {
    background-color: var(--container-color);
    border: 2px solid #ffc107; /* Amarelo dourado */
    color: #ffc107 !important;
    font-weight: bold;
}

.status-producao-vermelho {
    background-color: var(--container-color);
    border: 2px solid #dc3545; /* Vermelho intenso */
    color: #dc3545 !important;
    font-weight: bold;
}

.status-separacao {
    background-color: var(--container-color);
    border: 2px solid #17a2b8; /* Azul turquesa */
    color: #17a2b8 !important;
    font-weight: bold;
}

.status-faturamento {
    background-color: var(--container-color);
    border: 2px solid #de6406; /* Cinza médio */
    color: #de6406!important;
    font-weight: bold;
}

.status-faturado {
    background-color: var(--container-color);
    border: 2px solid #05b568; /* Verde escuro (novo, para evitar repetição) */
    color: #05b568 !important;
    font-weight: bold;
}

.status-concluida {
    background-color: var(--container-color);
    border: 2px solid #007bff; /* Azul forte */
    color: #007bff !important;
    font-weight: bold;
}

.status-finalizada {
    background-color: var(--container-color);
    border: 2px solid var(--border-color); /* Azul forte */
    color: var(--text-color) !important;
    font-weight: bold;
}





.priority-normal {
    /*background-color: #9dd1e3;*/ /* sem cor NORMAL */
    color: var(--text-color);
}

.priority-urgente {
    background-color:  var(--stock-low-color); /* Vermelho para URGENTE */
}



/* Table Data */
#productionOrderTable .priority-urgente td{
    color:var(--text-urgente) !important;
   }
   
/* Priority urgente */
#productionOrderDashboard tr .priority-urgente{
    color:var(--text-urgente) !important;
   }
   
   





/* Opcional: ajustar o hover para melhorar a visualização */
tr:hover {
    background-color: var(--tr-hover); /* Cor de fundo ao passar o mouse por cima */

}


/* Estilo para a linha destacada ao selecionar */
.highlighted-row {
    background-color: var(--tr-hover); /* Cor de fundo quando a linha é destacada */
}


/* Deixa os textos das células da tabela em negrito */
#productionOrderTable th, 
#productionOrderTable td {
    
    text-align: center
}

/* Deixa os textos das células da tabela em negrito */
#separationOrderTable th, 
#separationOrderTable td {
    
    text-align: center
}

/* Deixa os textos das células da tabela em negrito */
#productionOrderDashboard th, 
#productionOrderDashboard td {
    font-weight: bold;
    text-align: center
}

.priority-normal {
    /*background-color: #9dd1e3;*/ /* sem cor NORMAL */
    color: black; /* Texto branco */
}


/* Ajusta o container do filtro e pesquisa */
.filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9em;
    opacity: 0.85;
    color: var(--text-color);;
}

/* Ajusta o container de pesquisa */
.search-container {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Expande o campo de pesquisa para ocupar mais espaço */
    padding: 2px;
}

.search-container i {
    color: var(--text-color);
    font-size: 1em;
    margin-right: 5px;
    opacity: 0.85;
    height:2px;
    margin-bottom:12px;
    transform: translatex(13px);
    width:0px;
}

/* Estica o campo de pesquisa */
.search-container input[type="text"] {
    padding: 8px;
    padding-left: 35px;
    font-size: 1em;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--container-color);
    color: var(--text-color);
    width: 100%; /* Define a largura total do container */
    max-width: flex; /* Define um limite máximo de largura */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.search-container input[type="text"]:hover,
.search-container input[type="text"]:focus {
    outline: none;
    border-color: #05b568;
    box-shadow: 0 0 0 2px rgba(135, 255, 189, 1);
}

/* Ajusta o filtro à direita */
.filter-options {
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding: 2px;
}

.filter-options select {
    padding: 5px 10px;
    font-size: 1em;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--container-color);
    color: var(--text-color);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-options select:hover,
.filter-options select:focus {
    outline: none;
    border-color: #05b568;
    box-shadow: 0 0 0 2px rgba(135, 255, 189, 1);
}




.footer-button-bar {
    position: fixed;
    bottom: 0; /* Fixa na parte inferior da tela */
    margin-left: -40px;
    width: 100%; /* Largura total da tela menos a sidebar */
    background-color: var(--container-color);
    padding: 10px 40px; /* Espaçamento interno */
    display: flex;
    justify-content: flex-start; /* Alinha os botões à esquerda */
    align-items: center;
    gap: 15px; /* Espaçamento de 15px entre os botões */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave acima da barra */
    z-index: 998; /* Garante que a barra fique acima de outros elementos */
    border-top: var(--border-color);
    height: 40px; /* Define a altura da barra */
}


.footer-input {
    height: 40px; /* Altura consistente com os botões */
    padding: 10px 15px; /* Espaçamento interno */
    border-radius: 50px; /* Bordas arredondadas */
    box-sizing: border-box; /* Inclui padding e borda no cálculo do tamanho */
    border: 2px solid var(--border-color); /* Borda padrão */
    background-color: var(--container-color); /* Cor de fundo */
    color: var(--text-color); /* Cor do texto */
    margin: 0; /* Remove margens externas */
    display: inline-block; /* Garante layout inline */
    width: auto; /* Ajusta conforme o conteúdo */
}




.footer-button-bar button i {
    margin-right: 5px; /* Espaçamento entre o ícone e o texto */
}

.alert-container {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 10px;
}

.alert {
    padding: 8px;
    border-radius: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #333;
    position: relative;
    margin: 0;
}

.alert .number-circle {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
    color: #ffffff;
    transition: transform 0.3s ease;
    z-index: 1;
}

.alert .number-circle:hover {
    transform: scale(1.5);
}

.green-alert {
    background-color: var(--alert-bg-green);
    color: var(--alert-text-green);
}

.green-alert .number-circle {
    background-color: var(--circle-bg-green);
}

.purple-alert {
    background-color: var(--alert-bg-purple);
    color: var(--alert-text-purple);
}

.purple-alert .number-circle {
    background-color: var(--circle-bg-purple);
}

.orange-alert {
    background-color: var(--alert-bg-orange);
    color: var(--alert-text-orange);
}

.orange-alert .number-circle {
    background-color: var(--circle-bg-orange);
}

.blue-alert {
    background-color: var(--alert-bg-blue);
    color: var(--alert-text-blue);
}

.blue-alert .number-circle {
    background-color: var(--circle-bg-blue);
}

.yellow-alert {
    background-color: var(--alert-bg-yellow);
    color: var(--alert-text-yellow);
}

.yellow-alert .number-circle {
    background-color: var(--circle-bg-yellow);
}

.red-alert {
    background-color: var(--alert-bg-red);
    color: var(--alert-text-red);
}

.red-alert .number-circle {
    background-color: var(--circle-bg-red);
}

.brown-alert {
    background-color: var(--alert-bg-brown);
    color: var(--alert-text-brown);
}

.brown-alert .number-circle {
    background-color: var(--circle-bg-brown);
    color: white;
}

.alert-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    padding-right: 10px;
}

.alert i {
    margin-right: 8px;
    font-size: 16px;
    vertical-align: middle;
}

.alert-text {
    font-size: 14px;
    font-weight: bold;
}

.view-button {
    color: #ffffff;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.green-alert .view-button {
    background-color: var(--circle-bg-green);
}

.purple-alert .view-button {
    background-color: var(--circle-bg-purple);
}

.orange-alert .view-button {
    background-color: var(--circle-bg-orange);
}

.blue-alert .view-button {
    background-color: var(--circle-bg-blue);
}

.yellow-alert .view-button {
    background-color: var(--circle-bg-yellow);
    color:black;
}

.red-alert .view-button {
    background-color: var(--circle-bg-red);
}

.brown-alert .view-button {
    background-color: var(--circle-bg-brown);
    color: white;
}

.view-button:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .alert-container {
        grid-template-columns: 1fr;
    }

    .alert {
        width: 100%;
    }
}

/* Estilo para os filtros e containers dos gráficos */
.chart-filters {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.chart-container {
    flex: 1;
    min-width: 300px;
    height: 380px; /* Aumente a altura do container para acomodar o gráfico */
    padding: 20px;
    margin-top: 20px;
    background-color: var(--container-color); /* Fundo da tabela */
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: auto;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box; /* Inclui padding na altura total */
}

.chart-container label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--text-color);
}

.chart-container input[type="date"] {
    margin: 0 5px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--table-container-color); /* Altere para a cor desejada */
    color: var(--text-color);
}

.chart-container button {
    padding: 6px 10px;
    margin-top: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.chart-container button:hover {
    background-color: #0056b3;
}

/* Estilo para os gráficos */
canvas {
    width: 90% !important; /* O canvas ocupa toda a largura do container */
    height: 80% !important; /* O canvas ocupa toda a altura do container */
    max-height: 80%;
    margin-top: 0; /* Remove o margin-top para centralizar o gráfico */
}


/* Estilo para a linha com estoque baixo */
.low-stock-row {
    background-color: var(--stock-low-color); /* Fundo vermelho claro */
    font-weight: bold;
}

#stockTable tbody .low-stock-row td{
    color:var(--text-urgente) !important;
   }
   

/* Estilo para o botão de status */
.status-button {
    color: white;
    padding: 2px 5px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    border-radius: 50px;
}

.status-button i {
    font-size: 16px;
}

/* Estilo para o status "Estoque OK" */
.status-normal {
    background-color:transparent; /* Fundo verde */
    border-radius: 50px;
    border: 2px solid var(--status-normal);
    color: var(--status-normal);
}
.status-normal i {
    color: var(--status-normal);
}

/* Estilo para o status "Estoque Baixo" */
.status-low {
    background-color:transparent; /* Fundo verde */
    border-radius: 50px;
    border: 2px solid var(--text-urgente);
    color: var(--text-urgente);
}

.status-low i {
    color: var(--text-urgente);
}


th {
    cursor: pointer;
}

th[data-sort-order="asc"]:after {
    content: " ↑"; /* Indicador de ordem ascendente */
}

th[data-sort-order="desc"]:after {
    content: " ↓"; /* Indicador de ordem descendente */
}

/* Container das notificações */
#notificationContainer {
    position: fixed;
    top: 20px; /* Ajuste a distância do topo da página */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Compensa o deslocamento para realmente centralizar */
    z-index: 30000;
    display: flex;
    flex-direction: column;
    gap: 10px;

}

/* Estilo base para notificações */
.notification {
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px 20px;
    border-radius: 3px;
    font-size: 14px;
    padding: 20px;
    color: white;
    animation: fadein 0.3s ease-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    will-change: opacity, transform; /* Otimiza animações */
}

/* Notificações de erro */
.notification.error {
    background-color: var(--notification-error-bg);
    opacity: 1; /* Certifique-se de que comece visível */
    transform: translateY(0); /* Garante a posição inicial */
    border: 1px solid #9a1d27;
    border-left: 5px solid #9a1d27;
}

.notification.success {
    background-color: var(--notification-success-bg);
    border: 1px solid #0cfa6f;
    border-left: 5px solid #0cfa6f;
}

/* Animação para entrada */
@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação para saída */
@keyframes fadeout {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Estilo base para botões */
.btn {
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 3px 16px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: lowercase;
}

/* Botão de "imprimir" */
.btn-print {
    position: relative;
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-color);
    font-family: Arial, Helvetica, sans-serif;
}

.btn-print i {
    background-color: #8d8c8c;
    color: #fff;
    border-radius: 50%;
    padding: 8px;
    margin-left: -12px;
}

.btn-output {
    position: relative;
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-color);
    font-family: Arial, Helvetica, sans-serif;
}

.btn-output i {
    background-color: #ca1414;
    color: #fff;
    border-radius: 50%;
    padding: 8px;
    margin-left: -12px;
}

.btn-input {
    position: relative;
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-color);
    font-family: Arial, Helvetica, sans-serif;
}

.btn-input i {
    background-color: #05b568;
    color: #fff;
    border-radius: 50%;
    padding: 8px;
    margin-left: -12px;
}


/* Botão de "imprimir" */
.btn-update {
    position: relative;
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-color);
    font-family: Arial, Helvetica, sans-serif;
}

.btn-update i {
    background-color: #05b568;
    color: #fff;
    border-radius: 50%;
    padding: 8px;
    margin-left: -12px;
}



/* Botão de "incluir proposta" */
.btn-proposal {
    padding: 10px 20px;
    background-color: #05b568;
    color: #fff;
    border: none;
}

/* Botão de "cancelar" */
.btn-cancel {
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-color);
}


.btn-close {
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-color);
    position: relative;
}

.btn-close i {
    background-color: var(--secondary-container-color);
    color: white;
    border-radius: 50%;
    padding: 8px;
    margin-right: -12px; /* Faz o círculo tocar mais a borda */
}


.close {
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-color);
    position: relative;
    float: right;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 3px 16px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: lowercase;
    }
    
    .close:hover,
    .close:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(138, 250, 185, 0.76); /* Cor do contorno */
    outline-offset: 2px; /* Pequeno espaçamento para o contorno */
    }
    

/* Botão de "mais ações" */
.btn-actions {
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-color);
    position: relative;
}

.btn-actions i {
    background-color: #05b568;
    color: white;
    border-radius: 50%;
    padding: 8px;
    margin-right: -12px; /* Faz o círculo tocar mais a borda */
}

.btn-proposal:hover, 
.btn-actions:hover, 
.btn-print:hover,
.btn-cancel:hover,
.btn-update:hover,
.btn-close:hover,
.btn-output:hover,
.btn-input:hover {
    outline: none;
    box-shadow: 0 0 0 2px rgba(138, 250, 185, 0.76); /* Cor do contorno */
    outline-offset: 2px; /* Pequeno espaçamento para o contorno */
}

/* Dropdown do botão "mais ações" */
.dropdown {
    display: none; /* Esconde por padrão */
    position: absolute;
    bottom: 120%; /* Ajusta para aparecer acima do botão */
    left: 0;
    background-color: var(--button-footer-color);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* Ajusta as opções do dropdown */
.dropdown a {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaçamento entre o ícone e o texto */
    padding: 8px 15px; /* Ajusta o espaçamento do texto */
    text-decoration: none;
    color: var(--text-color); /* Cor do texto */
    font-size: 14px; /* Tamanho do texto */
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap; /* Evita quebra de linha */
}

.dropdown a:hover {
    background-color: var(--highlight-color); /* Fundo leve no hover */
    color: var(--text-color); /* Cor do texto no hover */
}

/* Remove o círculo verde dos ícones */
.dropdown a i {
    font-size: 12px; /* Tamanho menor para os ícones */
    color: #05b568; /* Cor mais neutra */
    background-color: transparent; /* Remove qualquer fundo */
    border-radius: 0; /* Remove bordas arredondadas */
    padding: 0; /* Remove o espaçamento interno */
    margin: 0; /* Remove margens */
    transition: color 0.3s ease;
}

/* Alteração da cor do ícone no hover */
.dropdown a:hover i {
    color: var(--text-color); /* Cor mais escura no hover */
}

/* Mostrar dropdown ao clicar */
.btn-actions.active .dropdown {
    display: block; /* Mostra o dropdown */
}

/* Mostra o dropdown quando o botão está ativo */
.btn-print.active .dropdown {
    display: block; /* Mostra o menu */
}


.modal {
    position: fixed;
    top: 0;
    right: 0; /* Posicionado no lado direito da tela */
    width: 37%; /* Ocupa 1/3 da largura da tela */
    height: 100%; /* Ocupa toda a altura da tela */
    background-color: var(--container-color); /* Cor de fundo do modal */
    z-index: 10000;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); /* Sombra lateral */
    display: flex;
    flex-direction: column;
    padding: 20px;
}

/* Conteúdo do modal */
.modal-content {
    background-color: white; /* Fundo interno do conteúdo */
    padding: 20px;
    background-color: var(--container-color); /* Cor de fundo do modal */
    border-radius: 8px; /* Bordas arredondadas */
    flex: 1; /* O conteúdo cresce para ocupar o espaço disponível */
    overflow-y: auto; /* Rola o conteúdo, caso exceda a altura */
}


/* Estilo do título */
.modal-content h3 {
    margin-top: 0; /* Remover margem superior do título */
}

.modal-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px; /* Espaçamento entre os blocos */
    margin-bottom: 60px;
}

/* Overlay para desfoque no fundo */
.modal-overlay {
    position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4); /* Leve escurecimento */
        backdrop-filter: blur(5px); /* Aplica o desfoque */
        -webkit-backdrop-filter: blur(5px); /* Compatibilidade com Safari */
        z-index: 9999; /* Coloca o overlay acima do conteúdo */
        opacity: 0; /* Escondido por padrão */
        visibility: hidden; /* Não ocupa espaço */
        transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Quando o overlay estiver ativo */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Estilo do título */
.modal-content h3 {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    margin-top: 0;
    color: var(--text-color);
}

.modal-content h3 i {
    margin-right: 10px;
    color: #555;
}


  /* Container dos boxes */
  .box-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os elementos quebrem linha */
    gap: 20px; /* Espaçamento entre os boxes */
    justify-content: space-between;
    padding-bottom: 20px;
}

/* Estilo dos boxes */
.box {
    background-color: var(--secondary-container-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    flex: 1 1 calc(25% - 20px); /* Ajusta para 4 boxes em telas grandes */
    box-sizing: border-box; /* Inclui padding e border no tamanho */
}

h4 {
    margin: 0 0 10px 0;
    font-size: 1em;
    color: var(--text-color);
}

.info-text {
    color: var(--text-color);
    font-size: 1.2em;
    font-weight: bold;
    margin: 5px 0;
}

.subtext {
    color: var(--text-color);
    font-size: 0.9em;
}


/* Responsividade */
@media (max-width: 1024px) {
    .box {
        flex: 1 1 calc(50% - 20px); /* 2 boxes por linha */
    }
}

@media (max-width: 600px) {
    .box {
        flex: 1 1 100%; /* 1 box por linha */
    }
}


.autocomplete-container {
    position: relative;
    width: 100%;
    
}

.autocomplete-items {
    position: absolute;
    border: 1px solid var(--border-color);
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--secondary-container-color);
    color: var(--text-color);
    font-size: 16px;
    max-height: 150px;
    overflow-y: auto;
}
.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.autocomplete-items div:hover {
    background-color: var(--tr-hover);
    
}