.mtm-button {
  background-color: #0073aa;
  color: #fff;
}

.mtm-button-secondary {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  color: #333;
  margin-right: 0.5rem;
}

.mtm-button-secondary:hover {
  background-color: #e1e1e1;
}

.mtm-button:hover {
  background-color: #005177;
}

.mtm-card-content .mtm-small {
  color: #555;
  font-size: 0.9rem;
}

.mtm-card-content h3,
.mtm-card-content h4 {
  margin: 0 0 0.5rem;
}

.mtm-card-content p {
  margin: 0.25rem 0;
}

.mtm-dashboard-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.mtm-form input[type="submit"] {
  background-color: #0073aa;
  border-radius: 4px;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 10px 20px;
}

.mtm-form input[type="submit"]:hover {
  background-color: #005177;
}

.mtm-form input[type="text"],
.mtm-form input[type="email"],
.mtm-form input[type="password"],
.mtm-form input[type="tel"],
.mtm-form input[type="date"],
.mtm-form select {
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 15px;
  padding: 8px;
  width: 100%;
}

.mtm-form-errors p {
  margin: 0;
  padding: 5px 0;
}

.mtm-form-success {
  background-color: #e0f6e4;
  border-radius: 5px;
  border: 1px solid #46b450;
  color: #46b450;
  margin-bottom: 20px;
  padding: 10px;
}

.mtm-form-success p {
  margin: 0;
  padding: 5px 0;
}

.required {
  color: red;
}

/* Buttons */
.mtm-button,
.mtm-button-secondary {
  border-radius: 4px;
  display: inline-block;
  font-weight: bold;
  padding: 0.6em 1em;
  text-align: center;
  text-decoration: none;
}

/* Dashboard container */
.mtm-club-dashboard {
  margin: 2rem auto;
  max-width: 1200px;
  padding: 0 1rem;
}

/* File: public/css/mtm-public-styles.css */

.mtm-form-errors {
  background-color: #ffebe8;
  border-radius: 5px;
  border: 1px solid #dc3232;
  color: #dc3232;
  margin-bottom: 20px;
  padding: 10px;
}

/* General form styling */
.mtm-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Grid of cards */
.mtm-dashboard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 2fr 3fr;
}

/* Individual card */
.mtm-dashboard-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e1e1e1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
}

#mtm-participant-list-table .actions button {
  min-width: 90px;
  text-align: center;
}


.mtm-participant-grid {
  display: grid;
  grid-template-columns: 0fr 1fr; /* form collapsed by default */
  gap: 1rem;
  transition: all 0.3s ease;
}



.mtm-participant-grid.form-active {
  grid-template-columns: 320px 1fr; /* fixed width form */
}

.right-panel.simplified-view table thead th:nth-child(2),
.right-panel.simplified-view table thead th:nth-child(3),
.right-panel.simplified-view table thead th:nth-child(4),
.right-panel.simplified-view table thead th:nth-child(5),
.right-panel.simplified-view table tbody td:nth-child(2),
.right-panel.simplified-view table tbody td:nth-child(3),
.right-panel.simplified-view table tbody td:nth-child(4),
.right-panel.simplified-view table tbody td:nth-child(5) {
  display: none;
}


/* Timetable full-page layout */
.mtm-timetable {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem 1rem;
  box-sizing: border-box;
}

/* Each day block */
.mtm-timetable-day {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 2rem;
  padding: 1rem;
  background: #fafafa;
}

/* Date heading */
.mtm-timetable-date {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* List of entries for the day */
.mtm-timetable-entries {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Individual timetable row */
.mtm-timetable-entry {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid #e1e1e1;
  padding-top: 0.75rem;
}

.mtm-timetable-entry:first-child {
  border-top: none;
}

/* Time column */
.mtm-time {
  flex: 0 0 120px;
  font-weight: 600;
  font-size: 1rem;
  color: #333;
}

/* Time separator */
.mtm-separator {
  margin: 0 0.25rem;
}

/* Details column */
.mtm-details {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.4;
}

.mtm-mat {
  font-weight: 500;
  margin-right: 1rem;
}

.mtm-class {
  font-weight: 600;
}

.mtm-description {
  color: #666;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .mtm-timetable-entry {
    flex-direction: column;
  }

  .mtm-time {
    margin-bottom: 0.5rem;
  }
}

.mtm-timetable-grid {
  width: 100%;
  border-collapse: collapse;
}
.mtm-timetable-grid th,
.mtm-timetable-grid td {
  border: 1px solid #ddd;
  padding: 0.6rem;
  text-align: center;
}
.mtm-time {
  font-weight: bold;
  text-align: left;
}
.mtm-class-name {
  font-weight: 600;
}
.mtm-description {
  font-size: 0.9em;
  color: #666;
}

.mtm-judge-list .actions {
  text-align: center;
}

/* make the TH use flex so its contents never wrap */
.mtm-th--with-info .mtm-th__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

/* tooltip styles */
.mtm-info {
  position: relative;
  cursor: help;
  font-style: normal; /* keep the ℹ plain */
}
.mtm-info::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.5em);
  white-space: nowrap;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 0.35em 0.5em;
  border-radius: 0.25em;
  font-size: 0.85em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out;
  z-index: 10;
}
.mtm-info:hover::after {
  opacity: 1;
}



.mtm-table { width:100%; border-collapse: collapse; }
.mtm-table th, .mtm-table td { padding: 6px 8px; border-bottom: 1px solid #eee; }
.mtm-round-sep td { background: #f7f7f7; font-weight: 600; }
.mtm-class-name a { text-decoration: none; }
.mtm-class-name a:hover { text-decoration: underline; }



/* ---------- mtm: compact inline-label nav login — tightened dimensions ---------- */

/* container width cap (tweak if your header is narrower) */
.mtm-nav-login {
  max-width: 420px;    /* smaller cap to avoid overflow */
  box-sizing: border-box;
}

/* form layout: wrap into two rows, password+button on second row */
.mtm-nav-login form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;       /* tightened spacing (row-gap column-gap) */
  margin: 0;
  padding: 0;
  width: 100%;
}

/* WP <p> wrappers: inline-flex so label+field stay on one line */
.mtm-nav-login form > p {
  margin: 0;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
}

/* Username row: force full width (row 1) */
.mtm-nav-login p.login-username {
  flex: 1 1 100%;
  min-width: 0;
}

/* Password row: share row with submit (row 2) */
.mtm-nav-login p.login-password {
  flex: 1 1 auto;
  min-width: 0;
}

/* Submit on same row, pushed right */
.mtm-nav-login p.login-submit {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* LABEL: fixed width so inputs align vertically — reduce font a bit */
.mtm-nav-login label {
  display: inline-block;
  width: 80px;         /* controls alignment — increase if labels overlap input */
  font-size: 11px;      /* a touch smaller */
  font-weight: 600;
  color: #222;
  white-space: nowrap;
}

/* hide "remember me" visually (keeps a11y) */
.mtm-nav-login p.forgetmenot,
.mtm-nav-login p.login-remember {
  display: none;
}

/* INPUTS: smaller height, slightly smaller font, compact width */
.mtm-nav-login input[type="text"],
.mtm-nav-login input[type="password"] {
  height: 30px;         /* reduced from 34px */
  padding: 0 8px;
  font-size: 12px;      /* slightly smaller text */
  border-radius: 3px;
  border: 1px solid #d0d0d0;
  width: 100%;          /* fill remaining space in flex item */
  max-width: 200px;     /* reduce max width so nav stays compact */
  box-sizing: border-box;
  min-width: 0;
}

/* SUBMIT: match smaller height, smaller font */
.mtm-nav-login input[type="submit"],
.mtm-nav-login input#mtm_nav_submit {
  height: 30px;        /* match input height */
  padding: 0 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* defensive: prevent overflow */
.mtm-nav-login * { max-width: 100%; box-sizing: border-box; }

/* mobile fallback: stack vertically on small screens */
@media (max-width: 720px) {
  .mtm-nav-login form {
    flex-direction: column;
    align-items: stretch;
  }
  .mtm-nav-login p.login-username,
  .mtm-nav-login p.login-password,
  .mtm-nav-login p.login-submit {
    flex: 1 1 auto;
    margin-left: 0;
  }
  .mtm-nav-login p.login-submit {
    justify-self: end;
    display: flex;
    justify-content: flex-end;
  }
  .mtm-nav-login label { width: 120px; }
  .mtm-nav-login input[type="text"],
  .mtm-nav-login input[type="password"] { max-width: 100%; }
}


/* Tournament registration: card grid + card tweaks */
.mtm-tournament-registration .mtm-dashboard-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* container for cards */
#tournament_categories_container .mtm-card-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: start;
}

/* mobile: single column */
@media (max-width: 800px) {
  #tournament_categories_container .mtm-card-grid{
    grid-template-columns: 1fr;
  }
}

/* participant card (re-use your dashboard card look) */
.mtm-participant-card {
  padding: 1rem;
  cursor: default;
}

/* card header layout: name + checkbox aligned */
.mtm-participant-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

/* style the participant checkbox to be visually larger */
.mtm-participant-header input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}

/* categories area inside the card */
.mtm-participant-categories {
  display: block;
  margin-top: 0.4rem;
  padding-top: 0.25rem;
  border-top: 1px dashed #eee;
}

/* each category label */
.mtm-participant-categories label {
  display: inline-block;
  margin: 0.25rem 0.6rem 0.25rem 0;
  white-space: normal;
  font-weight: 400;
  font-size: 0.95rem;
}

/* category checkbox sizing */
.mtm-participant-categories input[type="checkbox"]{
  transform: translateY(1px);
  margin-right: 0.35rem;
}

/* subtle visual separation between cards */
.mtm-participant-card + .mtm-participant-card {
  /* nothing needed — grid gap handles separation, but keep in case */
}

/* ensure submit area sits below the cards */
#tournament_categories_container + p.submit {
  margin-top: 1rem;
}

/* if the page originally used only left 50%, force container to use full width */
.mtm-tournament-registration .mtm-club-page,
.mtm-tournament-registration .mtm-dashboard-card,
.mtm-tournament-registration .mtm-category-list {
  width: 100%;
  max-width: 100%;
}



/* ---------- Participant grid: sane left column + expand-on-form-open ---------- */
/* Ensure the grid uses explicit columns so left panel doesn't collapse */
.mtm-participant-grid {
  display: grid;
  grid-template-columns: 220px 1fr; /* default: small left panel + main content */
  gap: 1rem;
  align-items: start;
  align-content: start;
  box-sizing: border-box;
}

/* Make the left panel stable: not allowed to shrink below min */
.mtm-participant-grid .left-panel {
  min-width: 200px;      /* cannot shrink below this */
  max-width: 420px;      /* reasonable maximum when expanded */
  width: auto;
  box-sizing: border-box;
  overflow: auto;        /* allow scrolling inside the left panel if content grows */
  padding: 1rem;
}

/* When the form is opened your JS toggles .form-active on the grid;
   expand the left column in that state so form has room */
.mtm-participant-grid.form-active {
  grid-template-columns: 420px 1fr; /* expanded left panel + main content */
}

/* Right panel should occupy remaining space and scroll if tall */
.mtm-participant-grid .right-panel {
  overflow: auto;
  box-sizing: border-box;
  padding: 1rem;
}

/* Mobile: stack panels vertically (always readable) */
@media (max-width: 900px) {
  .mtm-participant-grid,
  .mtm-participant-grid.form-active {
    grid-template-columns: 1fr;
  }
  .mtm-participant-grid .left-panel {
    order: -1; /* place form above list on small screens when toggled */
    max-width: none;
    min-width: 0;
  }
}

/* ---------- Prevent text/input overflow inside the left panel ---------- */
/* Inputs / selects / textareas in the left panel should fill the column and wrap */
.mtm-participant-grid .left-panel input[type="text"],
.mtm-participant-grid .left-panel input[type="date"],
.mtm-participant-grid .left-panel input[type="number"],
.mtm-participant-grid .left-panel select,
.mtm-participant-grid .left-panel textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  word-break: break-word;
}

/* Make labels stack nicely and prevent overflow */
.mtm-participant-grid .left-panel p {
  margin-bottom: 0.75rem;
}
.mtm-participant-grid .left-panel label {
  display: block;
  margin-bottom: 0.35rem;
  word-break: break-word;
}

/* Keep the left-panel buttons full width for easier clicking */
.mtm-participant-grid .left-panel .mtm-button,
.mtm-participant-grid .left-panel .mtm-button-secondary {
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Participant table / right panel readability ---------- */
/* Use full width and prevent table columns from overflowing the page */
#mtm-participant-list-table {
  width: 100%;
  table-layout: fixed; /* helps keep layout consistent */
  border-collapse: collapse;
}

/* allow column text to ellipsize rather than overflow */
#mtm-participant-list-table th,
#mtm-participant-list-table td {
  padding: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* If you want DOB column to wrap, make it narrower but allow wrap for name */
#mtm-participant-list-table td.name,
#mtm-participant-list-table th.name { white-space: normal; }

/* Small visual spacing so content doesn't butt up against edges */
.mtm-dashboard-card { box-sizing: border-box; }

/* Optional tiny polish (visual focus when form is active) */
.mtm-participant-grid.form-active .left-panel {
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  border-radius: 6px;
  transition: box-shadow .2s ease;
}


/* Make participant table size naturally so columns get required space */
#mtm-participant-list-table {
  width: 100%;
  table-layout: auto; /* allow browser to size columns by content */
}

/* General table cell rules: allow wrapping except where we want nowrap */
#mtm-participant-list-table th,
#mtm-participant-list-table td {
  padding: 0.5rem;
  vertical-align: middle;
  overflow: visible;      /* let content show (prevents premature ellipsis) */
  text-overflow: clip;    /* don't force '...' unless desired */
  white-space: normal;    /* allow wrapping by default */
}

/* Keep the Name column flexible but allow wrap for long names */
#mtm-participant-list-table td.name,
#mtm-participant-list-table th.name {
  white-space: normal;
}

/* Ensure action column is wide enough and doesn't get clipped */
#mtm-participant-list-table th.actions,
#mtm-participant-list-table td.actions {
  white-space: nowrap;     /* keep buttons on one line */
  min-width: 140px;        /* reserve enough room for buttons */
  width: 1%;               /* let the cell take necessary width while allowing others to grow */
}

/* Buttons inside actions: natural inline sizing and small gap */
#mtm-participant-list-table td.actions .mtm-button-secondary {
  display: inline-block;
  white-space: nowrap;
  margin-right: 0.4rem;
  vertical-align: middle;
  box-sizing: border-box;
}

/* If you prefer buttons stacked on very small screens */
@media (max-width: 700px) {
  #mtm-participant-list-table th.actions,
  #mtm-participant-list-table td.actions {
    white-space: normal;
    min-width: 0;
  }
  #mtm-participant-list-table td.actions .mtm-button-secondary {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.4rem;
  }
}


/* Judges table: keep QR & Actions fixed, let Preferences take the remaining space */

/* 1) Use a predictable table layout */
#mtm-judge-list-table {
  width: 100%;
  table-layout: fixed;       /* prevents a single long cell from growing the whole table */
  border-collapse: collapse;
}

/* 2) Basic cell styling and overflow handling */
#mtm-judge-list-table th,
#mtm-judge-list-table td {
  padding: 0.5rem;
  vertical-align: middle;
  box-sizing: border-box;
  overflow: hidden;
}

/* 3) Column widths (percentages sum to 100%) */
/* a) Name column: small but visible */
#mtm-judge-list-table th:nth-child(1),
#mtm-judge-list-table td:nth-child(1) {
  width: 18%;
  min-width: 130px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* b) Preferences column: takes the majority of available space and wraps */
#mtm-judge-list-table th:nth-child(2),
#mtm-judge-list-table td:nth-child(2) {
  width: 58%;
  white-space: normal;       /* allow wrapping for long preference text */
  word-break: break-word;    /* break long words/strings safely */
  max-height: 12em;          /* optional: limit how tall a single cell can grow */
}

/* c) QR column: fixed-ish (keeps the image small and stable) */
#mtm-judge-list-table th:nth-child(3),
#mtm-judge-list-table td:nth-child(3) {
  width: 12%;
  min-width: 100px;
  text-align: center;
}

/* constrain the QR image size so it doesn't force column growth */
#mtm-judge-list-table td.qr-code-cell img {
  display: inline-block;
  max-width: 90px;
  max-height: 90px;
  width: auto;
  height: auto;
}

/* d) Actions column: reserve room for buttons */
#mtm-judge-list-table th:nth-child(4),
#mtm-judge-list-table td:nth-child(4) {
  width: 12%;
  min-width: 140px;
  white-space: nowrap;       /* keep buttons on one line on normal screens */
  text-align: right;
}

/* Buttons inside actions: do not get clipped */
#mtm-judge-list-table td.actions .mtm-button-secondary {
  display: inline-block;
  white-space: nowrap;
  margin-left: 0.35rem;
  vertical-align: middle;
  box-sizing: border-box;
}

/* 4) Responsive: on small screens make the table scrollable horizontally,
      and allow action buttons to stack if needed */
@media (max-width: 820px) {
  .mtm-judge-list .mtm-judge-list { /* wrapper if you have one */ }
  /* make table horizontally scrollable if it overflows */
  .mtm-judge-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #mtm-judge-list-table {
    table-layout: auto; /* fallback to let the browser choose column widths on tiny screens */
  }
  #mtm-judge-list-table th:nth-child(4),
  #mtm-judge-list-table td:nth-child(4) {
    white-space: normal;
    min-width: 0;
  }
  #mtm-judge-list-table td.actions .mtm-button-secondary {
    display: block;
    width: 100%;
    margin: .25rem 0;
  }
}


/* ---------- Judges page: left-column small + expand on form-open ---------- */
.mtm-my-judges .mtm-dashboard-grid {
  display: grid;
  grid-template-columns: 220px 1fr; /* small left column + main content */
  gap: 1rem;
  align-items: start;
  box-sizing: border-box;
}

/* left card (form) sizing and padding */
.mtm-my-judges .mtm-dashboard-grid .mtm-dashboard-card:first-child {
  min-width: 200px;
  max-width: 420px;
  width: auto;
  padding: 1rem;
  box-sizing: border-box;
}

/* When form opens: expand left column */
.mtm-my-judges .mtm-dashboard-grid.form-active {
  grid-template-columns: 420px 1fr;
}

/* .simplified-view applied to the list: optional visual polish */
.mtm-my-judges .mtm-judge-list.simplified-view {
  transition: opacity .18s ease;
}

/* ---------- Hide Preferences + QR columns while form is open ---------- */
/* Hide both the header and the cells for Preferences (2) and QR (3) */
.mtm-my-judges .mtm-dashboard-grid.form-active
  #mtm-judge-list-table th:nth-child(2),
.mtm-my-judges .mtm-dashboard-grid.form-active
  #mtm-judge-list-table td:nth-child(2),
.mtm-my-judges .mtm-dashboard-grid.form-active
  #mtm-judge-list-table th:nth-child(3),
.mtm-my-judges .mtm-dashboard-grid.form-active
  #mtm-judge-list-table td:nth-child(3) {
  display: none;
}

/* Ensure actions column expands to take available space when columns hidden */
.mtm-my-judges .mtm-dashboard-grid.form-active
  #mtm-judge-list-table th:nth-child(4),
.mtm-my-judges .mtm-dashboard-grid.form-active
  #mtm-judge-list-table td:nth-child(4) {
  width: auto;
  min-width: 140px;
  text-align: right;
  white-space: nowrap;
}

/* Constrain QR images when visible (prevents them from stretching layout) */
#mtm-judge-list-table td.qr-code-cell img {
  display: inline-block;
  max-width: 90px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Mobile: stack panels, keep behaviour consistent */
@media (max-width: 900px) {
  .mtm-my-judges .mtm-dashboard-grid,
  .mtm-my-judges .mtm-dashboard-grid.form-active {
    grid-template-columns: 1fr;
  }
  /* hidden columns will not be shown on mobile; scrolling will be available */
  .mtm-my-judges .mtm-judge-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* quick: reserve 180px for Actions column */
.mtm-club-page.mtm-my-judges #mtm-judge-list-table th:nth-child(4),
.mtm-club-page.mtm-my-judges #mtm-judge-list-table td:nth-child(4) {
  min-width: 220px !important;
  width: 220px !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* quick: reserve 180px for Actions column */
.mtm-club-page.mtm-my-judges #mtm-judge-list-table th:nth-child(3),
.mtm-club-page.mtm-my-judges #mtm-judge-list-table td:nth-child(3) {
  min-width: 120px !important;
  width: 120px !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* quick: reserve 180px for Actions column */
.mtm-club-page.mtm-my-judges #mtm-judge-list-table th:nth-child(1),
.mtm-club-page.mtm-my-judges #mtm-judge-list-table td:nth-child(1) {
  min-width: 180px !important;
  width: 180px !important;
  white-space: nowrap !important;
  text-align: left !important;
}


/* Scope to specific views: .mtm-my-participants and .mtm-my-judges */
.mtm-club-dashboard .mtm-dashboard-grid,
.mtm-club-page.mtm-judge-dashboard .mtm-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* equal columns */
  gap: 1rem;
  align-items: stretch;           /* stretch cards to same height */
  box-sizing: border-box;
}

/* Ensure dashboard-cards become column-flex containers so content fills height */
.mtm-club-page.mtm-my-participants .mtm-dashboard-card,
.mtm-club-page.mtm-my-judges    .mtm-dashboard-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* Let the inner content expand & scroll if needed */
.mtm-club-page.mtm-my-participants .mtm-card-content,
.mtm-club-page.mtm-my-judges    .mtm-card-content {
  flex: 1 1 auto;
  min-height: 0;
}

/* Responsive: fallback to single-column on narrow screens */
@media (max-width: 900px) {
  .mtm-club-page.mtm-my-participants .mtm-dashboard-grid,
  .mtm-club-page.mtm-my-judges    .mtm-dashboard-grid {
    grid-template-columns: 1fr;
  }
}


/* ---------------- MTM: Responsive scoring layout ---------------- */

/* visually-hidden helper for accessible labels */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* container */
.mtm-score-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* each participant card */
.mtm-score-item {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 0.6rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

/* the internal row: mobile stacked, desktop grid */
.mtm-score-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}

/* Participant name */
.mtm-score-name {
  font-weight: 600;
  font-size: 1rem;
  color: #111;
  word-break: break-word;
  margin-bottom: 0.25rem;
}

/* controls container (score + remarks) */
.mtm-score-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* single control wrapper */
.mtm-score-control input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
  font-size: 0.96rem;
  line-height: 1.25;
}

/* make number input slightly narrower visually but still full width on mobile */
.mtm-score-control--value input[type="number"] {
  -moz-appearance: textfield;
}

/* action area (submit) spacing */
.mtm-card-action {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
}

/* Desktop / wide screens: show row as columns (table-like) */
@media (min-width: 720px) {
  .mtm-score-list {
    gap: 0.4rem;
  }
  .mtm-score-item {
    padding: 0.5rem 0.75rem;
  }
  .mtm-score-row {
    display: grid;
    grid-template-columns: 1fr 180px 1fr; /* name | score | remarks */
    gap: 0.75rem;
    align-items: center;
  }
  .mtm-score-name {
    margin-bottom: 0;
    font-size: 0.98rem;
  }
  .mtm-score-controls {
    flex-direction: row;
    gap: 0.6rem;
    align-items: center;
  }
  .mtm-score-control--value { width: 100%; max-width: 180px; }
  .mtm-score-control--remarks { width: 100%; }
  .mtm-score-control input { padding: 0.45rem 0.6rem; }
}

/* make sure long remarks wrap and don't overflow */
.mtm-score-control--remarks input {
  white-space: normal;
  word-break: break-word;
}

/* visual polish: subtle focus rings for accessibility */
.mtm-score-control input:focus {
  outline: 3px solid rgba(70,130,180,0.12);
  outline-offset: 2px;
  border-color: rgba(70,130,180,0.35);
}

/* ensure form fits the viewport on mobile: avoid horizontal overflow */
.mtm-judge-scoring .mtm-dashboard-card,
.mtm-judge-scoring .mtm-score-list,
.mtm-judge-scoring .mtm-score-item {
  box-sizing: border-box;
  max-width: 100%;
}

/* reduce input font-size slightly on very small screens for space */
@media (max-width: 360px) {
  .mtm-score-control input { font-size: 0.92rem; padding: 0.4rem 0.5rem; }
}