/* =====================================
   CattleMania Inbox
===================================== */

/* =====================================
   PAGE CONTAINER
===================================== */

.inbox-page {
  width: 100%;
}

/* =====================================
   HEADER
===================================== */

.inbox-header {
  background: #0f172a;

  border: 1px solid #1e293b;

  padding: 20px;

  margin-bottom: 20px;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.inbox-header h2 {
  color: white;

  margin: 0;
}

.inbox-header a {
  background: #dc2626;

  color: white;

  padding: 10px 15px;

  text-decoration: none;

  border: 1px solid #ef4444;
}

.inbox-header a:hover {
  background: #b91c1c;
}

/* =====================================
   UNREAD COUNT
===================================== */

.unread-count {
  margin-top: 8px;

  color: #38bdf8;
}

.unread-count b {
  color: white;
}

/* =====================================
   MESSAGE GRID
===================================== */

.message-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;
}

/* =====================================
   MESSAGE CARD
===================================== */

.message-card {
  background: #0b132b;

  border: 1px solid #1e293b;

  padding: 20px;
}

.message-card.unread {
  border-left: 5px solid #dc2626;
}

.message-card h3 {
  color: #38bdf8;

  margin-bottom: 10px;
}

.message-card p {
  color: #e2e8f0;

  margin: 8px 0;
}

/* =====================================
   ACTION BUTTONS
===================================== */

.actions {
  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 15px;
}

.actions form {
  margin: 0;

  padding: 0;

  display: flex;

  align-items: center;
}

.actions a,
.actions input {
  height: 38px;

  min-width: 90px;

  padding: 0 14px;

  border: none;

  cursor: pointer;

  color: white;

  text-decoration: none;

  font-size: 14px;

  font-family: inherit;

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  white-space: nowrap;
}

.reply {
  background: #2563eb;
}

.reply:hover {
  background: #1d4ed8;
}

.mark {
  background: #dc2626;
}

.mark:hover {
  background: #b91c1c;
}

.delete {
  background: #dc2626;
}

.delete:hover {
  background: #b91c1c;
}

/* =====================================
   PAGINATION
===================================== */

.pagination {
  text-align: center;

  margin-top: 30px;
}

.pagination a {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 38px;

  min-width: 40px;

  padding: 0 12px;

  margin: 5px;

  background: #0f172a;

  border: 1px solid #334155;

  color: white;

  text-decoration: none;
}

.pagination a:hover {
  background: #1e293b;
}

.pagination a.active {
  background: #dc2626;
}

/* =====================================
   TABLET
===================================== */

@media (max-width: 1024px) {
  .message-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================
   MOBILE
===================================== */

@media (max-width: 767px) {
  .inbox-header {
    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
  }

  .message-grid {
    grid-template-columns: 1fr;
  }

  .actions {
    flex-direction: row;

    flex-wrap: wrap;

    width: 100%;
  }

  .actions a,
  .actions input {
    flex: 1;

    min-width: 0;
  }
}
/* FIX BUTTON ROW */

.actions {
  display: flex !important;

  flex-direction: row !important;

  align-items: center;

  justify-content: flex-start;

  gap: 10px;

  flex-wrap: nowrap;
}

.actions form {
  display: flex !important;

  margin: 0;

  padding: 0;
}

.actions a,
.actions input {
  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0;
}