:root {
     --primary-color: #2c3e50;
     --secondary-color: #3498db;
     --success-color: #27ae60;
     --warning-color: #f39c12;
     --danger-color: #e74c3c;
     --info-color: #17a2b8;
     --light-bg: #f8f9fa;
     --dark-bg: #343a40;
 }

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background-color: var(--light-bg);
 }

 .login-container {
     max-width: 400px;
     margin: 80px auto;
     padding: 30px;
     background: white;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }

 .dashboard-header {
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     color: white;
     padding: 30px 0;
     margin-bottom: 25px;
     border-radius: 0 0 20px 20px;
 }

 .nav-tabs .nav-link {
     border: none;
     color: #6c757d;
     font-weight: 500;
     padding: 10px 20px;
 }

 .nav-tabs .nav-link.active {
     color: var(--secondary-color);
     border-bottom: 3px solid var(--secondary-color);
     background-color: transparent;
 }

 .card {
     border: none;
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
     margin-bottom: 20px;
     transition: transform 0.2s ease;
 }

 .card:hover {
     transform: translateY(-2px);
 }

 .card-header {
     background-color: white;
     border-bottom: 2px solid var(--light-bg);
     font-weight: 600;
 }

 .api-endpoint {
     font-family: 'Courier New', monospace;
     background-color: #f8f9fa;
     padding: 8px 12px;
     border-radius: 4px;
     border-left: 4px solid var(--secondary-color);
     margin-bottom: 8px;
     font-size: 0.85rem;
 }

 .method-badge {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 4px;
     font-weight: 600;
     font-size: 0.75rem;
     text-transform: uppercase;
     margin-right: 8px;
     min-width: 60px;
     text-align: center;
 }

 .method-get {
     background-color: #d1ecf1;
     color: #0c5460;
 }

 .method-post {
     background-color: #d4edda;
     color: #155724;
 }

 .method-put {
     background-color: #fff3cd;
     color: #856404;
 }

 .method-delete {
     background-color: #f8d7da;
     color: #721c24;
 }

 .response-display {
     background-color: #f8f9fa;
     border: 1px solid #dee2e6;
     border-radius: 5px;
     padding: 15px;
     font-family: 'Courier New', monospace;
     font-size: 0.85rem;
     max-height: 400px;
     overflow-y: auto;
     white-space: pre-wrap;
     word-break: break-all;
 }

 .user-role-badge {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 600;
     margin: 2px;
     text-transform: uppercase;
 }

 .role-admin {
     background-color: #dc3545;
     color: white;
 }

 .role-manager {
     background-color: #fd7e14;
     color: white;
 }

 .role-user {
     background-color: #6c757d;
     color: white;
 }

 .role-custom {
     background-color: #6f42c1;
     color: white;
 }

 .status-badge {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 600;
 }

 /* Status de Estoque (Stock Status) */
 .status-disponivel {
     background-color: #28a745;
     color: white;
 }

 .status-em_uso {
     background-color: #007bff;
     color: white;
 }

 .status-reservado {
     background-color: #6c757d;
     color: white;
 }

 .status-baixado {
     background-color: #dc3545;
     color: white;
 }

 /* Status de Condição (Condition Status) */
 .condition-novo {
     background-color: #28a745;
     color: white;
 }

 .condition-usado {
     background-color: #fd7e14;
     color: white;
 }

 .condition-danificado {
     background-color: #dc3545;
     color: white;
 }

 .condition-em_manutencao {
     background-color: #ffc107;
     color: #212529;
 }

 /* Status de Movimentação (Movement Status) */
 .movement-pendente {
     background-color: #ffc107;
     color: #212529;
 }

 .movement-confirmado {
     background-color: #28a745;
     color: white;
 }

 .movement-rejeitado {
     background-color: #dc3545;
     color: white;
 }

 /* Tipos de Movimentação (Movement Types) */
 .type-checkout {
     background-color: #0d6efd;
     color: white;
     border-left: 4px solid #0d6efd;
 }

 .type-checkin {
     background-color: #198754;
     color: white;
     border-left: 4px solid #198754;
 }

 .type-transfer {
     background-color: #ffc107;
     color: #212529;
     border-left: 4px solid #ffc107;
 }

 .type-status_change {
     background-color: #6f42c1;
     color: white;
     border-left: 4px solid #6f42c1;
 }

 .type-condition_change {
     background-color: #20c997;
     color: white;
     border-left: 4px solid #20c997;
 }

 /* Classes para tabelas/linhas com base no status */
 .table-row-disponivel {
     background-color: rgba(40, 167, 69, 0.1);
 }

 .table-row-em_uso {
     background-color: rgba(13, 110, 253, 0.1);
 }

 .table-row-reservado {
     background-color: rgba(108, 117, 125, 0.1);
 }

 .table-row-baixado {
     background-color: rgba(220, 53, 69, 0.1);
 }

 .table-row-novo {
     border-left: 4px solid #28a745;
 }

 .table-row-usado {
     border-left: 4px solid #fd7e14;
 }

 .table-row-danificado {
     border-left: 4px solid #dc3545;
 }

 .table-row-em_manutencao {
     border-left: 4px solid #ffc107;
 }

 /* Classes para ícones coloridos */
 .icon-status-disponivel {
     color: #28a745;
 }

 .icon-status-em_uso {
     color: #007bff;
 }

 .icon-status-reservado {
     color: #6c757d;
 }

 .icon-status-baixado {
     color: #dc3545;
 }

 .icon-condition-novo {
     color: #28a745;
 }

 .icon-condition-usado {
     color: #fd7e14;
 }

 .icon-condition-danificado {
     color: #dc3545;
 }

 .icon-condition-em_manutencao {
     color: #ffc107;
 }

 /* Badges com gradiente para combinações de status */
 .badge-stock-disponivel {
     background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
     color: white;
 }

 .badge-stock-em_uso {
     background: linear-gradient(135deg, #007bff 0%, #0dcaf0 100%);
     color: white;
 }

 .badge-stock-reservado {
     background: linear-gradient(135deg, #6c757d 0%, #adb5bd 100%);
     color: white;
 }

 .badge-stock-baixado {
     background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
     color: white;
 }

 .badge-condition-novo {
     background: linear-gradient(135deg, #28a745 0%, #198754 100%);
     color: white;
 }

 .badge-condition-usado {
     background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
     color: white;
 }

 .badge-condition-danificado {
     background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
     color: white;
 }

 .badge-condition-em_manutencao {
     background: linear-gradient(135deg, #ffc107 0%, #ffca2c 100%);
     color: #212529;
 }

 /* Classes para o sistema de confirmação */
 .status-requires-action {
     background-color: #fff3cd;
     border: 1px solid #ffeaa7;
     border-left: 4px solid #ffc107;
 }

 .status-awaiting-confirmation {
     background-color: #d1ecf1;
     border: 1px solid #bee5eb;
     border-left: 4px solid #0dcaf0;
 }

 .status-action-completed {
     background-color: #d4edda;
     border: 1px solid #c3e6cb;
     border-left: 4px solid #28a745;
 }

 .status-action-rejected {
     background-color: #f8d7da;
     border: 1px solid #f5c6cb;
     border-left: 4px solid #dc3545;
 }

 /* Tooltips coloridos para status */
 .tooltip-status-disponivel .tooltip-inner {
     background-color: #28a745;
     color: white;
 }

 .tooltip-status-disponivel .tooltip-arrow {
     border-top-color: #28a745;
 }

 .tooltip-status-em_uso .tooltip-inner {
     background-color: #007bff;
     color: white;
 }

 .tooltip-status-em_uso .tooltip-arrow {
     border-top-color: #007bff;
 }

 .tooltip-status-reservado .tooltip-inner {
     background-color: #6c757d;
     color: white;
 }

 .tooltip-status-reservado .tooltip-arrow {
     border-top-color: #6c757d;
 }

 .tooltip-status-baixado .tooltip-inner {
     background-color: #dc3545;
     color: white;
 }

 .tooltip-status-baixado .tooltip-arrow {
     border-top-color: #dc3545;
 }

 /* Classes para uso em selects/dropdowns */
 .option-status-disponivel {
     color: #28a745;
     font-weight: bold;
 }

 .option-status-em_uso {
     color: #007bff;
     font-weight: bold;
 }

 .option-status-reservado {
     color: #6c757d;
     font-weight: bold;
 }

 .option-status-baixado {
     color: #dc3545;
     font-weight: bold;
 }

 /* Animações para mudanças de status */
 @keyframes statusChangeToAvailable {
     0% {
         background-color: #007bff;
     }

     100% {
         background-color: #28a745;
     }
 }

 @keyframes statusChangeToInUse {
     0% {
         background-color: #28a745;
     }

     100% {
         background-color: #007bff;
     }
 }

 .status-changing-to-disponivel {
     animation: statusChangeToAvailable 0.5s ease-in-out;
 }

 .status-changing-to-em_uso {
     animation: statusChangeToInUse 0.5s ease-in-out;
 }

 /* Classes para filtros ativos */
 .filter-active-disponivel {
     box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
 }

 .filter-active-em_uso {
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }

 .filter-active-reservado {
     box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
 }

 .filter-active-baixado {
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }

 /* Classes para cards baseados em status */
 .card-status-disponivel {
     border-top: 4px solid #28a745;
 }

 .card-status-em_uso {
     border-top: 4px solid #007bff;
 }

 .card-status-reservado {
     border-top: 4px solid #6c757d;
 }

 .card-status-baixado {
     border-top: 4px solid #dc3545;
 }

 /* Classes para progress bars baseadas em status */
 .progress-status-disponivel .progress-bar {
     background-color: #28a745;
 }

 .progress-status-em_uso .progress-bar {
     background-color: #007bff;
 }

 .progress-status-reservado .progress-bar {
     background-color: #6c757d;
 }

 .progress-status-baixado .progress-bar {
     background-color: #dc3545;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .status-badge {
         font-size: 0.7rem;
         padding: 2px 6px;
     }

     .table-row-disponivel,
     .table-row-em_uso,
     .table-row-reservado,
     .table-row-baixado {
         opacity: 0.8;
     }
 }

 /* Dark mode support */
 @media (prefers-color-scheme: dark) {
     .status-disponivel {
         background-color: #198754;
         color: white;
     }

     .status-em_uso {
         background-color: #0d6efd;
         color: white;
     }

     .status-reservado {
         background-color: #495057;
         color: white;
     }

     .status-baixado {
         background-color: #c82333;
         color: white;
     }

     .table-row-disponivel {
         background-color: rgba(25, 135, 84, 0.2);
     }

     .table-row-em_uso {
         background-color: rgba(13, 110, 253, 0.2);
     }

     .table-row-reservado {
         background-color: rgba(73, 80, 87, 0.2);
     }

     .table-row-baixado {
         background-color: rgba(200, 35, 51, 0.2);
     }
 }

 .btn-group-sm .btn {
     padding: 0.25rem 0.5rem;
     font-size: 0.875rem;
 }

 #api-status {
     position: fixed;
     bottom: 20px;
     right: 20px;
     padding: 10px 15px;
     border-radius: 5px;
     font-size: 0.9rem;
     z-index: 1000;
 }

 .api-status-connected {
     background-color: #d4edda;
     color: #155724;
     border: 1px solid #c3e6cb;
 }

 .api-status-disconnected {
     background-color: #f8d7da;
     color: #721c24;
     border: 1px solid #f5c6cb;
 }

 .token-display {
     background-color: #f8f9fa;
     border: 1px solid #dee2e6;
     border-radius: 5px;
     padding: 10px;
     font-family: monospace;
     font-size: 0.8rem;
     word-break: break-all;
     max-height: 80px;
     overflow-y: auto;
 }

 .modal-xl {
     max-width: 90%;
 }

 .permission-item {
     border: 1px solid #dee2e6;
     border-radius: 5px;
     padding: 10px;
     margin-bottom: 5px;
     background-color: #f8f9fa;
 }

 .permission-item.selected {
     background-color: #d1ecf1;
     border-color: #0c5460;
 }

 .role-permissions-container {
     max-height: 400px;
     overflow-y: auto;
     border: 1px solid #dee2e6;
     border-radius: 5px;
     padding: 10px;
 }

 .empty-state {
     text-align: center;
     padding: 40px 20px;
     color: #6c757d;
 }

 .empty-state i {
     font-size: 3rem;
     margin-bottom: 15px;
     color: #dee2e6;
 }

 .table-empty {
     text-align: center;
     padding: 30px;
     color: #6c757d;
 }

 /* Adicionar ao arquivo CSS existente */
 #serials-container .serial-item {
     padding: 8px 12px;
     margin-bottom: 6px;
     background-color: #f8f9fa;
     border-radius: 4px;
     border-left: 4px solid #0d6efd;
 }

 #serials-container .serial-item:hover {
     background-color: #e9ecef;
 }

 .serial-badge {
     font-size: 0.75rem;
     padding: 2px 6px;
 }

 #scanner-overlay {
     box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.5);
 }

 #scanner-status .spinner-border {
     width: 1rem;
     height: 1rem;
 }

 /* Estilos para loading das abas */
 .tab-loading {
     text-align: center;
     padding: 40px 20px;
 }

 .tab-loading .spinner-border {
     width: 3rem;
     height: 3rem;
 }

 .tab-loaded {
     display: none;
 }

 .tab-empty {
     text-align: center;
     padding: 40px 20px;
     color: #6c757d;
     display: none;
 }

 .loader {
     width: 48px;
     height: 48px;
     border: 3px solid #FFF;
     border-radius: 50%;
     display: inline-block;
     position: relative;
     box-sizing: border-box;
     animation: rotation 1s linear infinite;
 }

 .loader::after {
     content: '';
     box-sizing: border-box;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 56px;
     height: 56px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-bottom-color: #FF3D00;
 }

 @keyframes rotation {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .container-load {
     width: 100vw;
     height: 100vh;
     background-color: #f0f0f0;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* Estilos para o processo automático */
 .serial-pending {
     background-color: #fff3cd !important;
     border-left: 4px solid #ffc107 !important;
     animation: pulse 1s infinite;
 }

 @keyframes pulse {
     0% {
         opacity: 1;
     }

     50% {
         opacity: 0.7;
     }

     100% {
         opacity: 1;
     }
 }

 #serial-input:focus {
     border-color: #28a745;
     box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
 }

 #scanner-info {
     border-left: 4px solid #28a745;
 }

 #serial-types-section {
     transition: all 0.3s ease;
 }

 #serial-types-section.slide-in {
     animation: slideIn 0.3s ease;
 }

 #serial-types-section.slide-out {
     animation: slideOut 0.3s ease;
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

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

 @keyframes slideOut {
     from {
         opacity: 1;
         transform: translateY(0);
     }

     to {
         opacity: 0;
         transform: translateY(-10px);
     }
 }

 .hidden {
     display: none !important;
 }

 .visible {
     display: block !important;
 }

 .serial-type-item {
     background-color: #f8f9fa;
     transition: all 0.3s ease;
     border: 1px solid #dee2e6;
     border-radius: 0.375rem;
     animation: fadeIn 0.3s ease;
 }

 .serial-type-item:hover {
     background-color: #e9ecef;
     border-color: #adb5bd;
 }

 .serial-type-item .form-control.is-invalid {
     border-color: #dc3545;
     box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.95);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 #model-serial-quantity {
     font-weight: bold;
     background-color: #f8f9fa;
     min-width: 60px;
     text-align: center;
 }

 .input-group button {
     width: 40px;
     font-weight: bold;
 }

 .input-group button:hover {
     background-color: #e9ecef;
 }

 /* Feedback visual para quantidade zero */
 #model-serial-quantity[value="0"] {
     color: #6c757d;
     font-style: italic;
 }

 /* Botão de adicionar tipo */
 .btn-outline-primary:hover {
     background-color: #0d6efd;
     color: white;
 }

 /* Estilo para botão de remover */
 .btn-outline-danger:hover {
     background-color: #dc3545;
     color: white;
 }

 /* Responsividade */
 @media (max-width: 768px) {
     .serial-type-item {
         padding: 0.75rem !important;
     }

     .serial-type-item .d-flex {
         flex-direction: column;
         align-items: flex-start !important;
     }

     .serial-type-item button {
         margin-top: 0.5rem;
         align-self: flex-end;
     }
 }

 /* Ajustes para inputs dentro de serial-type-item */
 .serial-type-item input {
     transition: all 0.2s ease;
 }

 .serial-type-item input:focus {
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
     border-color: #86b7fe;
 }

 /* Indicador visual para campos obrigatórios */
 .serial-type-item label::after {
     content: ' *';
     color: #dc3545;
     opacity: 0.8;
 }

 /* Estilos para a tabela de permissões */
 .permissions-table {
     font-size: 0.9rem;
     margin: 0;
 }

 .permissions-table thead th {
     background-color: #f8f9fa;
     font-weight: 600;
     text-align: center;
     vertical-align: middle;
     border-bottom: 2px solid #dee2e6;
     padding: 12px 8px;
     white-space: nowrap;
 }

 .permissions-table tbody td {
     vertical-align: middle;
     padding: 10px 8px;
 }

 .permissions-table tbody tr:nth-child(even) {
     background-color: #f8f9fa;
 }

 .permissions-table tbody tr:hover {
     background-color: #e9ecef;
 }

 .permissions-table .text-center i {
     font-size: 1.2rem;
     display: block;
     margin: 0 auto;
 }

 .permissions-table .text-muted {
     color: #adb5bd !important;
     font-size: 1rem;
 }

 /* Estilos para a card da role */
 .role-card {
     border: 1px solid #dee2e6;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     overflow: hidden;
 }

 .role-card .card-header {
     border-bottom: 2px solid #e9ecef;
     padding: 15px 20px;
 }

 .role-card .card-body {
     padding: 0;
 }

 /* Responsividade */
 @media (max-width: 1200px) {
     .permissions-table {
         font-size: 0.85rem;
     }

     .permissions-table thead th,
     .permissions-table tbody td {
         padding: 8px 6px;
     }
 }

 @media (max-width: 992px) {
     .role-card .card-header {
         flex-direction: column;
         align-items: flex-start !important;
     }

     .role-card .btn-group {
         margin-top: 10px;
         width: 100%;
         justify-content: flex-start;
     }

     .role-card .btn-group .btn {
         flex: 1;
         white-space: nowrap;
     }
 }

 /* Scroll horizontal para telas menores */
 @media (max-width: 768px) {
     .table-responsive {
         border-radius: 0;
     }

     .permissions-table {
         min-width: 800px;
     }
 }

 /* Estilos para recuperação de senha */
 .verification-input {
     width: 50px;
     height: 60px;
     font-size: 24px;
     font-weight: bold;
     border: 2px solid #dee2e6;
     transition: all 0.2s;
 }

 .verification-input:focus {
     border-color: #0d6efd;
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
     transform: translateY(-2px);
 }

 .verification-input.filled {
     border-color: #198754;
     background-color: rgba(25, 135, 84, 0.05);
 }

 .validation-item {
     display: flex;
     align-items: center;
     margin-bottom: 4px;
     font-size: 13px;
     color: #6c757d;
     transition: all 0.3s;
 }

 .validation-item.valid {
     color: #198754;
 }

 .validation-item.valid i {
     color: #198754;
 }

 .validation-item.invalid {
     color: #dc3545;
 }

 .validation-item.invalid i {
     color: #dc3545;
 }

 /* Força da senha */
 .progress-bar-weak {
     background-color: #dc3545 !important;
 }

 .progress-bar-medium {
     background-color: #ffc107 !important;
 }

 .progress-bar-strong {
     background-color: #198754 !important;
 }

 .progress-bar-very-strong {
     background-color: #0d6efd !important;
 }

 /* Animações */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

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

 .step-transition {
     animation: fadeIn 0.3s ease-out;
 }