/* Variáveis de cores da MRV (mantidas conforme o original) */
:root {
/* Cores Primárias da Marca */
--mrv-primary-dark: #006B3F;
--mrv-primary-pure: #079D56;
--mrv-primary-light: #54BC82;

/* Cores Secundárias da Marca */
--mrv-secondary-pure: #FF8B22;
--mrv-secondary-dark: #EF7E18;
--mrv-secondary-light: #FFA952;

/* Cores Complementares */
--mrv-complementary-01: #00D38D;
--mrv-complementary-02: #81EB5B;
--mrv-complementary-05: #793F98;

/* Cores de Suporte */
--mrv-success: #38C783;
--mrv-alert: #FFB81A;
--mrv-error: #E04C36;

/* Cores Neutras */
--mrv-neutral-xxdark: #242625;
--mrv-neutral-xdark: #434645;
--mrv-neutral-dark: #5D615F;
--mrv-neutral-medium: #999E9C;
--mrv-neutral-light: #D9DDDB;
--mrv-neutral-xlight: #F0F2F1;
--mrv-white: #FFFFFF;

/* Cores de Fundo */
--mrv-bg-01: #FFFFFF;
--mrv-bg-02: #EDF2F0;
--mrv-bg-03: #F7F5F2;
--mrv-bg-04: #F2F2F2;
}

/* Resetando alguns estilos */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Roboto', sans-serif;
background-color: var(--mrv-bg-02);
color: var(--mrv-neutral-xxdark);
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}

.container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
}

/* Header com cor primária da MRV */
header {
background-color: var(--mrv-white);
color: var(--mrv-neutral-xxdark);
padding: 0.75rem 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
border-bottom: 1px solid var(--mrv-neutral-light);
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}

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

.logo {
height: 40px;
width: auto;
}

#user-info {
display: flex;
align-items: center;
}

#username {
margin-right: 1rem;
font-weight: 500;
}

.logout-btn {
background-color: var(--mrv-primary-pure);
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: 500;
transition: background-color 0.2s;
display: inline-flex;
align-items: center;
}

.logout-btn:hover {
background-color: var(--mrv-primary-dark);
}

.logout-btn i {
margin-right: 0.5rem;
}

/* Título da página com fundo verde */
.page-title {
background-color: var(--mrv-primary-pure);
color: white;
padding: 1.5rem 1rem;
margin-bottom: 1.5rem;
}

.page-title h1 {
font-size: 1.75rem;
font-weight: 500;
display: flex;
align-items: center;
}

.page-title h1 i {
margin-right: 0.75rem;
}

main {
flex: 1;
display: flex;
flex-direction: column;
max-width: 1400px;
width: 100%;
margin: 0 auto;
padding: 0 1rem 2rem;
}

/* Layout responsivo - muda de colunas para linhas */
.responsive-layout {
display: flex;
flex-direction: row;
gap: 1.5rem;
min-height: 500px;
}

/* REDESIGN DAS ABAS - ESTILO MINIMALISTA */
.tabs-container {
background-color: var(--mrv-white);
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
width: 30%;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--mrv-neutral-light);
}

.tabs-header {
display: flex;
background-color: var(--mrv-bg-04);
border-bottom: 1px solid var(--mrv-neutral-light);
overflow-x: auto;
white-space: nowrap;
}

.tab {
padding: 18px 16px;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
color: var(--mrv-neutral-dark);
gap: 8px;
}

.tab i {
font-size: 20px;
opacity: 0.8;
transition: all 0.25s ease;
}

.tab:hover {
background-color: rgba(7, 157, 86, 0.05);
color: var(--mrv-primary-pure);
}

.tab:hover i {
opacity: 1;
color: var(--mrv-primary-pure);
}

.tab.active {
color: var(--mrv-primary-dark);
background-color: var(--mrv-white);
font-weight: 500;
position: relative;
}

.tab.active i {
color: var(--mrv-primary-pure);
opacity: 1;
}

.tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--mrv-primary-pure);
}

.tabs-content {
flex: 1;
overflow-y: auto;
background-color: var(--mrv-white);
padding: 0;
}

.tab-pane {
display: none;
padding: 1.25rem;
height: 100%;
}

.tab-pane.active {
display: block;
}

.tab-pane h2 {
color: var(--mrv-primary-dark);
margin-bottom: 1.25rem;
font-size: 1.25rem;
font-weight: 500;
display: flex;
align-items: center;
}

.tab-pane h2 i {
margin-right: 0.75rem;
color: var(--mrv-primary-pure);
}

/* Lista de relatórios */
.reports-list-container {
border: 1px solid var(--mrv-neutral-light);
border-radius: 8px;
overflow: auto;
background-color: var(--mrv-white);
height: calc(100% - 50px);
}

.reports-list {
padding: 0;
}

.report-item {
padding: 1rem;
border-bottom: 1px solid var(--mrv-neutral-light);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
}

.report-item:hover {
background-color: var(--mrv-bg-02);
}

.report-item.selected {
background-color: var(--mrv-bg-02);
border-left: 4px solid var(--mrv-secondary-pure);
}

.report-title {
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--mrv-neutral-xxdark);
}

.report-date {
font-size: 0.85rem;
color: var(--mrv-neutral-dark);
display: flex;
align-items: center;
}

.report-date i {
margin-right: 0.25rem;
color: var(--mrv-neutral-medium);
}

/* Ícone do Git para relatórios rastreados */
.report-date i.fab.fa-git-alt {
    color: var(--mrv-primary-pure);
}

/* Tooltip para informações do Git */
.report-date[title]:hover {
    cursor: help;
    position: relative;
}

.report-date[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--mrv-neutral-xxdark);
    color: var(--mrv-white);
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-bottom: 5px;
}

.report-sistema {
margin-left: 10px;
padding: 2px 6px;
background-color: var(--mrv-bg-03);
border-radius: 3px;
font-size: 0.8em;
color: var(--mrv-primary-dark);
border: 1px solid var(--mrv-neutral-light);
}

/* Visualizador de relatórios */
.report-viewer-container {
background-color: var(--mrv-white);
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
flex: 1;
display: flex;
flex-direction: column;
min-height: 500px;
overflow: hidden;
border: 1px solid var(--mrv-neutral-light);
}

.report-viewer {
flex: 1;
position: relative;
height: 100%;
}

/* Estados do visualizador */
.empty-state, .loading-state, .error-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 2rem;
text-align: center;
}

.empty-state {
color: var(--mrv-neutral-medium);
background-color: var(--mrv-bg-04);
}

.loading-state {
color: var(--mrv-neutral-dark);
}

.error-state {
color: var(--mrv-error);
}

.empty-state i, .loading-state i, .error-state i {
margin-bottom: 1rem;
font-size: 3rem;
opacity: 0.5;
}

/* iframe para visualização do relatório */
.report-iframe {
width: 100%;
height: 100%;
border: none;
min-height: 500px;
}

footer {
padding: 1.25rem 1rem;
text-align: center;
background-color: var(--mrv-white);
border-top: 1px solid var(--mrv-neutral-light);
font-size: 0.85rem;
color: var(--mrv-neutral-dark);
margin-top: 2rem;
}

/* Responsividade - muda para layout vertical em telas pequenas */
@media (max-width: 900px) {
.responsive-layout {
    flex-direction: column;
    height: auto;
}

.tabs-container {
    width: 100%;
    margin-bottom: 1.5rem;
    height: auto;
    max-height: 400px;
}

.tab {
    padding: 16px 12px;
}

.report-viewer-container {
    height: 500px;
}

.header-content {
    flex-direction: column;
    align-items: flex-start;
}

#user-info {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.page-title h1 {
    font-size: 1.5rem;
}
}

/* Estilo para o painel de relatórios com filtro */
.reports-panel {
 background-color: var(--mrv-white);
 border-radius: 12px;
 box-shadow: 0 2px 12px rgba(0,0,0,0.08);
 width: 30%;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 border: 1px solid var(--mrv-neutral-light);
}

.panel-header {
 padding: 1.25rem;
 border-bottom: 1px solid var(--mrv-neutral-light);
}

.filter-counter {
 background-color: var(--mrv-primary-pure);
 color: var(--mrv-white);
 padding: 0.25rem 0.75rem;
 border-radius: 16px;
 font-size: 0.75rem;
 font-weight: 500;
 display: flex;
 align-items: center;
 gap: 0.25rem;
 margin-top: 0.75rem;
 align-self: flex-start;
}

.filter-counter i {
 font-size: 0.7rem;
}

.panel-title {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 12px;
}

.panel-header h2 {
 color: var(--mrv-primary-dark);
 font-size: 1.25rem;
 font-weight: 500;
 display: flex;
 align-items: center;
}

.panel-header h2 i {
 margin-right: 0.75rem;
 color: var(--mrv-primary-pure);
}

/* Estilo para o select nativo */
.filter-selector {
 position: relative;
 min-width: 200px;
}

.filters-container {
 display: flex;
 flex-direction: column;
 gap: 8px;
 min-width: 200px;
}

.date-range-container {
 display: flex;
 gap: 8px;
 margin-top: 8px;
}

.date-input {
 appearance: none;
 background-color: var(--mrv-bg-02);
 border: 1px solid var(--mrv-neutral-light);
 border-radius: 6px;
 padding: 8px 12px;
 font-size: 0.9rem;
 color: var(--mrv-primary-dark);
 cursor: pointer;
 font-family: 'Roboto', sans-serif;
 flex: 1;
}

.date-input:focus {
 outline: none;
 border-color: var(--mrv-primary-light);
 box-shadow: 0 0 0 3px rgba(7, 157, 86, 0.1);
}

.data-filter {
 appearance: none;
 background-color: var(--mrv-bg-02);
 border: 1px solid var(--mrv-neutral-light);
 border-radius: 6px;
 padding: 8px 36px 8px 12px;
 width: 100%;
 font-size: 0.95rem;
 color: var(--mrv-primary-dark);
 cursor: pointer;
 font-family: 'Roboto', sans-serif;
}

.data-filter:focus {
 outline: none;
 border-color: var(--mrv-primary-light);
 box-shadow: 0 0 0 3px rgba(7, 157, 86, 0.1);
}

.sistema-select {
 appearance: none;
 background-color: var(--mrv-bg-02);
 border: 1px solid var(--mrv-neutral-light);
 border-radius: 6px;
 padding: 8px 36px 8px 12px;
 width: 100%;
 font-size: 0.95rem;
 color: var(--mrv-primary-dark);
 cursor: pointer;
 font-family: 'Roboto', sans-serif;
}

.sistema-select:focus {
 outline: none;
 border-color: var(--mrv-primary-light);
 box-shadow: 0 0 0 3px rgba(7, 157, 86, 0.1);
}

.filter-selector::after {
 content: '\f0d7';
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
 position: absolute;
 right: 12px;
 top: 50%;
 transform: translateY(-50%);
 color: var(--mrv-primary-pure);
 pointer-events: none;
 z-index: 1;
}

/* Estilo para a lista de relatórios */
.reports-list-container {
 flex: 1;
 overflow-y: auto;
 padding: 0;
}

.reports-list {
 height: 100%;
}

.report-item {
 padding: 1rem;
 border-bottom: 1px solid var(--mrv-neutral-light);
 cursor: pointer;
 transition: all 0.2s ease;
}

.report-item:hover {
 background-color: var(--mrv-bg-02);
}

.report-item.selected {
 background-color: var(--mrv-bg-02);
 border-left: 4px solid var(--mrv-secondary-pure);
}

.report-title {
 font-weight: 500;
 margin-bottom: 0.5rem;
 color: var(--mrv-neutral-xxdark);
 text-transform: capitalize;
}

.report-info {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.85rem;
}

.report-date {
 color: var(--mrv-neutral-dark);
 display: flex;
 align-items: center;
 gap: 5px;
}

.report-sistema {
 padding: 3px 8px;
 background-color: var(--mrv-bg-03);
 border-radius: 4px;
 font-size: 0.8em;
 color: var(--mrv-primary-dark);
 border: 1px solid var(--mrv-neutral-light);
}

.empty-list {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 3rem 1rem;
 color: var(--mrv-neutral-medium);
 text-align: center;
}

.empty-list i {
 margin-bottom: 1rem;
 opacity: 0.6;
 font-size: 2rem;
}

.empty-list-hint {
 font-size: 0.85rem;
 color: var(--mrv-neutral-medium);
 margin-top: 0.5rem;
 font-style: italic;
}

/* Ajustes responsivos */
@media (max-width: 900px) {
 .reports-panel {
     width: 100%;
     margin-bottom: 1.5rem;
     max-height: none;
 }
 
 .panel-title {
     flex-direction: column;
     align-items: flex-start;
 }
 
 .filters-container {
     width: 100%;
 }
 
 .filter-selector {
     width: 100%;
 }
 
 .date-range-container {
     flex-direction: column;
 }
}