/* Reset & Base */

body {

  margin: 0;

  font-family: 'Segoe UI', sans-serif;

  background-color: #0b1a2e;

  color: #f0f0f0;

  /* remove text-align: center; */

}



/* Header & Logo */

header,

.filter-form {

  text-align: center;

}



header img {

  max-height: 80px;

}



h1 {

  margin-top: 10px;

  font-size: 28px;

  color: #ffffff;

}



/* Navigation Menu */

ul {

  list-style: none;

  padding: 0;

  margin: 30px auto;

  max-width: 400px;

}



li {

  margin: 12px 0;

}



a {

  display: block;

  padding: 12px 20px;

  background-color: #1f2f4d;

  color: #ffffff;

  text-decoration: none;

  border-radius: 6px;

  transition: background-color 0.3s ease;

}



a:hover {

  background-color: #2c3e5f;

}



/* Table Styling */

table {

  margin: 20px 0; /* removes auto-centering */

  border-collapse: collapse;

  width: 100%;

  background-color: #142a45;

  color: #ffffff;

}



#cardTable {

  text-align: left;

}



th, td {

  border: 1px solid #2c3e5f;

  padding: 10px;

}



th {

  background-color: #1f2f4d;

}



table img {

  max-height: 100px;

}



/* Only center & constrain the filter form */

.filter-form {

  margin: 20px auto;

  max-width: 600px;

}



/* Let the table form be full-width and left aligned */

.table-form {

  margin: 10px 0;

  max-width: none;

  width: 100%;

  text-align: left;

}



/* If you still see an offset, override any residual text-align or margin */

.table-form,

.table-form table {

  margin-left: 0 !important;

  margin-right: auto !important;

}



input[type="text"],

select {

  padding: 1px;

  margin: 5px;

  border-radius: 4px;

  border: none;

  background-color: #1f2f4d;

  color: #ffffff;

}



input[type="submit"],

button {

  padding: 10px 20px;

  margin-top: 10px;

  background-color: #2c3e5f;

  color: #ffffff;

  border: none;

  border-radius: 6px;

  cursor: pointer;

}



input[type="submit"]:hover,

button:hover {

  background-color: #3a4f6f;

}



/* Pagination */

.pagination {

  margin-top: 20px;

  text-align: center;

}



.pagination a {

  display: inline-block;

  margin: 0 6px;

  padding: 6px 12px;

  background-color: #1f2f4d;

  color: #ffffff;

  text-decoration: none;

  border-radius: 4px;

}



.pagination a.active {

  background-color: #3a4f6f;

  font-weight: bold;

}



/* Misc */

pre {

  color: #ccc;

}



.button-link {

  display: inline-block;

  padding: 10px 20px;

  margin-left: 10px;

  background-color: #2c3e5f;

  color: #ffffff;

  border-radius: 6px;

  text-decoration: none;

  

}



.button-link:hover {

  background-color: #3a4f6f;

}



.deck-list {

  list-style: none;

  padding: 0;

  margin: 20px auto;

  max-width: 600px;

}



.deck-list li {

  margin: 10px 0;

}



.deck-entry a {

  display: inline-block;

  margin-right: 10px;

  padding: 6px 12px;

  background-color: #1f2f4d;

  color: #ffffff;

  text-decoration: none;

  border-radius: 4px;

  transition: background-color 0.3s ease;

}



.deck-entry a:hover {

  background-color: #2c3e5f;

}



.delete-link {

  background-color: #5c1f1f;

}



.delete-link:hover {

  background-color: #7a2c2c;

}



.message {

  padding: 10px;

  margin: 10px auto;

  width: 80%;

  text-align: center;

  font-weight: bold;

  border-radius: 5px;

}



.message.success {

  color: #155724;

  background-color: #d4edda;

  border: 1px solid #c3e6cb;

}



.message.error {

  color: #721c24;

  background-color: #f8d7da;

  border: 1px solid #f5c6cb;

}



.form-container {

  width: 80%;

  margin: 0 auto;

}



.deck-image {

  height: auto;

  width: 50%;

  border: 1px solid #ccc;

  border-radius: 4px;

  cursor: pointer;

}



/* Card Text Clamping & Expansion */

.card-text {

  max-height: 4.5em; /* roughly 3 lines */

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: normal;

  position: relative;

  cursor: pointer;

  transition: max-height 0.3s ease;

}



.card-text.expanded {

  max-height: none;

}



/* Optional: Add a subtle background to distinguish expanded text */

.card-text.expanded {

  background-color: #1a2f4d;

  padding: 8px;

  border-radius: 4px;

}






/* --- additions for the FastAPI rewrite --- */

.topnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px auto;
  max-width: 700px;
}

.topnav a {
  padding: 8px 14px;
}

/* Delete buttons are now real <button> elements inside a <form> (POST,
   not a GET link) so they can't be triggered by a stray crawler or a link
   preview - but they should still look like the old delete-link. */
.link-button {
  background: none;
  border: none;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.delete-link.link-button {
  background-color: #5c1f1f;
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
}

.delete-link.link-button:hover {
  background-color: #7a2c2c;
}