/* ---------- MVN Certificates: desktop-friendly + responsive ---------- */

:root {
  --mvn-primary: #C52F33;
  --mvn-accent: #005E60;
}

/* two-column layout */
.mvn-search-wrapper {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

/* FORM column: label block + spacing (keeps label separate from controls) */
.mvn-search-col--form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

/* inline controls: align center on desktop so input and buttons share a baseline */
.mvn-search-inline {
  display: flex;
  gap: 8px;
  align-items: center; /* center baseline on desktop */
  flex-wrap: wrap;
}

/* input: no weird top margins on desktop */
.mvn-search-inline input[type="text"] {
  width: 160px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 0;          /* reset margin */
  box-sizing: border-box;
}

/* buttons: aligned with input baseline */
.mvn-search-inline .mvn-search-button,
.mvn-search-inline .mvn-reset-button {
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;          /* reset margin for consistent alignment */
  line-height: 1;
}

/* strong overrides so theme won't strip styles */
body .mvn-search-wrapper .mvn-search-inline button.mvn-search-button { background: #f6c600 !important; color: #001f3f !important; border: 1px solid rgba(0,0,0,0.06) !important; }
body .mvn-search-wrapper .mvn-search-inline button.mvn-reset-button { background: #08233c !important; color: #fff !important; }
body .mvn-search-wrapper .mvn-result-table td a.mvn-download-btn { background: #005E60 !important; color: #fff !important; }

/* Result table header color */
.mvn-result-table thead th {
  background-color: #C52F33 !important;
  color: #ffffff !important;
  padding: 10px 8px !important;
}

/* Hover subtle */
body .mvn-search-wrapper .mvn-result-table td a.mvn-download-btn:hover,
body .mvn-search-wrapper .mvn-search-inline button.mvn-search-button:hover,
body .mvn-search-wrapper .mvn-search-inline button.mvn-reset-button:hover {
  transform: translateY(-1px);
  opacity: 0.95;
  transition: all 120ms ease;
}

/* ---------- Responsive: mobile stacking ---------- */
@media (max-width: 720px) {
  .mvn-search-wrapper {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .mvn-search-col--form,
  .mvn-search-col--result {
    width: 100%;
  }

  /* stack input and buttons vertically on mobile for comfortable tap targets */
  .mvn-search-inline {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .mvn-search-inline input[type="text"] {
    width: 100% !important;
  }
  /* keep buttons comfortable but not full width; change to full width if you want */
  .mvn-search-inline .mvn-search-button,
  .mvn-search-inline .mvn-reset-button {
    width: 48%;
    max-width: 220px;
    align-self: flex-start;
  }

  /* stacked table: convert table to label/value blocks */
  .mvn-result-table,
  .mvn-result-table thead,
  .mvn-result-table tbody,
  .mvn-result-table tr,
  .mvn-result-table th,
  .mvn-result-table td {
    display: block !important;
    width: 100% !important;
  }
  .mvn-result-table thead { position: absolute; left: -9999px; top: -9999px; }
  .mvn-result-table tbody tr {
    border: 1px solid #eee;
    margin-bottom: 12px;
    padding: 10px;
    background: #fff;
  }
  .mvn-result-table tbody td {
    position: relative;
    padding: 10px 12px 10px 120px;
    border: none;
    white-space: normal;
  }
  /* labels for each cell (adjust nth-child if column order changes) */
  .mvn-result-table tbody td:nth-child(1):before { content: "Admission Number"; }
  .mvn-result-table tbody td:nth-child(2):before { content: "Student"; }
  .mvn-result-table tbody td:nth-child(3):before { content: "Class"; }
  .mvn-result-table tbody td:nth-child(4):before { content: ""; }
  .mvn-result-table tbody td:before {
    position: absolute;
    left: 12px;
    top: 10px;
    width: 96px;
    font-weight: 700;
    color: #333;
  }
  .mvn-result-table tbody td .mvn-download-btn {
    display: inline-flex !important;
    margin-top: 6px;
  }
}