/* MayDay Co. Hub — shared polish layered on top of each module's own themed CSS.
   Each module (booking, report cards, training log) carries its own full palette;
   this file adds the cross-cutting pieces: step/card transitions, micro-interactions,
   and the wp-admin skin every MayDay Co. admin screen shares.
   Palette: spruce-teal #1E3A3B, parchment #F2EEE3, bone #E6E0CE, muted violet
   #5B4B8A (everything clickable), soft butter #DBC98A (labels on spruce grounds).
   No gradients, no rounded cards, no drop shadows -- rules and hairlines instead. */

:root {
  --mdh-spruce: #1E3A3B;
  --mdh-spruce-line: rgba(30,58,59,0.24);
  --mdh-parchment: #F2EEE3;
  --mdh-bone: #E6E0CE;
  --mdh-violet: #5B4B8A;
  --mdh-butter: #DBC98A;
  --mdh-gold: #96762A;
  --mdh-rust: #8A4A3F;
  --f-head: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body: 'Libre Baskerville', Georgia, serif;
}

#mpbs-app .mpbs-step-panel,
#mpbs-offsite-app .mpbs-step-panel {
  /* Step switching here is instant (matches the original plugin's behavior exactly) --
     intentionally no transition on these two, since a jQuery .animate() and a CSS
     transition both touching opacity on the same element can fight each other in some
     browsers. Report cards and training log tabs use pure CSS below, which is safe. */
}

.mdc-field,
.mdc-card,
.mtl-tab-panel {
  transition: opacity 0.18s ease;
}

.mdc-field.mdc-step-entering {
  animation: mdh-fade-up 0.22s ease;
}

.mdc-card {
  animation: mdh-fade-up 0.25s ease;
}

@keyframes mdh-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Buttons across all three modules get a slightly softer, consistent press feel. */
.mpbs-btn-primary,
.mpbs-btn-outline,
.mpbs-btn-ghost,
.mdc-btn-next,
.mdc-btn-back,
.mtl-front-btn {
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mpbs-btn-primary:active,
.mdc-btn-next:active,
.mtl-front-btn:active {
  opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Ceremonial wp-admin skin -- wraps every MayDay Co. admin page except the
   calendar (which has its own bespoke treatment). Overrides native wp-admin
   chrome (tables, buttons, form rows, notices) rather than replacing markup,
   so it stays low-risk against WordPress core updates. Spruce-teal ground
   (reads near-black, stays warm), a 3px double rule standing in for the
   card border a certificate/letterhead would use, and hairline grid tables
   in place of rounded panels. ---- */
.mdh-dark-admin {
  background: var(--mdh-spruce);
  border: none;
  border-top: 3px double var(--mdh-butter);
  border-radius: 0;
  padding: 28px 26px;
  margin: 20px 20px 0 0;
  box-shadow: none;
  font-family: var(--f-body);
  color: var(--mdh-parchment);
}
.mdh-dark-admin h1 {
  font-family: var(--f-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--mdh-parchment); font-size: 22px; margin: 0 0 18px;
}
.mdh-dark-admin h2, .mdh-dark-admin h3 {
  font-family: var(--f-head); color: var(--mdh-parchment); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.mdh-dark-admin p, .mdh-dark-admin label, .mdh-dark-admin td, .mdh-dark-admin th, .mdh-dark-admin li { color: var(--mdh-parchment); }
.mdh-dark-admin a { color: var(--mdh-butter); }
.mdh-dark-admin a:hover { opacity: 0.8; }

.mdh-dark-admin .description, .mdh-dark-admin .mpbs-note, .mdh-dark-admin small { color: rgba(242,238,227,0.65); }

/* Tables -- hairline grid, row and column dividers, no fills. */
.mdh-dark-admin table.widefat,
.mdh-dark-admin table.form-table {
  background: transparent; border: none; box-shadow: none; color: var(--mdh-parchment);
  font-family: var(--f-body);
}
.mdh-dark-admin table.widefat thead th,
.mdh-dark-admin table.widefat tfoot th {
  background: transparent; color: var(--mdh-butter); border: none; border-bottom: 2px solid var(--mdh-butter);
  font-family: var(--f-head); font-weight: 600;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em;
}
.mdh-dark-admin table.widefat td, .mdh-dark-admin table.widefat th { border-color: rgba(242,238,227,0.14); }
.mdh-dark-admin table.widefat tbody tr:nth-child(odd) { background: transparent; }
.mdh-dark-admin table.widefat tbody tr:nth-child(even) { background: rgba(242,238,227,0.03); }
.mdh-dark-admin table.widefat tbody tr:hover { background: rgba(91,75,138,0.14); }
.mdh-dark-admin table.form-table th { font-family: var(--f-head); color: var(--mdh-parchment); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: 12px; }
.mdh-dark-admin table.form-table td { color: var(--mdh-parchment); }

/* Buttons -- sharp corners, Oswald small caps, violet is the only clickable color. */
.mdh-dark-admin .button, .mdh-dark-admin .button-secondary {
  background: transparent; border: 1px solid rgba(242,238,227,0.35); color: var(--mdh-parchment); border-radius: 0;
  box-shadow: none; text-shadow: none;
  font-family: var(--f-head); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 16px; height: auto; line-height: 2;
}
.mdh-dark-admin .button:hover, .mdh-dark-admin .button-secondary:hover {
  background: rgba(242,238,227,0.06); color: var(--mdh-parchment); border-color: var(--mdh-parchment);
}
.mdh-dark-admin .button-primary {
  background: var(--mdh-violet);
  border: 1px solid var(--mdh-violet); color: var(--mdh-parchment); border-radius: 0; text-shadow: none;
  font-family: var(--f-head); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11.5px;
  box-shadow: none; padding: 4px 18px; height: auto; line-height: 2;
}
.mdh-dark-admin .button-primary:hover {
  background: var(--mdh-spruce); color: var(--mdh-violet); border-color: var(--mdh-violet);
}
.mdh-dark-admin .button-link-delete { color: var(--mdh-rust); }

/* Inputs */
.mdh-dark-admin input[type=text], .mdh-dark-admin input[type=number],
.mdh-dark-admin input[type=email], .mdh-dark-admin input[type=tel],
.mdh-dark-admin input[type=date], .mdh-dark-admin input[type=time],
.mdh-dark-admin input[type=password], .mdh-dark-admin input[type=url],
.mdh-dark-admin select, .mdh-dark-admin textarea {
  background: rgba(242,238,227,0.06); border: 1px solid rgba(242,238,227,0.25); color: var(--mdh-parchment); border-radius: 0;
  box-shadow: none; padding: 6px 10px; font-family: var(--f-body);
}
.mdh-dark-admin input:focus, .mdh-dark-admin select:focus, .mdh-dark-admin textarea:focus {
  outline: none; box-shadow: 0 0 0 2px rgba(91,75,138,0.4); border-color: var(--mdh-violet);
}
.mdh-dark-admin input[type=checkbox], .mdh-dark-admin input[type=radio] { accent-color: var(--mdh-violet); }

/* Notices */
.mdh-dark-admin .notice, .mdh-dark-admin .updated, .mdh-dark-admin .error {
  background: rgba(242,238,227,0.05); border: none; border-left: 3px solid var(--mdh-butter);
  color: var(--mdh-parchment); box-shadow: none; border-radius: 0; font-family: var(--f-body);
}
.mdh-dark-admin .notice-error, .mdh-dark-admin .error { border-left-color: var(--mdh-rust); }
.mdh-dark-admin .notice-warning { border-left-color: var(--mdh-gold); }
.mdh-dark-admin .notice-dismiss::before { color: rgba(242,238,227,0.6); }
.mdh-dark-admin .notice-dismiss:hover::before { color: var(--mdh-parchment); }

/* Cards / boxes some pages use for grouping -- hairline frame, no fill, no radius. */
.mdh-dark-admin .mpbs-card, .mdh-dark-admin .card {
  background: transparent; border: 1px solid rgba(242,238,227,0.2); border-radius: 0; box-shadow: none;
  padding: 16px 18px; color: var(--mdh-parchment);
}