/* ============================== */
/* 📥 LISTAGEM DE EMAILS (_email_list.html) */
/* ============================== */
.email-table {
  width: 100%;
  background-color: var(--color-background-menu);
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px var(--color-table-shadow);
}

.email-table thead {
  background-color: var(--color-sidebar-layout-bg);
}

.email-table th, .email-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-sidebar);
  font-size: var(--text-xs);
}

.email-table th {
  color: var(--color-sidebar-link);
  font-weight: 600;
}

.email-table td {
  color: var(--color-text-muted);
}

.email-row.read {
  background-color: var(--color-background-main);
}

.email-row.unread {
  background-color: var(--color-sidebar-hover);
  font-weight: 600;
}

.email-row:hover {
  background-color: #d2e3fc;
  cursor: pointer;
}

.bulk-btn,
.standard-btn {
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: var(--text-xs);
  margin-right: 0.3rem;
  background-color: var(--color-sidebar-layout-bg);
  color: var(--color-sidebar-link);
  cursor: pointer;
  transition: background 0.2s;
}

.bulk-btn:hover,
.standard-btn:hover {
  background-color: var(--color-border-sidebar);
}

/* ============================== */
/* ✉️ DETALHE DO EMAIL (email_detail_partial.html) */
/* ============================== */
.email-detail {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: var(--color-background-menu);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
}

.email-detail h2 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--color-sidebar-link);
}

.email-detail p {
  font-size: var(--text-xs);
  color: var(--text-color-subtle);
  margin: 0.2rem 0;
}

.email-detail strong {
  color: var(--color-sidebar-hover-text);
}

.email-body {
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--color-input-background);
  border: 1px solid var(--color-border-sidebar);
  border-radius: 8px;
  white-space: pre-wrap;
  color: var(--color-sidebar-link);
  font-size: var(--text-xs);
}

.email-detail .actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.email-detail .actions .action-button {
  background-color: var(--color-sidebar-layout-bg);
  color: var(--color-sidebar-link);
  border: 1px solid #dadce0;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.email-detail .actions .action-button:hover {
  background-color: var(--color-border-sidebar);
  color: var(--color-sidebar-hover-text);
}

.email-detail .actions .action-button.delete {
  background-color: #fce8e6;
  color: #d93025;
  border-color: #f28b82;
}

.email-detail .actions .action-button.delete:hover {
  background-color: #fad2cf;
}

/* ============================== */
/* 📝 COMPOSIÇÃO DE EMAIL (compose_partial.html) */
/* ============================== */
.compose-container {
  max-width: 700px;
  margin: 2rem auto;
  background-color: var(--color-white);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}

.compose-container h2 {
  font-size: 1.4rem;
  color: var(--color-sidebar-link);
  margin-bottom: 1.5rem;
}

.compose-container label {
  font-weight: 600;
  color: var(--text-color-subtle);
  margin-bottom: 0.25rem;
  display: block;
}

.compose-container input,
.compose-container textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #dadce0;
  border-radius: 6px;
  background-color: var(--color-input-background);
  font-size: var(--text-xs);
  color: var(--color-sidebar-link);
  margin-bottom: 1rem;
}

.compose-container button {
  background-color: var(--color-sidebar-hover-text);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: var(--text-xs);
  cursor: pointer;
}

.compose-container button:hover {
  background-color: var(--color-button-hover);
}

/* Exibe apenas o texto completo no desktop */
.bulk-btn .mobile-text {
  display: none;
}

/* ============================== */
/* 📱 RESPONSIVIDADE GERAL */
/* ============================== */
@media (width <= 768px) {
  .email-table {
    display: block;
    overflow-x: auto;
  }

  .email-table thead {
    background-color: var(--color-sidebar-layout-bg);
  }

  .email-detail,
  .compose-container {
    padding: 1rem;
    margin: 1rem;
    box-shadow: none;
  }

  .email-detail .actions {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .bulk-btn {
    width: auto;
  }

  .bulk-btn .btn-text {
    display: none;
  }

  .bulk-btn .mobile-text {
    display: inline;
  }
}