/* ===============================================
   AGENDA TÉCNICA - ESTILO PROFISSIONAL
   Design formal, corporativo e minimalista
   =============================================== */

/* Reset e Configuração Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variáveis CSS - Paleta Profissional */
:root {
  /* Cores Primárias - Tons Neutros e Profissionais */
  --primary-navy: #2c3e50;          /* Azul marinho escuro */
  --secondary-gray: #34495e;         /* Cinza escuro */
  --accent-blue: #3498db;            /* Azul profissional */
  --light-gray: #ecf0f1;            /* Cinza claro */
  --white: #ffffff;                  /* Branco puro */
  --dark-text: #2c3e50;             /* Texto escuro */
  --medium-gray: #7f8c8d;           /* Cinza médio */
  --success: #27ae60;               /* Verde profissional */
  --warning: #f39c12;               /* Laranja profissional */
  --error: #e74c3c;                 /* Vermelho profissional */
  
  /* Bordas e Sombras */
  --border-color: #bdc3c7;          /* Borda padrão */
  --border-light: #ecf0f1;          /* Borda clara */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.2);
  
  /* Tipografia */
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-xs: 0.75rem;         /* 12px */
  --font-size-sm: 0.875rem;        /* 14px */
  --font-size-base: 1rem;          /* 16px */
  --font-size-lg: 1.125rem;        /* 18px */
  --font-size-xl: 1.25rem;         /* 20px */
  --font-size-2xl: 1.5rem;         /* 24px */
  --font-size-3xl: 2rem;           /* 32px */
  
  /* Espaçamentos */
  --spacing-xs: 0.25rem;           /* 4px */
  --spacing-sm: 0.5rem;            /* 8px */
  --spacing-md: 1rem;              /* 16px */
  --spacing-lg: 1.5rem;            /* 24px */
  --spacing-xl: 2rem;              /* 32px */
  --spacing-2xl: 3rem;             /* 48px */
  
  /* Border Radius - Formas Retangulares */
  --radius-none: 0px;              /* Completamente retangular */
  --radius-sm: 2px;                /* Levemente arredondado */
  --radius-md: 4px;                /* Moderadamente arredondado */
  --radius-lg: 6px;                /* Mais arredondado */
}

/* Configuração do Body */
body {
  font-family: var(--font-primary);
  background-color: var(--light-gray);
  color: var(--dark-text);
  line-height: 1.6;
  font-size: var(--font-size-base);
  min-height: 100vh;
}

/* Container Principal */
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl);
  background-color: var(--white);
  min-height: 100vh;
  box-shadow: var(--shadow-light);
}

/* Título Principal */
h1 {
  font-size: var(--font-size-3xl);
  font-weight: 600;
  color: var(--primary-navy);
  text-align: center;
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mensagem de Boas-vindas */
.welcome-message {
  background-color: var(--accent-blue);
  color: var(--white);
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: center;
  font-weight: 500;
  margin-bottom: var(--spacing-xl);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-light);
}

/* Formulário Principal */
#agendaForm {
  background-color: var(--white);
  padding: var(--spacing-2xl);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  margin-bottom: var(--spacing-xl);
}

/* Labels */
#agendaForm label {
  display: block;
  font-weight: 600;
  color: var(--primary-navy);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Inputs, Selects e Textareas - Design Retangular */
#agendaForm input[type="text"],
#agendaForm input[type="email"],
#agendaForm input[type="date"],
#agendaForm input[type="time"],
#agendaForm input[type="tel"],
#agendaForm input[type="number"],
#agendaForm select,
#agendaForm textarea {
  width: 100%;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--dark-text);
  font-size: var(--font-size-base);
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

/* Estados de Foco dos Campos */
#agendaForm input:focus,
#agendaForm select:focus,
#agendaForm textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  background-color: #f8f9fa;
}

/* Placeholder */
#agendaForm input::placeholder,
#agendaForm textarea::placeholder {
  color: var(--medium-gray);
  font-style: italic;
}

/* Botões Principais */
button {
  background-color: var(--primary-navy);
  color: var(--white);
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  box-shadow: var(--shadow-light);
}

button:hover {
  background-color: var(--secondary-gray);
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-light);
}

/* Botão de Ação Primária */
.btn-primary {
  background-color: var(--accent-blue);
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: var(--font-size-lg);
}

.btn-primary:hover {
  background-color: #2980b9;
}

/* Botões de Sucesso, Aviso e Erro */
.btn-success {
  background-color: var(--success);
}

.btn-success:hover {
  background-color: #219a52;
}

.btn-warning {
  background-color: var(--warning);
}

.btn-warning:hover {
  background-color: #e67e22;
}

.btn-error {
  background-color: var(--error);
}

.btn-error:hover {
  background-color: #c0392b;
}

/* Sidebar de Navegação - Design Retangular */
.sidebar-buttons {
  position: fixed;
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-heavy);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  z-index: 1000;
  min-width: 200px;
}

.sidebar-buttons button {
  background-color: var(--light-gray);
  color: var(--dark-text);
  border: 1px solid var(--border-color);
  padding: var(--spacing-md);
  text-align: left;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.sidebar-buttons button:hover {
  background-color: var(--accent-blue);
  color: var(--white);
  border-color: var(--accent-blue);
}

/* Campo de Pesquisa Rápida */
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg);
  background-color: #f8f9fa;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

#quickSearchInput {
  width: 400px;
  padding: var(--spacing-md);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  background-color: var(--white);
}

#quickSearchBtn {
  background-color: var(--accent-blue);
  padding: var(--spacing-md) var(--spacing-lg);
}

/* Layout de Grid para Campos */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
}

/* Tabelas - Design Profissional */
table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--white);
  box-shadow: var(--shadow-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--spacing-xl) 0;
}

th {
  background-color: var(--primary-navy);
  color: var(--white);
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.025em;
}

td {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  color: var(--dark-text);
}

tr:nth-child(even) {
  background-color: #f8f9fa;
}

tr:hover {
  background-color: rgba(52, 152, 219, 0.1);
}

/* Modais - Design Profissional */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(44, 62, 80, 0.8);
  padding: var(--spacing-xl);
}

.modal-content {
  background-color: var(--white);
  margin: 5% auto;
  padding: var(--spacing-2xl);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-heavy);
  width: 90%;
  max-width: 600px;
  position: relative;
}

.close {
  color: var(--medium-gray);
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-lg);
}

.close:hover,
.close:focus {
  color: var(--dark-text);
}

/* Botão do Menu Principal */
#menuPrincipalBtn {
  position: fixed;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  background-color: var(--primary-navy);
  color: var(--white);
  border: none;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 1001;
  box-shadow: var(--shadow-medium);
}

#menuPrincipalBtn:hover {
  background-color: var(--secondary-gray);
}

/* Responsividade */
@media (max-width: 768px) {
  .main-container {
    padding: var(--spacing-md);
  }
  
  .sidebar-buttons {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-xl);
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  #quickSearchInput {
    width: 100%;
  }
  
  .search-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  table {
    font-size: var(--font-size-sm);
  }
  
  th, td {
    padding: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: var(--font-size-2xl);
  }
  
  .modal-content {
    margin: 10px;
    padding: var(--spacing-lg);
    width: calc(100% - 20px);
  }
  
  #menuPrincipalBtn {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-lg);
  }
}

/* Estados de Loading */
.loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}

/* Animações Suaves */
* {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: var(--light-gray);
}

::-webkit-scrollbar-thumb {
  background-color: var(--medium-gray);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--secondary-gray);
}

/* Foco Acessível */
*:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

/* Toast de Notificação */
.performance-toast {
  position: fixed;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  background-color: var(--success);
  color: var(--white);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-medium);
  z-index: 2000;
  font-weight: 500;
}

/* Melhorias para Modo Alto Desempenho */
body.high-performance * {
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  transform: none !important;
}

body.high-performance button:hover {
  transform: none !important;
  box-shadow: var(--shadow-light) !important;
}

/* Sobrescrever estilos inline legados */
#agendaForm div[style*="display: flex"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: var(--spacing-lg) !important;
  margin-bottom: var(--spacing-lg) !important;
}

#agendaForm div[style*="flex: "] {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
}

#agendaForm input[style*="width: 100%"],
#agendaForm select[style*="width: 100%"],
#agendaForm textarea[style*="width: 100%"] {
  width: 100% !important;
  padding: var(--spacing-md) !important;
  margin-bottom: var(--spacing-lg) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--white) !important;
  color: var(--dark-text) !important;
  font-size: var(--font-size-base) !important;
  font-family: var(--font-primary) !important;
  transition: all 0.3s ease !important;
}

/* Forçar estilo profissional nos botões do menu */
.sidebar-buttons button[style] {
  background-color: var(--light-gray) !important;
  color: var(--dark-text) !important;
  border: 1px solid var(--border-color) !important;
  padding: var(--spacing-md) !important;
  text-align: left !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.sidebar-buttons button[style]:hover {
  background-color: var(--accent-blue) !important;
  color: var(--white) !important;
  border-color: var(--accent-blue) !important;
}

/* Estilo específico para o botão de pesquisa */
#quickSearchBtn[style] {
  background-color: var(--accent-blue) !important;
  color: var(--white) !important;
  border: none !important;
  padding: var(--spacing-md) var(--spacing-lg) !important;
  border-radius: var(--radius-sm) !important;
}

/* Sobrescrever estilos inline do campo de pesquisa */
#quickSearchInput[style] {
  width: 400px !important;
  padding: var(--spacing-md) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-base) !important;
  background-color: var(--white) !important;
  color: var(--dark-text) !important;
}

/* Garantir que o título mantenha o estilo profissional */
h1[style] {
  color: var(--primary-navy) !important;
  font-size: var(--font-size-3xl) !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin: var(--spacing-xl) 0 var(--spacing-2xl) 0 !important;
  padding-bottom: var(--spacing-lg) !important;
  border-bottom: 2px solid var(--accent-blue) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ===============================================
   PÁGINA DE LOGIN - ESTILO PROFISSIONAL
   =============================================== */

.login-container {
  max-width: 450px;
  margin: 80px auto;
  padding: var(--spacing-2xl);
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-heavy);
  position: relative;
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-navy), var(--accent-blue));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.login-logo {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.login-logo h1 {
  color: var(--primary-navy);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-logo p {
  color: var(--medium-gray);
  font-size: var(--font-size-sm);
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.input-group {
  position: relative;
}

.input-group label {
  display: block;
  font-weight: 600;
  color: var(--primary-navy);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.input-group input {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--dark-text);
  font-size: var(--font-size-base);
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

.input-group input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  background-color: #f8f9fa;
}

.input-group input::placeholder {
  color: var(--medium-gray);
  font-style: italic;
}

.input-group .input-icon {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--medium-gray);
  pointer-events: none;
}

.login-button {
  background-color: var(--accent-blue);
  color: var(--white);
  border: none;
  padding: var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-top: var(--spacing-md);
}

.login-button:hover {
  background-color: #2980b9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.login-button:active {
  transform: translateY(0);
}

.login-button:disabled {
  background-color: var(--medium-gray);
  cursor: not-allowed;
  transform: none;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.remember-me {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--dark-text);
}

.remember-me input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.forgot-password {
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 500;
}

.forgot-password:hover {
  text-decoration: underline;
}

.login-error {
  background-color: rgba(231, 76, 60, 0.1);
  color: var(--error);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(231, 76, 60, 0.3);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.login-success {
  background-color: rgba(39, 174, 96, 0.1);
  color: var(--success);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(39, 174, 96, 0.3);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

/* Responsividade para login */
@media (max-width: 480px) {
  .login-container {
    margin: var(--spacing-xl);
    padding: var(--spacing-xl);
  }
  
  .login-logo h1 {
    font-size: var(--font-size-xl);
  }
}

/* ===============================================
   PÁGINA DE CALENDÁRIO - ESTILO PROFISSIONAL
   =============================================== */

/* Container do calendário */
.calendar-container {
  max-width: 1200px;
  margin: var(--spacing-xl) auto;
  padding: var(--spacing-xl);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
}

/* Customização do FullCalendar para design profissional */
.fc {
  font-family: var(--font-primary) !important;
}

.fc-toolbar {
  background-color: var(--primary-navy);
  padding: var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-lg) !important;
}

.fc-toolbar-title {
  color: var(--white) !important;
  font-size: var(--font-size-xl) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.fc-button {
  background-color: var(--accent-blue) !important;
  border: 1px solid var(--accent-blue) !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  font-size: var(--font-size-sm) !important;
  padding: var(--spacing-sm) var(--spacing-md) !important;
}

.fc-button:hover {
  background-color: #2980b9 !important;
  border-color: #2980b9 !important;
}

.fc-button:focus {
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3) !important;
}

.fc-button-active {
  background-color: var(--secondary-gray) !important;
  border-color: var(--secondary-gray) !important;
}

.fc-button:disabled {
  background-color: var(--medium-gray) !important;
  border-color: var(--medium-gray) !important;
  opacity: 0.6;
}

/* Cabeçalho dos dias da semana */
.fc-col-header {
  background-color: var(--light-gray);
  border-bottom: 2px solid var(--border-color);
}

.fc-col-header-cell {
  background-color: var(--light-gray) !important;
  color: var(--primary-navy) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: var(--font-size-sm) !important;
  letter-spacing: 0.025em;
  padding: var(--spacing-md) !important;
}

/* Células do calendário */
.fc-daygrid-day {
  border: 1px solid var(--border-light) !important;
  background-color: var(--white);
}

.fc-daygrid-day:hover {
  background-color: rgba(52, 152, 219, 0.1) !important;
}

.fc-daygrid-day-number {
  color: var(--dark-text) !important;
  font-weight: 500;
  padding: var(--spacing-sm);
}

.fc-day-today {
  background-color: rgba(52, 152, 219, 0.1) !important;
  border: 2px solid var(--accent-blue) !important;
}

.fc-day-today .fc-daygrid-day-number {
  color: var(--accent-blue) !important;
  font-weight: 600 !important;
}

/* Eventos do calendário */
.fc-event {
  background-color: var(--accent-blue) !important;
  border: 1px solid #2980b9 !important;
  color: var(--white) !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--spacing-xs);
}

.fc-event:hover {
  background-color: #2980b9 !important;
}

.fc-event-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botão de voltar */
.back-button {
  position: fixed;
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  background-color: var(--primary-navy);
  color: var(--white);
  border: none;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  cursor: pointer;
  box-shadow: var(--shadow-medium);
  z-index: 1000;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: var(--secondary-gray);
  transform: translateY(-1px);
  box-shadow: var(--shadow-heavy);
}

.back-button i {
  margin-right: var(--spacing-xs);
}

/* Loading state para o calendário */
.fc-loading {
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

/* Responsividade para o calendário */
@media (max-width: 768px) {
  .calendar-container {
    margin: var(--spacing-md);
    padding: var(--spacing-md);
  }
  
  .fc-toolbar {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .fc-toolbar-title {
    font-size: var(--font-size-lg) !important;
  }
  
  .fc-button {
    font-size: var(--font-size-xs) !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
  }
}

@media (max-width: 480px) {
  .back-button {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-lg);
  }
}

/* ===============================================
   PÁGINA DE RELATÓRIOS E GRÁFICOS
   =============================================== */

.reports-container {
  max-width: 1200px;
  margin: var(--spacing-xl) auto;
  padding: var(--spacing-xl);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.chart-container {
  background: var(--white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
  position: relative;
}

.chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-navy), var(--accent-blue));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.chart-title {
  color: var(--primary-navy);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  text-align: center;
}

.chart-stats {
  display: flex;
  justify-content: space-around;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--accent-blue);
  display: block;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--medium-gray);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Filtros de relatório */
.report-filters {
  background: var(--white);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-color);
  margin-bottom: var(--spacing-xl);
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  align-items: end;
}

.filter-group label {
  display: block;
  font-weight: 600;
  color: var(--primary-navy);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.filter-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-lg);
}

/* ===============================================
   PÁGINA DE GERENCIAMENTO DE USUÁRIOS
   =============================================== */

.users-container {
  max-width: 1200px;
  margin: var(--spacing-xl) auto;
  padding: var(--spacing-xl);
}

.users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--border-color);
}

.add-user-btn {
  background-color: var(--success);
  color: var(--white);
  border: none;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-user-btn:hover {
  background-color: #219a52;
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

.users-table {
  width: 100%;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.users-table thead {
  background: var(--primary-navy);
}

.users-table th {
  color: var(--white);
  padding: var(--spacing-lg);
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.025em;
}

.users-table td {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.users-table tbody tr:hover {
  background-color: rgba(52, 152, 219, 0.1);
}

.user-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.action-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.edit-btn {
  background-color: var(--warning);
  color: var(--white);
}

.edit-btn:hover {
  background-color: #e67e22;
}

.delete-btn {
  background-color: var(--error);
  color: var(--white);
}

.delete-btn:hover {
  background-color: #c0392b;
}

/* Modal de usuário */
.user-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 62, 80, 0.8);
  z-index: 2000;
  padding: var(--spacing-xl);
}

.user-modal-content {
  background: var(--white);
  max-width: 500px;
  margin: 5% auto;
  padding: var(--spacing-2xl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-heavy);
  position: relative;
}

.user-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Responsividade para relatórios e usuários */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-row {
    grid-template-columns: 1fr;
  }
  
  .users-header {
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: stretch;
  }
  
  .users-table {
    font-size: var(--font-size-sm);
  }
  
  .users-table th,
  .users-table td {
    padding: var(--spacing-sm);
  }
}