/* === Footer === */
.admin-footer {
  height: 5rem;
}

/* === Tables === */
table {
  text-align: left;
  border: 1px solid var(--dark-gray);
  padding-inline: 1em;
  border-spacing: 1rem;
  border-collapse: collapse;
  max-width: 90vw;
  font-family: var(--body-font);
  width: 100%;
}
tr, th, td {
  border: 1px solid #ccc;
  padding: 0.5rem;
  vertical-align: middle;
}
th {
  background-color: #f0f0f0;
}
td {
  background-color: white;
}
#main-post-title-column {
    width: 70%;
}
#main-post-date-column {
    width: 30%;
}
#main-sub-name-column {
    width: 40%;
}
#main-sub-email-column {
    width: 40%;
}
#main-sub-date-column {
    width: 20%;
}
#post-title-column {
    width: 50%;
}
#post-date-column {
    width: 20%;
}
#post-actions-column {
    width: 30%;
}
#sub-name-column {
    width: 35%;
}
#sub-email-column {
    width: 35%;
}
#sub-date-column,
#sub-actions-column {
    width: 15%;
}
.actions-cell {
    text-align: center;
    word-spacing: 55%;
}

/* === Containers === */
.admin-recent-activity-container,
.admin-recent-subscribers-container,
.admin-post-list,
.admin-sub-list {
  padding-inline: 3rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
}
.admin-recent-subscribers-container,
.admin-post-list,
.admin-sub-list {
  padding-bottom: 3rem;
}
.admin-recent-activity-container h2,
.admin-recent-subscribers-container h2 {
  font-family: var(--title-font);
}
.admin-post-list a,
.admin-sub-list a {
    color: black;
    cursor: pointer;
}

/* === Add Subscriber Form === */
#add-form {
  display: block;
  padding-inline: 4rem;
  font-family: var(--body-font);
  font-size: 1em;
  padding-bottom: 2rem;
}
#add-form label {
  margin-right: 2rem;
}
#add-form input {
  font-size: 1em;
  font-family: var(--body-font);
  border: 1px solid var(--silver);
  border-radius: 3px;
  min-width: 20vw;
  margin-inline: 0.5rem;
}
#add-form button {
  min-width: 5rem;
  padding-block: 0.5em;
  font-size: 1rem;
  background-color: white;
  border: 1px solid var(--silver);
  border-radius: 3px;
  cursor: pointer;
}

/* === Search Forms === */
.admin-search-posts-container,
.admin-search-subs-container {
  padding-block: 2rem;
  margin-inline: 5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.admin-search-posts-container form,
.admin-search-subs-container form {
  width: auto;
}
.admin-search-posts-container input,
.admin-search-subs-container input {
  min-width: 25vw;
  font-size: 1rem;
  border-radius: 3px;
  border: 1px solid var(--silver);
  padding: 0.5em;
}
.admin-search-posts-container button,
.admin-search-subs-container button {
  min-width: 5rem;
  padding-block: 0.5em;
  font-size: 1rem;
  background-color: white;
  border: 1px solid var(--silver);
  border-radius: 3px;
  cursor: pointer;
}

/* === Subscriber Edit === */
.admin-sub-list form {
  display: inline;
  cursor: pointer;
}
.sub-row input {
  width: 95%;
  font-size: 1rem;
  margin-inline: 0.4rem;
  border: 1px solid var(--silver);
  border-radius: 3px;
  padding: 0.4rem;
  display: flex;
}
.sub-row button {
  font-family: var(--body-font);
  font-size: 1em;
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0;
}
.editing {
  padding: 0;
}

/* === Hover Effects === */
.main-sub-row:hover,
.admin-search-posts-container button:hover,
.admin-search-subs-container button:hover,
.main-post-row:hover,
.admin-post-list a:hover,
.admin-sub-list a:hover,
.sub-row button:hover,
#add-form button:hover {
  color: var(--orange);
  font-weight: bold;
  cursor: pointer;
}

/* === Preview Post Page === */
.preview-warning {
  padding: 5px;
  text-align: center;
  font-family: var(--post-title-font);
  font-size: 1.1em;
  background-color: darkseagreen;
}
.preview-actions {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  border-block: 1px solid var(--silver);
}
#edit-preview-actions {
  border: none;
  padding-inline: 4rem;
}
#edit-article {
  margin-bottom: 1rem;
}
.preview-actions-buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-block: 1rem;
  text-align: center;
}
.preview-actions-buttons a,
.preview-actions-buttons button,
button.save-button,
button.preview-button {
  min-width: 20vmin;
  padding: 0.75rem;
  border: 1px solid silver;
  cursor: pointer;
  width: 10vmax;
  font-size: 1em;
  font-weight: bold;
  font-family: var(--title-font);
  text-decoration: none;
}
.edit-or-discard-container {
  gap: 1rem;
  display: flex;;
}
.edit-post-button {
  color: black;
  background-color: white;
}
.discard-post-button {
  color: white;
  background-color: indianred;
}
.confirm-post-button,
button.save-button,
button.preview-button {
  margin-inline: 2rem;
  color: white;
  background-color: black;
  text-align: center;
}
.edit-post-button:hover,
.discard-post-button:hover,
.confirm-post-button:hover,
button.save-button:hover,
button.preview-button:hover {
  cursor: pointer;
  text-decoration: underline;
  color: white;
}
.edit-post-button:hover {
  color: black;
}