/* agenda-fixa.css
   Estilos para Agenda de Compromissos — destaque por status (futuro / hoje / histórico)
*/

.panel { 
  background:#fff; 
  padding:16px; 
  border-radius:8px; 
  box-shadow:0 2px 8px rgba(0,0,0,0.04); 
  margin-bottom:18px;
}

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

.panel-actions { 
  display:flex; 
  gap:8px; 
  align-items:center;
  flex-wrap: wrap;
}

.lista-compromissos { 
  list-style:none; 
  padding:0; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
  gap:8px;
}

.comp-item {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.04);
  transition:transform .08s ease, box-shadow .08s ease;
  flex-wrap: wrap;
}

.comp-item:hover { 
  transform:translateY(-2px); 
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}

/* status colors */
.evento-futuro { 
  background: linear-gradient(90deg, rgba(141,198,63,0.06), rgba(141,198,63,0.02)); 
  border-left:4px solid #8DC63F;
}

.evento-hoje { 
  background: linear-gradient(90deg, rgba(0,90,156,0.06), rgba(0,90,156,0.02)); 
  border-left:4px solid #005A9C;
}

.evento-historico { 
  background: linear-gradient(90deg, rgba(128,128,128,0.04), rgba(128,128,128,0.02)); 
  border-left:4px solid #9b9b9b; 
  color:#666;
}

/* compact info */
.comp-left { 
  display:flex; 
  gap:12px; 
  align-items:center; 
  min-width:0;
  flex: 1;
}

.comp-date { 
  font-weight:700; 
  min-width:110px; 
  text-align:left;
}

.comp-title { 
  font-size:1rem; 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis; 
  max-width:420px;
}

.comp-meta { 
  font-size:0.9rem; 
  color:#666;
}

/* actions */
.comp-actions { 
  display:flex; 
  gap:8px; 
  align-items:center;
  flex-wrap: wrap;
}

.btn-small { 
  padding:6px 8px; 
  border-radius:6px; 
  border:none; 
  cursor:pointer; 
  font-weight:600;
  min-height: 36px;
  transition: opacity 0.3s ease;
}

.btn-small:hover {
  opacity: 0.8;
}

.btn-edit { 
  background:#005A9C; 
  color:#fff;
}

.btn-delete { 
  background:#C0392B; 
  color:#fff;
}

.btn-export { 
  background:#F7941D; 
  color:#fff;
}

/* tabela de eventos (detalhes) */
.agenda { 
  width:100%; 
  border-collapse:collapse; 
  margin-top:12px;
}

.agenda th, .agenda td { 
  border:1px solid #e9e9e9; 
  padding:8px; 
  text-align:left; 
  vertical-align:top;
}

.agenda thead th { 
  background:#f3f6f9;
}

/* linhas de histórico com cor mais suave */
.agenda tr.evento-historico td { 
  color:#666; 
  background: rgba(0,0,0,0.01);
}

/* modal fallback */
.modal-backdrop { 
  position:fixed; 
  inset:0; 
  display:none; 
  align-items:center; 
  justify-content:center; 
  background:rgba(0,0,0,0.45); 
  z-index:9999;
}

.modal-card { 
  background:#fff; 
  padding:16px; 
  border-radius:8px; 
  width:640px; 
  max-width:95%;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  max-height: 90vh;
  overflow-y: auto;
}

/* botões pequenos */
.small-btn { 
  padding:6px 8px; 
  border-radius:6px; 
  border:none; 
  cursor:pointer; 
  font-weight:600;
  min-height: 32px;
  transition: opacity 0.3s ease;
}

.small-btn:hover {
  opacity: 0.8;
}

.small-btn.edit { 
  background:#005A9C; 
  color:#fff;
}

.small-btn.del { 
  background:#C0392B; 
  color:#fff;
}

/* Mobile: até 480px */
@media (max-width: 480px) {
  .panel {
    padding: 12px;
    margin-bottom: 12px;
  }

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

  .comp-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .comp-left {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .comp-title {
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
  }

  .comp-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .btn-small {
    flex: 1;
    min-width: 70px;
    padding: 6px;
  }
}

/* Tablet: 481px até 768px */
@media (min-width: 481px) and (max-width: 768px) {
  .panel {
    padding: 14px;
  }

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

  .comp-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .comp-left {
    width: 100%;
  }

  .comp-title {
    max-width: 100%;
  }

  .comp-actions {
    width: 100%;
  }

  .agenda {
    display: block;
    overflow-x: auto;
  }
}

/* Desktop: 769px e acima */
@media (min-width: 769px) {
  .panel {
    padding: 16px;
  }

  .comp-item {
    flex-direction: row;
  }

  .comp-left {
    flex-direction: row;
  }

  .comp-title {
    max-width: 420px;
  }

  .comp-actions {
    flex-direction: row;
  }

  .agenda {
    display: table;
  }
}