/*
 * Shared "modern" design system for the .mpats-modern-page pages:
 * View/Apply/ApplyComplete/ApplyCompleteWorkflow/ApplyReject.
 *
 * Linked once from each client layout (logicmelonsales.cshtml, template.cshtml,
 * logicmelonsalesTiles.cshtml). Per-client brand colours are NOT here - those
 * are injected as a small --mm-* custom-property override by the layout itself
 * (reads ClientConfigurationSettings once per request). This file only holds
 * the parts that never change per client: variable defaults/fallbacks and the
 * mm-* component styles (cards, buttons, detail layout, summary sidebar,
 * confirmation panels).
 *
 * Results.cshtml/ResultsTiles.cshtml render inside this same page wrapper but
 * are their own distinct visual system (Syne font, different border-radius
 * scale, --mm-hero-bg/--mm-border-hover variables not used elsewhere, facet
 * sidebar, search hero banner, result-row cards) predating this shared file -
 * genuinely almost no overlap with the component classes below (checked: only
 * the box-sizing reset was actually duplicated, now sourced from here).
 * ResultsTiles.cshtml additionally scopes under .mpats-tiles-page, not
 * .mpats-modern-page, so none of this file applies to it regardless.
 */

.mpats-modern-page {
    --mm-brand: #1a1a1a;
    --mm-brand-text: #ffffff;
    --mm-bg: #ffffff;
    --mm-bg-secondary: #ffffff;
    --mm-bg-tertiary: #f1f1f1;
    --mm-text-primary: #2d3238;
    --mm-text-secondary: #6b6b6b;
    --mm-border: #e6e6e3;
    --mm-row-accent: #ff2344;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--mm-text-primary);
    background: var(--mm-bg-secondary);
}
.mpats-modern-page, .mpats-modern-page *, .mpats-modern-page *::before, .mpats-modern-page *::after { box-sizing: border-box; }
.mpats-modern-page .mm-detail-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 20px 48px; }

/* Divi/WordPress sticky-sidebar fix - harmless no-op on non-Divi client sites */
#et-main-area, #main-content, #mpatscontent { overflow: visible !important; }

/* Back link */
.mpats-modern-page .mm-detail-back { margin-bottom: 14px; }
.mpats-modern-page .mm-detail-back a {
  color: var(--mm-brand);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mpats-modern-page .mm-detail-back a svg { width: 14px; height: 14px; }
.mpats-modern-page .mm-detail-back a:hover { text-decoration: underline; }

/* Card base */
.mpats-modern-page .mm-card {
  background: var(--mm-bg);
  border: 1px solid var(--mm-border);
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 18px;
}
.mpats-modern-page .mm-card-accent { border-left: 4px solid var(--mm-row-accent); }
.mpats-modern-page .mm-card h2, .mpats-modern-page .mm-page-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--mm-text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.mpats-modern-page .mm-card h2::before, .mpats-modern-page .mm-page-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 18px;
  background: var(--mm-row-accent);
  border-radius: 2px;
}

/* Hero (base - Apply's plain stacked hero; View.cshtml layers its own
   display:flex variant + head/actions/badge classes on top, page-side) */
.mpats-modern-page .mm-detail-hero {
  background: var(--mm-bg);
  border: 1px solid var(--mm-border);
  border-left: 4px solid var(--mm-row-accent);
  border-radius: 10px;
  padding: 22px 28px;
  margin-bottom: 22px;
}
.mpats-modern-page .mm-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-text-secondary);
  margin-bottom: 8px;
}
.mpats-modern-page .mm-detail-title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mm-text-primary);
}
.mpats-modern-page .mm-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  font-size: 13.5px;
  color: var(--mm-text-secondary);
}
.mpats-modern-page .mm-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mpats-modern-page .mm-detail-meta .mm-meta-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.7;
}

/* Two-column layout */
.mpats-modern-page .mm-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
.mpats-modern-page .mm-detail-main { min-width: 0; }
.mpats-modern-page .mm-detail-side { position: sticky; top: 20px; }
@media (max-width: 880px) {
  .mpats-modern-page .mm-detail-grid { grid-template-columns: 1fr; }
  .mpats-modern-page .mm-detail-side { position: static !important; }
}

/* Buttons */
.mpats-modern-page .mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 22px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
  white-space: nowrap;
  /* Title-case every button label from CSS rather than hand-editing every
     hardcoded string across every page - matches the legacy .mpatsbutton
     look (which got this for free from an old text-transform rule) without
     having to keep dozens of label strings in sync by hand. */
  text-transform: capitalize;
}
.mpats-modern-page .mm-btn svg { width: 14px; height: 14px; }
.mpats-modern-page .mm-btn-primary {
  background: var(--mm-brand); color: var(--mm-brand-text) !important; border-color: var(--mm-brand);
}
.mpats-modern-page .mm-btn-primary:hover { opacity: 0.9; color: var(--mm-brand-text) !important; }
.mpats-modern-page .mm-btn-outline {
  background: var(--mm-bg); color: var(--mm-text-primary); border-color: var(--mm-border);
}
.mpats-modern-page .mm-btn-outline:hover { background: var(--mm-bg-secondary); color: var(--mm-text-primary); }
.mpats-modern-page .mm-btn-block { width: 100%; }
.mpats-modern-page .mm-btn-lg { height: 48px; padding: 0 30px; font-size: 15px; }
.mpats-modern-page .mm-btn-sm { height: 34px; padding: 0 16px; font-size: 12.5px; }

/* Summary sidebar (job overview / application summary cards) */
.mpats-modern-page .mm-summary { padding: 0; overflow: hidden; }
.mpats-modern-page .mm-summary-head {
  padding: 14px 22px;
  background: var(--mm-bg-secondary);
  border-bottom: 1px solid var(--mm-border);
  font-size: 14px; font-weight: 600;
  color: var(--mm-text-primary);
}
.mpats-modern-page .mm-summary-list { padding: 8px 22px 16px; margin: 0; }
.mpats-modern-page .mm-summary-item {
  padding: 10px 0;
  display: flex; gap: 12px; align-items: flex-start;
}
.mpats-modern-page .mm-summary-item + .mm-summary-item { border-top: 1px solid var(--mm-border); }
.mpats-modern-page .mm-summary-icon {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 2px;
  opacity: 0.55;
}
.mpats-modern-page .mm-summary-body { flex: 1 1 auto; min-width: 0; }
.mpats-modern-page .mm-summary-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mm-text-secondary);
  margin-bottom: 2px;
}
.mpats-modern-page .mm-summary-value {
  font-size: 14px;
  color: var(--mm-text-primary);
  word-break: break-word;
}

/* Confirmation panels (ApplyComplete / ApplyCompleteWorkflow / ApplyReject) */
.mpats-modern-page .mm-confirm-wrap { max-width: 640px; margin: 24px auto 48px; }
.mpats-modern-page .mm-confirm-card { text-align: center; }
.mpats-modern-page .mm-confirm-icon {
  display: inline;
  color: var(--mm-row-accent);
  vertical-align: middle;
}
.mpats-modern-page .mm-confirm-icon svg { width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; }
.mpats-modern-page .mm-confirm-title { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: var(--mm-text-primary); }
/* .mm-confirm-card also carries .mm-card (for its background/border/padding), so
   .mm-card h2's flex layout + coloured ::before accent bar (meant for generic
   card section headings) would otherwise bleed into the confirm heading -
   override back to plain centered text + inline icon. */
.mpats-modern-page .mm-confirm-card .mm-confirm-title { display: block; }
.mpats-modern-page .mm-confirm-card .mm-confirm-title::before { content: none; }
.mpats-modern-page .mm-confirm-message {
  font-size: 14.5px; line-height: 1.6; color: var(--mm-text-secondary);
  margin: 0 0 20px; font-weight: normal; background: none; padding: 0;
}
.mpats-modern-page .mm-confirm-message div { margin-top: 12px; word-break: break-word; }
.mpats-modern-page .mm-confirm-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
/* Reject/neutral variant - not a success state, no brand-coloured icon */
.mpats-modern-page .mm-confirm-card.mm-confirm-neutral { border-left: 4px solid var(--mm-text-secondary); }
.mpats-modern-page .mm-confirm-icon.mm-confirm-icon-neutral { color: var(--mm-text-secondary); }

/* Forms (Apply/SendToAFriend/etc - any page with a real input form inside a
   #ApplyForm/mm-card). Promoted here from Apply.cshtml's own styles once a
   second page (SendToAFriend.cshtml) needed the identical field/grid/button
   treatment - keep this shared, don't re-duplicate per page. */
.mpats-modern-page .mm-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-bottom: 16px;
}
.mpats-modern-page .mm-form-row.mm-form-row-1col { grid-template-columns: 1fr; }
@media (max-width: 600px) {
  .mpats-modern-page .mm-form-row { grid-template-columns: 1fr; }
}
.mpats-modern-page .mm-form-field { display: flex; flex-direction: column; min-width: 0; }
.mpats-modern-page .mm-form-field > label,
.mpats-modern-page .mm-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mm-text-primary);
  margin-bottom: 6px;
}
.mpats-modern-page .mm-required { color: #e53935; margin-left: 2px; }

.mpats-modern-page .mm-form-field input[type="text"],
.mpats-modern-page .mm-form-field input[type="email"],
.mpats-modern-page .mm-form-field input[type="tel"],
.mpats-modern-page .mm-form-field input[type="password"],
.mpats-modern-page .mm-form-field input[type="number"],
.mpats-modern-page .mm-form-field select,
.mpats-modern-page .mm-form-field textarea {
  /* #mpatscontent input[type="text"] etc in the client layouts (the
     "Modern form styling for legacy pages" stopgap block, still needed by
     pages not yet migrated onto mm-form-field) is ID-scoped, so its
     width:100%/max-width:500px otherwise beats this class-only selector
     regardless of how many classes are stacked here - !important needed
     to actually win inside a migrated form. */
  width: 100% !important;
  max-width: none !important;
  font: inherit;
  font-size: 14px;
  color: var(--mm-text-primary);
  background: var(--mm-bg);
  border: 1px solid var(--mm-border);
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.mpats-modern-page .mm-form-field textarea { min-height: 120px; resize: vertical; }
.mpats-modern-page .mm-form-field input:focus,
.mpats-modern-page .mm-form-field select:focus,
.mpats-modern-page .mm-form-field textarea:focus {
  border-color: var(--mm-row-accent);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12);
}
.mpats-modern-page .mm-form-field .field-validation-error,
.mpats-modern-page .mm-form-field .input-validation-error + .field-validation-error,
.mpats-modern-page .mm-form-field label.error {
  display: block;
  font-size: 12px;
  color: #e53935;
  margin-top: 6px;
}

/* File upload zone (Apply/SendCV CV upload dropzone) - promoted here once
   SendCV.cshtml became the second page needing the identical component. */
.mpats-modern-page .mm-fileupload {
  border: 2px dashed var(--mm-border);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  background: var(--mm-bg-secondary);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  position: relative;
}
.mpats-modern-page .mm-fileupload:hover { border-color: var(--mm-row-accent); }
.mpats-modern-page .mm-fileupload-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--mm-bg);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
  color: var(--mm-row-accent);
}
.mpats-modern-page .mm-fileupload-icon svg { width: 18px; height: 18px; }
.mpats-modern-page .mm-fileupload-text {
  font-size: 14px;
  color: var(--mm-text-primary);
}
.mpats-modern-page .mm-fileupload-text .mm-link { color: var(--mm-brand); font-weight: 600; }
.mpats-modern-page .mm-fileupload-hint {
  font-size: 12px;
  color: var(--mm-text-secondary);
  margin-top: 6px;
}
.mpats-modern-page .mm-fileupload input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.mpats-modern-page .mm-fileupload-filename {
  display: block; margin-top: 10px;
  font-size: 13px; color: var(--mm-text-primary); font-weight: 600;
}

/* Killer questions / FormWorkflow questions (rendered as raw HTML by partials) +
   work eligibility radios - promoted here once Registration.cshtml became the
   second page needing the identical treatment. */
.mpats-modern-page #ApplyForm .killerQuestion,
.mpats-modern-page #ApplyForm .mpatsworkelegibility p {
  padding: 6px 0;
}
.mpats-modern-page #ApplyForm .killerQuestion select,
.mpats-modern-page #ApplyForm .mpatsworkelegibility input[type="radio"] {
  margin-right: 6px;
}

/* Apply with LinkedIn/Indeed block spacing */
.mpats-modern-page #mpatsapplywith { margin-top: 20px; }

/* Section heading inside cards (legacy h2.rule, h3) + info/required/validation boxes */
.mpats-modern-page #ApplyForm h2,
.mpats-modern-page #ApplyForm h3 { color: var(--mm-text-primary); }
.mpats-modern-page .mm-section-note,
.mpats-modern-page .mpatsinfoMessage {
  font-size: 13px; color: var(--mm-text-secondary);
  background: var(--mm-bg-secondary);
  border-left: 3px solid var(--mm-row-accent);
  padding: 10px 14px; border-radius: 6px;
  margin-bottom: 14px;
}
.mpats-modern-page .mpatsrequired { color: #e53935; }
.mpats-modern-page .mpatsstarrequired { color: #e53935; }
.mpats-modern-page .mpatsvalidation-summary-div {
  background: #fef2f2; border: 1px solid #fecaca;
  color: #991b1b; padding: 10px 14px; border-radius: 8px;
  font-size: 13px; margin-bottom: 14px;
}

/* Submit row */
.mpats-modern-page .mm-form-actions {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 8px;
}
.mpats-modern-page input[type="submit"].mm-btn { -webkit-appearance: none; appearance: none; }

/* Vacancies list (shown on Apply/SendToAFriend when applying/sending multiple roles) */
.mpats-modern-page ul.mpatsapplylist { list-style: none; padding: 0; margin: 0; }
.mpats-modern-page ul.mpatsapplylist li {
  padding: 6px 0; font-size: 14px; color: var(--mm-text-primary);
}

/* Hide legacy table chrome if a #ApplyForm still has a table.mpatsform in it */
.mpats-modern-page #ApplyForm table.mpatsform,
.mpats-modern-page #ApplyForm table.mpatsform > tbody,
.mpats-modern-page #ApplyForm table.mpatsform > tbody > tr,
.mpats-modern-page #ApplyForm table.mpatsform > tbody > tr > td {
  display: block; width: 100%; border: 0; padding: 0; background: transparent;
}

/* Repeated-item list (stored CVs, stored documents, or any similar simple
   record list) - promoted here from CVs.cshtml's own page-specific style once
   Documents.cshtml needed the identical treatment (the project's "promote on
   second use" rule). */
.mpats-modern-page .mm-item-list { list-style: none; margin: 0 0 18px; padding: 0; }
.mpats-modern-page .mm-item-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; flex-wrap: wrap; }
.mpats-modern-page .mm-item-row + .mm-item-row { border-top: 1px solid var(--mm-border); }
.mpats-modern-page .mm-item-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-text-secondary); margin-bottom: 2px; }
.mpats-modern-page .mm-item-value { color: var(--mm-text-primary); font-size: 14px; margin-bottom: 8px; }
.mpats-modern-page .mm-item-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; flex-wrap: wrap; }
.mpats-modern-page .mm-delete-link { color: #e53935; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.mpats-modern-page .mm-delete-link:hover { text-decoration: underline; }

/* Simple job-result listing cards (Shortlist.cshtml, SavedList.cshtml) - a
   plain "here are your jobs" list with no search form, distinct from
   Results.cshtml's own separate hero/facet visual system, so it gets its own
   lightweight card treatment rather than reusing Results' styling. Both pages
   need this identically, so promoted straight to shared CSS. */
.mpats-modern-page .mm-job-card { margin-bottom: 16px; }
.mpats-modern-page .mm-job-card h2 { margin-bottom: 10px; font-size: 16px; }
.mpats-modern-page .mm-job-badge {
  display: inline-block; background: var(--mm-row-accent); color: #fff;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 999px; margin-right: 8px; vertical-align: middle;
}
.mpats-modern-page .mm-job-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13.5px; color: var(--mm-text-secondary); margin-bottom: 10px; }
.mpats-modern-page .mm-job-meta strong { color: var(--mm-text-primary); font-weight: 600; }
.mpats-modern-page .mm-job-summary { color: var(--mm-text-primary); font-size: 14px; line-height: 1.6; margin-bottom: 12px; }
.mpats-modern-page .mm-pagination { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
.mpats-modern-page .mm-pagination-current {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 16px; border-radius: 999px;
  background: var(--mm-brand); color: var(--mm-brand-text); font-weight: 600; font-size: 14px;
}

/* The Divi footer sits outside .mpats-modern-page (sibling of #main-content, not
   a descendant), so it can't be scoped like the rules above. Any page with an
   incompletely-cleared float pair above it (e.g. SignUp's two-column cards) can
   otherwise bleed layout into the footer - clearing it here fixes that for every
   page site-wide instead of patching each page's own markup. */
footer.et-l--footer { clear: both; }
.container .page-header {
    border-bottom: none;
}