/* =============================================================================
   ARQUIVO DE ESTILOS GLOBAIS - SEPAR
   ========================================================================== */

/* * ÍNDICE:
 * 1. VARIÁVEIS E ESTILOS BASE
 * 2. LAYOUT PRINCIPAL
 * 2.1. Sidebar (Menu Lateral)
 * 2.2. Header Superior e Conteúdo Principal
 * 3. COMPONENTES GLOBAIS
 * 3.1. Botões e Inputs
 * 3.2. Badges (Etiquetas)
 * 3.3. Painel Kanban
 * 3.4. Tabelas
 * 4. PÁGINAS ESPECÍFICAS
 * 4.1. Página de Login
 * 4.2. Página de Dashboard (Index)
 * 4.3. Página de Visualização de Pedido
 * 4.4. Páginas de Consulta e Gerenciamento
 * 5. RESPONSIVIDADE (MOBILE)
*/

/* =============================================================================
   1. VARIÁVEIS E ESTILOS BASE
   ========================================================================== */
:root {
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 75px;
    --theme-primary: #054c68;
    --theme-accent: #FB8C00;
    --theme-dark: #212529;
    --theme-light-gray: #f8f9fa; /* Alterado para um cinza mais visível */
    --header-height: 70px; /* Altura do cabeçalho aumentada */
    --theme-border-color: #b0b6bbee;
}

/* Classe temporária para desabilitar transições durante a inicialização JS */
.no-transition * {
    transition: none !important;
}

body {
    background-color: #ffffff;
    transition: margin-left 0.3s ease;
}

/* Helpers */
/*
  Ajuste para o painel lateral fixo.
  Usa a variável --header-height para se ajustar automaticamente.
  O z-index garante que ele fique abaixo do header.
*/
.sticky-top-custom { 
    top: calc(var(--header-height) + 5px); /* 5px de margem */
    z-index: 1019;
}

/* Aplica as cores dinâmicas ao header quando as variáveis CSS são definidas */
.top-header { background-color: var(--dynamic-header-bg, #e9ecef); }
.top-header .page-title, .top-header .btn-link i, .top-header #mobileMenuToggle i, .top-header .header-actions .nav-link, .top-header .header-actions .notification-icon, .top-header .header-actions .user-info i, .top-header .header-actions .user-name { color: var(--dynamic-header-text, #495057); }

.history-scroll { max-height: 400px; overflow-y: auto; }
.truncate {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

/* 2.1. Sidebar (Menu Lateral) */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--sidebar-width);
    background-color: var(--theme-dark);
    color: #fff;
    padding-top: 20px;
    transition: width 0.3s ease, transform 0.3s ease;
    z-index: 1030;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinha à esquerda por padrão */
    padding: 0 20px 20px 20px;
    border-bottom: 1px solid #3a3f44;
    flex-shrink: 0;
    gap: 15px; /* Espaçamento entre a logo e o título */
}
.sidebar-header img { height: 40px; transition: opacity 0.3s; }

.sidebar-title-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sidebar-header .title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-left: 0; /* Remove a margem antiga */
}

.sidebar-header .subtitle {
    font-size: 0.75rem;
    font-weight: 300;
    color: #adb5bd;
}

.sidebar-header .sidebar-logo {
    cursor: pointer; /* Adiciona o cursor de clique apenas na logo */
}

.sidebar-menu { list-style: none; padding: 20px 0 0 0; margin: 0; }
.sidebar-menu .nav-item .nav-link {
    display: flex;
    align-items: center;
    padding: 14px 25px; /* Aumentado para melhor espaçamento vertical */
    color: #ffffff; /* Cor da fonte alterada para branco */
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-menu .nav-item .nav-link.active {
    background-color: var(--theme-accent);
    color: #fff;
    font-weight: 500;
}
.sidebar-menu .nav-link i {
    font-size: 1.3rem;
    margin-right: 20px;
    transition: margin 0.3s ease;
}
.sidebar-menu .nav-link .link-text { opacity: 1; transition: opacity 0.2s ease; }

.sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid #3a3f44;
    flex-shrink: 0;
}
.sidebar-footer .user-info-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Dropdowns do menu */
.dropdown-menu-dark {
    border-color: #495057;
    --bs-dropdown-link-color: #dee2e6;
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: #495057;
}
.dropdown-menu-dark .notification-read {
    color: #adb5bd !important;
    font-weight: normal !important;
}

/* Estado recolhido */
body.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
body.sidebar-collapsed .sidebar-title-wrapper { opacity: 0; width: 0; }
body.sidebar-collapsed .sidebar-menu .nav-link { justify-content: center; }
body.sidebar-collapsed .sidebar-menu .nav-link i { margin-right: 0; }
body.sidebar-collapsed .sidebar-menu .nav-link .link-text { opacity: 0; width: 0; display: none; }

/* 2.2. Header Superior e Conteúdo Principal */
.main-content {
    margin-left: var(--sidebar-width);
    padding-top: var(--header-height);
    transition: margin-left 0.3s ease;
}
body.sidebar-collapsed .main-content { margin-left: var(--sidebar-width-collapsed); }

.top-header {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--sidebar-width); 
    height: var(--header-height); /* Usa a variável global */
    background-color: #e9ecef; /* Fundo cinza mais escuro */
    border-bottom: 1px solid var(--theme-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 1020;
    transition: left 0.3s ease;
}
body.sidebar-collapsed .top-header { left: var(--sidebar-width-collapsed); }
.header-start {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header-with-back-button {
    /* Garante que o título e o botão de voltar fiquem alinhados na linha de base */
    align-items: center;
}
.page-title {
    font-size: 1.4rem;
    font-weight: 700; /* Alterado para negrito (bold) */
    color: #343a40; /* Cor do título ajustada para o novo fundo */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}
.header-actions { display: flex; align-items: center; gap: 1.5rem; }
.page-title .badge-fase {
    vertical-align: middle; /* Alinha o badge com o centro do texto */
    margin-top: -4px; /* Ajusta a margem para o novo tamanho */
    margin-bottom: 0;
    padding-top: 0.7em; /* Aumenta a altura do badge */
    padding-bottom: 0.7em; /* Aumenta a altura do badge */
}

.header-actions .nav-link { color: #495057; }
.header-actions .nav-link:hover { color: var(--theme-primary); }
.header-actions .notification-icon { font-size: 1.5rem; }
.header-actions .user-info i { font-size: 1.6rem; }

/* Botão do menu mobile - inicialmente escondido */
/* Ajuste para o novo botão de voltar no header */
.page-title .btn-link {
    vertical-align: sub; /* Alinha o ícone com o texto */
}

#mobileMenuToggle {
    display: none;
    font-size: 1.5rem;
}

/* =============================================================================
   3. COMPONENTES GLOBAIS
   ========================================================================== */

/* 3.1. Botões e Inputs */
.btn-upload-custom {
    border: 1px solid var(--theme-accent);
    background-color: var(--theme-accent);
    color: #fff;
}
.btn-upload-custom:hover,
.btn-upload-custom:focus { background-color: #e67e00; border-color: #e67e00; color: #fff; }
.file-chosen-text { margin-left: 10px; font-style: italic; color: #6c757d; }

/* Botão com dimensões correspondentes ao badge da fase */
.btn-fase-match {
    width: 110px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* --- NOVA CLASSE PARA BOTÕES DE LARGURA IGUAL --- */
.btn-equal-width {
    flex-grow: 1;
    flex-basis: 0;
    white-space: nowrap;
}

/* 3.2. Badges (Etiquetas) */
.badge-fase, .badge-local {
    padding: 0.5em 1em; /* Aumentado padding para mais respiro */
    font-weight: 400; /* Alterado para peso normal (sem negrito) */
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    color: #fff;
    font-size: 0.8rem; /* Fonte ligeiramente menor */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase; /* Texto em caixa alta */
    width: 110px; /* Largura fixa para padronização */
    height: 35px; /* Altura fixa para padronização */
}
/* Fases */
.badge-fase-pedido, .badge-fase-separado { background-color: #1E88E5; }
.badge-fase-separar, .badge-fase-faturado { background-color: #dc3545; } /* Vermelho */
.badge-fase-faturar { background-color: #8E24AA; }
.badge-fase-coletado { background-color: #43A047; }

/* Locais */
.badge-cd { background-color: var(--theme-primary); }
.badge-loja { background-color: #ff7b39; }

/* 3.3. Painel Kanban */
.kanban-column {
    border-left: 1px solid #e9ecef; /* Cor da borda mais suave */
    border-right: 1px solid #e9ecef; /* Cor da borda mais suave */
}

.kanban-column-header {
    padding: 1rem 1.25rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.kanban-cards {
    background-color: var(--theme-light-gray);
    padding: 0.5rem 1rem 1rem 1rem; /* Reduzido padding superior */
    border: none; /* Remove a moldura que envolve o grupo de cards */
    /* border-top: none; */ /* Não é mais necessário com a remoção da borda */
    border-radius: 0 0 0.5rem 0.5rem;
}
.kanban-cards.is-empty {
    min-height: 20vh;
    padding: 2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.scrollable-cards { max-height: 900px; overflow-y: auto; padding-right: 8px; }
.scrollable-cards::-webkit-scrollbar { width: 8px; }
.scrollable-cards::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.scrollable-cards::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
.scrollable-cards::-webkit-scrollbar-thumb:hover { background: #555; }

.kanban-card { padding: 1.25rem 0.5rem; border-bottom: 1px solid var(--theme-border-color); font-size: 0.9rem; }
.kanban-card:first-child {
    padding-top: 0; /* Remove o padding superior do primeiro card */
    border-top: none; /* Garante que não haja borda superior no primeiro card */
}
.kanban-card:hover { background-color: #fcfcfc; }
.card-line { display: flex; align-items: center; margin-bottom: 0.3rem; gap: 0.6rem; color: #495057; }
.card-line .bi { color: #6c757d; font-size: 1.1rem; }
.card-header-info { font-size: 1.12rem; font-weight: 600; } /* Aumentado */
.card-header-info .bi { font-size: 1.1rem; }
.cliente-line { font-size: 1.1rem; font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.75rem; color: #212529; } /* Diminuído */
.deposito-faturar-diff {
    background-color: #ffe566;
    color: #554400;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
}

/* Alertas */
.needs-review {
    background-color: #fff5f5 !important;
    border-top: 1px solid #e53e3e;
    border-bottom: 1px solid #e53e3e;
    animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(229, 62, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
}
.review-done {
    background-color: #f0fff4 !important;
    border-top: 1px solid #38a169;
    border-bottom: 1px solid #38a169;
}

/* 3.4. Tabelas */
.table > thead {
    /* background-color: var(--theme-primary); */ /* Removido para um visual mais limpo */
    color: var(--theme-dark);
    text-transform: uppercase;
    letter-spacing: 0.8px; /* Aumenta o espaçamento para melhor leitura */
    font-size: 0.85rem; /* Aumentado para maior destaque */
}
.table > thead th {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    color: var(--theme-dark); /* Cor do texto do cabeçalho */
    white-space: nowrap;
    border-bottom: 2px solid var(--theme-border-color); /* Borda inferior mais forte */
    font-weight: 600; /* Fonte mais destacada */
}
.table > thead a.sortable-header { color: var(--theme-dark); text-decoration: none; } /* Links com a cor do cabeçalho */

/* Corpo da tabela padronizado */
.table tbody tr {
    background-color: #ffffff;    /* fix: fundo claro uniforme */
    color: #212529;               /* fix: texto escuro legível */
}
.table tbody tr:nth-child(even) { background-color: #f8f9fa; }
.table tbody tr:hover { background-color: #e9ecef; }

/* Remove cantos arredondados das tabelas dentro de cards */
.card > .table-responsive > .table { border-radius: 0; }

/* Containers auxiliares */
.docs-container {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5rem;
}
.actions-container {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 0.25rem;
}
/* Regra mais específica para garantir a sobreposição */
.actions-container .btn.btn-action {
    width: 38px;      /* Largura fixa */
    height: 38px;     /* Altura fixa */
    min-width: 38px;  /* Largura mínima */
    min-height: 38px; /* Altura mínima */
    display: inline-flex; /* Essencial para alinhamento */
    align-items: center;
    justify-content: center;
    padding: 0;       /* Remove padding interno do Bootstrap */
    font-weight: normal; /* Garante que não esteja em negrito */
}
.doc-slot-placeholder { color: #dee2e6 !important; }

/* Overlay para o menu mobile */
.sidebar-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); z-index: 1029;
    opacity: 0; transition: opacity 0.3s ease;
}

/* =============================================================================
   4. PÁGINAS ESPECÍFICAS
   ========================================================================== */

/* 4.1. Página de Login */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    background: linear-gradient(-45deg, #054c68, #054c68, #000000, #f8f9fa);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
.login-card-vertical {
    width: 100%;
    max-width: 400px;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.login-header { text-align: center; margin-bottom: 2rem; }
.login-icon { font-size: 4rem; color: var(--theme-primary); margin-bottom: 1rem; }
.login-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--theme-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}
.login-subtitle { font-size: 1rem; color: #6c757d; margin-top: 0.25rem; }

/* 4.2. Página de Dashboard (Index) */
.welcome-header h1 { font-weight: 600; }
.dashboard-card {
    display: block;
    text-decoration: none;
    color: #212529;
    background-color: #fff;
    border: 1px solid var(--theme-border-color);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    height: 100%;
}
.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    color: var(--theme-primary);
}
.dashboard-card .icon-wrapper { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1; }
.dashboard-card h3 { font-size: 1.25rem; font-weight: 600; }
.dashboard-card p { color: #6c757d; font-size: 0.9rem; }

/* 4.3. Página de Visualização de Pedido */
.attention-history-item { background-color: #f8d7da !important; border-left: 4px solid #dc3545; }
.review-done-history-item { background-color: #d1e7dd !important; border-left: 4px solid #198754; }

/* 4.4. Páginas de Consulta e Gerenciamento */
.col-grupo { width: 30%; min-width: 250px; }
.col-valor { width: 8.75%; min-width: 110px; }
.truncate-text { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

.table-permissions th, .table-permissions td { vertical-align: middle; text-align: center; }
.table-permissions .page-name { text-align: left; font-weight: 500; }
.fases-container {
    font-size: 0.8rem; margin-top: 5px; padding: 5px; border-top: 1px solid #eee;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.fases-container .form-check-label { cursor: pointer; }
.fases-container .interacao-label { font-weight: bold; color: #0d6efd; }

/* =============================================================================
   AJUSTES GLOBAIS DE CARD
   ========================================================================== */
.card {
    border: 1px solid var(--theme-border-color); /* Adiciona moldura fina */
    margin-bottom: 1.5rem; /* Diminui a margem externa inferior */
}
.card-body {
    padding: 1.5rem; /* Aumenta a margem interna */
}
/* =============================================================================
   CORREÇÃO PARA CABEÇALHOS DE TABELA ESCUROS
   ========================================================================== */
.table > thead.table-dark th {
    color: #fff;
}

/* =============================================================================
   4.5. PÁGINAS DE IMPORTAÇÃO (NOVO DESIGN)
   ========================================================================== */
.import-container {
    max-width: 700px;
    margin: 2rem auto;
    animation: fadeInSlideUp 0.6s ease-out forwards;
}

@keyframes fadeInSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.import-card {
    background-color: #fff;
    border: 1px solid var(--theme-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
}

.import-header {
    background-color: var(--theme-light-gray);
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--theme-border-color);
}

.import-header .icon {
    font-size: 3.5rem;
    color: var(--theme-primary);
    margin-bottom: 1rem;
}

.import-header h3 {
    font-weight: 600;
    color: var(--theme-dark);
    margin-bottom: 0.25rem;
}

.import-header p {
    color: #6c757d;
    margin-bottom: 0;
}

.import-body {
    padding: 0; /* Remove padding para a dropzone ocupar tudo */
}

.import-body-content {
    padding: 1.5rem 2rem 2rem 2rem; /* Adiciona padding para o conteúdo abaixo da dropzone */
}

.import-card .card-footer {
    padding: 1.5rem 2rem; /* Aumenta o padding do rodapé para afastar os botões */
}

.upload-dropzone {
    border: 3px dashed #dce0e4;
    border-left: none; /* Remove bordas laterais */
    border-right: none;
    border-radius: 0; /* Remove cantos arredondados */
    padding: 3rem;
    text-align: center;
    cursor: pointer;
    display: block; /* Garante que o label ocupe a largura total */
    width: 100%; /* Força a largura a 100% */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.upload-dropzone.is-dragover {
    background-color: #f0f5ff;
    border-color: var(--theme-primary);
}

.upload-dropzone .upload-icon {
    font-size: 4rem;
    color: #ced4da;
    transition: color 0.2s ease;
}

.upload-dropzone.is-dragover .upload-icon {
    color: var(--theme-primary);
}

.upload-dropzone .upload-text { font-size: 1.1rem; color: #6c757d; margin-top: 1rem; }
.upload-dropzone .upload-text strong { color: var(--theme-primary); }

/* Seção de destaque para formulários */
.highlight-section {
    background-color: #fffbeb; /* Amarelo bem claro */
    border: 1px solid #ffe58f;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

/* =============================================================================
   5. RESPONSIVIDADE (MOBILE)
   ========================================================================== */

/* Kanban em telas maiores */
@media (max-width: 992px) {
    /* --- Layout Principal (Tablet/Mobile) --- */
    .sidebar {
        transform: translateX(-100%);
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }
    body.sidebar-mobile-show .sidebar {
        transform: translateX(0);
    }
    body.sidebar-mobile-show .sidebar-overlay {
        display: block;
        opacity: 1;
    }

    /* Em mobile, a classe sidebar-collapsed não deve ter efeito, pois o mobileMenuToggle controla a visibilidade */
    body.sidebar-collapsed .sidebar { width: var(--sidebar-width); transform: translateX(0); } /* Garante que não colapse em mobile */
    body.sidebar-collapsed .sidebar-header .title { opacity: 1; }
    body.sidebar-collapsed .sidebar-menu .nav-link i { margin-right: 20px; }
    body.sidebar-collapsed .sidebar-menu .nav-link .link-text { opacity: 1; display: inline; }

    .main-content,
    body.sidebar-collapsed .main-content {
        margin-left: 0;
    }
    .top-header,
    body.sidebar-collapsed .top-header {
        left: 0;
    }
    #mobileMenuToggle {
        display: block;
    }
    .page-title {
        font-size: 1.2rem;
    }
    .header-actions .user-name {
        display: none !important;
    }
    .top-header {
        padding: 0 1rem;
    }

    /* --- Paginação --- */
    .card-footer .pagination {
        justify-content: center;
        width: 100%;
    }
    .card-footer > span {
        text-align: center;
        width: 100%;
    }

    /* --- Filtros --- */
    #filtroCollapse .row > div {
        margin-bottom: 0.5rem;
    }

    /* --- Painel Kanban (Mobile) --- */
    .kanban-column {
        flex: 1 0 100%; /* Ocupa 100% da largura, forçando o empilhamento */
        margin-bottom: 1.5rem; /* Espaço entre as colunas empilhadas */
    }
}

@media (min-width: 768px) {
    .kanban-board-container { flex-direction: row; align-items: flex-start; gap: 0.50rem; }
    .kanban-column { flex: 1; min-width: 280px; margin-bottom: 0; }
}

/* Tabelas como cards (mobile) */
@media screen and (max-width: 768px) {
    .table-responsive-cards { border: none; }
    .table-responsive-cards thead { display: none; }
    .table-responsive-cards tr {
        display: block;
        background-color: #fff;
        color: #212529;                /* fix: garantir texto escuro no modo card */
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        padding: 0.5rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .table-responsive-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 0.75rem;
        border-bottom: 1px solid #f1f1f1; /* Linha separadora entre os campos do card */
        background-color: #fff;
        position: relative; /* Essencial para o posicionamento do ::before */
    }
    .table-responsive-cards td:last-child { border-bottom: none; }
    .table-responsive-cards td::before {
        content: attr(data-label);
        padding-right: 1rem;
        font-weight: bold;
        color: #343a40;
        text-align: left;
        flex-shrink: 0;
    }
    .table-responsive-cards td > * {
        text-align: right;
    }
    .table-responsive-cards td .actions-container,
    .table-responsive-cards td .docs-container {
        justify-content: flex-end;
    }
    .table-responsive-cards tfoot { display: none; }
    .truncate-product-name { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; vertical-align: middle; }
}

/* =============================================================================
   INDICADOR DE ATUALIZAÇÃO AUTOMÁTICA (NOVO)
   ========================================================================== */
.auto-refresh-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    padding: 10px 20px;
    background-color: #343a40;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    overflow: hidden;
    
    /* Esconde o elemento por padrão */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 20px); /* Começa um pouco para baixo para efeito de subida */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.auto-refresh-indicator.show {
    /* Mostra o elemento quando a classe .show é adicionada */
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0); /* Move para a posição final */
}

.progress-bar-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
}
.progress-bar-fill {
    width: 100%;
    height: 100%;
    background-color: var(--theme-accent);
    animation: countdown-animation 5s linear forwards;
}

@keyframes countdown-animation {
    from { width: 100%; }
    to { width: 0%; }
}

/* =============================================================================
   ESTILOS DO VISUALIZADOR DE IMAGEM (MODAL)
   ========================================================================== */
/* --- NOVO: Estilo "Lightroom" para o modal de imagem --- */
.modal-image-viewer .modal-dialog {
    max-width: 95vw;
    max-height: 95vh;
    margin: auto; /* Centraliza o dialog na tela */
}
.modal-image-viewer .modal-content {
    background: transparent;
    border: none;
    position: relative; /* Garante que a toolbar se posicione em relação a este elemento */
    box-shadow: none;
}
.modal-image-viewer .modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Essencial para criar um contexto de empilhamento */
    z-index: 1; /* Garante que este contêiner fique abaixo da toolbar */
    overflow: hidden; /* Garante que a imagem com zoom não ultrapasse o body */
}
.modal-image-viewer #modal-image {
    max-width: 100%;
    max-height: 90vh; /* Deixa um espaço para os controles */
    object-fit: contain;
    transition: transform 0.2s ease-in-out;
    cursor: grab;
}
.modal-image-viewer #modal-image:active {
    cursor: grabbing;
}

/* Barra de ferramentas superior flutuante */
.image-viewer-toolbar {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; /* Garante que a toolbar fique acima do modal-body (z-index: 1) */
    background: rgba(33, 37, 41, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.image-viewer-toolbar .btn,
.image-viewer-toolbar .btn-close {
    color: #fff;
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
}
.image-viewer-toolbar .btn:hover,
.image-viewer-toolbar .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}
.image-viewer-toolbar .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Deixa o 'X' branco */
    font-size: 1rem;
}