/* ============================================================================
 * mo-ui.css — Shared UI/UX foundation (Phase 1 of the UI overhaul)
 * Linked from resources/views/layouts/app.blade.php <head>.
 * NOTE: public/css/app.css is a legacy Bootstrap dump and is NOT loaded by the
 * app — put shared styles HERE, and page-specific tweaks in a page <style> block
 * or an @push('head') stack. See UI_PATTERNS.md.
 * ========================================================================== */

/* ---- Navbar: section links + active state -------------------------------- */
nav .mo-nav-link.active > a,
nav ul li.active > a {
  background-color: rgba(255, 255, 255, 0.18);
}
nav .dropdown-content li > a { color: var(--mo-interactive); }

/* ---- Page header (title + purpose sentence) ------------------------------ */
.mo-page-header {
  margin: 28px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mo-line);
}
.mo-page-header .mo-page-title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 600;
  color: var(--mo-primary);
  line-height: 1.2;
}
.mo-page-header .mo-page-purpose {
  margin: 0;
  font-size: 15px;
  color: var(--mo-muted-strong);
  max-width: 720px;
}
.mo-page-header .mo-page-help {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--mo-interactive);
}

/* ---- Flash / validation messages ----------------------------------------- */
.mo-flash {
  margin: 18px 0;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  border-left: 4px solid transparent;
}
.mo-flash ul { margin: 6px 0 0; padding-left: 18px; }
.mo-flash--success { background: var(--mo-success-bg); border-left-color: var(--mo-success); color: var(--mo-success); }
.mo-flash--error   { background: var(--mo-error-bg); border-left-color: var(--mo-error); color: var(--mo-error); }
.mo-flash--info    { background: var(--mo-secondary); border-left-color: var(--mo-interactive); color: var(--mo-primary); }

/* ---- Consistent table action buttons (Edit / Delete) --------------------- *
 * Use these on every entity table so actions look identical app-wide.
 * <a class="mo-btn mo-btn--edit">Edit</a>
 * <button class="mo-btn mo-btn--delete">Delete</button>                       */
.mo-btn {
  display: inline-block;
  padding: 4px 14px;
  margin: 0 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  text-transform: none;
  background: none;
}
.mo-btn--edit   { color: var(--mo-interactive); border-color: var(--mo-line); background: var(--mo-bg); }
.mo-btn--edit:hover   { background: var(--mo-secondary); }
.mo-btn--delete { color: var(--mo-error); border-color: var(--mo-error-line); background: var(--mo-bg); }
.mo-btn--delete:hover { background: var(--mo-error-bg); }

/* ---- "Any" placeholder for blank origin/destination cells ---------------- */
.mo-any { color: var(--mo-muted); font-style: italic; }

/* ---- Small helpers ------------------------------------------------------- */
.mo-unit { color: var(--mo-muted); font-weight: 400; }   /* units in labels: Mass (kg) */
.mo-muted-key { color: var(--mo-muted); font-size: 0.85em; }  /* machine key next to human label */
