/* Basic Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

:root {
    --cor01: #F58220;
    --cor02: #fff;
    --cor03: #000;
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--cor02);
    /* Dark background inspired by Cakto */
    color: var(--cor02);
    /* Light text color */
}

.dashboard-container {
    display: grid;
    grid-template-columns: 200px 1fr; /* Largura do Sidebar e conteúdo principal */
    grid-template-rows: auto 1fr;     /* Altura do Header e conteúdo principal */
    min-height: 100vh;
}

/* Header Styling (navbar) */


/* menu */


/* Sidebar Styling */
/* Sidebar Styling */
.sidebar {
    margin-top: 90px;  /* Ajuste para descer após o header fixo de 90px de altura (padding + imagem) */
    grid-row: 2 / -1; /* Ocupa as linhas restantes após o header */
    background-color: #fcfcfc; /* Fundo do sidebar é um branco suave */
    padding: 20px 10px;
    font-weight: 700;
    border-right: 1px solid var(--cor01); /* Borda direita laranja */
}

.sidebar .main-nav ul {
    list-style: none;
}

.sidebar .main-nav li {
    margin-bottom: 10px;
}

.sidebar .main-nav a {
    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 15px;
    padding-right: 20px;
    color: var(--cor03); /* Cor do texto padrão do link é preto */
    text-decoration: none;
    transition: background-color 0.5s ease, color 0.5s ease; /* Transição para fundo e cor do texto */
    font-size: 15px;
}

.sidebar .main-nav a:hover {
    background-color: var(--cor01); /* Fundo laranja no hover */
    border-radius: 10px;
    color: var(--cor02); /* Texto branco no hover */
}

.sidebar .main-nav i {
    margin-right: 10px;
    font-size: 16px;
    color: var(--cor01); /* Cor do ícone padrão é laranja */
    padding-right: 5px;
    transition: color 0.5s ease; /* Transição suave para a cor do ícone */
}

.sidebar .main-nav a:hover i {
    color: var(--cor02); /* Ícone branco no hover */
}

.sidebar .main-nav .new-tag {
    background-color: #4CAF50;
    /* Green for new tag */
    color: var(--cor02);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: auto;
    /* Pushes to the right */
}

/* Main Content Styling */
.main-content {
    grid-column: 2 / -1; /* Ocupa a segunda coluna até o final */
    grid-row: 2 / -1;     /* Ocupa as linhas restantes após o header */
    margin-top: 90px; /* Alinhar o conteúdo principal abaixo do header fixo */
    padding: 20px;
    overflow-y: auto; /* Permite rolagem se o conteúdo exceder a altura */
    background-color: var(--cor02); /* Fundo do conteúdo principal é branco */
    color: var(--cor03); /* Texto do conteúdo principal é preto */
}

/* Sales Filters (Tabs, Search, Filter Button) */
.sales-filters {
    background-color: var(--cor02); /* Fundo branco */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* Sombra mais suave */
    border: 1px solid #eee; /* Borda leve para separar */
}

.status-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0; /* Borda suave */
}

.status-tabs .tab-button {
    background: none;
    border: none;
    color: var(--cor03); /* Texto preto */
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent; /* Linha inferior transparente */
}

.status-tabs .tab-button:hover {
    color: var(--cor01); /* Texto laranja no hover */
}

.status-tabs .tab-button.active {
    color: var(--cor01); /* Texto laranja para tab ativa */
    border-bottom: 2px solid var(--cor01); /* Destaque laranja */
}

.search-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.search-box {
    position: relative;
    flex-grow: 1; /* Ocupa o máximo de espaço disponível */
}

.search-box input {
    width: 100%;
    padding: 10px 15px 10px 40px; /* Espaço para o ícone */
    border: 1px solid #ccc; /* Borda mais clara */
    border-radius: 5px;
    background-color: var(--cor02); /* Fundo branco */
    color: var(--cor03); /* Texto preto */
    font-size: 14px;
}

.search-box input::placeholder {
    color: #888; /* Cor do placeholder */
}

.search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888; /* Cor do ícone de pesquisa */
}

.filter-button {
    background-color: var(--cor01); /* Fundo laranja */
    color: var(--cor02); /* Texto branco */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

.filter-button:hover {
    background-color: #d16b18; /* Laranja um pouco mais escuro no hover */
}

/* Sales Table */
.sales-table-container {
    background-color: var(--cor02); /* Fundo branco */
    padding: 20px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    overflow-x: auto; /* Permite rolagem horizontal em telas pequenas */
    border: 1px solid #eee; /* Borda leve para separar */
}

.sales-table {
    width: 100%;
    border-collapse: collapse; /* Remove espaçamento entre células */
}

.sales-table th,
.sales-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0; /* Borda da célula suave */
    color: var(--cor03); /* Texto da célula preto */
}

.sales-table th {
    color: var(--cor03); /* Texto do cabeçalho da tabela é preto */
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

.sales-table tbody tr:last-child td {
    border-bottom: none; /* Remove a borda da última linha */
}

.sales-table tbody tr:hover {
    background-color: #f5f5f5; /* Fundo suave no hover da linha */
}

.sales-table .status-tag {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    color: rgb(228, 20, 20);
}

.sales-table .status-tag.paid {
    background-color: #28a745;
    color: white; /* Verde para "Pago" */
}

/* ESTILO PARA REEMBOLSADAS */
.sales-table .status-tag.refunded {
    background-color: #ffc107; /* Amarelo/Laranja para "Reembolsado" */
    color: #333; /* Texto escuro para contraste */
}
/* FIM ESTILO REEMBOLSADAS */

.sales-table .payment-method {
    display: block; /* Quebra de linha para o método de pagamento */
    font-size: 11px;
    color: #555; /* Cor um pouco mais escura para método de pagamento */
    margin-top: 3px;
}

.sales-table .email {
    display: block;
    font-size: 12px;
    color: #555;
    margin-top: 2px;
}

.sales-table .view-details {
    cursor: pointer;
    color: #888; /* Cor padrão dos pontos */
    font-size: 18px;
    transition: color 0.2s ease;
}

.sales-table .view-details:hover {
    color: var(--cor01); /* Laranja no hover */
}

/* Estilos do Modal */
.modal {
    display: none; /* <-- Mude para 'none' aqui */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    /* display: flex; REMOVA ou COMENTE esta linha */
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: var(--cor02); /* Fundo do modal é branco */
    padding: 20px;
    border-radius: 10px;
    width: 90%; /* Ajuste a largura conforme necessário */
    max-width: 700px; /* Largura máxima para telas maiores */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* Sombra para destacar */
    animation-name: animatemodal; /* Animação ao aparecer */
    animation-duration: 0.4s;
    position: relative;
    max-height: 90vh; /* Limita a altura para evitar overflow excessivo */
    display: flex; /* Organiza o conteúdo do modal em coluna */
    flex-direction: column;
    color: var(--cor03); /* Texto dentro do modal é preto */
}

@keyframes animatemodal {
    from {transform: scale(0.7); opacity: 0} /* Começa pequeno e transparente */
    to {transform: scale(1); opacity: 1}     /* Termina em tamanho normal e opaco */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0; /* Borda suave */
    margin-bottom: 15px;
}

.modal-header h2 {
    color: var(--cor03); /* Título do modal preto */
    font-size: 22px;
}

.close-button {
    color: #888; /* Cor padrão do X */
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: var(--cor01); /* Laranja no hover/focus */
    text-decoration: none;
}

.modal-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-tabs .modal-tab {
    background: none;
    border: none;
    color: var(--cor03); /* Texto preto */
    padding: 10px 0;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 2px solid transparent;
}

.modal-tabs .modal-tab:hover {
    color: var(--cor01); /* Laranja no hover */
}

.modal-tabs .modal-tab.active {
    color: var(--cor01); /* Laranja para tab ativa */
    border-bottom: 2px solid var(--cor01); /* Destaque laranja */
}

.modal-body {
    flex-grow: 1; /* Permite que o corpo do modal ocupe o espaço restante */
    overflow-y: auto; /* Permite rolagem se o conteúdo exceder a altura */
    padding-right: 5px; /* Espaço para a barra de rolagem */
}

.tab-content {
    display: none; /* Conteúdo da aba escondido por padrão */
}

.tab-content.active {
    display: block; /* Mostra o conteúdo da aba ativa */
}

.detail-item {
    display: flex;
    justify-content: space-between; /* Alinha label à esquerda, valor à direita */
    padding: 8px 0;
    border-bottom: 1px dashed #e0e0e0; /* Separador sutil */
}

.detail-item:last-child {
    border-bottom: none; /* Remove a borda do último item */
}

.detail-item .label {
    font-weight: bold;
    color: var(--cor03); /* Label preto */
    flex-basis: 40%; /* Largura para o label */
}

.detail-item .value {
    color: #555; /* Valor um pouco mais suave */
    text-align: right; /* Alinha valor à direita */
    flex-basis: 60%; /* Largura para o valor */
}

/* Estilos Específicos para Detalhes do Pedido */
.order-tab-content h4 {
    color: var(--cor03); /* Título preto */
    margin-bottom: 15px;
    font-size: 18px;
}

.order-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px dashed #e0e0e0;
}

.order-item:last-child {
    border-bottom: none;
}

.order-item .book-image {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #ccc; /* Borda mais clara */
}

.order-item .item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.order-item .item-name {
    font-weight: bold;
    color: var(--cor03); /* Nome do item preto */
    margin-bottom: 5px;
}

.order-item .item-price {
    color: var(--cor01); /* Preço laranja */
    font-weight: bold;
    font-size: 16px;
}

/* Estilos Específicos para Detalhes de Pagamento */
#payment-installments.hidden {
    display: none; /* Esconde a seção de parcelas se não houver */
}


  
.sales-cards-mobile {
    display: none; /* ESCONDIDO POR PADRÃO em desktop */
    flex-direction: column;
    gap: 15px;
  
}

.sale-card-mobile {
    background-color: var(--card-mobile-bg); /* Fundo escuro do card */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: relative;
    color: var(--text-mobile-light); /* Texto claro no card */
}

.sale-card-mobile .card-header-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sale-card-mobile .client-name-mobile {
    font-size: 16px;
    font-weight: bold;
    color: var(--text-mobile-light);
}

.sale-card-mobile .view-details-mobile {
    color: #F58220;
    font-size: 18px;
    cursor: pointer;
}

.sale-card-mobile .product-info-mobile {
    margin-bottom: 10px;
}

.sale-card-mobile .product-name-mobile {
    font-size: 14px;
    color: var(--text-mobile-medium);
}

.sale-card-mobile .card-footer-mobile {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alinha o status e valor/data na base */
}

.sale-card-mobile .value-info-mobile {
    display: flex;
    flex-direction: column;
}

.sale-card-mobile .value-mobile {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-mobile-light);
}

.sale-card-mobile .date-mobile {
    font-size: 12px;
    color: var(--text-mobile-medium);
    margin-top: 5px;
}

/* Reutilizando as tags de status existentes */
.sale-card-mobile .status-tag {
    background-color: #28a745;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    color: white; /* Garante que a tag apareça corretamente */
}

.sale-card-mobile .status-tag.refunded {
    background-color: #ffc107;
}
  



/* Add this to your style.css */

/* --- Mobile Specific Styles --- */


/* Regra para desktop: oculta o ícone do menu, mostra a sidebar (se tiver um display: none no global) */
/* Ensure these rules are correctly placed within your style.css
   and specifically inside the @media (max-width: 768px) block */

@media (max-width: 1600px) {

    .body {
        overflow-x: hidden;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        /* Empurra os itens para as extremidades */
        align-items: center;
        /* Centraliza verticalmente */
        width: 100%;
        /* Garante que ocupe a largura total */
        padding: 15px 20px;
        /* Ajuste o padding conforme necessário */
    }

    /* O ícone do menu no mobile */
    .menu-icon {
        display: block;
        /* Garante que o ícone esteja visível */
        font-size: 28px;
        color: var(--cor03);
        /* Ou a cor desejada */
        cursor: pointer;
        /* Define a ordem visual. '0' ou '1' para o primeiro item */
        order: 0;
        /* Coloca o menu-icon como o primeiro item */
    }

    /* A logo no mobile */
    .navbar .logo {
        
        display: flex;
        align-items: center;
        color: var(--cor03);
        font-size: 20px;
        font-weight: 700;
        /* Opcional: Adiciona um pequeno espaço entre o ícone e a logo */
    }
}

@media (max-width: 768px) {

    .body {
        overflow-x: hidden;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        /* Empurra os itens para as extremidades */
        align-items: center;
        /* Centraliza verticalmente */
        width: 100%;
        /* Garante que ocupe a largura total */
        padding: 15px 20px;
        /* Ajuste o padding conforme necessário */
    }

    /* O ícone do menu no mobile */
    .menu-icon {
        display: flex;
        /* Garante que o ícone esteja visível */
        font-size: 28px;
        color: var(--cor03);
        /* Ou a cor desejada */
        cursor: pointer;
        /* Define a ordem visual. '0' ou '1' para o primeiro item */
        order: 0;
        /* Coloca o menu-icon como o primeiro item */
    }

    /* A logo no mobile */
    .navbar .logo {
        margin-left:50%;
        display: flex;
        align-items: center;
        color: var(--cor03);
        font-size: 20px;
        font-weight: 700;
        /* Opcional: Adiciona um pequeno espaço entre o ícone e a logo */
    }

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000; /* abaixo da sidebar (que tem 1001) */
}

#overlay.active {
    opacity: 1;
    pointer-events: auto;
}
    .dashboard-container {
        grid-template-columns: 1fr;
        /* Crucial: Make content take full width */
        /* If you have grid-template-rows here, ensure it doesn't conflict
           with the fixed header positioning. */
    }

    .header {
        position: fixed;
        /* Header should stay at the top */
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
        /* Ensure it's on top */
    }

    .menu-icon {
        display: block;
        color: #F58220;
        /* Hamburger icon MUST be visible on mobile */
        /* Add margin-left: auto; to push it to the right within the navbar if needed */
    }

    .sidebar {
        position: fixed;
        /* ABSOLUTELY ESSENTIAL for sliding */
        top: 0;
        /* Start at the very top */
        left: -200px;
        /* HIDE IT OFF-SCREEN (assuming 200px width) */
        width: 200px;
        /* Explicit width for the sidebar */
        height: 100%;
        /* Take full viewport height */
        margin-top: 0;
        /* Remove any desktop-specific top margin */
        z-index: 1001;
        /* Ensure it's above the header and main content */
        transition: left 0.3s ease-out;
        /* Smooth slide effect */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        /* Visual depth */
        border-right: none;
        /* Remove desktop border */
        /* IMPORTANT: Do NOT set display: none; here directly.
                      The 'left' property handles visibility for the slide. */
    }

    .sidebar.active {
        /* This class is added by JavaScript */
        left: 0;
        /* Slide into view */
    }

    .main-content {
    align-items: center;
        grid-column: 1 / -1;
        /* Make main content span full width, not pushed */
        padding-top: 0px;
        /* Add space for the fixed header */
        /* Adjust other padding as desired for mobile */
        padding-left: 15px;
        padding-right: 15px;
    }

    .sales-filters {
        margin-left: 1px;
        background-color: var(--cor02); /* Fundo branco */
        padding: 5px;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* Sombra mais suave */
        border: 1px solid #eee; /* Borda leve para separar */
    }
    .status-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e0e0; /* Borda suave */
    }
    
    .status-tabs .tab-button {
        background: none;
        border: none;
        color: var(--cor03); /* Texto preto */
        padding: 10px 15px;
        cursor: pointer;
        font-weight: bold;
        transition: color 0.3s ease, border-bottom 0.3s ease;
        border-bottom: 2px solid transparent; /* Linha inferior transparente */
    }
    
    .status-tabs .tab-button:hover {
        color: var(--cor01); /* Texto laranja no hover */
    }
    
    .status-tabs .tab-button.active {
        color: var(--cor01); /* Texto laranja para tab ativa */
        border-bottom: 2px solid var(--cor01); /* Destaque laranja */
    }
    
    .search-filter-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }
    
    .search-box {
        position: relative;
        flex-grow: 1; /* Ocupa o máximo de espaço disponível */
    }
    
    .search-box input {
        width: 100%;
        padding: 10px 15px 10px 40px; /* Espaço para o ícone */
        border: 1px solid #ccc; /* Borda mais clara */
        border-radius: 5px;
        background-color: var(--cor02); /* Fundo branco */
        color: var(--cor03); /* Texto preto */
        font-size: 14px;
    }
    
    .search-box input::placeholder {
        color: #888; /* Cor do placeholder */
    }
    
    .search-box i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #888; /* Cor do ícone de pesquisa */
    }
    
    .filter-button {
        background-color: var(--cor01); /* Fundo laranja */
        color: var(--cor02); /* Texto branco */
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background-color 0.3s ease;
    }
    
    .filter-button:hover {
        background-color: #d16b18; /* Laranja um pouco mais escuro no hover */
    }
    
    /* Sales Table */
    .sales-table-container {
        display: none;
        background-color: var(--cor02); /* Fundo branco */
        padding: 20px;
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        overflow-x: auto; /* Permite rolagem horizontal em telas pequenas */
        border: 1px solid #eee; /* Borda leve para separar */
    }
    
    .sales-table {
        width: 100%;
        border-collapse: collapse; /* Remove espaçamento entre células */
    }
    
    .sales-table th,
    .sales-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0; /* Borda da célula suave */
        color: var(--cor03); /* Texto da célula preto */
    }
    
    .sales-table th {
        color: var(--cor03); /* Texto do cabeçalho da tabela é preto */
        font-weight: bold;
        font-size: 14px;
        text-transform: uppercase;
    }
    
    .sales-table tbody tr:last-child td {
        border-bottom: none; /* Remove a borda da última linha */
    }
    
    .sales-table tbody tr:hover {
        background-color: #f5f5f5; /* Fundo suave no hover da linha */
    }
    
    .sales-table .status-tag {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 12px;
        font-weight: bold;
        color: white;
    }
    
    .sales-table .status-tag.paid {
        background-color: #28a745; /* Verde para "Pago" */
    }
    
    /* ESTILO PARA REEMBOLSADAS */
    .sales-table .status-tag.refunded {
        background-color: #ffc107; /* Amarelo/Laranja para "Reembolsado" */
        color: #333; /* Texto escuro para contraste */
    }
    /* FIM ESTILO REEMBOLSADAS */
    
    .sales-table .payment-method {
        display: block; /* Quebra de linha para o método de pagamento */
        font-size: 11px;
        color: #555; /* Cor um pouco mais escura para método de pagamento */
        margin-top: 3px;
    }
    
    .sales-table .email {
        display: block;
        font-size: 12px;
        color: #555;
        margin-top: 2px;
    }
    
    .sales-table .view-details {
        cursor: pointer;
        color: #888; /* Cor padrão dos pontos */
        font-size: 18px;
        transition: color 0.2s ease;
    }
    
    .sales-table .view-details:hover {
        color: var(--cor01); /* Laranja no hover */
    }
    
    /* Estilos do Modal */
    .modal {
        display: none; /* <-- Mude para 'none' aqui */
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
        /* display: flex; REMOVA ou COMENTE esta linha */
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        background-color: var(--cor02); /* Fundo do modal é branco */
        padding: 20px;
        border-radius: 10px;
        width: 90%; /* Ajuste a largura conforme necessário */
        max-width: 700px; /* Largura máxima para telas maiores */
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* Sombra para destacar */
        animation-name: animatemodal; /* Animação ao aparecer */
        animation-duration: 0.4s;
        position: relative;
        max-height: 90vh; /* Limita a altura para evitar overflow excessivo */
        display: flex; /* Organiza o conteúdo do modal em coluna */
        flex-direction: column;
        color: var(--cor03); /* Texto dentro do modal é preto */
    }
    
    @keyframes animatemodal {
        from {transform: scale(0.7); opacity: 0} /* Começa pequeno e transparente */
        to {transform: scale(1); opacity: 1}     /* Termina em tamanho normal e opaco */
    }
    
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15px;
        border-bottom: 1px solid #e0e0e0; /* Borda suave */
        margin-bottom: 15px;
    }
    
    .modal-header h2 {
        color: var(--cor03); /* Título do modal preto */
        font-size: 22px;
    }
    
    .close-button {
        color: #888; /* Cor padrão do X */
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    
    .close-button:hover,
    .close-button:focus {
        color: var(--cor01); /* Laranja no hover/focus */
        text-decoration: none;
    }
    
    .modal-tabs {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .modal-tabs .modal-tab {
        background: none;
        border: none;
        color: var(--cor03); /* Texto preto */
        padding: 10px 0;
        cursor: pointer;
        font-weight: bold;
        transition: color 0.3s ease, border-bottom 0.3s ease;
        border-bottom: 2px solid transparent;
    }
    
    .modal-tabs .modal-tab:hover {
        color: var(--cor01); /* Laranja no hover */
    }
    
    .modal-tabs .modal-tab.active {
        color: var(--cor01); /* Laranja para tab ativa */
        border-bottom: 2px solid var(--cor01); /* Destaque laranja */
    }
    
    .modal-body {
        flex-grow: 1; /* Permite que o corpo do modal ocupe o espaço restante */
        overflow-y: auto; /* Permite rolagem se o conteúdo exceder a altura */
        padding-right: 5px; /* Espaço para a barra de rolagem */
    }
    
    .tab-content {
        display: none; /* Conteúdo da aba escondido por padrão */
    }
    
    .tab-content.active {
        display: block; /* Mostra o conteúdo da aba ativa */
    }
    
    .detail-item {
        display: flex;
        justify-content: space-between; /* Alinha label à esquerda, valor à direita */
        padding: 8px 0;
        border-bottom: 1px dashed #e0e0e0; /* Separador sutil */
    }
    
    .detail-item:last-child {
        border-bottom: none; /* Remove a borda do último item */
    }
    
    .detail-item .label {
        font-weight: bold;
        color: var(--cor03); /* Label preto */
        flex-basis: 40%; /* Largura para o label */
    }
    
    .detail-item .value {
        color: #555; /* Valor um pouco mais suave */
        text-align: right; /* Alinha valor à direita */
        flex-basis: 60%; /* Largura para o valor */
    }
    
    /* Estilos Específicos para Detalhes do Pedido */
    .order-tab-content h4 {
        color: var(--cor03); /* Título preto */
        margin-bottom: 15px;
        font-size: 18px;
    }
    
    .order-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 10px 0;
        border-bottom: 1px dashed #e0e0e0;
    }
    
    .order-item:last-child {
        border-bottom: none;
    }
    
    .order-item .book-image {
        width: 80px;
        height: 100px;
        object-fit: cover;
        border-radius: 5px;
        border: 1px solid #ccc; /* Borda mais clara */
    }
    
    .order-item .item-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .order-item .item-name {
        font-weight: bold;
        color: var(--cor03); /* Nome do item preto */
        margin-bottom: 5px;
    }
    
    .order-item .item-price {
        color: var(--cor01); /* Preço laranja */
        font-weight: bold;
        font-size: 16px;
    }
    
    /* Estilos Específicos para Detalhes de Pagamento */
    #payment-installments.hidden {
        display: none; /* Esconde a seção de parcelas se não houver */
    }
    
    
      
    .sales-cards-mobile {
        display: flex; /* ESCONDIDO POR PADRÃO em desktop */
        flex-direction: column;
        gap: 15px;
      
    }
    
    .sale-card-mobile {
        background-color: var(--card-mobile-bg); /* Fundo escuro do card */
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        color: var(--text-mobile-light); /* Texto claro no card */
    }
    
    .sale-card-mobile .card-header-mobile {
        display: flex;
        justify-content: space-between; /* Mantém a distribuição do espaço */
        align-items: center;
        margin-bottom: 10px;
    }
    
    .sale-card-mobile .client-name-mobile {
       
        margin-left: 20px;
        font-size: 14px;
        font-weight: bold;
        color: var(--text-mobile-light);
        order: 2; /* Faz o nome do cliente aparecer DEPOIS do ícone */
    }
    
    .sale-card-mobile .view-details-mobile {
      
        color: #F58220;
        font-size: 18px;
        cursor: pointer;
        order: 1; /* Faz o ícone aparecer PRIMEIRO */
    }
    .sale-card-mobile .product-info-mobile {
        margin-bottom: 10px;
    }
    
    .sale-card-mobile .product-name-mobile {
        display: none;
        font-size: 14px;
        color: var(--text-mobile-medium);
    }
    
    .sale-card-mobile .card-footer-mobile {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; /* Alinha o status e valor/data na base */
    }
    
    .sale-card-mobile .value-info-mobile {
        display: flex;
        flex-direction: column;
    }
    
    .sale-card-mobile .value-mobile {
        margin-left: 90%;
        font-size: 15px;
        font-weight: bold;
        color: var(--text-mobile-light);
    }
    
    .sale-card-mobile .date-mobile {
        margin-left:95px;
        font-size: 10px;
        color: var(--text-mobile-medium);
        margin-top: 5px;
    }
    
    /* Reutilizando as tags de status existentes */
    .sale-card-mobile .status-tag {
      
        margin-left: 80px;
        background-color: #28a745;
        display: inline-block;
        padding: 10px 90px;
        border-radius: 15px;
        font-size: 7px;
        font-weight: bold;
        color: white; /* Garante que a tag apareça corretamente */
    }
    
    .sale-card-mobile .status-tag.refunded {
        background-color: #ffc107;
    }
      
    
    
    
}

@media (max-width: 390px) {

    .body {
        overflow-x: hidden;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        /* Empurra os itens para as extremidades */
        align-items: center;
        /* Centraliza verticalmente */
        width: 100%;
        /* Garante que ocupe a largura total */
        padding: 15px 20px;
        /* Ajuste o padding conforme necessário */
    }

    /* O ícone do menu no mobile */
    .menu-icon {
        display: flex;
        /* Garante que o ícone esteja visível */
        font-size: 28px;
        color: var(--cor03);
        /* Ou a cor desejada */
        cursor: pointer;
        /* Define a ordem visual. '0' ou '1' para o primeiro item */
        order: 0;
        /* Coloca o menu-icon como o primeiro item */
    }

    /* A logo no mobile */
    .navbar .logo {
        margin-left: 24px;
        display: flex;
        align-items: center;
        color: var(--cor03);
        font-size: 20px;
        font-weight: 700;
        /* Opcional: Adiciona um pequeno espaço entre o ícone e a logo */
    }

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1000; /* abaixo da sidebar (que tem 1001) */
}

#overlay.active {
    opacity: 1;
    pointer-events: auto;
}
    .dashboard-container {
        grid-template-columns: 1fr;
        /* Crucial: Make content take full width */
        /* If you have grid-template-rows here, ensure it doesn't conflict
           with the fixed header positioning. */
    }

    .header {
        position: fixed;
        /* Header should stay at the top */
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
        /* Ensure it's on top */
    }

    .menu-icon {
        display: block;
        color: #F58220;
        /* Hamburger icon MUST be visible on mobile */
        /* Add margin-left: auto; to push it to the right within the navbar if needed */
    }

    .sidebar {
        position: fixed;
        /* ABSOLUTELY ESSENTIAL for sliding */
        top: 0;
        /* Start at the very top */
        left: -200px;
        /* HIDE IT OFF-SCREEN (assuming 200px width) */
        width: 200px;
        /* Explicit width for the sidebar */
        height: 100%;
        /* Take full viewport height */
        margin-top: 0;
        /* Remove any desktop-specific top margin */
        z-index: 1001;
        /* Ensure it's above the header and main content */
        transition: left 0.3s ease-out;
        /* Smooth slide effect */
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        /* Visual depth */
        border-right: none;
        /* Remove desktop border */
        /* IMPORTANT: Do NOT set display: none; here directly.
                      The 'left' property handles visibility for the slide. */
    }

    .sidebar.active {
        /* This class is added by JavaScript */
        left: 0;
        /* Slide into view */
    }

    .main-content {
    align-items: center;
        grid-column: 1 / -1;
        /* Make main content span full width, not pushed */
        padding-top: 0px;
        /* Add space for the fixed header */
        /* Adjust other padding as desired for mobile */
        padding-left: 15px;
        padding-right: 15px;
    }

    .sales-filters {
        margin-left: 1px;
        background-color: var(--cor02); /* Fundo branco */
        padding: 5px;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* Sombra mais suave */
        border: 1px solid #eee; /* Borda leve para separar */
    }
    .status-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e0e0; /* Borda suave */
    }
    
    .status-tabs .tab-button {
        background: none;
        border: none;
        color: var(--cor03); /* Texto preto */
        padding: 10px 15px;
        cursor: pointer;
        font-weight: bold;
        transition: color 0.3s ease, border-bottom 0.3s ease;
        border-bottom: 2px solid transparent; /* Linha inferior transparente */
    }
    
    .status-tabs .tab-button:hover {
        color: var(--cor01); /* Texto laranja no hover */
    }
    
    .status-tabs .tab-button.active {
        color: var(--cor01); /* Texto laranja para tab ativa */
        border-bottom: 2px solid var(--cor01); /* Destaque laranja */
    }
    
    .search-filter-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }
    
    .search-box {
        position: relative;
        flex-grow: 1; /* Ocupa o máximo de espaço disponível */
    }
    
    .search-box input {
        width: 100%;
        padding: 10px 15px 10px 40px; /* Espaço para o ícone */
        border: 1px solid #ccc; /* Borda mais clara */
        border-radius: 5px;
        background-color: var(--cor02); /* Fundo branco */
        color: var(--cor03); /* Texto preto */
        font-size: 14px;
    }
    
    .search-box input::placeholder {
        color: #888; /* Cor do placeholder */
    }
    
    .search-box i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #888; /* Cor do ícone de pesquisa */
    }
    
    .filter-button {
        background-color: var(--cor01); /* Fundo laranja */
        color: var(--cor02); /* Texto branco */
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background-color 0.3s ease;
    }
    
    .filter-button:hover {
        background-color: #d16b18; /* Laranja um pouco mais escuro no hover */
    }
    
    /* Sales Table */
    .sales-table-container {
        display: none;
        background-color: var(--cor02); /* Fundo branco */
        padding: 20px;
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        overflow-x: auto; /* Permite rolagem horizontal em telas pequenas */
        border: 1px solid #eee; /* Borda leve para separar */
    }
    
    .sales-table {
        width: 100%;
        border-collapse: collapse; /* Remove espaçamento entre células */
    }
    
    .sales-table th,
    .sales-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0; /* Borda da célula suave */
        color: var(--cor03); /* Texto da célula preto */
    }
    
    .sales-table th {
        color: var(--cor03); /* Texto do cabeçalho da tabela é preto */
        font-weight: bold;
        font-size: 14px;
        text-transform: uppercase;
    }
    
    .sales-table tbody tr:last-child td {
        border-bottom: none; /* Remove a borda da última linha */
    }
    
    .sales-table tbody tr:hover {
        background-color: #f5f5f5; /* Fundo suave no hover da linha */
    }
    
    .sales-table .status-tag {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 12px;
        font-weight: bold;
        color: white;
    }
    
    .sales-table .status-tag.paid {
        background-color: #28a745; /* Verde para "Pago" */
    }
    
    /* ESTILO PARA REEMBOLSADAS */
    .sales-table .status-tag.refunded {
        background-color: #ffc107; /* Amarelo/Laranja para "Reembolsado" */
        color: #333; /* Texto escuro para contraste */
    }
    /* FIM ESTILO REEMBOLSADAS */
    
    .sales-table .payment-method {
        display: block; /* Quebra de linha para o método de pagamento */
        font-size: 11px;
        color: #555; /* Cor um pouco mais escura para método de pagamento */
        margin-top: 3px;
    }
    
    .sales-table .email {
        display: block;
        font-size: 12px;
        color: #555;
        margin-top: 2px;
    }
    
    .sales-table .view-details {
        cursor: pointer;
        color: #888; /* Cor padrão dos pontos */
        font-size: 18px;
        transition: color 0.2s ease;
    }
    
    .sales-table .view-details:hover {
        color: var(--cor01); /* Laranja no hover */
    }
    
    /* Estilos do Modal */
    .modal {
        display: none; /* <-- Mude para 'none' aqui */
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
        /* display: flex; REMOVA ou COMENTE esta linha */
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        background-color: var(--cor02); /* Fundo do modal é branco */
        padding: 20px;
        border-radius: 10px;
        width: 90%; /* Ajuste a largura conforme necessário */
        max-width: 700px; /* Largura máxima para telas maiores */
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* Sombra para destacar */
        animation-name: animatemodal; /* Animação ao aparecer */
        animation-duration: 0.4s;
        position: relative;
        max-height: 90vh; /* Limita a altura para evitar overflow excessivo */
        display: flex; /* Organiza o conteúdo do modal em coluna */
        flex-direction: column;
        color: var(--cor03); /* Texto dentro do modal é preto */
    }
    
    @keyframes animatemodal {
        from {transform: scale(0.7); opacity: 0} /* Começa pequeno e transparente */
        to {transform: scale(1); opacity: 1}     /* Termina em tamanho normal e opaco */
    }
    
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15px;
        border-bottom: 1px solid #e0e0e0; /* Borda suave */
        margin-bottom: 15px;
    }
    
    .modal-header h2 {
        color: var(--cor03); /* Título do modal preto */
        font-size: 22px;
    }
    
    .close-button {
        color: #888; /* Cor padrão do X */
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    
    .close-button:hover,
    .close-button:focus {
        color: var(--cor01); /* Laranja no hover/focus */
        text-decoration: none;
    }
    
    .modal-tabs {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .modal-tabs .modal-tab {
        background: none;
        border: none;
        color: var(--cor03); /* Texto preto */
        padding: 10px 0;
        cursor: pointer;
        font-weight: bold;
        transition: color 0.3s ease, border-bottom 0.3s ease;
        border-bottom: 2px solid transparent;
    }
    
    .modal-tabs .modal-tab:hover {
        color: var(--cor01); /* Laranja no hover */
    }
    
    .modal-tabs .modal-tab.active {
        color: var(--cor01); /* Laranja para tab ativa */
        border-bottom: 2px solid var(--cor01); /* Destaque laranja */
    }
    
    .modal-body {
        flex-grow: 1; /* Permite que o corpo do modal ocupe o espaço restante */
        overflow-y: auto; /* Permite rolagem se o conteúdo exceder a altura */
        padding-right: 5px; /* Espaço para a barra de rolagem */
    }
    
    .tab-content {
        display: none; /* Conteúdo da aba escondido por padrão */
    }
    
    .tab-content.active {
        display: block; /* Mostra o conteúdo da aba ativa */
    }
    
    .detail-item {
        display: flex;
        justify-content: space-between; /* Alinha label à esquerda, valor à direita */
        padding: 8px 0;
        border-bottom: 1px dashed #e0e0e0; /* Separador sutil */
    }
    
    .detail-item:last-child {
        border-bottom: none; /* Remove a borda do último item */
    }
    
    .detail-item .label {
        font-weight: bold;
        color: var(--cor03); /* Label preto */
        flex-basis: 40%; /* Largura para o label */
    }
    
    .detail-item .value {
        color: #555; /* Valor um pouco mais suave */
        text-align: right; /* Alinha valor à direita */
        flex-basis: 60%; /* Largura para o valor */
    }
    
    /* Estilos Específicos para Detalhes do Pedido */
    .order-tab-content h4 {
        color: var(--cor03); /* Título preto */
        margin-bottom: 15px;
        font-size: 18px;
    }
    
    .order-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 10px 0;
        border-bottom: 1px dashed #e0e0e0;
    }
    
    .order-item:last-child {
        border-bottom: none;
    }
    
    .order-item .book-image {
        width: 80px;
        height: 100px;
        object-fit: cover;
        border-radius: 5px;
        border: 1px solid #ccc; /* Borda mais clara */
    }
    
    .order-item .item-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .order-item .item-name {
        font-weight: bold;
        color: var(--cor03); /* Nome do item preto */
        margin-bottom: 5px;
    }
    
    .order-item .item-price {
        color: var(--cor01); /* Preço laranja */
        font-weight: bold;
        font-size: 16px;
    }
    
    /* Estilos Específicos para Detalhes de Pagamento */
    #payment-installments.hidden {
        display: none; /* Esconde a seção de parcelas se não houver */
    }
    
    
      
    .sales-cards-mobile {
        display: flex; /* ESCONDIDO POR PADRÃO em desktop */
        flex-direction: column;
        gap: 15px;
      
    }
    
    .sale-card-mobile {
        background-color: var(--card-mobile-bg); /* Fundo escuro do card */
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        position: relative;
        color: var(--text-mobile-light); /* Texto claro no card */
    }
    
    .sale-card-mobile .card-header-mobile {
        display: flex;
        justify-content: space-between; /* Mantém a distribuição do espaço */
        align-items: center;
        margin-bottom: 10px;
    }
    
    .sale-card-mobile .client-name-mobile {
       
        margin-left: 20px;
        font-size: 10px;
        font-weight: bold;
        color: var(--text-mobile-light);
        order: 2; /* Faz o nome do cliente aparecer DEPOIS do ícone */
    }
    
    .sale-card-mobile .view-details-mobile {
      
        color: #F58220;
        font-size: 18px;
        cursor: pointer;
        order: 1; /* Faz o ícone aparecer PRIMEIRO */
    }
    .sale-card-mobile .product-info-mobile {
        margin-bottom: 10px;
    }
    
    .sale-card-mobile .product-name-mobile {
        display: none;
        font-size: 14px;
        color: var(--text-mobile-medium);
    }
    
    .sale-card-mobile .card-footer-mobile {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; /* Alinha o status e valor/data na base */
    }
    
    .sale-card-mobile .value-info-mobile {
        display: flex;
        flex-direction: column;
    }
    
    .sale-card-mobile .value-mobile {
        margin-left: 15px;
        font-size: 15px;
        font-weight: bold;
        color: var(--text-mobile-light);
    }
    
    .sale-card-mobile .date-mobile {
        margin-left: 15px;
        font-size: 10px;
        color: var(--text-mobile-medium);
        margin-top: 5px;
    }
    
    /* Reutilizando as tags de status existentes */
    .sale-card-mobile .status-tag {
      
        margin-left: 8px;
        background-color: #28a745;
        display: inline-block;
        padding: 10px 10px;
        border-radius: 15px;
        font-size: 7px;
        font-weight: bold;
        color: white; /* Garante que a tag apareça corretamente */
    }
    
    .sale-card-mobile .status-tag.refunded {
        background-color: #ffc107;
    }
      
    
    
    
}

/* Ensure this is OUTSIDE the @media (max-width: 768px) block,
 typically at the end of your stylesheet or after the mobile media query. */

 @media (max-width: 375px) {
    .main-content {
        align-items: center;
            grid-column: 1 / -1;
            /* Make main content span full width, not pushed */
            padding-top: 0px;
            /* Add space for the fixed header */
            /* Adjust other padding as desired for mobile */
            padding-left: 10px;
            padding-right: 10px;
        }
    
    .sales-filters {
        margin-left: 13px;
        background-color: var(--cor02); /* Fundo branco */
        padding: 4px;
        border-radius: 5px;
        margin-bottom: 20px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; /* Sombra mais suave */
        border: 1px solid #eee; /* Borda leve para separar */
    }
 }